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,11 +26,16 @@ export const ChainSwitcherRow = style([
     cursor: 'pointer',
     color: 'blackBlue',
     borderRadius: '12',
+    width: { sm: 'full' },
   }),
   {
     lineHeight: '24px',
+    '@media': {
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
         width: '204px',
       },
+    },
+  },
 ])
 
 export const Image = style([

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,38 +79,8 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
 
   const isSupported = isChainAllowed(chainId)
 
-  return (
+  const dropdown = (
-    <Box position="relative" ref={ref}>
+    <NavDropdown top={54} leftAligned={leftAlign} paddingBottom={8} paddingTop={8}>
-      <Row
-        as="button"
-        gap="8"
-        className={styles.ChainSwitcher}
-        background={isOpen ? 'accentActiveSoft' : 'none'}
-        onClick={toggleOpen}
-      >
-        {!isSupported ? (
-          <>
-            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
-            <Box as="span" className={subhead} 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' }}>
-              {info.label}
-            </Box>
-          </>
-        )}
-        {isOpen ? (
-          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
-        ) : (
-          <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 ? (
@@ -123,7 +96,39 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
         )}
       </Column>
     </NavDropdown>
+  )
+
+  return (
+    <Box position="relative" ref={ref}>
+      <Row
+        as="button"
+        gap="8"
+        className={styles.ChainSwitcher}
+        background={isOpen ? 'accentActiveSoft' : 'none'}
+        onClick={toggleOpen}
+      >
+        {!isSupported ? (
+          <>
+            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
+            <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} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+              {info.label}
+            </Box>
+          </>
         )}
+        {isOpen ? (
+          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
+        ) : (
+          <NewChevronDownIcon width={16} height={16} color="blackBlue" />
+        )}
+      </Row>
+      {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`,
+        top: isMobile ? 'unset' : `${top}px`,
-        left: centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
+        left: isMobile ? 0 : centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
-        right: centerHorizontally || leftAligned ? 'auto' : '0px',
+        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',