chore(token lists): Bump token lists spec version

* add progress bar and minimal UI updates on swap

* add hook to explicity check user added tokens, fixes add/remove bug

* update with latest

* remove confusing comment

* update styles on loading, update arrow placement, code cleanup

* fix typo on progress import

.github/ISSUE_TEMPLATE/bug-report.md

@@ -4,11 +4,18 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
+<!-- 
+DO NOT CREATE A TOKEN LISTING REQUEST IN THIS REPOSITORY.
+YOUR ISSUE WILL BE DELETED. 
+SEE https://github.com/Uniswap/default-token-list#adding-a-token
+
+IF YOU NEED SUPPORT, JOIN THE DISCORD: https://discord.com/invite/EwFs3Pp
+-->
+
 **Bug Description**
-A clear and concise description of what the bug is.
+A clear and concise description of the bug.
 
 **Steps to Reproduce**
 1. Go to ...

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature-request.md

@@ -4,9 +4,16 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
+<!-- 
+DO NOT CREATE A TOKEN LISTING REQUEST IN THIS REPOSITORY.
+YOUR ISSUE WILL BE DELETED. 
+SEE https://github.com/Uniswap/default-token-list#adding-a-token
+
+IF YOU NEED SUPPORT, JOIN THE DISCORD: https://discord.com/invite/EwFs3Pp
+-->
+
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 

.github/ISSUE_TEMPLATE/something-else.md

@@ -4,7 +4,15 @@ about: Tell us something else
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
+<!-- 
+DO NOT CREATE A TOKEN LISTING REQUEST IN THIS REPOSITORY.
+YOUR ISSUE WILL BE DELETED. 
+SEE https://github.com/Uniswap/default-token-list#adding-a-token
+
+IF YOU NEED SUPPORT, JOIN THE DISCORD: https://discord.com/invite/EwFs3Pp
+-->
+
+
 

.github/workflows/tests.yaml

@@ -29,6 +29,8 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: yarn cypress install
       - run: yarn build
+        env:
+          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
       - run: yarn integration-test
 
   unit-tests:

cypress.json

@@ -3,5 +3,6 @@
   "pluginsFile": false,
   "fixturesFolder": false,
   "supportFile": "cypress/support/index.js",
-  "video": false
+  "video": false,
+  "defaultCommandTimeout": 10000
 }

cypress/integration/lists.test.ts

@@ -0,0 +1,24 @@
+describe('Swap', () => {
+  beforeEach(() => {
+    cy.visit('/swap')
+  })
+
+  it('list selection persists', () => {
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#list-introduction-choose-a-list').click()
+    cy.get('#list-row-tokens-uniswap-eth .select-button').click()
+    cy.reload()
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#list-introduction-choose-a-list').should('not.exist')
+  })
+
+  it('change list', () => {
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#list-introduction-choose-a-list').click()
+    cy.get('#list-row-tokens-uniswap-eth .select-button').click()
+    cy.get('#currency-search-selected-list-name').should('contain', 'Uniswap')
+    cy.get('#currency-search-change-list-button').click()
+    cy.get('#list-row-tokens-1inch-eth .select-button').click()
+    cy.get('#currency-search-selected-list-name').should('contain', '1inch')
+  })
+})

cypress/integration/swap.test.ts

