style: updating ui on unsupported network (#4138)

* initial changes

* disabled all swap ui buttons when on unsupported chain

* implementing Cal's requests to change sizing and copy on pools

* updated snapshots

* reverted changed snapshots

* updated unsupported network test

* fixing deprecated colors missing

src/components/CurrencyInputPanel/index.tsx

@@ -4,6 +4,7 @@ import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
+import { isSupportedChain } from 'constants/chains'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
@@ -45,20 +46,30 @@ const FixedContainer = styled.div`
   z-index: 2;
 `
 
-const Container = styled.div<{ hideInput: boolean }>`
+const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   border: 1px solid ${({ theme }) => theme.deprecated_bg0};
   background-color: ${({ theme }) => theme.deprecated_bg1};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  :focus,
-  :hover {
-    border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.deprecated_bg3)};
-  }
+  ${({ theme, hideInput, disabled }) =>
+    !disabled &&
+    `
+    :focus,
+    :hover {
+      border: 1px solid ${hideInput ? ' transparent' : theme.deprecated_bg3};
+    }
+  `}
 `
 
-const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
+const CurrencySelect = styled(ButtonGray)<{
+  visible: boolean
+  selected: boolean
+  hideInput?: boolean
+  disabled?: boolean
+}>`
   align-items: center;
   background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
+  opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
   color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
@@ -203,7 +214,7 @@ export default function CurrencyInputPanel({
   ...rest
 }: CurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
-  const { account } = useWeb3React()
+  const { account, chainId } = useWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
 
@@ -211,6 +222,8 @@ export default function CurrencyInputPanel({
     setModalOpen(false)
   }, [setModalOpen])
 
+  const chainAllowed = isSupportedChain(chainId)
+
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {locked && (
@@ -223,18 +236,20 @@ export default function CurrencyInputPanel({
           </AutoColumn>
         </FixedContainer>
       )}
-      <Container hideInput={hideInput}>
+      <Container hideInput={hideInput} disabled={!chainAllowed}>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           {!hideInput && (
             <StyledNumericalInput
               className="token-amount-input"
               value={value}
               onUserInput={onUserInput}
+              disabled={!chainAllowed}
               $loading={loading}
             />
           )}
 
           <CurrencySelect
+            disabled={!chainAllowed}
             visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}

src/components/Header/NetworkSelector.tsx

@@ -5,9 +5,10 @@ import { getChainInfo } from 'constants/chainInfo'
 import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import usePrevious from 'hooks/usePrevious'
+import { darken } from 'polished'
 import { ParsedQs } from 'qs'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ArrowDownCircle, ChevronDown } from 'react-feather'
+import { AlertTriangle, ArrowDownCircle, ChevronDown } from 'react-feather'
 import { useHistory } from 'react-router-dom'
 import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
 import { addPopup, ApplicationModal } from 'state/application/reducer'
@@ -121,7 +122,20 @@ const SelectorLabel = styled(NetworkLabel)`
     margin-right: 8px;
   }
 `
-const SelectorControls = styled.div`
+const NetworkAlertLabel = styled(NetworkLabel)`
+  display: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0 0.5rem 0 0.4rem;
+  font-size: 1rem;
+  width: fit-content;
+  font-weight: 500;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+  }
+`
+const SelectorControls = styled.div<{ supportedChain: boolean }>`
   align-items: center;
   background-color: ${({ theme }) => theme.deprecated_bg0};
   border: 2px solid ${({ theme }) => theme.deprecated_bg0};
@@ -131,6 +145,16 @@ const SelectorControls = styled.div`
   font-weight: 500;
   justify-content: space-between;
   padding: 6px 8px;
