fix(#1083): fix wrapping of tokens added/removed in list update popup

* 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

.env

@@ -1,2 +1,2 @@
 REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/acb7e55995d04c49bfb52b7141599467"
+REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"

.env.production

@@ -1,5 +1,5 @@
 REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/febcb10ca2754433a61e0805bc6c047d"
+REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_PORTIS_ID="c0e2bf01-4b08-4fd5-ac7b-8e26b58cd236"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="UA-128182339-4"

.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/ISSUE_TEMPLATE/token-request.md

@@ -1,27 +0,0 @@
----
-name: Token Request
-about: Request a token addition
-title: ''
-labels: token request
-assignees: ''
-
----
-
-**Please provide the following information for your token.**
-
-Token Address: 
-Token Name (from contract): 
-Token Decimals (from contract): 
-Token Symbol (from contract): 
-Uniswap Exchange Address of Token: 
-
-Link to the official homepage of token:
-Link to CoinMarketCap or CoinGecko page of token:
-
-Some tokens (e.g. BNB) do not work with Uniswap v1. In order to assess if your token works correctly, please complete small-value transactions of each of the types below, and submit the Etherscan transaction links for our review.
-Test `addLiquidity` transaction: 
-Test `swap` transaction: 
-Test `removeLiquidity` transaction: 
-
-Are you willing to add liquidity to the liquidity pool for this token? (Y/N): 
-If so, how much liquidity are you willing to add?: 

.github/workflows/release.yaml

@@ -4,13 +4,8 @@ on:
   schedule:
     - cron:  '0 12 * * 1-4'
 
-  # releases are triggered on changes to this file
-  push:
-    branches:
-      - v2
-    paths:
-      - '.github/workflows/release.yaml'
-      - '.env.production'
+  # manual trigger
+  workflow_dispatch:
 
 jobs:
   bump_version:
@@ -44,14 +39,14 @@ jobs:
           node-version: '12'
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts --frozen-lockfile
+        run: yarn install --frozen-lockfile
 
       - name: Build the IPFS bundle
-        run: yarn ipfs-build
+        run: yarn build
 
       - name: Pin to IPFS
         id: upload
-        uses: anantaramdas/ipfs-pinata-deploy-action@v1.5.2
+        uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
         with:
           pin-name: Uniswap ${{ needs.bump_version.outputs.new_tag }}
           path: './build'
@@ -97,7 +92,7 @@ jobs:
 
             Preferred URLs:
             - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.dweb.link/
-            - https://${{ steps.convert_cidv0.outputs.cidv1 }}.cf-ipfs.com/
+            - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.cf-ipfs.com/
             - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.upload.outputs.hash }}/)
 
             Other IPFS gateways:

.github/workflows/tests.yaml

@@ -2,10 +2,10 @@ name: Tests
 on:
   push:
     branches:
-      - v2
+      - master
   pull_request:
     branches:
-      - v2
+      - master
 jobs:
   integration-tests:
     name: Integration tests
@@ -26,7 +26,11 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - run: yarn install
+      - 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:
@@ -48,7 +52,7 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - run: yarn install --ignore-scripts --frozen-lockfile
+      - run: yarn install --frozen-lockfile
       - run: yarn test
 
   lint:
@@ -70,6 +74,6 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - run: yarn install --ignore-scripts --frozen-lockfile
+      - run: yarn install --frozen-lockfile
       - run: yarn lint
 

.yarnrc

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

README.md

@@ -1,11 +1,12 @@
-# Uniswap Frontend
+# Uniswap Interface
 