@@ -1,5 +1,7 @@
 describe('Swap', () => {
-  beforeEach(() => cy.visit('/swap'))
+  beforeEach(() => {
+    cy.visit('/swap')
+  })
   it('can enter an amount into input', () => {
     cy.get('#swap-currency-input .token-amount-input')
       .type('0.001', { delay: 200 })
@@ -32,6 +34,8 @@ describe('Swap', () => {
 
   it('can swap ETH for DAI', () => {
     cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#list-introduction-choose-a-list').click()
+    cy.get('#list-row-tokens-uniswap-eth .select-button').click()
     cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').should('be.visible')
     cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click({ force: true })
     cy.get('#swap-currency-input .token-amount-input').should('be.visible')
@@ -41,14 +45,33 @@ describe('Swap', () => {
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
 
-  it('add a recipient', () => {
-    cy.get('#add-recipient-button').click()
-    cy.get('#recipient').should('exist')
+  it('add a recipient does not exist unless in expert mode', () => {
+    cy.get('#add-recipient-button').should('not.exist')
   })
 
-  it('remove recipient', () => {
-    cy.get('#add-recipient-button').click()
-    cy.get('#remove-recipient-button').click()
-    cy.get('#recipient').should('not.exist')
+  describe('expert mode', () => {
+    beforeEach(() => {
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns('confirm')
+      })
+      cy.get('#open-settings-dialog-button').click()
+      cy.get('#toggle-expert-mode-button').click()
+      cy.get('#confirm-expert-mode').click()
+    })
+
+    it('add a recipient is visible', () => {
+      cy.get('#add-recipient-button').should('be.visible')
+    })
+
+    it('add a recipient', () => {
+      cy.get('#add-recipient-button').click()
+      cy.get('#recipient').should('exist')
+    })
+
+    it('remove recipient', () => {
+      cy.get('#add-recipient-button').click()
+      cy.get('#remove-recipient-button').click()
+      cy.get('#recipient').should('not.exist')
+    })
   })
 })

cypress/integration/token-warning.ts

@@ -1,19 +1,17 @@
 describe('Warning', () => {
   beforeEach(() => {
-    cy.clearLocalStorage()
     cy.visit('/swap?outputCurrency=0x0a40f26d74274b7f22b28556a27b35d97ce08e0a')
   })
+
   it('Check that warning is displayed', () => {
     cy.get('.token-warning-container').should('be.visible')
   })
-  it('Check that warning hides after button dismissal.', () => {
+
+  it('Check that warning hides after button dismissal', () => {
+    cy.get('.token-dismiss-button').should('be.disabled')
+    cy.get('.understand-checkbox').click()
+    cy.get('.token-dismiss-button').should('not.be.disabled')
     cy.get('.token-dismiss-button').click()
     cy.get('.token-warning-container').should('not.be.visible')
   })
-  it('Check supression persists across sessions.', () => {
-    cy.get('.token-warning-container').should('be.visible')
-    cy.get('.token-dismiss-button').click()
-    cy.reload()
-    cy.get('.token-warning-container').should('not.be.visible')
-  })
 })

cypress/support/commands.js

@@ -73,6 +73,7 @@ Cypress.Commands.overwrite('visit', (original, url, options) => {
     ...options,
     onBeforeLoad(win) {
       options && options.onBeforeLoad && options.onBeforeLoad(win)
+      win.localStorage.clear()
       const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
       const signer = new Wallet(PRIVATE_KEY_TEST_NEVER_USE, provider)
       win.ethereum = new CustomizedBridge(signer, provider)

package.json

@@ -11,20 +11,23 @@
     "@reduxjs/toolkit": "^1.3.5",
     "@types/jest": "^25.2.1",
     "@types/lodash.flatmap": "^4.5.6",
+    "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.5",
     "@types/qs": "^6.9.2",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.0.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^5.1.0",
     "@types/testing-library__cypress": "^5.0.5",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
+    "@uniswap/default-token-list": "^1.3.1",
     "@uniswap/sdk": "3.0.3-beta.1",
-    "@uniswap/token-lists": "^1.0.0-beta.11",
+    "@uniswap/token-lists": "^1.0.0-beta.16",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@web3-react/core": "^6.0.9",
@@ -34,6 +37,7 @@
     "@web3-react/walletconnect-connector": "^6.1.1",
     "@web3-react/walletlink-connector": "^6.0.9",
     "ajv": "^6.12.3",
+    "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
     "cypress": "^4.11.0",
@@ -49,6 +53,8 @@
     "inter-ui": "^3.13.1",
     "jazzicon": "^1.5.0",
     "lodash.flatmap": "^4.5.0",
+    "multicodec": "^2.0.0",
+    "multihashes": "^3.0.1",
     "polished": "^3.3.2",
     "prettier": "^1.17.0",
     "qs": "^6.9.4",
@@ -64,9 +70,10 @@
     "react-scripts": "^3.4.1",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
-    "redux-localstorage-simple": "^2.2.0",
+    "redux-localstorage-simple": "^2.3.1",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.11.0",
     "styled-components": "^4.2.0",

public/locales/vi.json

@@ -19,8 +19,8 @@
 	"pending": "Đang chờ xử lý",
 	"selectToken": "Chọn một đồng tiền ảo",
 	"searchOrPaste": "Tìm kiếm tên, biểu tượng, hoặc địa chỉ của đồng tiền ảo",
-	"searchOrPasteMobile": "Tên, Biểu tương, hoặc Địa chỉ",
-	"noExchange": "Không Tìm Thấy Giao Dịch",
+	"searchOrPasteMobile": "Tên, Biểu tượng, hoặc Địa chỉ",
+	"noExchange": "Không tìm thấy giao dịch",
 	"exchangeRate": "Tỷ giá",
 	"unknownError": "Rất tiếc! Xảy ra lỗi không xác định. Vui lòng làm mới trang, hoặc truy cập từ trình duyệt hay thiết bị khác.",
 	"enterValueCont": "Nhập một giá trị {{ missingCurrencyValue }} để tiếp tục.",
@@ -29,7 +29,7 @@
 	"insufficientLiquidity": "Không đủ tính thanh khoản.",
 	"unlockTokenCont": "Vui lòng mở khoá đồng tiền ảo để tiếp tục",
 	"transactionDetails": "Chi tiết nâng cao",
-	"hideDetails": "Che giấu chi tiết",
+	"hideDetails": "Ẩn chi tiết",
 	"slippageWarning": "Cảnh báo trượt giá",
 	"highSlippageWarning": "Cảnh báo trượt giá cao",
 	"youAreSelling": "Bạn đang bán",
@@ -59,7 +59,7 @@
 	"intoPool": "vào nhóm thanh khoản.",
 	"outPool": "từ nhóm thanh khoản.",
 	"youWillMint": "Bạn sẽ đúc tiền",
-	"liquidityTokens": "dồng thanh khoản.",
+	"liquidityTokens": "đồng thanh khoản.",
 	"totalSupplyIs": "Tổng cung hiện tại của đồng thanh khoản là",
 	"youAreSettingExRate": "Bạn đang đặt tỷ giá hối đoái ban đầu thành",
 	"totalSupplyIs0": "Tổng cung hiện tại của đồng thanh khoản là 0.",

src/components/AccountDetails/Transaction.tsx

@@ -40,11 +40,12 @@ export default function Transaction({ hash }: { hash: string }) {
   const { chainId } = useActiveWeb3React()
   const allTransactions = useAllTransactions()
 
-  const summary = allTransactions?.[hash]?.summary
-  const pending = !allTransactions?.[hash]?.receipt
-  const success =
-    !pending &&
-    (allTransactions[hash].receipt.status === 1 || typeof allTransactions[hash].receipt.status === 'undefined')
+  const tx = allTransactions?.[hash]
+  const summary = tx?.summary
+  const pending = !tx?.receipt
+  const success = !pending && tx && (tx.receipt?.status === 1 || typeof tx.receipt?.status === 'undefined')
+
+  if (!chainId) return null
 
   return (
     <TransactionWrapper>

src/components/AccountDetails/index.tsx

@@ -200,7 +200,7 @@ const MainWalletAction = styled(WalletAction)`
   color: ${({ theme }) => theme.primary1};
 `
 
-function renderTransactions(transactions) {
+function renderTransactions(transactions: string[]) {
   return (
     <TransactionListWrapper>
       {transactions.map((hash, i) => {
@@ -212,8 +212,8 @@ function renderTransactions(transactions) {
 
 interface AccountDetailsProps {
   toggleWalletModal: () => void
-  pendingTransactions: any[]
-  confirmedTransactions: any[]
+  pendingTransactions: string[]
+  confirmedTransactions: string[]
   ENSName?: string
   openOptions: () => void
 }
@@ -282,15 +282,12 @@ export default function AccountDetails({
         </>
       )
     }
+    return null
   }
 
-  const clearAllTransactionsCallback = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault()
-      dispatch(clearAllTransactions({ chainId }))
-    },
-    [dispatch, chainId]
-  )
+  const clearAllTransactionsCallback = useCallback(() => {
+    if (chainId) dispatch(clearAllTransactions({ chainId }))
+  }, [dispatch, chainId])
 
   return (
     <>
@@ -338,7 +335,7 @@ export default function AccountDetails({
                     <>
                       <div>
                         {getStatusIcon()}
-                        <p> {shortenAddress(account)}</p>
+                        <p> {account && shortenAddress(account)}</p>
                       </div>
                     </>
                   )}
@@ -349,17 +346,21 @@ export default function AccountDetails({
                   <>
                     <AccountControl>
                       <div>
-                        <Copy toCopy={account}>
-                          <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                        </Copy>
-                        <AddressLink
-                          hasENS={!!ENSName}
-                          isENS={true}
-                          href={getEtherscanLink(chainId, ENSName, 'address')}
-                        >
-                          <LinkIcon size={16} />
-                          <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
-                        </AddressLink>
+                        {account && (
+                          <Copy toCopy={account}>
+                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                          </Copy>
+                        )}
+                        {chainId && account && (
+                          <AddressLink
+                            hasENS={!!ENSName}
+                            isENS={true}
+                            href={chainId && getEtherscanLink(chainId, ENSName, 'address')}
+                          >
+                            <LinkIcon size={16} />
+                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                          </AddressLink>
+                        )}
                       </div>
                     </AccountControl>
                   </>
@@ -367,17 +368,21 @@ export default function AccountDetails({
                   <>
                     <AccountControl>
                       <div>
-                        <Copy toCopy={account}>
-                          <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                        </Copy>
-                        <AddressLink
-                          hasENS={!!ENSName}
-                          isENS={false}
-                          href={getEtherscanLink(chainId, account, 'address')}
-                        >
-                          <LinkIcon size={16} />
-                          <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
-                        </AddressLink>
+                        {account && (
+                          <Copy toCopy={account}>
+                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                          </Copy>
+                        )}
+                        {chainId && account && (
+                          <AddressLink
+                            hasENS={!!ENSName}
+                            isENS={false}
+                            href={getEtherscanLink(chainId, account, 'address')}
+                          >
+                            <LinkIcon size={16} />
+                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                          </AddressLink>
+                        )}
                       </div>
                     </AccountControl>
                   </>

src/components/AddressInputPanel/index.tsx

@@ -65,11 +65,6 @@ const Input = styled.input<{ error?: boolean }>`
   }
 `
 
-interface Value {
-  address: string
-  name?: string
-}
-
 export default function AddressInputPanel({
   id,
   value,
@@ -106,7 +101,7 @@ export default function AddressInputPanel({
               <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
                 Recipient
               </TYPE.black>
-              {address && (
+              {address && chainId && (
                 <ExternalLink href={getEtherscanLink(chainId, name ?? address, 'address')} style={{ fontSize: '14px' }}>
                   (View on Etherscan)
                 </ExternalLink>

src/components/Button/index.tsx

@@ -10,7 +10,7 @@ const Base = styled(RebassButton)<{
   padding?: string
   width?: string
   borderRadius?: string
-  altDisbaledStyle?: boolean
+  altDisabledStyle?: boolean
 }>`
   padding: ${({ padding }) => (padding ? padding : '18px')};
   width: ${({ width }) => (width ? width : '100%')};
@@ -53,12 +53,13 @@ export const ButtonPrimary = styled(Base)`
     background-color: ${({ theme }) => darken(0.1, theme.primary1)};
   }
   &:disabled {
-    background-color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? theme.primary1 : theme.bg3)};
-    color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? 'white' : theme.text3)};
+    background-color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? theme.primary1 : theme.bg3)};
+    color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? 'white' : theme.text3)};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
     outline: none;
+    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
   }
 `
 
@@ -253,11 +254,15 @@ const ButtonErrorStyle = styled(Base)`
   }
 `
 
-export function ButtonConfirmed({ confirmed, ...rest }: { confirmed?: boolean } & ButtonProps) {
+export function ButtonConfirmed({
+  confirmed,
+  altDisabledStyle,
+  ...rest
+}: { confirmed?: boolean; altDisabledStyle?: boolean } & ButtonProps) {
   if (confirmed) {
     return <ButtonConfirmedStyle {...rest} />
   } else {
-    return <ButtonPrimary {...rest} />
+    return <ButtonPrimary {...rest} altDisabledStyle={altDisabledStyle} />
   }
 }
 

src/components/Card/index.tsx

@@ -19,11 +19,11 @@ export const LightCard = styled(Card)`
 `
 
 export const GreyCard = styled(Card)`
-  background-color: ${({ theme }) => theme.advancedBG};
+  background-color: ${({ theme }) => theme.bg3};
 `
 
 export const OutlineCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.advancedBG};
+  border: 1px solid ${({ theme }) => theme.bg3};
 `
 
 export const YellowCard = styled(Card)`

src/components/CurrencyInputPanel/index.tsx

@@ -7,7 +7,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowBetween } from '../Row'
-import { TYPE, CursorPointer } from '../../theme'
+import { TYPE } from '../../theme'
 import { Input as NumericalInput } from '../NumericalInput'
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 
@@ -126,7 +126,6 @@ interface CurrencyInputPanelProps {
   hideBalance?: boolean
   pair?: Pair | null
   hideInput?: boolean
-  showSendWithSwap?: boolean
   otherCurrency?: Currency | null
   id: string
   showCommonBases?: boolean
@@ -138,14 +137,13 @@ export default function CurrencyInputPanel({
   onMax,
   showMaxButton,
   label = 'Input',
-  onCurrencySelect = null,
-  currency = null,
+  onCurrencySelect,
+  currency,
   disableCurrencySelect = false,
   hideBalance = false,
   pair = null, // used for double token logo
   hideInput = false,
-  showSendWithSwap = false,
-  otherCurrency = null,
+  otherCurrency,
   id,
   showCommonBases
 }: CurrencyInputPanelProps) {
@@ -153,7 +151,7 @@ export default function CurrencyInputPanel({
 
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
-  const selectedCurrencyBalance = useCurrencyBalance(account, currency)
+  const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useContext(ThemeContext)
 
   const handleDismissSearch = useCallback(() => {
@@ -170,19 +168,17 @@ export default function CurrencyInputPanel({
                 {label}
               </TYPE.body>
               {account && (
-                <CursorPointer>
-                  <TYPE.body
-                    onClick={onMax}
-                    color={theme.text2}
-                    fontWeight={500}
-                    fontSize={14}
-                    style={{ display: 'inline' }}
-                  >
-                    {!hideBalance && !!currency && selectedCurrencyBalance
-                      ? 'Balance: ' + selectedCurrencyBalance?.toSignificant(6)
-                      : ' -'}
-                  </TYPE.body>
-                </CursorPointer>
+                <TYPE.body
+                  onClick={onMax}
+                  color={theme.text2}
+                  fontWeight={500}
+                  fontSize={14}
+                  style={{ display: 'inline', cursor: 'pointer' }}
+                >
+                  {!hideBalance && !!currency && selectedCurrencyBalance
+                    ? 'Balance: ' + selectedCurrencyBalance?.toSignificant(6)
+                    : ' -'}
+                </TYPE.body>
               )}
             </RowBetween>
           </LabelRow>
@@ -235,13 +231,12 @@ export default function CurrencyInputPanel({
           </CurrencySelect>
         </InputRow>
       </Container>
-      {!disableCurrencySelect && (
+      {!disableCurrencySelect && onCurrencySelect && (
         <CurrencySearchModal
           isOpen={modalOpen}
           onDismiss={handleDismissSearch}
           onCurrencySelect={onCurrencySelect}
-          showSendWithSwap={showSendWithSwap}
-          hiddenCurrency={currency}
+          selectedCurrency={currency}
           otherSelectedCurrency={otherCurrency}
           showCommonBases={showCommonBases}
         />

src/components/CurrencyLogo/index.tsx

@@ -1,32 +1,14 @@
 import { Currency, ETHER, Token } from '@uniswap/sdk'
-import React, { useState } from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components'
 
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
+import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/hooks'
-import uriToHttp from '../../utils/uriToHttp'
+import Logo from '../Logo'
 
-const getTokenLogoURL = address =>
+const getTokenLogoURL = (address: string) =>
   `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
-const BAD_URIS: { [tokenAddress: string]: true } = {}
-
-const Image = styled.img<{ size: string }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  background-color: white;
-  border-radius: 1rem;
-  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
-`
-
-const Emoji = styled.span<{ size?: string }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: ${({ size }) => size};
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  margin-bottom: -4px;
-`
 
 const StyledEthereumLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -35,60 +17,38 @@ const StyledEthereumLogo = styled.img<{ size: string }>`
   border-radius: 24px;
 `
 
+const StyledLogo = styled(Logo)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`
+
 export default function CurrencyLogo({
   currency,
   size = '24px',
-  ...rest
+  style
 }: {
   currency?: Currency
   size?: string
   style?: React.CSSProperties
 }) {
-  const [, refresh] = useState<number>(0)
+  const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined)
+
+  const srcs: string[] = useMemo(() => {
+    if (currency === ETHER) return []
+
+    if (currency instanceof Token) {
+      if (currency instanceof WrappedTokenInfo) {
+        return [...uriLocations, getTokenLogoURL(currency.address)]
+      }
+
+      return [getTokenLogoURL(currency.address)]
+    }
+    return []
+  }, [currency, uriLocations])
 
   if (currency === ETHER) {
-    return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
+    return <StyledEthereumLogo src={EthereumLogo} size={size} style={style} />
   }
 
-  if (currency instanceof Token) {
-    let uri: string | undefined
-
-    if (currency instanceof WrappedTokenInfo) {
-      if (currency.logoURI && !BAD_URIS[currency.logoURI]) {
-        uri = uriToHttp(currency.logoURI).filter(s => !BAD_URIS[s])[0]
-      }
-    }
-
-    if (!uri) {
-      const defaultUri = getTokenLogoURL(currency.address)
-      if (!BAD_URIS[defaultUri]) {
-        uri = defaultUri
-      }
-    }
-
-    if (uri) {
-      return (
-        <Image
-          {...rest}
-          alt={`${currency.name} Logo`}
-          src={uri}
-          size={size}
-          onError={() => {
-            if (currency instanceof Token) {
-              BAD_URIS[uri] = true
-            }
-            refresh(i => i + 1)
-          }}
-        />
-      )
-    }
-  }
-
-  return (
-    <Emoji {...rest} size={size}>
-      <span role="img" aria-label="Thinking">
-        🤔
-      </span>
-    </Emoji>
-  )
+  return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />
 }

src/components/Header/index.tsx

@@ -137,7 +137,7 @@ const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
 export default function Header() {
   const { account, chainId } = useActiveWeb3React()
 
-  const userEthBalance = useETHBalances([account])[account]
+  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
   const [isDark] = useDarkModeManager()
 
   return (
@@ -156,7 +156,7 @@ export default function Header() {
         <HeaderControls>
           <HeaderElement>
             <TestnetWrapper>
-              {!isMobile && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
+              {!isMobile && chainId && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
             </TestnetWrapper>
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance ? (

src/components/Identicon/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { useActiveWeb3React } from '../../hooks'
 import Jazzicon from 'jazzicon'
 
-const StyledIdenticon = styled.div`
+const StyledIdenticonContainer = styled.div`
   height: 1rem;
   width: 1rem;
   border-radius: 1.125rem;
@@ -24,5 +24,6 @@ export default function Identicon() {
     }
   }, [account])
 
-  return <StyledIdenticon ref={ref} />
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+  return <StyledIdenticonContainer ref={ref as any} />
 }

src/components/ListLogo/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styled from 'styled-components'
+import useHttpLocations from '../../hooks/useHttpLocations'
+
+import Logo from '../Logo'
+
+const StyledListLogo = styled(Logo)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`
+
+export default function ListLogo({
+  logoURI,
+  style,
+  size = '24px',
+  alt
+}: {
+  logoURI: string
+  size?: string
+  style?: React.CSSProperties
+  alt?: string
+}) {
+  const srcs: string[] = useHttpLocations(logoURI)
+
+  return <StyledListLogo alt={alt} size={size} srcs={srcs} style={style} />
+}

src/components/Loader/index.tsx

@@ -24,7 +24,7 @@ const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
  * Takes in custom size and stroke for circle color, default to primary color as fill,
  * need ...rest for layered styles on top
  */
-export default function Loader({ size = '16px', stroke = null, ...rest }: { size?: string; stroke?: string }) {
+export default function Loader({ size = '16px', stroke, ...rest }: { size?: string; stroke?: string }) {
   return (
     <StyledSVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size={size} stroke={stroke} {...rest}>
       <path

src/components/Logo/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { HelpCircle } from 'react-feather'
+import { ImageProps } from 'rebass'
+
+const BAD_SRCS: { [tokenAddress: string]: true } = {}
+
+export interface LogoProps extends Pick<ImageProps, 'style' | 'alt' | 'className'> {
+  srcs: string[]
+}
+
+/**
+ * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert
+ */
+export default function Logo({ srcs, alt, ...rest }: LogoProps) {
+  const [, refresh] = useState<number>(0)
+
+  const src: string | undefined = srcs.find(src => !BAD_SRCS[src])
+
+  if (src) {
+    return (
+      <img
+        {...rest}
+        alt={alt}
+        src={src}
+        onError={() => {
+          if (src) BAD_SRCS[src] = true
+          refresh(i => i + 1)
+        }}
+      />
+    )
+  }
+
+  return <HelpCircle {...rest} />
+}

src/components/Menu/index.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef } from 'react'
 import { Info, BookOpen, Code, PieChart, MessageCircle } from 'react-feather'
 import styled from 'styled-components'
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import useToggle from '../../hooks/useToggle'
 
 import { ExternalLink } from '../../theme'
@@ -83,27 +84,11 @@ export default function Menu() {
   const node = useRef<HTMLDivElement>()
   const [open, toggle] = useToggle(false)
 
-  useEffect(() => {
-    const handleClickOutside = e => {
-      if (node.current?.contains(e.target) ?? false) {
-        return
-      }
-      toggle()
-    }
-
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside)
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [open, toggle])
+  useOnClickOutside(node, open ? toggle : undefined)
 
   return (
-    <StyledMenu ref={node}>
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
       <StyledMenuButton onClick={toggle}>
         <StyledMenuIcon />
       </StyledMenuButton>

src/components/Modal/index.tsx

@@ -38,6 +38,7 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
     box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
     padding: 0px;
     width: 50vw;
+    overflow: hidden;
 
     align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};
 
@@ -85,7 +86,7 @@ export default function Modal({
   onDismiss,
   minHeight = false,
   maxHeight = 50,
-  initialFocusRef = null,
+  initialFocusRef,
   children
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, null, {

src/components/NumericalInput/index.tsx

@@ -46,7 +46,7 @@ export const Input = React.memo(function InnerInput({
   ...rest
 }: {
   value: string | number
-  onUserInput: (string) => void
+  onUserInput: (input: string) => void
   error?: boolean
   fontSize?: string
   align?: 'right' | 'left'

src/components/Popover/index.tsx

@@ -1,6 +1,6 @@
 import { Placement } from '@popperjs/core'
 import { transparentize } from 'polished'
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components'
 import useInterval from '../../hooks/useInterval'
@@ -83,9 +83,9 @@ export interface PopoverProps {
 }
 
 export default function Popover({ content, show, children, placement = 'auto' }: PopoverProps) {
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
   const { styles, update, attributes } = usePopper(referenceElement, popperElement, {
     placement,
     strategy: 'fixed',
@@ -94,17 +94,20 @@ export default function Popover({ content, show, children, placement = 'auto' }:
       { name: 'arrow', options: { element: arrowElement } }
     ]
   })
-  useInterval(update, show ? 100 : null)
+  const updateCallback = useCallback(() => {
+    update && update()
+  }, [update])
+  useInterval(updateCallback, show ? 100 : null)
 
   return (
     <>
-      <ReferenceElement ref={setReferenceElement}>{children}</ReferenceElement>
+      <ReferenceElement ref={setReferenceElement as any}>{children}</ReferenceElement>
       <Portal>
-        <PopoverContainer show={show} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+        <PopoverContainer show={show} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
           {content}
           <Arrow
             className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
-            ref={setArrowElement}
+            ref={setArrowElement as any}
             style={styles.arrow}
             {...attributes.arrow}
           />

src/components/Popups/ListUpdatePopup.tsx

@@ -1,20 +1,17 @@
-import { TokenList, Version } from '@uniswap/token-lists'
-import React, { useCallback, useContext } from 'react'
-import { AlertCircle, Info } from 'react-feather'
+import { diffTokenLists, TokenList } from '@uniswap/token-lists'
+import React, { useCallback, useMemo } from 'react'
+import ReactGA from 'react-ga'
 import { useDispatch } from 'react-redux'
-import { ThemeContext } from 'styled-components'
+import { Text } from 'rebass'
 import { AppDispatch } from '../../state'
 import { useRemovePopup } from '../../state/application/hooks'
 import { acceptListUpdate } from '../../state/lists/actions'
 import { TYPE } from '../../theme'
-import { ButtonPrimary, ButtonSecondary } from '../Button'
+import listVersionLabel from '../../utils/listVersionLabel'
+import { ButtonSecondary } from '../Button'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
-function versionLabel(version: Version): string {
-  return `v${version.major}.${version.minor}.${version.patch}`
-}
-
 export default function ListUpdatePopup({
   popKey,
   listUrl,
@@ -31,34 +28,71 @@ export default function ListUpdatePopup({
   const removePopup = useRemovePopup()
   const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
   const dispatch = useDispatch<AppDispatch>()
-  const theme = useContext(ThemeContext)
 
-  const updateList = useCallback(() => {
+  const handleAcceptUpdate = useCallback(() => {
     if (auto) return
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Update List from Popup',
+      label: listUrl
+    })
     dispatch(acceptListUpdate(listUrl))
     removeThisPopup()
   }, [auto, dispatch, listUrl, removeThisPopup])
 
+  const { added: tokensAdded, changed: tokensChanged, removed: tokensRemoved } = useMemo(() => {
+    return diffTokenLists(oldList.tokens, newList.tokens)
+  }, [newList.tokens, oldList.tokens])
+  const numTokensChanged = useMemo(
+    () =>
+      Object.keys(tokensChanged).reduce((memo, chainId: any) => memo + Object.keys(tokensChanged[chainId]).length, 0),
+    [tokensChanged]
+  )
+
   return (
     <AutoRow>
-      <div style={{ paddingRight: 16 }}>
-        {auto ? <Info color={theme.text2} size={24} /> : <AlertCircle color={theme.red1} size={24} />}{' '}
-      </div>
       <AutoColumn style={{ flex: '1' }} gap="8px">
         {auto ? (
           <TYPE.body fontWeight={500}>
             The token list &quot;{oldList.name}&quot; has been updated to{' '}
-            <strong>{versionLabel(newList.version)}</strong>.
+            <strong>{listVersionLabel(newList.version)}</strong>.
           </TYPE.body>
         ) : (
           <>
             <div>
-              A token list update is available for the list &quot;{oldList.name}&quot; ({versionLabel(oldList.version)}{' '}
-              to {versionLabel(newList.version)}).
+              <Text>
+                An update is available for the token list &quot;{oldList.name}&quot; (
+                {listVersionLabel(oldList.version)} to {listVersionLabel(newList.version)}).
+              </Text>
+              <ul>
+                {tokensAdded.length > 0 ? (
+                  <li>
+                    {tokensAdded.map((token, i) => (
+                      <React.Fragment key={`${token.chainId}-${token.address}`}>
+                        <strong title={token.address}>{token.symbol}</strong>
+                        {i === tokensAdded.length - 1 ? null : ', '}
+                      </React.Fragment>
+                    ))}{' '}
+                    added
+                  </li>
+                ) : null}
+                {tokensRemoved.length > 0 ? (
+                  <li>
+                    {tokensRemoved.map((token, i) => (
+                      <React.Fragment key={`${token.chainId}-${token.address}`}>
+                        <strong title={token.address}>{token.symbol}</strong>
+                        {i === tokensRemoved.length - 1 ? null : ', '}
+                      </React.Fragment>
+                    ))}{' '}
+                    removed
+                  </li>
+                ) : null}
+                {numTokensChanged > 0 ? <li>{numTokensChanged} tokens updated</li> : null}
+              </ul>
             </div>
             <AutoRow>
-              <div style={{ flexGrow: 1, marginRight: 6 }}>
-                <ButtonPrimary onClick={updateList}>Update list</ButtonPrimary>
+              <div style={{ flexGrow: 1, marginRight: 12 }}>
+                <ButtonSecondary onClick={handleAcceptUpdate}>Accept update</ButtonSecondary>
               </div>
               <div style={{ flexGrow: 1 }}>
                 <ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>

src/components/Popups/PopupItem.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
+import { useSpring } from 'react-spring/web'
 import styled, { ThemeContext } from 'styled-components'
-import useInterval from '../../hooks/useInterval'
+import { animated } from 'react-spring'
 import { PopupContent } from '../../state/application/actions'
 import { useRemovePopup } from '../../state/application/hooks'
 import ListUpdatePopup from './ListUpdatePopup'
@@ -25,44 +26,48 @@ export const Popup = styled.div`
   border-radius: 10px;
   padding: 20px;
   padding-right: 35px;
-  z-index: 2;
   overflow: hidden;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     min-width: 290px;
   `}
 `
-const DELAY = 100
-const Fader = styled.div<{ count: number }>`
+const Fader = styled.div`
   position: absolute;
   bottom: 0px;
   left: 0px;
-  width: ${({ count }) => `calc(100% - (100% / ${150 / count}))`};
+  width: 100%;
   height: 2px;
   background-color: ${({ theme }) => theme.bg3};
-  transition: width 100ms linear;
 `
 
-export default function PopupItem({ content, popKey }: { content: PopupContent; popKey: string }) {
-  const [count, setCount] = useState(1)
+const AnimatedFader = animated(Fader)
 
-  const [isRunning, setIsRunning] = useState(true)
+export default function PopupItem({
+  removeAfterMs,
+  content,
+  popKey
+}: {
+  removeAfterMs: number | null
+  content: PopupContent
+  popKey: string
+}) {
   const removePopup = useRemovePopup()
-
   const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
+  useEffect(() => {
+    if (removeAfterMs === null) return undefined
 
-  useInterval(
-    () => {
-      count > 150 ? removeThisPopup() : setCount(count + 1)
-    },
-    isRunning ? DELAY : null
-  )
+    const timeout = setTimeout(() => {
+      removeThisPopup()
+    }, removeAfterMs)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [removeAfterMs, removeThisPopup])
 
   const theme = useContext(ThemeContext)
 
-  const handleMouseEnter = useCallback(() => setIsRunning(false), [])
-  const handleMouseLeave = useCallback(() => setIsRunning(true), [])
-
   let popupContent
   if ('txn' in content) {
     const {
@@ -76,11 +81,17 @@ export default function PopupItem({ content, popKey }: { content: PopupContent;
     popupContent = <ListUpdatePopup popKey={popKey} listUrl={listUrl} oldList={oldList} newList={newList} auto={auto} />
   }
 
+  const faderStyle = useSpring({
+    from: { width: '100%' },
+    to: { width: '0%' },
+    config: { duration: removeAfterMs ?? undefined }
+  })
+
   return (
-    <Popup onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      <StyledClose color={theme.text2} onClick={() => removePopup(popKey)} />
+    <Popup>
+      <StyledClose color={theme.text2} onClick={removeThisPopup} />
       {popupContent}
-      <Fader count={count} />
+      {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
     </Popup>
   )
 }

src/components/Popups/TransactionPopup.tsx

@@ -32,7 +32,9 @@ export default function TransactionPopup({
       </div>
       <AutoColumn gap="8px">
         <TYPE.body fontWeight={500}>{summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}</TYPE.body>
-        <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
+        {chainId && (
+          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
+        )}
       </AutoColumn>
     </RowNoFlex>
   )

src/components/Popups/index.tsx

@@ -35,6 +35,7 @@ const FixedPopupColumn = styled(AutoColumn)`
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
+  z-index: 2;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
@@ -49,7 +50,7 @@ export default function Popups() {
     <>
       <FixedPopupColumn gap="20px">
         {activePopups.map(item => (
-          <PopupItem key={item.key} content={item.content} popKey={item.key} />
+          <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
         ))}
       </FixedPopupColumn>
       <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
@@ -58,7 +59,7 @@ export default function Popups() {
             .slice(0)
             .reverse()
             .map(item => (
-              <PopupItem key={item.key} content={item.content} popKey={item.key} />
+              <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
             ))}
         </MobilePopupInner>
       </MobilePopupWrapper>

src/components/PositionCard/V1.tsx

@@ -28,7 +28,7 @@ function V1PositionCard({ token, V1LiquidityBalance }: PositionCardProps) {
           <RowFixed>
             <DoubleCurrencyLogo currency0={token} margin={true} size={20} />
             <Text fontWeight={500} fontSize={20} style={{ marginLeft: '' }}>
-              {`${token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH`}
+              {`${chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH`}
             </Text>
             <Text
               fontSize={12}

src/components/PositionCard/index.tsx

@@ -46,7 +46,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
 
   const [showMore, setShowMore] = useState(false)
 
-  const userPoolBalance = useTokenBalance(account, pair.liquidityToken)
+  const userPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
   const totalPoolTokens = useTotalSupply(pair.liquidityToken)
 
   const [token0Deposited, token1Deposited] =
@@ -131,7 +131,7 @@ export default function FullPositionCard({ pair, border }: PositionCardProps) {
 
   const [showMore, setShowMore] = useState(false)
 
-  const userPoolBalance = useTokenBalance(account, pair.liquidityToken)
+  const userPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
   const totalPoolTokens = useTotalSupply(pair.liquidityToken)
 
   const poolTokenPercentage =

src/components/ProgressSteps/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled from 'styled-components'
+import { RowBetween } from '../Row'
+import { AutoColumn } from '../Column'
+import { transparentize } from 'polished'
+
+const Wrapper = styled(AutoColumn)`
+  margin-top: 1.25rem;
+`
+
+const Grouping = styled(RowBetween)`
+  width: 50%;
+`
+
+const Circle = styled.div<{ confirmed?: boolean; disabled?: boolean }>`
+  min-width: 20px;
+  min-height: 20px;
+  background-color: ${({ theme, confirmed, disabled }) =>
+    disabled ? theme.bg4 : confirmed ? theme.green1 : theme.primary1};
+  border-radius: 50%;
+  color: ${({ theme }) => theme.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 8px;
+  font-size: 12px;
+`
+
+const CircleRow = styled.div`
+  width: calc(100% - 20px);
+  display: flex;
+  align-items: center;
+`
+
+const Connector = styled.div<{ prevConfirmed?: boolean }>`
+  width: 100%;
+  height: 2px;
+  background-color: ;
+  background: linear-gradient(
+    90deg,
+    ${({ theme, prevConfirmed }) => transparentize(0.5, prevConfirmed ? theme.green1 : theme.primary1)} 0%,
+    ${({ theme, prevConfirmed }) => (prevConfirmed ? theme.primary1 : theme.bg4)} 80%
+  );
+  opacity: 0.6;
+`
+
+interface ProgressCirclesProps {
+  steps: boolean[]
+}
+
+/**
+ * Based on array of steps, create a step counter of circles.
+ * A circle can be enabled, disabled, or confirmed. States are derived
+ * from previous step.
+ *
+ * An extra circle is added to represent the ability to swap, add, or remove.
+ * This step will never be marked as complete (because no 'txn done' state in body ui).
+ *
+ * @param steps  array of booleans where true means step is complete
+ */
+export default function ProgressCircles({ steps }: ProgressCirclesProps) {
+  return (
+    <Wrapper justify={'center'}>
+      <Grouping>
+        {steps.map((step, i) => {
+          return (
+            <CircleRow key={i}>
+              <Circle confirmed={step} disabled={!steps[i - 1] && i !== 0}>
+                {step ? '✓' : i + 1}
+              </Circle>
+              <Connector prevConfirmed={step} />
+            </CircleRow>
+          )
+        })}
+        <Circle disabled={!steps[steps.length - 1]}>{steps.length + 1}</Circle>
+      </Grouping>
+    </Wrapper>
+  )
+}

src/components/QuestionHelper/index.tsx

@@ -22,7 +22,7 @@ const QuestionWrapper = styled.div`
   }
 `
 
-export default function QuestionHelper({ text, disabled }: { text: string; disabled?: boolean }) {
+export default function QuestionHelper({ text }: { text: string }) {
   const [show, setShow] = useState<boolean>(false)
 
   const open = useCallback(() => setShow(true), [setShow])
@@ -30,7 +30,7 @@ export default function QuestionHelper({ text, disabled }: { text: string; disab
 
   return (
     <span style={{ marginLeft: 4 }}>
-      <Tooltip text={text} show={show && !disabled}>
+      <Tooltip text={text} show={show}>
         <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
           <Question size={16} />
         </QuestionWrapper>

src/components/SearchModal/CommonBases.tsx

@@ -31,7 +31,7 @@ export default function CommonBases({
   selectedCurrency
 }: {
   chainId?: ChainId
-  selectedCurrency?: Currency
+  selectedCurrency?: Currency | null
   onSelect: (currency: Currency) => void
 }) {
   return (
@@ -44,7 +44,11 @@ export default function CommonBases({
       </AutoRow>
       <AutoRow gap="4px">
         <BaseWrapper
-          onClick={() => !currencyEquals(selectedCurrency, ETHER) && onSelect(ETHER)}
+          onClick={() => {
+            if (!selectedCurrency || !currencyEquals(selectedCurrency, ETHER)) {
+              onSelect(ETHER)
+            }
+          }}
           disable={selectedCurrency === ETHER}
         >
           <CurrencyLogo currency={ETHER} style={{ marginRight: 8 }} />

src/components/SearchModal/CurrencyList.tsx

@@ -1,155 +1,210 @@
-import { Currency, CurrencyAmount, currencyEquals, ETHER, JSBI, Token } from '@uniswap/sdk'
-import React, { CSSProperties, memo, useContext, useMemo } from 'react'
+import { Currency, CurrencyAmount, currencyEquals, ETHER, Token } from '@uniswap/sdk'
+import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import styled from 'styled-components'
 import { useActiveWeb3React } from '../../hooks'
-import { useAllTokens } from '../../hooks/Tokens'
-import { useDefaultTokenList } from '../../state/lists/hooks'
+import { useSelectedTokenList, WrappedTokenInfo } from '../../state/lists/hooks'
 import { useAddUserToken, useRemoveUserAddedToken } from '../../state/user/hooks'
-import { useETHBalances } from '../../state/wallet/hooks'
+import { useCurrencyBalance } from '../../state/wallet/hooks'
 import { LinkStyledButton, TYPE } from '../../theme'
-import { ButtonSecondary } from '../Button'
-import Column, { AutoColumn } from '../Column'
+import { useIsUserAddedToken } from '../../hooks/Tokens'
+import Column from '../Column'
 import { RowFixed } from '../Row'
 import CurrencyLogo from '../CurrencyLogo'
+import { MouseoverTooltip } from '../Tooltip'
 import { FadedSpan, MenuItem } from './styleds'
 import Loader from '../Loader'
-import { isDefaultToken } from '../../utils'
+import { isTokenOnList } from '../../utils'
 
 function currencyKey(currency: Currency): string {
   return currency instanceof Token ? currency.address : currency === ETHER ? 'ETHER' : ''
 }
 
+const StyledBalanceText = styled(Text)`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 5rem;
+  text-overflow: ellipsis;
+`
+
+const Tag = styled.div`
+  background-color: ${({ theme }) => theme.bg3};
+  color: ${({ theme }) => theme.text2};
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 0.25rem 0.3rem 0.25rem 0.3rem;
+  max-width: 6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-self: flex-end;
+  margin-right: 4px;
+`
+
+function Balance({ balance }: { balance: CurrencyAmount }) {
+  return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
+}
+
+const TagContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`
+
+function TokenTags({ currency }: { currency: Currency }) {
+  if (!(currency instanceof WrappedTokenInfo)) {
+    return <span />
+  }
+
+  const tags = currency.tags
+  if (!tags || tags.length === 0) return <span />
+
+  const tag = tags[0]
+
+  return (
+    <TagContainer>
+      <MouseoverTooltip text={tag.description}>
+        <Tag key={tag.id}>{tag.name}</Tag>
+      </MouseoverTooltip>
+      {tags.length > 1 ? (
+        <MouseoverTooltip
+          text={tags
+            .slice(1)
+            .map(({ name, description }) => `${name}: ${description}`)
+            .join('; \n')}
+        >
+          <Tag>...</Tag>
+        </MouseoverTooltip>
+      ) : null}
+    </TagContainer>
+  )
+}
+
+function CurrencyRow({
+  currency,
+  onSelect,
+  isSelected,
+  otherSelected,
+  style
+}: {
+  currency: Currency
+  onSelect: () => void
+  isSelected: boolean
+  otherSelected: boolean
+  style: CSSProperties
+}) {
+  const { account, chainId } = useActiveWeb3React()
+  const key = currencyKey(currency)
+  const selectedTokenList = useSelectedTokenList()
+  const isOnSelectedList = isTokenOnList(selectedTokenList, currency)
+  const customAdded = useIsUserAddedToken(currency)
+  const balance = useCurrencyBalance(account ?? undefined, currency)
+
+  const removeToken = useRemoveUserAddedToken()
+  const addToken = useAddUserToken()
+
+  // only show add or remove buttons if not on selected list
+  return (
+    <MenuItem
+      style={style}
+      className={`token-item-${key}`}
+      onClick={() => (isSelected ? null : onSelect())}
+      disabled={isSelected}
+      selected={otherSelected}
+    >
+      <CurrencyLogo currency={currency} size={'24px'} />
+      <Column>
+        <Text title={currency.name} fontWeight={500}>
+          {currency.symbol}
+        </Text>
+        <FadedSpan>
+          {!isOnSelectedList && customAdded ? (
+            <TYPE.main fontWeight={500}>
+              Added by user
+              <LinkStyledButton
+                onClick={event => {
+                  event.stopPropagation()
+                  if (chainId && currency instanceof Token) removeToken(chainId, currency.address)
+                }}
+              >
+                (Remove)
+              </LinkStyledButton>
+            </TYPE.main>
+          ) : null}
+          {!isOnSelectedList && !customAdded ? (
+            <TYPE.main fontWeight={500}>
+              Found by address
+              <LinkStyledButton
+                onClick={event => {
+                  event.stopPropagation()
+                  if (currency instanceof Token) addToken(currency)
+                }}
+              >
+                (Add)
+              </LinkStyledButton>
+            </TYPE.main>
+          ) : null}
+        </FadedSpan>
+      </Column>
+      <TokenTags currency={currency} />
+      <RowFixed style={{ justifySelf: 'flex-end' }}>
+        {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
+      </RowFixed>
+    </MenuItem>
+  )
+}
+
 export default function CurrencyList({
+  height,
   currencies,
-  allBalances,
   selectedCurrency,
   onCurrencySelect,
   otherCurrency,
-  showSendWithSwap
+  fixedListRef,
+  showETH
 }: {
+  height: number
   currencies: Currency[]
-  selectedCurrency: Currency
-  allBalances: { [tokenAddress: string]: CurrencyAmount }
+  selectedCurrency?: Currency | null
   onCurrencySelect: (currency: Currency) => void
-  otherCurrency: Currency
-  showSendWithSwap?: boolean
+  otherCurrency?: Currency | null
+  fixedListRef?: MutableRefObject<FixedSizeList | undefined>
+  showETH: boolean
 }) {
-  const { account, chainId } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-  const allTokens = useAllTokens()
-  const defaultTokens = useDefaultTokenList()
-  const addToken = useAddUserToken()
-  const removeToken = useRemoveUserAddedToken()
-  const ETHBalance = useETHBalances([account])[account]
+  const itemData = useMemo(() => (showETH ? [Currency.ETHER, ...currencies] : currencies), [currencies, showETH])
 
-  const CurrencyRow = useMemo(() => {
-    return memo(function CurrencyRow({ index, style }: { index: number; style: CSSProperties }) {
-      const currency = index === 0 ? Currency.ETHER : currencies[index - 1]
-      const key = currencyKey(currency)
-      const isDefault = isDefaultToken(defaultTokens, currency)
-      const customAdded = Boolean(!isDefault && currency instanceof Token && allTokens[currency.address])
-      const balance = currency === ETHER ? ETHBalance : allBalances[key]
-
-      const zeroBalance = balance && JSBI.equal(JSBI.BigInt(0), balance.raw)
-
-      const isSelected = Boolean(selectedCurrency && currencyEquals(currency, selectedCurrency))
+  const Row = useCallback(
+    ({ data, index, style }) => {
+      const currency: Currency = data[index]
+      const isSelected = Boolean(selectedCurrency && currencyEquals(selectedCurrency, currency))
       const otherSelected = Boolean(otherCurrency && currencyEquals(otherCurrency, currency))
-
+      const handleSelect = () => onCurrencySelect(currency)
       return (
-        <MenuItem
+        <CurrencyRow
           style={style}
-          className={`token-item-${key}`}
-          onClick={() => (isSelected ? null : onCurrencySelect(currency))}
-          disabled={isSelected}
-          selected={otherSelected}
-        >
-          <RowFixed>
-            <CurrencyLogo currency={currency} size={'24px'} style={{ marginRight: '14px' }} />
-            <Column>
-              <Text fontWeight={500}>{currency.symbol}</Text>
-              <FadedSpan>
-                {customAdded ? (
-                  <TYPE.main fontWeight={500}>
-                    Added by user
-                    <LinkStyledButton
-                      onClick={event => {
-                        event.stopPropagation()
-                        if (currency instanceof Token) removeToken(chainId, currency.address)
-                      }}
-                    >
-                      (Remove)
-                    </LinkStyledButton>
-                  </TYPE.main>
-                ) : null}
-                {!isDefault && !customAdded ? (
-                  <TYPE.main fontWeight={500}>
-                    Found by address
-                    <LinkStyledButton
-                      onClick={event => {
-                        event.stopPropagation()
-                        if (currency instanceof Token) addToken(currency)
-                      }}
-                    >
-                      (Add)
-                    </LinkStyledButton>
-                  </TYPE.main>
-                ) : null}
-              </FadedSpan>
-            </Column>
-          </RowFixed>
-          <AutoColumn>
-            {balance ? (
-              <Text>
-                {zeroBalance && showSendWithSwap ? (
-                  <ButtonSecondary padding={'4px 8px'}>
-                    <Text textAlign="center" fontWeight={500} fontSize={14} color={theme.primary1}>
-                      Send With Swap
-                    </Text>
-                  </ButtonSecondary>
-                ) : balance ? (
-                  balance.toSignificant(6)
-                ) : (
-                  '-'
-                )}
-              </Text>
-            ) : account ? (
-              <Loader />
-            ) : (
-              '-'
-            )}
-          </AutoColumn>
-        </MenuItem>
+          currency={currency}
+          isSelected={isSelected}
+          onSelect={handleSelect}
+          otherSelected={otherSelected}
+        />
       )
-    })
-  }, [
-    ETHBalance,
-    account,
-    addToken,
-    allBalances,
-    allTokens,
-    chainId,
-    currencies,
-    defaultTokens,
-    onCurrencySelect,
-    otherCurrency,
-    removeToken,
-    selectedCurrency,
-    showSendWithSwap,
-    theme.primary1
-  ])
+    },
+    [onCurrencySelect, otherCurrency, selectedCurrency]
+  )
+
+  const itemKey = useCallback((index: number, data: any) => currencyKey(data[index]), [])
 
   return (
     <FixedSizeList
+      height={height}
+      ref={fixedListRef as any}
       width="100%"
-      height={500}
-      itemCount={currencies.length + 1}
+      itemData={itemData}
+      itemCount={itemData.length}
       itemSize={56}
-      style={{ flex: '1' }}
-      itemKey={index => currencyKey(currencies[index])}
+      itemKey={itemKey}
     >
-      {CurrencyRow}
+      {Row}
     </FixedSizeList>
   )
 }

src/components/SearchModal/CurrencySearch.tsx

@@ -0,0 +1,214 @@
+import { Currency, ETHER, Token } from '@uniswap/sdk'
+import React, { KeyboardEvent, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import ReactGA from 'react-ga'
+import { useTranslation } from 'react-i18next'
+import { FixedSizeList } from 'react-window'
+import { Text } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import { useActiveWeb3React } from '../../hooks'
+import { useAllTokens, useToken } from '../../hooks/Tokens'
+import { useSelectedListInfo } from '../../state/lists/hooks'
+import { CloseIcon, LinkStyledButton, TYPE } from '../../theme'
+import { isAddress } from '../../utils'
+import Card from '../Card'
+import Column from '../Column'
+import ListLogo from '../ListLogo'
+import QuestionHelper from '../QuestionHelper'
+import Row, { RowBetween } from '../Row'
+import CommonBases from './CommonBases'
+import CurrencyList from './CurrencyList'
+import { filterTokens } from './filtering'
+import SortButton from './SortButton'
+import { useTokenComparator } from './sorting'
+import { PaddedColumn, SearchInput, Separator } from './styleds'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+interface CurrencySearchProps {
+  isOpen: boolean
+  onDismiss: () => void
+  selectedCurrency?: Currency | null
+  onCurrencySelect: (currency: Currency) => void
+  otherSelectedCurrency?: Currency | null
+  showCommonBases?: boolean
+  onChangeList: () => void
+}
+
+export function CurrencySearch({
+  selectedCurrency,
+  onCurrencySelect,
+  otherSelectedCurrency,
+  showCommonBases,
+  onDismiss,
+  isOpen,
+  onChangeList
+}: CurrencySearchProps) {
+  const { t } = useTranslation()
+  const { chainId } = useActiveWeb3React()
+  const theme = useContext(ThemeContext)
+
+  const fixedList = useRef<FixedSizeList>()
+  const [searchQuery, setSearchQuery] = useState<string>('')
+  const [invertSearchOrder, setInvertSearchOrder] = useState<boolean>(false)
+  const allTokens = useAllTokens()
+
+  // if they input an address, use it
+  const isAddressSearch = isAddress(searchQuery)
+  const searchToken = useToken(searchQuery)
+
+  useEffect(() => {
+    if (isAddressSearch) {
+      ReactGA.event({
+        category: 'Currency Select',
+        action: 'Search by address',
+        label: isAddressSearch
+      })
+    }
+  }, [isAddressSearch])
+
+  const showETH: boolean = useMemo(() => {
+    const s = searchQuery.toLowerCase().trim()
+    return s === '' || s === 'e' || s === 'et' || s === 'eth'
+  }, [searchQuery])
+
+  const tokenComparator = useTokenComparator(invertSearchOrder)
+
+  const filteredTokens: Token[] = useMemo(() => {
+    if (isAddressSearch) return searchToken ? [searchToken] : []
+    return filterTokens(Object.values(allTokens), searchQuery)
+  }, [isAddressSearch, searchToken, allTokens, searchQuery])
+
+  const filteredSortedTokens: Token[] = useMemo(() => {
+    if (searchToken) return [searchToken]
+    const sorted = filteredTokens.sort(tokenComparator)
+    const symbolMatch = searchQuery
+      .toLowerCase()
+      .split(/\s+/)
+      .filter(s => s.length > 0)
+    if (symbolMatch.length > 1) return sorted
+
+    return [
+      ...(searchToken ? [searchToken] : []),
+      // sort any exact symbol matches first
+      ...sorted.filter(token => token.symbol?.toLowerCase() === symbolMatch[0]),
+      ...sorted.filter(token => token.symbol?.toLowerCase() !== symbolMatch[0])
+    ]
+  }, [filteredTokens, searchQuery, searchToken, tokenComparator])
+
+  const handleCurrencySelect = useCallback(
+    (currency: Currency) => {
+      onCurrencySelect(currency)
+      onDismiss()
+    },
+    [onDismiss, onCurrencySelect]
+  )
+
+  // clear the input on open
+  useEffect(() => {
+    if (isOpen) setSearchQuery('')
+  }, [isOpen])
+
+  // manage focus on modal show
+  const inputRef = useRef<HTMLInputElement>()
+  const handleInput = useCallback(event => {
+    const input = event.target.value
+    const checksummedInput = isAddress(input)
+    setSearchQuery(checksummedInput || input)
+    fixedList.current?.scrollTo(0)
+  }, [])
+
+  const handleEnter = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        const s = searchQuery.toLowerCase().trim()
+        if (s === 'eth') {
+          handleCurrencySelect(ETHER)
+        } else if (filteredSortedTokens.length > 0) {
+          if (
+            filteredSortedTokens[0].symbol?.toLowerCase() === searchQuery.trim().toLowerCase() ||
+            filteredSortedTokens.length === 1
+          ) {
+            handleCurrencySelect(filteredSortedTokens[0])
+          }
+        }
+      }
+    },
+    [filteredSortedTokens, handleCurrencySelect, searchQuery]
+  )
+
+  const selectedListInfo = useSelectedListInfo()
+
+  return (
+    <Column style={{ width: '100%', flex: '1 1' }}>
+      <PaddedColumn gap="14px">
+        <RowBetween>
+          <Text fontWeight={500} fontSize={16}>
+            Select a token
+            <QuestionHelper text="Find a token by searching for its name or symbol or by pasting its address below." />
+          </Text>
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+        <SearchInput
+          type="text"
+          id="token-search-input"
+          placeholder={t('tokenSearchPlaceholder')}
+          value={searchQuery}
+          ref={inputRef as RefObject<HTMLInputElement>}
+          onChange={handleInput}
+          onKeyDown={handleEnter}
+        />
+        {showCommonBases && (
+          <CommonBases chainId={chainId} onSelect={handleCurrencySelect} selectedCurrency={selectedCurrency} />
+        )}
+        <RowBetween>
+          <Text fontSize={14} fontWeight={500}>
+            Token Name
+          </Text>
+          <SortButton ascending={invertSearchOrder} toggleSortOrder={() => setInvertSearchOrder(iso => !iso)} />
+        </RowBetween>
+      </PaddedColumn>
+
+      <Separator />
+
+      <div style={{ flex: '1' }}>
+        <AutoSizer disableWidth>
+          {({ height }) => (
+            <CurrencyList
+              height={height}
+              showETH={showETH}
+              currencies={filteredSortedTokens}
+              onCurrencySelect={handleCurrencySelect}
+              otherCurrency={otherSelectedCurrency}
+              selectedCurrency={selectedCurrency}
+              fixedListRef={fixedList}
+            />
+          )}
+        </AutoSizer>
+      </div>
+
+      <Separator />
+      <Card>
+        <RowBetween>
+          {selectedListInfo.current ? (
+            <Row>
+              {selectedListInfo.current.logoURI ? (
+                <ListLogo
+                  style={{ marginRight: 12 }}
+                  logoURI={selectedListInfo.current.logoURI}
+                  alt={`${selectedListInfo.current.name} list logo`}
+                />
+              ) : null}
+              <TYPE.main id="currency-search-selected-list-name">{selectedListInfo.current.name}</TYPE.main>
+            </Row>
+          ) : null}
+          <LinkStyledButton
+            style={{ fontWeight: 500, color: theme.text2, fontSize: 16 }}
+            onClick={onChangeList}
+            id="currency-search-change-list-button"
+          >
+            {selectedListInfo.current ? 'Change' : 'Select a list'}
+          </LinkStyledButton>
+        </RowBetween>
+      </Card>
+    </Column>
+  )
+}

src/components/SearchModal/CurrencySearchModal.tsx

@@ -1,35 +1,19 @@
-import { Currency, Token } from '@uniswap/sdk'
-import React, { KeyboardEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { isMobile } from 'react-device-detect'
-import { useTranslation } from 'react-i18next'
-import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
-import Card from '../../components/Card'
-import { useActiveWeb3React } from '../../hooks'
-import { useAllTokens, useToken } from '../../hooks/Tokens'
-import useInterval from '../../hooks/useInterval'
-import { useAllTokenBalances, useTokenBalance } from '../../state/wallet/hooks'
-import { CloseIcon, LinkStyledButton } from '../../theme'
-import { isAddress } from '../../utils'
-import Column from '../Column'
+import { Currency } from '@uniswap/sdk'
+import React, { useCallback, useEffect, useState } from 'react'
+import ReactGA from 'react-ga'
+import useLast from '../../hooks/useLast'
+import { useSelectedListUrl } from '../../state/lists/hooks'
 import Modal from '../Modal'
-import QuestionHelper from '../QuestionHelper'
-import { AutoRow, RowBetween } from '../Row'
-import Tooltip from '../Tooltip'
-import CommonBases from './CommonBases'
-import { filterTokens } from './filtering'
-import { useTokenComparator } from './sorting'
-import { PaddedColumn, SearchInput } from './styleds'
-import CurrencyList from './CurrencyList'
-import SortButton from './SortButton'
+import { CurrencySearch } from './CurrencySearch'
+import ListIntroduction from './ListIntroduction'
+import { ListSelect } from './ListSelect'
 
 interface CurrencySearchModalProps {
-  isOpen?: boolean
-  onDismiss?: () => void
-  hiddenCurrency?: Currency
-  showSendWithSwap?: boolean
-  onCurrencySelect?: (currency: Currency) => void
-  otherSelectedCurrency?: Currency
+  isOpen: boolean
+  onDismiss: () => void
+  selectedCurrency?: Currency | null
+  onCurrencySelect: (currency: Currency) => void
+  otherSelectedCurrency?: Currency | null
   showCommonBases?: boolean
 }
 
@@ -37,53 +21,18 @@ export default function CurrencySearchModal({
   isOpen,
   onDismiss,
   onCurrencySelect,
-  hiddenCurrency,
-  showSendWithSwap,
+  selectedCurrency,
   otherSelectedCurrency,
   showCommonBases = false
 }: CurrencySearchModalProps) {
-  const { t } = useTranslation()
-  const { account, chainId } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
+  const [listView, setListView] = useState<boolean>(false)
+  const lastOpen = useLast(isOpen)
 
-  const [searchQuery, setSearchQuery] = useState<string>('')
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false)
-  const [invertSearchOrder, setInvertSearchOrder] = useState<boolean>(false)
-  const allTokens = useAllTokens()
-
-  // if the current input is an address, and we don't have the token in context, try to fetch it and import
-  const searchToken = useToken(searchQuery)
-  const searchTokenBalance = useTokenBalance(account, searchToken)
-  const allTokenBalances_ = useAllTokenBalances()
-  const allTokenBalances = searchToken
-    ? {
-        [searchToken.address]: searchTokenBalance
-      }
-    : allTokenBalances_ ?? {}
-
-  const tokenComparator = useTokenComparator(invertSearchOrder)
-
-  const filteredTokens: Token[] = useMemo(() => {
-    if (searchToken) return [searchToken]
-    return filterTokens(Object.values(allTokens), searchQuery)
-  }, [searchToken, allTokens, searchQuery])
-
-  const filteredSortedTokens: Token[] = useMemo(() => {
-    if (searchToken) return [searchToken]
-    const sorted = filteredTokens.sort(tokenComparator)
-    const symbolMatch = searchQuery
-      .toLowerCase()
-      .split(/\s+/)
-      .filter(s => s.length > 0)
-    if (symbolMatch.length > 1) return sorted
-
-    return [
-      ...(searchToken ? [searchToken] : []),
-      // sort any exact symbol matches first
-      ...sorted.filter(token => token.symbol.toLowerCase() === symbolMatch[0]),
-      ...sorted.filter(token => token.symbol.toLowerCase() !== symbolMatch[0])
-    ]
-  }, [filteredTokens, searchQuery, searchToken, tokenComparator])
+  useEffect(() => {
+    if (isOpen && !lastOpen) {
+      setListView(false)
+    }
+  }, [isOpen, lastOpen])
 
   const handleCurrencySelect = useCallback(
     (currency: Currency) => {
@@ -93,114 +42,44 @@ export default function CurrencySearchModal({
     [onDismiss, onCurrencySelect]
   )
 
-  // clear the input on open
-  useEffect(() => {
-    if (isOpen) setSearchQuery('')
-  }, [isOpen, setSearchQuery])
-
-  // manage focus on modal show
-  const inputRef = useRef<HTMLInputElement>()
-  const handleInput = useCallback(event => {
-    const input = event.target.value
-    const checksummedInput = isAddress(input)
-    setSearchQuery(checksummedInput || input)
-    setTooltipOpen(false)
+  const handleClickChangeList = useCallback(() => {
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Change Lists'
+    })
+    setListView(true)
+  }, [])
+  const handleClickBack = useCallback(() => {
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Back'
+    })
+    setListView(false)
+  }, [])
+  const handleSelectListIntroduction = useCallback(() => {
+    setListView(true)
   }, [])
 
-  const openTooltip = useCallback(() => {
-    setTooltipOpen(true)
-  }, [setTooltipOpen])
-  const closeTooltip = useCallback(() => setTooltipOpen(false), [setTooltipOpen])
-
-  useInterval(
-    () => {
-      setTooltipOpen(false)
-    },
-    tooltipOpen ? 4000 : null,
-    false
-  )
-
-  const handleEnter = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter' && filteredSortedTokens.length > 0) {
-        if (
-          filteredSortedTokens[0].symbol.toLowerCase() === searchQuery.trim().toLowerCase() ||
-          filteredSortedTokens.length === 1
-        ) {
-          handleCurrencySelect(filteredSortedTokens[0])
-        }
-      }
-    },
-    [filteredSortedTokens, handleCurrencySelect, searchQuery]
-  )
+  const selectedListUrl = useSelectedListUrl()
+  const noListSelected = !selectedListUrl
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onDismiss={onDismiss}
-      maxHeight={70}
-      initialFocusRef={isMobile ? undefined : inputRef}
-      minHeight={70}
-    >
-      <Column style={{ width: '100%' }}>
-        <PaddedColumn gap="14px">
-          <RowBetween>
-            <Text fontWeight={500} fontSize={16}>
-              Select a token
-              <QuestionHelper
-                disabled={tooltipOpen}
-                text="Find a token by searching for its name or symbol or by pasting its address below."
-              />
-            </Text>
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-          <Tooltip
-            text="Import any token into your list by pasting the token address into the search field."
-            show={tooltipOpen}
-            placement="bottom"
-          >
-            <SearchInput
-              type="text"
-              id="token-search-input"
-              placeholder={t('tokenSearchPlaceholder')}
-              value={searchQuery}
-              ref={inputRef}
-              onChange={handleInput}
-              onFocus={closeTooltip}
-              onBlur={closeTooltip}
-              onKeyDown={handleEnter}
-            />
-          </Tooltip>
-          {showCommonBases && (
-            <CommonBases chainId={chainId} onSelect={handleCurrencySelect} selectedCurrency={hiddenCurrency} />
-          )}
-          <RowBetween>
-            <Text fontSize={14} fontWeight={500}>
-              Token Name
-            </Text>
-            <SortButton ascending={invertSearchOrder} toggleSortOrder={() => setInvertSearchOrder(iso => !iso)} />
-          </RowBetween>
-        </PaddedColumn>
-        <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
-        <CurrencyList
-          currencies={filteredSortedTokens}
-          allBalances={allTokenBalances}
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90} minHeight={listView ? 40 : noListSelected ? 0 : 80}>
+      {listView ? (
+        <ListSelect onDismiss={onDismiss} onBack={handleClickBack} />
+      ) : noListSelected ? (
+        <ListIntroduction onSelectList={handleSelectListIntroduction} />
+      ) : (
+        <CurrencySearch
+          isOpen={isOpen}
+          onDismiss={onDismiss}
           onCurrencySelect={handleCurrencySelect}
-          otherCurrency={otherSelectedCurrency}
-          selectedCurrency={hiddenCurrency}
-          showSendWithSwap={showSendWithSwap}
+          onChangeList={handleClickChangeList}
+          selectedCurrency={selectedCurrency}
+          otherSelectedCurrency={otherSelectedCurrency}
+          showCommonBases={showCommonBases}
         />
-        <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
-        <Card>
-          <AutoRow justify={'center'}>
-            <div>
-              <LinkStyledButton style={{ fontWeight: 500, color: theme.text2, fontSize: 16 }} onClick={openTooltip}>
-                Having trouble finding a token?
-              </LinkStyledButton>
-            </div>
-          </AutoRow>
-        </Card>
-      </Column>
+      )}
     </Modal>
   )
 }

src/components/SearchModal/ListIntroduction.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Text } from 'rebass'
+import { ExternalLink } from '../../theme'
+import { ButtonPrimary } from '../Button'
+import { OutlineCard } from '../Card'
+import Column, { AutoColumn } from '../Column'
+import { PaddedColumn } from './styleds'
+import { useDarkModeManager } from '../../state/user/hooks'
+
+import listLight from '../../assets/images/token-list/lists-light.png'
+import listDark from '../../assets/images/token-list/lists-dark.png'
+
+export default function ListIntroduction({ onSelectList }: { onSelectList: () => void }) {
+  const [isDark] = useDarkModeManager()
+
+  return (
+    <Column style={{ width: '100%', flex: '1 1' }}>
+      <PaddedColumn>
+        <AutoColumn gap="14px">
+          <img
+            style={{ width: '120px', margin: '0 auto' }}
+            src={isDark ? listDark : listLight}
+            alt="token-list-preview"
+          />
+          <img
+            style={{ width: '100%', borderRadius: '12px' }}
+            src="https://cloudflare-ipfs.com/ipfs/QmRf1rAJcZjV3pwKTHfPdJh4RxR8yvRHkdLjZCsmp7T6hA"
+            alt="token-list-preview"
+          />
+          <Text style={{ marginBottom: '8px', textAlign: 'center' }}>
+            Uniswap now supports token lists. You can add your own custom lists via IPFS, HTTPS and ENS.{' '}
+          </Text>
+          <ButtonPrimary onClick={onSelectList} id="list-introduction-choose-a-list">
+            Choose a list
+          </ButtonPrimary>
+          <OutlineCard style={{ marginBottom: '8px', padding: '1rem' }}>
+            <Text fontWeight={400} fontSize={14} style={{ textAlign: 'center' }}>
+              Token lists are an{' '}
+              <ExternalLink href="https://github.com/uniswap/token-lists">open specification</ExternalLink>. Check out{' '}
+              <ExternalLink href="https://tokenlists.org">tokenlists.org</ExternalLink> to learn more.
+            </Text>
+          </OutlineCard>
+        </AutoColumn>
+      </PaddedColumn>
+    </Column>
+  )
+}

src/components/SearchModal/ListSelect.tsx

@@ -0,0 +1,379 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { ArrowLeft } from 'react-feather'
+import ReactGA from 'react-ga'
+import { usePopper } from 'react-popper'
+import { useDispatch, useSelector } from 'react-redux'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
+import { useFetchListCallback } from '../../hooks/useFetchListCallback'
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+
+import useToggle from '../../hooks/useToggle'
+import { AppDispatch, AppState } from '../../state'
+import { acceptListUpdate, removeList, selectList } from '../../state/lists/actions'
+import { useSelectedListUrl } from '../../state/lists/hooks'
+import { CloseIcon, ExternalLink, LinkStyledButton, TYPE } from '../../theme'
+import listVersionLabel from '../../utils/listVersionLabel'
+import { parseENSAddress } from '../../utils/parseENSAddress'
+import uriToHttp from '../../utils/uriToHttp'
+import { ButtonOutlined, ButtonPrimary, ButtonSecondary } from '../Button'
+
+import Column from '../Column'
+import ListLogo from '../ListLogo'
+import QuestionHelper from '../QuestionHelper'
+import Row, { RowBetween } from '../Row'
+import { PaddedColumn, SearchInput, Separator, SeparatorDark } from './styleds'
+
+const UnpaddedLinkStyledButton = styled(LinkStyledButton)`
+  padding: 0;
+  font-size: 1rem;
+  opacity: ${({ disabled }) => (disabled ? '0.4' : '1')};
+`
+
+const PopoverContainer = styled.div<{ show: boolean }>`
+  z-index: 100;
+  visibility: ${props => (props.show ? 'visible' : 'hidden')};
+  opacity: ${props => (props.show ? 1 : 0)};
+  transition: visibility 150ms linear, opacity 150ms linear;
+  background: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.bg3};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
+  color: ${({ theme }) => theme.text2};
+  border-radius: 0.5rem;
+  padding: 1rem;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-gap: 8px;
+  font-size: 1rem;
+  text-align: left;
+`
+
+const StyledMenu = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border: none;
+`
+
+const StyledListUrlText = styled.div`
+  max-width: 160px;
+  opacity: 0.6;
+  margin-right: 0.5rem;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+function ListOrigin({ listUrl }: { listUrl: string }) {
+  const ensName = useMemo(() => parseENSAddress(listUrl)?.ensName, [listUrl])
+  const host = useMemo(() => {
+    if (ensName) return undefined
+    const lowerListUrl = listUrl.toLowerCase()
+    if (lowerListUrl.startsWith('ipfs://') || lowerListUrl.startsWith('ipns://')) {
+      return listUrl
+    }
+    try {
+      const url = new URL(listUrl)
+      return url.host
+    } catch (error) {
+      return undefined
+    }
+  }, [listUrl, ensName])
+  return <>{ensName ?? host}</>
+}
+
+function listUrlRowHTMLId(listUrl: string) {
+  return `list-row-${listUrl.replace(/\./g, '-')}`
+}
+
+const ListRow = memo(function ListRow({ listUrl, onBack }: { listUrl: string; onBack: () => void }) {
+  const listsByUrl = useSelector<AppState, AppState['lists']['byUrl']>(state => state.lists.byUrl)
+  const selectedListUrl = useSelectedListUrl()
+  const dispatch = useDispatch<AppDispatch>()
+  const { current: list, pendingUpdate: pending } = listsByUrl[listUrl]
+
+  const isSelected = listUrl === selectedListUrl
+
+  const [open, toggle] = useToggle(false)
+  const node = useRef<HTMLDivElement>()
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>()
+  const [popperElement, setPopperElement] = useState<HTMLDivElement>()
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'auto',
+    strategy: 'fixed',
+    modifiers: [{ name: 'offset', options: { offset: [8, 8] } }]
+  })
+
+  useOnClickOutside(node, open ? toggle : undefined)
+
+  const selectThisList = useCallback(() => {
+    if (isSelected) return
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Select List',
+      label: listUrl
+    })
+
+    dispatch(selectList(listUrl))
+    onBack()
+  }, [dispatch, isSelected, listUrl, onBack])
+
+  const handleAcceptListUpdate = useCallback(() => {
+    if (!pending) return
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Update List from List Select',
+      label: listUrl
+    })
+    dispatch(acceptListUpdate(listUrl))
+  }, [dispatch, listUrl, pending])
+
+  const handleRemoveList = useCallback(() => {
+    ReactGA.event({
+      category: 'Lists',
+      action: 'Start Remove List',
+      label: listUrl
+    })
+    if (window.prompt(`Please confirm you would like to remove this list by typing REMOVE`) === `REMOVE`) {
+      ReactGA.event({
+        category: 'Lists',
+        action: 'Confirm Remove List',
+        label: listUrl
+      })
+      dispatch(removeList(listUrl))
+    }
+  }, [dispatch, listUrl])
+
+  if (!list) return null
+
+  return (
+    <Row key={listUrl} align="center" padding="16px" id={listUrlRowHTMLId(listUrl)}>
+      {list.logoURI ? (
+        <ListLogo style={{ marginRight: '1rem' }} logoURI={list.logoURI} alt={`${list.name} list logo`} />
+      ) : (
+        <div style={{ width: '24px', height: '24px', marginRight: '1rem' }} />
+      )}
+      <Column style={{ flex: '1' }}>
+        <Row>
+          <Text
+            fontWeight={isSelected ? 500 : 400}
+            fontSize={16}
+            style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            {list.name}
+          </Text>
+        </Row>
+        <Row
+          style={{
+            marginTop: '4px'
+          }}
+        >
+          <StyledListUrlText title={listUrl}>
+            <ListOrigin listUrl={listUrl} />
+          </StyledListUrlText>
+        </Row>
+      </Column>
+      <StyledMenu ref={node as any}>
+        <ButtonOutlined
+          style={{
+            width: '2rem',
+            padding: '.8rem .35rem',
+            borderRadius: '12px',
+            fontSize: '14px',
+            marginRight: '0.5rem'
+          }}
+          onClick={toggle}
+          ref={setReferenceElement}
+        >
+          <DropDown />
+        </ButtonOutlined>
+
+        {open && (
+          <PopoverContainer show={true} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
+            <div>{list && listVersionLabel(list.version)}</div>
+            <SeparatorDark />
+            <ExternalLink href={`https://tokenlists.org/token-list?url=${listUrl}`}>View list</ExternalLink>
+            <UnpaddedLinkStyledButton onClick={handleRemoveList} disabled={Object.keys(listsByUrl).length === 1}>
+              Remove list
+            </UnpaddedLinkStyledButton>
+            {pending && (
+              <UnpaddedLinkStyledButton onClick={handleAcceptListUpdate}>Update list</UnpaddedLinkStyledButton>
+            )}
+          </PopoverContainer>
+        )}
+      </StyledMenu>
+      {isSelected ? (
+        <ButtonPrimary
+          disabled={true}
+          className="select-button"
+          style={{ width: '5rem', minWidth: '5rem', padding: '0.5rem .35rem', borderRadius: '12px', fontSize: '14px' }}
+        >
+          Selected
+        </ButtonPrimary>
+      ) : (
+        <>
+          <ButtonPrimary
+            className="select-button"
+            style={{
+              width: '5rem',
+              minWidth: '4.5rem',
+              padding: '0.5rem .35rem',
+              borderRadius: '12px',
+              fontSize: '14px'
+            }}
+            onClick={selectThisList}
+          >
+            Select
+          </ButtonPrimary>
+        </>
+      )}
+    </Row>
+  )
+})
+
+const AddListButton = styled(ButtonSecondary)`
+  /* height: 1.8rem; */
+  max-width: 4rem;
+  margin-left: 1rem;
+  border-radius: 12px;
+  padding: 10px 18px;
+`
+
+const ListContainer = styled.div`
+  flex: 1;
+  overflow: auto;
+`
+
+export function ListSelect({ onDismiss, onBack }: { onDismiss: () => void; onBack: () => void }) {
+  const [listUrlInput, setListUrlInput] = useState<string>('')
+
+  const dispatch = useDispatch<AppDispatch>()
+  const lists = useSelector<AppState, AppState['lists']['byUrl']>(state => state.lists.byUrl)
+  const adding = Boolean(lists[listUrlInput]?.loadingRequestId)
+  const [addError, setAddError] = useState<string | null>(null)
+
+  const handleInput = useCallback(e => {
+    setListUrlInput(e.target.value)
+    setAddError(null)
+  }, [])
+  const fetchList = useFetchListCallback()
+
+  const handleAddList = useCallback(() => {
+    if (adding) return
+    setAddError(null)
+    fetchList(listUrlInput)
+      .then(() => {
+        setListUrlInput('')
+        ReactGA.event({
+          category: 'Lists',
+          action: 'Add List',
+          label: listUrlInput
+        })
+      })
+      .catch(error => {
+        ReactGA.event({
+          category: 'Lists',
+          action: 'Add List Failed',
+          label: listUrlInput
+        })
+        setAddError(error.message)
+        dispatch(removeList(listUrlInput))
+      })
+  }, [adding, dispatch, fetchList, listUrlInput])
+
+  const validUrl: boolean = useMemo(() => {
+    return uriToHttp(listUrlInput).length > 0 || Boolean(parseENSAddress(listUrlInput))
+  }, [listUrlInput])
+
+  const handleEnterKey = useCallback(
+    e => {
+      if (validUrl && e.key === 'Enter') {
+        handleAddList()
+      }
+    },
+    [handleAddList, validUrl]
+  )
+
+  const sortedLists = useMemo(() => {
+    const listUrls = Object.keys(lists)
+    return listUrls
+      .filter(listUrl => {
+        return Boolean(lists[listUrl].current)
+      })
+      .sort((u1, u2) => {
+        const { current: l1 } = lists[u1]
+        const { current: l2 } = lists[u2]
+        if (l1 && l2) {
+          return l1.name.toLowerCase() < l2.name.toLowerCase()
+            ? -1
+            : l1.name.toLowerCase() === l2.name.toLowerCase()
+            ? 0
+            : 1
+        }
+        if (l1) return -1
+        if (l2) return 1
+        return 0
+      })
+  }, [lists])
+
+  return (
+    <Column style={{ width: '100%', flex: '1 1' }}>
+      <PaddedColumn>
+        <RowBetween>
+          <div>
+            <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} />
+          </div>
+          <Text fontWeight={500} fontSize={20}>
+            Manage Lists
+          </Text>
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+      </PaddedColumn>
+
+      <Separator />
+
+      <PaddedColumn gap="14px">
+        <Text fontWeight={600}>
+          Add a list{' '}
+          <QuestionHelper text="Token lists are an open specification for lists of ERC20 tokens. You can use any token list by entering its URL below. Beware that third party token lists can contain fake or malicious ERC20 tokens." />
+        </Text>
+        <Row>
+          <SearchInput
+            type="text"
+            id="list-add-input"
+            placeholder="https:// or ipfs:// or ENS name"
+            value={listUrlInput}
+            onChange={handleInput}
+            onKeyDown={handleEnterKey}
+            style={{ height: '2.75rem', borderRadius: 12, padding: '12px' }}
+          />
+          <AddListButton onClick={handleAddList} disabled={!validUrl}>
+            Add
+          </AddListButton>
+        </Row>
+        {addError ? (
+          <TYPE.error title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
+            {addError}
+          </TYPE.error>
+        ) : null}
+      </PaddedColumn>
+
+      <Separator />
+
+      <ListContainer>
+        {sortedLists.map(listUrl => (
+          <ListRow key={listUrl} listUrl={listUrl} onBack={onBack} />
+        ))}
+      </ListContainer>
+      <Separator />
+
+      <div style={{ padding: '16px', textAlign: 'center' }}>
+        <ExternalLink href="https://tokenlists.org">Browse lists</ExternalLink>
+      </div>
+    </Column>
+  )
+}

src/components/SearchModal/filtering.ts

@@ -31,6 +31,6 @@ export function filterTokens(tokens: Token[], search: string): Token[] {
   return tokens.filter(token => {
     const { symbol, name } = token
 
-    return matchesSearch(symbol) || matchesSearch(name)
+    return (symbol && matchesSearch(symbol)) || (name && matchesSearch(name))
   })
 }

src/components/SearchModal/sorting.ts

@@ -1,6 +1,5 @@
-import { Token, TokenAmount, WETH } from '@uniswap/sdk'
+import { Token, TokenAmount } from '@uniswap/sdk'
 import { useMemo } from 'react'
-import { useActiveWeb3React } from '../../hooks'
 import { useAllTokenBalances } from '../../state/wallet/hooks'
 
 // compare two token amounts with highest one coming first
@@ -15,20 +14,13 @@ function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount) {
   return 0
 }
 
-function getTokenComparator(
-  weth: Token | undefined,
-  balances: { [tokenAddress: string]: TokenAmount }
-): (tokenA: Token, tokenB: Token) => number {
+function getTokenComparator(balances: {
+  [tokenAddress: string]: TokenAmount | undefined
+}): (tokenA: Token, tokenB: Token) => number {
   return function sortTokens(tokenA: Token, tokenB: Token): number {
     // -1 = a is first
     // 1 = b is first
 
-    // sort ETH first
-    if (weth) {
-      if (tokenA.equals(weth)) return -1
-      if (tokenB.equals(weth)) return 1
-    }
-
     // sort by balances
     const balanceA = balances[tokenA.address]
     const balanceB = balances[tokenB.address]
@@ -36,16 +28,18 @@ function getTokenComparator(
     const balanceComp = balanceComparator(balanceA, balanceB)
     if (balanceComp !== 0) return balanceComp
 
-    // sort by symbol
-    return tokenA.symbol.toLowerCase() < tokenB.symbol.toLowerCase() ? -1 : 1
+    if (tokenA.symbol && tokenB.symbol) {
+      // sort by symbol
+      return tokenA.symbol.toLowerCase() < tokenB.symbol.toLowerCase() ? -1 : 1
+    } else {
+      return tokenA.symbol ? -1 : tokenB.symbol ? -1 : 0
+    }
   }
 }
 
 export function useTokenComparator(inverted: boolean): (tokenA: Token, tokenB: Token) => number {
-  const { chainId } = useActiveWeb3React()
-  const weth = WETH[chainId]
   const balances = useAllTokenBalances()
-  const comparator = useMemo(() => getTokenComparator(weth, balances ?? {}), [balances, weth])
+  const comparator = useMemo(() => getTokenComparator(balances ?? {}), [balances])
   return useMemo(() => {
     if (inverted) {
       return (tokenA: Token, tokenB: Token) => comparator(tokenA, tokenB) * -1

src/components/SearchModal/styleds.tsx

@@ -17,12 +17,26 @@ export const FadedSpan = styled(RowFixed)`
   font-size: 14px;
 `
 
-export const GreySpan = styled.span`
-  color: ${({ theme }) => theme.text3};
-  font-weight: 400;
+export const PaddedColumn = styled(AutoColumn)`
+  padding: 20px;
+  padding-bottom: 12px;
 `
 
-export const Input = styled.input`
+export const MenuItem = styled(RowBetween)`
+  padding: 4px 20px;
+  height: 56px;
+  display: grid;
+  grid-template-columns: auto minmax(auto, 1fr) auto minmax(0, 72px);
+  grid-gap: 16px;
+  cursor: ${({ disabled }) => !disabled && 'pointer'};
+  pointer-events: ${({ disabled }) => disabled && 'none'};
+  :hover {
+    background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
+  }
+  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
+`
+
+export const SearchInput = styled.input`
   position: relative;
   display: flex;
   padding: 16px;
@@ -43,28 +57,20 @@ export const Input = styled.input`
   ::placeholder {
     color: ${({ theme }) => theme.text3};
   }
-`
-
-export const PaddedColumn = styled(AutoColumn)`
-  padding: 20px;
-  padding-bottom: 12px;
-`
-
-export const MenuItem = styled(RowBetween)`
-  padding: 4px 20px;
-  height: 56px;
-  cursor: ${({ disabled }) => !disabled && 'pointer'};
-  pointer-events: ${({ disabled }) => disabled && 'none'};
-  :hover {
-    background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
-  }
-  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
-`
-
-export const SearchInput = styled(Input)`
   transition: border 100ms;
   :focus {
     border: 1px solid ${({ theme }) => theme.primary1};
     outline: none;
   }
 `
+export const Separator = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme }) => theme.bg2};
+`
+
+export const SeparatorDark = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme }) => theme.bg3};
+`

src/components/Settings/index.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useEffect, useContext, useState } from 'react'
+import React, { useRef, useContext, useState } from 'react'
 import { Settings, X } from 'react-feather'
 import styled from 'styled-components'
-
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import {
   useUserSlippageTolerance,
   useExpertModeManager,
   useUserDeadline,
   useDarkModeManager
 } from '../../state/user/hooks'
-import SlippageTabs from '../SlippageTabs'
+import TransactionSettings from '../TransactionSettings'
 import { RowFixed, RowBetween } from '../Row'
 import { TYPE } from '../../theme'
 import QuestionHelper from '../QuestionHelper'
@@ -138,27 +138,11 @@ export default function SettingsTab() {
   // show confirmation view before turning on
   const [showConfirmation, setShowConfirmation] = useState(false)
 
-  useEffect(() => {
-    const handleClickOutside = e => {
-      if (node.current?.contains(e.target) ?? false) {
-        return
-      }
-      toggle()
-    }
-
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside)
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [open, toggle])
+  useOnClickOutside(node, open ? toggle : undefined)
 
   return (
-    <StyledMenu ref={node}>
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
       <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)} maxHeight={100}>
         <ModalContentWrapper>
           <AutoColumn gap="lg">
@@ -188,7 +172,7 @@ export default function SettingsTab() {
                   }
                 }}
               >
-                <Text fontSize={20} fontWeight={500}>
+                <Text fontSize={20} fontWeight={500} id="confirm-expert-mode">
                   Turn On Expert Mode
                 </Text>
               </ButtonError>
@@ -196,7 +180,7 @@ export default function SettingsTab() {
           </AutoColumn>
         </ModalContentWrapper>
       </Modal>
-      <StyledMenuButton onClick={toggle}>
+      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button">
         <StyledMenuIcon />
         {expertMode && (
           <EmojiWrapper>
@@ -212,7 +196,7 @@ export default function SettingsTab() {
             <Text fontWeight={600} fontSize={14}>
               Transaction Settings
             </Text>
-            <SlippageTabs
+            <TransactionSettings
               rawSlippage={userSlippageTolerance}
               setRawSlippage={setUserslippageTolerance}
               deadline={deadline}
@@ -229,6 +213,7 @@ export default function SettingsTab() {
                 <QuestionHelper text="Bypasses confirmation modals and allows high slippage trades. Use at your own risk." />
               </RowFixed>
               <Toggle
+                id="toggle-expert-mode-button"
                 isActive={expertMode}
                 toggle={
                   expertMode

src/components/Slider/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
-const StyledRangeInput = styled.input<{ value: number }>`
+const StyledRangeInput = styled.input<{ size: number }>`
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
   width: 100%; /* Specific width is required for Firefox. */
   background: transparent; /* Otherwise white in Chrome */
@@ -17,8 +17,8 @@ const StyledRangeInput = styled.input<{ value: number }>`
 
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    height: 28px;
-    width: 28px;
+    height: ${({ size }) => size}px;
+    width: ${({ size }) => size}px;
     background-color: #565a69;
     border-radius: 100%;
     border: none;
@@ -33,8 +33,8 @@ const StyledRangeInput = styled.input<{ value: number }>`
   }
 
   &::-moz-range-thumb {
-    height: 28px;
-    width: 28px;
+    height: ${({ size }) => size}px;
+    width: ${({ size }) => size}px;
     background-color: #565a69;
     border-radius: 100%;
     border: none;
@@ -48,8 +48,8 @@ const StyledRangeInput = styled.input<{ value: number }>`
   }
 
   &::-ms-thumb {
-    height: 28px;
-    width: 28px;
+    height: ${({ size }) => size}px;
+    width: ${({ size }) => size}px;
     background-color: #565a69;
     border-radius: 100%;
     color: ${({ theme }) => theme.bg1};
@@ -62,24 +62,12 @@ const StyledRangeInput = styled.input<{ value: number }>`
   }
 
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(
-      90deg,
-      ${({ theme }) => theme.bg5},
-      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
-      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
-      ${({ theme }) => theme.bg3}
-    );
+    background: linear-gradient(90deg, ${({ theme }) => theme.bg5}, ${({ theme }) => theme.bg3});
     height: 2px;
   }
 
   &::-moz-range-track {
-    background: linear-gradient(
-      90deg,
-      ${({ theme }) => theme.bg5},
-      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
-      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
-      ${({ theme }) => theme.bg3}
-    );
+    background: linear-gradient(90deg, ${({ theme }) => theme.bg5}, ${({ theme }) => theme.bg3});
     height: 2px;
   }
 
@@ -102,26 +90,31 @@ const StyledRangeInput = styled.input<{ value: number }>`
 interface InputSliderProps {
   value: number
   onChange: (value: number) => void
+  step?: number
+  min?: number
+  max?: number
+  size?: number
 }
 
-export default function InputSlider({ value, onChange }: InputSliderProps) {
+export default function Slider({ value, onChange, min = 0, step = 1, max = 100, size = 28 }: InputSliderProps) {
   const changeCallback = useCallback(
     e => {
-      onChange(e.target.value)
+      onChange(parseInt(e.target.value))
     },
     [onChange]
   )
 
   return (
     <StyledRangeInput
+      size={size}
       type="range"
       value={value}
       style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
       onChange={changeCallback}
-      aria-labelledby="input-slider"
-      step={1}
-      min={0}
-      max={100}
+      aria-labelledby="input slider"
+      step={step}
+      min={min}
+      max={max}
     />
   )
 }

src/components/Toggle/index.tsx

@@ -10,26 +10,26 @@ const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
   font-weight: 400;
 `
 
-const StyledToggle = styled.a<{ isActive?: boolean; activeElement?: boolean }>`
+const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
   border-radius: 16px;
   border: 1px solid ${({ theme, isActive }) => (isActive ? theme.primary5 : theme.text4)};
   display: flex;
   width: fit-content;
   cursor: pointer;
-  text-decoration: none;
-  :hover {
-    text-decoration: none;
-  }
+  outline: none;
+  padding: 0;
+  background-color: transparent;
 `
 
 export interface ToggleProps {
+  id?: string
   isActive: boolean
   toggle: () => void
 }
 
-export default function Toggle({ isActive, toggle }: ToggleProps) {
+export default function Toggle({ id, isActive, toggle }: ToggleProps) {
   return (
-    <StyledToggle isActive={isActive} target="_self" onClick={toggle}>
+    <StyledToggle id={id} isActive={isActive} onClick={toggle}>
       <ToggleElement isActive={isActive} isOnSwitch={true}>
         On
       </ToggleElement>

src/components/TokenWarningCard/index.tsx

@@ -1,139 +0,0 @@
-import { Currency, Token } from '@uniswap/sdk'
-import { transparentize } from 'polished'
-import React, { useMemo } from 'react'
-import styled from 'styled-components'
-import { useActiveWeb3React } from '../../hooks'
-import { useAllTokens } from '../../hooks/Tokens'
-import { useDefaultTokenList } from '../../state/lists/hooks'
-import { Field } from '../../state/swap/actions'
-import { ExternalLink, TYPE } from '../../theme'
-import { getEtherscanLink, isDefaultToken } from '../../utils'
-import PropsOfExcluding from '../../utils/props-of-excluding'
-import CurrencyLogo from '../CurrencyLogo'
-import { AutoRow, RowBetween } from '../Row'
-import { AutoColumn } from '../Column'
-import { AlertTriangle } from 'react-feather'
-import { ButtonError } from '../Button'
-import { useTokenWarningDismissal } from '../../state/user/hooks'
-
-const Wrapper = styled.div<{ error: boolean }>`
-  background: ${({ theme }) => transparentize(0.6, theme.white)};
-  padding: 0.75rem;
-  border-radius: 20px;
-`
-
-const WarningContainer = styled.div`
-  max-width: 420px;
-  width: 100%;
-  padding: 1rem;
-  background: rgba(242, 150, 2, 0.05);
-  border: 1px solid #f3841e;
-  box-sizing: border-box;
-  border-radius: 20px;
-  margin-bottom: 2rem;
-`
-
-const StyledWarningIcon = styled(AlertTriangle)`
-  stroke: ${({ theme }) => theme.red2};
-`
-
-interface TokenWarningCardProps extends PropsOfExcluding<typeof Wrapper, 'error'> {
-  token?: Token
-}
-
-export default function TokenWarningCard({ token, ...rest }: TokenWarningCardProps) {
-  const { chainId } = useActiveWeb3React()
-  const defaultTokens = useDefaultTokenList()
-  const isDefault = isDefaultToken(defaultTokens, token)
-
-  const tokenSymbol = token?.symbol?.toLowerCase() ?? ''
-  const tokenName = token?.name?.toLowerCase() ?? ''
-
-  const allTokens = useAllTokens()
-
-  const duplicateNameOrSymbol = useMemo(() => {
-    if (isDefault || !token || !chainId) return false
-
-    return Object.keys(allTokens).some(tokenAddress => {
-      const userToken = allTokens[tokenAddress]
-      if (userToken.equals(token)) {
-        return false
-      }
-      return userToken.symbol.toLowerCase() === tokenSymbol || userToken.name.toLowerCase() === tokenName
-    })
-  }, [isDefault, token, chainId, allTokens, tokenSymbol, tokenName])
-
-  if (isDefault || !token) return null
-
-  return (
-    <Wrapper error={duplicateNameOrSymbol} {...rest}>
-      <AutoRow gap="6px">
-        <AutoColumn gap="24px">
-          <CurrencyLogo currency={token} size={'16px'} />
-          <div> </div>
-        </AutoColumn>
-        <AutoColumn gap="10px" justify="flex-start">
-          <TYPE.main>
-            {token && token.name && token.symbol && token.name !== token.symbol
-              ? `${token.name} (${token.symbol})`
-              : token.name || token.symbol}
-          </TYPE.main>
-          <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'token')}>
-            <TYPE.blue> (View on Etherscan)</TYPE.blue>
-          </ExternalLink>
-        </AutoColumn>
-      </AutoRow>
-    </Wrapper>
-  )
-}
-
-export function TokenWarningCards({ currencies }: { currencies: { [field in Field]?: Currency } }) {
-  const { chainId } = useActiveWeb3React()
-  const [dismissedToken0, dismissToken0] = useTokenWarningDismissal(chainId, currencies[Field.INPUT])
-  const [dismissedToken1, dismissToken1] = useTokenWarningDismissal(chainId, currencies[Field.OUTPUT])
-
-  return (
-    <WarningContainer className="token-warning-container">
-      <AutoColumn gap="lg">
-        <AutoRow gap="6px">
-          <StyledWarningIcon />
-          <TYPE.main color={'red2'}>Token imported</TYPE.main>
-        </AutoRow>
-        <TYPE.body color={'red2'}>
-          Anyone can create and name any ERC20 token on Ethereum, including creating fake versions of existing tokens
-          and tokens that claim to represent projects that do not have a token.
-        </TYPE.body>
-        <TYPE.body color={'red2'}>
-          Similar to Etherscan, this site can load arbitrary tokens via token addresses. Please do your own research
-          before interacting with any ERC20 token.
-        </TYPE.body>
-        {Object.keys(currencies).map(field => {
-          const dismissed = field === Field.INPUT ? dismissedToken0 : dismissedToken1
-          return currencies[field] instanceof Token && !dismissed ? (
-            <TokenWarningCard key={field} token={currencies[field]} />
-          ) : null
-        })}
-        <RowBetween>
-          <div />
-          <ButtonError
-            error={true}
-            width={'140px'}
-            padding="0.5rem 1rem"
-            style={{
-              borderRadius: '10px'
-            }}
-            onClick={() => {
-              dismissToken0 && dismissToken0()
-              dismissToken1 && dismissToken1()
-            }}
-          >
-            <TYPE.body color="white" className="token-dismiss-button">
-              I understand
-            </TYPE.body>
-          </ButtonError>
-          <div />
-        </RowBetween>
-      </AutoColumn>
-    </WarningContainer>
-  )
-}

src/components/TokenWarningModal/index.tsx

@@ -0,0 +1,153 @@
+import { Token } from '@uniswap/sdk'
+import { transparentize } from 'polished'
+import React, { useCallback, useMemo, useState } from 'react'
+import styled from 'styled-components'
+import { useActiveWeb3React } from '../../hooks'
+import { useAllTokens } from '../../hooks/Tokens'
+import { ExternalLink, TYPE } from '../../theme'
+import { getEtherscanLink, shortenAddress } from '../../utils'
+import CurrencyLogo from '../CurrencyLogo'
+import Modal from '../Modal'
+import { AutoRow, RowBetween } from '../Row'
+import { AutoColumn } from '../Column'
+import { AlertTriangle } from 'react-feather'
+import { ButtonError } from '../Button'
+
+const Wrapper = styled.div<{ error: boolean }>`
+  background: ${({ theme }) => transparentize(0.6, theme.bg3)};
+  padding: 0.75rem;
+  border-radius: 20px;
+`
+
+const WarningContainer = styled.div`
+  max-width: 420px;
+  width: 100%;
+  padding: 1rem;
+  background: rgba(242, 150, 2, 0.05);
+  border: 1px solid #f3841e;
+  border-radius: 20px;
+  overflow: auto;
+`
+
+const StyledWarningIcon = styled(AlertTriangle)`
+  stroke: ${({ theme }) => theme.red2};
+`
+
+interface TokenWarningCardProps {
+  token?: Token
+}
+
+function TokenWarningCard({ token }: TokenWarningCardProps) {
+  const { chainId } = useActiveWeb3React()
+
+  const tokenSymbol = token?.symbol?.toLowerCase() ?? ''
+  const tokenName = token?.name?.toLowerCase() ?? ''
+
+  const allTokens = useAllTokens()
+
+  const duplicateNameOrSymbol = useMemo(() => {
+    if (!token || !chainId) return false
+
+    return Object.keys(allTokens).some(tokenAddress => {
+      const userToken = allTokens[tokenAddress]
+      if (userToken.equals(token)) {
+        return false
+      }
+      return userToken.symbol?.toLowerCase() === tokenSymbol || userToken.name?.toLowerCase() === tokenName
+    })
+  }, [token, chainId, allTokens, tokenSymbol, tokenName])
+
+  if (!token) return null
+
+  return (
+    <Wrapper error={duplicateNameOrSymbol}>
+      <AutoRow gap="6px">
+        <AutoColumn gap="24px">
+          <CurrencyLogo currency={token} size={'16px'} />
+          <div> </div>
+        </AutoColumn>
+        <AutoColumn gap="10px" justify="flex-start">
+          <TYPE.main>
+            {token && token.name && token.symbol && token.name !== token.symbol
+              ? `${token.name} (${token.symbol})`
+              : token.name || token.symbol}{' '}
+          </TYPE.main>
+          {chainId && (
+            <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'token')}>
+              <TYPE.blue title={token.address}>{shortenAddress(token.address)} (View on Etherscan)</TYPE.blue>
+            </ExternalLink>
+          )}
+        </AutoColumn>
+      </AutoRow>
+    </Wrapper>
+  )
+}
+
+export default function TokenWarningModal({
+  isOpen,
+  tokens,
+  onConfirm
+}: {
+  isOpen: boolean
+  tokens: Token[]
+  onConfirm: () => void
+}) {
+  const [understandChecked, setUnderstandChecked] = useState(false)
+  const toggleUnderstand = useCallback(() => setUnderstandChecked(uc => !uc), [])
+
+  const handleDismiss = useCallback(() => null, [])
+  return (
+    <Modal isOpen={isOpen} onDismiss={handleDismiss} maxHeight={90}>
+      <WarningContainer className="token-warning-container">
+        <AutoColumn gap="lg">
+          <AutoRow gap="6px">
+            <StyledWarningIcon />
+            <TYPE.main color={'red2'}>Token imported</TYPE.main>
+          </AutoRow>
+          <TYPE.body color={'red2'}>
+            Anyone can create an ERC20 token on Ethereum with <em>any</em> name, including creating fake versions of
+            existing tokens and tokens that claim to represent projects that do not have a token.
+          </TYPE.body>
+          <TYPE.body color={'red2'}>
+            This interface can load arbitrary tokens by token addresses. Please take extra caution and do your research
+            when interacting with arbitrary ERC20 tokens.
+          </TYPE.body>
+          <TYPE.body color={'red2'}>
+            If you purchase an arbitrary token, <strong>you may be unable to sell it back.</strong>
+          </TYPE.body>
+          {tokens.map(token => {
+            return <TokenWarningCard key={token.address} token={token} />
+          })}
+          <RowBetween>
+            <div>
+              <label style={{ cursor: 'pointer', userSelect: 'none' }}>
+                <input
+                  type="checkbox"
+                  className="understand-checkbox"
+                  checked={understandChecked}
+                  onChange={toggleUnderstand}
+                />{' '}
+                I understand
+              </label>
+            </div>
+            <ButtonError
+              disabled={!understandChecked}
+              error={true}
+              width={'140px'}
+              padding="0.5rem 1rem"
+              className="token-dismiss-button"
+              style={{
+                borderRadius: '10px'
+              }}
+              onClick={() => {
+                onConfirm()
+              }}
+            >
+              <TYPE.body color="white">Continue</TYPE.body>
+            </ButtonError>
+          </RowBetween>
+        </AutoColumn>
+      </WarningContainer>
+    </Modal>
+  )
+}

src/components/TransactionConfirmationModal/index.tsx

@@ -91,11 +91,13 @@ function TransactionSubmittedContent({
             Transaction Submitted
           </Text>
 
-          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
-            <Text fontWeight={500} fontSize={14} color={theme.primary1}>
-              View on Etherscan
-            </Text>
-          </ExternalLink>
+          {chainId && hash && (
+            <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
+              <Text fontWeight={500} fontSize={14} color={theme.primary1}>
+                View on Etherscan
+              </Text>
+            </ExternalLink>
+          )}
           <ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
             <Text fontWeight={500} fontSize={20}>
               Close

src/components/TransactionConfirmationModal/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/components/TransactionSettings/index.tsx

@@ -104,48 +104,44 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
     slippageInput === '' || (rawSlippage / 100).toFixed(2) === Number.parseFloat(slippageInput).toFixed(2)
   const deadlineInputIsValid = deadlineInput === '' || (deadline / 60).toString() === deadlineInput
 
-  let slippageError: SlippageError
+  let slippageError: SlippageError | undefined
   if (slippageInput !== '' && !slippageInputIsValid) {
     slippageError = SlippageError.InvalidInput
   } else if (slippageInputIsValid && rawSlippage < 50) {
     slippageError = SlippageError.RiskyLow
   } else if (slippageInputIsValid && rawSlippage > 500) {
     slippageError = SlippageError.RiskyHigh
+  } else {
+    slippageError = undefined
   }
 
-  let deadlineError: DeadlineError
+  let deadlineError: DeadlineError | undefined
   if (deadlineInput !== '' && !deadlineInputIsValid) {
     deadlineError = DeadlineError.InvalidInput
+  } else {
+    deadlineError = undefined
   }
 
-  function parseCustomSlippage(event) {
-    setSlippageInput(event.target.value)
+  function parseCustomSlippage(value: string) {
+    setSlippageInput(value)
 
-    let valueAsIntFromRoundedFloat: number
     try {
-      valueAsIntFromRoundedFloat = Number.parseInt((Number.parseFloat(event.target.value) * 100).toString())
+      const valueAsIntFromRoundedFloat = Number.parseInt((Number.parseFloat(value) * 100).toString())
+      if (!Number.isNaN(valueAsIntFromRoundedFloat) && valueAsIntFromRoundedFloat < 5000) {
+        setRawSlippage(valueAsIntFromRoundedFloat)
+      }
     } catch {}
-
-    if (
-      typeof valueAsIntFromRoundedFloat === 'number' &&
-      !Number.isNaN(valueAsIntFromRoundedFloat) &&
-      valueAsIntFromRoundedFloat < 5000
-    ) {
-      setRawSlippage(valueAsIntFromRoundedFloat)
-    }
   }
 
-  function parseCustomDeadline(event) {
-    setDeadlineInput(event.target.value)
+  function parseCustomDeadline(value: string) {
+    setDeadlineInput(value)
 
-    let valueAsInt: number
     try {
-      valueAsInt = Number.parseInt(event.target.value) * 60
+      const valueAsInt: number = Number.parseInt(value) * 60
+      if (!Number.isNaN(valueAsInt) && valueAsInt > 0) {
+        setDeadline(valueAsInt)
+      }
     } catch {}
-
-    if (typeof valueAsInt === 'number' && !Number.isNaN(valueAsInt) && valueAsInt > 0) {
-      setDeadline(valueAsInt)
-    }
   }
 
   return (
@@ -195,14 +191,15 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
                   </span>
                 </SlippageEmojiContainer>
               ) : null}
+              {/* https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */}
               <Input
-                ref={inputRef}
+                ref={inputRef as any}
                 placeholder={(rawSlippage / 100).toFixed(2)}
                 value={slippageInput}
                 onBlur={() => {
-                  parseCustomSlippage({ target: { value: (rawSlippage / 100).toFixed(2) } })
+                  parseCustomSlippage((rawSlippage / 100).toFixed(2))
                 }}
-                onChange={parseCustomSlippage}
+                onChange={e => parseCustomSlippage(e.target.value)}
                 color={!slippageInputIsValid ? 'red' : ''}
               />
               %
@@ -238,11 +235,11 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
             <Input
               color={!!deadlineError ? 'red' : undefined}
               onBlur={() => {
-                parseCustomDeadline({ target: { value: (deadline / 60).toString() } })
+                parseCustomDeadline((deadline / 60).toString())
               }}
               placeholder={(deadline / 60).toString()}
               value={deadlineInput}
-              onChange={parseCustomDeadline}
+              onChange={e => parseCustomDeadline(e.target.value)}
             />
           </OptionCustom>
           <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>

src/components/WalletModal/Option.tsx

@@ -73,7 +73,7 @@ const SubHeader = styled.div`
   font-size: 12px;
 `
 
-const IconWrapper = styled.div<{ size?: number }>`
+const IconWrapper = styled.div<{ size?: number | null }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -90,7 +90,7 @@ const IconWrapper = styled.div<{ size?: number }>`
 export default function Option({
   link = null,
   clickable = true,
-  size = null,
+  size,
   onClick = null,
   color,
   header,

src/components/WalletModal/PendingView.tsx

@@ -86,7 +86,7 @@ export default function PendingView({
               <ErrorButton
                 onClick={() => {
                   setPendingError(false)
-                  tryActivation(connector)
+                  connector && tryActivation(connector)
                 }}
               >
                 Try Again

src/components/WalletModal/index.tsx

@@ -17,6 +17,7 @@ import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { injected, fortmatic, portis } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import { AbstractConnector } from '@web3-react/abstract-connector'
 
 const CloseIcon = styled.div`
   position: absolute;
@@ -128,7 +129,7 @@ export default function WalletModal({
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
 
-  const [pendingWallet, setPendingWallet] = useState()
+  const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
 
   const [pendingError, setPendingError] = useState<boolean>()
 
@@ -161,7 +162,7 @@ export default function WalletModal({
     }
   }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
 
-  const tryActivation = async connector => {
+  const tryActivation = async (connector: AbstractConnector | undefined) => {
     let name = ''
     Object.keys(SUPPORTED_WALLETS).map(key => {
       if (connector === SUPPORTED_WALLETS[key].connector) {
@@ -183,13 +184,14 @@ export default function WalletModal({
       connector.walletConnectProvider = undefined
     }
 
-    activate(connector, undefined, true).catch(error => {
-      if (error instanceof UnsupportedChainIdError) {
-        activate(connector) // a little janky...can't use setError because the connector isn't set
-      } else {
-        setPendingError(true)
-      }
-    })
+    connector &&
+      activate(connector, undefined, true).catch(error => {
+        if (error instanceof UnsupportedChainIdError) {
+          activate(connector) // a little janky...can't use setError because the connector isn't set
+        } else {
+          setPendingError(true)
+        }
+      })
   }
 
   // close wallet modal if fortmatic modal is active
@@ -358,7 +360,7 @@ export default function WalletModal({
   }
 
   return (
-    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={null} maxHeight={90}>
+    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
       <Wrapper>{getModalContent()}</Wrapper>
     </Modal>
   )

src/components/Web3ReactManager/index.tsx

@@ -19,7 +19,7 @@ const Message = styled.h2`
   color: ${({ theme }) => theme.secondary1};
 `
 
-export default function Web3ReactManager({ children }) {
+export default function Web3ReactManager({ children }: { children: JSX.Element }) {
   const { t } = useTranslation()
   const { active } = useWeb3React()
   const { active: networkActive, error: networkError, activate: activateNetwork } = useWeb3React(NetworkContextName)

src/components/Web3Status/index.tsx

@@ -1,28 +1,29 @@
-import React, { useMemo } from 'react'
-import styled, { css } from 'styled-components'
-import { useTranslation } from 'react-i18next'
-import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { darken, lighten } from 'polished'
+import React, { useMemo } from 'react'
 import { Activity } from 'react-feather'
+import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
+import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
+import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
+import PortisIcon from '../../assets/images/portisIcon.png'
+import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
+import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
+import { NetworkContextName } from '../../constants'
 import useENSName from '../../hooks/useENSName'
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import { useWalletModalToggle } from '../../state/application/hooks'
+import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
 import { TransactionDetails } from '../../state/transactions/reducer'
+import { shortenAddress } from '../../utils'
+import { ButtonSecondary } from '../Button'
 
 import Identicon from '../Identicon'
-import PortisIcon from '../../assets/images/portisIcon.png'
-import WalletModal from '../WalletModal'
-import { ButtonSecondary } from '../Button'
-import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
-import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
+import Loader from '../Loader'
 
 import { RowBetween } from '../Row'
-import { shortenAddress } from '../../utils'
-import { useAllTransactions } from '../../state/transactions/hooks'
-import { NetworkContextName } from '../../constants'
-import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
-import Loader from '../Loader'
+import WalletModal from '../WalletModal'
 
 const IconWrapper = styled.div<{ size?: number }>`
   ${({ theme }) => theme.flexColumnNoWrap};
@@ -118,104 +119,114 @@ const NetworkIcon = styled(Activity)`
 `
 
 // we want the latest one to come first, so return negative if a is after b
-function newTranscationsFirst(a: TransactionDetails, b: TransactionDetails) {
+function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
   return b.addedTime - a.addedTime
 }
 
-function recentTransactionsOnly(a: TransactionDetails) {
-  return new Date().getTime() - a.addedTime < 86_400_000
-}
-
 const SOCK = (
   <span role="img" aria-label="has socks emoji" style={{ marginTop: -4, marginBottom: -4 }}>
     🧦
   </span>
 )
 
-export default function Web3Status() {
-  const { t } = useTranslation()
-  const { active, account, connector, error } = useWeb3React()
-  const contextNetwork = useWeb3React(NetworkContextName)
+// eslint-disable-next-line react/prop-types
+function StatusIcon({ connector }: { connector: AbstractConnector }) {
+  if (connector === injected) {
+    return <Identicon />
+  } else if (connector === walletconnect) {
+    return (
+      <IconWrapper size={16}>
+        <img src={WalletConnectIcon} alt={''} />
+      </IconWrapper>
+    )
+  } else if (connector === walletlink) {
+    return (
+      <IconWrapper size={16}>
+        <img src={CoinbaseWalletIcon} alt={''} />
+      </IconWrapper>
+    )
+  } else if (connector === fortmatic) {
+    return (
+      <IconWrapper size={16}>
+        <img src={FortmaticIcon} alt={''} />
+      </IconWrapper>
+    )
+  } else if (connector === portis) {
+    return (
+      <IconWrapper size={16}>
+        <img src={PortisIcon} alt={''} />
+      </IconWrapper>
+    )
+  }
+  return null
+}
 
-  const { ENSName } = useENSName(account)
+function Web3StatusInner() {
+  const { t } = useTranslation()
+  const { account, connector, error } = useWeb3React()
+
+  const { ENSName } = useENSName(account ?? undefined)
 
   const allTransactions = useAllTransactions()
 
   const sortedRecentTransactions = useMemo(() => {
     const txs = Object.values(allTransactions)
-    return txs.filter(recentTransactionsOnly).sort(newTranscationsFirst)
+    return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
   }, [allTransactions])
 
   const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
-  const confirmed = sortedRecentTransactions.filter(tx => tx.receipt).map(tx => tx.hash)
 
   const hasPendingTransactions = !!pending.length
   const hasSocks = useHasSocks()
   const toggleWalletModal = useWalletModalToggle()
 
-  // handle the logo we want to show with the account
-  function getStatusIcon() {
-    if (connector === injected) {
-      return <Identicon />
-    } else if (connector === walletconnect) {
-      return (
-        <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''} />
-        </IconWrapper>
-      )
-    } else if (connector === walletlink) {
-      return (
-        <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''} />
-        </IconWrapper>
-      )
-    } else if (connector === fortmatic) {
-      return (
-        <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''} />
-        </IconWrapper>
-      )
-    } else if (connector === portis) {
-      return (
-        <IconWrapper size={16}>
-          <img src={PortisIcon} alt={''} />
-        </IconWrapper>
-      )
-    }
+  if (account) {
+    return (
+      <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
+        {hasPendingTransactions ? (
+          <RowBetween>
+            <Text>{pending?.length} Pending</Text> <Loader stroke="white" />
+          </RowBetween>
+        ) : (
+          <>
+            {hasSocks ? SOCK : null}
+            <Text>{ENSName || shortenAddress(account)}</Text>
+          </>
+        )}
+        {!hasPendingTransactions && connector && <StatusIcon connector={connector} />}
+      </Web3StatusConnected>
+    )
+  } else if (error) {
+    return (
+      <Web3StatusError onClick={toggleWalletModal}>
+        <NetworkIcon />
+        <Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
+      </Web3StatusError>
+    )
+  } else {
+    return (
+      <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
+        <Text>{t('Connect to a wallet')}</Text>
+      </Web3StatusConnect>
+    )
   }
+}
 
-  function getWeb3Status() {
-    if (account) {
-      return (
-        <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
-          {hasPendingTransactions ? (
-            <RowBetween>
-              <Text>{pending?.length} Pending</Text> <Loader stroke="white" />
-            </RowBetween>
-          ) : (
-            <>
-              {hasSocks ? SOCK : null}
-              <Text>{ENSName || shortenAddress(account)}</Text>
-            </>
-          )}
-          {!hasPendingTransactions && getStatusIcon()}
-        </Web3StatusConnected>
-      )
-    } else if (error) {
-      return (
-        <Web3StatusError onClick={toggleWalletModal}>
-          <NetworkIcon />
-          <Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
-        </Web3StatusError>
-      )
-    } else {
-      return (
-        <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
-          <Text>{t('Connect to a wallet')}</Text>
-        </Web3StatusConnect>
-      )
-    }
-  }
+export default function Web3Status() {
+  const { active, account } = useWeb3React()
+  const contextNetwork = useWeb3React(NetworkContextName)
+
+  const { ENSName } = useENSName(account ?? undefined)
+
+  const allTransactions = useAllTransactions()
+
+  const sortedRecentTransactions = useMemo(() => {
+    const txs = Object.values(allTransactions)
+    return txs.filter(isTransactionRecent).sort(newTransactionsFirst)
+  }, [allTransactions])
+
+  const pending = sortedRecentTransactions.filter(tx => !tx.receipt).map(tx => tx.hash)
+  const confirmed = sortedRecentTransactions.filter(tx => tx.receipt).map(tx => tx.hash)
 
   if (!contextNetwork.active && !active) {
     return null
@@ -223,8 +234,8 @@ export default function Web3Status() {
 
   return (
     <>
-      {getWeb3Status()}
-      <WalletModal ENSName={ENSName} pendingTransactions={pending} confirmedTransactions={confirmed} />
+      <Web3StatusInner />
+      <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
     </>
   )
 }

src/components/analytics/GoogleAnalyticsReporter.tsx

@@ -3,7 +3,7 @@ import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 
 // fires a GA pageview every time the route changes
-export default function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps) {
+export default function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps): null {
   useEffect(() => {
     ReactGA.pageview(`${pathname}${search}`)
   }, [pathname, search])

src/components/swap/TradePrice.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Currency, Price } from '@uniswap/sdk'
+import { Price } from '@uniswap/sdk'
 import { useContext } from 'react'
 import { Repeat } from 'react-feather'
 import { Text } from 'rebass'
@@ -8,27 +8,19 @@ import { StyledBalanceMaxMini } from './styleds'
 
 interface TradePriceProps {
   price?: Price
-  inputCurrency?: Currency
-  outputCurrency?: Currency
   showInverted: boolean
   setShowInverted: (showInverted: boolean) => void
 }
 
-export default function TradePrice({
-  price,
-  inputCurrency,
-  outputCurrency,
-  showInverted,
-  setShowInverted
-}: TradePriceProps) {
+export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
   const theme = useContext(ThemeContext)
 
   const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
 
-  const show = Boolean(inputCurrency && outputCurrency)
+  const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
   const label = showInverted
-    ? `${outputCurrency?.symbol} per ${inputCurrency?.symbol}`
-    : `${inputCurrency?.symbol} per ${outputCurrency?.symbol}`
+    ? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
+    : `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
 
   return (
     <Text

src/components/swap/styleds.tsx

@@ -30,7 +30,7 @@ export const SectionBreak = styled.div`
 `
 
 export const BottomGrouping = styled.div`
-  margin-top: 12px;
+  margin-top: 1rem;
 `
 
 export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`

src/components/swap/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/connectors/Fortmatic.ts

@@ -16,6 +16,7 @@ export class FortmaticConnector extends FortmaticConnectorCore {
   async activate() {
     if (!this.fortmatic) {
       const { default: Fortmatic } = await import('fortmatic')
+
       const { apiKey, chainId } = this as any
       if (chainId in CHAIN_ID_NETWORK_ARGUMENT) {
         this.fortmatic = new Fortmatic(apiKey, CHAIN_ID_NETWORK_ARGUMENT[chainId as FormaticSupportedChains])

src/connectors/NetworkConnector.ts

@@ -152,6 +152,10 @@ export class NetworkConnector extends AbstractConnector {
     }, {})
   }
 
+  public get provider(): MiniRpcProvider {
+    return this.providers[this.currentChainId]
+  }
+
   public async activate(): Promise<ConnectorUpdate> {
     return { provider: this.providers[this.currentChainId], chainId: this.currentChainId, account: null }
   }

src/connectors/index.ts

@@ -1,3 +1,4 @@
+import { Web3Provider } from '@ethersproject/providers'
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
@@ -10,14 +11,21 @@ const NETWORK_URL = process.env.REACT_APP_NETWORK_URL
 const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY
 const PORTIS_ID = process.env.REACT_APP_PORTIS_ID
 
+export const NETWORK_CHAIN_ID: number = parseInt(process.env.REACT_APP_CHAIN_ID ?? '1')
+
 if (typeof NETWORK_URL === 'undefined') {
   throw new Error(`REACT_APP_NETWORK_URL must be a defined environment variable`)
 }
 
 export const network = new NetworkConnector({
-  urls: { [Number(process.env.REACT_APP_CHAIN_ID)]: NETWORK_URL }
+  urls: { [NETWORK_CHAIN_ID]: NETWORK_URL }
 })
 
+let networkLibrary: Web3Provider | undefined
+export function getNetworkLibrary(): Web3Provider {
+  return (networkLibrary = networkLibrary ?? new Web3Provider(network.provider as any))
+}
+
 export const injected = new InjectedConnector({
   supportedChainIds: [1, 3, 4, 5, 42]
 })

src/connectors/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/constants/abis/ens-public-resolver.json

@@ -0,0 +1,816 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "contract ENS",
+        "name": "_ens",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "contentType",
+        "type": "uint256"
+      }
+    ],
+    "name": "ABIChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "a",
+        "type": "address"
+      }
+    ],
+    "name": "AddrChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "coinType",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes",
+        "name": "newAddress",
+        "type": "bytes"
+      }
+    ],
+    "name": "AddressChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "target",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "bool",
+        "name": "isAuthorised",
+        "type": "bool"
+      }
+    ],
+    "name": "AuthorisationChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes",
+        "name": "hash",
+        "type": "bytes"
+      }
+    ],
+    "name": "ContenthashChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes",
+        "name": "name",
+        "type": "bytes"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint16",
+        "name": "resource",
+        "type": "uint16"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes",
+        "name": "record",
+        "type": "bytes"
+      }
+    ],
+    "name": "DNSRecordChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes",
+        "name": "name",
+        "type": "bytes"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint16",
+        "name": "resource",
+        "type": "uint16"
+      }
+    ],
+    "name": "DNSRecordDeleted",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "DNSZoneCleared",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "internalType": "bytes4",
+        "name": "interfaceID",
+        "type": "bytes4"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "implementer",
+        "type": "address"
+      }
+    ],
+    "name": "InterfaceChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "name",
+        "type": "string"
+      }
+    ],
+    "name": "NameChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes32",
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "bytes32",
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "name": "PubkeyChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "internalType": "string",
+        "name": "indexedKey",
+        "type": "string"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "key",
+        "type": "string"
+      }
+    ],
+    "name": "TextChanged",
+    "type": "event"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint256",
+        "name": "contentTypes",
+        "type": "uint256"
+      }
+    ],
+    "name": "ABI",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes",
+        "name": "",
+        "type": "bytes"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "addr",
+    "outputs": [
+      {
+        "internalType": "address payable",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "authorisations",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "clearDNSZone",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "contenthash",
+    "outputs": [
+      {
+        "internalType": "bytes",
+        "name": "",
+        "type": "bytes"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "name",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint16",
+        "name": "resource",
+        "type": "uint16"
+      }
+    ],
+    "name": "dnsRecord",
+    "outputs": [
+      {
+        "internalType": "bytes",
+        "name": "",
+        "type": "bytes"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "name",
+        "type": "bytes32"
+      }
+    ],
+    "name": "hasDNSRecords",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes4",
+        "name": "interfaceID",
+        "type": "bytes4"
+      }
+    ],
+    "name": "interfaceImplementer",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "pubkey",
+    "outputs": [
+      {
+        "internalType": "bytes32",
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint256",
+        "name": "contentType",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes",
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "name": "setABI",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint256",
+        "name": "coinType",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes",
+        "name": "a",
+        "type": "bytes"
+      }
+    ],
+    "name": "setAddr",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "a",
+        "type": "address"
+      }
+    ],
+    "name": "setAddr",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "target",
+        "type": "address"
+      },
+      {
+        "internalType": "bool",
+        "name": "isAuthorised",
+        "type": "bool"
+      }
+    ],
+    "name": "setAuthorisation",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes",
+        "name": "hash",
+        "type": "bytes"
+      }
+    ],
+    "name": "setContenthash",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes",
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "name": "setDNSRecords",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes4",
+        "name": "interfaceID",
+        "type": "bytes4"
+      },
+      {
+        "internalType": "address",
+        "name": "implementer",
+        "type": "address"
+      }
+    ],
+    "name": "setInterface",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "string",
+        "name": "name",
+        "type": "string"
+      }
+    ],
+    "name": "setName",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "name": "setPubkey",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "string",
+        "name": "key",
+        "type": "string"
+      },
+      {
+        "internalType": "string",
+        "name": "value",
+        "type": "string"
+      }
+    ],
+    "name": "setText",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes4",
+        "name": "interfaceID",
+        "type": "bytes4"
+      }
+    ],
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "pure",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "string",
+        "name": "key",
+        "type": "string"
+      }
+    ],
+    "name": "text",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/constants/abis/ens-registrar.json

@@ -0,0 +1,422 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "contract ENS",
+        "name": "_old",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "ApprovalForAll",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "label",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "NewOwner",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "resolver",
+        "type": "address"
+      }
+    ],
+    "name": "NewResolver",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint64",
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "NewTTL",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      }
+    ],
+    "name": "isApprovedForAll",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "old",
+    "outputs": [
+      {
+        "internalType": "contract ENS",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "recordExists",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "resolver",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "setApprovalForAll",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "setOwner",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "resolver",
+        "type": "address"
+      },
+      {
+        "internalType": "uint64",
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "setRecord",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "resolver",
+        "type": "address"
+      }
+    ],
+    "name": "setResolver",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "label",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "setSubnodeOwner",
+    "outputs": [
+      {
+        "internalType": "bytes32",
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "label",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "resolver",
+        "type": "address"
+      },
+      {
+        "internalType": "uint64",
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "setSubnodeRecord",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint64",
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "setTTL",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes32",
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "ttl",
+    "outputs": [
+      {
+        "internalType": "uint64",
+        "name": "",
+        "type": "uint64"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/constants/index.ts

@@ -1,5 +1,5 @@
-import { AbstractConnector } from '@web3-react/abstract-connector'
 import { ChainId, JSBI, Percent, Token, WETH } from '@uniswap/sdk'
+import { AbstractConnector } from '@web3-react/abstract-connector'
 
 import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
 
@@ -162,6 +162,3 @@ export const BLOCKED_PRICE_IMPACT_NON_EXPERT: Percent = new Percent(JSBI.BigInt(
 // used to ensure the user doesn't send so much ETH so they end up with <.01
 export const MIN_ETH: JSBI = JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(16)) // .01 ETH
 export const BETTER_TRADE_LINK_THRESHOLD = new Percent(JSBI.BigInt(75), JSBI.BigInt(10000))
-
-// the Uniswap Default token list lives here
-export const DEFAULT_TOKEN_LIST_URL = 'https://unpkg.com/@uniswap/default-token-list@latest'

src/constants/lists.ts

@@ -0,0 +1,20 @@
+// the Uniswap Default token list lives here
+export const DEFAULT_TOKEN_LIST_URL = 'tokens.uniswap.eth'
+
+export const DEFAULT_LIST_OF_LISTS: string[] = [
+  DEFAULT_TOKEN_LIST_URL,
+  't2crtokens.eth', // kleros
+  'tokens.1inch.eth', // 1inch
+  'synths.snx.eth',
+  'tokenlist.dharma.eth',
+  'defi.cmc.eth',
+  'erc20.cmc.eth',
+  'stablecoin.cmc.eth',
+  'tokenlist.zerion.eth',
+  'tokenlist.aave.eth',
+  'https://www.coingecko.com/tokens_list/uniswap/defi_100/v_0_0_0.json',
+  'https://app.tryroll.com/tokens.json',
+  'https://raw.githubusercontent.com/compound-finance/token-list/master/compound.tokenlist.json',
+  'https://defiprime.com/defiprime.tokenlist.json',
+  'https://umaproject.org/uma.tokenlist.json'
+]

src/constants/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/data/V1.ts

@@ -167,6 +167,8 @@ export function isTradeBetter(
   tradeB: Trade | undefined,
   minimumDelta: Percent = ZERO_PERCENT
 ): boolean | undefined {
+  if (tradeA && !tradeB) return false
+  if (tradeB && !tradeA) return true
   if (!tradeA || !tradeB) return undefined
 
   if (

src/data/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/ethereum.d.ts

@@ -1,8 +0,0 @@
-interface Window {
-  ethereum?: {
-    isMetaMask?: true
-    on?: (...args: any[]) => void
-    removeListener?: (...args: any[]) => void
-  }
-  web3?: {}
-}

src/hooks/Tokens.ts

@@ -1,7 +1,7 @@
 import { parseBytes32String } from '@ethersproject/strings'
-import { Currency, ETHER, Token } from '@uniswap/sdk'
+import { Currency, ETHER, Token, currencyEquals } from '@uniswap/sdk'
 import { useMemo } from 'react'
-import { useDefaultTokenList } from '../state/lists/hooks'
+import { useSelectedTokenList } from '../state/lists/hooks'
 import { NEVER_RELOAD, useSingleCallResult } from '../state/multicall/hooks'
 import { useUserAddedTokens } from '../state/user/hooks'
 import { isAddress } from '../utils'
@@ -12,7 +12,7 @@ import { useBytes32TokenContract, useTokenContract } from './useContract'
 export function useAllTokens(): { [address: string]: Token } {
   const { chainId } = useActiveWeb3React()
   const userAddedTokens = useUserAddedTokens()
-  const allTokens = useDefaultTokenList()
+  const allTokens = useSelectedTokenList()
 
   return useMemo(() => {
     if (!chainId) return {}
@@ -32,6 +32,12 @@ export function useAllTokens(): { [address: string]: Token } {
   }, [chainId, userAddedTokens, allTokens])
 }
 
+// Check if currency is included in custom list from user storage
+export function useIsUserAddedToken(currency: Currency): boolean {
+  const userAddedTokens = useUserAddedTokens()
+  return !!userAddedTokens.find(token => currencyEquals(currency, token))
+}
+
 // parse a name or symbol from a token response
 const BYTES32_REGEX = /^0x[a-fA-F0-9]{64}$/
 function parseStringOrBytes32(str: string | undefined, bytes32: string | undefined, defaultValue: string): string {

src/hooks/Trades.ts

@@ -17,35 +17,46 @@ function useAllCommonPairs(currencyA?: Currency, currencyB?: Currency): Pair[] {
     ? [wrappedCurrency(currencyA, chainId), wrappedCurrency(currencyB, chainId)]
     : [undefined, undefined]
 
+  const basePairs: [Token, Token][] = useMemo(
+    () =>
+      flatMap(bases, (base): [Token, Token][] => bases.map(otherBase => [base, otherBase])).filter(
+        ([t0, t1]) => t0.address !== t1.address
+      ),
+    [bases]
+  )
+
   const allPairCombinations: [Token, Token][] = useMemo(
     () =>
-      [
-        // the direct pair
-        [tokenA, tokenB],
-        // token A against all bases
-        ...bases.map((base): [Token | undefined, Token | undefined] => [tokenA, base]),
-        // token B against all bases
-        ...bases.map((base): [Token | undefined, Token | undefined] => [tokenB, base]),
-        // each base against all bases
-        ...flatMap(bases, (base): [Token, Token][] => bases.map(otherBase => [base, otherBase]))
-      ]
-        .filter((tokens): tokens is [Token, Token] => Boolean(tokens[0] && tokens[1]))
-        .filter(([tokenA, tokenB]) => {
-          if (!chainId) return true
-          const customBases = CUSTOM_BASES[chainId]
-          if (!customBases) return true
+      tokenA && tokenB
+        ? [
+            // the direct pair
+            [tokenA, tokenB],
+            // token A against all bases
+            ...bases.map((base): [Token, Token] => [tokenA, base]),
+            // token B against all bases
+            ...bases.map((base): [Token, Token] => [tokenB, base]),
+            // each base against all bases
+            ...basePairs
+          ]
+            .filter((tokens): tokens is [Token, Token] => Boolean(tokens[0] && tokens[1]))
+            .filter(([t0, t1]) => t0.address !== t1.address)
+            .filter(([tokenA, tokenB]) => {
+              if (!chainId) return true
+              const customBases = CUSTOM_BASES[chainId]
+              if (!customBases) return true
 
-          const customBasesA: Token[] | undefined = customBases[tokenA.address]
-          const customBasesB: Token[] | undefined = customBases[tokenB.address]
+              const customBasesA: Token[] | undefined = customBases[tokenA.address]
+              const customBasesB: Token[] | undefined = customBases[tokenB.address]
 
-          if (!customBasesA && !customBasesB) return true
+              if (!customBasesA && !customBasesB) return true
 
-          if (customBasesA && customBasesA.findIndex(base => tokenB.equals(base)) === -1) return false
-          if (customBasesB && customBasesB.findIndex(base => tokenA.equals(base)) === -1) return false
+              if (customBasesA && !customBasesA.find(base => tokenB.equals(base))) return false
+              if (customBasesB && !customBasesB.find(base => tokenA.equals(base))) return false
 
-          return true
-        }),
-    [tokenA, tokenB, bases, chainId]
+              return true
+            })
+        : [],
+    [tokenA, tokenB, bases, basePairs, chainId]
   )
 
   const allPairs = usePairs(allPairCombinations)
@@ -72,7 +83,6 @@ function useAllCommonPairs(currencyA?: Currency, currencyB?: Currency): Pair[] {
  */
 export function useTradeExactIn(currencyAmountIn?: CurrencyAmount, currencyOut?: Currency): Trade | null {
   const allowedPairs = useAllCommonPairs(currencyAmountIn?.currency, currencyOut)
-
   return useMemo(() => {
     if (currencyAmountIn && currencyOut && allowedPairs.length > 0) {
       return (

src/hooks/ethereum.d.ts

@@ -1,8 +0,0 @@
-interface Window {
-  ethereum?: {
-    isMetaMask?: true
-    on?: (...args: any[]) => void
-    removeListener?: (...args: any[]) => void
-  }
-  web3?: {}
-}

src/hooks/index.ts

@@ -82,6 +82,6 @@ export function useInactiveListener(suppress = false) {
         }
       }
     }
-    return
+    return undefined
   }, [active, error, suppress, activate])
 }

src/hooks/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/hooks/useContract.ts

@@ -2,18 +2,20 @@ import { Contract } from '@ethersproject/contracts'
 import { ChainId, WETH } from '@uniswap/sdk'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { useMemo } from 'react'
+import ENS_ABI from '../constants/abis/ens-registrar.json'
+import ENS_PUBLIC_RESOLVER_ABI from '../constants/abis/ens-public-resolver.json'
 import { ERC20_BYTES32_ABI } from '../constants/abis/erc20'
-import UNISOCKS_ABI from '../constants/abis/unisocks.json'
 import ERC20_ABI from '../constants/abis/erc20.json'
-import WETH_ABI from '../constants/abis/weth.json'
 import { MIGRATOR_ABI, MIGRATOR_ADDRESS } from '../constants/abis/migrator'
+import UNISOCKS_ABI from '../constants/abis/unisocks.json'
+import WETH_ABI from '../constants/abis/weth.json'
 import { MULTICALL_ABI, MULTICALL_NETWORKS } from '../constants/multicall'
 import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESSES } from '../constants/v1'
 import { getContract } from '../utils'
 import { useActiveWeb3React } from './index'
 
 // returns null on errors
-function useContract(address?: string, ABI?: any, withSignerIfPossible = true): Contract | null {
+function useContract(address: string | undefined, ABI: any, withSignerIfPossible = true): Contract | null {
   const { library, account } = useActiveWeb3React()
 
   return useMemo(() => {
@@ -49,6 +51,26 @@ export function useWETHContract(withSignerIfPossible?: boolean): Contract | null
   return useContract(chainId ? WETH[chainId].address : undefined, WETH_ABI, withSignerIfPossible)
 }
 
+export function useENSRegistrarContract(withSignerIfPossible?: boolean): Contract | null {
+  const { chainId } = useActiveWeb3React()
+  let address: string | undefined
+  if (chainId) {
+    switch (chainId) {
+      case ChainId.MAINNET:
+      case ChainId.GÖRLI:
+      case ChainId.ROPSTEN:
+      case ChainId.RINKEBY:
+        address = '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
+        break
+    }
+  }
+  return useContract(address, ENS_ABI, withSignerIfPossible)
+}
+
+export function useENSResolverContract(address: string | undefined, withSignerIfPossible?: boolean): Contract | null {
+  return useContract(address, ENS_PUBLIC_RESOLVER_ABI, withSignerIfPossible)
+}
+
 export function useBytes32TokenContract(tokenAddress?: string, withSignerIfPossible?: boolean): Contract | null {
   return useContract(tokenAddress, ERC20_BYTES32_ABI, withSignerIfPossible)
 }

src/hooks/useCopyClipboard.ts

@@ -19,7 +19,7 @@ export default function useCopyClipboard(timeout = 500): [boolean, (toCopy: stri
         clearTimeout(hide)
       }
     }
-    return
+    return undefined
   }, [isCopied, setIsCopied, timeout])
 
   return [isCopied, staticCopy]

src/hooks/useENSAddress.ts

@@ -1,46 +1,35 @@
-import { useEffect, useState } from 'react'
-import { useActiveWeb3React } from './index'
+import { namehash } from 'ethers/lib/utils'
+import { useMemo } from 'react'
+import { useSingleCallResult } from '../state/multicall/hooks'
+import isZero from '../utils/isZero'
+import { useENSRegistrarContract, useENSResolverContract } from './useContract'
+import useDebounce from './useDebounce'
 
 /**
  * Does a lookup for an ENS name to find its address.
  */
 export default function useENSAddress(ensName?: string | null): { loading: boolean; address: string | null } {
-  const { library } = useActiveWeb3React()
-
-  const [address, setAddress] = useState<{ loading: boolean; address: string | null }>({
-    loading: false,
-    address: null
-  })
-
-  useEffect(() => {
-    if (!library || typeof ensName !== 'string') {
-      setAddress({ loading: false, address: null })
-      return
-    } else {
-      let stale = false
-      setAddress({ loading: true, address: null })
-      library
-        .resolveName(ensName)
-        .then(address => {
-          if (!stale) {
-            if (address) {
-              setAddress({ loading: false, address })
-            } else {
-              setAddress({ loading: false, address: null })
-            }
-          }
-        })
-        .catch(() => {
-          if (!stale) {
-            setAddress({ loading: false, address: null })
-          }
-        })
-
-      return () => {
-        stale = true
-      }
+  const debouncedName = useDebounce(ensName, 200)
+  const ensNodeArgument = useMemo(() => {
+    if (!debouncedName) return [undefined]
+    try {
+      return debouncedName ? [namehash(debouncedName)] : [undefined]
+    } catch (error) {
+      return [undefined]
     }
-  }, [library, ensName])
+  }, [debouncedName])
+  const registrarContract = useENSRegistrarContract(false)
+  const resolverAddress = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
+  const resolverAddressResult = resolverAddress.result?.[0]
+  const resolverContract = useENSResolverContract(
+    resolverAddressResult && !isZero(resolverAddressResult) ? resolverAddressResult : undefined,
+    false
+  )
+  const addr = useSingleCallResult(resolverContract, 'addr', ensNodeArgument)
 
-  return address
+  const changed = debouncedName !== ensName
+  return {
+    address: changed ? null : addr.result?.[0] ?? null,
+    loading: changed || resolverAddress.loading || addr.loading
+  }
 }

src/hooks/useENSContentHash.ts

@@ -0,0 +1,32 @@
+import { namehash } from 'ethers/lib/utils'
+import { useMemo } from 'react'
+import { useSingleCallResult } from '../state/multicall/hooks'
+import isZero from '../utils/isZero'
+import { useENSRegistrarContract, useENSResolverContract } from './useContract'
+
+/**
+ * Does a lookup for an ENS name to find its contenthash.
+ */
+export default function useENSContentHash(ensName?: string | null): { loading: boolean; contenthash: string | null } {
+  const ensNodeArgument = useMemo(() => {
+    if (!ensName) return [undefined]
+    try {
+      return ensName ? [namehash(ensName)] : [undefined]
+    } catch (error) {
+      return [undefined]
+    }
+  }, [ensName])
+  const registrarContract = useENSRegistrarContract(false)
+  const resolverAddressResult = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
+  const resolverAddress = resolverAddressResult.result?.[0]
+  const resolverContract = useENSResolverContract(
+    resolverAddress && isZero(resolverAddress) ? undefined : resolverAddress,
+    false
+  )
+  const contenthash = useSingleCallResult(resolverContract, 'contenthash', ensNodeArgument)
+
+  return {
+    contenthash: contenthash.result?.[0] ?? null,
+    loading: resolverAddressResult.loading || contenthash.loading
+  }
+}

src/hooks/useENSName.ts

@@ -1,49 +1,37 @@
-import { useEffect, useState } from 'react'
+import { namehash } from 'ethers/lib/utils'
+import { useMemo } from 'react'
+import { useSingleCallResult } from '../state/multicall/hooks'
 import { isAddress } from '../utils'
-import { useActiveWeb3React } from './index'
+import isZero from '../utils/isZero'
+import { useENSRegistrarContract, useENSResolverContract } from './useContract'
+import useDebounce from './useDebounce'
 
 /**
  * Does a reverse lookup for an address to find its ENS name.
  * Note this is not the same as looking up an ENS name to find an address.
  */
 export default function useENSName(address?: string): { ENSName: string | null; loading: boolean } {
-  const { library } = useActiveWeb3React()
-
-  const [ENSName, setENSName] = useState<{ ENSName: string | null; loading: boolean }>({
-    loading: false,
-    ENSName: null
-  })
-
-  useEffect(() => {
-    const validated = isAddress(address)
-    if (!library || !validated) {
-      setENSName({ loading: false, ENSName: null })
-      return
-    } else {
-      let stale = false
-      setENSName({ loading: true, ENSName: null })
-      library
-        .lookupAddress(validated)
-        .then(name => {
-          if (!stale) {
-            if (name) {
-              setENSName({ loading: false, ENSName: name })
-            } else {
-              setENSName({ loading: false, ENSName: null })
-            }
-          }
-        })
-        .catch(() => {
-          if (!stale) {
-            setENSName({ loading: false, ENSName: null })
-          }
-        })
-
-      return () => {
-        stale = true
-      }
+  const debouncedAddress = useDebounce(address, 200)
+  const ensNodeArgument = useMemo(() => {
+    if (!debouncedAddress || !isAddress(debouncedAddress)) return [undefined]
+    try {
+      return debouncedAddress ? [namehash(`${debouncedAddress.toLowerCase().substr(2)}.addr.reverse`)] : [undefined]
+    } catch (error) {
+      return [undefined]
     }
-  }, [library, address])
+  }, [debouncedAddress])
+  const registrarContract = useENSRegistrarContract(false)
+  const resolverAddress = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
+  const resolverAddressResult = resolverAddress.result?.[0]
+  const resolverContract = useENSResolverContract(
+    resolverAddressResult && !isZero(resolverAddressResult) ? resolverAddressResult : undefined,
+    false
+  )
+  const name = useSingleCallResult(resolverContract, 'name', ensNodeArgument)
 
-  return ENSName
+  const changed = debouncedAddress !== address
+  return {
+    ENSName: changed ? null : name.result?.[0] ?? null,
+    loading: changed || resolverAddress.loading || name.loading
+  }
 }

src/hooks/useFetchListCallback.ts

@@ -0,0 +1,50 @@
+import { nanoid } from '@reduxjs/toolkit'
+import { ChainId } from '@uniswap/sdk'
+import { TokenList } from '@uniswap/token-lists'
+import { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import { getNetworkLibrary, NETWORK_CHAIN_ID } from '../connectors'
+import { AppDispatch } from '../state'
+import { fetchTokenList } from '../state/lists/actions'
+import getTokenList from '../utils/getTokenList'
+import resolveENSContentHash from '../utils/resolveENSContentHash'
+import { useActiveWeb3React } from './index'
+
+export function useFetchListCallback(): (listUrl: string) => Promise<TokenList> {
+  const { chainId, library } = useActiveWeb3React()
+  const dispatch = useDispatch<AppDispatch>()
+
+  const ensResolver = useCallback(
+    (ensName: string) => {
+      if (!library || chainId !== ChainId.MAINNET) {
+        if (NETWORK_CHAIN_ID === ChainId.MAINNET) {
+          const networkLibrary = getNetworkLibrary()
+          if (networkLibrary) {
+            return resolveENSContentHash(ensName, networkLibrary)
+          }
+        }
+        throw new Error('Could not construct mainnet ENS resolver')
+      }
+      return resolveENSContentHash(ensName, library)
+    },
+    [chainId, library]
+  )
+
+  return useCallback(
+    async (listUrl: string) => {
+      const requestId = nanoid()
+      dispatch(fetchTokenList.pending({ requestId, url: listUrl }))
+      return getTokenList(listUrl, ensResolver)
+        .then(tokenList => {
+          dispatch(fetchTokenList.fulfilled({ url: listUrl, tokenList, requestId }))
+          return tokenList
+        })
+        .catch(error => {
+          console.debug(`Failed to get list at url ${listUrl}`, error)
+          dispatch(fetchTokenList.rejected({ url: listUrl, requestId, errorMessage: error.message }))
+          throw error
+        })
+    },
+    [dispatch, ensResolver]
+  )
+}

src/hooks/useHttpLocations.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import contenthashToUri from '../utils/contenthashToUri'
+import { parseENSAddress } from '../utils/parseENSAddress'
+import uriToHttp from '../utils/uriToHttp'
+import useENSContentHash from './useENSContentHash'
+
+export default function useHttpLocations(uri: string | undefined): string[] {
+  const ens = useMemo(() => (uri ? parseENSAddress(uri) : undefined), [uri])
+  const resolvedContentHash = useENSContentHash(ens?.ensName)
+  return useMemo(() => {
+    if (ens) {
+      return resolvedContentHash.contenthash ? uriToHttp(contenthashToUri(resolvedContentHash.contenthash)) : []
+    } else {
+      return uri ? uriToHttp(uri) : []
+    }
+  }, [ens, resolvedContentHash.contenthash, uri])
+}

src/hooks/useInterval.ts

@@ -20,6 +20,6 @@ export default function useInterval(callback: () => void, delay: null | number,
       const id = setInterval(tick, delay)
       return () => clearInterval(id)
     }
-    return
+    return undefined
   }, [delay, leading])
 }

src/hooks/useIsWindowVisible.ts

@@ -16,7 +16,7 @@ export default function useIsWindowVisible(): boolean {
   }, [setFocused])
 
   useEffect(() => {
-    if (!VISIBILITY_STATE_SUPPORTED) return
+    if (!VISIBILITY_STATE_SUPPORTED) return undefined
 
     document.addEventListener('visibilitychange', listener)
     return () => {

src/hooks/useOnClickOutside.tsx

@@ -0,0 +1,26 @@
+import { RefObject, useEffect, useRef } from 'react'
+
+export function useOnClickOutside<T extends HTMLElement>(
+  node: RefObject<T | undefined>,
+  handler: undefined | (() => void)
+) {
+  const handlerRef = useRef<undefined | (() => void)>(handler)
+  useEffect(() => {
+    handlerRef.current = handler
+  }, [handler])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (node.current?.contains(e.target as Node) ?? false) {
+        return
+      }
+      if (handlerRef.current) handlerRef.current()
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [node])
+}

src/index.tsx

@@ -1,21 +1,21 @@
-import { Web3Provider } from '@ethersproject/providers'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
-import React from 'react'
+import 'inter-ui'
+import React, { StrictMode } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { NetworkContextName } from './constants'
-import 'inter-ui'
 import './i18n'
 import App from './pages/App'
 import store from './state'
 import ApplicationUpdater from './state/application/updater'
-import TransactionUpdater from './state/transactions/updater'
 import ListsUpdater from './state/lists/updater'
-import UserUpdater from './state/user/updater'
 import MulticallUpdater from './state/multicall/updater'
+import TransactionUpdater from './state/transactions/updater'
+import UserUpdater from './state/user/updater'
 import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
+import getLibrary from './utils/getLibrary'
 
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
 
@@ -23,12 +23,6 @@ if ('ethereum' in window) {
   ;(window.ethereum as any).autoRefreshOnNetworkChange = false
 }
 
-function getLibrary(provider: any): Web3Provider {
-  const library = new Web3Provider(provider)
-  library.pollingInterval = 15000
-  return library
-}
-
 const GOOGLE_ANALYTICS_ID: string | undefined = process.env.REACT_APP_GOOGLE_ANALYTICS_ID
 if (typeof GOOGLE_ANALYTICS_ID === 'string') {
   ReactGA.initialize(GOOGLE_ANALYTICS_ID)
@@ -59,21 +53,19 @@ function Updaters() {
 }
 
 ReactDOM.render(
-  <>
+  <StrictMode>
     <FixedGlobalStyle />
     <Web3ReactProvider getLibrary={getLibrary}>
       <Web3ProviderNetwork getLibrary={getLibrary}>
         <Provider store={store}>
           <Updaters />
           <ThemeProvider>
-            <>
-              <ThemedGlobalStyle />
-              <App />
-            </>
+            <ThemedGlobalStyle />
+            <App />
           </ThemeProvider>
         </Provider>
       </Web3ProviderNetwork>
     </Web3ReactProvider>
-  </>,
+  </StrictMode>,
   document.getElementById('root')
 )

src/pages/AddLiquidity/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../../tsconfig.strict.json",
-  "include": [
-    "**/*",
-    "../../../node_modules/eslint-plugin-react/lib/types.d.ts"
-  ]
-}

src/pages/AppBody.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-export const BodyWrapper = styled.div<{ disabled?: boolean }>`
+export const BodyWrapper = styled.div`
   position: relative;
   max-width: 420px;
   width: 100%;
@@ -10,13 +10,11 @@ export const BodyWrapper = styled.div<{ disabled?: boolean }>`
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 30px;
   padding: 1rem;
-  opacity: ${({ disabled }) => (disabled ? '0.4' : '1')};
-  pointer-events: ${({ disabled }) => disabled && 'none'};
 `
 
 /**
  * The styled container element that wraps the content of most pages and the tabs.
  */
-export default function AppBody({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
-  return <BodyWrapper disabled={disabled}>{children}</BodyWrapper>
+export default function AppBody({ children }: { children: React.ReactNode }) {
+  return <BodyWrapper>{children}</BodyWrapper>
 }

src/pages/MigrateV1/MigrateV1Exchange.tsx

@@ -67,14 +67,14 @@ export function V1LiquidityInfo({
         <div style={{ marginLeft: '.75rem' }}>
           <TYPE.mediumHeader>
             {<FormattedPoolCurrencyAmount currencyAmount={liquidityTokenAmount} />}{' '}
-            {token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH
+            {chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH
           </TYPE.mediumHeader>
         </div>
       </AutoRow>
 
       <RowBetween my="1rem">
         <Text fontSize={16} fontWeight={500}>
-          Pooled {token.equals(WETH[chainId]) ? 'WETH' : token.symbol}:
+          Pooled {chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol}:
         </Text>
         <RowFixed>
           <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -107,7 +107,7 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
   const [v2PairState, v2Pair] = usePair(chainId ? WETH[chainId] : undefined, token)
   const isFirstLiquidityProvider: boolean = v2PairState === PairState.NOT_EXISTS
 
-  const v2SpotPrice = v2Pair?.reserveOf(token)?.divide(v2Pair?.reserveOf(WETH[chainId]))
+  const v2SpotPrice = chainId && v2Pair ? v2Pair.reserveOf(token).divide(v2Pair.reserveOf(WETH[chainId])) : undefined
 
   const [confirmingMigration, setConfirmingMigration] = useState<boolean>(false)
   const [pendingMigrationHash, setPendingMigrationHash] = useState<string | null>(null)
@@ -158,11 +158,11 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
       : tokenWorth?.numerator
 
   const addTransaction = useTransactionAdder()
-  const isMigrationPending = useIsTransactionPending(pendingMigrationHash)
+  const isMigrationPending = useIsTransactionPending(pendingMigrationHash ?? undefined)
 
   const migrator = useV2MigratorContract()
   const migrate = useCallback(() => {
-    if (!minAmountToken || !minAmountETH) return
+    if (!minAmountToken || !minAmountETH || !migrator) return
 
     setConfirmingMigration(true)
     migrator
@@ -194,16 +194,18 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
 
   const largePriceDifference = !!priceDifferenceAbs && !priceDifferenceAbs.lessThan(JSBI.BigInt(5))
 
-  const isSuccessfullyMigrated = !!pendingMigrationHash && !!noLiquidityTokens
+  const isSuccessfullyMigrated = !!pendingMigrationHash && noLiquidityTokens
 
   return (
     <AutoColumn gap="20px">
       <TYPE.body my={9} style={{ fontWeight: 400 }}>
         This tool will safely migrate your V1 liquidity to V2 with minimal price risk. The process is completely
         trustless thanks to the{' '}
-        <ExternalLink href={getEtherscanLink(chainId, MIGRATOR_ADDRESS, 'address')}>
-          <TYPE.blue display="inline">Uniswap migration contract↗</TYPE.blue>
-        </ExternalLink>
+        {chainId && (
+          <ExternalLink href={getEtherscanLink(chainId, MIGRATOR_ADDRESS, 'address')}>
+            <TYPE.blue display="inline">Uniswap migration contract↗</TYPE.blue>
+          </ExternalLink>
+        )}
         .
       </TYPE.body>
 
@@ -242,7 +244,7 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
 
             <RowBetween>
               <TYPE.body color="inherit">Price Difference:</TYPE.body>
-              <TYPE.black color="inherit">{priceDifferenceAbs.toSignificant(4)}%</TYPE.black>
+              <TYPE.black color="inherit">{priceDifferenceAbs?.toSignificant(4)}%</TYPE.black>
             </RowBetween>
           </AutoColumn>
         </YellowCard>
@@ -336,12 +338,12 @@ export default function MigrateV1Exchange({
 
   const liquidityToken: Token | undefined = useMemo(
     () =>
-      validatedAddress && token
+      validatedAddress && chainId && token
         ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
         : undefined,
     [chainId, validatedAddress, token]
   )
-  const userLiquidityBalance = useTokenBalance(account, liquidityToken)
+  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)
 
   // redirect for invalid url params
   if (!validatedAddress || tokenAddress === AddressZero) {
@@ -362,7 +364,7 @@ export default function MigrateV1Exchange({
 
         {!account ? (
           <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
-        ) : validatedAddress && token?.equals(WETH[chainId]) ? (
+        ) : validatedAddress && chainId && token?.equals(WETH[chainId]) ? (
           <>
             <TYPE.body my={9} style={{ fontWeight: 400 }}>
               Because Uniswap V2 uses WETH under the hood, your Uniswap V1 WETH/ETH liquidity cannot be migrated. You

src/pages/MigrateV1/RemoveV1Exchange.tsx

@@ -58,7 +58,7 @@ function V1PairRemoval({
     : new TokenAmount(token, ZERO)
 
   const addTransaction = useTransactionAdder()
-  const isRemovalPending = useIsTransactionPending(pendingRemovalHash)
+  const isRemovalPending = useIsTransactionPending(pendingRemovalHash ?? undefined)
 
   const remove = useCallback(() => {
     if (!liquidityTokenAmount) return
@@ -79,11 +79,11 @@ function V1PairRemoval({
         })
 
         addTransaction(response, {
-          summary: `Remove ${token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH V1 liquidity`
+          summary: `Remove ${chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH V1 liquidity`
         })
         setPendingRemovalHash(response.hash)
       })
-      .catch(error => {
+      .catch((error: Error) => {
         console.error(error)
         setConfirmingRemoval(false)
       })
@@ -91,7 +91,7 @@ function V1PairRemoval({
 
   const noLiquidityTokens = !!liquidityTokenAmount && liquidityTokenAmount.equalTo(ZERO)
 
-  const isSuccessfullyRemoved = !!pendingRemovalHash && !!noLiquidityTokens
+  const isSuccessfullyRemoved = !!pendingRemovalHash && noLiquidityTokens
 
   return (
     <AutoColumn gap="20px">
@@ -119,7 +119,7 @@ function V1PairRemoval({
       </LightCard>
       <TYPE.darkGray style={{ textAlign: 'center' }}>
         {`Your Uniswap V1 ${
-          token.equals(WETH[chainId]) ? 'WETH' : token.symbol
+          chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol
         }/ETH liquidity will be redeemed for underlying assets.`}
       </TYPE.darkGray>
     </AutoColumn>
@@ -140,12 +140,12 @@ export default function RemoveV1Exchange({
 
   const liquidityToken: Token | undefined = useMemo(
     () =>
-      validatedAddress && token
+      validatedAddress && chainId && token
         ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
         : undefined,
     [chainId, validatedAddress, token]
   )
-  const userLiquidityBalance = useTokenBalance(account, liquidityToken)
+  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)
 
   // redirect for invalid url params
   if (!validatedAddress || tokenAddress === AddressZero) {
@@ -166,7 +166,7 @@ export default function RemoveV1Exchange({
 
         {!account ? (
           <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
-        ) : userLiquidityBalance && token ? (
+        ) : userLiquidityBalance && token && exchangeContract ? (
           <V1PairRemoval
             exchangeContract={exchangeContract}
             liquidityTokenAmount={userLiquidityBalance}

src/pages/MigrateV1/index.tsx

@@ -7,7 +7,7 @@ import { SearchInput } from '../../components/SearchModal/styleds'
 import { useAllTokenV1Exchanges } from '../../data/V1'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens, useToken } from '../../hooks/Tokens'
-import { useDefaultTokenList } from '../../state/lists/hooks'
+import { useSelectedTokenList } from '../../state/lists/hooks'
 import { useTokenBalancesWithLoadingIndicator } from '../../state/wallet/hooks'
 import { BackArrow, TYPE } from '../../theme'
 import { LightCard } from '../../components/Card'
@@ -17,7 +17,7 @@ import V1PositionCard from '../../components/PositionCard/V1'
 import QuestionHelper from '../../components/QuestionHelper'
 import { Dots } from '../../components/swap/styleds'
 import { useAddUserToken } from '../../state/user/hooks'
-import { isDefaultToken } from '../../utils'
+import { isTokenOnList } from '../../utils'
 
 export default function MigrateV1() {
   const theme = useContext(ThemeContext)
@@ -28,40 +28,39 @@ export default function MigrateV1() {
 
   // automatically add the search token
   const token = useToken(tokenSearch)
-  const defaultTokens = useDefaultTokenList()
-  const isDefault = isDefaultToken(defaultTokens, token)
+  const selectedTokenListTokens = useSelectedTokenList()
+  const isOnSelectedList = isTokenOnList(selectedTokenListTokens, token ?? undefined)
   const allTokens = useAllTokens()
   const addToken = useAddUserToken()
   useEffect(() => {
-    if (token && !isDefault && !allTokens[token.address]) {
+    if (token && !isOnSelectedList && !allTokens[token.address]) {
       addToken(token)
     }
-  }, [token, isDefault, addToken, allTokens])
+  }, [token, isOnSelectedList, addToken, allTokens])
 
   // get V1 LP balances
   const V1Exchanges = useAllTokenV1Exchanges()
   const V1LiquidityTokens: Token[] = useMemo(() => {
-    return Object.keys(V1Exchanges).map(
-      exchangeAddress => new Token(chainId, exchangeAddress, 18, 'UNI-V1', 'Uniswap V1')
-    )
+    return chainId
+      ? Object.keys(V1Exchanges).map(exchangeAddress => new Token(chainId, exchangeAddress, 18, 'UNI-V1', 'Uniswap V1'))
+      : []
   }, [chainId, V1Exchanges])
   const [V1LiquidityBalances, V1LiquidityBalancesLoading] = useTokenBalancesWithLoadingIndicator(
-    account,
+    account ?? undefined,
     V1LiquidityTokens
   )
   const allV1PairsWithLiquidity = V1LiquidityTokens.filter(V1LiquidityToken => {
-    return (
-      V1LiquidityBalances?.[V1LiquidityToken.address] &&
-      JSBI.greaterThan(V1LiquidityBalances[V1LiquidityToken.address].raw, JSBI.BigInt(0))
-    )
+    const balance = V1LiquidityBalances?.[V1LiquidityToken.address]
+    return balance && JSBI.greaterThan(balance.raw, JSBI.BigInt(0))
   }).map(V1LiquidityToken => {
-    return (
+    const balance = V1LiquidityBalances[V1LiquidityToken.address]
+    return balance ? (
       <V1PositionCard
         key={V1LiquidityToken.address}
         token={V1Exchanges[V1LiquidityToken.address]}
-        V1LiquidityBalance={V1LiquidityBalances[V1LiquidityToken.address]}
+        V1LiquidityBalance={balance}
       />
-    )
+    ) : null
   })
 
   // should never always be false, because a V1 exhchange exists for WETH on all testnets

src/pages/Pool/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.strict.json",
-  "include": ["**/*"]
-}

src/pages/PoolFinder/index.tsx

@@ -185,7 +185,7 @@ export default function PoolFinder() {
         onCurrencySelect={handleCurrencySelect}
         onDismiss={handleSearchDismiss}
         showCommonBases
-        hiddenCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
+        selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
       />
     </AppBody>
   )

src/pages/PoolFinder/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.strict.json",
-  "include": ["**/*"]
-}