+  ${({ supportedChain, theme }) =>
+    !supportedChain &&
+    `
+    color: ${theme.deprecated_white};
+    background-color: ${theme.deprecated_red1};
+    border: 2px solid ${theme.deprecated_red1};
+  `}
+  :focus {
+    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
+  }
 `
 const SelectorLogo = styled(Logo)`
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@@ -145,6 +169,14 @@ const SelectorWrapper = styled.div`
 const StyledChevronDown = styled(ChevronDown)`
   width: 16px;
 `
+
+const NetworkIcon = styled(AlertTriangle)`
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  width: 16px;
+  height: 16px;
+`
+
 const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
   switch (chainId) {
     case SupportedChainId.ARBITRUM_ONE:
@@ -354,10 +386,12 @@ export default function NetworkSelector() {
     }
   }, [onSelectChain, urlChainId, previousUrlChainId, isActive])
 
-  if (!chainId || !info || !provider) {
+  if (!chainId || !provider) {
     return null
   }
 
+  const onSupportedChain = info !== undefined
+
   return (
     <SelectorWrapper
       ref={node}
@@ -365,16 +399,26 @@ export default function NetworkSelector() {
       onMouseLeave={closeModal}
       onClick={isMobile ? toggleModal : undefined}
     >
-      <SelectorControls>
-        <SelectorLogo src={info.logoUrl} />
-        <SelectorLabel>{info.label}</SelectorLabel>
-        <StyledChevronDown />
+      <SelectorControls supportedChain={onSupportedChain}>
+        {onSupportedChain ? (
+          <>
+            <SelectorLogo src={info.logoUrl} />
+            <SelectorLabel>{info.label}</SelectorLabel>
+            <StyledChevronDown />
+          </>
+        ) : (
+          <>
+            <NetworkIcon />
+            <NetworkAlertLabel>Switch Network</NetworkAlertLabel>
+            <StyledChevronDown />
+          </>
+        )}
       </SelectorControls>
       {isOpen && (
         <FlyoutMenu>
           <FlyoutMenuContents>
             <FlyoutHeader>
-              <Trans>Select a network</Trans>
+              <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
             </FlyoutHeader>
             {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
               isChainAllowed(connector, chainId) ? (

src/components/Header/index.tsx

@@ -328,7 +328,7 @@ export default function Header() {
           )}
           <AccountElement active={!!account}>
             {account && userEthBalance ? (
-              <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
+              <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr=".4rem" fontWeight={500}>
                 <Trans>
                   {userEthBalance?.toSignificant(3)} {nativeCurrencySymbol}
                 </Trans>

src/components/Settings/index.tsx

@@ -29,10 +29,6 @@ const StyledMenuIcon = styled(Settings)`
   > * {
     stroke: ${({ theme }) => theme.deprecated_text1};
   }
-
-  :hover {
-    opacity: 0.7;
-  }
 `
 
 const StyledCloseIcon = styled(X)`
@@ -47,7 +43,7 @@ const StyledCloseIcon = styled(X)`
   }
 `
 
-const StyledMenuButton = styled.button`
+const StyledMenuButton = styled.button<{ disabled: boolean }>`
   position: relative;
   width: 100%;
   height: 100%;
@@ -58,11 +54,16 @@ const StyledMenuButton = styled.button`
   border-radius: 0.5rem;
   height: 20px;
 
-  :hover,
-  :focus {
-    cursor: pointer;
-    outline: none;
-  }
+  ${({ disabled }) =>
+    !disabled &&
+    `
+    :hover,
+    :focus {
+      cursor: pointer;
+      outline: none;
+      opacity: 0.7;
+    }
+  `}
 `
 const EmojiWrapper = styled.div`
   position: absolute;
@@ -179,7 +180,12 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
           </AutoColumn>
         </ModalContentWrapper>
       </Modal>
-      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button" aria-label={t`Transaction Settings`}>
+      <StyledMenuButton
+        disabled={!isSupportedChainId(chainId)}
+        onClick={toggle}
+        id="open-settings-dialog-button"
+        aria-label={t`Transaction Settings`}
+      >
         <StyledMenuIcon />
         {expertMode ? (
           <EmojiWrapper>

src/components/Web3Status/index.tsx

@@ -7,11 +7,10 @@ import { getConnection } from 'connection/utils'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
 import { useMemo } from 'react'
-import { Activity } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
 import styled, { css } from 'styled-components/macro'
-import { isChainAllowed } from 'utils/switchChain'
 
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import { useToggleWalletModal } from '../../state/application/hooks'
@@ -34,7 +33,7 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
   user-select: none;
   height: 36px;
   margin-right: 2px;
-  margin-left: 1px;
+  margin-left: 2px;
   :focus {
     outline: none;
   }
@@ -106,7 +105,7 @@ const Text = styled.p`
   font-weight: 500;
 `
 
-const NetworkIcon = styled(Activity)`
+const NetworkIcon = styled(AlertTriangle)`
   margin-left: 0.25rem;
   margin-right: 0.5rem;
   width: 16px;
@@ -137,8 +136,6 @@ function Web3StatusInner() {
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
 
-  const chainAllowed = chainId && isChainAllowed(connector, chainId)
-
   const allTransactions = useAllTransactions()
 
   const sortedRecentTransactions = useMemo(() => {
@@ -154,15 +151,6 @@ function Web3StatusInner() {
 
   if (!chainId) {
     return null
-  } else if (!chainAllowed) {
-    return (
-      <Web3StatusError onClick={toggleWalletModal}>
-        <NetworkIcon />
-        <Text>
-          <Trans>Wrong Network</Trans>
-        </Text>
-      </Web3StatusError>
-    )
   } else if (error) {
     return (
       <Web3StatusError onClick={toggleWalletModal}>

src/constants/chains.ts

@@ -44,6 +44,10 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
   (id) => typeof id === 'number'
 ) as SupportedChainId[]
 
+export function isSupportedChain(chainId: number | undefined): chainId is SupportedChainId {
+  return !!chainId && !!SupportedChainId[chainId]
+}
+
 export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
   SupportedChainId.MAINNET,
   SupportedChainId.POLYGON,

src/pages/Pool/index.test.tsx

+import * as chains from 'constants/chains'
 import * as useV3Positions from 'hooks/useV3Positions'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { render, screen } from 'test-utils'
-import * as switchChain from 'utils/switchChain'
 
 import Pool from '.'
 
@@ -17,7 +17,7 @@ jest.mock('@web3-react/core', () => {
 
 describe('networks', () => {
   it('renders error card when unsupported chain is selected', () => {
-    jest.spyOn(switchChain, 'isChainAllowed').mockReturnValue(false)
+    jest.spyOn(chains, 'isSupportedChain').mockReturnValue(false)
     jest.spyOn(useV3Positions, 'useV3Positions').mockImplementation(() => {
       return { loading: false, positions: undefined }
     })
@@ -27,13 +27,11 @@ describe('networks', () => {
         <Pool />
       </Router>
     )
-    expect(
-      screen.getByText('Your connected network is unsupported. Request support', { exact: false })
-    ).toBeInTheDocument()
+    expect(screen.getByText('Your connected network is unsupported.')).toBeInTheDocument()
   })
 
   it('renders empty positions card when on supported chain with no positions', () => {
-    jest.spyOn(switchChain, 'isChainAllowed').mockReturnValue(true)
+    jest.spyOn(chains, 'isSupportedChain').mockReturnValue(true)
     jest.spyOn(useV3Positions, 'useV3Positions').mockImplementation(() => {
       return { loading: false, positions: undefined }
     })

src/pages/Pool/index.tsx

@@ -11,16 +11,16 @@ import { SwapPoolTabs } from 'components/NavigationTabs'
 import PositionList from 'components/PositionList'
 import { RowBetween, RowFixed } from 'components/Row'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
+import { isSupportedChain } from 'constants/chains'
 import { useV3Positions } from 'hooks/useV3Positions'
 import { useContext } from 'react'
-import { Activity, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers, PlusCircle } from 'react-feather'
+import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers, PlusCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { useUserHideClosedPositions } from 'state/user/hooks'
 import styled, { css, ThemeContext } from 'styled-components/macro'
-import { ExternalLink, HideSmall, ThemedText } from 'theme'
+import { HideSmall, ThemedText } from 'theme'
 import { PositionDetails } from 'types/position'
-import { isChainAllowed } from 'utils/switchChain'
 
 import { V2_FACTORY_ADDRESSES } from '../../constants/addresses'
 import CTACards from './CTACards'
@@ -107,7 +107,7 @@ const IconStyle = css`
   margin-bottom: 0.5rem;
 `
 
-const NetworkIcon = styled(Activity)`
+const NetworkIcon = styled(AlertTriangle)`
   ${IconStyle}
 `
 
