Revert "chore: stub out new component lib (#2467)" (#2472)

This reverts commit 496a963dcf.

.eslintrc.json

@@ -37,12 +37,28 @@
       "error",
       {
         "paths": [
+          {
+            "name": "lodash",
+            "message": "Please import from 'lodash/module' directly to support tree-shaking."
+          },
+          {
+            "name": "ethers",
+            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
+          },
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
           }
         ],
-        "patterns": ["!styled-components/macro"]
+        "patterns": [
+          {
+            "group": ["**/dist"],
+            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
+          },
+          {
+            "group": ["!styled-components/macro"]
+          }
+        ]
       }
     ]
   }

.github/workflows/integration-tests.yaml

@@ -41,12 +41,10 @@ jobs:
       - run: yarn build
         env:
           CI: false
-          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+          REACT_APP_NETWORK_URL: 'https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847'
           REACT_APP_SERVICE_WORKER: false
 
-      - run: yarn integration-test
+      - run: yarn test:e2e
         env:
           CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-
-

.yarnrc

@@ -1 +0,0 @@
-ignore-scripts true

package.json

@@ -4,7 +4,7 @@
   "homepage": ".",
   "private": true,
   "devDependencies": {
-    "@davatar/react": "1.1.0",
+    "@davatar/react": "1.6.2",
     "@ethersproject/experimental": "^5.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
@@ -88,14 +88,13 @@
     "ms.macro": "^2.0.0",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
-    "node-vibrant": "^3.1.5",
+    "node-vibrant": "^3.2.1-alpha.1",
     "polished": "^3.3.2",
     "polyfill-object.fromentries": "^1.0.1",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
-    "react-device-detect": "^1.6.2",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
@@ -128,19 +127,18 @@
     "@walletconnect/ethereum-provider": "1.6.5"
   },
   "scripts": {
-    "compile-contract-types": "yarn compile-external-abi-types && yarn compile-v3-contract-types",
-    "compile-external-abi-types": "typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
-    "compile-v3-contract-types": "typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
-    "build": "yarn compile-contract-types && yarn graphql:generate && yarn i18n:extract && yarn i18n:compile && react-scripts build",
-    "i18n:extract": "lingui extract --locale en-US",
-    "i18n:compile": "lingui compile",
-    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
+    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
+    "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
     "graphql:generate": "graphql-codegen --config codegen.yml",
-    "postinstall": "yarn compile-contract-types",
-    "start": "yarn compile-contract-types && react-scripts start",
-    "test": "react-scripts test --env=./custom-test-env.js",
     "prei18n:extract": "touch src/locales/en-US.po",
-    "prestart": "yarn graphql:generate && yarn prei18n:extract && yarn i18n:compile"
+    "i18n:extract": "lingui extract --locale en-US",
+    "i18n:compile": "yarn i18n:extract && lingui compile",
+    "postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=./custom-test-env.js",
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'"
   },
   "eslintConfig": {
     "extends": "react-app",

src/components/Blocklist/index.tsx

@@ -5,13 +5,21 @@ import { useActiveWeb3React } from '../../hooks/web3'
 
 // SDN OFAC addresses
 const BLOCKED_ADDRESSES: string[] = [
+  '0x7Db418b5D567A4e0E8c59Ad71BE1FcE48f3E6107',
+  '0x72a5843cc08275C8171E582972Aa4fDa8C397B2A',
+  '0x7F19720A857F834887FC9A7bC0a0fBe7Fc7f8102',
+  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
+  '0x1da5821544e25c636c1417Ba96Ade4Cf6D2f9B5A',
+  '0x9F4cda013E354b8fC285BF4b9A60460cEe7f7Ea9',
+  '0x19Aa5Fe80D33a56D56c78e82eA5E50E5d80b4Dff',
+  '0x2f389cE8bD8ff92De3402FFCe4691d17fC4f6535',
+  '0xe7aa314c77F4233C18C6CC84384A9247c0cf367B',
   '0x7F367cC41522cE07553e823bf3be79A889DEbe1B',
   '0xd882cFc20F52f2599D84b8e8D58C7FB62cfE344b',
   '0x901bb9583b24D97e995513C6778dc6888AB6870e',
-  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
   '0x8576aCC5C05D6Ce88f4e49bf65BdF0C62F91353C',
   '0xC8a65Fadf0e0dDAf421F28FEAb69Bf6E2E589963',
-  '0x9f4cda013e354b8fc285bf4b9a60460cee7f7ea9',
+  '0x308eD4B7b49797e1A98D3818bFF6fe5385410370',
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {

src/components/CurrencyInputPanel/index.tsx

@@ -221,7 +221,7 @@ export default function CurrencyInputPanel({
       <Container hideInput={hideInput}>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           <CurrencySelect
-            visible={currency !== null}
+            visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
             className="open-currency-select-button"

src/components/CurrencyLogo/index.tsx

@@ -1,4 +1,5 @@
 import { Currency } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
 import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
@@ -7,8 +8,31 @@ import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Logo from '../Logo'
 
-export const getTokenLogoURL = (address: string) =>
-  `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+type Network = 'ethereum' | 'arbitrum' | 'optimism'
+
+function chainIdToNetworkName(networkId: SupportedChainId): Network {
+  switch (networkId) {
+    case SupportedChainId.MAINNET:
+      return 'ethereum'
+    case SupportedChainId.ARBITRUM_ONE:
+      return 'arbitrum'
+    case SupportedChainId.OPTIMISM:
+      return 'optimism'
+    default:
+      return 'ethereum'
+  }
+}
+
+export const getTokenLogoURL = (
+  address: string,
+  chainId: SupportedChainId = SupportedChainId.MAINNET
+): string | void => {
+  const networkName = chainIdToNetworkName(chainId)
+  const networksWithUrls = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.MAINNET, SupportedChainId.OPTIMISM]
+  if (networksWithUrls.includes(chainId)) {
+    return `https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/${networkName}/assets/${address}/logo.png`
+  }
+}
 
 const StyledEthereumLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -41,7 +65,11 @@ export default function CurrencyLogo({
     if (!currency || currency.isNative) return []
 
     if (currency.isToken) {
-      const defaultUrls = currency.chainId === 1 ? [getTokenLogoURL(currency.address)] : []
+      const defaultUrls = []
+      const url = getTokenLogoURL(currency.address, currency.chainId)
+      if (url) {
+        defaultUrls.push(url)
+      }
       if (currency instanceof WrappedTokenInfo) {
         return [...uriLocations, ...defaultUrls]
       }

src/components/ErrorBoundary/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 
 import store, { AppState } from '../../state'
 import { ExternalLink, TYPE } from '../../theme'
-import { getUserAgent } from '../../utils/getUserAgent'
+import { userAgent } from '../../utils/userAgent'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
@@ -137,7 +137,7 @@ function getRelevantState(): null | keyof AppState {
 
 function issueBody(error: Error): string {
   const relevantState = getRelevantState()
-  const deviceData = getUserAgent()
+  const deviceData = userAgent
   return `## URL
   
 ${window.location.href}

src/components/LiquidityChartRangeInput/Area.tsx

@@ -1,5 +1,4 @@
 import { area, curveStepAfter, ScaleLinear } from 'd3'
-import inRange from 'lodash/inRange'
 import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
@@ -36,7 +35,10 @@ export const Area = ({
             .x((d: unknown) => xScale(xValue(d as ChartEntry)))
             .y1((d: unknown) => yScale(yValue(d as ChartEntry)))
             .y0(yScale(0))(
-            series.filter((d) => inRange(xScale(xValue(d)), 0, innerWidth)) as Iterable<[number, number]>
+            series.filter((d) => {
+              const value = xScale(xValue(d))
+              return value > 0 && value <= innerWidth
+            }) as Iterable<[number, number]>
           ) ?? undefined
         }
       />

src/components/Modal/index.tsx

@@ -1,11 +1,12 @@
 import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { transparentize } from 'polished'
 import React from 'react'
-import { isMobile } from 'react-device-detect'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
 import styled, { css } from 'styled-components/macro'
 
+import { isMobile } from '../../utils/userAgent'
+
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledDialogOverlay = styled(AnimatedDialogOverlay)`

src/components/SearchModal/CommonBases.tsx

@@ -1,14 +1,13 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
+import { AutoColumn } from 'components/Column'
+import CurrencyLogo from 'components/CurrencyLogo'
+import QuestionHelper from 'components/QuestionHelper'
+import { AutoRow } from 'components/Row'
+import { COMMON_BASES } from 'constants/routing'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-
-import { COMMON_BASES } from '../../constants/routing'
-import { currencyId } from '../../utils/currencyId'
-import { AutoColumn } from '../Column'
-import CurrencyLogo from '../CurrencyLogo'
-import QuestionHelper from '../QuestionHelper'
-import { AutoRow } from '../Row'
+import { currencyId } from 'utils/currencyId'
 
 const MobileWrapper = styled(AutoColumn)`
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/SearchModal/ImportToken.tsx

@@ -1,6 +1,6 @@
 import { Plural, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists/dist/types'
+import { TokenList } from '@uniswap/token-lists'
 import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'

src/components/WalletModal/index.tsx

@@ -4,7 +4,6 @@ import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { AutoRow } from 'components/Row'
 import { useEffect, useState } from 'react'
-import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
 
@@ -17,6 +16,7 @@ import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
+import { isMobile } from '../../utils/userAgent'
 import AccountDetails from '../AccountDetails'
 import { LightCard } from '../Card'
 import Modal from '../Modal'

src/components/Web3ReactManager/index.tsx

@@ -1,12 +1,11 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import styled from 'styled-components/macro'
 
 import { network } from '../../connectors'
 import { NetworkContextName } from '../../constants/misc'
 import { useEagerConnect, useInactiveListener } from '../../hooks/web3'
-import Loader from '../Loader'
 
 const MessageWrapper = styled.div`
   display: flex;
@@ -36,25 +35,8 @@ export default function Web3ReactManager({ children }: { children: JSX.Element }
   // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
   useInactiveListener(!triedEager)
 
-  // handle delayed loader state
-  const [showLoader, setShowLoader] = useState(false)
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowLoader(true)
-    }, 600)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [])
-
-  // on page load, do nothing until we've tried to connect to the injected connector
-  if (!triedEager) {
-    return null
-  }
-
   // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error
-  if (!active && networkError) {
+  if (triedEager && !active && networkError) {
     return (
       <MessageWrapper>
         <Message>
@@ -66,14 +48,5 @@ export default function Web3ReactManager({ children }: { children: JSX.Element }
     )
   }
 
-  // if neither context is active, spin
-  if (!active && !networkActive) {
-    return showLoader ? (
-      <MessageWrapper>
-        <Loader />
-      </MessageWrapper>
-    ) : null
-  }
-
   return children
 }

src/components/analytics/GoogleAnalyticsReporter.tsx

@@ -1,3 +1,4 @@
+import { useActiveWeb3React } from 'hooks/web3'
 import { useEffect } from 'react'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
@@ -21,6 +22,11 @@ export default function GoogleAnalyticsReporter({ location: { pathname, search }
     getCLS(reportWebVitals)
   }, [])
 
+  const { chainId } = useActiveWeb3React()
+  useEffect(() => {
+    ReactGA.set({ ['Chain ID']: chainId ?? 0 })
+  }, [chainId])
+
   useEffect(() => {
     ReactGA.pageview(`${pathname}${search}`)
   }, [pathname, search])

src/components/claim/AddressClaimModal.tsx

@@ -1,6 +1,6 @@
+import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { isAddress } from 'ethers/lib/utils'
 import { useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'

src/components/claim/ClaimModal.tsx

@@ -1,6 +1,6 @@
+import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { isAddress } from 'ethers/lib/utils'
 import JSBI from 'jsbi'
 import { useEffect, useState } from 'react'
 import { Text } from 'rebass'

src/components/vote/DelegateModal.tsx

@@ -1,5 +1,5 @@
+import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
-import { isAddress } from 'ethers/lib/utils'
 import { ReactNode, useState } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'

src/constants/routing.ts

@@ -5,6 +5,7 @@ import { SupportedChainId } from './chains'
 import {
   AMPL,
   DAI,
+  DAI_ARBITRUM_ONE,
   DAI_OPTIMISM,
   ETH2X_FLI,
   ExtendedEther,
@@ -15,8 +16,10 @@ import {
   TRIBE,
   USDC,
   USDT,
+  USDT_ARBITRUM_ONE,
   USDT_OPTIMISM,
   WBTC,
+  WBTC_ARBITRUM_ONE,
   WBTC_OPTIMISM,
   WETH9_EXTENDED,
 } from './tokens'
@@ -38,6 +41,12 @@ export const BASES_TO_CHECK_TRADES_AGAINST: ChainTokenList = {
   ...WETH_ONLY,
   [SupportedChainId.MAINNET]: [...WETH_ONLY[SupportedChainId.MAINNET], DAI, USDC, USDT, WBTC],
   [SupportedChainId.OPTIMISM]: [...WETH_ONLY[SupportedChainId.OPTIMISM], DAI_OPTIMISM, USDT_OPTIMISM, WBTC_OPTIMISM],
+  [SupportedChainId.ARBITRUM_ONE]: [
+    ...WETH_ONLY[SupportedChainId.ARBITRUM_ONE],
+    DAI_ARBITRUM_ONE,
+    USDT_ARBITRUM_ONE,
+    WBTC_ARBITRUM_ONE,
+  ],
 }
 export const ADDITIONAL_BASES: { [chainId: number]: { [tokenAddress: string]: Token[] } } = {
   [SupportedChainId.MAINNET]: {
@@ -84,14 +93,26 @@ export const COMMON_BASES: ChainCurrencyList = {
   [SupportedChainId.KOVAN]: [ExtendedEther.onChain(SupportedChainId.KOVAN), WETH9_EXTENDED[SupportedChainId.KOVAN]],
   [SupportedChainId.ARBITRUM_ONE]: [
     ExtendedEther.onChain(SupportedChainId.ARBITRUM_ONE),
+    DAI_ARBITRUM_ONE,
+    USDT_ARBITRUM_ONE,
+    WBTC_ARBITRUM_ONE,
     WETH9_EXTENDED[SupportedChainId.ARBITRUM_ONE],
   ],
   [SupportedChainId.ARBITRUM_RINKEBY]: [
     ExtendedEther.onChain(SupportedChainId.ARBITRUM_RINKEBY),
     WETH9_EXTENDED[SupportedChainId.ARBITRUM_RINKEBY],
   ],
-  [SupportedChainId.OPTIMISM]: [ExtendedEther.onChain(SupportedChainId.OPTIMISM)],
-  [SupportedChainId.OPTIMISTIC_KOVAN]: [ExtendedEther.onChain(SupportedChainId.OPTIMISTIC_KOVAN)],
+  [SupportedChainId.OPTIMISM]: [
+    ExtendedEther.onChain(SupportedChainId.OPTIMISM),
+    DAI_OPTIMISM,
+    USDT_OPTIMISM,
+    WBTC_OPTIMISM,
+    WETH9_EXTENDED[SupportedChainId.OPTIMISM],
+  ],
+  [SupportedChainId.OPTIMISTIC_KOVAN]: [
+    ExtendedEther.onChain(SupportedChainId.OPTIMISTIC_KOVAN),
+    WETH9_EXTENDED[SupportedChainId.OPTIMISTIC_KOVAN],
+  ],
 }
 
 // used to construct the list of all pairs we consider by default in the frontend

src/constants/tokens.ts

@@ -17,6 +17,20 @@ export const DAI = new Token(
   'DAI',
   'Dai Stablecoin'
 )
+export const DAI_ARBITRUM_ONE = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1',
+  18,
+  'DAI',
+  'Dai stable coin'
+)
+export const DAI_OPTIMISM = new Token(
+  SupportedChainId.OPTIMISM,
+  '0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1',
+  18,
+  'DAI',
+  'Dai stable coin'
+)
 export const USDC = new Token(
   SupportedChainId.MAINNET,
   '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
@@ -31,13 +45,6 @@ export const USDC_ARBITRUM = new Token(
   'USDC',
   'USD//C'
 )
-export const DAI_OPTIMISM = new Token(
-  SupportedChainId.OPTIMISM,
-  '0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1',
-  18,
-  'DAI',
-  'Dai stable coin'
-)
 export const USDT = new Token(
   SupportedChainId.MAINNET,
   '0xdAC17F958D2ee523a2206206994597C13D831ec7',
@@ -45,6 +52,13 @@ export const USDT = new Token(
   'USDT',
   'Tether USD'
 )
+export const USDT_ARBITRUM_ONE = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9',
+  6,
+  'USDT',
+  'Tether USD'
+)
 export const USDT_OPTIMISM = new Token(
   SupportedChainId.OPTIMISM,
   '0x94b008aA00579c1307B0EF2c499aD98a8ce58e58',
@@ -59,6 +73,13 @@ export const WBTC = new Token(
   'WBTC',
   'Wrapped BTC'
 )
+export const WBTC_ARBITRUM_ONE = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0x2f2a2543B76A4166549F7aaB2e75Bef0aefC5B0f',
+  8,
+  'WBTC',
+  'Wrapped BTC'
+)
 export const WBTC_OPTIMISM = new Token(
   SupportedChainId.OPTIMISM,
   '0x68f180fcCe6836688e9084f035309E29Bf0A2095',

src/hooks/Tokens.ts

@@ -1,6 +1,7 @@
+import { arrayify } from '@ethersproject/bytes'
 import { parseBytes32String } from '@ethersproject/strings'
 import { Currency, Token } from '@uniswap/sdk-core'
-import { arrayify } from 'ethers/lib/utils'
+import { SupportedChainId } from 'constants/chains'
 import { useMemo } from 'react'
 
 import { createTokenFilterFunction } from '../components/SearchModal/filtering'
@@ -181,8 +182,16 @@ export function useCurrency(currencyId: string | null | undefined): Currency | n
   const { chainId } = useActiveWeb3React()
   const isETH = currencyId?.toUpperCase() === 'ETH'
   const token = useToken(isETH ? undefined : currencyId)
-  const extendedEther = useMemo(() => (chainId ? ExtendedEther.onChain(chainId) : undefined), [chainId])
+  const extendedEther = useMemo(
+    () =>
+      chainId
+        ? ExtendedEther.onChain(chainId)
+        : // display mainnet when not connected
+          ExtendedEther.onChain(SupportedChainId.MAINNET),
+    [chainId]
+  )
   const weth = chainId ? WETH9_EXTENDED[chainId] : undefined
-  if (weth?.address?.toLowerCase() === currencyId?.toLowerCase()) return weth
+  if (currencyId === null || currencyId === undefined) return currencyId
+  if (weth?.address?.toUpperCase() === currencyId?.toUpperCase()) return weth
   return isETH ? extendedEther : token
 }

src/hooks/useColor.ts

@@ -1,5 +1,5 @@
 import { Token } from '@uniswap/sdk-core'
-import Vibrant from 'node-vibrant'
+import Vibrant from 'node-vibrant/lib/bundle'
 import { shade } from 'polished'
 import { useLayoutEffect, useState } from 'react'
 import uriToHttp from 'utils/uriToHttp'

src/hooks/useCurrentBlockTimestamp.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from 'ethers'
+import { BigNumber } from '@ethersproject/bignumber'
 
 import { useSingleCallResult } from '../state/multicall/hooks'
 import { useMulticall2Contract } from './useContract'

src/hooks/useENSAddress.ts

@@ -1,4 +1,4 @@
-import { namehash } from 'ethers/lib/utils'
+import { namehash } from '@ethersproject/hash'
 import { useMemo } from 'react'
 
 import { useSingleCallResult } from '../state/multicall/hooks'

src/hooks/useENSContentHash.ts

@@ -1,4 +1,4 @@
-import { namehash } from 'ethers/lib/utils'
+import { namehash } from '@ethersproject/hash'
 import { useMemo } from 'react'
 
 import { useSingleCallResult } from '../state/multicall/hooks'

src/hooks/useENSName.ts

@@ -1,4 +1,4 @@
-import { namehash } from 'ethers/lib/utils'
+import { namehash } from '@ethersproject/hash'
 import { useMemo } from 'react'
 
 import { useSingleCallResult } from '../state/multicall/hooks'

src/hooks/useERC20Permit.ts

@@ -1,7 +1,7 @@
+import { splitSignature } from '@ethersproject/bytes'
 import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import { splitSignature } from 'ethers/lib/utils'
 import JSBI from 'jsbi'
 import { useMemo, useState } from 'react'
 

src/hooks/useFeeTierDistribution.ts

@@ -1,7 +1,6 @@
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { reduce } from 'lodash'
 import ms from 'ms.macro'
 import { useMemo } from 'react'
 import ReactGA from 'react-ga'
@@ -118,7 +117,7 @@ function usePoolTVL(token0: Token | undefined, token1: Token | undefined) {
     const all = asToken0.concat(asToken1)
 
     // sum tvl for token0 and token1 by fee tier
-    const tvlByFeeTer = all.reduce<{ [feeAmount: number]: [number | undefined, number | undefined] }>(
+    const tvlByFeeTier = all.reduce<{ [feeAmount: number]: [number | undefined, number | undefined] }>(
       (acc, value) => {
         acc[value.feeTier][0] = (acc[value.feeTier][0] ?? 0) + Number(value.totalValueLockedToken0)
         acc[value.feeTier][1] = (acc[value.feeTier][1] ?? 0) + Number(value.totalValueLockedToken1)
@@ -132,8 +131,7 @@ function usePoolTVL(token0: Token | undefined, token1: Token | undefined) {
     )
 
     // sum total tvl for token0 and token1
-    const [sumToken0Tvl, sumToken1Tvl] = reduce(
-      tvlByFeeTer,
+    const [sumToken0Tvl, sumToken1Tvl] = Object.values(tvlByFeeTier).reduce(
       (acc: [number, number], value) => {
         acc[0] += value[0] ?? 0
         acc[1] += value[1] ?? 0
@@ -152,17 +150,22 @@ function usePoolTVL(token0: Token | undefined, token1: Token | undefined) {
       isUninitialized,
       isError,
       distributions: {
-        [FeeAmount.LOW]: mean(tvlByFeeTer[FeeAmount.LOW][0], sumToken0Tvl, tvlByFeeTer[FeeAmount.LOW][1], sumToken1Tvl),
-        [FeeAmount.MEDIUM]: mean(
-          tvlByFeeTer[FeeAmount.MEDIUM][0],
+        [FeeAmount.LOW]: mean(
+          tvlByFeeTier[FeeAmount.LOW][0],
           sumToken0Tvl,
-          tvlByFeeTer[FeeAmount.MEDIUM][1],
+          tvlByFeeTier[FeeAmount.LOW][1],
+          sumToken1Tvl
+        ),
+        [FeeAmount.MEDIUM]: mean(
+          tvlByFeeTier[FeeAmount.MEDIUM][0],
+          sumToken0Tvl,
+          tvlByFeeTier[FeeAmount.MEDIUM][1],
           sumToken1Tvl
         ),
         [FeeAmount.HIGH]: mean(
-          tvlByFeeTer[FeeAmount.HIGH][0],
+          tvlByFeeTier[FeeAmount.HIGH][0],
           sumToken0Tvl,
-          tvlByFeeTer[FeeAmount.HIGH][1],
+          tvlByFeeTier[FeeAmount.HIGH][1],
           sumToken1Tvl
         ),
       },

src/hooks/usePositionTokenURI.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from 'ethers'
+import { BigNumber } from '@ethersproject/bignumber'
 import JSBI from 'jsbi'
 import { useMemo } from 'react'
 

src/hooks/useTransactionDeadline.ts

@@ -1,6 +1,6 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
-import { BigNumber } from 'ethers'
 import { useMemo } from 'react'
 import { useAppSelector } from 'state/hooks'
 

src/hooks/web3.ts

@@ -1,13 +1,12 @@
 import { Web3Provider } from '@ethersproject/providers'
 import { useWeb3React } from '@web3-react/core'
-import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
 import { useEffect, useState } from 'react'
-import { isMobile } from 'react-device-detect'
 
 import { gnosisSafe, injected } from '../connectors'
 import { IS_IN_IFRAME, NetworkContextName } from '../constants/misc'
+import { isMobile } from '../utils/userAgent'
 
-export function useActiveWeb3React(): Web3ReactContextInterface<Web3Provider> {
+export function useActiveWeb3React() {
   const context = useWeb3React<Web3Provider>()
   const contextNetwork = useWeb3React<Web3Provider>(NetworkContextName)
   return context.active ? context : contextNetwork

src/index.tsx

@@ -4,7 +4,6 @@ import 'polyfills'
 
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
 import { StrictMode } from 'react'
-import { isMobile } from 'react-device-detect'
 import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
@@ -25,6 +24,7 @@ import UserUpdater from './state/user/updater'
 import ThemeProvider, { ThemedGlobalStyle } from './theme'
 import RadialGradientByChainUpdater from './theme/RadialGradientByChainUpdater'
 import getLibrary from './utils/getLibrary'
+import { isMobile } from './utils/userAgent'
 
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
 

src/locales/ru-RU.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2021-09-22 19:04\n"
+"PO-Revision-Date: 2021-09-25 10:06\n"
 "Last-Translator: \n"
 "Language: ru_RU\n"
 "Language-Team: Russian\n"
@@ -2014,7 +2014,7 @@ msgstr "Завернуть"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 msgid "Wrap <0/> to WETH"
-msgstr "Завернуть <0 /> в WETH"
+msgstr "Завернуть <0/> в WETH"
 
 #: src/components/WalletModal/index.tsx
 #: src/components/Web3Status/index.tsx

src/locales/sw-TZ.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2021-09-21 22:05\n"
+"PO-Revision-Date: 2021-09-26 16:06\n"
 "Last-Translator: \n"
 "Language: sw_TZ\n"
 "Language-Team: Swahili, Tanzania\n"
@@ -89,7 +89,7 @@ msgstr "<0/> Mapendekezo Yote"
 #: src/pages/Vote/index.tsx
 #: src/pages/Vote/index.tsx
 msgid "<0/> Votes"
-msgstr "<0 /> Kura"
+msgstr "<0/> Kura"
 
 #: src/pages/Pool/v2.tsx
 msgid "<0>Account analytics and accrued fees</0><1> ↗ </1>"
@@ -97,7 +97,7 @@ msgstr "<0>Uchanganuzi wa akaunti na makato iliyokusanywa</0><1> ↗ </1>"
 
 #: src/pages/AddLiquidity/index.tsx
 msgid "<0>Current Price:</0><1><2/></1><3>{0} per {1}</3>"
-msgstr "<0>Bei ya Sasa:</0><1><2 /></1><3>{0} kwa {1}</3>"
+msgstr "<0>Bei ya Sasa:</0><1><2/></1><3>{0} kwa {1}</3>"
 
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "<0>Tip:</0> Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive."
@@ -105,27 +105,27 @@ msgstr "<0>Kidokezo:</0> Kuondoa tokeni za share hubadilisha msimamo wako kuwa i
 
 #: src/pages/CreateProposal/index.tsx
 msgid "<0>Tip:</0> Select an action and describe your proposal for the community. The proposal cannot be modified after submission, so please verify all information before submitting. The voting period will begin immediately and last for 7 days. To propose a custom action, <1>read the docs</1>."
-msgstr "<0> Kidokezo:</0> Chagua kitendo na ueleze pendekezo lako kwa jamii. Pendekezo haliwezi kubadilishwa baada ya kuwasilisha, kwa hivyo tafadhali thibitisha habari zote kabla ya kuwasilisha. Kipindi cha kupiga kura kitaanza mara moja na kitadumu kwa siku 7. Kupendekeza kitendo maalum, <1> soma hati</1> ."
+msgstr "<0>Kidokezo:</0> Chagua kitendo na ueleze pendekezo lako kwa jamii. Pendekezo haliwezi kubadilishwa baada ya kuwasilisha, kwa hivyo tafadhali thibitisha habari zote kabla ya kuwasilisha. Kipindi cha kupiga kura kitaanza mara moja na kitadumu kwa siku 7. Kupendekeza kitendo maalum cha kwako, <1>soma maelezo</1>."
 
 #: src/pages/PoolFinder/index.tsx
 msgid "<0>Tip:</0> Use this tool to find v2 pools that don't automatically appear in the interface."
-msgstr "<0> Kidokezo:</0> Tumia zana hii kupata mabwawa ya v2 ambayo hayaonekani kiotomatiki kwenye kiolesura."
+msgstr "<0> Kidokezo:</0> Tumia zana hii kupata shares ya v2 ambayo hayaonekani kiotomatiki kwenye muonekano wa nje."
 
 #: src/pages/AddLiquidityV2/index.tsx
 msgid "<0>Tip:</0> When you add liquidity, you will receive pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time."
-msgstr "<0> Kidokezo:</0> Unapoongeza ukwasi, utapokea ishara za dimbwi zinazowakilisha msimamo wako. Hizi ishara moja kwa moja hupata ada kulingana na sehemu yako ya dimbwi, na inaweza kukombolewa wakati wowote."
+msgstr "<0>Kidokezo:</0> Unapoongeza mtaji, utapokea ishara za share zinazowakilisha msimamo wako. Hizi ishara moja kwa moja hupata ada kulingana na sehemu yako ya share, na inaweza kubadilika kwa matumisi kwa wakati wowote."
 
 #: src/pages/Vote/VotePage.tsx
 msgid "<0>Unlock voting</0> to prepare for the next proposal."
-msgstr "<0> Kufungua upigaji kura</0> kujiandaa kwa pendekezo linalofuata."
+msgstr "<0>Kufungua upigaji kura</0> kujiandaa kwa pendekezo linalofuata."
 
 #: src/components/claim/ClaimModal.tsx
 msgid "<0>🎉 </0>Welcome to team Unicorn :) <1>🎉</1>"
-msgstr "<0> 🎉</0> Karibu kwenye timu ya Unicorn :) <1> 🎉</1>"
+msgstr "<0>🎉 </0>Karibu kwenye timu ya Unicorn :) <1>🎉</1>"
 
 #: src/pages/Vote/index.tsx
 msgid "A minimum threshold of 0.25% of the total UNI supply is required to submit proposals"
-msgstr "Kizingiti cha chini cha 0.25% ya jumla ya usambazaji wa UNI inahitajika kuwasilisha mapendekezo"
+msgstr "Kiwangu cha chini cha 0.25% ya jumla ya usambazaji wa UNI inahitajika kuwasilisha mapendekezo"
 
 #: src/components/Menu/index.tsx
 msgid "About"
@@ -152,11 +152,11 @@ msgstr "Ongeza"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 msgid "Add <0/> and <1/> to Uniswap V2"
-msgstr "Ongeza <0 /> na <1 /> ili Kubadilisha V2"
+msgstr "Ongeza <0/> na <1/> kwenye Uniswap V2"
 
 #: src/components/vote/DelegateModal.tsx
 msgid "Add Delegate +"
-msgstr "Ongeza Ujumbe +"
+msgstr "Ongeza Mjumbe +"
 
 #: src/components/NavigationTabs/index.tsx
 #: src/pages/AddLiquidity/index.tsx
@@ -181,11 +181,11 @@ msgstr "Ongeza {0} kwa Metamask <0/>"
 
 #: src/pages/Earn/Manage.tsx
 msgid "Add {0}-{1} liquidity"
-msgstr "Ongeza ukwasi {0}-{1}"
+msgstr "Ongeza mtaji {0}-{1}"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 msgid "Add {0}/{1} V3 liquidity"
-msgstr "Kuongeza {0}/{1} V3 ukwasi"
+msgstr "Kuongeza {0}/{1} V3 mtaji"
 
 #: src/components/TransactionConfirmationModal/index.tsx
 msgid "Added {0}"
@@ -234,11 +234,11 @@ msgstr "Takwimu"
 #: src/components/earn/StakingModal.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Approve"
-msgstr "Idhinisha"
+msgstr "Sibitisha"
 
 #: src/pages/CreateProposal/ProposalActionSelector.tsx
 msgid "Approve Token"
-msgstr "Idhinisha Ishara"
+msgstr "Sibitisha Tokeni"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 #: src/pages/AddLiquidity/index.tsx
@@ -246,23 +246,23 @@ msgstr "Idhinisha Ishara"
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/AddLiquidityV2/index.tsx
 msgid "Approve {0}"
-msgstr "Idhinisha {0}"
+msgstr "Sibitisha {0}"
 
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Approved"
-msgstr "Imeidhinishwa"
+msgstr "Imesibitishwa"
 
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Approving"
-msgstr "Kuidhinisha"
+msgstr "Kusibitisha"
 
 #: src/pages/AddLiquidity/index.tsx
 #: src/pages/AddLiquidity/index.tsx
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/AddLiquidityV2/index.tsx
 msgid "Approving {0}"
-msgstr "Kuidhinisha {0}"
+msgstr "Kusibitisha {0}"
 
 #: src/components/Header/NetworkSelector.tsx
 msgid "Arbiscan"
@@ -306,11 +306,11 @@ msgstr "Nyuma"
 
 #: src/components/Header/UniBalanceContent.tsx
 msgid "Balance:"
-msgstr "Usawa:"
+msgstr "Kiasi:"
 
 #: src/components/CurrencyInputPanel/index.tsx
 msgid "Balance: {0} {1}"
-msgstr "Usawa: {0} {1}"
+msgstr "Kiasi: {0} {1}"
 
 #: src/components/FeeSelector/index.tsx
 #: src/components/FeeSelector/index.tsx
@@ -349,7 +349,7 @@ msgstr "Kwa kuunganisha mkoba, unakubali Sheria na Masharti ya Maabara yasiyobad
 
 #: src/pages/Vote/styled.tsx
 msgid "Canceled"
-msgstr "Imeghairiwa"
+msgstr "Imeghairishwa"
 
 #: src/components/AccountDetails/index.tsx
 msgid "Change"
@@ -383,11 +383,11 @@ msgstr "Dai <0 /> kwa {0}"
 #: src/components/claim/ClaimModal.tsx
 #: src/components/claim/ClaimModal.tsx
 msgid "Claim UNI"
-msgstr "Dai UNI"
+msgstr "Chukua UNI"
 
 #: src/components/claim/AddressClaimModal.tsx
 msgid "Claim UNI Token"
-msgstr "Dai Mshahara wa UNI"
+msgstr "Chukua UNI tokeni"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 msgid "Claim UNI reward for {0}"
@@ -399,25 +399,25 @@ msgstr "Ada ya madai"
 
 #: src/components/Popups/ClaimPopup.tsx
 msgid "Claim your UNI tokens"
-msgstr "Dai dai ishara zako za UNI"
+msgstr "Chukua UNI tokeni yako"
 
 #: src/components/claim/AddressClaimModal.tsx
 msgid "Claimed"
-msgstr "Alidai"
+msgstr "Ushachukua"
 
 #: src/components/earn/ClaimRewardModal.tsx
 #: src/components/earn/UnstakingModal.tsx
 msgid "Claimed UNI!"
-msgstr "UNI inayodaiwa!"
+msgstr "Ushachukua UNI!"
 
 #: src/components/claim/ClaimModal.tsx
 msgid "Claimed!"
-msgstr "Alidai!"
+msgstr "Ushachukua!"
 
 #: src/components/claim/AddressClaimModal.tsx
 #: src/components/claim/ClaimModal.tsx
 msgid "Claiming"
-msgstr "Kudai"
+msgstr "Inachukuliwa"
 
 #: src/components/Header/index.tsx
 msgid "Claiming UNI"
@@ -426,7 +426,7 @@ msgstr "Kudai UNI"
 #: src/components/earn/ClaimRewardModal.tsx
 #: src/components/earn/UnstakingModal.tsx
 msgid "Claiming {0} UNI"
-msgstr "Kudai {0} UNI"
+msgstr "Inachukuliwa {0} UNI"
 
 #: src/pages/AddLiquidity/index.tsx
 msgid "Clear All"
@@ -448,7 +448,7 @@ msgstr "Imefungwa"
 
 #: src/components/Menu/index.tsx
 msgid "Code"
-msgstr "Kanuni"
+msgstr "Code"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect"
@@ -465,7 +465,7 @@ msgstr "Kusanya makato"
 
 #: src/components/AccountDetails/TransactionSummary.tsx
 msgid "Collect {0}/{1} fees"
-msgstr "Kukusanya {0}/{1} ada"
+msgstr "Kukusanya {0}/{1} makato"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collected"
@@ -477,7 +477,7 @@ msgstr "Kusanya"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collecting fees"
-msgstr "Kukusanya ada"
+msgstr "Kukusanya makato"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collecting fees will withdraw currently available fees for you."
@@ -693,7 +693,7 @@ msgstr "Tenganisha"
 
 #: src/components/Menu/index.tsx
 msgid "Discord"
-msgstr "Utata"
+msgstr "Discord"
 
 #: src/components/TransactionConfirmationModal/index.tsx
 msgid "Dismiss"
@@ -1748,7 +1748,7 @@ msgstr "UNI-V2 {0}-{1}"
 #: src/components/earn/ClaimRewardModal.tsx
 #: src/components/earn/UnstakingModal.tsx
 msgid "Unclaimed UNI"
-msgstr "UNI isiyodaiwa"
+msgstr "Aujachukua UNI"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Unclaimed fees"

src/pages/AddLiquidity/index.tsx

@@ -641,10 +641,11 @@ export default function AddLiquidity({
                           }}
                           onCurrencySelect={handleCurrencyASelect}
                           showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-                          currency={currencies[Field.CURRENCY_A]}
+                          currency={currencies[Field.CURRENCY_A] ?? null}
                           id="add-liquidity-input-tokena"
                           showCommonBases
                         />
+
                         <div style={{ width: '12px' }} />
 
                         <CurrencyDropdown
@@ -656,7 +657,7 @@ export default function AddLiquidity({
                             onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
                           }}
                           showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-                          currency={currencies[Field.CURRENCY_B]}
+                          currency={currencies[Field.CURRENCY_B] ?? null}
                           id="add-liquidity-input-tokenb"
                           showCommonBases
                         />
@@ -697,7 +698,7 @@ export default function AddLiquidity({
                         onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
                       }}
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-                      currency={currencies[Field.CURRENCY_A]}
+                      currency={currencies[Field.CURRENCY_A] ?? null}
                       id="add-liquidity-input-tokena"
                       fiatValue={usdcValues[Field.CURRENCY_A]}
                       showCommonBases
@@ -712,7 +713,7 @@ export default function AddLiquidity({
                       }}
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
                       fiatValue={usdcValues[Field.CURRENCY_B]}
-                      currency={currencies[Field.CURRENCY_B]}
+                      currency={currencies[Field.CURRENCY_B] ?? null}
                       id="add-liquidity-input-tokenb"
                       showCommonBases
                       locked={depositBDisabled}

src/pages/AddLiquidityV2/index.tsx

@@ -379,7 +379,7 @@ export default function AddLiquidity({
               }}
               onCurrencySelect={handleCurrencyASelect}
               showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-              currency={currencies[Field.CURRENCY_A]}
+              currency={currencies[Field.CURRENCY_A] ?? null}
               id="add-liquidity-input-tokena"
               showCommonBases
             />
@@ -394,7 +394,7 @@ export default function AddLiquidity({
                 onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
               }}
               showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-              currency={currencies[Field.CURRENCY_B]}
+              currency={currencies[Field.CURRENCY_B] ?? null}
               id="add-liquidity-input-tokenb"
               showCommonBases
             />

src/pages/CreateProposal/index.tsx

@@ -1,10 +1,10 @@
-import { getAddress } from '@ethersproject/address'
+import { defaultAbiCoder } from '@ethersproject/abi'
+import { getAddress, isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { ButtonError } from 'components/Button'
 import { BlueCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { utils } from 'ethers'
 import { useActiveWeb3React } from 'hooks/web3'
 import JSBI from 'jsbi'
 import { Wrapper } from 'pages/Pool/styleds'
@@ -162,7 +162,7 @@ export default function CreateProposal() {
     () =>
       Boolean(
         !proposalAction ||
-          !utils.isAddress(toAddressValue) ||
+          !isAddress(toAddressValue) ||
           !currencyValue?.isToken ||
           amountValue === '' ||
           titleValue === '' ||
@@ -214,7 +214,7 @@ ${bodyValue}
 
     createProposalData.calldatas = []
     for (let i = 0; i < createProposalData.signatures.length; i++) {
-      createProposalData.calldatas[i] = utils.defaultAbiCoder.encode(types[i], values[i])
+      createProposalData.calldatas[i] = defaultAbiCoder.encode(types[i], values[i])
     }
 
     const hash = await createProposalCallback(createProposalData ?? undefined)?.catch(() => {

src/pages/Vote/VotePage.tsx

@@ -1,9 +1,9 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { t, Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import JSBI from 'jsbi'
-import { DateTime } from 'luxon'
+import { DateTime } from 'luxon/src/luxon'
 import { useState } from 'react'
 import { ArrowLeft } from 'react-feather'
 import ReactMarkdown from 'react-markdown'

src/state/data/slice.ts

@@ -1,4 +1,4 @@
-import { BaseQueryApi, BaseQueryFn } from '@reduxjs/toolkit/dist/query/baseQueryTypes'
+import { BaseQueryFn } from '@reduxjs/toolkit/query'
 import { createApi } from '@reduxjs/toolkit/query/react'
 import { SupportedChainId } from 'constants/chains'
 import { DocumentNode } from 'graphql'
@@ -82,7 +82,7 @@ function graphqlRequestBaseQuery(): BaseQueryFn<
   Pick<ClientError, 'name' | 'message' | 'stack'>,
   Partial<Pick<ClientError, 'request' | 'response'>>
 > {
-  return async ({ document, variables }, { getState }: BaseQueryApi) => {
+  return async ({ document, variables }, { getState }) => {
     try {
       const chainId = (getState() as AppState).application.chainId
 

src/state/governance/hooks.ts

@@ -1,18 +1,13 @@
+import { defaultAbiCoder, Interface } from '@ethersproject/abi'
+import { isAddress } from '@ethersproject/address'
+import { Contract } from '@ethersproject/contracts'
 import { TransactionResponse } from '@ethersproject/providers'
+import { toUtf8String, Utf8ErrorFuncs, Utf8ErrorReason } from '@ethersproject/strings'
+import { formatUnits } from '@ethersproject/units'
 import { t } from '@lingui/macro'
 import { abi as GOV_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { UNISWAP_GRANTS_PROPOSAL_DESCRIPTION } from 'constants/proposals/uniswap_grants_proposal_description'
-import { Contract } from 'ethers'
-import {
-  defaultAbiCoder,
-  formatUnits,
-  Interface,
-  isAddress,
-  toUtf8String,
-  Utf8ErrorFuncs,
-  Utf8ErrorReason,
-} from 'ethers/lib/utils'
 import {
   useGovernanceBravoContract,
   useGovernanceV0Contract,

src/state/lists/reducer.ts

@@ -1,6 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit'
-import { getVersionUpgrade, VersionUpgrade } from '@uniswap/token-lists'
-import { TokenList } from '@uniswap/token-lists/dist/types'
+import { getVersionUpgrade, TokenList, VersionUpgrade } from '@uniswap/token-lists'
 
 import { DEFAULT_ACTIVE_LIST_URLS } from '../../constants/lists'
 import { DEFAULT_LIST_OF_LISTS } from '../../constants/lists'

src/state/lists/wrappedTokenInfo.ts

@@ -1,6 +1,5 @@
 import { Currency, Token } from '@uniswap/sdk-core'
-import { Tags, TokenInfo } from '@uniswap/token-lists'
-import { TokenList } from '@uniswap/token-lists/dist/types'
+import { Tags, TokenInfo, TokenList } from '@uniswap/token-lists'
 
 import { isAddress } from '../../utils'
 

src/state/mint/v3/hooks.ts

@@ -10,7 +10,7 @@ import {
   TICK_SPACINGS,
   TickMath,
   tickToPrice,
-} from '@uniswap/v3-sdk/dist/'
+} from '@uniswap/v3-sdk'
 import { usePool } from 'hooks/usePools'
 import JSBI from 'jsbi'
 import { useCallback, useMemo } from 'react'

src/state/mint/v3/utils.ts

@@ -6,7 +6,7 @@ import {
   priceToClosestTick,
   TICK_SPACINGS,
   TickMath,
-} from '@uniswap/v3-sdk/dist/'
+} from '@uniswap/v3-sdk'
 import JSBI from 'jsbi'
 
 export function tryParsePrice(baseToken?: Token, quoteToken?: Token, value?: string) {

src/state/swap/actions.ts

@@ -8,12 +8,11 @@ export enum Field {
 export const selectCurrency = createAction<{ field: Field; currencyId: string }>('swap/selectCurrency')
 export const switchCurrencies = createAction<void>('swap/switchCurrencies')
 export const typeInput = createAction<{ field: Field; typedValue: string }>('swap/typeInput')
-export const replaceSwapState =
-  createAction<{
-    field: Field
-    typedValue: string
-    inputCurrencyId?: string
-    outputCurrencyId?: string
-    recipient: string | null
-  }>('swap/replaceSwapState')
+export const replaceSwapState = createAction<{
+  field: Field
+  typedValue: string
+  inputCurrencyId?: string
+  outputCurrencyId?: string
+  recipient: string | null
+}>('swap/replaceSwapState')
 export const setRecipient = createAction<{ recipient: string | null }>('swap/setRecipient')

src/state/swap/hooks.test.ts

@@ -9,7 +9,7 @@ describe('hooks', () => {
       expect(
         queryParametersToSwapState(
           parse(
-            '?inputCurrency=ETH&outputCurrency=0x6b175474e89094c44da98b954eedeac495271d0f&exactAmount=20.5&exactField=outPUT',
+            '?inputCurrency=ETH&outputCurrency=0x6b175474e89094c44da98b954eedeac495271d0f&exactAmount=20.5&exactField=output',
             { parseArrays: false, ignoreQueryPrefix: true }
           )
         )
@@ -27,7 +27,7 @@ describe('hooks', () => {
         queryParametersToSwapState(parse('?outputCurrency=invalid', { parseArrays: false, ignoreQueryPrefix: true }))
       ).toEqual({
         [Field.INPUT]: { currencyId: 'ETH' },
-        [Field.OUTPUT]: { currencyId: '' },
+        [Field.OUTPUT]: { currencyId: null },
         typedValue: '',
         independentField: Field.INPUT,
         recipient: null,
@@ -41,7 +41,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: null,
@@ -55,7 +55,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: null,
@@ -72,7 +72,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: '0x0fF2D1eFd7A57B7562b2bf27F3f37899dB27F4a5',
@@ -88,7 +88,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: 'bob.argent.xyz',

src/state/swap/hooks.ts

@@ -160,7 +160,7 @@ export function useDerivedSwapInfo(toggledVersion: Version | undefined): {
   // skip if other version is toggled
   const v2Trade = useBestV2Trade(
     isExactIn ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT,
-    parsedAmount,
+    toggledVersion !== Version.v3 ? parsedAmount : undefined,
     (isExactIn ? outputCurrency : inputCurrency) ?? undefined
   )
   const v3Trade = useBestV3Trade(
@@ -281,10 +281,10 @@ export function queryParametersToSwapState(parsedQs: ParsedQs): SwapState {
 
   return {
     [Field.INPUT]: {
-      currencyId: inputCurrency,
+      currencyId: inputCurrency === '' ? null : inputCurrency ?? null,
     },
     [Field.OUTPUT]: {
-      currencyId: outputCurrency,
+      currencyId: outputCurrency === '' ? null : outputCurrency ?? null,
     },
     typedValue: parseTokenAmountURLParameter(parsedQs.exactAmount),
     independentField: parseIndependentFieldURLParameter(parsedQs.exactField),
@@ -299,8 +299,9 @@ export function useDefaultsFromURLSearch():
   const { chainId } = useActiveWeb3React()
   const dispatch = useAppDispatch()
   const parsedQs = useParsedQueryString()
-  const [result, setResult] =
-    useState<{ inputCurrencyId: string | undefined; outputCurrencyId: string | undefined } | undefined>()
+  const [result, setResult] = useState<
+    { inputCurrencyId: string | undefined; outputCurrencyId: string | undefined } | undefined
+  >()
 
   useEffect(() => {
     if (!chainId) return

src/state/swap/reducer.ts

@@ -1,6 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit'
+import { parsedQueryString } from 'hooks/useParsedQueryString'
 
 import { Field, replaceSwapState, selectCurrency, setRecipient, switchCurrencies, typeInput } from './actions'
+import { queryParametersToSwapState } from './hooks'
 
 export interface SwapState {
   readonly independentField: Field
@@ -15,17 +17,7 @@ export interface SwapState {
   readonly recipient: string | null
 }
 
-const initialState: SwapState = {
-  independentField: Field.INPUT,
-  typedValue: '',
-  [Field.INPUT]: {
-    currencyId: null,
-  },
-  [Field.OUTPUT]: {
-    currencyId: null,
-  },
-  recipient: null,
-}
+const initialState: SwapState = queryParametersToSwapState(parsedQueryString())
 
 export default createReducer<SwapState>(initialState, (builder) =>
   builder
@@ -34,10 +26,10 @@ export default createReducer<SwapState>(initialState, (builder) =>
       (state, { payload: { typedValue, recipient, field, inputCurrencyId, outputCurrencyId } }) => {
         return {
           [Field.INPUT]: {
-            currencyId: inputCurrencyId,
+            currencyId: inputCurrencyId ?? null,
           },
           [Field.OUTPUT]: {
-            currencyId: outputCurrencyId,
+            currencyId: outputCurrencyId ?? null,
           },
           independentField: field,
           typedValue,

src/state/transactions/actions.ts

@@ -170,13 +170,12 @@ export type TransactionInfo =
   | RemoveLiquidityV3TransactionInfo
   | SubmitProposalTransactionInfo
 
-export const addTransaction =
-  createAction<{
-    chainId: number
-    hash: string
-    from: string
-    info: TransactionInfo
-  }>('transactions/addTransaction')
+export const addTransaction = createAction<{
+  chainId: number
+  hash: string
+  from: string
+  info: TransactionInfo
+}>('transactions/addTransaction')
 export const clearAllTransactions = createAction<{ chainId: number }>('transactions/clearAllTransactions')
 export const finalizeTransaction = createAction<{
   chainId: number

src/utils/addNetwork.ts

@@ -1,6 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { hexStripZeros } from '@ethersproject/bytes'
 import { Web3Provider } from '@ethersproject/providers'
 import { L1ChainInfo, L2ChainInfo, SupportedChainId } from 'constants/chains'
-import { BigNumber, utils } from 'ethers'
 
 interface AddNetworkArguments {
   library: Web3Provider
@@ -14,7 +15,7 @@ export async function addNetwork({ library, chainId, info }: AddNetworkArguments
   if (!library?.provider?.request) {
     return
   }
-  const formattedChainId = utils.hexStripZeros(BigNumber.from(chainId).toHexString())
+  const formattedChainId = hexStripZeros(BigNumber.from(chainId).toHexString())
   try {
     await library?.provider.request({
       method: 'wallet_addEthereumChain',

src/utils/computeUniCirculation.test.ts

@@ -1,5 +1,5 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import JSBI from 'jsbi'
 
 import { ZERO_ADDRESS } from '../constants/misc'

src/utils/computeUniCirculation.ts

@@ -1,5 +1,5 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import JSBI from 'jsbi'
 
 import { STAKING_GENESIS } from '../state/stake/hooks'

src/utils/getUserAgent.ts

@@ -1,6 +0,0 @@
-import { UAParser } from 'ua-parser-js'
-
-export function getUserAgent(): UAParser.IResult {
-  const parser = new UAParser(window.navigator.userAgent)
-  return parser.getResult()
-}

src/utils/index.ts

@@ -3,7 +3,7 @@ import { AddressZero } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
 import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { Token } from '@uniswap/sdk-core'
-import { FeeAmount } from '@uniswap/v3-sdk/dist/'
+import { FeeAmount } from '@uniswap/v3-sdk'
 
 import { TokenAddressMap } from '../state/lists/hooks'
 

src/utils/resolveENSContentHash.ts

@@ -1,6 +1,6 @@
 import { Provider } from '@ethersproject/abstract-provider'
 import { Contract } from '@ethersproject/contracts'
-import { namehash } from 'ethers/lib/utils'
+import { namehash } from '@ethersproject/hash'
 
 const REGISTRAR_ABI = [
   {

src/utils/switchToNetwork.ts

@@ -1,6 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { hexStripZeros } from '@ethersproject/bytes'
 import { Web3Provider } from '@ethersproject/providers'
 import { CHAIN_INFO, SupportedChainId } from 'constants/chains'
-import { BigNumber, utils } from 'ethers'
 
 import { addNetwork } from './addNetwork'
 
@@ -18,7 +19,7 @@ export async function switchToNetwork({ library, chainId }: SwitchNetworkArgumen
   if (!chainId && library?.getNetwork) {
     ;({ chainId } = await library.getNetwork())
   }
-  const formattedChainId = utils.hexStripZeros(BigNumber.from(chainId).toHexString())
+  const formattedChainId = hexStripZeros(BigNumber.from(chainId).toHexString())
   try {
     await library?.provider.request({
       method: 'wallet_switchEthereumChain',

src/utils/userAgent.ts

@@ -0,0 +1,8 @@
+import { UAParser } from 'ua-parser-js'
+
+const parser = new UAParser(window.navigator.userAgent)
+const { type } = parser.getDevice()
+
+export const userAgent = parser.getResult()
+
+export const isMobile = type === 'mobile' || type === 'tablet'