feat: mobile network switcher (#4486)

* feat: mobile network switcher

* adjust bottom border radius on mobile

Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css'
 import { lightGrayOverlayOnHover } from 'nft/css/common.css'
 
-import { sprinkles } from '../../nft/css/sprinkles.css'
+import { breakpoints, sprinkles } from '../../nft/css/sprinkles.css'
 
 export const ChainSwitcher = style([
   lightGrayOverlayOnHover,
@@ -26,10 +26,15 @@ export const ChainSwitcherRow = style([
     cursor: 'pointer',
     color: 'blackBlue',
     borderRadius: '12',
+    width: { sm: 'full' },
   }),
   {
     lineHeight: '24px',
-    width: '204px',
+    '@media': {
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
+        width: '204px',
+      },
+    },
   },
 ])
 

src/components/NavBar/ChainSwitcher.tsx

@@ -5,10 +5,12 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { Box } from 'nft/components/Box'
+import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
 import { CheckMarkIcon, NewChevronDownIcon, NewChevronUpIcon, TokenWarningRedIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
 import { themeVars, vars } from 'nft/css/sprinkles.css'
+import { useIsMobile } from 'nft/hooks'
 import { ReactNode, useReducer, useRef } from 'react'
 import { isChainAllowed } from 'utils/switchChain'
 
@@ -55,12 +57,13 @@ const NETWORK_SELECTOR_CHAINS = [
 ]
 
 interface ChainSwitcherProps {
-  isMobile?: boolean
+  leftAlign?: boolean
 }
 
-export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
+export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
   const { chainId } = useWeb3React()
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
+  const isMobile = useIsMobile()
 
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
@@ -76,6 +79,25 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
 
   const isSupported = isChainAllowed(chainId)
 
+  const dropdown = (
+    <NavDropdown top={54} leftAligned={leftAlign} paddingBottom={8} paddingTop={8}>
+      <Column marginX="8">
+        {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
+          isSupported ? (
+            <ChainRow
+              onSelectChain={async (targetChainId: SupportedChainId) => {
+                await selectChain(targetChainId)
+                toggleOpen()
+              }}
+              targetChain={chainId}
+              key={chainId}
+            />
+          ) : null
+        )}
+      </Column>
+    </NavDropdown>
+  )
+
   return (
     <Box position="relative" ref={ref}>
       <Row
@@ -88,14 +110,14 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
         {!isSupported ? (
           <>
             <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
-            <Box as="span" className={subhead} style={{ lineHeight: '20px' }}>
+            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
               {info?.label ?? 'Unsupported'}
             </Box>
           </>
         ) : (
           <>
             <img src={info.logoUrl} alt={info.label} className={styles.Image} />
-            <Box as="span" className={subhead} style={{ lineHeight: '20px' }}>
+            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
               {info.label}
             </Box>
           </>
@@ -106,24 +128,7 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
           <NewChevronDownIcon width={16} height={16} color="blackBlue" />
         )}
       </Row>
-      {isOpen && (
-        <NavDropdown top={60} leftAligned={isMobile} paddingBottom={8} paddingTop={8}>
-          <Column marginX="8">
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isSupported ? (
-                <ChainRow
-                  onSelectChain={async (targetChainId: SupportedChainId) => {
-                    await selectChain(targetChainId)
-                    toggleOpen()
-                  }}
-                  targetChain={chainId}
-                  key={chainId}
-                />
-              ) : null
-            )}
-          </Column>
-        </NavDropdown>
-      )}
+      {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
     </Box>
   )
 }

src/components/NavBar/NavDropdown.css.ts

@@ -1,18 +1,25 @@
 import { style } from '@vanilla-extract/css'
 
-import { sprinkles } from '../../nft/css/sprinkles.css'
+import { breakpoints, sprinkles } from '../../nft/css/sprinkles.css'
 
 export const NavDropdown = style([
   sprinkles({
-    position: 'absolute',
+    position: { sm: 'fixed', md: 'absolute' },
     background: 'lightGray',
     borderRadius: '12',
     borderStyle: 'solid',
     borderColor: 'medGray',
     borderWidth: '1px',
+    bottom: { sm: '56', md: 'unset' },
   }),
   {
     boxShadow: '0px 4px 12px 0px #00000026',
     zIndex: 10,
+    '@media': {
+      [`screen and (max-width: ${breakpoints.sm}px)`]: {
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
+      },
+    },
   },
 ])

src/components/NavBar/NavDropdown.tsx

@@ -1,4 +1,5 @@
 import { Box } from 'nft/components/Box'
+import { useIsMobile } from 'nft/hooks'
 import { ReactNode } from 'react'
 
 import * as styles from './NavDropdown.css'
@@ -23,13 +24,14 @@ export const NavDropdown = ({
   paddingTop,
   children,
 }: NavDropdownProps) => {
+  const isMobile = useIsMobile()
   return (
     <Box
       paddingX={horizontalPadding ? '16' : undefined}
       style={{
-        top: `${top}px`,
-        left: centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
-        right: centerHorizontally || leftAligned ? 'auto' : '0px',
+        top: isMobile ? 'unset' : `${top}px`,
+        left: isMobile ? 0 : centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
+        right: isMobile ? 0 : centerHorizontally || leftAligned ? 'auto' : '0px',
         transform: centerHorizontally ? 'translateX(-50%)' : 'unset',
         paddingBottom: paddingBottom ?? '24px',
         paddingTop: paddingTop ?? '24px',

src/components/NavBar/Navbar.tsx

@@ -43,7 +43,7 @@ const MobileNavbar = () => {
             <Box as="a" href="#/swap" className={styles.logoContainer}>
               <UniIconMobile width="44" height="44" className={styles.logo} />
             </Box>
-            <ChainSwitcher isMobile={true} />
+            <ChainSwitcher leftAlign={true} />
           </Box>
           <Box className={styles.rightSideMobileContainer}>
             <Row gap="16">

src/components/NavBar/SuggestionRow.tsx

@@ -4,7 +4,6 @@ import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { vars } from 'nft/css/sprinkles.css'
 import { useSearchHistory } from 'nft/hooks'
-// import { fetchSearchCollections, fetchTrendingCollections } from 'nft/queries'
 import { FungibleToken, GenieCollection } from 'nft/types'
 import { ethNumberStandardFormatter } from 'nft/utils/currency'
 import { putCommas } from 'nft/utils/putCommas'

src/nft/css/sprinkles.css.ts

@@ -112,6 +112,7 @@ const spacing = {
   '48': '48px',
   '50': '50px',
   '52': '52px',
+  '56': '56px',
   '60': '60px',
   '64': '64px',
   '82': '82px',