-[![Tests](https://github.com/Uniswap/uniswap-frontend/workflows/Tests/badge.svg)](https://github.com/Uniswap/uniswap-frontend/actions?query=workflow%3ATests)
+[![Tests](https://github.com/Uniswap/uniswap-interface/workflows/Tests/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions?query=workflow%3ATests)
 [![Styled With Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
 
 An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
 
 - Website: [uniswap.org](https://uniswap.org/)
+- Interface: [app.uniswap.org](https://app.uniswap.org)
 - Docs: [uniswap.org/docs/](https://uniswap.org/docs/)
 - Twitter: [@UniswapProtocol](https://twitter.com/UniswapProtocol)
 - Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
@@ -13,11 +14,17 @@ An open source interface for Uniswap -- a protocol for decentralized exchange of
 - Discord: [Uniswap](https://discord.gg/Y7TF6QA)
 - Whitepaper: [Link](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
 
-## Accessing the frontend
+## Accessing the Uniswap Interface
 
-To access the front end, use an IPFS gateway link from the
-[latest release](https://github.com/Uniswap/uniswap-frontend/releases/latest)
-or visit [uniswap.exchange](https://uniswap.exchange).
+To access the Uniswap Interface, use an IPFS gateway link from the
+[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest), 
+or visit [app.uniswap.org](https://app.uniswap.org).
+
+## Listing a token
+
+Please see the
+[@uniswap/default-token-list](https://github.com/uniswap/default-token-list) 
+repository.
 
 ## Development
 
@@ -27,31 +34,32 @@ or visit [uniswap.exchange](https://uniswap.exchange).
 yarn
 ```
 
-### Configure Environment (optional)
-
-Copy `.env` to `.env.local` and change the appropriate variables.
-
 ### Run
 
 ```bash
 yarn start
 ```
 
-To have the frontend default to a different network, make a copy of `.env` named `.env.local`, 
-change `REACT_APP_NETWORK_ID` to `"{yourNetworkId}"`, and change `REACT_APP_NETWORK_URL` to e.g. 
-`"https://{yourNetwork}.infura.io/v3/{yourKey}"`. 
+### Configuring the environment (optional)
 
-Note that the front end only works properly on testnets where both 
+To have the interface default to a different network when a wallet is not connected:
+
+1. Make a copy of `.env` named `.env.local`
+2. Change `REACT_APP_NETWORK_ID` to `"{YOUR_NETWORK_ID}"`
+3. Change `REACT_APP_NETWORK_URL` to e.g. `"https://{YOUR_NETWORK_ID}.infura.io/v3/{YOUR_INFURA_KEY}"` 
+
+Note that the interface only works on testnets where both 
 [Uniswap V2](https://uniswap.org/docs/v2/smart-contracts/factory/) and 
 [multicall](https://github.com/makerdao/multicall) are deployed.
-The frontend will not work on other networks.
+The interface will not work on other networks.
 
 ## Contributions
 
-**Please open all pull requests against the `v2` branch.** 
-CI checks will run against all PRs. 
+**Please open all pull requests against the `master` branch.** 
+CI checks will run against all PRs.
 
-## Accessing Uniswap V1 interface
+## Accessing Uniswap Interface V1
 
-The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways linked 
-from the [v1.0.0 release](https://github.com/Uniswap/uniswap-frontend/releases/tag/v1.0.0).
+The Uniswap Interface supports swapping against, and migrating or removing liquidity from Uniswap V1. However,
+if you would like to use Uniswap V1, the Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways 
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

cypress.json

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

cypress/integration/add-liquidity.test.ts

@@ -16,4 +16,35 @@ describe('Add Liquidity', () => {
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'MKR')
   })
+
+  it('single token can be selected', () => {
+    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
+    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
+  })
+
+  it('redirects /add/token-token to add/token/token', () => {
+    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.url().should(
+      'contain',
+      '/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85'
+    )
+  })
+
+  it('redirects /add/WETH-token to /add/WETH-address/token', () => {
+    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.url().should(
+      'contain',
+      '/add/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85'
+    )
+  })
+
+  it('redirects /add/token-WETH to /add/token/WETH-address', () => {
+    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85-0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.url().should(
+      'contain',
+      '/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab'
+    )
+  })
 })

cypress/integration/landing.test.ts

@@ -10,11 +10,6 @@ describe('Landing Page', () => {
     cy.url().should('include', '/swap')
   })
 
-  it('allows navigation to send', () => {
-    cy.get('#send-nav-link').click()
-    cy.url().should('include', '/send')
-  })
-
   it('allows navigation to pool', () => {
     cy.get('#pool-nav-link').click()
     cy.url().should('include', '/pool')

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/migrate-v1.test.ts

@@ -0,0 +1,8 @@
+describe('Migrate V1 Liquidity', () => {
+  describe('Remove V1 liquidity', () => {
+    it('renders the correct page', () => {
+      cy.visit('/remove/v1/0x93bB63aFe1E0180d0eF100D774B473034fd60C36')
+      cy.get('#remove-v1-exchange').should('contain', 'MKR/ETH')
+    })
+  })
+})

cypress/integration/pool.test.ts

@@ -1,13 +1,12 @@
 describe('Pool', () => {
   beforeEach(() => cy.visit('/pool'))
-  it('can search for a pool', () => {
+  it('add liquidity links to /add/ETH', () => {
     cy.get('#join-pool-button').click()
-    cy.get('#token-search-input').type('DAI', { delay: 200 })
+    cy.url().should('contain', '/add/ETH')
   })
 
-  it('can import a pool', () => {
-    cy.get('#join-pool-button').click()
-    cy.get('#import-pool-link').click({ force: true }) // blocked by the grid element in the search box
-    cy.url().should('include', '/find')
+  it('import pool links to /import', () => {
+    cy.get('#import-pool-link').click()
+    cy.url().should('contain', '/find')
   })
 })

cypress/integration/remove-liquidity.test.ts

@@ -1,14 +1,34 @@
 describe('Remove Liquidity', () => {
+  it('redirects', () => {
+    cy.visit('/remove/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.url().should(
+      'contain',
+      '/remove/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85'
+    )
+  })
+
+  it('eth remove', () => {
+    cy.visit('/remove/ETH/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
+  })
+
+  it('eth remove swap order', () => {
+    cy.visit('/remove/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/ETH')
+    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'MKR')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'ETH')
+  })
+
   it('loads the two correct tokens', () => {
     cy.visit('/remove/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
+    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
   })
 
   it('does not crash if ETH is duplicated', () => {
     cy.visit('/remove/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xc778417E063141139Fce010982780140Aa0cD5Ab')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
-    cy.get('#remove-liquidity-tokenb-symbol').should('not.contain.text', 'ETH')
+    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'WETH')
   })
 
   it('token not in storage is loaded', () => {

cypress/integration/send.test.ts

@@ -1,9 +1,11 @@
 describe('Send', () => {
-  beforeEach(() => cy.visit('/send'))
+  it('should redirect', () => {
+    cy.visit('/send')
+    cy.url().should('include', '/swap')
+  })
 
-  it('can enter an amount into input', () => {
-    cy.get('#sending-no-swap-input')
-      .type('0.001', { delay: 200 })
-      .should('have.value', '0.001')
+  it('should redirect with url params', () => {
+    cy.visit('/send?outputCurrency=ETH&recipient=bob.argent.xyz')
+    cy.url().should('contain', '/swap?outputCurrency=ETH&recipient=bob.argent.xyz')
   })
 })

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')
@@ -40,4 +44,34 @@ describe('Swap', () => {
     cy.get('#swap-button').click()
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
+
+  it('add a recipient does not exist unless in expert mode', () => {
+    cy.get('#add-recipient-button').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

@@ -0,0 +1,17 @@
+describe('Warning', () => {
+  beforeEach(() => {
+    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', () => {
+    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')
+  })
+})

cypress/support/commands.js

@@ -69,11 +69,12 @@ class CustomizedBridge extends _Eip1193Bridge {
 
 // sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
 Cypress.Commands.overwrite('visit', (original, url, options) => {
-  return original(url, {
+  return original(url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url, {
     ...options,
     onBeforeLoad(win) {
       options && options.onBeforeLoad && options.onBeforeLoad(win)
-      const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/acb7e55995d04c49bfb52b7141599467', 4)
+      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)
     }

netlify.toml

@@ -1,27 +0,0 @@
-# block some countries
-[[redirects]]
-  from = "/*"
-  to = "/451.html"
-  status = 451
-  force = true
-  conditions = {Country=["BY","CU","IR","IQ","CI","LR","KP","SD","SY","ZW"]}
-  headers = {Link="<https://uniswap.exchange>"}
-
-# forward migrate
-[[redirects]]
-  from = "https://migrate.uniswap.exchange/*"
-  to = "https://uniswap.exchange/migrate/v1"
-  status = 301
-  force = true
-
-# forward v2 subdomain to apex
-[[redirects]]
-  from = "https://v2.uniswap.exchange/*"
-  to = "https://uniswap.exchange/:splat"
-  status = 301
-
-# support SPA setup
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

package.json

@@ -1,37 +1,33 @@
 {
   "name": "@uniswap/interface",
   "description": "Uniswap Interface",
-  "homepage": "https://uniswap.exchange",
+  "homepage": ".",
   "private": true,
   "devDependencies": {
-    "@ethersproject/address": "^5.0.0-beta.134",
-    "@ethersproject/bignumber": "^5.0.0-beta.138",
-    "@ethersproject/constants": "^5.0.0-beta.133",
-    "@ethersproject/contracts": "^5.0.0-beta.151",
-    "@ethersproject/experimental": "^5.0.0-beta.141",
-    "@ethersproject/providers": "5.0.0-beta.162",
-    "@ethersproject/strings": "^5.0.0-beta.136",
-    "@ethersproject/units": "^5.0.0-beta.132",
-    "@ethersproject/wallet": "^5.0.0-beta.141",
-    "@popperjs/core": "^2.4.0",
+    "@ethersproject/experimental": "^5.0.1",
+    "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@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": "^4.2.0",
+    "@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/sdk": "^2.0.5",
+    "@uniswap/default-token-list": "^1.3.1",
+    "@uniswap/sdk": "3.0.3-beta.1",
+    "@uniswap/token-lists": "^1.0.0-beta.15",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@web3-react/core": "^6.0.9",
@@ -40,22 +36,27 @@
     "@web3-react/portis-connector": "^6.0.9",
     "@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.5.0",
+    "cypress": "^4.11.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "ethers": "^5.0.7",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
+    "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",
-    "qrcode.react": "^0.9.3",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-device-detect": "^1.6.2",
@@ -69,26 +70,25 @@
     "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",
-    "typescript": "^3.8.3",
-    "use-media": "^1.4.0"
+    "typescript": "^3.8.3"
+  },
+  "resolutions": {
+    "@walletconnect/web3-provider": "1.1.1-alpha.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "ipfs-build": "cross-env PUBLIC_URL=\".\" react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
-    "cy:run": "cypress run",
-    "serve:build": "serve -s build -l 3000",
-    "integration-test": "yarn build && start-server-and-test 'yarn run serve:build' http://localhost:3000 cy:run"
+    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'"
   },
   "eslintConfig": {
     "extends": "react-app"

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { CheckCircle, Triangle, ExternalLink as LinkIcon } from 'react-feather'
+import { CheckCircle, Triangle } from 'react-feather'
 
 import { useActiveWeb3React } from '../../hooks'
 import { getEtherscanLink } from '../../utils'
@@ -40,18 +40,18 @@ 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>
       <TransactionState href={getEtherscanLink(chainId, hash, 'transaction')} pending={pending} success={success}>
         <RowFixed>
-          <TransactionStatusText>{summary ? summary : hash}</TransactionStatusText>
-          <LinkIcon size={16} />
+          <TransactionStatusText>{summary ?? hash} ↗</TransactionStatusText>
         </RowFixed>
         <IconWrapper pending={pending} success={success}>
           {pending ? <Loader /> : success ? <CheckCircle size="16" /> : <Triangle size="16" />}

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
 }
@@ -251,26 +251,26 @@ export default function AccountDetails({
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''} />
+          <img src={WalletConnectIcon} alt={'wallet connect logo'} />
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''} />
+          <img src={CoinbaseWalletIcon} alt={'coinbase wallet logo'} />
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''} />
+          <img src={FortmaticIcon} alt={'fortmatic logo'} />
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <>
           <IconWrapper size={16}>
-            <img src={PortisIcon} alt={''} />
+            <img src={PortisIcon} alt={'portis logo'} />
             <MainWalletAction
               onClick={() => {
                 portis.portis.showPortis()
@@ -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,22 +368,25 @@ 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>
                   </>
                 )}
-                {/* {formatConnectorName()} */}
               </AccountGroupingRow>
             </InfoCard>
           </YourAccount>

src/components/AddressInputPanel/index.tsx

@@ -1,8 +1,6 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useContext, useCallback } from 'react'
 import styled, { ThemeContext } from 'styled-components'
-import useDebounce from '../../hooks/useDebounce'
-
-import { isAddress } from '../../utils'
+import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
@@ -24,6 +22,8 @@ const ContainerRow = styled.div<{ error: boolean }>`
   align-items: center;
   border-radius: 1.25rem;
   border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg2)};
+  transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
+    color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
   background-color: ${({ theme }) => theme.bg1};
 `
 
@@ -39,6 +39,7 @@ const Input = styled.input<{ error?: boolean }>`
   flex: 1 1 auto;
   width: 0;
   background-color: ${({ theme }) => theme.bg1};
+  transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
   color: ${({ error, theme }) => (error ? theme.red1 : theme.primary1)};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -65,119 +66,59 @@ const Input = styled.input<{ error?: boolean }>`
 `
 
 export default function AddressInputPanel({
-  initialInput = '',
-  onChange,
-  onError
+  id,
+  value,
+  onChange
 }: {
-  initialInput?: string
-  onChange: (val: { address: string; name?: string }) => void
-  onError: (error: boolean, input: string) => void
+  id?: string
+  // the typed string value
+  value: string
+  // triggers whenever the typed value changes
+  onChange: (value: string) => void
 }) {
-  const { chainId, library } = useActiveWeb3React()
+  const { chainId } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
-  const [input, setInput] = useState(initialInput ? initialInput : '')
-  const debouncedInput = useDebounce(input, 200)
+  const { address, loading, name } = useENS(value)
 
-  const [data, setData] = useState<{ address: string; name: string }>({ address: undefined, name: undefined })
-  const [error, setError] = useState<boolean>(false)
+  const handleInput = useCallback(
+    event => {
+      const input = event.target.value
+      const withoutSpaces = input.replace(/\s+/g, '')
+      onChange(withoutSpaces)
+    },
+    [onChange]
+  )
 
-  // keep data and errors in sync
-  useEffect(() => {
-    onChange({ address: data.address, name: data.name })
-  }, [onChange, data.address, data.name])
-  useEffect(() => {
-    onError(error, input)
-  }, [onError, error, input])
-
-  // run parser on debounced input
-  useEffect(() => {
-    let stale = false
-    // if the input is an address, try to look up its name
-    if (isAddress(debouncedInput)) {
-      library
-        .lookupAddress(debouncedInput)
-        .then(name => {
-          if (stale) return
-          // if an ENS name exists, set it as the destination
-          if (name) {
-            setInput(name)
-          } else {
-            setData({ address: debouncedInput, name: '' })
-            setError(null)
-          }
-        })
-        .catch(() => {
-          if (stale) return
-          setData({ address: debouncedInput, name: '' })
-          setError(null)
-        })
-    }
-    // otherwise try to look up the address of the input, treated as an ENS name
-    else {
-      if (debouncedInput !== '') {
-        library
-          .resolveName(debouncedInput)
-          .then(address => {
-            if (stale) return
-            // if the debounced input name resolves to an address
-            if (address) {
-              setData({ address: address, name: debouncedInput })
-              setError(null)
-            } else {
-              setError(true)
-            }
-          })
-          .catch(() => {
-            if (stale) return
-            setError(true)
-          })
-      } else if (debouncedInput === '') {
-        setError(true)
-      }
-    }
-
-    return () => {
-      stale = true
-    }
-  }, [debouncedInput, library])
-
-  function onInput(event) {
-    setData({ address: undefined, name: undefined })
-    setError(false)
-    const input = event.target.value
-    const checksummedInput = isAddress(input.replace(/\s/g, '')) // delete whitespace
-    setInput(checksummedInput || input)
-  }
+  const error = Boolean(value.length > 0 && !loading && !address)
 
   return (
-    <InputPanel>
-      <ContainerRow error={input !== '' && error}>
+    <InputPanel id={id}>
+      <ContainerRow error={error}>
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
               <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
                 Recipient
               </TYPE.black>
-              {data.address && (
-                <ExternalLink
-                  href={getEtherscanLink(chainId, data.name || data.address, 'address')}
-                  style={{ fontSize: '14px' }}
-                >
+              {address && chainId && (
+                <ExternalLink href={getEtherscanLink(chainId, name ?? address, 'address')} style={{ fontSize: '14px' }}>
                   (View on Etherscan)
                 </ExternalLink>
               )}
             </RowBetween>
             <Input
+              className="recipient-address-input"
               type="text"
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
               placeholder="Wallet Address or ENS name"
-              error={input !== '' && error}
-              onChange={onInput}
-              value={input}
+              error={error}
+              pattern="^(0x[a-fA-F0-9]{40})$"
+              onChange={handleInput}
+              value={value}
             />
           </AutoColumn>
         </InputContainer>

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%')};
@@ -21,11 +21,14 @@ const Base = styled(RebassButton)<{
   outline: none;
   border: 1px solid transparent;
   color: white;
+  text-decoration: none;
   display: flex;
   justify-content: center;
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
   &:disabled {
     cursor: auto;
   }
@@ -50,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')};
   }
 `
 
@@ -250,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/ConfirmationModal/index.tsx

@@ -1,133 +0,0 @@
-import React, { useContext } from 'react'
-import styled, { ThemeContext } from 'styled-components'
-import Modal from '../Modal'
-import { ExternalLink } from '../../theme'
-import { Text } from 'rebass'
-import { CloseIcon, Spinner } from '../../theme/components'
-import { RowBetween } from '../Row'
-import { ArrowUpCircle } from 'react-feather'
-import { ButtonPrimary } from '../Button'
-import { AutoColumn, ColumnCenter } from '../Column'
-import Circle from '../../assets/images/blue-loader.svg'
-
-import { getEtherscanLink } from '../../utils'
-import { useActiveWeb3React } from '../../hooks'
-
-const Wrapper = styled.div`
-  width: 100%;
-`
-const Section = styled(AutoColumn)`
-  padding: 24px;
-`
-
-const BottomSection = styled(Section)`
-  background-color: ${({ theme }) => theme.bg2};
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-`
-
-const ConfirmedIcon = styled(ColumnCenter)`
-  padding: 60px 0;
-`
-
-const CustomLightSpinner = styled(Spinner)<{ size: string }>`
-  height: ${({ size }) => size};
-  width: ${({ size }) => size};
-`
-
-interface ConfirmationModalProps {
-  isOpen: boolean
-  onDismiss: () => void
-  hash: string
-  topContent: () => React.ReactChild
-  bottomContent: () => React.ReactChild
-  attemptingTxn: boolean
-  pendingText: string
-  title?: string
-}
-
-export default function ConfirmationModal({
-  isOpen,
-  onDismiss,
-  topContent,
-  bottomContent,
-  attemptingTxn,
-  hash,
-  pendingText,
-  title = ''
-}: ConfirmationModalProps) {
-  const { chainId } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-
-  const transactionBroadcast = !!hash
-
-  // waiting for user to confirm/reject tx _or_ showing info on a tx that has been broadcast
-  if (attemptingTxn || transactionBroadcast) {
-    return (
-      <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
-        <Wrapper>
-          <Section>
-            <RowBetween>
-              <div />
-              <CloseIcon onClick={onDismiss} />
-            </RowBetween>
-            <ConfirmedIcon>
-              {transactionBroadcast ? (
-                <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
-              ) : (
-                <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
-              )}
-            </ConfirmedIcon>
-            <AutoColumn gap="12px" justify={'center'}>
-              <Text fontWeight={500} fontSize={20}>
-                {transactionBroadcast ? 'Transaction Submitted' : 'Waiting For Confirmation'}
-              </Text>
-              <AutoColumn gap="12px" justify={'center'}>
-                <Text fontWeight={600} fontSize={14} color="" textAlign="center">
-                  {pendingText}
-                </Text>
-              </AutoColumn>
-
-              {transactionBroadcast ? (
-                <>
-                  <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
-                    </Text>
-                  </ButtonPrimary>
-                </>
-              ) : (
-                <Text fontSize={12} color="#565A69" textAlign="center">
-                  Confirm this transaction in your wallet
-                </Text>
-              )}
-            </AutoColumn>
-          </Section>
-        </Wrapper>
-      </Modal>
-    )
-  }
-
-  // confirmation screen
-  return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
-      <Wrapper>
-        <Section>
-          <RowBetween>
-            <Text fontWeight={500} fontSize={20}>
-              {title}
-            </Text>
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-          {topContent()}
-        </Section>
-        <BottomSection gap="12px">{bottomContent()}</BottomSection>
-      </Wrapper>
-    </Modal>
-  )
-}

src/components/CurrencyInputPanel/index.tsx

@@ -1,14 +1,13 @@
-import { Pair, Token } from '@uniswap/sdk'
+import { Currency, Pair } from '@uniswap/sdk'
 import React, { useState, useContext, useCallback } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { darken } from 'polished'
-import { Field } from '../../state/swap/actions'
-import { useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
-import TokenSearchModal from '../SearchModal/TokenSearchModal'
-import TokenLogo from '../TokenLogo'
-import DoubleLogo from '../DoubleLogo'
+import { useCurrencyBalance } from '../../state/wallet/hooks'
+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'
 
@@ -117,46 +116,42 @@ const StyledBalanceMax = styled.button`
 
 interface CurrencyInputPanelProps {
   value: string
-  field: string
-  onUserInput: (field: string, val: string) => void
+  onUserInput: (value: string) => void
   onMax?: () => void
   showMaxButton: boolean
   label?: string
-  onTokenSelection?: (tokenAddress: string) => void
-  token?: Token | null
-  disableTokenSelect?: boolean
+  onCurrencySelect?: (currency: Currency) => void
+  currency?: Currency | null
+  disableCurrencySelect?: boolean
   hideBalance?: boolean
-  isExchange?: boolean
   pair?: Pair | null
   hideInput?: boolean
-  showSendWithSwap?: boolean
-  otherSelectedTokenAddress?: string | null
+  otherCurrency?: Currency | null
   id: string
+  showCommonBases?: boolean
 }
 
 export default function CurrencyInputPanel({
   value,
-  field,
   onUserInput,
   onMax,
   showMaxButton,
   label = 'Input',
-  onTokenSelection = null,
-  token = null,
-  disableTokenSelect = false,
+  onCurrencySelect,
+  currency,
+  disableCurrencySelect = false,
   hideBalance = false,
-  isExchange = false,
   pair = null, // used for double token logo
   hideInput = false,
-  showSendWithSwap = false,
-  otherSelectedTokenAddress = null,
-  id
+  otherCurrency,
+  id,
+  showCommonBases
 }: CurrencyInputPanelProps) {
   const { t } = useTranslation()
 
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
-  const userTokenBalance = useTokenBalanceTreatingWETHasETH(account, token)
+  const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useContext(ThemeContext)
 
   const handleDismissSearch = useCallback(() => {
@@ -173,80 +168,77 @@ export default function CurrencyInputPanel({
                 {label}
               </TYPE.body>
               {account && (
-                <CursorPointer>
-                  <TYPE.body
-                    onClick={onMax}
-                    color={theme.text2}
-                    fontWeight={500}
-                    fontSize={14}
-                    style={{ display: 'inline' }}
-                  >
-                    {!hideBalance && !!token && userTokenBalance
-                      ? 'Balance: ' + userTokenBalance?.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>
         )}
-        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableTokenSelect}>
+        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableCurrencySelect}>
           {!hideInput && (
             <>
               <NumericalInput
                 className="token-amount-input"
                 value={value}
                 onUserInput={val => {
-                  onUserInput(field, val)
+                  onUserInput(val)
                 }}
               />
-              {account && !!token?.address && showMaxButton && label !== 'To' && (
+              {account && currency && showMaxButton && label !== 'To' && (
                 <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
               )}
             </>
           )}
           <CurrencySelect
-            selected={!!token}
+            selected={!!currency}
             className="open-currency-select-button"
             onClick={() => {
-              if (!disableTokenSelect) {
+              if (!disableCurrencySelect) {
                 setModalOpen(true)
               }
             }}
           >
             <Aligner>
-              {isExchange ? (
-                <DoubleLogo a0={pair?.token0.address} a1={pair?.token1.address} size={24} margin={true} />
-              ) : token?.address ? (
-                <TokenLogo address={token?.address} size={'24px'} />
+              {pair ? (
+                <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
+              ) : currency ? (
+                <CurrencyLogo currency={currency} size={'24px'} />
               ) : null}
-              {isExchange ? (
+              {pair ? (
                 <StyledTokenName className="pair-name-container">
                   {pair?.token0.symbol}:{pair?.token1.symbol}
                 </StyledTokenName>
               ) : (
-                <StyledTokenName className="token-symbol-container" active={Boolean(token && token.symbol)}>
-                  {(token && token.symbol && token.symbol.length > 20
-                    ? token.symbol.slice(0, 4) +
+                <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
+                  {(currency && currency.symbol && currency.symbol.length > 20
+                    ? currency.symbol.slice(0, 4) +
                       '...' +
-                      token.symbol.slice(token.symbol.length - 5, token.symbol.length)
-                    : token?.symbol) || t('selectToken')}
+                      currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
+                    : currency?.symbol) || t('selectToken')}
                 </StyledTokenName>
               )}
-              {!disableTokenSelect && <StyledDropDown selected={!!token?.address} />}
+              {!disableCurrencySelect && <StyledDropDown selected={!!currency} />}
             </Aligner>
           </CurrencySelect>
         </InputRow>
       </Container>
-      {!disableTokenSelect && (
-        <TokenSearchModal
+      {!disableCurrencySelect && onCurrencySelect && (
+        <CurrencySearchModal
           isOpen={modalOpen}
           onDismiss={handleDismissSearch}
-          onTokenSelect={onTokenSelection}
-          showSendWithSwap={showSendWithSwap}
-          hiddenToken={token?.address}
-          otherSelectedTokenAddress={otherSelectedTokenAddress}
-          otherSelectedText={field === Field.INPUT ? 'Selected as output' : 'Selected as input'}
+          onCurrencySelect={onCurrencySelect}
+          selectedCurrency={currency}
+          otherSelectedCurrency={otherCurrency}
+          showCommonBases={showCommonBases}
         />
       )}
     </InputPanel>

src/components/CurrencyLogo/index.tsx

@@ -0,0 +1,54 @@
+import { Currency, ETHER, Token } from '@uniswap/sdk'
+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 Logo from '../Logo'
+
+const getTokenLogoURL = (address: string) =>
+  `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+
+const StyledEthereumLogo = styled.img<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
+  border-radius: 24px;
+`
+
+const StyledLogo = styled(Logo)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`
+
+export default function CurrencyLogo({
+  currency,
+  size = '24px',
+  style
+}: {
+  currency?: Currency
+  size?: string
+  style?: React.CSSProperties
+}) {
+  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} style={style} />
+  }
+
+  return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />
+}

src/components/DoubleLogo/index.tsx

@@ -1,34 +1,40 @@
+import { Currency } from '@uniswap/sdk'
 import React from 'react'
 import styled from 'styled-components'
-import TokenLogo from '../TokenLogo'
+import CurrencyLogo from '../CurrencyLogo'
 
-const TokenWrapper = styled.div<{ margin: boolean; sizeraw: number }>`
+const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`
   position: relative;
   display: flex;
   flex-direction: row;
   margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
 `
 
-interface DoubleTokenLogoProps {
+interface DoubleCurrencyLogoProps {
   margin?: boolean
   size?: number
-  a0: string
-  a1?: string
+  currency0?: Currency
+  currency1?: Currency
 }
 
-const HigherLogo = styled(TokenLogo)`
+const HigherLogo = styled(CurrencyLogo)`
   z-index: 2;
 `
-const CoveredLogo = styled(TokenLogo)<{ sizeraw: number }>`
+const CoveredLogo = styled(CurrencyLogo)<{ sizeraw: number }>`
   position: absolute;
   left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
 `
 
-export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }: DoubleTokenLogoProps) {
+export default function DoubleCurrencyLogo({
+  currency0,
+  currency1,
+  size = 16,
+  margin = false
+}: DoubleCurrencyLogoProps) {
   return (
-    <TokenWrapper sizeraw={size} margin={margin}>
-      <HigherLogo address={a0} size={size.toString() + 'px'} />
-      {a1 && <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size} />}
-    </TokenWrapper>
+    <Wrapper sizeraw={size} margin={margin}>
+      {currency0 && <HigherLogo currency={currency0} size={size.toString() + 'px'} />}
+      {currency1 && <CoveredLogo currency={currency1} size={size.toString() + 'px'} sizeraw={size} />}
+    </Wrapper>
   )
 }

src/components/Header/VersionSwitch.tsx

@@ -4,6 +4,7 @@ import { Link, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import useParsedQueryString from '../../hooks/useParsedQueryString'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
+import { MouseoverTooltip } from '../Tooltip'
 
 const VersionLabel = styled.span<{ enabled: boolean }>`
   padding: 0.35rem 0.6rem;
@@ -11,7 +12,7 @@ const VersionLabel = styled.span<{ enabled: boolean }>`
   background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
   color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
   font-size: 1rem;
-  font-weight: ${({ theme, enabled }) => (enabled ? '500' : '400')};
+  font-weight: ${({ enabled }) => (enabled ? '500' : '400')};
   :hover {
     user-select: ${({ enabled }) => (enabled ? 'none' : 'initial')};
     background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
@@ -61,10 +62,15 @@ export default function VersionSwitch() {
     [versionSwitchAvailable]
   )
 
-  return (
+  const toggle = (
     <VersionToggle enabled={versionSwitchAvailable} to={toggleDest} onClick={handleClick}>
       <VersionLabel enabled={version === Version.v2 || !versionSwitchAvailable}>V2</VersionLabel>
       <VersionLabel enabled={version === Version.v1 && versionSwitchAvailable}>V1</VersionLabel>
     </VersionToggle>
   )
+  return versionSwitchAvailable ? (
+    toggle
+  ) : (
+    <MouseoverTooltip text="This page is only compatible with Uniswap V2.">{toggle}</MouseoverTooltip>
+  )
 }

src/components/Header/index.tsx

@@ -1,7 +1,6 @@
-import { ChainId, WETH } from '@uniswap/sdk'
+import { ChainId } from '@uniswap/sdk'
 import React from 'react'
 import { isMobile } from 'react-device-detect'
-import { Link as HistoryLink } from 'react-router-dom'
 import { Text } from 'rebass'
 
 import styled from 'styled-components'
@@ -12,11 +11,9 @@ import Wordmark from '../../assets/svg/wordmark.svg'
 import WordmarkDark from '../../assets/svg/wordmark_white.svg'
 import { useActiveWeb3React } from '../../hooks'
 import { useDarkModeManager } from '../../state/user/hooks'
-import { useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
+import { useETHBalances } from '../../state/wallet/hooks'
 
-import { ExternalLink, StyledInternalLink } from '../../theme'
 import { YellowCard } from '../Card'
-import { AutoColumn } from '../Column'
 import Settings from '../Settings'
 import Menu from '../Menu'
 
@@ -49,12 +46,12 @@ const HeaderElementWrap = styled.div`
   display: flex;
   align-items: center;
 
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-margin-top: 0.5rem;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin-top: 0.5rem;
 `};
 `
 
-const Title = styled.div`
+const Title = styled.a`
   display: flex;
   align-items: center;
   pointer-events: auto;
@@ -100,41 +97,33 @@ const NetworkCard = styled(YellowCard)`
   padding: 8px 12px;
 `
 
-const UniIcon = styled(HistoryLink)<{ to: string }>`
+const UniIcon = styled.div`
   transition: transform 0.3s ease;
   :hover {
     transform: rotate(-5deg);
   }
-`
-
-const MigrateBanner = styled(AutoColumn)`
-  width: 100%;
-  padding: 12px 0;
-  display: flex;
-  justify-content: center;
-  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.primaryText1};
-  font-weight: 400;
-  text-align: center;
-  pointer-events: auto;
-  a {
-    color: ${({ theme }) => theme.primaryText1};
-  }
-
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 0;
-    display: none;
+    img { 
+      width: 4.5rem;
+    }
   `};
 `
 
 const HeaderControls = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     flex-direction: column;
-    `};
+    align-items: flex-end;
+  `};
+`
+
+const BalanceText = styled(Text)`
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    display: none;
+  `};
 `
 
 const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
@@ -148,51 +137,32 @@ const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
 export default function Header() {
   const { account, chainId } = useActiveWeb3React()
 
-  const userEthBalance = useTokenBalanceTreatingWETHasETH(account, WETH[chainId])
+  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
   const [isDark] = useDarkModeManager()
 
   return (
     <HeaderFrame>
-      <MigrateBanner>
-        Uniswap V2 is live! Read the&nbsp;
-        <ExternalLink href="https://uniswap.org/blog/launch-uniswap-v2/">
-          <b>blog post ↗</b>
-        </ExternalLink>
-        &nbsp;or&nbsp;
-        <StyledInternalLink to="/migrate/v1">
-          <b>migrate your liquidity ↗</b>
-        </StyledInternalLink>
-        .
-      </MigrateBanner>
       <RowBetween style={{ alignItems: 'flex-start' }} padding="1rem 1rem 0 1rem">
         <HeaderElement>
-          <Title>
-            <UniIcon id="link" to="/">
+          <Title href=".">
+            <UniIcon>
               <img src={isDark ? LogoDark : Logo} alt="logo" />
             </UniIcon>
-            {!isMobile && (
-              <TitleText>
-                <HistoryLink id="link" to="/">
-                  <img
-                    style={{ marginLeft: '4px', marginTop: '4px' }}
-                    src={isDark ? WordmarkDark : Wordmark}
-                    alt="logo"
-                  />
-                </HistoryLink>
-              </TitleText>
-            )}
+            <TitleText>
+              <img style={{ marginLeft: '4px', marginTop: '4px' }} src={isDark ? WordmarkDark : Wordmark} alt="logo" />
+            </TitleText>
           </Title>
         </HeaderElement>
         <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 ? (
-                <Text style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
+                <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
                   {userEthBalance?.toSignificant(4)} ETH
-                </Text>
+                </BalanceText>
               ) : null}
               <Web3Status />
             </AccountElement>

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'
@@ -77,33 +78,17 @@ const MenuItem = styled(ExternalLink)`
   }
 `
 
-const CODE_LINK = 'https://github.com/Uniswap/uniswap-frontend'
+const CODE_LINK = 'https://github.com/Uniswap/uniswap-interface'
 
 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>
@@ -121,7 +106,7 @@ export default function Menu() {
             <Code size={14} />
             Code
           </MenuItem>
-          <MenuItem id="link" href="https://discord.gg/vXCdddD">
+          <MenuItem id="link" href="https://discord.gg/EwFs3Pp">
             <MessageCircle size={14} />
             Discord
           </MenuItem>

src/components/Modal/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { animated, useTransition, useSpring } from 'react-spring'
-import { Spring } from 'react-spring/renderprops'
-
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { isMobile } from 'react-device-detect'
 import '@reach/dialog/styles.css'
@@ -11,39 +9,25 @@ import { useGesture } from 'react-use-gesture'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(({ mobile, ...rest }) => <AnimatedDialogOverlay {...rest} />)<{ mobile: boolean }>`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
   &[data-reach-dialog-overlay] {
     z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     background-color: transparent;
     overflow: hidden;
 
-    ${({ mobile }) =>
-      mobile &&
-      css`
-        align-items: flex-end;
-      `}
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    &::after {
-      content: '';
-      background-color: ${({ theme }) => theme.modalBG};
-      opacity: 0.5;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      position: fixed;
-      z-index: -1;
-    }
+    background-color: ${({ theme }) => theme.modalBG};
   }
 `
 
+const AnimatedDialogContent = animated(DialogContent)
 // destructure to not pass custom props to Dialog DOM element
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
-  <DialogContent {...rest} />
+  <AnimatedDialogContent {...rest} />
 )).attrs({
   'aria-label': 'dialog'
 })`
@@ -54,6 +38,9 @@ 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')};
 
     max-width: 420px;
     ${({ maxHeight }) =>
@@ -99,10 +86,10 @@ export default function Modal({
   onDismiss,
   minHeight = false,
   maxHeight = 50,
-  initialFocusRef = null,
+  initialFocusRef,
   children
 }: ModalProps) {
-  const transitions = useTransition(isOpen, null, {
+  const fadeTransition = useTransition(isOpen, null, {
     config: { duration: 200 },
     from: { opacity: 0 },
     enter: { opacity: 1 },
@@ -115,80 +102,37 @@ export default function Modal({
       set({
         y: state.down ? state.movement[1] : 0
       })
-      if (state.velocity > 3 && state.direction[1] > 0) {
+      if (state.movement[1] > 300 || (state.velocity > 3 && state.direction[1] > 0)) {
         onDismiss()
       }
     }
   })
 
-  if (isMobile) {
-    return (
-      <>
-        {transitions.map(
-          ({ item, key, props }) =>
-            item && (
-              <StyledDialogOverlay
-                key={key}
-                style={props}
-                onDismiss={onDismiss}
-                initialFocusRef={initialFocusRef}
-                mobile={true}
+  return (
+    <>
+      {fadeTransition.map(
+        ({ item, key, props }) =>
+          item && (
+            <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
+              <StyledDialogContent
+                {...(isMobile
+                  ? {
+                      ...bind(),
+                      style: { transform: y.interpolate(y => `translateY(${y > 0 ? y : 0}px)`) }
+                    }
+                  : {})}
+                aria-label="dialog content"
+                minHeight={minHeight}
+                maxHeight={maxHeight}
+                mobile={isMobile}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
-                {initialFocusRef ? null : <div tabIndex={1} />}
-                <Spring // animation for entrance and exit
-                  from={{
-                    transform: isOpen ? 'translateY(200px)' : 'translateY(100px)'
-                  }}
-                  to={{
-                    transform: isOpen ? 'translateY(0px)' : 'translateY(200px)'
-                  }}
-                >
-                  {props => (
-                    <animated.div
-                      {...bind()}
-                      style={{
-                        transform: y.interpolate(y => `translateY(${y > 0 ? y : 0}px)`)
-                      }}
-                    >
-                      <StyledDialogContent
-                        aria-label="dialog content"
-                        style={props}
-                        hidden={true}
-                        minHeight={minHeight}
-                        maxHeight={maxHeight}
-                        mobile={isMobile}
-                      >
-                        {children}
-                      </StyledDialogContent>
-                    </animated.div>
-                  )}
-                </Spring>
-              </StyledDialogOverlay>
-            )
-        )}
-      </>
-    )
-  } else {
-    return (
-      <>
-        {transitions.map(
-          ({ item, key, props }) =>
-            item && (
-              <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
-                <StyledDialogContent
-                  aria-label="dialog content"
-                  hidden={true}
-                  minHeight={minHeight}
-                  maxHeight={maxHeight}
-                  isOpen={isOpen}
-                >
-                  {children}
-                </StyledDialogContent>
-              </StyledDialogOverlay>
-            )
-        )}
-      </>
-    )
-  }
+                {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}
+                {children}
+              </StyledDialogContent>
+            </StyledDialogOverlay>
+          )
+      )}
+    </>
+  )
 }

src/components/NavigationTabs/index.tsx

@@ -1,37 +1,18 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
-import { withRouter, NavLink, Link as HistoryLink, RouteComponentProps } from 'react-router-dom'
-import useBodyKeyDown from '../../hooks/useBodyKeyDown'
+import { NavLink, Link as HistoryLink } from 'react-router-dom'
 
-import { CursorPointer } from '../../theme'
 import { ArrowLeft } from 'react-feather'
 import { RowBetween } from '../Row'
 import QuestionHelper from '../QuestionHelper'
 
-const tabOrder = [
-  {
-    path: '/swap',
-    textKey: 'swap',
-    regex: /\/swap/
-  },
-  {
-    path: '/send',
-    textKey: 'send',
-    regex: /\/send/
-  },
-  {
-    path: '/pool',
-    textKey: 'pool',
-    regex: /\/pool/
-  }
-]
-
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   border-radius: 3rem;
+  justify-content: space-evenly;
 `
 
 const activeClassName = 'ACTIVE'
@@ -43,7 +24,6 @@ const StyledNavLink = styled(NavLink).attrs({
   align-items: center;
   justify-content: center;
   height: 3rem;
-  flex: 1 0 auto;
   border-radius: 3rem;
   outline: none;
   cursor: pointer;
@@ -68,89 +48,54 @@ const ActiveText = styled.div`
   font-size: 20px;
 `
 
-const ArrowLink = styled(ArrowLeft)`
+const StyledArrowLeft = styled(ArrowLeft)`
   color: ${({ theme }) => theme.text1};
 `
 
-function NavigationTabs({ location: { pathname }, history }: RouteComponentProps<{}>) {
+export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
   const { t } = useTranslation()
-
-  const navigate = useCallback(
-    direction => {
-      const tabIndex = tabOrder.findIndex(({ regex }) => pathname.match(regex))
-      history.push(tabOrder[(tabIndex + tabOrder.length + direction) % tabOrder.length].path)
-    },
-    [pathname, history]
-  )
-  const navigateRight = useCallback(() => {
-    navigate(1)
-  }, [navigate])
-  const navigateLeft = useCallback(() => {
-    navigate(-1)
-  }, [navigate])
-
-  useBodyKeyDown('ArrowRight', navigateRight)
-  useBodyKeyDown('ArrowLeft', navigateLeft)
-
-  const adding = pathname.match('/add')
-  const removing = pathname.match('/remove')
-  const finding = pathname.match('/find')
-  const creating = pathname.match('/create')
-
   return (
-    <>
-      {adding || removing ? (
-        <Tabs>
-          <RowBetween style={{ padding: '1rem' }}>
-            <CursorPointer onClick={() => history.push('/pool')}>
-              <ArrowLink />
-            </CursorPointer>
-            <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>
-            <QuestionHelper
-              text={
-                adding
-                  ? 'When you add liquidity, you are given pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time.'
-                  : 'Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.'
-              }
-            />
-          </RowBetween>
-        </Tabs>
-      ) : finding ? (
-        <Tabs>
-          <RowBetween style={{ padding: '1rem' }}>
-            <HistoryLink to="/pool">
-              <ArrowLink />
-            </HistoryLink>
-            <ActiveText>Import Pool</ActiveText>
-            <QuestionHelper text={"Use this tool to find pairs that don't automatically appear in the interface."} />
-          </RowBetween>
-        </Tabs>
-      ) : creating ? (
-        <Tabs>
-          <RowBetween style={{ padding: '1rem' }}>
-            <HistoryLink to="/pool">
-              <ArrowLink />
-            </HistoryLink>
-            <ActiveText>Create Pool</ActiveText>
-            <QuestionHelper text={'Use this interface to create a new pool.'} />
-          </RowBetween>
-        </Tabs>
-      ) : (
-        <Tabs style={{ marginBottom: '20px' }}>
-          {tabOrder.map(({ path, textKey, regex }) => (
-            <StyledNavLink
-              id={`${textKey}-nav-link`}
-              key={path}
-              to={path}
-              isActive={(_, { pathname }) => !!pathname.match(regex)}
-            >
-              {t(textKey)}
-            </StyledNavLink>
-          ))}
-        </Tabs>
-      )}
-    </>
+    <Tabs style={{ marginBottom: '20px' }}>
+      <StyledNavLink id={`swap-nav-link`} to={'/swap'} isActive={() => active === 'swap'}>
+        {t('swap')}
+      </StyledNavLink>
+      <StyledNavLink id={`pool-nav-link`} to={'/pool'} isActive={() => active === 'pool'}>
+        {t('pool')}
+      </StyledNavLink>
+    </Tabs>
   )
 }
 
-export default withRouter(NavigationTabs)
+export function FindPoolTabs() {
+  return (
+    <Tabs>
+      <RowBetween style={{ padding: '1rem' }}>
+        <HistoryLink to="/pool">
+          <StyledArrowLeft />
+        </HistoryLink>
+        <ActiveText>Import Pool</ActiveText>
+        <QuestionHelper text={"Use this tool to find pairs that don't automatically appear in the interface."} />
+      </RowBetween>
+    </Tabs>
+  )
+}
+
+export function AddRemoveTabs({ adding }: { adding: boolean }) {
+  return (
+    <Tabs>
+      <RowBetween style={{ padding: '1rem' }}>
+        <HistoryLink to="/pool">
+          <StyledArrowLeft />
+        </HistoryLink>
+        <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>
+        <QuestionHelper
+          text={
+            adding
+              ? 'When you add liquidity, you are given pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time.'
+              : 'Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.'
+          }
+        />
+      </RowBetween>
+    </Tabs>
+  )
+}

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

@@ -0,0 +1,106 @@
+import { diffTokenLists, TokenList } from '@uniswap/token-lists'
+import React, { useCallback, useMemo } from 'react'
+import ReactGA from 'react-ga'
+import { useDispatch } from 'react-redux'
+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 listVersionLabel from '../../utils/listVersionLabel'
+import { ButtonSecondary } from '../Button'
+import { AutoColumn } from '../Column'
+import { AutoRow } from '../Row'
+
+export default function ListUpdatePopup({
+  popKey,
+  listUrl,
+  oldList,
+  newList,
+  auto
+}: {
+  popKey: string
+  listUrl: string
+  oldList: TokenList
+  newList: TokenList
+  auto: boolean
+}) {
+  const removePopup = useRemovePopup()
+  const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
+  const dispatch = useDispatch<AppDispatch>()
+
+  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>
+      <AutoColumn style={{ flex: '1' }} gap="8px">
+        {auto ? (
+          <TYPE.body fontWeight={500}>
+            The token list &quot;{oldList.name}&quot; has been updated to{' '}
+            <strong>{listVersionLabel(newList.version)}</strong>.
+          </TYPE.body>
+        ) : (
+          <>
+            <div>
+              <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: 12 }}>
+                <ButtonSecondary onClick={handleAcceptUpdate}>Accept update</ButtonSecondary>
+              </div>
+              <div style={{ flexGrow: 1 }}>
+                <ButtonSecondary onClick={removeThisPopup}>Dismiss</ButtonSecondary>
+              </div>
+            </AutoRow>
+          </>
+        )}
+      </AutoColumn>
+    </AutoRow>
+  )
+}

src/components/Popups/PopupItem.tsx

@@ -0,0 +1,97 @@
+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 { animated } from 'react-spring'
+import { PopupContent } from '../../state/application/actions'
+import { useRemovePopup } from '../../state/application/hooks'
+import ListUpdatePopup from './ListUpdatePopup'
+import TransactionPopup from './TransactionPopup'
+
+export const StyledClose = styled(X)`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+export const Popup = styled.div`
+  display: inline-block;
+  width: 100%;
+  padding: 1em;
+  background-color: ${({ theme }) => theme.bg1};
+  position: relative;
+  border-radius: 10px;
+  padding: 20px;
+  padding-right: 35px;
+  overflow: hidden;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    min-width: 290px;
+  `}
+`
+const Fader = styled.div`
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 2px;
+  background-color: ${({ theme }) => theme.bg3};
+`
+
+const AnimatedFader = animated(Fader)
+
+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
+
+    const timeout = setTimeout(() => {
+      removeThisPopup()
+    }, removeAfterMs)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [removeAfterMs, removeThisPopup])
+
+  const theme = useContext(ThemeContext)
+
+  let popupContent
+  if ('txn' in content) {
+    const {
+      txn: { hash, success, summary }
+    } = content
+    popupContent = <TransactionPopup hash={hash} success={success} summary={summary} />
+  } else if ('listUpdate' in content) {
+    const {
+      listUpdate: { listUrl, oldList, newList, auto }
+    } = content
+    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>
+      <StyledClose color={theme.text2} onClick={removeThisPopup} />
+      {popupContent}
+      {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
+    </Popup>
+  )
+}

src/components/Popups/TransactionPopup.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react'
+import { AlertCircle, CheckCircle } from 'react-feather'
+import styled, { ThemeContext } from 'styled-components'
+import { useActiveWeb3React } from '../../hooks'
+import { TYPE } from '../../theme'
+import { ExternalLink } from '../../theme/components'
+import { getEtherscanLink } from '../../utils'
+import { AutoColumn } from '../Column'
+import { AutoRow } from '../Row'
+
+const RowNoFlex = styled(AutoRow)`
+  flex-wrap: nowrap;
+`
+
+export default function TransactionPopup({
+  hash,
+  success,
+  summary
+}: {
+  hash: string
+  success?: boolean
+  summary?: string
+}) {
+  const { chainId } = useActiveWeb3React()
+
+  const theme = useContext(ThemeContext)
+
+  return (
+    <RowNoFlex>
+      <div style={{ paddingRight: 16 }}>
+        {success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
+      </div>
+      <AutoColumn gap="8px">
+        <TYPE.body fontWeight={500}>{summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}</TYPE.body>
+        {chainId && (
+          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
+        )}
+      </AutoColumn>
+    </RowNoFlex>
+  )
+}

src/components/Popups/index.tsx

@@ -1,27 +1,8 @@
-import { ChainId, Pair, Token } from '@uniswap/sdk'
-import React, { useContext, useMemo } from 'react'
-import styled, { ThemeContext } from 'styled-components'
-import { useMediaLayout } from 'use-media'
-
-import { X } from 'react-feather'
-import { PopupContent } from '../../state/application/actions'
-import { useActivePopups, useRemovePopup } from '../../state/application/hooks'
-import { ExternalLink } from '../../theme'
+import React from 'react'
+import styled from 'styled-components'
+import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'
-import DoubleTokenLogo from '../DoubleLogo'
-import Row from '../Row'
-import TxnPopup from '../TxnPopup'
-import { Text } from 'rebass'
-
-const StyledClose = styled(X)`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-
-  :hover {
-    cursor: pointer;
-  }
-`
+import PopupItem from './PopupItem'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;
@@ -29,6 +10,11 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
   height: ${({ height }) => height};
   margin: ${({ height }) => (height ? '0 auto;' : 0)};
   margin-bottom: ${({ height }) => (height ? '20px' : 0)}};
+
+  display: none;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: block;
+  `};
 `
 
 const MobilePopupInner = styled.div`
@@ -44,123 +30,39 @@ const MobilePopupInner = styled.div`
 `
 
 const FixedPopupColumn = styled(AutoColumn)`
-  position: absolute;
-  top: 112px;
+  position: fixed;
+  top: 64px;
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
+  z-index: 2;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
   `};
 `
 
-const Popup = styled.div`
-  display: inline-block;
-  width: 100%;
-  padding: 1em;
-  background-color: ${({ theme }) => theme.bg1};
-  position: relative;
-  border-radius: 10px;
-  padding: 20px;
-  padding-right: 35px;
-  z-index: 2;
-  overflow: hidden;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    min-width: 290px;
-  `}
-`
-
-function PoolPopup({
-  token0,
-  token1
-}: {
-  token0: { address?: string; symbol?: string }
-  token1: { address?: string; symbol?: string }
-}) {
-  const pairAddress: string | null = useMemo(() => {
-    if (!token0 || !token1) return null
-    // just mock it out
-    return Pair.getAddress(
-      new Token(ChainId.MAINNET, token0.address, 18),
-      new Token(ChainId.MAINNET, token1.address, 18)
-    )
-  }, [token0, token1])
-
-  return (
-    <AutoColumn gap={'10px'}>
-      <Text fontSize={20} fontWeight={500}>
-        Pool Imported
-      </Text>
-      <Row>
-        <DoubleTokenLogo a0={token0?.address ?? ''} a1={token1?.address ?? ''} margin={true} />
-        <Text fontSize={16} fontWeight={500}>
-          UNI {token0?.symbol} / {token1?.symbol}
-        </Text>
-      </Row>
-      {pairAddress ? (
-        <ExternalLink href={`https://uniswap.info/pair/${pairAddress}`}>View on Uniswap Info.</ExternalLink>
-      ) : null}
-    </AutoColumn>
-  )
-}
-
-function PopupItem({ content, popKey }: { content: PopupContent; popKey: string }) {
-  if ('txn' in content) {
-    const {
-      txn: { hash, success, summary }
-    } = content
-    return <TxnPopup popKey={popKey} hash={hash} success={success} summary={summary} />
-  } else if ('poolAdded' in content) {
-    const {
-      poolAdded: { token0, token1 }
-    } = content
-
-    return <PoolPopup token0={token0} token1={token1} />
-  }
-}
-
 export default function Popups() {
-  const theme = useContext(ThemeContext)
   // get all popups
   const activePopups = useActivePopups()
-  const removePopup = useRemovePopup()
 
-  // switch view settings on mobile
-  const isMobile = useMediaLayout({ maxWidth: '600px' })
-
-  if (!isMobile) {
-    return (
+  return (
+    <>
       <FixedPopupColumn gap="20px">
-        {activePopups.map(item => {
-          return (
-            <Popup key={item.key}>
-              <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
-              <PopupItem content={item.content} popKey={item.key} />
-            </Popup>
-          )
-        })}
+        {activePopups.map(item => (
+          <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
+        ))}
       </FixedPopupColumn>
-    )
-  }
-  //mobile
-  else
-    return (
       <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
         <MobilePopupInner>
           {activePopups // reverse so new items up front
             .slice(0)
             .reverse()
-            .map(item => {
-              return (
-                <Popup key={item.key}>
-                  <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
-                  <PopupItem content={item.content} popKey={item.key} />
-                </Popup>
-              )
-            })}
+            .map(item => (
+              <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
+            ))}
         </MobilePopupInner>
       </MobilePopupWrapper>
-    )
+    </>
+  )
 }

src/components/PositionCard/V1.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { RouteComponentProps, withRouter } from 'react-router-dom'
+import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
 import { Token, TokenAmount, WETH } from '@uniswap/sdk'
 
 import { Text } from 'rebass'
@@ -7,7 +7,7 @@ import { AutoColumn } from '../Column'
 import { ButtonSecondary } from '../Button'
 import { RowBetween, RowFixed } from '../Row'
 import { FixedHeightRow, HoverCard } from './index'
-import DoubleTokenLogo from '../DoubleLogo'
+import DoubleCurrencyLogo from '../DoubleLogo'
 import { useActiveWeb3React } from '../../hooks'
 import { ThemeContext } from 'styled-components'
 
@@ -16,7 +16,7 @@ interface PositionCardProps extends RouteComponentProps<{}> {
   V1LiquidityBalance: TokenAmount
 }
 
-function V1PositionCard({ token, V1LiquidityBalance, history }: PositionCardProps) {
+function V1PositionCard({ token, V1LiquidityBalance }: PositionCardProps) {
   const theme = useContext(ThemeContext)
 
   const { chainId } = useActiveWeb3React()
@@ -26,9 +26,9 @@ function V1PositionCard({ token, V1LiquidityBalance, history }: PositionCardProp
       <AutoColumn gap="12px">
         <FixedHeightRow>
           <RowFixed>
-            <DoubleTokenLogo a0={token.address} margin={true} size={20} />
+            <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}
@@ -47,21 +47,15 @@ function V1PositionCard({ token, V1LiquidityBalance, history }: PositionCardProp
 
         <AutoColumn gap="8px">
           <RowBetween marginTop="10px">
-            <ButtonSecondary
-              width="68%"
-              onClick={() => {
-                history.push(`/migrate/v1/${V1LiquidityBalance.token.address}`)
-              }}
-            >
+            <ButtonSecondary width="68%" as={Link} to={`/migrate/v1/${V1LiquidityBalance.token.address}`}>
               Migrate
             </ButtonSecondary>
 
             <ButtonSecondary
               style={{ backgroundColor: 'transparent' }}
               width="28%"
-              onClick={() => {
-                history.push(`/remove/v1/${V1LiquidityBalance.token.address}`)
-              }}
+              as={Link}
+              to={`/remove/v1/${V1LiquidityBalance.token.address}`}
             >
               Remove
             </ButtonSecondary>

src/components/PositionCard/index.tsx

@@ -1,22 +1,24 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
+import { JSBI, Pair, Percent } from '@uniswap/sdk'
 import { darken } from 'polished'
-import { RouteComponentProps, withRouter } from 'react-router-dom'
-import { Percent, Pair, JSBI } from '@uniswap/sdk'
+import React, { useState } from 'react'
+import { ChevronDown, ChevronUp } from 'react-feather'
+import { Link } from 'react-router-dom'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+import { useTotalSupply } from '../../data/TotalSupply'
 
 import { useActiveWeb3React } from '../../hooks'
-import { useTotalSupply } from '../../data/TotalSupply'
 import { useTokenBalance } from '../../state/wallet/hooks'
+import { ExternalLink } from '../../theme'
+import { currencyId } from '../../utils/currencyId'
+import { unwrappedToken } from '../../utils/wrappedCurrency'
+import { ButtonSecondary } from '../Button'
 
 import Card, { GreyCard } from '../Card'
-import TokenLogo from '../TokenLogo'
-import DoubleLogo from '../DoubleLogo'
-import { Text } from 'rebass'
-import { ExternalLink } from '../../theme/components'
 import { AutoColumn } from '../Column'
-import { ChevronDown, ChevronUp } from 'react-feather'
-import { ButtonSecondary } from '../Button'
-import { RowBetween, RowFixed, AutoRow } from '../Row'
+import CurrencyLogo from '../CurrencyLogo'
+import DoubleCurrencyLogo from '../DoubleLogo'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
 
 export const FixedHeightRow = styled(RowBetween)`
@@ -30,22 +32,107 @@ export const HoverCard = styled(Card)`
   }
 `
 
-interface PositionCardProps extends RouteComponentProps<{}> {
+interface PositionCardProps {
   pair: Pair
-  minimal?: boolean
+  showUnwrapped?: boolean
   border?: string
 }
 
-function PositionCard({ pair, history, border, minimal = false }: PositionCardProps) {
+export function MinimalPositionCard({ pair, showUnwrapped = false, border }: PositionCardProps) {
   const { account } = useActiveWeb3React()
 
-  const token0 = pair?.token0
-  const token1 = pair?.token1
+  const currency0 = showUnwrapped ? pair.token0 : unwrappedToken(pair.token0)
+  const currency1 = showUnwrapped ? pair.token1 : unwrappedToken(pair.token1)
 
   const [showMore, setShowMore] = useState(false)
 
-  const userPoolBalance = useTokenBalance(account, pair?.liquidityToken)
-  const totalPoolTokens = useTotalSupply(pair?.liquidityToken)
+  const userPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
+  const totalPoolTokens = useTotalSupply(pair.liquidityToken)
+
+  const [token0Deposited, token1Deposited] =
+    !!pair &&
+    !!totalPoolTokens &&
+    !!userPoolBalance &&
+    // this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
+    JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
+      ? [
+          pair.getLiquidityValue(pair.token0, totalPoolTokens, userPoolBalance, false),
+          pair.getLiquidityValue(pair.token1, totalPoolTokens, userPoolBalance, false)
+        ]
+      : [undefined, undefined]
+
+  return (
+    <>
+      {userPoolBalance && (
+        <GreyCard border={border}>
+          <AutoColumn gap="12px">
+            <FixedHeightRow>
+              <RowFixed>
+                <Text fontWeight={500} fontSize={16}>
+                  Your position
+                </Text>
+              </RowFixed>
+            </FixedHeightRow>
+            <FixedHeightRow onClick={() => setShowMore(!showMore)}>
+              <RowFixed>
+                <DoubleCurrencyLogo currency0={currency0} currency1={currency1} margin={true} size={20} />
+                <Text fontWeight={500} fontSize={20}>
+                  {currency0.symbol}/{currency1.symbol}
+                </Text>
+              </RowFixed>
+              <RowFixed>
+                <Text fontWeight={500} fontSize={20}>
+                  {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
+                </Text>
+              </RowFixed>
+            </FixedHeightRow>
+            <AutoColumn gap="4px">
+              <FixedHeightRow>
+                <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  {currency0.symbol}:
+                </Text>
+                {token0Deposited ? (
+                  <RowFixed>
+                    <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                      {token0Deposited?.toSignificant(6)}
+                    </Text>
+                  </RowFixed>
+                ) : (
+                  '-'
+                )}
+              </FixedHeightRow>
+              <FixedHeightRow>
+                <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                  {currency1.symbol}:
+                </Text>
+                {token1Deposited ? (
+                  <RowFixed>
+                    <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                      {token1Deposited?.toSignificant(6)}
+                    </Text>
+                  </RowFixed>
+                ) : (
+                  '-'
+                )}
+              </FixedHeightRow>
+            </AutoColumn>
+          </AutoColumn>
+        </GreyCard>
+      )}
+    </>
+  )
+}
+
+export default function FullPositionCard({ pair, border }: PositionCardProps) {
+  const { account } = useActiveWeb3React()
+
+  const currency0 = unwrappedToken(pair.token0)
+  const currency1 = unwrappedToken(pair.token1)
+
+  const [showMore, setShowMore] = useState(false)
+
+  const userPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
+  const totalPoolTokens = useTotalSupply(pair.liquidityToken)
 
   const poolTokenPercentage =
     !!userPoolBalance && !!totalPoolTokens && JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
@@ -59,173 +146,99 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
     // this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
     JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
       ? [
-          pair.getLiquidityValue(token0, totalPoolTokens, userPoolBalance, false),
-          pair.getLiquidityValue(token1, totalPoolTokens, userPoolBalance, false)
+          pair.getLiquidityValue(pair.token0, totalPoolTokens, userPoolBalance, false),
+          pair.getLiquidityValue(pair.token1, totalPoolTokens, userPoolBalance, false)
         ]
       : [undefined, undefined]
 
-  if (minimal) {
-    return (
-      <>
-        {userPoolBalance && (
-          <GreyCard border={border}>
-            <AutoColumn gap="12px">
-              <FixedHeightRow>
+  return (
+    <HoverCard border={border}>
+      <AutoColumn gap="12px">
+        <FixedHeightRow onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer' }}>
+          <RowFixed>
+            <DoubleCurrencyLogo currency0={currency0} currency1={currency1} margin={true} size={20} />
+            <Text fontWeight={500} fontSize={20}>
+              {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
+            </Text>
+          </RowFixed>
+          <RowFixed>
+            {showMore ? (
+              <ChevronUp size="20" style={{ marginLeft: '10px' }} />
+            ) : (
+              <ChevronDown size="20" style={{ marginLeft: '10px' }} />
+            )}
+          </RowFixed>
+        </FixedHeightRow>
+        {showMore && (
+          <AutoColumn gap="8px">
+            <FixedHeightRow>
+              <RowFixed>
+                <Text fontSize={16} fontWeight={500}>
+                  Pooled {currency0.symbol}:
+                </Text>
+              </RowFixed>
+              {token0Deposited ? (
                 <RowFixed>
-                  <Text fontWeight={500} fontSize={16}>
-                    Your position
+                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    {token0Deposited?.toSignificant(6)}
                   </Text>
+                  <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
                 </RowFixed>
-              </FixedHeightRow>
-              <FixedHeightRow onClick={() => setShowMore(!showMore)}>
-                <RowFixed>
-                  <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
-                  <Text fontWeight={500} fontSize={20}>
-                    {token0?.symbol}/{token1?.symbol}
-                  </Text>
-                </RowFixed>
-                <RowFixed>
-                  <Text fontWeight={500} fontSize={20}>
-                    {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
-                  </Text>
-                </RowFixed>
-              </FixedHeightRow>
-              <AutoColumn gap="4px">
-                <FixedHeightRow>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
-                    {token0?.symbol}:
-                  </Text>
-                  {token0Deposited ? (
-                    <RowFixed>
-                      <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
-                        {token0Deposited?.toSignificant(6)}
-                      </Text>
-                    </RowFixed>
-                  ) : (
-                    '-'
-                  )}
-                </FixedHeightRow>
-                <FixedHeightRow>
-                  <Text color="#888D9B" fontSize={16} fontWeight={500}>
-                    {token1?.symbol}:
-                  </Text>
-                  {token1Deposited ? (
-                    <RowFixed>
-                      <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
-                        {token1Deposited?.toSignificant(6)}
-                      </Text>
-                    </RowFixed>
-                  ) : (
-                    '-'
-                  )}
-                </FixedHeightRow>
-              </AutoColumn>
-            </AutoColumn>
-          </GreyCard>
-        )}
-      </>
-    )
-  } else
-    return (
-      <HoverCard border={border}>
-        <AutoColumn gap="12px">
-          <FixedHeightRow onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer' }}>
-            <RowFixed>
-              <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
-              <Text fontWeight={500} fontSize={20}>
-                {!token0 || !token1 ? <Dots>Loading</Dots> : `${token0.symbol}/${token1.symbol}`}
-              </Text>
-            </RowFixed>
-            <RowFixed>
-              {showMore ? (
-                <ChevronUp size="20" style={{ marginLeft: '10px' }} />
               ) : (
-                <ChevronDown size="20" style={{ marginLeft: '10px' }} />
+                '-'
               )}
-            </RowFixed>
-          </FixedHeightRow>
-          {showMore && (
-            <AutoColumn gap="8px">
-              <FixedHeightRow>
-                <RowFixed>
-                  <Text fontSize={16} fontWeight={500}>
-                    Pooled {token0?.symbol}:
-                  </Text>
-                </RowFixed>
-                {token0Deposited ? (
-                  <RowFixed>
-                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
-                      {token0Deposited?.toSignificant(6)}
-                    </Text>
-                    <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address} />
-                  </RowFixed>
-                ) : (
-                  '-'
-                )}
-              </FixedHeightRow>
+            </FixedHeightRow>
 
-              <FixedHeightRow>
+            <FixedHeightRow>
+              <RowFixed>
+                <Text fontSize={16} fontWeight={500}>
+                  Pooled {currency1.symbol}:
+                </Text>
+              </RowFixed>
+              {token1Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500}>
-                    Pooled {token1?.symbol}:
+                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    {token1Deposited?.toSignificant(6)}
                   </Text>
+                  <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
                 </RowFixed>
-                {token1Deposited ? (
-                  <RowFixed>
-                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
-                      {token1Deposited?.toSignificant(6)}
-                    </Text>
-                    <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address} />
-                  </RowFixed>
-                ) : (
-                  '-'
-                )}
-              </FixedHeightRow>
-              <FixedHeightRow>
-                <Text fontSize={16} fontWeight={500}>
-                  Your pool tokens:
-                </Text>
-                <Text fontSize={16} fontWeight={500}>
-                  {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
-                </Text>
-              </FixedHeightRow>
-              <FixedHeightRow>
-                <Text fontSize={16} fontWeight={500}>
-                  Your pool share:
-                </Text>
-                <Text fontSize={16} fontWeight={500}>
-                  {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
-                </Text>
-              </FixedHeightRow>
+              ) : (
+                '-'
+              )}
+            </FixedHeightRow>
+            <FixedHeightRow>
+              <Text fontSize={16} fontWeight={500}>
+                Your pool tokens:
+              </Text>
+              <Text fontSize={16} fontWeight={500}>
+                {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
+              </Text>
+            </FixedHeightRow>
+            <FixedHeightRow>
+              <Text fontSize={16} fontWeight={500}>
+                Your pool share:
+              </Text>
+              <Text fontSize={16} fontWeight={500}>
+                {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
+              </Text>
+            </FixedHeightRow>
 
-              <AutoRow justify="center" marginTop={'10px'}>
-                <ExternalLink href={`https://uniswap.info/pair/${pair?.liquidityToken.address}`}>
-                  View pool information ↗
-                </ExternalLink>
-              </AutoRow>
-              <RowBetween marginTop="10px">
-                <ButtonSecondary
-                  width="48%"
-                  onClick={() => {
-                    history.push('/add/' + token0?.address + '-' + token1?.address)
-                  }}
-                >
-                  Add
-                </ButtonSecondary>
-                <ButtonSecondary
-                  width="48%"
-                  onClick={() => {
-                    history.push('/remove/' + token0?.address + '-' + token1?.address)
-                  }}
-                >
-                  Remove
-                </ButtonSecondary>
-              </RowBetween>
-            </AutoColumn>
-          )}
-        </AutoColumn>
-      </HoverCard>
-    )
+            <AutoRow justify="center" marginTop={'10px'}>
+              <ExternalLink href={`https://uniswap.info/pair/${pair.liquidityToken.address}`}>
+                View pool information ↗
+              </ExternalLink>
+            </AutoRow>
+            <RowBetween marginTop="10px">
+              <ButtonSecondary as={Link} to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`} width="48%">
+                Add
+              </ButtonSecondary>
+              <ButtonSecondary as={Link} width="48%" to={`/remove/${currencyId(currency0)}/${currencyId(currency1)}`}>
+                Remove
+              </ButtonSecondary>
+            </RowBetween>
+          </AutoColumn>
+        )}
+      </AutoColumn>
+    </HoverCard>
+  )
 }
-
-export default withRouter(PositionCard)

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/Row/index.tsx

@@ -5,14 +5,13 @@ const Row = styled(Box)<{ align?: string; padding?: string; border?: string; bor
   width: 100%;
   display: flex;
   padding: 0;
-  align-items: center;
-  align-items: ${({ align }) => align && align};
+  align-items: ${({ align }) => (align ? align : 'center')};
   padding: ${({ padding }) => padding};
   border: ${({ border }) => border};
   border-radius: ${({ borderRadius }) => borderRadius};
 `
 
-export const RowBetween = styled(Row)<{ align?: string; padding?: string; border?: string; borderRadius?: string }>`
+export const RowBetween = styled(Row)`
   justify-content: space-between;
 `
 

src/components/SearchModal/CommonBases.tsx

@@ -1,41 +1,66 @@
 import React from 'react'
 import { Text } from 'rebass'
-import { Token } from '@uniswap/sdk'
+import { ChainId, Currency, currencyEquals, ETHER, Token } from '@uniswap/sdk'
+import styled from 'styled-components'
 
 import { SUGGESTED_BASES } from '../../constants'
 import { AutoColumn } from '../Column'
 import QuestionHelper from '../QuestionHelper'
 import { AutoRow } from '../Row'
-import TokenLogo from '../TokenLogo'
-import { BaseWrapper } from './styleds'
+import CurrencyLogo from '../CurrencyLogo'
+
+const BaseWrapper = styled.div<{ disable?: boolean }>`
+  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
+  border-radius: 10px;
+  display: flex;
+  padding: 6px;
+
+  align-items: center;
+  :hover {
+    cursor: ${({ disable }) => !disable && 'pointer'};
+    background-color: ${({ theme, disable }) => !disable && theme.bg2};
+  }
+
+  background-color: ${({ theme, disable }) => disable && theme.bg3};
+  opacity: ${({ disable }) => disable && '0.4'};
+`
 
 export default function CommonBases({
   chainId,
   onSelect,
-  selectedTokenAddress
+  selectedCurrency
 }: {
-  chainId: number
-  selectedTokenAddress: string
-  onSelect: (tokenAddress: string) => void
+  chainId?: ChainId
+  selectedCurrency?: Currency | null
+  onSelect: (currency: Currency) => void
 }) {
   return (
     <AutoColumn gap="md">
       <AutoRow>
-        <Text fontWeight={500} fontSize={16}>
-          Common Bases
+        <Text fontWeight={500} fontSize={14}>
+          Common bases
         </Text>
-        <QuestionHelper text="These tokens are commonly used in pairs." />
+        <QuestionHelper text="These tokens are commonly paired with other tokens." />
       </AutoRow>
-      <AutoRow gap="10px">
-        {(SUGGESTED_BASES[chainId] ?? []).map((token: Token) => {
+      <AutoRow gap="4px">
+        <BaseWrapper
+          onClick={() => {
+            if (!selectedCurrency || !currencyEquals(selectedCurrency, ETHER)) {
+              onSelect(ETHER)
+            }
+          }}
+          disable={selectedCurrency === ETHER}
+        >
+          <CurrencyLogo currency={ETHER} style={{ marginRight: 8 }} />
+          <Text fontWeight={500} fontSize={16}>
+            ETH
+          </Text>
+        </BaseWrapper>
+        {(chainId ? SUGGESTED_BASES[chainId] : []).map((token: Token) => {
+          const selected = selectedCurrency instanceof Token && selectedCurrency.address === token.address
           return (
-            <BaseWrapper
-              gap="6px"
-              onClick={() => selectedTokenAddress !== token.address && onSelect(token.address)}
-              disable={selectedTokenAddress === token.address}
-              key={token.address}
-            >
-              <TokenLogo address={token.address} />
+            <BaseWrapper onClick={() => !selected && onSelect(token)} disable={selected} key={token.address}>
+              <CurrencyLogo currency={token} style={{ marginRight: 8 }} />
               <Text fontWeight={500} fontSize={16}>
                 {token.symbol}
               </Text>

src/components/SearchModal/CurrencyList.tsx

@@ -0,0 +1,210 @@
+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 styled from 'styled-components'
+import { useActiveWeb3React } from '../../hooks'
+import { useSelectedTokenList, WrappedTokenInfo } from '../../state/lists/hooks'
+import { useAddUserToken, useRemoveUserAddedToken } from '../../state/user/hooks'
+import { useCurrencyBalance } from '../../state/wallet/hooks'
+import { LinkStyledButton, TYPE } from '../../theme'
+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 { 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,
+  selectedCurrency,
+  onCurrencySelect,
+  otherCurrency,
+  fixedListRef,
+  showETH
+}: {
+  height: number
+  currencies: Currency[]
+  selectedCurrency?: Currency | null
+  onCurrencySelect: (currency: Currency) => void
+  otherCurrency?: Currency | null
+  fixedListRef?: MutableRefObject<FixedSizeList | undefined>
+  showETH: boolean
+}) {
+  const itemData = useMemo(() => (showETH ? [Currency.ETHER, ...currencies] : currencies), [currencies, showETH])
+
+  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 (
+        <CurrencyRow
+          style={style}
+          currency={currency}
+          isSelected={isSelected}
+          onSelect={handleSelect}
+          otherSelected={otherSelected}
+        />
+      )
+    },
+    [onCurrencySelect, otherCurrency, selectedCurrency]
+  )
+
+  const itemKey = useCallback((index: number, data: any) => currencyKey(data[index]), [])
+
+  return (
+    <FixedSizeList
+      height={height}
+      ref={fixedListRef as any}
+      width="100%"
+      itemData={itemData}
+      itemCount={itemData.length}
+      itemSize={56}
+      itemKey={itemKey}
+    >
+      {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

@@ -0,0 +1,85 @@
+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 { CurrencySearch } from './CurrencySearch'
+import ListIntroduction from './ListIntroduction'
+import { ListSelect } from './ListSelect'
+
+interface CurrencySearchModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  selectedCurrency?: Currency | null
+  onCurrencySelect: (currency: Currency) => void
+  otherSelectedCurrency?: Currency | null
+  showCommonBases?: boolean
+}
+
+export default function CurrencySearchModal({
+  isOpen,
+  onDismiss,
+  onCurrencySelect,
+  selectedCurrency,
+  otherSelectedCurrency,
+  showCommonBases = false
+}: CurrencySearchModalProps) {
+  const [listView, setListView] = useState<boolean>(false)
+  const lastOpen = useLast(isOpen)
+
+  useEffect(() => {
+    if (isOpen && !lastOpen) {
+      setListView(false)
+    }
+  }, [isOpen, lastOpen])
+
+  const handleCurrencySelect = useCallback(
+    (currency: Currency) => {
+      onCurrencySelect(currency)
+      onDismiss()
+    },
+    [onDismiss, onCurrencySelect]
+  )
+
+  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 selectedListUrl = useSelectedListUrl()
+  const noListSelected = !selectedListUrl
+
+  return (
+    <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}
+          onChangeList={handleClickChangeList}
+          selectedCurrency={selectedCurrency}
+          otherSelectedCurrency={otherSelectedCurrency}
+          showCommonBases={showCommonBases}
+        />
+      )}
+    </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/PairList.tsx

@@ -1,58 +0,0 @@
-import { JSBI, Pair, TokenAmount } from '@uniswap/sdk'
-import React from 'react'
-import { FixedSizeList } from 'react-window'
-import { Text } from 'rebass'
-import { ButtonPrimary } from '../Button'
-import DoubleTokenLogo from '../DoubleLogo'
-import { RowFixed } from '../Row'
-import { MenuItem, ModalInfo } from './styleds'
-
-export default function PairList({
-  pairs,
-  focusTokenAddress,
-  pairBalances,
-  onSelectPair,
-  onAddLiquidity = onSelectPair
-}: {
-  pairs: Pair[]
-  focusTokenAddress?: string
-  pairBalances: { [pairAddress: string]: TokenAmount }
-  onSelectPair: (pair: Pair) => void
-  onAddLiquidity: (pair: Pair) => void
-}) {
-  if (pairs.length === 0) {
-    return <ModalInfo>No Pools Found</ModalInfo>
-  }
-
-  return (
-    <FixedSizeList itemSize={56} height={500} itemCount={pairs.length} width="100%" style={{ flex: '1' }}>
-      {({ index, style }) => {
-        const pair = pairs[index]
-
-        // the focused token is shown first
-        const tokenA = focusTokenAddress === pair.token1.address ? pair.token1 : pair.token0
-        const tokenB = tokenA === pair.token0 ? pair.token1 : pair.token0
-
-        const pairAddress = pair.liquidityToken.address
-        const balance = pairBalances[pairAddress]?.toSignificant(6)
-        const zeroBalance = pairBalances[pairAddress]?.raw && JSBI.equal(pairBalances[pairAddress].raw, JSBI.BigInt(0))
-
-        const selectPair = () => onSelectPair(pair)
-        const addLiquidity = () => onAddLiquidity(pair)
-
-        return (
-          <MenuItem style={style} onClick={selectPair}>
-            <RowFixed>
-              <DoubleTokenLogo a0={tokenA.address} a1={tokenB.address} size={24} margin={true} />
-              <Text fontWeight={500} fontSize={16}>{`${tokenA.symbol}/${tokenB.symbol}`}</Text>
-            </RowFixed>
-
-            <ButtonPrimary padding={'6px 8px'} width={'fit-content'} borderRadius={'12px'} onClick={addLiquidity}>
-              {balance ? (zeroBalance ? 'Join' : 'Add Liquidity') : 'Join'}
-            </ButtonPrimary>
-          </MenuItem>
-        )
-      }}
-    </FixedSizeList>
-  )
-}

src/components/SearchModal/PairSearchModal.tsx

@@ -1,141 +0,0 @@
-import { Pair } from '@uniswap/sdk'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { isMobile } from 'react-device-detect'
-import { useTranslation } from 'react-i18next'
-import { RouteComponentProps, withRouter } from 'react-router-dom'
-import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
-import Card from '../../components/Card'
-import { useActiveWeb3React } from '../../hooks'
-import { useAllTokens } from '../../hooks/Tokens'
-import { useAllDummyPairs } from '../../state/user/hooks'
-import { useTokenBalances } from '../../state/wallet/hooks'
-import { CloseIcon, StyledInternalLink } from '../../theme/components'
-import { isAddress } from '../../utils'
-import Column from '../Column'
-import Modal from '../Modal'
-import QuestionHelper from '../QuestionHelper'
-import { AutoRow, RowBetween } from '../Row'
-import { filterPairs } from './filtering'
-import PairList from './PairList'
-import { pairComparator } from './sorting'
-import { PaddedColumn, SearchInput } from './styleds'
-
-interface PairSearchModalProps extends RouteComponentProps {
-  isOpen?: boolean
-  onDismiss?: () => void
-}
-
-function PairSearchModal({ history, isOpen, onDismiss }: PairSearchModalProps) {
-  const { t } = useTranslation()
-  const { account } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-
-  const [searchQuery, setSearchQuery] = useState<string>('')
-
-  const allTokens = useAllTokens()
-  const allPairs = useAllDummyPairs()
-
-  const allPairBalances = useTokenBalances(
-    account,
-    allPairs.map(p => p.liquidityToken)
-  )
-
-  // clear the input on open
-  useEffect(() => {
-    if (isOpen) setSearchQuery('')
-  }, [isOpen, setSearchQuery])
-
-  // manage focus on modal show
-  const inputRef = useRef<HTMLInputElement>()
-  function onInput(event) {
-    const input = event.target.value
-    const checksummedInput = isAddress(input)
-    setSearchQuery(checksummedInput || input)
-  }
-
-  const filteredPairs = useMemo(() => {
-    return filterPairs(allPairs, searchQuery)
-  }, [allPairs, searchQuery])
-
-  const sortedPairList = useMemo(() => {
-    const query = searchQuery.toLowerCase()
-    const queryMatches = (pair: Pair): boolean =>
-      pair.token0.symbol.toLowerCase() === query || pair.token1.symbol.toLowerCase() === query
-    return filteredPairs.sort((a, b): number => {
-      const [aMatches, bMatches] = [queryMatches(a), queryMatches(b)]
-      if (aMatches && !bMatches) return -1
-      if (bMatches && !aMatches) return 1
-      const balanceA = allPairBalances[a.liquidityToken.address]
-      const balanceB = allPairBalances[b.liquidityToken.address]
-      return pairComparator(a, b, balanceA, balanceB)
-    })
-  }, [searchQuery, filteredPairs, allPairBalances])
-
-  const selectPair = useCallback(
-    (pair: Pair) => {
-      history.push(`/add/${pair.token0.address}-${pair.token1.address}`)
-    },
-    [history]
-  )
-
-  const focusedToken = Object.values(allTokens ?? {}).filter(token => {
-    return token.symbol.toLowerCase() === searchQuery || searchQuery === token.address
-  })[0]
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onDismiss={onDismiss}
-      maxHeight={70}
-      initialFocusRef={isMobile ? undefined : inputRef}
-      minHeight={70}
-    >
-      <Column style={{ width: '100%' }}>
-        <PaddedColumn gap="20px">
-          <RowBetween>
-            <Text fontWeight={500} fontSize={16}>
-              Select a pool
-              <QuestionHelper text="Find a pair by searching for its name below." />
-            </Text>
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-          <SearchInput
-            type="text"
-            id="token-search-input"
-            placeholder={t('tokenSearchPlaceholder')}
-            value={searchQuery}
-            ref={inputRef}
-            onChange={onInput}
-          />
-          <RowBetween>
-            <Text fontSize={14} fontWeight={500}>
-              Pool Name
-            </Text>
-          </RowBetween>
-        </PaddedColumn>
-        <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
-        <PairList
-          pairs={sortedPairList}
-          focusTokenAddress={focusedToken?.address}
-          onAddLiquidity={selectPair}
-          onSelectPair={selectPair}
-          pairBalances={allPairBalances}
-        />
-        <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
-        <Card>
-          <AutoRow justify={'center'}>
-            <div>
-              <Text fontWeight={500}>
-                {!isMobile && "Don't see a pool? "}
-                <StyledInternalLink to="/find">{!isMobile ? 'Import it.' : 'Import pool.'}</StyledInternalLink>
-              </Text>
-            </div>
-          </AutoRow>
-        </Card>
-      </Column>
-    </Modal>
-  )
-}
-
-export default withRouter(PairSearchModal)

src/components/SearchModal/TokenList.tsx

@@ -1,138 +0,0 @@
-import { JSBI, Token, TokenAmount } from '@uniswap/sdk'
-import React, { useContext } from 'react'
-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 } from '../../hooks/Tokens'
-import { useAddUserToken, useRemoveUserAddedToken } from '../../state/user/hooks'
-import { LinkStyledButton, TYPE } from '../../theme'
-import { ButtonSecondary } from '../Button'
-import Column, { AutoColumn } from '../Column'
-import { RowFixed } from '../Row'
-import TokenLogo from '../TokenLogo'
-import { FadedSpan, GreySpan, MenuItem, ModalInfo } from './styleds'
-import Loader from '../Loader'
-import { isDefaultToken, isCustomAddedToken } from '../../utils'
-
-export default function TokenList({
-  tokens,
-  allTokenBalances,
-  selectedToken,
-  onTokenSelect,
-  otherToken,
-  showSendWithSwap,
-  otherSelectedText
-}: {
-  tokens: Token[]
-  selectedToken: string
-  allTokenBalances: { [tokenAddress: string]: TokenAmount }
-  onTokenSelect: (tokenAddress: string) => void
-  otherToken: string
-  showSendWithSwap?: boolean
-  otherSelectedText: string
-}) {
-  const { t } = useTranslation()
-  const { account, chainId } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-  const allTokens = useAllTokens()
-  const addToken = useAddUserToken()
-  const removeToken = useRemoveUserAddedToken()
-
-  if (tokens.length === 0) {
-    return <ModalInfo>{t('noToken')}</ModalInfo>
-  }
-
-  return (
-    <FixedSizeList
-      width="100%"
-      height={500}
-      itemCount={tokens.length}
-      itemSize={56}
-      style={{ flex: '1' }}
-      itemKey={index => tokens[index].address}
-    >
-      {({ index, style }) => {
-        const token = tokens[index]
-        const { address, symbol } = token
-
-        const isDefault = isDefaultToken(token)
-        const customAdded = isCustomAddedToken(allTokens, token)
-        const balance = allTokenBalances[address]
-
-        const zeroBalance = balance && JSBI.equal(JSBI.BigInt(0), balance.raw)
-
-        return (
-          <MenuItem
-            style={style}
-            key={address}
-            className={`token-item-${address}`}
-            onClick={() => (selectedToken && selectedToken === address ? null : onTokenSelect(address))}
-            disabled={selectedToken && selectedToken === address}
-            selected={otherToken === address}
-          >
-            <RowFixed>
-              <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />
-              <Column>
-                <Text fontWeight={500}>
-                  {symbol}
-                  {otherToken === address && <GreySpan> ({otherSelectedText})</GreySpan>}
-                </Text>
-                <FadedSpan>
-                  {customAdded ? (
-                    <TYPE.main fontWeight={500}>
-                      Added by user
-                      <LinkStyledButton
-                        onClick={event => {
-                          event.stopPropagation()
-                          removeToken(chainId, address)
-                        }}
-                      >
-                        (Remove)
-                      </LinkStyledButton>
-                    </TYPE.main>
-                  ) : null}
-                  {!isDefault && !customAdded ? (
-                    <TYPE.main fontWeight={500}>
-                      Found by address
-                      <LinkStyledButton
-                        onClick={event => {
-                          event.stopPropagation()
-                          addToken(token)
-                        }}
-                      >
-                        (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>
-        )
-      }}
-    </FixedSizeList>
-  )
-}

src/components/SearchModal/TokenSearchModal.tsx

@@ -1,185 +0,0 @@
-import { Token } from '@uniswap/sdk'
-import React, { 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 { useAllTokenBalancesTreatingWETHasETH, useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
-import { CloseIcon, LinkStyledButton } from '../../theme/components'
-import { isAddress } from '../../utils'
-import Column from '../Column'
-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 TokenList from './TokenList'
-import SortButton from './SortButton'
-
-interface TokenSearchModalProps {
-  isOpen?: boolean
-  onDismiss?: () => void
-  hiddenToken?: string
-  showSendWithSwap?: boolean
-  onTokenSelect?: (address: string) => void
-  otherSelectedTokenAddress?: string
-  otherSelectedText?: string
-  showCommonBases?: boolean
-}
-
-export default function TokenSearchModal({
-  isOpen,
-  onDismiss,
-  onTokenSelect,
-  hiddenToken,
-  showSendWithSwap,
-  otherSelectedTokenAddress,
-  otherSelectedText,
-  showCommonBases = false
-}: TokenSearchModalProps) {
-  const { t } = useTranslation()
-  const { account, chainId } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-
-  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 = useTokenBalanceTreatingWETHasETH(account, searchToken)
-  const allTokenBalances_ = useAllTokenBalancesTreatingWETHasETH()
-  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])
-
-  const handleTokenSelect = useCallback(
-    (address: string) => {
-      onTokenSelect(address)
-      onDismiss()
-    },
-    [onDismiss, onTokenSelect]
-  )
-
-  // 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 openTooltip = useCallback(() => {
-    setTooltipOpen(true)
-    inputRef.current?.focus()
-  }, [setTooltipOpen])
-  const closeTooltip = useCallback(() => setTooltipOpen(false), [setTooltipOpen])
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onDismiss={onDismiss}
-      maxHeight={70}
-      initialFocusRef={isMobile ? undefined : inputRef}
-      minHeight={70}
-    >
-      <Column style={{ width: '100%' }}>
-        <PaddedColumn gap="20px">
-          <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}
-              onBlur={closeTooltip}
-            />
-          </Tooltip>
-          {showCommonBases && (
-            <CommonBases chainId={chainId} onSelect={handleTokenSelect} selectedTokenAddress={hiddenToken} />
-          )}
-          <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 }} />
-        <TokenList
-          tokens={filteredSortedTokens}
-          allTokenBalances={allTokenBalances}
-          onTokenSelect={handleTokenSelect}
-          otherSelectedText={otherSelectedText}
-          otherToken={otherSelectedTokenAddress}
-          selectedToken={hiddenToken}
-          showSendWithSwap={showSendWithSwap}
-        />
-        <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/filtering.ts

@@ -1,5 +1,5 @@
 import { isAddress } from '../../utils'
-import { Pair, Token } from '@uniswap/sdk'
+import { Token } from '@uniswap/sdk'
 
 export function filterTokens(tokens: Token[], search: string): Token[] {
   if (search.length === 0) return tokens
@@ -31,30 +31,6 @@ export function filterTokens(tokens: Token[], search: string): Token[] {
   return tokens.filter(token => {
     const { symbol, name } = token
 
-    return matchesSearch(symbol) || matchesSearch(name)
-  })
-}
-
-export function filterPairs(pairs: Pair[], search: string): Pair[] {
-  if (search.trim().length === 0) return pairs
-
-  const addressSearch = isAddress(search)
-  if (addressSearch) {
-    return pairs.filter(p => {
-      return (
-        p.token0.address === addressSearch ||
-        p.token1.address === addressSearch ||
-        p.liquidityToken.address === addressSearch
-      )
-    })
-  }
-
-  const lowerSearch = search.toLowerCase()
-  return pairs.filter(pair => {
-    const pairExpressionA = `${pair.token0.symbol}/${pair.token1.symbol}`.toLowerCase()
-    if (pairExpressionA.startsWith(lowerSearch)) return true
-    const pairExpressionB = `${pair.token1.symbol}/${pair.token0.symbol}`.toLowerCase()
-    if (pairExpressionB.startsWith(lowerSearch)) return true
-    return filterTokens([pair.token0, pair.token1], search).length > 0
+    return (symbol && matchesSearch(symbol)) || (name && matchesSearch(name))
   })
 }

src/components/SearchModal/sorting.ts

@@ -1,8 +1,6 @@
-import { Token, TokenAmount, WETH, Pair } from '@uniswap/sdk'
+import { Token, TokenAmount } from '@uniswap/sdk'
 import { useMemo } from 'react'
-import { useActiveWeb3React } from '../../hooks'
-import { useAllTokenBalancesTreatingWETHasETH } from '../../state/wallet/hooks'
-import { DUMMY_PAIRS_TO_PIN } from '../../constants'
+import { useAllTokenBalances } from '../../state/wallet/hooks'
 
 // compare two token amounts with highest one coming first
 function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount) {
@@ -16,40 +14,13 @@ function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount) {
   return 0
 }
 
-// compare two pairs, favoring "pinned" pairs, and falling back to balances
-export function pairComparator(pairA: Pair, pairB: Pair, balanceA?: TokenAmount, balanceB?: TokenAmount) {
-  const aShouldBePinned =
-    DUMMY_PAIRS_TO_PIN[pairA?.token0?.chainId]?.some(
-      dummyPairToPin => dummyPairToPin.liquidityToken.address === pairA?.liquidityToken?.address
-    ) ?? false
-  const bShouldBePinned =
-    DUMMY_PAIRS_TO_PIN[pairB?.token0?.chainId]?.some(
-      dummyPairToPin => dummyPairToPin.liquidityToken.address === pairB?.liquidityToken?.address
-    ) ?? false
-
-  if (aShouldBePinned && !bShouldBePinned) {
-    return -1
-  } else if (!aShouldBePinned && bShouldBePinned) {
-    return 1
-  } else {
-    return balanceComparator(balanceA, balanceB)
-  }
-}
-
-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]
@@ -57,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 = useAllTokenBalancesTreatingWETHasETH()
-  const comparator = useMemo(() => getTokenComparator(weth, balances ?? {}), [balances, weth])
+  const balances = useAllTokenBalances()
+  const comparator = useMemo(() => getTokenComparator(balances ?? {}), [balances])
   return useMemo(() => {
     if (inverted) {
       return (tokenA: Token, tokenB: Token) => comparator(tokenA, tokenB) * -1

src/components/SearchModal/styleds.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { AutoColumn } from '../Column'
-import { AutoRow, RowBetween, RowFixed } from '../Row'
+import { RowBetween, RowFixed } from '../Row'
 
 export const ModalInfo = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -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,43 +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 BaseWrapper = styled(AutoRow)<{ disable?: boolean }>`
-  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
-  padding: 0 6px;
-  border-radius: 10px;
-  width: 120px;
-
-  :hover {
-    cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable }) => !disable && theme.bg2};
-  }
-
-  background-color: ${({ theme, disable }) => disable && theme.bg3};
-  opacity: ${({ disable }) => disable && '0.4'};
-`
-
-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'
@@ -88,6 +88,9 @@ const MenuFlyout = styled.span`
   background-color: ${({ theme }) => theme.bg1};
   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);
+
+  border: 1px solid ${({ theme }) => theme.bg3};
+
   border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
@@ -135,28 +138,12 @@ 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}>
-      <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)}>
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
+      <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)} maxHeight={100}>
         <ModalContentWrapper>
           <AutoColumn gap="lg">
             <RowBetween style={{ padding: '0 2rem' }}>
@@ -185,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>
@@ -193,7 +180,7 @@ export default function SettingsTab() {
           </AutoColumn>
         </ModalContentWrapper>
       </Modal>
-      <StyledMenuButton onClick={toggle}>
+      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button">
         <StyledMenuIcon />
         {expertMode && (
           <EmojiWrapper>
@@ -209,7 +196,7 @@ export default function SettingsTab() {
             <Text fontWeight={600} fontSize={14}>
               Transaction Settings
             </Text>
-            <SlippageTabs
+            <TransactionSettings
               rawSlippage={userSlippageTolerance}
               setRawSlippage={setUserslippageTolerance}
               deadline={deadline}
@@ -226,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
@@ -233,7 +221,10 @@ export default function SettingsTab() {
                         toggleExpertMode()
                         setShowConfirmation(false)
                       }
-                    : () => setShowConfirmation(true)
+                    : () => {
+                        toggle()
+                        setShowConfirmation(true)
+                      }
                 }
               />
             </RowBetween>

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/TokenLogo/index.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { isAddress } from '../../utils'
-import { useActiveWeb3React } from '../../hooks'
-import { WETH } from '@uniswap/sdk'
-
-import EthereumLogo from '../../assets/images/ethereum-logo.png'
-
-const getTokenLogoURL = address =>
-  `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
-const NO_LOGO_ADDRESSES: { [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};
-  height: ${({ size }) => size};
-  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
-  border-radius: 24px;
-`
-
-export default function TokenLogo({
-  address,
-  size = '24px',
-  ...rest
-}: {
-  address?: string
-  size?: string
-  style?: React.CSSProperties
-}) {
-  const [, refresh] = useState<number>(0)
-  const { chainId } = useActiveWeb3React()
-
-  let path = ''
-  const validated = isAddress(address)
-  // hard code to show ETH instead of WETH in UI
-  if (validated === WETH[chainId].address) {
-    return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
-  } else if (!NO_LOGO_ADDRESSES[address] && validated) {
-    path = getTokenLogoURL(validated)
-  } else {
-    return (
-      <Emoji {...rest} size={size}>
-        <span role="img" aria-label="Thinking">
-          🤔
-        </span>
-      </Emoji>
-    )
-  }
-
-  return (
-    <Image
-      {...rest}
-      // alt={address}
-      src={path}
-      size={size}
-      onError={() => {
-        NO_LOGO_ADDRESSES[address] = true
-        refresh(i => i + 1)
-      }}
-    />
-  )
-}

src/components/TokenWarningCard/index.tsx

@@ -1,138 +0,0 @@
-import { Token } from '@uniswap/sdk'
-import { transparentize } from 'polished'
-import React, { useMemo } from 'react'
-import styled from 'styled-components'
-import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { useActiveWeb3React } from '../../hooks'
-import { useAllTokens } from '../../hooks/Tokens'
-import { Field } from '../../state/swap/actions'
-import { useTokenWarningDismissal } from '../../state/user/hooks'
-import { ExternalLink, TYPE } from '../../theme'
-import { getEtherscanLink, isDefaultToken } from '../../utils'
-import PropsOfExcluding from '../../utils/props-of-excluding'
-import QuestionHelper from '../QuestionHelper'
-import TokenLogo from '../TokenLogo'
-
-const Wrapper = styled.div<{ error: boolean }>`
-  background: ${({ theme, error }) => transparentize(0.9, error ? theme.red1 : theme.yellow1)};
-  position: relative;
-  padding: 1rem;
-  /* border: 0.5px solid ${({ theme, error }) => transparentize(0.4, error ? theme.red1 : theme.yellow1)}; */
-  border-radius: 10px;
-  margin-bottom: 20px;
-  display: grid;
-  grid-template-rows: 14px auto auto;
-  grid-row-gap: 14px;
-`
-
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-  justify-items: flex-start;
-  & > * {
-    margin-right: 6px;
-  }
-`
-
-const CloseColor = styled(Close)`
-  color: #aeaeae;
-`
-
-const CloseIcon = styled.div`
-  position: absolute;
-  right: 1rem;
-  top: 12px;
-  &:hover {
-    cursor: pointer;
-    opacity: 0.6;
-  }
-
-  & > * {
-    height: 16px;
-    width: 16px;
-  }
-`
-
-const HELP_TEXT = `
-The Uniswap V2 smart contracts are designed to support any ERC20 token on Ethereum. Any token can be
-loaded into the interface by entering its Ethereum address into the search field or passing it as a URL
-parameter.
-`
-
-const DUPLICATE_NAME_HELP_TEXT = `${HELP_TEXT} This token has the same name or symbol as another token in your list.`
-
-interface TokenWarningCardProps extends PropsOfExcluding<typeof Wrapper, 'error'> {
-  token?: Token
-}
-
-export default function TokenWarningCard({ token, ...rest }: TokenWarningCardProps) {
-  const { chainId } = useActiveWeb3React()
-
-  const isDefault = isDefaultToken(token)
-
-  const tokenSymbol = token?.symbol?.toLowerCase() ?? ''
-  const tokenName = token?.name?.toLowerCase() ?? ''
-
-  const [dismissed, dismissTokenWarning] = useTokenWarningDismissal(chainId, token)
-
-  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 || dismissed) return null
-
-  return (
-    <Wrapper error={duplicateNameOrSymbol} {...rest}>
-      {duplicateNameOrSymbol ? null : (
-        <CloseIcon onClick={dismissTokenWarning}>
-          <CloseColor />
-        </CloseIcon>
-      )}
-      <Row>
-        <TYPE.subHeader>{duplicateNameOrSymbol ? 'Duplicate token name or symbol' : 'Imported token'}</TYPE.subHeader>
-        <QuestionHelper text={duplicateNameOrSymbol ? DUPLICATE_NAME_HELP_TEXT : HELP_TEXT} />
-      </Row>
-      <Row>
-        <TokenLogo address={token.address} />
-        <div style={{ fontWeight: 500 }}>
-          {token && token.name && token.symbol && token.name !== token.symbol
-            ? `${token.name} (${token.symbol})`
-            : token.name || token.symbol}
-        </div>
-        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'address')}>
-          (View on Etherscan)
-        </ExternalLink>
-      </Row>
-      <Row>
-        <TYPE.italic>Verify this is the correct token before making any transactions.</TYPE.italic>
-      </Row>
-    </Wrapper>
-  )
-}
-
-const WarningContainer = styled.div`
-  max-width: 420px;
-  width: 100%;
-  padding-left: 1rem;
-  padding-right: 1rem;
-`
-
-export function TokenWarningCards({ tokens }: { tokens: { [field in Field]?: Token } }) {
-  return (
-    <WarningContainer>
-      {Object.keys(tokens).map(field =>
-        tokens[field] ? <TokenWarningCard style={{ marginBottom: 14 }} key={field} token={tokens[field]} /> : null
-      )}
-    </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/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import Popover, { PopoverProps } from '../Popover'
 
@@ -16,3 +16,16 @@ interface TooltipProps extends Omit<PopoverProps, 'content'> {
 export default function Tooltip({ text, ...rest }: TooltipProps) {
   return <Popover content={<TooltipContainer>{text}</TooltipContainer>} {...rest} />
 }
+
+export function MouseoverTooltip({ children, ...rest }: Omit<TooltipProps, 'show'>) {
+  const [show, setShow] = useState(false)
+  const open = useCallback(() => setShow(true), [setShow])
+  const close = useCallback(() => setShow(false), [setShow])
+  return (
+    <Tooltip {...rest} show={show}>
+      <div onMouseEnter={open} onMouseLeave={close}>
+        {children}
+      </div>
+    </Tooltip>
+  )
+}

src/components/TransactionConfirmationModal/index.tsx

@@ -0,0 +1,197 @@
+import { ChainId } from '@uniswap/sdk'
+import React, { useContext } from 'react'
+import styled, { ThemeContext } from 'styled-components'
+import Modal from '../Modal'
+import { ExternalLink } from '../../theme'
+import { Text } from 'rebass'
+import { CloseIcon, Spinner } from '../../theme/components'
+import { RowBetween } from '../Row'
+import { AlertTriangle, ArrowUpCircle } from 'react-feather'
+import { ButtonPrimary } from '../Button'
+import { AutoColumn, ColumnCenter } from '../Column'
+import Circle from '../../assets/images/blue-loader.svg'
+
+import { getEtherscanLink } from '../../utils'
+import { useActiveWeb3React } from '../../hooks'
+
+const Wrapper = styled.div`
+  width: 100%;
+`
+const Section = styled(AutoColumn)`
+  padding: 24px;
+`
+
+const BottomSection = styled(Section)`
+  background-color: ${({ theme }) => theme.bg2};
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+`
+
+const ConfirmedIcon = styled(ColumnCenter)`
+  padding: 60px 0;
+`
+
+const CustomLightSpinner = styled(Spinner)<{ size: string }>`
+  height: ${({ size }) => size};
+  width: ${({ size }) => size};
+`
+
+function ConfirmationPendingContent({ onDismiss, pendingText }: { onDismiss: () => void; pendingText: string }) {
+  return (
+    <Wrapper>
+      <Section>
+        <RowBetween>
+          <div />
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+        <ConfirmedIcon>
+          <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
+        </ConfirmedIcon>
+        <AutoColumn gap="12px" justify={'center'}>
+          <Text fontWeight={500} fontSize={20}>
+            Waiting For Confirmation
+          </Text>
+          <AutoColumn gap="12px" justify={'center'}>
+            <Text fontWeight={600} fontSize={14} color="" textAlign="center">
+              {pendingText}
+            </Text>
+          </AutoColumn>
+          <Text fontSize={12} color="#565A69" textAlign="center">
+            Confirm this transaction in your wallet
+          </Text>
+        </AutoColumn>
+      </Section>
+    </Wrapper>
+  )
+}
+
+function TransactionSubmittedContent({
+  onDismiss,
+  chainId,
+  hash
+}: {
+  onDismiss: () => void
+  hash: string | undefined
+  chainId: ChainId
+}) {
+  const theme = useContext(ThemeContext)
+
+  return (
+    <Wrapper>
+      <Section>
+        <RowBetween>
+          <div />
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+        <ConfirmedIcon>
+          <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+        </ConfirmedIcon>
+        <AutoColumn gap="12px" justify={'center'}>
+          <Text fontWeight={500} fontSize={20}>
+            Transaction Submitted
+          </Text>
+
+          {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
+            </Text>
+          </ButtonPrimary>
+        </AutoColumn>
+      </Section>
+    </Wrapper>
+  )
+}
+
+export function ConfirmationModalContent({
+  title,
+  bottomContent,
+  onDismiss,
+  topContent
+}: {
+  title: string
+  onDismiss: () => void
+  topContent: () => React.ReactNode
+  bottomContent: () => React.ReactNode
+}) {
+  return (
+    <Wrapper>
+      <Section>
+        <RowBetween>
+          <Text fontWeight={500} fontSize={20}>
+            {title}
+          </Text>
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+        {topContent()}
+      </Section>
+      <BottomSection gap="12px">{bottomContent()}</BottomSection>
+    </Wrapper>
+  )
+}
+
+export function TransactionErrorContent({ message, onDismiss }: { message: string; onDismiss: () => void }) {
+  const theme = useContext(ThemeContext)
+  return (
+    <Wrapper>
+      <Section>
+        <RowBetween>
+          <Text fontWeight={500} fontSize={20}>
+            Error
+          </Text>
+          <CloseIcon onClick={onDismiss} />
+        </RowBetween>
+        <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
+          <AlertTriangle color={theme.red1} style={{ strokeWidth: 1.5 }} size={64} />
+          <Text fontWeight={500} fontSize={16} color={theme.red1} style={{ textAlign: 'center', width: '85%' }}>
+            {message}
+          </Text>
+        </AutoColumn>
+      </Section>
+      <BottomSection gap="12px">
+        <ButtonPrimary onClick={onDismiss}>Dismiss</ButtonPrimary>
+      </BottomSection>
+    </Wrapper>
+  )
+}
+
+interface ConfirmationModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  hash: string | undefined
+  content: () => React.ReactNode
+  attemptingTxn: boolean
+  pendingText: string
+}
+
+export default function TransactionConfirmationModal({
+  isOpen,
+  onDismiss,
+  attemptingTxn,
+  hash,
+  pendingText,
+  content
+}: ConfirmationModalProps) {
+  const { chainId } = useActiveWeb3React()
+
+  if (!chainId) return null
+
+  // confirmation screen
+  return (
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
+      {attemptingTxn ? (
+        <ConfirmationPendingContent onDismiss={onDismiss} pendingText={pendingText} />
+      ) : hash ? (
+        <TransactionSubmittedContent chainId={chainId} hash={hash} onDismiss={onDismiss} />
+      ) : (
+        content()
+      )}
+    </Modal>
+  )
+}

src/components/TransactionSettings/index.tsx

@@ -21,15 +21,15 @@ enum DeadlineError {
 const FancyButton = styled.button`
   color: ${({ theme }) => theme.text1};
   align-items: center;
-  min-width: 55px;
   height: 2rem;
   border-radius: 36px;
   font-size: 12px;
+  width: auto;
+  min-width: 3rem;
   border: 1px solid ${({ theme }) => theme.bg3};
   outline: none;
   background: ${({ theme }) => theme.bg1};
   :hover {
-    cursor: inherit;
     border: 1px solid ${({ theme }) => theme.bg4};
   }
   :focus {
@@ -48,9 +48,8 @@ const Option = styled(FancyButton)<{ active: boolean }>`
 
 const Input = styled.input`
   background: ${({ theme }) => theme.bg1};
-  flex-grow: 1;
-  font-size: 12px;
-  min-width: 20px;
+  font-size: 16px;
+  width: auto;
   outline: none;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -64,6 +63,7 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
+  flex: 1;
   border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.primary1}`};
   :hover {
     border: ${({ theme, active, warning }) =>
@@ -78,6 +78,13 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
   }
 `
 
+const SlippageEmojiContainer = styled.span`
+  color: #f3841e;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;  
+  `}
+`
+
 export interface SlippageTabsProps {
   rawSlippage: number
   setRawSlippage: (rawSlippage: number) => void
@@ -97,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 (
@@ -182,18 +185,21 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
             <RowBetween>
               {!!slippageInput &&
               (slippageError === SlippageError.RiskyLow || slippageError === SlippageError.RiskyHigh) ? (
-                <span role="img" aria-label="warning" style={{ color: '#F3841E' }}>
-                  ⚠️
-                </span>
+                <SlippageEmojiContainer>
+                  <span role="img" aria-label="warning">
+                    ⚠️
+                  </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' : ''}
               />
               %
@@ -229,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/TxnPopup/index.tsx

@@ -1,73 +0,0 @@
-import React, { useCallback, useContext, useState } from 'react'
-import { AlertCircle, CheckCircle } from 'react-feather'
-
-import styled, { ThemeContext } from 'styled-components'
-
-import { useActiveWeb3React } from '../../hooks'
-import useInterval from '../../hooks/useInterval'
-import { useRemovePopup } from '../../state/application/hooks'
-import { TYPE } from '../../theme'
-
-import { ExternalLink } from '../../theme/components'
-import { getEtherscanLink } from '../../utils'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
-
-const Fader = styled.div<{ count: number }>`
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  width: ${({ count }) => `calc(100% - (100% / ${150 / count}))`};
-  height: 2px;
-  background-color: ${({ theme }) => theme.bg3};
-  transition: width 100ms linear;
-`
-
-const delay = 100
-
-export default function TxnPopup({
-  hash,
-  success,
-  summary,
-  popKey
-}: {
-  hash: string
-  success?: boolean
-  summary?: string
-  popKey?: string
-}) {
-  const { chainId } = useActiveWeb3React()
-  const [count, setCount] = useState(1)
-
-  const [isRunning, setIsRunning] = useState(true)
-  const removePopup = useRemovePopup()
-
-  const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
-
-  useInterval(
-    () => {
-      count > 150 ? removeThisPopup() : setCount(count + 1)
-    },
-    isRunning ? delay : null
-  )
-
-  const handleMouseEnter = useCallback(() => setIsRunning(false), [])
-  const handleMouseLeave = useCallback(() => setIsRunning(true), [])
-
-  const theme = useContext(ThemeContext)
-
-  return (
-    <AutoRow onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      <div style={{ paddingRight: 16 }}>
-        {success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
-      </div>
-      <AutoColumn gap="8px">
-        <TYPE.body fontWeight={500}>
-          {summary ? summary : 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}
-        </TYPE.body>
-        <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
-      </AutoColumn>
-      <Fader count={count} />
-    </AutoRow>
-  )
-}

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
@@ -349,9 +351,7 @@ export default function WalletModal({
           {walletView !== WALLET_VIEWS.PENDING && (
             <Blurb>
               <span>New to Ethereum? &nbsp;</span>{' '}
-              <ExternalLink href="https://ethereum.org/use/#3-what-is-a-wallet-and-which-one-should-i-use">
-                Learn more about wallets
-              </ExternalLink>
+              <ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
             </Blurb>
           )}
         </ContentWrapper>
@@ -360,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,27 +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};
@@ -117,104 +119,123 @@ 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>
+)
+
+// 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
 }
 
-export default function Web3Status() {
+function Web3StatusInner() {
   const { t } = useTranslation()
-  const { active, account, connector, error } = useWeb3React()
-  const contextNetwork = useWeb3React(NetworkContextName)
+  const { account, connector, error } = useWeb3React()
 
-  const ENSName = useENSName(account)
+  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 hasPendingTransactions = !!pending.length
+  const hasSocks = useHasSocks()
+  const toggleWalletModal = useWalletModalToggle()
+
+  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>
+    )
+  }
+}
+
+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)
 
-  const hasPendingTransactions = !!pending.length
-
-  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>
-      )
-    }
-  }
-
-  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>
-          ) : (
-            <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>
-      )
-    }
-  }
-
   if (!contextNetwork.active && !active) {
     return null
   }
 
   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/AdvancedSwapDetails.tsx

@@ -31,8 +31,10 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag
           <RowFixed>
             <TYPE.black color={theme.text1} fontSize={14}>
               {isExactIn
-                ? `${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4)} ${trade.outputAmount.token.symbol}` ?? '-'
-                : `${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4)} ${trade.inputAmount.token.symbol}` ?? '-'}
+                ? `${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4)} ${trade.outputAmount.currency.symbol}` ??
+                  '-'
+                : `${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4)} ${trade.inputAmount.currency.symbol}` ??
+                  '-'}
             </TYPE.black>
           </RowFixed>
         </RowBetween>
@@ -54,7 +56,7 @@ function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippag
             <QuestionHelper text="A portion of each trade (0.30%) goes to liquidity providers as a protocol incentive." />
           </RowFixed>
           <TYPE.black fontSize={14} color={theme.text1}>
-            {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.token.symbol}` : '-'}
+            {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
           </TYPE.black>
         </RowBetween>
       </AutoColumn>
@@ -71,23 +73,27 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
 
   const [allowedSlippage] = useUserSlippageTolerance()
 
-  const showRoute = trade?.route?.path?.length > 2
+  const showRoute = Boolean(trade && trade.route.path.length > 2)
 
   return (
     <AutoColumn gap="md">
-      {trade && <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />}
-      {showRoute && (
+      {trade && (
         <>
-          <SectionBreak />
-          <AutoColumn style={{ padding: '0 24px' }}>
-            <RowFixed>
-              <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
-                Route
-              </TYPE.black>
-              <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
-            </RowFixed>
-            <SwapRoute trade={trade} />
-          </AutoColumn>
+          <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />
+          {showRoute && (
+            <>
+              <SectionBreak />
+              <AutoColumn style={{ padding: '0 24px' }}>
+                <RowFixed>
+                  <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+                    Route
+                  </TYPE.black>
+                  <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
+                </RowFixed>
+                <SwapRoute trade={trade} />
+              </AutoColumn>
+            </>
+          )}
         </>
       )}
     </AutoColumn>

src/components/swap/AdvancedSwapDetailsDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import useLast from '../../hooks/useLast'
+import { useLastTruthy } from '../../hooks/useLast'
 import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDetails'
 
 const AdvancedDetailsFooter = styled.div<{ show: boolean }>`
@@ -20,11 +20,11 @@ const AdvancedDetailsFooter = styled.div<{ show: boolean }>`
 `
 
 export default function AdvancedSwapDetailsDropdown({ trade, ...rest }: AdvancedSwapDetailsProps) {
-  const lastTrade = useLast(trade)
+  const lastTrade = useLastTruthy(trade)
 
   return (
     <AdvancedDetailsFooter show={Boolean(trade)}>
-      <AdvancedSwapDetails {...rest} trade={lastTrade} />
+      <AdvancedSwapDetails {...rest} trade={trade ?? lastTrade ?? undefined} />
     </AdvancedDetailsFooter>
   )
 }

src/components/swap/ConfirmSwapModal.tsx

@@ -0,0 +1,109 @@
+import { currencyEquals, Trade } from '@uniswap/sdk'
+import React, { useCallback, useMemo } from 'react'
+import TransactionConfirmationModal, {
+  ConfirmationModalContent,
+  TransactionErrorContent
+} from '../TransactionConfirmationModal'
+import SwapModalFooter from './SwapModalFooter'
+import SwapModalHeader from './SwapModalHeader'
+
+/**
+ * Returns true if the trade requires a confirmation of details before we can submit it
+ * @param tradeA trade A
+ * @param tradeB trade B
+ */
+function tradeMeaningfullyDiffers(tradeA: Trade, tradeB: Trade): boolean {
+  return (
+    tradeA.tradeType !== tradeB.tradeType ||
+    !currencyEquals(tradeA.inputAmount.currency, tradeB.inputAmount.currency) ||
+    !tradeA.inputAmount.equalTo(tradeB.inputAmount) ||
+    !currencyEquals(tradeA.outputAmount.currency, tradeB.outputAmount.currency) ||
+    !tradeA.outputAmount.equalTo(tradeB.outputAmount)
+  )
+}
+
+export default function ConfirmSwapModal({
+  trade,
+  originalTrade,
+  onAcceptChanges,
+  allowedSlippage,
+  onConfirm,
+  onDismiss,
+  recipient,
+  swapErrorMessage,
+  isOpen,
+  attemptingTxn,
+  txHash
+}: {
+  isOpen: boolean
+  trade: Trade | undefined
+  originalTrade: Trade | undefined
+  attemptingTxn: boolean
+  txHash: string | undefined
+  recipient: string | null
+  allowedSlippage: number
+  onAcceptChanges: () => void
+  onConfirm: () => void
+  swapErrorMessage: string | undefined
+  onDismiss: () => void
+}) {
+  const showAcceptChanges = useMemo(
+    () => Boolean(trade && originalTrade && tradeMeaningfullyDiffers(trade, originalTrade)),
+    [originalTrade, trade]
+  )
+
+  const modalHeader = useCallback(() => {
+    return trade ? (
+      <SwapModalHeader
+        trade={trade}
+        allowedSlippage={allowedSlippage}
+        recipient={recipient}
+        showAcceptChanges={showAcceptChanges}
+        onAcceptChanges={onAcceptChanges}
+      />
+    ) : null
+  }, [allowedSlippage, onAcceptChanges, recipient, showAcceptChanges, trade])
+
+  const modalBottom = useCallback(() => {
+    return trade ? (
+      <SwapModalFooter
+        onConfirm={onConfirm}
+        trade={trade}
+        disabledConfirm={showAcceptChanges}
+        swapErrorMessage={swapErrorMessage}
+        allowedSlippage={allowedSlippage}
+      />
+    ) : null
+  }, [allowedSlippage, onConfirm, showAcceptChanges, swapErrorMessage, trade])
+
+  // text to show while loading
+  const pendingText = `Swapping ${trade?.inputAmount?.toSignificant(6)} ${
+    trade?.inputAmount?.currency?.symbol
+  } for ${trade?.outputAmount?.toSignificant(6)} ${trade?.outputAmount?.currency?.symbol}`
+
+  const confirmationContent = useCallback(
+    () =>
+      swapErrorMessage ? (
+        <TransactionErrorContent onDismiss={onDismiss} message={swapErrorMessage} />
+      ) : (
+        <ConfirmationModalContent
+          title="Confirm Swap"
+          onDismiss={onDismiss}
+          topContent={modalHeader}
+          bottomContent={modalBottom}
+        />
+      ),
+    [onDismiss, modalBottom, modalHeader, swapErrorMessage]
+  )
+
+  return (
+    <TransactionConfirmationModal
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      attemptingTxn={attemptingTxn}
+      hash={txHash}
+      content={confirmationContent}
+      pendingText={pendingText}
+    />
+  )
+}

src/components/swap/FormattedPriceImpact.tsx

@@ -4,10 +4,13 @@ import { ONE_BIPS } from '../../constants'
 import { warningSeverity } from '../../utils/prices'
 import { ErrorText } from './styleds'
 
+/**
+ * Formatted version of price impact text with warning colors
+ */
 export default function FormattedPriceImpact({ priceImpact }: { priceImpact?: Percent }) {
   return (
     <ErrorText fontWeight={500} fontSize={14} severity={warningSeverity(priceImpact)}>
-      {priceImpact?.lessThan(ONE_BIPS) ? '<0.01%' : `${priceImpact?.toFixed(2)}%` ?? '-'}
+      {priceImpact ? (priceImpact.lessThan(ONE_BIPS) ? '<0.01%' : `${priceImpact.toFixed(2)}%`) : '-'}
     </ErrorText>
   )
 }

src/components/swap/SwapModalFooter.tsx

@@ -1,46 +1,44 @@
-import { Percent, TokenAmount, Trade, TradeType } from '@uniswap/sdk'
-import React, { useContext } from 'react'
+import { Trade, TradeType } from '@uniswap/sdk'
+import React, { useContext, useMemo, useState } from 'react'
 import { Repeat } from 'react-feather'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
 import { TYPE } from '../../theme'
-import { formatExecutionPrice } from '../../utils/prices'
+import {
+  computeSlippageAdjustedAmounts,
+  computeTradePriceBreakdown,
+  formatExecutionPrice,
+  warningSeverity
+} from '../../utils/prices'
 import { ButtonError } from '../Button'
 import { AutoColumn } from '../Column'
 import QuestionHelper from '../QuestionHelper'
 import { AutoRow, RowBetween, RowFixed } from '../Row'
 import FormattedPriceImpact from './FormattedPriceImpact'
-import { StyledBalanceMaxMini } from './styleds'
+import { StyledBalanceMaxMini, SwapCallbackError } from './styleds'
 
 export default function SwapModalFooter({
   trade,
-  showInverted,
-  setShowInverted,
-  severity,
-  slippageAdjustedAmounts,
-  onSwap,
-  parsedAmounts,
-  realizedLPFee,
-  priceImpactWithoutFee,
-  confirmText
+  onConfirm,
+  allowedSlippage,
+  swapErrorMessage,
+  disabledConfirm
 }: {
-  trade?: Trade
-  showInverted: boolean
-  setShowInverted: (inverted: boolean) => void
-  severity: number
-  slippageAdjustedAmounts?: { [field in Field]?: TokenAmount }
-  onSwap: () => any
-  parsedAmounts?: { [field in Field]?: TokenAmount }
-  realizedLPFee?: TokenAmount
-  priceImpactWithoutFee?: Percent
-  confirmText: string
+  trade: Trade
+  allowedSlippage: number
+  onConfirm: () => void
+  swapErrorMessage: string | undefined
+  disabledConfirm: boolean
 }) {
+  const [showInverted, setShowInverted] = useState<boolean>(false)
   const theme = useContext(ThemeContext)
-
-  if (!trade) {
-    return null
-  }
+  const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
+    allowedSlippage,
+    trade
+  ])
+  const { priceImpactWithoutFee, realizedLPFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
+  const severity = warningSeverity(priceImpactWithoutFee)
 
   return (
     <>
@@ -71,23 +69,21 @@ export default function SwapModalFooter({
         <RowBetween>
           <RowFixed>
             <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
-              {trade?.tradeType === TradeType.EXACT_INPUT ? 'Minimum sent' : 'Maximum sold'}
+              {trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sold'}
             </TYPE.black>
             <QuestionHelper text="Your transaction will revert if there is a large, unfavorable price movement before it is confirmed." />
           </RowFixed>
           <RowFixed>
             <TYPE.black fontSize={14}>
-              {trade?.tradeType === TradeType.EXACT_INPUT
+              {trade.tradeType === TradeType.EXACT_INPUT
                 ? slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4) ?? '-'
                 : slippageAdjustedAmounts[Field.INPUT]?.toSignificant(4) ?? '-'}
             </TYPE.black>
-            {parsedAmounts[Field.OUTPUT] && parsedAmounts[Field.INPUT] && (
-              <TYPE.black fontSize={14} marginLeft={'4px'}>
-                {trade?.tradeType === TradeType.EXACT_INPUT
-                  ? parsedAmounts[Field.OUTPUT]?.token?.symbol
-                  : parsedAmounts[Field.INPUT]?.token?.symbol}
-              </TYPE.black>
-            )}
+            <TYPE.black fontSize={14} marginLeft={'4px'}>
+              {trade.tradeType === TradeType.EXACT_INPUT
+                ? trade.outputAmount.currency.symbol
+                : trade.inputAmount.currency.symbol}
+            </TYPE.black>
           </RowFixed>
         </RowBetween>
         <RowBetween>
@@ -107,17 +103,25 @@ export default function SwapModalFooter({
             <QuestionHelper text="A portion of each trade (0.30%) goes to liquidity providers as a protocol incentive." />
           </RowFixed>
           <TYPE.black fontSize={14}>
-            {realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade?.inputAmount?.token?.symbol : '-'}
+            {realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'}
           </TYPE.black>
         </RowBetween>
       </AutoColumn>
 
       <AutoRow>
-        <ButtonError onClick={onSwap} error={severity > 2} style={{ margin: '10px 0 0 0' }} id="confirm-swap-or-send">
+        <ButtonError
+          onClick={onConfirm}
+          disabled={disabledConfirm}
+          error={severity > 2}
+          style={{ margin: '10px 0 0 0' }}
+          id="confirm-swap-or-send"
+        >
           <Text fontSize={20} fontWeight={500}>
-            {confirmText}
+            {severity > 2 ? 'Swap Anyway' : 'Confirm Swap'}
           </Text>
         </ButtonError>
+
+        {swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
       </AutoRow>
     </>
   )

src/components/swap/SwapModalHeader.tsx

@@ -1,63 +1,107 @@
-import { Token, TokenAmount } from '@uniswap/sdk'
-import React, { useContext } from 'react'
-import { ArrowDown } from 'react-feather'
+import { Trade, TradeType } from '@uniswap/sdk'
+import React, { useContext, useMemo } from 'react'
+import { ArrowDown, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
 import { TYPE } from '../../theme'
+import { ButtonPrimary } from '../Button'
+import { isAddress, shortenAddress } from '../../utils'
+import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
 import { AutoColumn } from '../Column'
+import CurrencyLogo from '../CurrencyLogo'
 import { RowBetween, RowFixed } from '../Row'
-import TokenLogo from '../TokenLogo'
-import { TruncatedText } from './styleds'
+import { TruncatedText, SwapShowAcceptChanges } from './styleds'
 
 export default function SwapModalHeader({
-  tokens,
-  formattedAmounts,
-  slippageAdjustedAmounts,
-  priceImpactSeverity,
-  independentField
+  trade,
+  allowedSlippage,
+  recipient,
+  showAcceptChanges,
+  onAcceptChanges
 }: {
-  tokens: { [field in Field]?: Token }
-  formattedAmounts: { [field in Field]?: string }
-  slippageAdjustedAmounts: { [field in Field]?: TokenAmount }
-  priceImpactSeverity: number
-  independentField: Field
+  trade: Trade
+  allowedSlippage: number
+  recipient: string | null
+  showAcceptChanges: boolean
+  onAcceptChanges: () => void
 }) {
+  const slippageAdjustedAmounts = useMemo(() => computeSlippageAdjustedAmounts(trade, allowedSlippage), [
+    trade,
+    allowedSlippage
+  ])
+  const { priceImpactWithoutFee } = useMemo(() => computeTradePriceBreakdown(trade), [trade])
+  const priceImpactSeverity = warningSeverity(priceImpactWithoutFee)
+
   const theme = useContext(ThemeContext)
 
   return (
     <AutoColumn gap={'md'} style={{ marginTop: '20px' }}>
       <RowBetween align="flex-end">
-        <TruncatedText fontSize={24} fontWeight={500}>
-          {formattedAmounts[Field.INPUT]}
-        </TruncatedText>
-        <RowFixed gap="4px">
-          <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
+        <RowFixed gap={'0px'}>
+          <CurrencyLogo currency={trade.inputAmount.currency} size={'24px'} style={{ marginRight: '12px' }} />
+          <TruncatedText
+            fontSize={24}
+            fontWeight={500}
+            color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.primary1 : ''}
+          >
+            {trade.inputAmount.toSignificant(6)}
+          </TruncatedText>
+        </RowFixed>
+        <RowFixed gap={'0px'}>
           <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
-            {tokens[Field.INPUT]?.symbol}
+            {trade.inputAmount.currency.symbol}
           </Text>
         </RowFixed>
       </RowBetween>
       <RowFixed>
-        <ArrowDown size="16" color={theme.text2} />
+        <ArrowDown size="16" color={theme.text2} style={{ marginLeft: '4px', minWidth: '16px' }} />
       </RowFixed>
       <RowBetween align="flex-end">
-        <TruncatedText fontSize={24} fontWeight={500} color={priceImpactSeverity > 2 ? theme.red1 : ''}>
-          {formattedAmounts[Field.OUTPUT]}
-        </TruncatedText>
-        <RowFixed gap="4px">
-          <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
+        <RowFixed gap={'0px'}>
+          <CurrencyLogo currency={trade.outputAmount.currency} size={'24px'} style={{ marginRight: '12px' }} />
+          <TruncatedText
+            fontSize={24}
+            fontWeight={500}
+            color={
+              priceImpactSeverity > 2
+                ? theme.red1
+                : showAcceptChanges && trade.tradeType === TradeType.EXACT_INPUT
+                ? theme.primary1
+                : ''
+            }
+          >
+            {trade.outputAmount.toSignificant(6)}
+          </TruncatedText>
+        </RowFixed>
+        <RowFixed gap={'0px'}>
           <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
-            {tokens[Field.OUTPUT]?.symbol}
+            {trade.outputAmount.currency.symbol}
           </Text>
         </RowFixed>
       </RowBetween>
+      {showAcceptChanges ? (
+        <SwapShowAcceptChanges justify="flex-start" gap={'0px'}>
+          <RowBetween>
+            <RowFixed>
+              <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
+              <TYPE.main color={theme.primary1}> Price Updated</TYPE.main>
+            </RowFixed>
+            <ButtonPrimary
+              style={{ padding: '.5rem', width: 'fit-content', fontSize: '0.825rem', borderRadius: '12px' }}
+              onClick={onAcceptChanges}
+            >
+              Accept
+            </ButtonPrimary>
+          </RowBetween>
+        </SwapShowAcceptChanges>
+      ) : null}
       <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
-        {independentField === Field.INPUT ? (
+        {trade.tradeType === TradeType.EXACT_INPUT ? (
           <TYPE.italic textAlign="left" style={{ width: '100%' }}>
             {`Output is estimated. You will receive at least `}
             <b>
-              {slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(6)} {tokens[Field.OUTPUT]?.symbol}
+              {slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(6)} {trade.outputAmount.currency.symbol}
             </b>
             {' or the transaction will revert.'}
           </TYPE.italic>
@@ -65,12 +109,20 @@ export default function SwapModalHeader({
           <TYPE.italic textAlign="left" style={{ width: '100%' }}>
             {`Input is estimated. You will sell at most `}
             <b>
-              {slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} {tokens[Field.INPUT]?.symbol}
+              {slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} {trade.inputAmount.currency.symbol}
             </b>
             {' or the transaction will revert.'}
           </TYPE.italic>
         )}
       </AutoColumn>
+      {recipient !== null ? (
+        <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
+          <TYPE.main>
+            Output will be sent to{' '}
+            <b title={recipient}>{isAddress(recipient) ? shortenAddress(recipient) : recipient}</b>
+          </TYPE.main>
+        </AutoColumn>
+      ) : null}
     </AutoColumn>
   )
 }

src/components/swap/SwapRoute.tsx

@@ -4,7 +4,7 @@ import { ChevronRight } from 'react-feather'
 import { Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'
-import TokenLogo from '../TokenLogo'
+import CurrencyLogo from '../CurrencyLogo'
 
 export default memo(function SwapRoute({ trade }: { trade: Trade }) {
   const theme = useContext(ThemeContext)
@@ -24,7 +24,7 @@ export default memo(function SwapRoute({ trade }: { trade: Trade }) {
         return (
           <Fragment key={i}>
             <Flex my="0.5rem" alignItems="center" style={{ flexShrink: 0 }}>
-              <TokenLogo address={token.address} size="1.5rem" />
+              <CurrencyLogo currency={token} size="1.5rem" />
               <TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
                 {token.symbol}
               </TYPE.black>

src/components/swap/TradePrice.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Price, Token } from '@uniswap/sdk'
+import { Price } from '@uniswap/sdk'
 import { useContext } from 'react'
 import { Repeat } from 'react-feather'
 import { Text } from 'rebass'
@@ -8,21 +8,19 @@ import { StyledBalanceMaxMini } from './styleds'
 
 interface TradePriceProps {
   price?: Price
-  inputToken?: Token
-  outputToken?: Token
   showInverted: boolean
   setShowInverted: (showInverted: boolean) => void
 }
 
-export default function TradePrice({ price, inputToken, outputToken, 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(inputToken && outputToken)
+  const show = Boolean(price?.baseCurrency && price?.quoteCurrency)
   const label = showInverted
-    ? `${outputToken?.symbol} per ${inputToken?.symbol}`
-    : `${inputToken?.symbol} per ${outputToken?.symbol}`
+    ? `${price?.quoteCurrency?.symbol} per ${price?.baseCurrency?.symbol}`
+    : `${price?.baseCurrency?.symbol} per ${price?.quoteCurrency?.symbol}`
 
   return (
     <Text

src/components/swap/TransferModalHeader.tsx

@@ -1,55 +0,0 @@
-import { TokenAmount } from '@uniswap/sdk'
-import React from 'react'
-import { Text } from 'rebass'
-import { useActiveWeb3React } from '../../hooks'
-import { ExternalLink, TYPE } from '../../theme'
-import { getEtherscanLink } from '../../utils'
-import Copy from '../AccountDetails/Copy'
-import { AutoColumn } from '../Column'
-import { AutoRow, RowBetween } from '../Row'
-import TokenLogo from '../TokenLogo'
-
-export function TransferModalHeader({
-  recipient,
-  ENSName,
-  amount
-}: {
-  recipient: string
-  ENSName: string
-  amount: TokenAmount
-}) {
-  const { chainId } = useActiveWeb3React()
-  return (
-    <AutoColumn gap="lg" style={{ marginTop: '40px' }}>
-      <RowBetween>
-        <Text fontSize={36} fontWeight={500}>
-          {amount?.toSignificant(6)} {amount?.token?.symbol}
-        </Text>
-        <TokenLogo address={amount?.token?.address} size={'30px'} />
-      </RowBetween>
-      <TYPE.darkGray fontSize={20}>To</TYPE.darkGray>
-      {ENSName ? (
-        <AutoColumn gap="lg">
-          <TYPE.blue fontSize={36}>{ENSName}</TYPE.blue>
-          <AutoRow gap="10px">
-            <ExternalLink href={getEtherscanLink(chainId, ENSName, 'address')}>
-              <TYPE.blue fontSize={18}>
-                {recipient?.slice(0, 8)}...{recipient?.slice(34, 42)}↗
-              </TYPE.blue>
-            </ExternalLink>
-            <Copy toCopy={recipient} />
-          </AutoRow>
-        </AutoColumn>
-      ) : (
-        <AutoRow gap="10px">
-          <ExternalLink href={getEtherscanLink(chainId, recipient, 'address')}>
-            <TYPE.blue fontSize={36}>
-              {recipient?.slice(0, 6)}...{recipient?.slice(36, 42)}↗
-            </TYPE.blue>
-          </ExternalLink>
-          <Copy toCopy={recipient} />
-        </AutoRow>
-      )}
-    </AutoColumn>
-  )
-}

src/components/swap/confirmPriceImpactWithoutFee.ts

@@ -1,7 +1,11 @@
-// gathers additional user consent for a high price impact
 import { Percent } from '@uniswap/sdk'
 import { ALLOWED_PRICE_IMPACT_HIGH, PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN } from '../../constants'
 
+/**
+ * Given the price impact, get user confirmation.
+ *
+ * @param priceImpactWithoutFee price impact of the trade without the fee.
+ */
 export default function confirmPriceImpactWithoutFee(priceImpactWithoutFee: Percent): boolean {
   if (!priceImpactWithoutFee.lessThan(PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN)) {
     return (

src/components/swap/styleds.tsx

@@ -1,24 +1,26 @@
-import styled from 'styled-components'
-import { AutoColumn } from '../Column'
+import { transparentize } from 'polished'
+import React from 'react'
+import { AlertTriangle } from 'react-feather'
+import styled, { css } from 'styled-components'
 import { Text } from 'rebass'
-
-import NumericalInput from '../NumericalInput'
+import { AutoColumn } from '../Column'
 
 export const Wrapper = styled.div`
   position: relative;
 `
 
-export const ArrowWrapper = styled.div`
+export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   padding: 2px;
-  border-radius: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 
-  :hover {
-    cursor: pointer;
-    opacity: 0.8;
-  }
+  ${({ clickable }) =>
+    clickable
+      ? css`
+          :hover {
+            cursor: pointer;
+            opacity: 0.8;
+          }
+        `
+      : null}
 `
 
 export const SectionBreak = styled.div`
@@ -28,8 +30,7 @@ export const SectionBreak = styled.div`
 `
 
 export const BottomGrouping = styled.div`
-  margin-top: 12px;
-  position: relative;
+  margin-top: 1rem;
 `
 
 export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`
@@ -43,21 +44,6 @@ export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`
       : theme.green1};
 `
 
-export const InputGroup = styled(AutoColumn)`
-  position: relative;
-  padding: 40px 0 20px 0;
-`
-
-export const StyledNumerical = styled(NumericalInput)`
-  text-align: center;
-  font-size: 48px;
-  font-weight: 500px;
-  width: 100%;
-
-  ::placeholder {
-    color: ${({ theme }) => theme.text4};
-  }
-`
 export const StyledBalanceMaxMini = styled.button`
   height: 22px;
   width: 22px;
@@ -111,3 +97,51 @@ export const Dots = styled.span`
     }
   }
 `
+
+const SwapCallbackErrorInner = styled.div`
+  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.825rem;
+  width: 100%;
+  padding: 3rem 1.25rem 1rem 1rem;
+  margin-top: -2rem;
+  color: ${({ theme }) => theme.red1};
+  z-index: -1;
+  p {
+    padding: 0;
+    margin: 0;
+    font-weight: 500;
+  }
+`
+
+const SwapCallbackErrorInnerAlertTriangle = styled.div`
+  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  border-radius: 12px;
+  min-width: 48px;
+  height: 48px;
+`
+
+export function SwapCallbackError({ error }: { error: string }) {
+  return (
+    <SwapCallbackErrorInner>
+      <SwapCallbackErrorInnerAlertTriangle>
+        <AlertTriangle size={24} />
+      </SwapCallbackErrorInnerAlertTriangle>
+      <p>{error}</p>
+    </SwapCallbackErrorInner>
+  )
+}
+
+export const SwapShowAcceptChanges = styled(AutoColumn)`
+  background-color: ${({ theme }) => transparentize(0.9, theme.primary1)};
+  color: ${({ theme }) => theme.primary1};
+  padding: 0.5rem;
+  border-radius: 12px;
+  margin-top: 8px;
+`

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

@@ -22,19 +22,83 @@ class RequestError extends Error {
   }
 }
 
+interface BatchItem {
+  request: { jsonrpc: '2.0'; id: number; method: string; params: unknown }
+  resolve: (result: any) => void
+  reject: (error: Error) => void
+}
+
 class MiniRpcProvider implements AsyncSendable {
   public readonly isMetaMask: false = false
   public readonly chainId: number
   public readonly url: string
   public readonly host: string
   public readonly path: string
+  public readonly batchWaitTimeMs: number
 
-  constructor(chainId: number, url: string) {
+  private nextId = 1
+  private batchTimeoutId: ReturnType<typeof setTimeout> | null = null
+  private batch: BatchItem[] = []
+
+  constructor(chainId: number, url: string, batchWaitTimeMs?: number) {
     this.chainId = chainId
     this.url = url
     const parsed = new URL(url)
     this.host = parsed.host
     this.path = parsed.pathname
+    // how long to wait to batch calls
+    this.batchWaitTimeMs = batchWaitTimeMs ?? 50
+  }
+
+  public readonly clearBatch = async () => {
+    console.debug('Clearing batch', this.batch)
+    const batch = this.batch
+    this.batch = []
+    this.batchTimeoutId = null
+    let response: Response
+    try {
+      response = await fetch(this.url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify(batch.map(item => item.request))
+      })
+    } catch (error) {
+      batch.forEach(({ reject }) => reject(new Error('Failed to send batch call')))
+      return
+    }
+
+    if (!response.ok) {
+      batch.forEach(({ reject }) => reject(new RequestError(`${response.status}: ${response.statusText}`, -32000)))
+      return
+    }
+
+    let json
+    try {
+      json = await response.json()
+    } catch (error) {
+      batch.forEach(({ reject }) => reject(new Error('Failed to parse JSON response')))
+      return
+    }
+    const byKey = batch.reduce<{ [id: number]: BatchItem }>((memo, current) => {
+      memo[current.request.id] = current
+      return memo
+    }, {})
+    for (const result of json) {
+      const {
+        resolve,
+        reject,
+        request: { method }
+      } = byKey[result.id]
+      if (resolve && reject) {
+        if ('error' in result) {
+          reject(new RequestError(result?.error?.message, result?.error?.code, result?.error?.data))
+        } else if ('result' in result) {
+          resolve(result.result)
+        } else {
+          reject(new RequestError(`Received unexpected JSON-RPC response to ${method} request.`, -32000, result))
+        }
+      }
+    }
   }
 
   public readonly sendAsync = (
@@ -46,25 +110,30 @@ class MiniRpcProvider implements AsyncSendable {
       .catch(error => callback(error, null))
   }
 
-  public readonly request = async (method: string, params?: unknown[] | object): Promise<unknown> => {
-    const response = await fetch(this.url, {
-      method: 'POST',
-      body: JSON.stringify({
-        jsonrpc: '2.0',
-        id: 1,
-        method,
-        params
+  public readonly request = async (
+    method: string | { method: string; params: unknown[] },
+    params?: unknown[] | object
+  ): Promise<unknown> => {
+    if (typeof method !== 'string') {
+      return this.request(method.method, method.params)
+    }
+    if (method === 'eth_chainId') {
+      return `0x${this.chainId.toString(16)}`
+    }
+    const promise = new Promise((resolve, reject) => {
+      this.batch.push({
+        request: {
+          jsonrpc: '2.0',
+          id: this.nextId++,
+          method,
+          params
+        },
+        resolve,
+        reject
       })
     })
-    if (!response.ok) throw new RequestError(`${response.status}: ${response.statusText}`, -32000)
-    const body = await response.json()
-    if ('error' in body) {
-      throw new RequestError(body?.error?.message, body?.error?.code, body?.error?.data)
-    } else if ('result' in body) {
-      return body.result
-    } else {
-      throw new RequestError(`Received unexpected JSON-RPC response to ${method} request.`, -32000, body)
-    }
+    this.batchTimeoutId = this.batchTimeoutId ?? setTimeout(this.clearBatch, this.batchWaitTimeMs)
+    return promise
   }
 }
 
@@ -83,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'
@@ -6,19 +7,25 @@ import { PortisConnector } from '@web3-react/portis-connector'
 import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
 
-const POLLING_INTERVAL = 10000
 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]
 })
@@ -28,7 +35,7 @@ export const walletconnect = new WalletConnectConnector({
   rpc: { 1: NETWORK_URL },
   bridge: 'https://bridge.walletconnect.org',
   qrcode: true,
-  pollingInterval: POLLING_INTERVAL
+  pollingInterval: 15000
 })
 
 // mainnet only

src/connectors/tsconfig.json

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