@@ -171,10 +171,7 @@ function WrongNetworkCard() {
                 <ThemedText.Body color={theme.deprecated_text3} textAlign="center">
                   <NetworkIcon strokeWidth={1.2} />
                   <div data-testid="pools-unsupported-err">
-                    <Trans>
-                      Your connected network is unsupported. Request support{' '}
-                      <ExternalLink href="https://uniswap.canny.io/feature-requests">here</ExternalLink>.
-                    </Trans>
+                    <Trans>Your connected network is unsupported.</Trans>
                   </div>
                 </ThemedText.Body>
               </ErrorContainer>
@@ -188,7 +185,7 @@ function WrongNetworkCard() {
 }
 
 export default function Pool() {
-  const { account, chainId, connector } = useWeb3React()
+  const { account, chainId } = useWeb3React()
   const toggleWalletModal = useToggleWalletModal()
 
   const theme = useContext(ThemeContext)
@@ -196,7 +193,7 @@ export default function Pool() {
 
   const { positions, loading: positionsLoading } = useV3Positions(account)
 
-  if (chainId && !isChainAllowed(connector, chainId)) {
+  if (!isSupportedChain(chainId)) {
     return <WrongNetworkCard />
   }
 
@@ -210,7 +207,7 @@ export default function Pool() {
 
   const filteredPositions = [...openPositions, ...(userHideClosedPositions ? [] : closedPositions)]
   const showConnectAWallet = Boolean(!account)
-  const showV2Features = Boolean(chainId && V2_FACTORY_ADDRESSES[chainId])
+  const showV2Features = Boolean(V2_FACTORY_ADDRESSES[chainId])
 
   const menuItems = [
     {

src/pages/Swap/index.tsx

@@ -13,6 +13,7 @@ import { NetworkAlert } from 'components/NetworkAlert/NetworkAlert'
 import SwapDetailsDropdown from 'components/swap/SwapDetailsDropdown'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { MouseoverTooltip } from 'components/Tooltip'
+import { isSupportedChain } from 'constants/chains'
 import { useSwapCallback } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import JSBI from 'jsbi'
@@ -461,7 +462,7 @@ export default function Swap() {
                     loading={independentField === Field.OUTPUT && routeIsSyncing}
                   />
                 </Trace>
-                <ArrowWrapper clickable>
+                <ArrowWrapper clickable={isSupportedChain(chainId)}>
                   <ArrowDown
                     size="16"
                     onClick={() => {