fix(explorer/ui): mobile view landing (#990)

Changes to the mobile view task: https://app.asana.com/0/1206208509925075/1207122698129971 --------- Co-authored-by: Morne <morne@luckybeard.com>
omni-network · May 6, 2024 · 4108f47 · 4108f47
1 parent b5b804e
commit 4108f47
Show file tree

Hide file tree

Showing 15 changed files with 199 additions and 58 deletions.
diff --git a/explorer/ui/app/assets/images/Close-Med.svg b/explorer/ui/app/assets/images/Close-Med.svg
diff --git a/explorer/ui/app/assets/images/Group.svg b/explorer/ui/app/assets/images/Group.svg
diff --git a/explorer/ui/app/components/details/BackBtn.tsx b/explorer/ui/app/components/details/BackBtn.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+export const BackBtn = ({onBackClickHandler}) => {
+  return (
+    <button
+      onClick={onBackClickHandler}
+      type="button"
+      className="text-default items-center inline-flex cursor-pointer disabled:cursor-default bg-bg-input-active disabled:bg-bg-input-default rounded-full text-cb-md px-4 py-2 min-w-[60px]"
+    >
+      <svg
+        className="w-6 h-6 me-2"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 14 10"
+      >
+        <path
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1"
+          d="M13 5H1m0 0 4 4M1 5l4-4"
+        ></path>
+      </svg>
+      Back
+    </button>
+  )
+}
diff --git a/explorer/ui/app/components/home/messageDataTable.tsx b/explorer/ui/app/components/home/messageDataTable.tsx
@@ -130,7 +130,7 @@ export default function XMsgDataTable() {
         header: () => <span>ID</span>,
         cell: (value: any) => {
           return (
-            <Link target="_blank" to={`xblock/${value.getValue()}`} className="link">
+            <Link to={`xmsg/${value.getValue()}`} className="link">
               {value.getValue()}
             </Link>
           )
@@ -147,6 +147,12 @@ export default function XMsgDataTable() {
           </span>
         ),
       },
+      {
+        ...columnConfig,
+        accessorKey: 'Node.Status',
+        header: () => <span>Status</span>,
+        cell: (value: any) => <Tag status={value.getValue()} />,
+      },
       {
         ...columnConfig,
         accessorKey: 'Node.SourceChainID',
@@ -368,8 +374,8 @@ export default function XMsgDataTable() {
             value={filterParams.destChain}
           />
         </div>
-        <div className={`flex justify-between mb-4`}>
-          <div className="">
+        <div className={`flex justify-between mb-4 flex-col md:flex-row`}>
+          <div className={`flex justify-between mb-4 flex-col md:flex-row`}>
             <FilterOptions
               value={filterParams.status}
               onSelection={status => {
@@ -385,7 +391,7 @@ export default function XMsgDataTable() {
             disabled={!hasFiltersApplied}
             onClick={clearFilters}
             kind="text"
-            className={`flex justify-center items-center ${!hasFiltersApplied && 'opacity-40'}`}
+            className={`flex items-center ${!hasFiltersApplied && 'opacity-40'}`}
           >
             {' '}
             <span className="icon-refresh text-default text-[20px]" />

diff --git a/explorer/ui/app/components/queries/messages.tsx b/explorer/ui/app/components/queries/messages.tsx
@@ -1,7 +1,25 @@
 import { DocumentNode } from 'graphql'
-import { gql } from 'urql'
+import { gql, useQuery } from 'urql'
 import { graphql } from '~/graphql'
-import { XMsgsDocument } from '~/graphql/graphql'
+import { XMsg, XMsgsDocument } from '~/graphql/graphql'
+
+export const GetXMsg = (sourceChainID: string, destChainID: string, streamOffset: string): XMsg | null => {
+  const [result] = useQuery({
+    query: xmsg,
+    variables: {
+      sourceChainID,
+      destChainID,
+      streamOffset,
+    },
+  })
+  const { data, fetching, error } = result
+  // TODO handle error properly here
+  if (!error) {
+    return data as XMsg
+  } else {
+    return null
+  }
+}
 
 
 export const xmsg = graphql(`

diff --git a/explorer/ui/app/components/shared/dropdown.tsx b/explorer/ui/app/components/shared/dropdown.tsx
@@ -4,13 +4,15 @@ interface Props {
   onChange?: Function
   position?: 'left' | 'right' | 'center'
   defaultValue?: string
+  isFullWidth?: boolean
 }
 
 const Dropdown: React.FC<Props> = ({
   options,
   onChange = () => {},
   position = 'center',
   defaultValue = '',
+  isFullWidth = false,
   ...props
 }) => {
   // conditional styles
@@ -27,11 +29,12 @@ const Dropdown: React.FC<Props> = ({
         onClick={e => {
           setIsOpen(!isOpen)
         }}
-        className={`flex items-center gap-4 text-left px-3 pl-5 py-2 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px]  border-[1px] border-border-subtle overflow-hidden ${position === 'left' && leftStyle} ${position === 'right' && rightStyle} ${isOpen && 'bg-overlay bg-opacity-100 !border-border-default'} `}
+        className={`flex items-center gap-4 text-left px-3 pl-5 py-2 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px]  border-[1px] border-border-subtle overflow-hidden ${position === 'left' && leftStyle} ${position === 'right' && rightStyle} ${isOpen && 'bg-overlay bg-opacity-100 !border-border-default'} ${isFullWidth && 'w-full'}`}
       >
         <span className="text-nowrap text-default">
           {options.find(option => option.value === value)?.display}
         </span>
+        <div className='grow'></div>
         <div className="icon-dropdown-down text-default pointer-events-none  text-[20px] " />
       </button>
 
@@ -47,7 +50,7 @@ const Dropdown: React.FC<Props> = ({
 
       {/* dropdown container */}
       {isOpen && (
-        <div className="flex flex-col gap-2 absolute top-10 z-10 bg-overlay border-[1px] border-default rounded-[12px] p-3 min-w-[217px]">
+        <div className="flex flex-col gap-2 absolute top-10 w-full z-30 bg-overlay border-[1px] border-default rounded-[12px] p-3 min-w-[217px]">
           {options.map((option, i) => (
             <div
               key={`option-${i}`}

diff --git a/explorer/ui/app/components/shared/explorerDropdown.tsx b/explorer/ui/app/components/shared/explorerDropdown.tsx
@@ -30,7 +30,7 @@ const ExplorerDropdown: React.FC<Props> = ({ ...props }) => {
         onClick={e => {
           setIsOpen(!isOpen)
         }}
-        className={`flex gap-2 flex-row items-center text-nowrap relative text-left px-3 pl-5 h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px]  border-subtle overflow-hidden ${isOpen && 'bg-overlay bg-opacity-100'} `}
+        className={`flex gap-2 px-3 flex-row items-center text-nowrap relative text-left h-[48px] text-cb-md text-subtlest appearance-none rounded-[1000px]  border-subtle overflow-hidden ${isOpen && 'bg-overlay bg-opacity-100'} `}
       >
         <label
           className={`z-10 pointer-events-none text-sm text-[12px] font-normal text-subtle  ${isOpen && '!text-default'} `}
@@ -49,12 +49,12 @@ const ExplorerDropdown: React.FC<Props> = ({ ...props }) => {
           onClick={() => {
             setIsOpen(false)
           }}
-          className={`fixed w-screen h-screen bg-transparent top-0 left-0 right-0 bottom-0 z-10`}
+          className={`fixed w-screen h-screen bg-transparent top-0 left-0 min-[820px]:right-0 bottom-0 z-10`}
         />
       )}
       {/* dropdown container */}
       {isOpen && (
-        <div className="flex flex-col gap-2 absolute top-10 right-0 z-10 bg-overlay border-[1px] border-default rounded-[12px] p-3 ">
+        <div className="flex flex-col gap-2 absolute top-10 min-[820px]:right-0 z-10 bg-overlay border-[1px] border-default rounded-[12px] p-3 ">
           {items.map((option, i) => (
             <a
               href={option.url}

diff --git a/explorer/ui/app/components/shared/filterOptions.tsx b/explorer/ui/app/components/shared/filterOptions.tsx
@@ -17,7 +17,7 @@ const Option: React.FC<OptionProps> = ({ option, active, onClick }) => {
       onClick={() => {
         onClick && onClick()
       }}
-      className={`flex gap-1 cursor-pointer px-[18px] py-[7px] text-default font-bold text-center rounded-full border-border-subtle border-[1px] content-center min-w-[70px] bg-bg-input-default hover:border-border-default hover:bg-bg-input-hover ${active && 'bg-bg-input-active border-border-default'}`}
+      className={`flex gap-1 cursor-pointer px-[9px] py-[4px]  sm:px-[18px] sm:py-[7px] text-default sm:font-bold text-center rounded-full border-border-subtle border-[1px] content-center bg-bg-input-default hover:border-border-default hover:bg-bg-input-hover ${active && 'bg-bg-input-active border-border-default'}`}
     >
       {active && <span className="icon-tick-med" />}
       {option}
@@ -29,7 +29,7 @@ const FilterOptions: React.FC<Props> = ({ options, onSelection, value, ...props
   // const [selectedOption, setSelectedOption] = React.useState<string>(options[0])
 
   return (
-    <div {...props} className={`flex gap-2 items-center`}>
+    <div {...props} className={`flex gap-2 md:gap-2 items-center w-full`}>
       {options.map(option => (
         <Option
           key={option}

diff --git a/explorer/ui/app/components/shared/navbar.tsx b/explorer/ui/app/components/shared/navbar.tsx
@@ -1,13 +1,14 @@
 import { ThemeButton } from './themebutton'
-import logo from '../../../public/Horizontal_Word Black_Symbol Black.png'
 import Logo from './logo'
 import { Link } from '@remix-run/react'
 import ExplorerDropdown from './explorerDropdown'
 import Dropdown from './dropdown'
 import { useLocation } from '@remix-run/react'
 import { useEffect, useState } from 'react'
+import { CloseIcon } from '../svg/closeIcon'
+import { MenuIcon } from '../svg/menuIcon'
 
-export default function Navbar() {
+export default function Navbar({ openNav, openNavHandler }) {
   const evmExplorerLinks = [
     {
       value: 'blockScout',
@@ -16,8 +17,6 @@ export default function Navbar() {
     },
   ]
 
-  const location = useLocation()
-
   const [currentNet, setCurrentNet] = useState<'testnet' | 'mainnet'>('testnet')
 
   useEffect(() => {
@@ -29,8 +28,8 @@ export default function Navbar() {
   }, [])
 
   return (
-    <header className="static border-none py-3 px-8">
-      <div className="w-full flex items-center gap-8">
+    <header className="static border-none py-3 px-8 relative">
+      <div className="w-full flex items-center gap-8 max-[819px]:hidden">
         <Link to="/" className="m-auto">
           <Logo />
         </Link>
@@ -64,6 +63,51 @@ export default function Navbar() {
           <ThemeButton />
         </div>
       </div>
+      <div className={`w-full min-[820px]:hidden`}>
+        <nav className={`w-full gap-2 bg-surface flex flex-col ${openNav && 'h-[calc(screen-2rem)] z-20'}`}>
+          <div className="flex w-full items-center">
+            <Link to="/" className="m-auto relative ">
+              <Logo />
+            </Link>
+            <div className="grow"></div>
+            {openNav && <CloseIcon onClick={openNavHandler} />}
+            {!openNav && <MenuIcon onClick={openNavHandler} />}
+          </div>
+
+          <div className="mt-4"></div>
+
+          {openNav && (
+            <>
+              <Dropdown
+                isFullWidth={true}
+                onChange={value => {
+                  if (value === 'testnet') {
+                    window.location.replace('https://explorer.testnet.omni.network')
+                  }
+                  if (value === 'mainnet') {
+                    window.location.replace('https://explorer.mainnet.omni.network')
+                  }
+                }}
+                defaultValue={currentNet}
+                options={[
+                  { display: 'Testnet', value: 'testnet' },
+                  { display: 'Mainnet', value: 'mainnet' },
+                ]}
+              />
+              <Link target="_blank" to="https://forms.gle/EptLH4aFmH5btDWDA" className="group">
+                <span className="icon-question text-default text-[20px] group-hover:text-subtle" />{' '}
+                <span className="text-default text-b-md group-hover:text-subtle">
+                  Share your feedback
+                </span>
+              </Link>
+              <ExplorerDropdown />
+              <div>
+                <ThemeButton />
+              </div>
+            </>
+          )}
+        </nav>
+      </div>
     </header>
   )
 }
diff --git a/explorer/ui/app/components/shared/simpleTable.tsx b/explorer/ui/app/components/shared/simpleTable.tsx
@@ -40,7 +40,6 @@ export default function SimpleTable({
     <div className="overflow-x-auto ">
       <div className="w-full bg-raised rounded-lg min-w-[919px]">
         {headChildren}
-
         <table className="min-w-full">
           <thead className="">
             {table.getHeaderGroups().map(headerGroup => (

diff --git a/explorer/ui/app/components/svg/closeIcon.tsx b/explorer/ui/app/components/svg/closeIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const CloseIcon = ({onClick}) => {
+  return (
+    <svg onClick={onClick} className='fill-current' width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons / Utility / Close-Med">
+        <path
+          id="Path"
+          d="M18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L18.5303 6.53033ZM5.46968 17.4697C5.17678 17.7626 5.17678 18.2374 5.46968 18.5303C5.76257 18.8232 6.23744 18.8232 6.53034 18.5303L5.46968 17.4697ZM6.53034 5.46967C6.23744 5.17678 5.76257 5.17678 5.46968 5.46967C5.17678 5.76256 5.17678 6.23744 5.46968 6.53033L6.53034 5.46967ZM17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L17.4697 18.5303ZM17.4697 5.46967L5.46968 17.4697L6.53034 18.5303L18.5303 6.53033L17.4697 5.46967ZM5.46968 6.53033L17.4697 18.5303L18.5303 17.4697L6.53034 5.46967L5.46968 6.53033Z"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/explorer/ui/app/components/svg/menuIcon.tsx b/explorer/ui/app/components/svg/menuIcon.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const MenuIcon = ({onClick}) => {
+  return (
+    <svg onClick={onClick} className='fill-current'  width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Group">
+        <g id="Group_2">
+          <path
+            id="Path"
+            d="M3 5.728H21"
+            stroke="#F7F7F7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Path_2"
+            d="M3 12.728H21"
+            stroke="#F7F7F7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Path_3"
+            d="M3 19.728H21"
+            stroke="#F7F7F7"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
diff --git a/explorer/ui/app/root.tsx b/explorer/ui/app/root.tsx
@@ -13,8 +13,9 @@ import {
 import { Client, Provider, cacheExchange, fetchExchange } from 'urql'
 import { useEnv } from './lib/use-env'
 import Navbar from './components/shared/navbar'
-import {Footer} from './components/shared/footer'
+import { Footer } from './components/shared/footer'
 import { gqlClient } from './entry.server'
+import { useState } from 'react'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
 export type LoaderData = SerializeFrom<typeof loader>
@@ -27,6 +28,11 @@ export function loader() {
 }
 
 function App() {
+  const [openNav, setShowSideDrawer] = useState(false)
+
+  const menuClickHandler = () => {
+    setShowSideDrawer(prevState => !prevState)
+  }
   return (
     <html lang="en" data-theme="dark" className="h-full bg-surface">
       <head>
@@ -36,13 +42,15 @@ function App() {
         <Links />
       </head>
       <body className="bg-surface flex flex-col justify-start content-start  h-full">
-        <Navbar />
-        <Outlet />
-        <div className="grow"></div>
-        <Footer />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <Navbar openNavHandler={menuClickHandler} openNav={openNav} />
+        <div className={`${openNav && 'hidden'}`}>
+          <Outlet />
+          <div className="grow"></div>
+          <Footer />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </div>
       </body>
     </html>
   )