feat: update Chain Switcher Modal and Active State (#4471)

* Add unsupported network and active state to chain switcher

* update switcher dropdown modal

* undo

* undo new styles, adjust padding

* update padding

* use supported chain helper fn
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.css.ts

 import { style } from '@vanilla-extract/css'
+import { lightGrayOverlayOnHover } from 'nft/css/common.css'
 
-import { sprinkles, vars } from '../../nft/css/sprinkles.css'
+import { sprinkles } from '../../nft/css/sprinkles.css'
 
 export const ChainSwitcher = style([
+  lightGrayOverlayOnHover,
   sprinkles({
     borderRadius: '8',
     paddingY: '8',
@@ -11,34 +13,30 @@ export const ChainSwitcher = style([
     border: 'none',
     color: 'blackBlue',
     background: 'none',
-    transition: '250',
   }),
-  {
-    ':hover': {
-      background: vars.color.lightGrayOverlay,
-    },
-  },
 ])
 
 export const ChainSwitcherRow = style([
+  lightGrayOverlayOnHover,
   sprinkles({
     border: 'none',
     justifyContent: 'space-between',
-    paddingX: '16',
-    paddingY: '12',
+    paddingX: '8',
+    paddingY: '8',
     cursor: 'pointer',
     color: 'blackBlue',
+    borderRadius: '12',
   }),
   {
     lineHeight: '24px',
-    width: '308px',
+    width: '204px',
   },
 ])
 
 export const Image = style([
   sprinkles({
-    width: '28',
-    height: '28',
+    width: '20',
+    height: '20',
   }),
 ])
 
@@ -48,9 +46,3 @@ export const Icon = style([
     marginRight: '12',
   }),
 ])
-
-export const Indicator = style([
-  sprinkles({
-    marginLeft: '8',
-  }),
-])

src/components/NavBar/ChainSwitcher.tsx

@@ -6,9 +6,9 @@ import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { NewChevronDownIcon, NewChevronUpIcon } from 'nft/components/icons'
-import { CheckMarkIcon } from 'nft/components/icons'
+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 { ReactNode, useReducer, useRef } from 'react'
 import { isChainAllowed } from 'utils/switchChain'
 
@@ -27,9 +27,10 @@ const ChainRow = ({
   const { label, logoUrl } = getChainInfo(targetChain)
 
   return (
+    <Column borderRadius="12">
       <Row
         as="button"
-      background={active ? 'lightGrayOverlay' : 'none'}
+        background="none"
         className={`${styles.ChainSwitcherRow} ${subhead}`}
         onClick={() => onSelectChain(targetChain)}
       >
@@ -37,8 +38,9 @@ const ChainRow = ({
           <img src={logoUrl} alt={label} className={styles.Icon} />
           {label}
         </ChainDetails>
-      {active && <CheckMarkIcon width={20} height={20} />}
+        {active && <CheckMarkIcon width={20} height={20} color={vars.color.blue400} />}
       </Row>
+    </Column>
   )
 }
 
@@ -72,13 +74,32 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
     return null
   }
 
+  const isSupported = isChainAllowed(chainId)
+
   return (
     <Box position="relative" ref={ref}>
-      <Row as="button" gap="8" className={styles.ChainSwitcher} onClick={toggleOpen}>
+      <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" />
         ) : (
@@ -86,10 +107,10 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
         )}
       </Row>
       {isOpen && (
-        <NavDropdown top={60} leftAligned={isMobile}>
-          <Column gap="4">
+        <NavDropdown top={60} leftAligned={isMobile} paddingBottom={8} paddingTop={8}>
+          <Column marginX="8">
             {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(chainId) ? (
+              isSupported ? (
                 <ChainRow
                   onSelectChain={async (targetChainId: SupportedChainId) => {
                     await selectChain(targetChainId)

src/components/NavBar/NavDropdown.css.ts

@@ -9,8 +9,6 @@ export const NavDropdown = style([
     borderRadius: '12',
     borderStyle: 'solid',
     borderColor: 'medGray',
-    paddingTop: '16',
-    paddingBottom: '24',
     borderWidth: '1px',
   }),
   {

src/components/NavBar/NavDropdown.tsx

@@ -9,6 +9,8 @@ interface NavDropdownProps {
   leftAligned?: boolean
   horizontalPadding?: boolean
   centerHorizontally?: boolean
+  paddingBottom?: number
+  paddingTop?: number
   children: ReactNode
 }
 
@@ -17,6 +19,8 @@ export const NavDropdown = ({
   centerHorizontally,
   leftAligned,
   horizontalPadding,
+  paddingBottom,
+  paddingTop,
   children,
 }: NavDropdownProps) => {
   return (
@@ -27,6 +31,8 @@ export const NavDropdown = ({
         left: centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
         right: centerHorizontally || leftAligned ? 'auto' : '0px',
         transform: centerHorizontally ? 'translateX(-50%)' : 'unset',
+        paddingBottom: paddingBottom ?? '24px',
+        paddingTop: paddingTop ?? '24px',
         zIndex: 3,
       }}
       className={styles.NavDropdown}

src/nft/components/icons.tsx

@@ -161,7 +161,7 @@ export const BackArrowIcon = (props: SVGProps) => (
 )
 
 export const WarningIcon = (props: SVGProps) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" {...props}>
     <path
       fill="#0A0A3B"
       d="M7.994 12.995c2.848 0 5.198-2.35 5.198-5.193 0-2.842-2.356-5.193-5.203-5.193C5.146 2.61 2.8 4.96 2.8 7.802c0 2.843 2.35 5.194 5.193 5.194zm0-4.334c-.296 0-.467-.165-.477-.467l-.07-2.506c-.01-.311.21-.527.542-.527.321 0 .557.22.547.532l-.08 2.501c-.01.307-.176.467-.462.467zm0 1.738c-.342 0-.623-.246-.623-.578 0-.331.276-.577.623-.577.341 0 .618.246.618.577 0 .337-.282.578-.618.578z"
@@ -1344,7 +1344,7 @@ export const TokenWarningRedIcon = (props: SVGProps) => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M10.8566 6.57347L10.2153 6.18449L10.2132 6.18807L10.8566 6.57347ZM5.20993 16.0001L4.56645 15.6147L4.56044 15.6251L5.20993 16.0001ZM6.34993 18.0001L6.34169 18.7501H6.34993V18.0001ZM17.6433 18.0001V18.7502L17.6515 18.7501L17.6433 18.0001ZM18.7833 16.0001L19.4328 15.625L19.4267 15.6147L18.7833 16.0001ZM13.1366 6.57347L13.78 6.18806L13.7778 6.1845L13.1366 6.57347ZM11.9966 5.93164V5.18164V5.93164ZM12.7467 10.0001C12.7467 9.58587 12.411 9.25008 11.9967 9.25008C11.5825 9.25008 11.2467 9.58587 11.2467 10.0001H12.7467ZM11.2467 12.6667C11.2467 13.081 11.5825 13.4167 11.9967 13.4167C12.411 13.4167 12.7467 13.081 12.7467 12.6667H11.2467ZM11.9967 14.5834C11.5825 14.5834 11.2467 14.9192 11.2467 15.3334C11.2467 15.7476 11.5825 16.0834 11.9967 16.0834V14.5834ZM12.0034 16.0834C12.4176 16.0834 12.7534 15.7476 12.7534 15.3334C12.7534 14.9192 12.4176 14.5834 12.0034 14.5834V16.0834ZM10.2132 6.18807L4.56653 15.6147L5.85333 16.3855L11.5 6.95887L10.2132 6.18807ZM4.56044 15.6251C4.37853 15.9401 4.28228 16.2973 4.28126 16.661L5.78125 16.6652C5.78154 16.5634 5.80849 16.4634 5.85942 16.3752L4.56044 15.6251ZM4.28126 16.661C4.28024 17.0248 4.37449 17.3825 4.55463 17.6986L5.8578 16.9558C5.80736 16.8673 5.78097 16.7671 5.78125 16.6652L4.28126 16.661ZM4.55463 17.6986C4.73477 18.0146 4.99452 18.278 5.30805 18.4624L6.06875 17.1696C5.98097 17.118 5.90824 17.0442 5.8578 16.9558L4.55463 17.6986ZM5.30805 18.4624C5.62157 18.6469 5.97793 18.7461 6.34169 18.7501L6.35817 17.2502C6.25632 17.2491 6.15654 17.2213 6.06875 17.1696L5.30805 18.4624ZM6.34993 18.7501H17.6433V17.2501H6.34993V18.7501ZM17.6515 18.7501C18.0153 18.7461 18.3716 18.6469 18.6851 18.4624L17.9244 17.1696C17.8367 17.2213 17.7369 17.2491 17.635 17.2502L17.6515 18.7501ZM18.6851 18.4624C18.9987 18.278 19.2584 18.0146 19.4386 17.6986L18.1354 16.9558C18.085 17.0442 18.0122 17.118 17.9244 17.1696L18.6851 18.4624ZM19.4386 17.6986C19.6187 17.3825 19.713 17.0248 19.7119 16.661L18.2119 16.6652C18.2122 16.7671 18.1858 16.8673 18.1354 16.9558L19.4386 17.6986ZM19.7119 16.661C19.7109 16.2973 19.6147 15.9401 19.4328 15.6251L18.1338 16.3752C18.1847 16.4634 18.2117 16.5634 18.2119 16.6652L19.7119 16.661ZM19.4267 15.6147L13.78 6.18807L12.4932 6.95887L18.1399 16.3855L19.4267 15.6147ZM13.7778 6.1845C13.5921 5.87836 13.3307 5.62525 13.0187 5.44959L12.2828 6.75667C12.3701 6.80585 12.4434 6.87672 12.4953 6.96244L13.7778 6.1845ZM13.0187 5.44959C12.7067 5.27392 12.3547 5.18164 11.9966 5.18164V6.68164C12.0969 6.68164 12.1954 6.70748 12.2828 6.75667L13.0187 5.44959ZM11.9966 5.18164C11.6385 5.18164 11.2865 5.27392 10.9745 5.44959L11.7104 6.75667C11.7978 6.70748 11.8963 6.68164 11.9966 6.68164V5.18164ZM10.9745 5.44959C10.6625 5.62525 10.401 5.87836 10.2153 6.1845L11.4978 6.96244C11.5498 6.87672 11.6231 6.80585 11.7104 6.75667L10.9745 5.44959ZM11.2467 10.0001V12.6667H12.7467V10.0001H11.2467ZM11.9967 16.0834H12.0034V14.5834H11.9967V16.0834Z"
-      fill="#FA2B39"
+      fill={props.fill ? props.fill : '#FA2B39'}
     />
   </svg>
 )

src/nft/css/common.css.ts

 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, themeVars } from './sprinkles.css'
+import { sprinkles, themeVars, vars } from './sprinkles.css'
 
 export const center = sprinkles({
   display: 'flex',
@@ -146,3 +146,14 @@ export const magicalGradientOnHover = style([
     },
   },
 ])
+
+export const lightGrayOverlayOnHover = style([
+  sprinkles({
+    transition: '250',
+  }),
+  {
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
+  },
+])