feat: add "approve in wallet" prompt on chain selector (#4673)

* logic

* working

* grid

* some file renaming

* Move to ChainSelectorRow.tsx

* remove flex

* more renames

* more styles

* fixes

* local imports

* more styling changes

* style

* fix mobile

* toggle open on open

* setIsOpen

src/components/NavBar/ChainSwitcher.css.ts → src/components/NavBar/ChainSelector.css.ts

 import { style } from '@vanilla-extract/css'
 import { lightGrayOverlayOnHover } from 'nft/css/common.css'
 
-import { breakpoints, sprinkles } from '../../nft/css/sprinkles.css'
+import { sprinkles } from '../../nft/css/sprinkles.css'
 
-export const ChainSwitcher = style([
+export const ChainSelector = style([
   lightGrayOverlayOnHover,
   sprinkles({
     borderRadius: '8',
-    paddingX: '12',
     height: '40',
     cursor: 'pointer',
     border: 'none',
@@ -16,38 +15,9 @@ export const ChainSwitcher = style([
   }),
 ])
 
-export const ChainSwitcherRow = style([
-  lightGrayOverlayOnHover,
-  sprinkles({
-    border: 'none',
-    justifyContent: 'space-between',
-    paddingX: '8',
-    paddingY: '8',
-    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([
   sprinkles({
     width: '20',
     height: '20',
   }),
 ])
-
-export const Icon = style([
-  Image,
-  sprinkles({
-    marginRight: '12',
-  }),
-])

src/components/NavBar/ChainSwitcher.tsx → src/components/NavBar/ChainSelector.tsx

@@ -8,46 +8,16 @@ 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, TokenWarningRedIcon } from 'nft/components/icons'
+import { TokenWarningRedIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
-import { themeVars, vars } from 'nft/css/sprinkles.css'
+import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
-import { ReactNode, useReducer, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
-import * as styles from './ChainSwitcher.css'
+import * as styles from './ChainSelector.css'
+import ChainSelectorRow from './ChainSelectorRow'
 import { NavDropdown } from './NavDropdown'
 
-const ChainRow = ({
-  targetChain,
-  onSelectChain,
-}: {
-  targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
-}) => {
-  const { chainId } = useWeb3React()
-  const active = chainId === targetChain
-  const { label, logoUrl } = getChainInfo(targetChain)
-
-  return (
-    <Column borderRadius="12">
-      <Row
-        as="button"
-        background="none"
-        className={`${styles.ChainSwitcherRow} ${subhead}`}
-        onClick={() => onSelectChain(targetChain)}
-      >
-        <ChainDetails>
-          <img src={logoUrl} alt={label} className={styles.Icon} />
-          {label}
-        </ChainDetails>
-        {active && <CheckMarkIcon width={20} height={20} color={vars.color.blue400} />}
-      </Row>
-    </Column>
-  )
-}
-
-const ChainDetails = ({ children }: { children: ReactNode }) => <Row>{children}</Row>
-
 const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.MAINNET,
   SupportedChainId.POLYGON,
@@ -56,24 +26,36 @@ const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.CELO,
 ]
 
-interface ChainSwitcherProps {
+interface ChainSelectorProps {
   leftAlign?: boolean
 }
 
-export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
+export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   const { chainId } = useWeb3React()
-  const [isOpen, toggleOpen] = useReducer((s) => !s, false)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
   const isMobile = useIsMobile()
 
   const ref = useRef<HTMLDivElement>(null)
   const modalRef = useRef<HTMLDivElement>(null)
-  useOnClickOutside(ref, isOpen ? toggleOpen : undefined, [modalRef])
+  useOnClickOutside(ref, () => setIsOpen(false), [modalRef])
 
   const info = chainId ? getChainInfo(chainId) : undefined
 
   const selectChain = useSelectChain()
   useSyncChainQuery()
 
+  const [pendingChainId, setPendingChainId] = useState<SupportedChainId | undefined>(undefined)
+
+  const onSelectChain = useCallback(
+    async (targetChainId: SupportedChainId) => {
+      setPendingChainId(targetChainId)
+      await selectChain(targetChainId)
+      setPendingChainId(undefined)
+      setIsOpen(false)
+    },
+    [selectChain, setIsOpen]
+  )
+
   if (!chainId) {
     return null
   }
@@ -82,15 +64,13 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
 
   const dropdown = (
     <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
-      <Column marginX="8">
+      <Column paddingX="8">
         {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
-          <ChainRow
-            onSelectChain={async (targetChainId: SupportedChainId) => {
-              await selectChain(targetChainId)
-              toggleOpen()
-            }}
+          <ChainSelectorRow
+            onSelectChain={onSelectChain}
             targetChain={chainId}
             key={chainId}
+            isPending={chainId === pendingChainId}
           />
         ))}
       </Column>
@@ -102,9 +82,9 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
       <Row
         as="button"
         gap="8"
-        className={styles.ChainSwitcher}
+        className={styles.ChainSelector}
         background={isOpen ? 'accentActiveSoft' : 'none'}
-        onClick={toggleOpen}
+        onClick={() => setIsOpen(!isOpen)}
       >
         {!isSupported ? (
           <>

src/components/NavBar/ChainSelectorRow.tsx

+import { useWeb3React } from '@web3-react/core'
+import Loader from 'components/Loader'
+import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { CheckMarkIcon } from 'nft/components/icons'
+import styled, { useTheme } from 'styled-components/macro'
+
+const LOGO_SIZE = 20
+
+const Container = styled.button`
+  display: grid;
+  background: none;
+  grid-template-columns: min-content 1fr min-content;
+  align-items: center;
+  text-align: left;
+  line-height: 24px;
+  border: none;
+  justify-content: space-between;
+  padding: 10px 8px;
+  cursor: pointer;
+  border-radius: 12px;
+  color: ${({ theme }) => theme.textPrimary};
+  width: 240px;
+  transition: ${({ theme }) => theme.transition.duration.medium} ${({ theme }) => theme.transition.timing.ease}
+    background-color;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.backgroundOutline};
+  }
+`
+
+const Label = styled.div`
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+`
+
+const Status = styled.div`
+  grid-column: 3;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  width: ${LOGO_SIZE}px;
+`
+
+const ApproveText = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
+  font-size: 12px;
+  grid-column: 2;
+  grid-row: 2;
+`
+
+const Logo = styled.img`
+  height: ${LOGO_SIZE}px;
+  width: ${LOGO_SIZE}px;
+  margin-right: 12px;
+`
+
+export default function ChainSelectorRow({
+  targetChain,
+  onSelectChain,
+  isPending,
+}: {
+  targetChain: SupportedChainId
+  onSelectChain: (targetChain: number) => void
+  isPending: boolean
+}) {
+  const { chainId } = useWeb3React()
+  const active = chainId === targetChain
+  const { label, logoUrl } = getChainInfo(targetChain)
+
+  const theme = useTheme()
+
+  return (
+    <Container onClick={() => onSelectChain(targetChain)}>
+      <Logo src={logoUrl} alt={label} />
+      <Label>{label}</Label>
+      {isPending && <ApproveText>Approve in wallet</ApproveText>}
+      <Status>
+        {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accentActive} />}
+        {isPending && <Loader width={LOGO_SIZE} height={LOGO_SIZE} />}
+      </Status>
+    </Container>
+  )
+}

src/components/NavBar/index.ts

-import Navbar from './Navbar'
-
-export default Navbar

src/components/NavBar/Navbar.tsx → src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
-import { ChainSwitcher } from 'components/NavBar/ChainSwitcher'
-import { MenuDropdown } from 'components/NavBar/MenuDropdown'
-import * as styles from 'components/NavBar/Navbar.css'
-import { SearchBar } from 'components/NavBar/SearchBar'
-import { ShoppingBag } from 'components/NavBar/ShoppingBag'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { Box } from 'nft/components/Box'
@@ -12,6 +7,12 @@ import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
+import { ChainSelector } from './ChainSelector'
+import { MenuDropdown } from './MenuDropdown'
+import { SearchBar } from './SearchBar'
+import { ShoppingBag } from './ShoppingBag'
+import * as styles from './style.css'
+
 interface MenuItemProps {
   href: string
   id?: NavLinkProps['id']
@@ -76,7 +77,7 @@ const Navbar = () => {
               <UniIcon width="48" height="48" className={styles.logo} />
             </Box>
             <Box display={{ sm: 'flex', lg: 'none' }}>
-              <ChainSwitcher leftAlign={true} />
+              <ChainSelector leftAlign={true} />
             </Box>
             <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
               <PageTabs />
@@ -95,7 +96,7 @@ const Navbar = () => {
               </Box>
               {isNftPage && <ShoppingBag />}
               <Box display={{ sm: 'none', lg: 'flex' }}>
-                <ChainSwitcher />
+                <ChainSelector />
               </Box>
 
               <Web3Status />

src/pages/App.tsx

@@ -21,7 +21,7 @@ import { useAnalyticsReporter } from '../components/analytics'
 import ErrorBoundary from '../components/ErrorBoundary'
 import Header from '../components/Header'
 import Polling from '../components/Header/Polling'
-import Navbar from '../components/NavBar'
+import NavBar from '../components/NavBar'
 import Popups from '../components/Popups'
 import { LoadingTokenDetails } from '../components/Tokens/TokenDetails/LoadingTokenDetails'
 import { useIsExpertMode } from '../state/user/hooks'
@@ -153,7 +153,7 @@ export default function App() {
       <ApeModeQueryParamReader />
       <AppWrapper>
         <Trace page={currentPage}>
-          <HeaderWrapper>{navBarFlag === NavBarVariant.Enabled ? <Navbar /> : <Header />}</HeaderWrapper>
+          <HeaderWrapper>{navBarFlag === NavBarVariant.Enabled ? <NavBar /> : <Header />}</HeaderWrapper>
           <BodyWrapper navBarFlag={navBarFlag}>
             <Popups />
             <Polling />