longer wait between retries

* deleting some code first

* strict, some refactoring

* denser common bases

* more add liquidity refactoring

* add liquidity paths working

* show common bases in the token selects

* fix the ability to select duplicate tokens

* useless rename

* try to handle alllll the duplicate token edge cases

* think i got them all lol

* remove common bases header

* Revert "remove common bases header"

This reverts commit 6ac4565d

* fix and add integration tests

* make gap between rows smaller

* get integration tests actually running again

* try another format of the command, upgrade serve

* frozen lockfile on install

* try the cypress github action

* install cypress in ci

* remove redundant ignore-scripts command

* use a specific github commit for the pinata action

* fix a bug in the multicall reducer, improve token list rendering performance

* improve the enter key on the token search modal

* stop using history.push

* fix linting errors

* position card cleanup before updating to match mock

.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'
@@ -65,14 +60,14 @@ jobs:
           cidv0: ${{ steps.upload.outputs.hash }}
 
       - name: Update DNS with new IPFS hash
-        uses: uniswap/replace-vercel-dns-records@v1.0.0
+        env:
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
+          RECORD_DOMAIN: 'uniswap.org'
+          RECORD_NAME: '_dnslink.app'
+          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+        uses: textileio/cloudflare-update-dnslink@0fe7b7a1ffc865db3a4da9773f0f987447ad5848
         with:
-          domain: 'uniswap.org'
-          subdomain: '_dnslink.app'
-          record-type: 'TXT'
-          value: dnslink=/ipfs/${{ steps.upload.outputs.hash }}
-          token: ${{ secrets.VERCEL_TOKEN }}
-          team-name: 'uniswap'
+          cid: ${{ steps.upload.outputs.hash }}
 
       - name: Create GitHub Release
         id: create_release
@@ -87,9 +82,13 @@ jobs:
             - CIDv0: `${{ steps.upload.outputs.hash }}`
             - CIDv1: `${{ steps.convert_cidv0.outputs.cidv1 }}`
 
+            The latest release is always accessible via our alias to the Cloudflare IPFS gateway at [app.uniswap.org](https://app.uniswap.org).
+
+            You can also access the Uniswap Interface directly from an IPFS gateway.
             The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store your settings.
             **Beware** that other sites you access via the _same_ IPFS gateway can read and modify your settings on the Uniswap interface without your permission.
-            You can avoid this issue by using a subdomain IPFS gateway. The preferred gateway URLs below utilize the CIDv1 of the release in the subdomain, and are relatively safer.
+            You can avoid this issue by using a subdomain IPFS gateway, or our alias to the latest release at [app.uniswap.org](https://app.uniswap.org).
+            The preferred URLs below are safe to use to access this specific release.
 
             Preferred URLs:
             - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.dweb.link/

.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,9 @@ 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
       - run: yarn integration-test
 
   unit-tests:
@@ -48,7 +50,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 +72,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,11 @@ 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).
 
 ## Development
 
@@ -27,31 +28,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/integration/add-liquidity.test.ts

@@ -16,4 +16,29 @@ 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/ETH/token', () => {
+    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.url().should('contain', '/add/ETH/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+  })
+
+  it('redirects /add/token-WETH to /add/token/ETH', () => {
+    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85-0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.url().should('contain', '/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/ETH')
+  })
 })

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/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/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

@@ -40,4 +40,15 @@ describe('Swap', () => {
     cy.get('#swap-button').click()
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
+
+  it('add a recipient', () => {
+    cy.get('#add-recipient-button').click()
+    cy.get('#recipient').should('exist')
+  })
+
+  it('remove recipient', () => {
+    cy.get('#add-recipient-button').click()
+    cy.get('#remove-recipient-button').click()
+    cy.get('#recipient').should('not.exist')
+  })
 })

cypress/support/commands.js

@@ -69,13 +69,13 @@ 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)
       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,7 +1,7 @@
 {
   "name": "@uniswap/interface",
   "description": "Uniswap Interface",
-  "homepage": "https://uniswap.exchange",
+  "homepage": ".",
   "private": true,
   "devDependencies": {
     "@ethersproject/address": "^5.0.0-beta.134",
@@ -13,7 +13,7 @@
     "@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",
+    "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@reduxjs/toolkit": "^1.3.5",
@@ -38,7 +38,7 @@
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/portis-connector": "^6.0.9",
-    "@web3-react/walletconnect-connector": "^6.0.9",
+    "@web3-react/walletconnect-connector": "^6.1.1",
     "@web3-react/walletlink-connector": "^6.0.9",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
@@ -51,6 +51,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",
     "polished": "^3.3.2",
@@ -81,14 +82,10 @@
   "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/he.json

@@ -1,75 +0,0 @@
-{
-  "noWallet": "לא נמצא ארנק",
-  "wrongNetwork": "נבחרה רשת לא נכונה",
-  "switchNetwork": "{{ correctNetwork }} יש צורך לשנות את הרשת ל",
-  "installWeb3MobileBrowser": "יש צורך בארנק ווב3.0, תתקין מטאמאסק או ארנק דומה",
-  "installMetamask": " Metamask יש צורך להתקין תוסף מטאמאסק לדפדפן, חפשו בגוגל ",
-  "disconnected": "מנותק",
-  "swap": "המרה",
-  "send": "שליחה",
-  "pool": "להפקיד",
-  "betaWarning": "הפרויקט נמצא בשלב בטא, השתמשו באחריות",
-  "input": "מוכר",
-  "output": "אקבל",
-  "estimated": "הערכה",
-  "balance": "בארנק שלי {{ balanceInput }}",
-  "unlock": "שחרור נעילת ארנק",
-  "pending": "ממתין לאישור",
-  "selectToken": "בחרו את הטוקן להמרה",
-  "searchOrPaste": "הכניסו שם או כתובת של טוקן לחיפוש",
-  "noExchange": "לא מתאפשרת המרה",
-  "exchangeRate": "שער המרה",
-  "enterValueCont": "כדי להמשיך {{ missingCurrencyValue }} הזינו ",
-  "selectTokenCont": "בחרו טוקן כדי להמשיך",
-  "noLiquidity": "אין נזילות",
-  "unlockTokenCont": "יש צורך לאשר את הטוקן למסחר",
-  "transactionDetails": "פרטי הטרנזקציה",
-  "hideDetails": "הסתר פרטים נוספים",
-  "youAreSelling": "למכירה",
-  "orTransFail": "או שהטרנזקציה תיכשל",
-  "youWillReceive": "תוצר המרה מינימלי",
-  "youAreBuying": "קונה",
-  "itWillCost": "זה יעלה",
-  "insufficientBalance": "אין בחשבון מספיק מטבעות",
-  "inputNotValid": "קלט לא תקין",
-  "differentToken": "יש צורך בטוקנים שונים",
-  "noRecipient": "לא הוכנסה כתובת ארנק יעד",
-  "invalidRecipient": "לא הוכנסה כתובת תקינה",
-  "recipientAddress": "כתובת יעד",
-  "youAreSending": "כמות לשליחה",
-  "willReceive": "יתקבל לכל הפחות",
-  "to": "אל",
-  "addLiquidity": "להוספת נזילות למאגר",
-  "deposit": "הפקדה",
-  "currentPoolSize": "גודל מאגר הנזילות הכולל",
-  "yourPoolShare": "חלקך במאגר הנזילות",
-  "noZero": "אפס אינו ערך תקין",
-  "mustBeETH": "ETH חייב להופיע באחד מהצדדים",
-  "enterCurrencyOrLabelCont": "כדי להמשיך {{ inputCurrency }} או {{ label }} הכנס",
-  "youAreAdding": "מתווספים למאגר",
-  "and": "וגם",
-  "intoPool": "לתוך הנזילות",
-  "outPool": "מתוך",
-  "youWillMint": "יונפקו לכם",
-  "liquidityTokens": "טוקנים של נזילות",
-  "totalSupplyIs": "חלקך במאגר הנזילות",
-  "youAreSettingExRate": "שער ההמרה יקבע על ידך",
-  "totalSupplyIs0": "אין לך טוקנים של נזילות",
-  "tokenWorth": "שווי כל טוקן נזילות הינו",
-  "firstLiquidity": "את\ה הראשון\ה שמזרים נזילות למאגר",
-  "initialExchangeRate": "ושל האית'ר הינן בערך שווה {{ label }} תוודאו שההפקדה של הטוקן",
-  "removeLiquidity": "הוצאה של נזילות",
-  "poolTokens": "טוקנים של מאגר הנזילות",
-  "enterLabelCont": "כדי להמשיך {{ label }} הכנס ",
-  "youAreRemoving": "יוסרו",
-  "youWillRemove": "יוסרו",
-  "createExchange": "ליצירת זוג מסחר",
-  "invalidTokenAddress": "כתובת טוקן לא נכונה",
-  "exchangeExists": "{{ label }} כבר קיים זוג המרה עבור",
-  "invalidSymbol": "תו שגוי",
-  "invalidDecimals": "ספרות עשרוניות שגויות",
-  "tokenAddress": "כתובת הטוקן",
-  "label": "שם",
-  "decimals": "ספרות עשרויות",
-  "enterTokenCont": "הכניסו כתובת טוקן כדי להמשיך"
-}

public/locales/iw.json

@@ -56,7 +56,7 @@
   "youAreSettingExRate": "שער ההמרה יקבע על ידך",
   "totalSupplyIs0": "אין לך טוקנים של נזילות",
   "tokenWorth": "שווי כל טוקן נזילות הינו",
-  "firstLiquidity": "את\ה הראשון\ה שמזרים נזילות למאגר",
+  "firstLiquidity": "אתה הראשוןה שמזרים נזילות למאגר",
   "initialExchangeRate": "ושל האית'ר הינן בערך שווה {{ label }} תוודאו שההפקדה של הטוקן",
   "removeLiquidity": "הוצאה של נזילות",
   "poolTokens": "טוקנים של מאגר הנזילות",

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'
@@ -50,8 +50,7 @@ export default function Transaction({ hash }: { hash: string }) {
     <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/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;
@@ -64,120 +65,65 @@ const Input = styled.input<{ error?: boolean }>`
   }
 `
 
+interface Value {
+  address: string
+  name?: string
+}
+
 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 && (
+                <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

@@ -21,6 +21,7 @@ const Base = styled(RebassButton)<{
   outline: none;
   border: 1px solid transparent;
   color: white;
+  text-decoration: none;
   display: flex;
   justify-content: center;
   flex-wrap: nowrap;

src/components/CurrencyInputPanel/index.tsx

@@ -132,6 +132,7 @@ interface CurrencyInputPanelProps {
   showSendWithSwap?: boolean
   otherSelectedTokenAddress?: string | null
   id: string
+  showCommonBases?: boolean
 }
 
 export default function CurrencyInputPanel({
@@ -150,7 +151,8 @@ export default function CurrencyInputPanel({
   hideInput = false,
   showSendWithSwap = false,
   otherSelectedTokenAddress = null,
-  id
+  id,
+  showCommonBases
 }: CurrencyInputPanelProps) {
   const { t } = useTranslation()
 
@@ -247,6 +249,7 @@ export default function CurrencyInputPanel({
           hiddenToken={token?.address}
           otherSelectedTokenAddress={otherSelectedTokenAddress}
           otherSelectedText={field === Field.INPUT ? 'Selected as output' : 'Selected as input'}
+          showCommonBases={showCommonBases}
         />
       )}
     </InputPanel>

src/components/DoubleLogo/index.tsx

@@ -12,7 +12,7 @@ const TokenWrapper = styled.div<{ margin: boolean; sizeraw: number }>`
 interface DoubleTokenLogoProps {
   margin?: boolean
   size?: number
-  a0: string
+  a0?: string
   a1?: string
 }
 
@@ -27,7 +27,7 @@ const CoveredLogo = styled(TokenLogo)<{ sizeraw: number }>`
 export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }: DoubleTokenLogoProps) {
   return (
     <TokenWrapper sizeraw={size} margin={margin}>
-      <HigherLogo address={a0} size={size.toString() + 'px'} />
+      {a0 && <HigherLogo address={a0} size={size.toString() + 'px'} />}
       {a1 && <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size} />}
     </TokenWrapper>
   )

src/components/Footer/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Send, Sun, Moon } from 'react-feather'
-import { useDarkModeManager } from '../../state/user/hooks'
-
-import { ButtonSecondary } from '../Button'
-
-const FooterFrame = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  position: fixed;
-  right: 1rem;
-  bottom: 1rem;
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `};
-`
-
-export default function Footer() {
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
-
-  return (
-    <FooterFrame>
-      <form action="https://forms.gle/DaLuqvJsVhVaAM3J9" target="_blank">
-        <ButtonSecondary p="8px 12px">
-          <Send size={16} style={{ marginRight: '8px' }} /> Feedback
-        </ButtonSecondary>
-      </form>
-      <ButtonSecondary onClick={toggleDarkMode} p="8px 12px" ml="0.5rem" width="min-content">
-        {darkMode ? <Sun size={16} /> : <Moon size={16} />}
-      </ButtonSecondary>
-    </FooterFrame>
-  )
-}

src/components/Header/VersionSwitch.tsx

@@ -6,16 +6,16 @@ import useParsedQueryString from '../../hooks/useParsedQueryString'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
 
 const VersionLabel = styled.span<{ enabled: boolean }>`
-  padding: ${({ enabled }) => (enabled ? '0.15rem 0.5rem 0.16rem 0.45rem' : '0.15rem 0.5rem 0.16rem 0.35rem')};
-  border-radius: 14px;
+  padding: 0.35rem 0.6rem;
+  border-radius: 12px;
   background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-  color: ${({ theme, enabled }) => (enabled ? theme.white : theme.primary1)};
-  font-size: 0.825rem;
-  font-weight: 400;
+  color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
+  font-size: 1rem;
+  font-weight: ${({ enabled }) => (enabled ? '500' : '400')};
   :hover {
     user-select: ${({ enabled }) => (enabled ? 'none' : 'initial')};
     background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-    color: ${({ theme, enabled }) => (enabled ? theme.white : theme.primary3)};
+    color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
   }
 `
 
@@ -25,21 +25,21 @@ interface VersionToggleProps extends React.ComponentProps<typeof Link> {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const VersionToggle = styled(({ enabled, ...rest }: VersionToggleProps) => <Link {...rest} />)<VersionToggleProps>`
-  border-radius: 16px;
+  border-radius: 12px;
   opacity: ${({ enabled }) => (enabled ? 1 : 0.5)};
   cursor: ${({ enabled }) => (enabled ? 'pointer' : 'default')};
-  background: ${({ theme }) => theme.primary5};
-  border: 1px solid ${({ theme }) => theme.primary4};
+  background: ${({ theme }) => theme.bg3};
   color: ${({ theme }) => theme.primary1};
   display: flex;
   width: fit-content;
+  margin-left: 0.5rem;
   text-decoration: none;
   :hover {
     text-decoration: none;
   }
 `
 
-export function VersionSwitch() {
+export default function VersionSwitch() {
   const version = useToggledVersion()
   const location = useLocation()
   const query = useParsedQueryString()

src/components/Header/index.tsx

@@ -1,7 +1,6 @@
 import { ChainId, WETH } 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'
@@ -14,15 +13,13 @@ import { useActiveWeb3React } from '../../hooks'
 import { useDarkModeManager } from '../../state/user/hooks'
 import { useTokenBalanceTreatingWETHasETH } 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'
 
 import Row, { RowBetween } from '../Row'
 import Web3Status from '../Web3Status'
-import { VersionSwitch } from './VersionSwitch'
+import VersionSwitch from './VersionSwitch'
 
 const HeaderFrame = styled.div`
   display: flex;
@@ -45,7 +42,16 @@ const HeaderElement = styled.div`
   align-items: center;
 `
 
-const Title = styled.div`
+const HeaderElementWrap = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin-top: 0.5rem;
+`};
+`
+
+const Title = styled.a`
   display: flex;
   align-items: center;
   pointer-events: auto;
@@ -70,6 +76,7 @@ const AccountElement = styled.div<{ active: boolean }>`
   background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
   border-radius: 12px;
   white-space: nowrap;
+  width: 100%;
 
   :focus {
     border: 1px solid blue;
@@ -80,10 +87,7 @@ const TestnetWrapper = styled.div`
   white-space: nowrap;
   width: fit-content;
   margin-left: 10px;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
+  pointer-events: auto;
 `
 
 const NetworkCard = styled(YellowCard)`
@@ -93,29 +97,31 @@ 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);
   }
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    img { 
+      width: 4.5rem;
+    }
+  `};
 `
 
-const MigrateBanner = styled(AutoColumn)`
-  width: 100%;
-  padding: 12px 0;
+const HeaderControls = styled.div`
   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};
-  }
+  flex-direction: row;
+  align-items: center;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 0;
+    flex-direction: column;
+    align-items: flex-end;
+  `};
+`
+
+const BalanceText = styled(Text)`
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
     display: none;
   `};
 `
@@ -128,12 +134,6 @@ const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
   [ChainId.KOVAN]: 'Kovan'
 }
 
-const BalanceWrapper = styled.div`
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
-  `};
-`
-
 export default function Header() {
   const { account, chainId } = useActiveWeb3React()
 
@@ -142,54 +142,37 @@ export default function Header() {
 
   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 padding="1rem">
+      <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>
-          <TestnetWrapper style={{ pointerEvents: 'auto' }}>{!isMobile && <VersionSwitch />}</TestnetWrapper>
         </HeaderElement>
-        <HeaderElement>
-          <TestnetWrapper>
-            {!isMobile && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
-          </TestnetWrapper>
-          <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
-            <BalanceWrapper>
+        <HeaderControls>
+          <HeaderElement>
+            <TestnetWrapper>
+              {!isMobile && 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}
-            </BalanceWrapper>
-            <Web3Status />
-          </AccountElement>
-          <Settings />
-          <Menu />
-        </HeaderElement>
+              <Web3Status />
+            </AccountElement>
+          </HeaderElement>
+          <HeaderElementWrap>
+            <VersionSwitch />
+            <Settings />
+            <Menu />
+          </HeaderElementWrap>
+        </HeaderControls>
       </RowBetween>
     </HeaderFrame>
   )

src/components/Menu/index.tsx

@@ -77,7 +77,7 @@ 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>()
@@ -121,7 +121,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

@@ -112,17 +112,10 @@ export default function Modal({
   const [{ y }, set] = useSpring(() => ({ y: 0, config: { mass: 1, tension: 210, friction: 20 } }))
   const bind = useGesture({
     onDrag: state => {
-      let velocity = state.velocity
-      if (velocity < 1) {
-        velocity = 1
-      }
-      if (velocity > 8) {
-        velocity = 8
-      }
       set({
         y: state.down ? state.movement[1] : 0
       })
-      if (velocity > 3 && state.direction[1] > 0) {
+      if (state.velocity > 3 && state.direction[1] > 0) {
         onDismiss()
       }
     }

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,68 @@ 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 CreatePoolTabs() {
+  return (
+    <Tabs>
+      <RowBetween style={{ padding: '1rem' }}>
+        <HistoryLink to="/pool">
+          <StyledArrowLeft />
+        </HistoryLink>
+        <ActiveText>Create Pool</ActiveText>
+        <QuestionHelper text={'Use this interface to create a new pool.'} />
+      </RowBetween>
+    </Tabs>
+  )
+}
+
+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/Popover/index.tsx

@@ -2,36 +2,16 @@ import { Placement } from '@popperjs/core'
 import { transparentize } from 'polished'
 import React, { useState } from 'react'
 import { usePopper } from 'react-popper'
-import styled, { keyframes } from 'styled-components'
+import styled from 'styled-components'
 import useInterval from '../../hooks/useInterval'
 import Portal from '@reach/portal'
 
-const fadeIn = keyframes`
-  from {
-    opacity : 0;
-  }
-
-  to {
-    opacity : 1;
-  }
-`
-
-const fadeOut = keyframes`
-  from {
-    opacity : 1;
-  }
-
-  to {
-    opacity : 0;
-  }
-`
-
 const PopoverContainer = styled.div<{ show: boolean }>`
   z-index: 9999;
 
-  visibility: ${props => (!props.show ? 'hidden' : 'visible')};
-  animation: ${props => (!props.show ? fadeOut : fadeIn)} 150ms linear;
-  transition: visibility 150ms linear;
+  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};

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'
@@ -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()
@@ -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,18 +1,19 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { darken } from 'polished'
-import { RouteComponentProps, withRouter } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { Percent, Pair, JSBI } from '@uniswap/sdk'
 
 import { useActiveWeb3React } from '../../hooks'
 import { useTotalSupply } from '../../data/TotalSupply'
+import { currencyId } from '../../pages/AddLiquidity/currencyId'
 import { useTokenBalance } from '../../state/wallet/hooks'
 
 import Card, { GreyCard } from '../Card'
 import TokenLogo from '../TokenLogo'
 import DoubleLogo from '../DoubleLogo'
 import { Text } from 'rebass'
-import { ExternalLink } from '../../theme/components'
+import { ExternalLink } from '../../theme'
 import { AutoColumn } from '../Column'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { ButtonSecondary } from '../Button'
@@ -30,13 +31,97 @@ export const HoverCard = styled(Card)`
   }
 `
 
-interface PositionCardProps extends RouteComponentProps<{}> {
-  pair: Pair
-  minimal?: boolean
+interface PositionCardProps {
+  pair: Pair | undefined | null
   border?: string
 }
 
-function PositionCard({ pair, history, border, minimal = false }: PositionCardProps) {
+export function MinimalPositionCard({ pair, border }: PositionCardProps) {
+  const { account } = useActiveWeb3React()
+
+  const token0 = pair?.token0
+  const token1 = pair?.token1
+
+  const [showMore, setShowMore] = useState(false)
+
+  const userPoolBalance = useTokenBalance(account, 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(token0, totalPoolTokens, userPoolBalance, false),
+          pair.getLiquidityValue(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>
+                <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>
+      )}
+    </>
+  )
+}
+
+export default function FullPositionCard({ pair, border }: PositionCardProps) {
   const { account } = useActiveWeb3React()
 
   const token0 = pair?.token0
@@ -64,168 +149,94 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
         ]
       : [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>
+            <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 fontWeight={500} fontSize={16}>
-                    Your position
+                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    {token0Deposited?.toSignificant(6)}
                   </Text>
+                  <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address} />
                 </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 {token1?.symbol}:
+                </Text>
+              </RowFixed>
+              {token1Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500}>
-                    Pooled {token1?.symbol}:
+                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    {token1Deposited?.toSignificant(6)}
                   </Text>
+                  <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address} />
                 </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(token0)}/${currencyId(token1)}`} width="48%">
+                Add
+              </ButtonSecondary>
+              <ButtonSecondary as={Link} width="48%" to={`/remove/${token0?.address}-${token1?.address}`}>
+                Remove
+              </ButtonSecondary>
+            </RowBetween>
+          </AutoColumn>
+        )}
+      </AutoColumn>
+    </HoverCard>
+  )
 }
-
-export default withRouter(PositionCard)

src/components/SearchModal/CommonBases.tsx

@@ -1,41 +1,56 @@
 import React from 'react'
 import { Text } from 'rebass'
-import { Token } from '@uniswap/sdk'
+import { ChainId, 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'
+
+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
 }: {
-  chainId: number
+  chainId: ChainId
   selectedTokenAddress: string
   onSelect: (tokenAddress: string) => 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">
+        {(SUGGESTED_BASES[chainId as ChainId] ?? []).map((token: Token) => {
           return (
             <BaseWrapper
-              gap="6px"
               onClick={() => selectedTokenAddress !== token.address && onSelect(token.address)}
               disable={selectedTokenAddress === token.address}
               key={token.address}
             >
-              <TokenLogo address={token.address} />
+              <TokenLogo address={token.address} style={{ marginRight: 8 }} />
               <Text fontWeight={500} fontSize={16}>
                 {token.symbol}
               </Text>

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,5 +1,5 @@
 import { JSBI, Token, TokenAmount } from '@uniswap/sdk'
-import React, { useContext } from 'react'
+import React, { CSSProperties, memo, useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
@@ -40,6 +40,103 @@ export default function TokenList({
   const addToken = useAddUserToken()
   const removeToken = useRemoveUserAddedToken()
 
+  const TokenRow = useMemo(() => {
+    return memo(function TokenRow({ index, style }: { index: number; style: CSSProperties }) {
+      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>
+      )
+    })
+  }, [
+    account,
+    addToken,
+    allTokenBalances,
+    allTokens,
+    chainId,
+    onTokenSelect,
+    otherSelectedText,
+    otherToken,
+    removeToken,
+    selectedToken,
+    showSendWithSwap,
+    theme.primary1,
+    tokens
+  ])
+
   if (tokens.length === 0) {
     return <ModalInfo>{t('noToken')}</ModalInfo>
   }
@@ -53,86 +150,7 @@ export default function TokenList({
       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>
-        )
-      }}
+      {TokenRow}
     </FixedSizeList>
   )
 }

src/components/SearchModal/TokenSearchModal.tsx

@@ -1,5 +1,5 @@
 import { Token } from '@uniswap/sdk'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { KeyboardEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useTranslation } from 'react-i18next'
 import { Text } from 'rebass'
@@ -7,8 +7,9 @@ import { ThemeContext } from 'styled-components'
 import Card from '../../components/Card'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens, useToken } from '../../hooks/Tokens'
+import useInterval from '../../hooks/useInterval'
 import { useAllTokenBalancesTreatingWETHasETH, useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
-import { CloseIcon, LinkStyledButton } from '../../theme/components'
+import { CloseIcon, LinkStyledButton } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'
 import Modal from '../Modal'
@@ -110,10 +111,31 @@ export default function TokenSearchModal({
 
   const openTooltip = useCallback(() => {
     setTooltipOpen(true)
-    inputRef.current?.focus()
   }, [setTooltipOpen])
   const closeTooltip = useCallback(() => setTooltipOpen(false), [setTooltipOpen])
 
+  useInterval(
+    () => {
+      setTooltipOpen(false)
+    },
+    tooltipOpen ? 4000 : null,
+    false
+  )
+
+  const handleEnter = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && filteredSortedTokens.length > 0) {
+        if (
+          filteredSortedTokens[0].symbol.toLowerCase() === searchQuery.trim().toLowerCase() ||
+          filteredSortedTokens.length === 1
+        ) {
+          handleTokenSelect(filteredSortedTokens[0].address)
+        }
+      }
+    },
+    [filteredSortedTokens, handleTokenSelect, searchQuery]
+  )
+
   return (
     <Modal
       isOpen={isOpen}
@@ -123,7 +145,7 @@ export default function TokenSearchModal({
       minHeight={70}
     >
       <Column style={{ width: '100%' }}>
-        <PaddedColumn gap="20px">
+        <PaddedColumn gap="14px">
           <RowBetween>
             <Text fontWeight={500} fontSize={16}>
               Select a token
@@ -146,7 +168,9 @@ export default function TokenSearchModal({
               value={searchQuery}
               ref={inputRef}
               onChange={handleInput}
+              onFocus={closeTooltip}
               onBlur={closeTooltip}
+              onKeyDown={handleEnter}
             />
           </Tooltip>
           {showCommonBases && (

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}
@@ -61,21 +61,6 @@ export const MenuItem = styled(RowBetween)`
   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 {

src/components/Settings/index.tsx

@@ -156,7 +156,7 @@ export default function SettingsTab() {
 
   return (
     <StyledMenu ref={node}>
-      <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)}>
+      <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)} maxHeight={100}>
         <ModalContentWrapper>
           <AutoColumn gap="lg">
             <RowBetween style={{ padding: '0 2rem' }}>
@@ -233,7 +233,10 @@ export default function SettingsTab() {
                         toggleExpertMode()
                         setShowConfirmation(false)
                       }
-                    : () => setShowConfirmation(true)
+                    : () => {
+                        toggle()
+                        setShowConfirmation(true)
+                      }
                 }
               />
             </RowBetween>

src/components/SlippageTabs/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
@@ -182,9 +189,11 @@ 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}
               <Input
                 ref={inputRef}

src/components/TokenLogo/index.tsx

@@ -6,9 +6,9 @@ import { WETH } from '@uniswap/sdk'
 
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 
-const TOKEN_ICON_API = address =>
+const getTokenLogoURL = address =>
   `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
-const BAD_IMAGES = {}
+const NO_LOGO_ADDRESSES: { [tokenAddress: string]: true } = {}
 
 const Image = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -44,20 +44,16 @@ export default function TokenLogo({
   size?: string
   style?: React.CSSProperties
 }) {
-  const [error, setError] = useState(false)
+  const [, refresh] = useState<number>(0)
   const { chainId } = useActiveWeb3React()
 
-  // mock rinkeby DAI
-  if (chainId === 4 && address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
-    address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'
-  }
-
   let path = ''
+  const validated = isAddress(address)
   // hard code to show ETH instead of WETH in UI
-  if (address === WETH[chainId].address) {
+  if (validated === WETH[chainId].address) {
     return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
-  } else if (!error && !BAD_IMAGES[address] && isAddress(address)) {
-    path = TOKEN_ICON_API(address)
+  } else if (!NO_LOGO_ADDRESSES[address] && validated) {
+    path = getTokenLogoURL(validated)
   } else {
     return (
       <Emoji {...rest} size={size}>
@@ -75,8 +71,8 @@ export default function TokenLogo({
       src={path}
       size={size}
       onError={() => {
-        BAD_IMAGES[address] = true
-        setError(true)
+        NO_LOGO_ADDRESSES[address] = true
+        refresh(i => i + 1)
       }}
     />
   )

src/components/TokenWarningCard/index.tsx

@@ -109,7 +109,7 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
             ? `${token.name} (${token.symbol})`
             : token.name || token.symbol}
         </div>
-        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'address')}>
+        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'token')}>
           (View on Etherscan)
         </ExternalLink>
       </Row>

src/components/TxnPopup/index.tsx

@@ -62,9 +62,7 @@ export default function TxnPopup({
         {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>
+        <TYPE.body fontWeight={500}>{summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}</TYPE.body>
         <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
       </AutoColumn>
       <Fader count={count} />

src/components/WalletModal/Option.tsx

@@ -15,7 +15,7 @@ const InfoCard = styled.button<{ active?: boolean }>`
   border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg3)};
 `
 
-const OptionCard = styled(InfoCard)`
+const OptionCard = styled(InfoCard as any)`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -30,7 +30,7 @@ const OptionCardLeft = styled.div`
   height: 100%;
 `
 
-const OptionCardClickable = styled(OptionCard)<{ clickable?: boolean }>`
+const OptionCardClickable = styled(OptionCard as any)<{ clickable?: boolean }>`
   margin-top: 0;
   &:hover {
     cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
@@ -114,7 +114,6 @@ export default function Option({
     <OptionCardClickable id={id} onClick={onClick} clickable={clickable && !active} active={active}>
       <OptionCardLeft>
         <HeaderText color={color}>
-          {' '}
           {active ? (
             <CircleWrapper>
               <GreenCircle>

src/components/WalletModal/PendingView.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Option from './Option'
 import { SUPPORTED_WALLETS } from '../../constants'
-import WalletConnectData from './WalletConnectData'
-import { walletconnect, injected } from '../../connectors'
+import { injected } from '../../connectors'
 import { darken } from 'polished'
 import Loader from '../Loader'
 
@@ -65,28 +64,22 @@ const LoadingWrapper = styled.div`
 `
 
 export default function PendingView({
-  uri = '',
-  size,
   connector,
   error = false,
   setPendingError,
   tryActivation
 }: {
-  uri?: string
-  size?: number
   connector?: AbstractConnector
   error?: boolean
   setPendingError: (error: boolean) => void
   tryActivation: (connector: AbstractConnector) => void
 }) {
-  const isMetamask = window.ethereum && window.ethereum.isMetaMask
+  const isMetamask = window?.ethereum?.isMetaMask
 
   return (
     <PendingSection>
-      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
       <LoadingMessage error={error}>
         <LoadingWrapper>
-          {!error && <StyledLoader />}
           {error ? (
             <ErrorGroup>
               <div>Error connecting.</div>
@@ -99,10 +92,11 @@ export default function PendingView({
                 Try Again
               </ErrorButton>
             </ErrorGroup>
-          ) : connector === walletconnect ? (
-            'Scan QR code with a compatible wallet...'
           ) : (
-            'Initializing...'
+            <>
+              <StyledLoader />
+              Initializing...
+            </>
           )}
         </LoadingWrapper>
       </LoadingMessage>

src/components/WalletModal/WalletConnectData.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import QRCode from 'qrcode.react'
-
-const QRCodeWrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  margin-bottom: 20px;
-`
-
-const StyledQRCode = styled(QRCode)`
-  border: 3px solid white;
-`
-
-interface WalletConnectDataProps {
-  uri?: string
-  size: number
-}
-
-export default function WalletConnectData({ uri = '', size }: WalletConnectDataProps) {
-  return <QRCodeWrapper>{uri && <StyledQRCode size={size} value={uri} />}</QRCodeWrapper>
-}

src/components/WalletModal/index.tsx

@@ -3,7 +3,6 @@ import ReactGA from 'react-ga'
 import styled from 'styled-components'
 import { isMobile } from 'react-device-detect'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
-import { URI_AVAILABLE } from '@web3-react/walletconnect-connector'
 import usePrevious from '../../hooks/usePrevious'
 import { useWalletModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 
@@ -15,8 +14,9 @@ import { SUPPORTED_WALLETS } from '../../constants'
 import { ExternalLink } from '../../theme'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, walletconnect, fortmatic, portis } from '../../connectors'
+import { injected, fortmatic, portis } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
+import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 
 const CloseIcon = styled.div`
   position: absolute;
@@ -152,19 +152,6 @@ export default function WalletModal({
     }
   }, [walletModalOpen])
 
-  // set up uri listener for walletconnect
-  const [uri, setUri] = useState()
-  useEffect(() => {
-    const activateWC = uri => {
-      setUri(uri)
-      // setWalletView(WALLET_VIEWS.PENDING)
-    }
-    walletconnect.on(URI_AVAILABLE, activateWC)
-    return () => {
-      walletconnect.off(URI_AVAILABLE, activateWC)
-    }
-  }, [])
-
   // close modal when a connection is successful
   const activePrevious = usePrevious(active)
   const connectorPrevious = usePrevious(connector)
@@ -190,6 +177,12 @@ export default function WalletModal({
     })
     setPendingWallet(connector) // set wallet for pending view
     setWalletView(WALLET_VIEWS.PENDING)
+
+    // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
+    if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) {
+      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
@@ -345,8 +338,6 @@ export default function WalletModal({
         <ContentWrapper>
           {walletView === WALLET_VIEWS.PENDING ? (
             <PendingView
-              uri={uri}
-              size={220}
               connector={pendingWallet}
               error={pendingError}
               setPendingError={setPendingError}

src/components/Web3Status/index.tsx

@@ -5,6 +5,7 @@ import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
 import { darken, lighten } from 'polished'
 import { Activity } from 'react-feather'
 import useENSName from '../../hooks/useENSName'
+import { useHasSocks } from '../../hooks/useSocksBalance'
 import { useWalletModalToggle } from '../../state/application/hooks'
 import { TransactionDetails } from '../../state/transactions/reducer'
 
@@ -130,7 +131,7 @@ export default function Web3Status() {
   const { active, account, connector, error } = useWeb3React()
   const contextNetwork = useWeb3React(NetworkContextName)
 
-  const ENSName = useENSName(account)
+  const { ENSName } = useENSName(account)
 
   const allTransactions = useAllTransactions()
 
@@ -143,7 +144,7 @@ export default function Web3Status() {
   const confirmed = sortedRecentTransactions.filter(tx => tx.receipt).map(tx => tx.hash)
 
   const hasPendingTransactions = !!pending.length
-
+  const hasSocks = useHasSocks()
   const toggleWalletModal = useWalletModalToggle()
 
   // handle the logo we want to show with the account
@@ -186,7 +187,9 @@ export default function Web3Status() {
               <Text>{pending?.length} Pending</Text> <Loader stroke="white" />
             </RowBetween>
           ) : (
-            <Text>{ENSName || shortenAddress(account)}</Text>
+            <Text>
+              {hasSocks ? '🧦' : ''} {ENSName || shortenAddress(account)}
+            </Text>
           )}
           {!hasPendingTransactions && getStatusIcon()}
         </Web3StatusConnected>

src/components/swap/AdvancedSwapDetails.tsx

@@ -1,19 +1,16 @@
 import { Trade, TradeType } from '@uniswap/sdk'
 import React, { useContext } from 'react'
-import { ChevronRight } from 'react-feather'
-import { Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
+import { useUserSlippageTolerance } from '../../state/user/hooks'
 import { TYPE } from '../../theme'
 import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown } from '../../utils/prices'
 import { AutoColumn } from '../Column'
-import { SectionBreak } from './styleds'
 import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
 import FormattedPriceImpact from './FormattedPriceImpact'
-import TokenLogo from '../TokenLogo'
-import flatMap from 'lodash.flatmap'
-import { useUserSlippageTolerance } from '../../state/user/hooks'
+import { SectionBreak } from './styleds'
+import SwapRoute from './SwapRoute'
 
 function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippage: number }) {
   const theme = useContext(ThemeContext)
@@ -79,49 +76,19 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
   return (
     <AutoColumn gap="md">
       {trade && <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />}
-      {showRoute && <SectionBreak />}
       {showRoute && (
-        <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>
-          <Flex
-            px="1rem"
-            py="0.5rem"
-            my="0.5rem"
-            style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
-            flexWrap="wrap"
-            width="100%"
-            justifyContent="space-evenly"
-            alignItems="center"
-          >
-            {flatMap(
-              trade.route.path,
-              // add a null in-between each item
-              (token, i, array) => {
-                const lastItem = i === array.length - 1
-                return lastItem ? [token] : [token, null]
-              }
-            ).map((token, i) => {
-              // use null as an indicator to insert chevrons
-              if (token === null) {
-                return <ChevronRight key={i} color={theme.text2} />
-              } else {
-                return (
-                  <Flex my="0.5rem" alignItems="center" key={token.address} style={{ flexShrink: 0 }}>
-                    <TokenLogo address={token.address} size="1.5rem" />
-                    <TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
-                      {token.symbol}
-                    </TYPE.black>
-                  </Flex>
-                )
-              }
-            })}
-          </Flex>
-        </AutoColumn>
+        <>
+          <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

@@ -24,7 +24,7 @@ export default function AdvancedSwapDetailsDropdown({ trade, ...rest }: Advanced
 
   return (
     <AdvancedDetailsFooter show={Boolean(trade)}>
-      <AdvancedSwapDetails {...rest} trade={lastTrade} />
+      <AdvancedSwapDetails {...rest} trade={trade ?? lastTrade} />
     </AdvancedDetailsFooter>
   )
 }

src/components/swap/SwapModalHeader.tsx

@@ -5,6 +5,7 @@ import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
 import { TYPE } from '../../theme'
+import { isAddress, shortenAddress } from '../../utils'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 import TokenLogo from '../TokenLogo'
@@ -15,13 +16,15 @@ export default function SwapModalHeader({
   formattedAmounts,
   slippageAdjustedAmounts,
   priceImpactSeverity,
-  independentField
+  independentField,
+  recipient
 }: {
   tokens: { [field in Field]?: Token }
   formattedAmounts: { [field in Field]?: string }
   slippageAdjustedAmounts: { [field in Field]?: TokenAmount }
   priceImpactSeverity: number
   independentField: Field
+  recipient: string | null
 }) {
   const theme = useContext(ThemeContext)
 
@@ -71,6 +74,14 @@ export default function SwapModalHeader({
           </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

@@ -0,0 +1,38 @@
+import { Trade } from '@uniswap/sdk'
+import React, { Fragment, memo, useContext } from 'react'
+import { ChevronRight } from 'react-feather'
+import { Flex } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import { TYPE } from '../../theme'
+import TokenLogo from '../TokenLogo'
+
+export default memo(function SwapRoute({ trade }: { trade: Trade }) {
+  const theme = useContext(ThemeContext)
+  return (
+    <Flex
+      px="1rem"
+      py="0.5rem"
+      my="0.5rem"
+      style={{ border: `1px solid ${theme.bg3}`, borderRadius: '1rem' }}
+      flexWrap="wrap"
+      width="100%"
+      justifyContent="space-evenly"
+      alignItems="center"
+    >
+      {trade.route.path.map((token, i, path) => {
+        const isLastItem: boolean = i === path.length - 1
+        return (
+          <Fragment key={i}>
+            <Flex my="0.5rem" alignItems="center" style={{ flexShrink: 0 }}>
+              <TokenLogo address={token.address} size="1.5rem" />
+              <TYPE.black fontSize={14} color={theme.text1} ml="0.5rem">
+                {token.symbol}
+              </TYPE.black>
+            </Flex>
+            {isLastItem ? null : <ChevronRight color={theme.text2} />}
+          </Fragment>
+        )
+      })}
+    </Flex>
+  )
+})

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/styleds.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { AutoColumn } from '../Column'
 import { Text } from 'rebass'
 
@@ -8,17 +8,18 @@ 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`

src/connectors/index.ts

@@ -27,7 +27,7 @@ export const injected = new InjectedConnector({
 export const walletconnect = new WalletConnectConnector({
   rpc: { 1: NETWORK_URL },
   bridge: 'https://bridge.walletconnect.org',
-  qrcode: false,
+  qrcode: true,
   pollingInterval: POLLING_INTERVAL
 })
 

src/constants/abis/unisocks.json

@@ -0,0 +1,471 @@
+[
+  {
+    "name": "Transfer",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from",
+        "indexed": true
+      },
+      {
+        "type": "address",
+        "name": "_to",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "Approval",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner",
+        "indexed": true
+      },
+      {
+        "type": "address",
+        "name": "_approved",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "ApprovalForAll",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner",
+        "indexed": true
+      },
+      {
+        "type": "address",
+        "name": "_operator",
+        "indexed": true
+      },
+      {
+        "type": "bool",
+        "name": "_approved",
+        "indexed": false
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "outputs": [],
+    "inputs": [],
+    "constant": false,
+    "payable": false,
+    "type": "constructor"
+  },
+  {
+    "name": "tokenURI",
+    "outputs": [
+      {
+        "type": "string",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "_tokenId"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 22405
+  },
+  {
+    "name": "tokenByIndex",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "_index"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 631
+  },
+  {
+    "name": "tokenOfOwnerByIndex",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner"
+      },
+      {
+        "type": "uint256",
+        "name": "_index"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1248
+  },
+  {
+    "name": "transferFrom",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from"
+      },
+      {
+        "type": "address",
+        "name": "_to"
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 259486
+  },
+  {
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from"
+      },
+      {
+        "type": "address",
+        "name": "_to"
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from"
+      },
+      {
+        "type": "address",
+        "name": "_to"
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId"
+      },
+      {
+        "type": "bytes",
+        "name": "_data"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "approve",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_approved"
+      },
+      {
+        "type": "uint256",
+        "name": "_tokenId"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 38422
+  },
+  {
+    "name": "setApprovalForAll",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_operator"
+      },
+      {
+        "type": "bool",
+        "name": "_approved"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 38016
+  },
+  {
+    "name": "mint",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_to"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 182636
+  },
+  {
+    "name": "changeMinter",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_minter"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 35897
+  },
+  {
+    "name": "changeURI",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_newURI"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function",
+    "gas": 35927
+  },
+  {
+    "name": "name",
+    "outputs": [
+      {
+        "type": "string",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 6612
+  },
+  {
+    "name": "symbol",
+    "outputs": [
+      {
+        "type": "string",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 6642
+  },
+  {
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 873
+  },
+  {
+    "name": "minter",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 903
+  },
+  {
+    "name": "socks",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out",
+        "unit": "Socks"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 933
+  },
+  {
+    "name": "newURI",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 963
+  },
+  {
+    "name": "ownerOf",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "arg0"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1126
+  },
+  {
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "arg0"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1195
+  },
+  {
+    "name": "getApproved",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "arg0"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1186
+  },
+  {
+    "name": "isApprovedForAll",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "arg0"
+      },
+      {
+        "type": "address",
+        "name": "arg1"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1415
+  },
+  {
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "bytes32",
+        "name": "arg0"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function",
+    "gas": 1246
+  }
+]

src/constants/index.ts

@@ -1,27 +1,40 @@
 import { ChainId, JSBI, Percent, Token, WETH, Pair, TokenAmount } from '@uniswap/sdk'
 
 import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
+import { COMP, DAI, MKR, USDC, USDT } from './tokens/mainnet'
 
 export const ROUTER_ADDRESS = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D'
 
-// used to construct intermediary pairs for trading
-export const BASES_TO_CHECK_TRADES_AGAINST: { readonly [chainId in ChainId]: Token[] } = {
-  [ChainId.MAINNET]: [
-    WETH[ChainId.MAINNET],
-    new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
-    new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C')
-  ],
+// a list of tokens by chain
+type ChainTokenList = {
+  readonly [chainId in ChainId]: Token[]
+}
+
+const WETH_ONLY: ChainTokenList = {
+  [ChainId.MAINNET]: [WETH[ChainId.MAINNET]],
   [ChainId.ROPSTEN]: [WETH[ChainId.ROPSTEN]],
   [ChainId.RINKEBY]: [WETH[ChainId.RINKEBY]],
   [ChainId.GÖRLI]: [WETH[ChainId.GÖRLI]],
   [ChainId.KOVAN]: [WETH[ChainId.KOVAN]]
 }
 
+// used to construct intermediary pairs for trading
+export const BASES_TO_CHECK_TRADES_AGAINST: ChainTokenList = {
+  ...WETH_ONLY,
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, COMP, MKR]
+}
+
 // used for display in the default list when adding liquidity
-export const SUGGESTED_BASES = BASES_TO_CHECK_TRADES_AGAINST
+export const SUGGESTED_BASES: ChainTokenList = {
+  ...WETH_ONLY,
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT]
+}
 
 // used to construct the list of all pairs we consider by default in the frontend
-export const BASES_TO_TRACK_LIQUIDITY_FOR = BASES_TO_CHECK_TRADES_AGAINST
+export const BASES_TO_TRACK_LIQUIDITY_FOR: ChainTokenList = {
+  ...WETH_ONLY,
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT]
+}
 
 export const DUMMY_PAIRS_TO_PIN: { readonly [chainId in ChainId]?: Pair[] } = {
   [ChainId.MAINNET]: [
@@ -58,7 +71,7 @@ export const DUMMY_PAIRS_TO_PIN: { readonly [chainId in ChainId]?: Pair[] } = {
   ]
 }
 
-const MAINNET_WALLETS = {
+const TESTNET_CAPABLE_WALLETS = {
   INJECTED: {
     connector: injected,
     name: 'Injected',
@@ -80,9 +93,9 @@ const MAINNET_WALLETS = {
 
 export const SUPPORTED_WALLETS =
   process.env.REACT_APP_CHAIN_ID !== '1'
-    ? MAINNET_WALLETS
+    ? TESTNET_CAPABLE_WALLETS
     : {
-        ...MAINNET_WALLETS,
+        ...TESTNET_CAPABLE_WALLETS,
         ...{
           WALLET_CONNECT: {
             connector: walletconnect,
@@ -90,7 +103,8 @@ export const SUPPORTED_WALLETS =
             iconName: 'walletConnectIcon.svg',
             description: 'Connect to Trust Wallet, Rainbow Wallet and more...',
             href: null,
-            color: '#4196FC'
+            color: '#4196FC',
+            mobile: true
           },
           WALLET_LINK: {
             connector: walletlink,
@@ -109,15 +123,6 @@ export const SUPPORTED_WALLETS =
             mobile: true,
             mobileOnly: true
           },
-          TRUST_WALLET_LINK: {
-            name: 'Open in Trust Wallet',
-            iconName: 'trustWallet.png',
-            description: 'iOS and Android app.',
-            href: 'https://link.trustwallet.com/open_url?coin_id=60&url=https://uniswap.exchange/swap',
-            color: '#1C74CC',
-            mobile: true,
-            mobileOnly: true
-          },
           FORTMATIC: {
             connector: fortmatic,
             name: 'Fortmatic',

src/constants/tokens/mainnet.ts

@@ -1,5 +1,11 @@
 import { Token, ChainId } from '@uniswap/sdk'
 
+export const DAI = new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin')
+export const USDC = new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C')
+export const USDT = new Token(ChainId.MAINNET, '0xdAC17F958D2ee523a2206206994597C13D831ec7', 6, 'USDT', 'Tether USD')
+export const COMP = new Token(ChainId.MAINNET, '0xc00e94Cb662C3520282E6f5717214004A7f26888', 18, 'COMP', 'Compound')
+export const MKR = new Token(ChainId.MAINNET, '0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2', 18, 'MKR', 'Maker')
+
 export default [
   new Token(ChainId.MAINNET, '0xB6eD7644C69416d67B522e20bC294A9a9B405B31', 8, '0xBTC', '0xBitcoin Token'),
   new Token(ChainId.MAINNET, '0xfC1E690f61EFd961294b3e1Ce3313fBD8aa4f85d', 18, 'aDAI', 'Aave Interest bearing DAI'),
@@ -10,18 +16,20 @@ export default [
   new Token(ChainId.MAINNET, '0x27054b13b1B798B345b591a4d22e6562d47eA75a', 4, 'AST', 'AirSwap Token'),
   new Token(ChainId.MAINNET, '0xBA11D00c5f74255f56a5E366F4F77f5A186d7f55', 18, 'BAND', 'BandToken'),
   new Token(ChainId.MAINNET, '0x0D8775F648430679A709E98d2b0Cb6250d2887EF', 18, 'BAT', 'Basic Attention Token'),
+  new Token(ChainId.MAINNET, '0xba100000625a3754423978a60c9317c58a424e3D', 18, 'BAL', 'Balancer'),
   new Token(ChainId.MAINNET, '0x107c4504cd79C5d2696Ea0030a8dD4e92601B82e', 18, 'BLT', 'Bloom Token'),
   new Token(ChainId.MAINNET, '0x1F573D6Fb3F13d689FF844B4cE37794d79a7FF1C', 18, 'BNT', 'Bancor Network Token'),
   new Token(ChainId.MAINNET, '0x0327112423F3A68efdF1fcF402F6c5CB9f7C33fd', 18, 'BTC++', 'PieDAO BTC++'),
+  new Token(ChainId.MAINNET, '0x56d811088235F11C8920698a204A5010a788f4b3', 18, 'BZRX', 'bZx Protocol Token'),
   new Token(ChainId.MAINNET, '0x4F9254C83EB525f9FCf346490bbb3ed28a81C667', 18, 'CELR', 'CelerToken'),
   new Token(ChainId.MAINNET, '0xF5DCe57282A584D2746FaF1593d3121Fcac444dC', 8, 'cSAI', 'Compound Dai'),
   new Token(ChainId.MAINNET, '0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643', 8, 'cDAI', 'Compound Dai'),
   new Token(ChainId.MAINNET, '0x39AA39c021dfbaE8faC545936693aC917d5E7563', 8, 'cUSDC', 'Compound USD Coin'),
   new Token(ChainId.MAINNET, '0xaaAEBE6Fe48E54f431b0C390CfaF0b017d09D42d', 4, 'CEL', 'Celsius'),
   new Token(ChainId.MAINNET, '0x06AF07097C9Eeb7fD685c692751D5C66dB49c215', 18, 'CHAI', 'Chai'),
-  new Token(ChainId.MAINNET, '0xc00e94Cb662C3520282E6f5717214004A7f26888', 18, 'COMP', 'Compound'),
+  COMP,
   new Token(ChainId.MAINNET, '0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359', 18, 'SAI', 'Dai Stablecoin v1.0 (SAI)'),
-  new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
+  DAI,
   new Token(ChainId.MAINNET, '0x0Cf0Ee63788A0849fE5297F3407f701E122cC023', 18, 'DATA', 'Streamr DATAcoin'),
   new Token(ChainId.MAINNET, '0xE0B7927c4aF23765Cb51314A0E0521A9645F0E2A', 9, 'DGD', 'DigixDAO'),
   new Token(ChainId.MAINNET, '0x4f3AfEC4E5a3F2A6a1A411DEF7D7dFe50eE057bF', 9, 'DGX', 'Digix Gold Token'),
@@ -62,7 +70,7 @@ export default [
   new Token(ChainId.MAINNET, '0xd15eCDCF5Ea68e3995b2D0527A0aE0a3258302F8', 18, 'MCX', 'MachiX Token'),
   new Token(ChainId.MAINNET, '0xa3d58c4E56fedCae3a7c43A725aeE9A71F0ece4e', 18, 'MET', 'Metronome'),
   new Token(ChainId.MAINNET, '0x80f222a749a2e18Eb7f676D371F19ad7EFEEe3b7', 18, 'MGN', 'Magnolia Token'),
-  new Token(ChainId.MAINNET, '0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2', 18, 'MKR', 'Maker'),
+  MKR,
   new Token(ChainId.MAINNET, '0xec67005c4E498Ec7f55E092bd1d35cbC47C91892', 18, 'MLN', 'Melon Token'),
   new Token(ChainId.MAINNET, '0x957c30aB0426e0C93CD8241E2c60392d08c6aC8e', 0, 'MOD', 'Modum Token'),
   new Token(ChainId.MAINNET, '0xe2f2a5C287993345a840Db3B0845fbC70f5935a5', 18, 'mUSD', 'mStable USD'),
@@ -84,7 +92,7 @@ export default [
   new Token(ChainId.MAINNET, '0x459086F2376525BdCebA5bDDA135e4E9d3FeF5bf', 8, 'renBCH', 'renBCH'),
   new Token(ChainId.MAINNET, '0xEB4C2781e4ebA804CE9a9803C67d0893436bB27D', 8, 'renBTC', 'renBTC'),
   new Token(ChainId.MAINNET, '0x1C5db575E2Ff833E46a2E9864C22F4B22E0B37C2', 8, 'renZEC', 'renZEC'),
-  new Token(ChainId.MAINNET, '0x1985365e9f78359a9B6AD760e32412f4a445E862', 18, 'REP', 'Reputation'),
+  new Token(ChainId.MAINNET, '0x1985365e9f78359a9B6AD760e32412f4a445E862', 18, 'REPv1', 'Augur v1 Reputation'),
   new Token(ChainId.MAINNET, '0x9469D013805bFfB7D3DEBe5E7839237e535ec483', 18, 'RING', 'Darwinia Network Native Token'),
   new Token(ChainId.MAINNET, '0x607F4C5BB672230e8672085532f7e901544a7375', 9, 'RLC', 'iEx.ec Network Token'),
   new Token(ChainId.MAINNET, '0xB4EFd85c19999D84251304bDA99E90B92300Bd93', 18, 'RPL', 'Rocket Pool'),
@@ -112,10 +120,11 @@ export default [
   new Token(ChainId.MAINNET, '0x0000000000085d4780B73119b644AE5ecd22b376', 18, 'TUSD', 'TrueUSD'),
   new Token(ChainId.MAINNET, '0x8400D94A5cb0fa0D041a3788e395285d61c9ee5e', 8, 'UBT', 'UniBright'),
   new Token(ChainId.MAINNET, '0x04Fa0d235C4abf4BcF4787aF4CF447DE572eF828', 18, 'UMA', 'UMA Voting Token v1'),
-  new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C'),
+  USDC,
   new Token(ChainId.MAINNET, '0xA4Bdb11dc0a2bEC88d24A3aa1E6Bb17201112eBe', 6, 'USDS', 'StableUSD'),
-  new Token(ChainId.MAINNET, '0xdAC17F958D2ee523a2206206994597C13D831ec7', 6, 'USDT', 'Tether USD'),
+  USDT,
   new Token(ChainId.MAINNET, '0xeb269732ab75A6fD61Ea60b06fE994cD32a83549', 18, 'USDx', 'dForce'),
+  new Token(ChainId.MAINNET, '0x9A48BD0EC040ea4f1D3147C025cd4076A2e71e3e', 18, 'USD++', 'PieDAO USD++'),
   new Token(ChainId.MAINNET, '0x8f3470A7388c05eE4e7AF3d01D8C722b0FF52374', 18, 'VERI', 'Veritaseum'),
   new Token(ChainId.MAINNET, '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599', 8, 'WBTC', 'Wrapped BTC'),
   new Token(ChainId.MAINNET, '0x09fE5f0236F0Ea5D930197DCE254d77B04128075', 18, 'WCK', 'Wrapped CryptoKitties'),

src/hooks/Trades.ts

@@ -1,16 +1,16 @@
-import { useMemo } from 'react'
-import { Token, TokenAmount, Trade, ChainId, Pair } from '@uniswap/sdk'
+import { Pair, Token, TokenAmount, Trade } from '@uniswap/sdk'
 import flatMap from 'lodash.flatmap'
-
-import { useActiveWeb3React } from './index'
-import { usePairs } from '../data/Reserves'
+import { useMemo } from 'react'
 
 import { BASES_TO_CHECK_TRADES_AGAINST } from '../constants'
+import { usePairs } from '../data/Reserves'
+
+import { useActiveWeb3React } from './index'
 
 function useAllCommonPairs(tokenA?: Token, tokenB?: Token): Pair[] {
   const { chainId } = useActiveWeb3React()
 
-  const bases = useMemo(() => BASES_TO_CHECK_TRADES_AGAINST[chainId as ChainId] ?? [], [chainId])
+  const bases: Token[] = chainId ? BASES_TO_CHECK_TRADES_AGAINST[chainId] : []
 
   const allPairCombinations: [Token | undefined, Token | undefined][] = useMemo(
     () => [
@@ -31,13 +31,16 @@ function useAllCommonPairs(tokenA?: Token, tokenB?: Token): Pair[] {
   // only pass along valid pairs, non-duplicated pairs
   return useMemo(
     () =>
-      allPairs
-        // filter out invalid pairs
-        .filter((p): p is Pair => !!p)
-        // filter out duplicated pairs
-        .filter(
-          (p, i, pairs) => i === pairs.findIndex(pair => pair?.liquidityToken.address === p.liquidityToken.address)
-        ),
+      Object.values(
+        allPairs
+          // filter out invalid pairs
+          .filter((p): p is Pair => !!p)
+          // filter out duplicated pairs
+          .reduce<{ [pairAddress: string]: Pair }>((memo, curr) => {
+            memo[curr.liquidityToken.address] = memo[curr.liquidityToken.address] ?? curr
+            return memo
+          }, {})
+      ),
     [allPairs]
   )
 }
@@ -46,14 +49,11 @@ function useAllCommonPairs(tokenA?: Token, tokenB?: Token): Pair[] {
  * Returns the best trade for the exact amount of tokens in to the given token out
  */
 export function useTradeExactIn(amountIn?: TokenAmount, tokenOut?: Token): Trade | null {
-  const inputToken = amountIn?.token
-  const outputToken = tokenOut
-
-  const allowedPairs = useAllCommonPairs(inputToken, outputToken)
+  const allowedPairs = useAllCommonPairs(amountIn?.token, tokenOut)
 
   return useMemo(() => {
     if (amountIn && tokenOut && allowedPairs.length > 0) {
-      return Trade.bestTradeExactIn(allowedPairs, amountIn, tokenOut)[0] ?? null
+      return Trade.bestTradeExactIn(allowedPairs, amountIn, tokenOut, { maxHops: 3, maxNumResults: 1 })[0] ?? null
     }
     return null
   }, [allowedPairs, amountIn, tokenOut])
@@ -63,14 +63,11 @@ export function useTradeExactIn(amountIn?: TokenAmount, tokenOut?: Token): Trade
  * Returns the best trade for the token in to the exact amount of token out
  */
 export function useTradeExactOut(tokenIn?: Token, amountOut?: TokenAmount): Trade | null {
-  const inputToken = tokenIn
-  const outputToken = amountOut?.token
-
-  const allowedPairs = useAllCommonPairs(inputToken, outputToken)
+  const allowedPairs = useAllCommonPairs(tokenIn, amountOut?.token)
 
   return useMemo(() => {
     if (tokenIn && amountOut && allowedPairs.length > 0) {
-      return Trade.bestTradeExactOut(allowedPairs, tokenIn, amountOut)[0] ?? null
+      return Trade.bestTradeExactOut(allowedPairs, tokenIn, amountOut, { maxHops: 3, maxNumResults: 1 })[0] ?? null
     }
     return null
   }, [allowedPairs, tokenIn, amountOut])

src/hooks/useApproveCallback.ts

@@ -37,9 +37,13 @@ export function useApproveCallback(
     if (amountToApprove.token.equals(WETH[amountToApprove.token.chainId])) return ApprovalState.APPROVED
     // we might not have enough data to know whether or not we need to approve
     if (!currentAllowance) return ApprovalState.UNKNOWN
-    if (pendingApproval) return ApprovalState.PENDING
+
     // amountToApprove will be defined if currentAllowance is
-    return currentAllowance.lessThan(amountToApprove) ? ApprovalState.NOT_APPROVED : ApprovalState.APPROVED
+    return currentAllowance.lessThan(amountToApprove)
+      ? pendingApproval
+        ? ApprovalState.PENDING
+        : ApprovalState.NOT_APPROVED
+      : ApprovalState.APPROVED
   }, [amountToApprove, currentAllowance, pendingApproval, spender])
 
   const tokenContract = useTokenContract(amountToApprove?.token?.address)

src/hooks/useContract.ts

@@ -3,10 +3,11 @@ import { ChainId } from '@uniswap/sdk'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { useMemo } from 'react'
 import { ERC20_BYTES32_ABI } from '../constants/abis/erc20'
+import UNISOCKS_ABI from '../constants/abis/unisocks.json'
 import ERC20_ABI from '../constants/abis/erc20.json'
 import { MIGRATOR_ABI, MIGRATOR_ADDRESS } from '../constants/abis/migrator'
-import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESSES } from '../constants/v1'
 import { MULTICALL_ABI, MULTICALL_NETWORKS } from '../constants/multicall'
+import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESSES } from '../constants/v1'
 import { getContract } from '../utils'
 import { useActiveWeb3React } from './index'
 
@@ -27,7 +28,7 @@ function useContract(address?: string, ABI?: any, withSignerIfPossible = true):
 
 export function useV1FactoryContract(): Contract | null {
   const { chainId } = useActiveWeb3React()
-  return useContract(V1_FACTORY_ADDRESSES[chainId as ChainId], V1_FACTORY_ABI, false)
+  return useContract(chainId && V1_FACTORY_ADDRESSES[chainId], V1_FACTORY_ABI, false)
 }
 
 export function useV2MigratorContract(): Contract | null {
@@ -52,5 +53,14 @@ export function usePairContract(pairAddress?: string, withSignerIfPossible?: boo
 
 export function useMulticallContract(): Contract | null {
   const { chainId } = useActiveWeb3React()
-  return useContract(MULTICALL_NETWORKS[chainId as ChainId], MULTICALL_ABI, false)
+  return useContract(chainId && MULTICALL_NETWORKS[chainId], MULTICALL_ABI, false)
+}
+
+export function useSocksController(): Contract | null {
+  const { chainId } = useActiveWeb3React()
+  return useContract(
+    chainId === ChainId.MAINNET ? '0x65770b5283117639760beA3F867b69b3697a91dd' : undefined,
+    UNISOCKS_ABI,
+    false
+  )
 }

src/hooks/useENS.ts

@@ -0,0 +1,21 @@
+import { isAddress } from '../utils'
+import useENSAddress from './useENSAddress'
+import useENSName from './useENSName'
+
+/**
+ * Given a name or address, does a lookup to resolve to an address and name
+ * @param nameOrAddress ENS name or address
+ */
+export default function useENS(
+  nameOrAddress?: string | null
+): { loading: boolean; address: string | null; name: string | null } {
+  const validated = isAddress(nameOrAddress)
+  const reverseLookup = useENSName(validated ? validated : undefined)
+  const lookup = useENSAddress(nameOrAddress)
+
+  return {
+    loading: reverseLookup.loading || lookup.loading,
+    address: validated ? validated : lookup.address,
+    name: reverseLookup.ENSName ? reverseLookup.ENSName : !validated && lookup.address ? nameOrAddress || null : null
+  }
+}

src/hooks/useENSAddress.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { useActiveWeb3React } from './index'
+
+/**
+ * Does a lookup for an ENS name to find its address.
+ */
+export default function useENSAddress(ensName?: string | null): { loading: boolean; address: string | null } {
+  const { library } = useActiveWeb3React()
+
+  const [address, setAddress] = useState<{ loading: boolean; address: string | null }>({
+    loading: false,
+    address: null
+  })
+
+  useEffect(() => {
+    if (!library || typeof ensName !== 'string') {
+      setAddress({ loading: false, address: null })
+      return
+    } else {
+      let stale = false
+      setAddress({ loading: true, address: null })
+      library
+        .resolveName(ensName)
+        .then(address => {
+          if (!stale) {
+            if (address) {
+              setAddress({ loading: false, address })
+            } else {
+              setAddress({ loading: false, address: null })
+            }
+          }
+        })
+        .catch(() => {
+          if (!stale) {
+            setAddress({ loading: false, address: null })
+          }
+        })
+
+      return () => {
+        stale = true
+      }
+    }
+  }, [library, ensName])
+
+  return address
+}

src/hooks/useENSName.ts

@@ -6,39 +6,43 @@ import { useActiveWeb3React } from './index'
  * Does a reverse lookup for an address to find its ENS name.
  * Note this is not the same as looking up an ENS name to find an address.
  */
-export default function useENSName(address?: string): string | null {
+export default function useENSName(address?: string): { ENSName: string | null; loading: boolean } {
   const { library } = useActiveWeb3React()
 
-  const [ENSName, setENSName] = useState<string | null>(null)
+  const [ENSName, setENSName] = useState<{ ENSName: string | null; loading: boolean }>({
+    loading: false,
+    ENSName: null
+  })
 
   useEffect(() => {
-    if (!library || !address) return
     const validated = isAddress(address)
-    if (validated) {
+    if (!library || !validated) {
+      setENSName({ loading: false, ENSName: null })
+      return
+    } else {
       let stale = false
+      setENSName({ loading: true, ENSName: null })
       library
         .lookupAddress(validated)
         .then(name => {
           if (!stale) {
             if (name) {
-              setENSName(name)
+              setENSName({ loading: false, ENSName: name })
             } else {
-              setENSName(null)
+              setENSName({ loading: false, ENSName: null })
             }
           }
         })
         .catch(() => {
           if (!stale) {
-            setENSName(null)
+            setENSName({ loading: false, ENSName: null })
           }
         })
 
       return () => {
         stale = true
-        setENSName(null)
       }
     }
-    return
   }, [library, address])
 
   return ENSName

src/hooks/useInterval.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export default function useInterval(callback: () => void, delay: null | number) {
+export default function useInterval(callback: () => void, delay: null | number, leading = true) {
   const savedCallback = useRef<() => void>()
 
   // Remember the latest callback.
@@ -16,10 +16,10 @@ export default function useInterval(callback: () => void, delay: null | number)
     }
 
     if (delay !== null) {
-      tick()
+      if (leading) tick()
       const id = setInterval(tick, delay)
       return () => clearInterval(id)
     }
     return
-  }, [delay])
+  }, [delay, leading])
 }

src/hooks/useSendCallback.ts

@@ -1,70 +0,0 @@
-import { BigNumber } from '@ethersproject/bignumber'
-import { TransactionResponse } from '@ethersproject/providers'
-import { WETH, TokenAmount, JSBI, ChainId } from '@uniswap/sdk'
-import { useMemo } from 'react'
-import { useTransactionAdder } from '../state/transactions/hooks'
-import { useTokenBalanceTreatingWETHasETH } from '../state/wallet/hooks'
-
-import { calculateGasMargin, getSigner, isAddress } from '../utils'
-import { useTokenContract } from './useContract'
-import { useActiveWeb3React } from './index'
-import useENSName from './useENSName'
-
-// returns a callback for sending a token amount, treating WETH as ETH
-// returns null with invalid arguments
-export function useSendCallback(amount?: TokenAmount, recipient?: string): null | (() => Promise<string>) {
-  const { library, account, chainId } = useActiveWeb3React()
-  const addTransaction = useTransactionAdder()
-  const ensName = useENSName(recipient)
-  const tokenContract = useTokenContract(amount?.token?.address)
-  const balance = useTokenBalanceTreatingWETHasETH(account ?? undefined, amount?.token)
-
-  return useMemo(() => {
-    if (!amount) return null
-    if (!amount.greaterThan(JSBI.BigInt(0))) return null
-    if (!isAddress(recipient)) return null
-    if (!balance) return null
-    if (balance.lessThan(amount)) return null
-
-    const token = amount?.token
-
-    return async function onSend(): Promise<string> {
-      if (!chainId || !library || !account || !tokenContract) {
-        throw new Error('missing dependencies in onSend callback')
-      }
-      if (token.equals(WETH[chainId as ChainId])) {
-        return getSigner(library, account)
-          .sendTransaction({ to: recipient, value: BigNumber.from(amount.raw.toString()) })
-          .then((response: TransactionResponse) => {
-            addTransaction(response, {
-              summary: 'Send ' + amount.toSignificant(3) + ' ' + token?.symbol + ' to ' + (ensName ?? recipient)
-            })
-            return response.hash
-          })
-          .catch((error: Error) => {
-            console.error('Failed to transfer ETH', error)
-            throw error
-          })
-      } else {
-        return tokenContract.estimateGas
-          .transfer(recipient, amount.raw.toString())
-          .then(estimatedGasLimit =>
-            tokenContract
-              .transfer(recipient, amount.raw.toString(), {
-                gasLimit: calculateGasMargin(estimatedGasLimit)
-              })
-              .then((response: TransactionResponse) => {
-                addTransaction(response, {
-                  summary: 'Send ' + amount.toSignificant(3) + ' ' + token.symbol + ' to ' + (ensName ?? recipient)
-                })
-                return response.hash
-              })
-          )
-          .catch(error => {
-            console.error('Failed token transfer', error)
-            throw error
-          })
-      }
-    }
-  }, [addTransaction, library, account, chainId, amount, ensName, recipient, tokenContract, balance])
-}

src/hooks/useSocksBalance.ts

@@ -0,0 +1,19 @@
+import { JSBI } from '@uniswap/sdk'
+import { useMemo } from 'react'
+import { useSingleCallResult } from '../state/multicall/hooks'
+import { useActiveWeb3React } from './index'
+import { useSocksController } from './useContract'
+
+export default function useSocksBalance(): JSBI | undefined {
+  const { account } = useActiveWeb3React()
+  const socksContract = useSocksController()
+
+  const { result } = useSingleCallResult(socksContract, 'balanceOf', [account ?? undefined], { blocksPerFetch: 100 })
+  const data = result?.[0]
+  return data ? JSBI.BigInt(data.toString()) : undefined
+}
+
+export function useHasSocks(): boolean | undefined {
+  const balance = useSocksBalance()
+  return useMemo(() => balance && JSBI.greaterThan(balance, JSBI.BigInt(0)), [balance])
+}

src/hooks/useSwapCallback.ts

@@ -1,18 +1,18 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { MaxUint256 } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
-import { ChainId, Trade, TradeType, WETH } from '@uniswap/sdk'
+import { Trade, TradeType, WETH } from '@uniswap/sdk'
 import { useMemo } from 'react'
 import { DEFAULT_DEADLINE_FROM_NOW, INITIAL_ALLOWED_SLIPPAGE, ROUTER_ADDRESS } from '../constants'
 import { useTokenAllowance } from '../data/Allowances'
 import { getTradeVersion, useV1TradeExchangeAddress } from '../data/V1'
 import { Field } from '../state/swap/actions'
 import { useTransactionAdder } from '../state/transactions/hooks'
-import { calculateGasMargin, getRouterContract, isAddress } from '../utils'
+import { calculateGasMargin, getRouterContract, shortenAddress, isAddress } from '../utils'
 import { computeSlippageAdjustedAmounts } from '../utils/prices'
 import { useActiveWeb3React } from './index'
 import { useV1ExchangeContract } from './useContract'
-import useENSName from './useENSName'
+import useENS from './useENS'
 import { Version } from './useToggledVersion'
 
 enum SwapType {
@@ -59,15 +59,17 @@ function getSwapType(trade: Trade | undefined): SwapType | undefined {
 // returns a function that will execute a swap, if the parameters are all valid
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
-  trade?: Trade, // trade to execute, required
+  trade: Trade | undefined, // trade to execute, required
   allowedSlippage: number = INITIAL_ALLOWED_SLIPPAGE, // in bips
   deadline: number = DEFAULT_DEADLINE_FROM_NOW, // in seconds from now
-  to?: string // recipient of output, optional
+  recipientAddressOrName: string | null // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
 ): null | (() => Promise<string>) {
   const { account, chainId, library } = useActiveWeb3React()
   const addTransaction = useTransactionAdder()
-  const recipient = to ? isAddress(to) : account
-  const ensName = useENSName(to)
+
+  const { address: recipientAddress } = useENS(recipientAddressOrName)
+  const recipient = recipientAddressOrName === null ? account : recipientAddress
+
   const tradeVersion = getTradeVersion(trade)
   const v1Exchange = useV1ExchangeContract(useV1TradeExchangeAddress(trade), true)
   const inputAllowance = useTokenAllowance(
@@ -77,7 +79,7 @@ export function useSwapCallback(
   )
 
   return useMemo(() => {
-    if (!trade || !recipient || !tradeVersion) return null
+    if (!trade || !recipient || !library || !account || !tradeVersion || !chainId) return null
 
     // will always be defined
     const {
@@ -89,17 +91,13 @@ export function useSwapCallback(
 
     // no allowance
     if (
-      !trade.inputAmount.token.equals(WETH[chainId as ChainId]) &&
+      !trade.inputAmount.token.equals(WETH[chainId]) &&
       (!inputAllowance || slippageAdjustedInput.greaterThan(inputAllowance))
     ) {
       return null
     }
 
     return async function onSwap() {
-      if (!chainId || !library || !account) {
-        throw new Error('missing dependencies in onSwap callback')
-      }
-
       const contract: Contract | null =
         tradeVersion === Version.v2 ? getRouterContract(chainId, library, account) : v1Exchange
       if (!contract) {
@@ -283,7 +281,14 @@ export function useSwapCallback(
             const outputAmount = slippageAdjustedOutput.toSignificant(3)
 
             const base = `Swap ${inputAmount} ${inputSymbol} for ${outputAmount} ${outputSymbol}`
-            const withRecipient = recipient === account ? base : `${base} to ${ensName ?? recipient}`
+            const withRecipient =
+              recipient === account
+                ? base
+                : `${base} to ${
+                    recipientAddressOrName && isAddress(recipientAddressOrName)
+                      ? shortenAddress(recipientAddressOrName)
+                      : recipientAddressOrName
+                  }`
 
             const withVersion =
               tradeVersion === Version.v2 ? withRecipient : `${withRecipient} on ${tradeVersion.toUpperCase()}`
@@ -310,15 +315,15 @@ export function useSwapCallback(
   }, [
     trade,
     recipient,
-    tradeVersion,
-    allowedSlippage,
-    chainId,
-    inputAllowance,
     library,
     account,
+    tradeVersion,
+    chainId,
+    allowedSlippage,
+    inputAllowance,
     v1Exchange,
     deadline,
-    addTransaction,
-    ensName
+    recipientAddressOrName,
+    addTransaction
   ])
 }

src/i18n.ts

@@ -3,15 +3,13 @@ import { initReactI18next } from 'react-i18next'
 import XHR from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 
-const LOAD_PATH: string = process.env.PUBLIC_URL === '.' ? `./locales/{{lng}}.json` : '/locales/{{lng}}.json'
-
 i18next
   .use(XHR)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     backend: {
-      loadPath: LOAD_PATH
+      loadPath: `./locales/{{lng}}.json`
     },
     react: {
       useSuspense: true

src/index.tsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { NetworkContextName } from './constants'
+import 'inter-ui'
 import './i18n'
 import App from './pages/App'
 import store from './state'

src/pages/AddLiquidity/ConfirmAddModalBottom.tsx

@@ -0,0 +1,63 @@
+import { Fraction, Percent, Token, TokenAmount } from '@uniswap/sdk'
+import React from 'react'
+import { Text } from 'rebass'
+import { ButtonPrimary } from '../../components/Button'
+import { RowBetween, RowFixed } from '../../components/Row'
+import TokenLogo from '../../components/TokenLogo'
+import { Field } from '../../state/mint/actions'
+import { TYPE } from '../../theme'
+
+export function ConfirmAddModalBottom({
+  noLiquidity,
+  price,
+  tokens,
+  parsedAmounts,
+  poolTokenPercentage,
+  onAdd
+}: {
+  noLiquidity?: boolean
+  price?: Fraction
+  tokens: { [field in Field]?: Token }
+  parsedAmounts: { [field in Field]?: TokenAmount }
+  poolTokenPercentage?: Percent
+  onAdd: () => void
+}) {
+  return (
+    <>
+      <RowBetween>
+        <TYPE.body>{tokens[Field.TOKEN_A]?.symbol} Deposited</TYPE.body>
+        <RowFixed>
+          <TokenLogo address={tokens[Field.TOKEN_A]?.address} style={{ marginRight: '8px' }} />
+          <TYPE.body>{parsedAmounts[Field.TOKEN_A]?.toSignificant(6)}</TYPE.body>
+        </RowFixed>
+      </RowBetween>
+      <RowBetween>
+        <TYPE.body>{tokens[Field.TOKEN_B]?.symbol} Deposited</TYPE.body>
+        <RowFixed>
+          <TokenLogo address={tokens[Field.TOKEN_B]?.address} style={{ marginRight: '8px' }} />
+          <TYPE.body>{parsedAmounts[Field.TOKEN_B]?.toSignificant(6)}</TYPE.body>
+        </RowFixed>
+      </RowBetween>
+      <RowBetween>
+        <TYPE.body>Rates</TYPE.body>
+        <TYPE.body>
+          {`1 ${tokens[Field.TOKEN_A]?.symbol} = ${price?.toSignificant(4)} ${tokens[Field.TOKEN_B]?.symbol}`}
+        </TYPE.body>
+      </RowBetween>
+      <RowBetween style={{ justifyContent: 'flex-end' }}>
+        <TYPE.body>
+          {`1 ${tokens[Field.TOKEN_B]?.symbol} = ${price?.invert().toSignificant(4)} ${tokens[Field.TOKEN_A]?.symbol}`}
+        </TYPE.body>
+      </RowBetween>
+      <RowBetween>
+        <TYPE.body>Share of Pool:</TYPE.body>
+        <TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
+      </RowBetween>
+      <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
+        <Text fontWeight={500} fontSize={20}>
+          {noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
+        </Text>
+      </ButtonPrimary>
+    </>
+  )
+}

src/pages/AddLiquidity/PoolPriceBar.tsx

@@ -0,0 +1,52 @@
+import { Fraction, Percent, Token } from '@uniswap/sdk'
+import React, { useContext } from 'react'
+import { Text } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import { AutoColumn } from '../../components/Column'
+import { AutoRow } from '../../components/Row'
+import { ONE_BIPS } from '../../constants'
+import { Field } from '../../state/mint/actions'
+import { TYPE } from '../../theme'
+
+export const PoolPriceBar = ({
+  tokens,
+  noLiquidity,
+  poolTokenPercentage,
+  price
+}: {
+  tokens: { [field in Field]?: Token }
+  noLiquidity?: boolean
+  poolTokenPercentage?: Percent
+  price?: Fraction
+}) => {
+  const theme = useContext(ThemeContext)
+  return (
+    <AutoColumn gap="md">
+      <AutoRow justify="space-around" gap="4px">
+        <AutoColumn justify="center">
+          <TYPE.black>{price?.toSignificant(6) ?? '0'}</TYPE.black>
+          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+            {tokens[Field.TOKEN_B]?.symbol} per {tokens[Field.TOKEN_A]?.symbol}
+          </Text>
+        </AutoColumn>
+        <AutoColumn justify="center">
+          <TYPE.black>{price?.invert().toSignificant(6) ?? '0'}</TYPE.black>
+          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+            {tokens[Field.TOKEN_A]?.symbol} per {tokens[Field.TOKEN_B]?.symbol}
+          </Text>
+        </AutoColumn>
+        <AutoColumn justify="center">
+          <TYPE.black>
+            {noLiquidity && price
+              ? '100'
+              : (poolTokenPercentage?.lessThan(ONE_BIPS) ? '<0.01' : poolTokenPercentage?.toFixed(2)) ?? '0'}
+            %
+          </TYPE.black>
+          <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
+            Share of Pool
+          </Text>
+        </AutoColumn>
+      </AutoRow>
+    </AutoColumn>
+  )
+}

src/pages/AddLiquidity/currencyId.ts

@@ -0,0 +1,13 @@
+import { Token, ChainId, WETH } from '@uniswap/sdk'
+
+export function currencyId(...args: [ChainId | undefined, string] | [Token]): string {
+  if (args.length === 2) {
+    const [chainId, tokenAddress] = args
+    return chainId && tokenAddress === WETH[chainId].address ? 'ETH' : tokenAddress
+  } else if (args.length === 1) {
+    const [token] = args
+    return currencyId(token.chainId, token.address)
+  } else {
+    throw new Error('unexpected call signature')
+  }
+}

src/pages/AddLiquidity/index.tsx

@@ -1,47 +1,59 @@
 import { BigNumber } from '@ethersproject/bignumber'
-import { TokenAmount, WETH } from '@uniswap/sdk'
-import React, { useContext, useState } from 'react'
+import { TransactionResponse } from '@ethersproject/providers'
+import { ChainId, Token, TokenAmount, WETH } from '@uniswap/sdk'
+import React, { useCallback, useContext, useState } from 'react'
 import { Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
-import { ButtonLight, ButtonPrimary, ButtonError } from '../../components/Button'
+import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { BlueCard, GreyCard, LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import DoubleLogo from '../../components/DoubleLogo'
-import PositionCard from '../../components/PositionCard'
-import Row, { AutoRow, RowBetween, RowFixed, RowFlat } from '../../components/Row'
+import { AddRemoveTabs } from '../../components/NavigationTabs'
+import { MinimalPositionCard } from '../../components/PositionCard'
+import Row, { RowBetween, RowFlat } from '../../components/Row'
 
-import TokenLogo from '../../components/TokenLogo'
-
-import { ROUTER_ADDRESS, MIN_ETH, ONE_BIPS } from '../../constants'
+import { ROUTER_ADDRESS } from '../../constants'
 import { useActiveWeb3React } from '../../hooks'
+import { useToken } from '../../hooks/Tokens'
+import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
+import { useWalletModalToggle } from '../../state/application/hooks'
+import { Field } from '../../state/mint/actions'
+import { useDerivedMintInfo, useMintActionHandlers, useMintState } from '../../state/mint/hooks'
 
 import { useTransactionAdder } from '../../state/transactions/hooks'
+import { useIsExpertMode, useUserDeadline, useUserSlippageTolerance } from '../../state/user/hooks'
 import { TYPE } from '../../theme'
 import { calculateGasMargin, calculateSlippageAmount, getRouterContract } from '../../utils'
+import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import AppBody from '../AppBody'
 import { Dots, Wrapper } from '../Pool/styleds'
-import {
-  useDefaultsFromURLMatchParams,
-  useMintState,
-  useDerivedMintInfo,
-  useMintActionHandlers
-} from '../../state/mint/hooks'
-import { Field } from '../../state/mint/actions'
-import { useApproveCallback, ApprovalState } from '../../hooks/useApproveCallback'
-import { useWalletModalToggle } from '../../state/application/hooks'
-import { useUserSlippageTolerance, useUserDeadline, useIsExpertMode } from '../../state/user/hooks'
+import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
+import { currencyId } from './currencyId'
+import { PoolPriceBar } from './PoolPriceBar'
 
-export default function AddLiquidity({ match: { params } }: RouteComponentProps<{ tokens: string }>) {
-  useDefaultsFromURLMatchParams(params)
+function useTokenByCurrencyId(chainId: ChainId | undefined, currencyId: string | undefined): Token | undefined {
+  const isETH = currencyId?.toUpperCase() === 'ETH'
+  const token = useToken(isETH ? undefined : currencyId)
+  return isETH && chainId ? WETH[chainId] : token ?? undefined
+}
 
+export default function AddLiquidity({
+  match: {
+    params: { currencyIdA, currencyIdB }
+  },
+  history
+}: RouteComponentProps<{ currencyIdA?: string; currencyIdB?: string }>) {
   const { account, chainId, library } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
+  const tokenA = useTokenByCurrencyId(chainId, currencyIdA)
+  const tokenB = useTokenByCurrencyId(chainId, currencyIdB)
+
   // toggle wallet when disconnected
   const toggleWalletModal = useWalletModalToggle()
 
@@ -60,8 +72,21 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
     liquidityMinted,
     poolTokenPercentage,
     error
-  } = useDerivedMintInfo()
-  const { onUserInput } = useMintActionHandlers()
+  } = useDerivedMintInfo(tokenA ?? undefined, tokenB ?? undefined)
+  const { onUserInput } = useMintActionHandlers(noLiquidity)
+
+  const handleTokenAInput = useCallback(
+    (field: string, value: string) => {
+      return onUserInput(Field.TOKEN_A, value)
+    },
+    [onUserInput]
+  )
+  const handleTokenBInput = useCallback(
+    (field: string, value: string) => {
+      return onUserInput(Field.TOKEN_B, value)
+    },
+    [onUserInput]
+  )
 
   const isValid = !error
 
@@ -84,17 +109,7 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
   const maxAmounts: { [field in Field]?: TokenAmount } = [Field.TOKEN_A, Field.TOKEN_B].reduce((accumulator, field) => {
     return {
       ...accumulator,
-      [field]:
-        !!tokenBalances[field] &&
-        !!tokens[field] &&
-        !!WETH[chainId] &&
-        tokenBalances[field].greaterThan(
-          new TokenAmount(tokens[field], tokens[field].equals(WETH[chainId]) ? MIN_ETH : '0')
-        )
-          ? tokens[field].equals(WETH[chainId])
-            ? tokenBalances[field].subtract(new TokenAmount(WETH[chainId], MIN_ETH))
-            : tokenBalances[field]
-          : undefined
+      [field]: maxAmountSpend(tokenBalances[field])
     }
   }, {})
 
@@ -102,7 +117,7 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
     (accumulator, field) => {
       return {
         ...accumulator,
-        [field]: maxAmounts[field] && parsedAmounts[field] ? maxAmounts[field].equalTo(parsedAmounts[field]) : undefined
+        [field]: maxAmounts[field]?.equalTo(parsedAmounts[field] ?? '0')
       }
     },
     {}
@@ -113,38 +128,48 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
   const [approvalB, approveBCallback] = useApproveCallback(parsedAmounts[Field.TOKEN_B], ROUTER_ADDRESS)
 
   const addTransaction = useTransactionAdder()
+
   async function onAdd() {
+    if (!chainId || !library || !account) return
     const router = getRouterContract(chainId, library, account)
 
+    const { [Field.TOKEN_A]: parsedAmountA, [Field.TOKEN_B]: parsedAmountB } = parsedAmounts
+    if (!parsedAmountA || !parsedAmountB || !tokenA || !tokenB) {
+      return
+    }
+
     const amountsMin = {
-      [Field.TOKEN_A]: calculateSlippageAmount(parsedAmounts[Field.TOKEN_A], noLiquidity ? 0 : allowedSlippage)[0],
-      [Field.TOKEN_B]: calculateSlippageAmount(parsedAmounts[Field.TOKEN_B], noLiquidity ? 0 : allowedSlippage)[0]
+      [Field.TOKEN_A]: calculateSlippageAmount(parsedAmountA, noLiquidity ? 0 : allowedSlippage)[0],
+      [Field.TOKEN_B]: calculateSlippageAmount(parsedAmountB, noLiquidity ? 0 : allowedSlippage)[0]
     }
 
     const deadlineFromNow = Math.ceil(Date.now() / 1000) + deadline
 
-    let estimate, method: Function, args: Array<string | string[] | number>, value: BigNumber | null
-    if (tokens[Field.TOKEN_A].equals(WETH[chainId]) || tokens[Field.TOKEN_B].equals(WETH[chainId])) {
-      const tokenBIsETH = tokens[Field.TOKEN_B].equals(WETH[chainId])
+    let estimate,
+      method: (...args: any) => Promise<TransactionResponse>,
+      args: Array<string | string[] | number>,
+      value: BigNumber | null
+    if (tokenA.equals(WETH[chainId]) || tokenB.equals(WETH[chainId])) {
+      const tokenBIsETH = tokenB.equals(WETH[chainId])
       estimate = router.estimateGas.addLiquidityETH
       method = router.addLiquidityETH
       args = [
-        tokens[tokenBIsETH ? Field.TOKEN_A : Field.TOKEN_B].address, // token
-        parsedAmounts[tokenBIsETH ? Field.TOKEN_A : Field.TOKEN_B].raw.toString(), // token desired
+        (tokenBIsETH ? tokenA : tokenB).address, // token
+        (tokenBIsETH ? parsedAmountA : parsedAmountB).raw.toString(), // token desired
         amountsMin[tokenBIsETH ? Field.TOKEN_A : Field.TOKEN_B].toString(), // token min
         amountsMin[tokenBIsETH ? Field.TOKEN_B : Field.TOKEN_A].toString(), // eth min
         account,
         deadlineFromNow
       ]
-      value = BigNumber.from(parsedAmounts[tokenBIsETH ? Field.TOKEN_B : Field.TOKEN_A].raw.toString())
+      value = BigNumber.from((tokenBIsETH ? parsedAmountB : parsedAmountA).raw.toString())
     } else {
       estimate = router.estimateGas.addLiquidity
       method = router.addLiquidity
       args = [
-        tokens[Field.TOKEN_A].address,
-        tokens[Field.TOKEN_B].address,
-        parsedAmounts[Field.TOKEN_A].raw.toString(),
-        parsedAmounts[Field.TOKEN_B].raw.toString(),
+        tokenA.address,
+        tokenB.address,
+        parsedAmountA.raw.toString(),
+        parsedAmountB.raw.toString(),
         amountsMin[Field.TOKEN_A].toString(),
         amountsMin[Field.TOKEN_B].toString(),
         account,
@@ -227,76 +252,14 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
 
   const modalBottom = () => {
     return (
-      <>
-        <RowBetween>
-          <TYPE.body>{tokens[Field.TOKEN_A]?.symbol} Deposited</TYPE.body>
-          <RowFixed>
-            <TokenLogo address={tokens[Field.TOKEN_A]?.address} style={{ marginRight: '8px' }} />
-            <TYPE.body>{parsedAmounts[Field.TOKEN_A]?.toSignificant(6)}</TYPE.body>
-          </RowFixed>
-        </RowBetween>
-        <RowBetween>
-          <TYPE.body>{tokens[Field.TOKEN_B]?.symbol} Deposited</TYPE.body>
-          <RowFixed>
-            <TokenLogo address={tokens[Field.TOKEN_B]?.address} style={{ marginRight: '8px' }} />
-            <TYPE.body>{parsedAmounts[Field.TOKEN_B]?.toSignificant(6)}</TYPE.body>
-          </RowFixed>
-        </RowBetween>
-        <RowBetween>
-          <TYPE.body>Rates</TYPE.body>
-          <TYPE.body>
-            {`1 ${tokens[Field.TOKEN_A]?.symbol} = ${price?.toSignificant(4)} ${tokens[Field.TOKEN_B]?.symbol}`}
-          </TYPE.body>
-        </RowBetween>
-        <RowBetween style={{ justifyContent: 'flex-end' }}>
-          <TYPE.body>
-            {`1 ${tokens[Field.TOKEN_B]?.symbol} = ${price?.invert().toSignificant(4)} ${
-              tokens[Field.TOKEN_A]?.symbol
-            }`}
-          </TYPE.body>
-        </RowBetween>
-        <RowBetween>
-          <TYPE.body>Share of Pool:</TYPE.body>
-          <TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
-        </RowBetween>
-        <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
-          <Text fontWeight={500} fontSize={20}>
-            {noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
-          </Text>
-        </ButtonPrimary>
-      </>
-    )
-  }
-
-  const PriceBar = () => {
-    return (
-      <AutoColumn gap="md">
-        <AutoRow justify="space-around" gap="4px">
-          <AutoColumn justify="center">
-            <TYPE.black>{price?.toSignificant(6) ?? '0'}</TYPE.black>
-            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
-              {tokens[Field.TOKEN_B]?.symbol} per {tokens[Field.TOKEN_A]?.symbol}
-            </Text>
-          </AutoColumn>
-          <AutoColumn justify="center">
-            <TYPE.black>{price?.invert().toSignificant(6) ?? '0'}</TYPE.black>
-            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
-              {tokens[Field.TOKEN_A]?.symbol} per {tokens[Field.TOKEN_B]?.symbol}
-            </Text>
-          </AutoColumn>
-          <AutoColumn justify="center">
-            <TYPE.black>
-              {noLiquidity && price
-                ? '100'
-                : (poolTokenPercentage?.lessThan(ONE_BIPS) ? '<0.01' : poolTokenPercentage?.toFixed(2)) ?? '0'}
-              %
-            </TYPE.black>
-            <Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
-              Share of Pool
-            </Text>
-          </AutoColumn>
-        </AutoRow>
-      </AutoColumn>
+      <ConfirmAddModalBottom
+        price={price}
+        tokens={tokens}
+        parsedAmounts={parsedAmounts}
+        noLiquidity={noLiquidity}
+        onAdd={onAdd}
+        poolTokenPercentage={poolTokenPercentage}
+      />
     )
   }
 
@@ -304,9 +267,39 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
     tokens[Field.TOKEN_A]?.symbol
   } and ${parsedAmounts[Field.TOKEN_B]?.toSignificant(6)} ${tokens[Field.TOKEN_B]?.symbol}`
 
+  const handleTokenASelect = useCallback(
+    (tokenAddress: string) => {
+      const [tokenAId, tokenBId] = [
+        currencyId(chainId, tokenAddress),
+        tokenB ? currencyId(chainId, tokenB.address) : undefined
+      ]
+      if (tokenAId === tokenBId) {
+        history.push(`/add/${tokenAId}/${tokenA ? currencyId(chainId, tokenA.address) : ''}`)
+      } else {
+        history.push(`/add/${tokenAId}/${tokenBId}`)
+      }
+    },
+    [chainId, tokenB, history, tokenA]
+  )
+  const handleTokenBSelect = useCallback(
+    (tokenAddress: string) => {
+      const [tokenAId, tokenBId] = [
+        tokenA ? currencyId(chainId, tokenA.address) : undefined,
+        currencyId(chainId, tokenAddress)
+      ]
+      if (tokenAId === tokenBId) {
+        history.push(`/add/${tokenB ? currencyId(chainId, tokenB.address) : ''}/${tokenAId}`)
+      } else {
+        history.push(`/add/${currencyIdA ? currencyIdA : 'ETH'}/${currencyId(chainId, tokenAddress)}`)
+      }
+    },
+    [tokenA, chainId, history, tokenB, currencyIdA]
+  )
+
   return (
     <>
       <AppBody>
+        <AddRemoveTabs adding={true} />
         <Wrapper>
           <ConfirmationModal
             isOpen={showConfirm}
@@ -344,34 +337,35 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
               </ColumnCenter>
             )}
             <CurrencyInputPanel
-              disableTokenSelect={true}
               field={Field.TOKEN_A}
               value={formattedAmounts[Field.TOKEN_A]}
-              onUserInput={onUserInput}
+              onUserInput={handleTokenAInput}
               onMax={() => {
-                maxAmounts[Field.TOKEN_A] && onUserInput(Field.TOKEN_A, maxAmounts[Field.TOKEN_A].toExact())
+                onUserInput(Field.TOKEN_A, maxAmounts[Field.TOKEN_A]?.toExact() ?? '')
               }}
+              onTokenSelection={handleTokenASelect}
               showMaxButton={!atMaxAmounts[Field.TOKEN_A]}
               token={tokens[Field.TOKEN_A]}
               pair={pair}
-              label="Input"
               id="add-liquidity-input-tokena"
+              showCommonBases
             />
             <ColumnCenter>
               <Plus size="16" color={theme.text2} />
             </ColumnCenter>
             <CurrencyInputPanel
-              disableTokenSelect={true}
               field={Field.TOKEN_B}
               value={formattedAmounts[Field.TOKEN_B]}
-              onUserInput={onUserInput}
+              onUserInput={handleTokenBInput}
+              onTokenSelection={handleTokenBSelect}
               onMax={() => {
-                maxAmounts[Field.TOKEN_B] && onUserInput(Field.TOKEN_B, maxAmounts[Field.TOKEN_B].toExact())
+                onUserInput(Field.TOKEN_B, maxAmounts[Field.TOKEN_B]?.toExact() ?? '')
               }}
               showMaxButton={!atMaxAmounts[Field.TOKEN_B]}
               token={tokens[Field.TOKEN_B]}
               pair={pair}
               id="add-liquidity-input-tokenb"
+              showCommonBases
             />
             {tokens[Field.TOKEN_A] && tokens[Field.TOKEN_B] && (
               <>
@@ -382,7 +376,12 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
                     </TYPE.subHeader>
                   </RowBetween>{' '}
                   <LightCard padding="1rem" borderRadius={'20px'}>
-                    <PriceBar />
+                    <PoolPriceBar
+                      tokens={tokens}
+                      poolTokenPercentage={poolTokenPercentage}
+                      noLiquidity={noLiquidity}
+                      price={price}
+                    />
                   </LightCard>
                 </GreyCard>
               </>
@@ -445,7 +444,7 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
 
       {pair && !noLiquidity ? (
         <AutoColumn style={{ minWidth: '20rem', marginTop: '1rem' }}>
-          <PositionCard pair={pair} minimal={true} />
+          <MinimalPositionCard pair={pair} />
         </AutoColumn>
       ) : null}
     </>

src/pages/AddLiquidity/redirects.tsx

@@ -0,0 +1,42 @@
+import { WETH } from '@uniswap/sdk'
+import React from 'react'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
+import AddLiquidity from './index'
+
+export function RedirectToAddLiquidity() {
+  return <Redirect to="/add/" />
+}
+
+function convertToCurrencyIds(address: string): string {
+  if (Object.values(WETH).some(weth => weth.address === address)) {
+    return 'ETH'
+  }
+  return address
+}
+
+const OLD_PATH_STRUCTURE = /^(0x[a-fA-F0-9]{40})-(0x[a-fA-F0-9]{40})$/
+export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
+  const {
+    match: {
+      params: { currencyIdA }
+    }
+  } = props
+  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
+  if (match?.length) {
+    return <Redirect to={`/add/${convertToCurrencyIds(match[1])}/${convertToCurrencyIds(match[2])}`} />
+  }
+
+  return <AddLiquidity {...props} />
+}
+
+export function RedirectDuplicateTokenIds(props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
+  const {
+    match: {
+      params: { currencyIdA, currencyIdB }
+    }
+  } = props
+  if (currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {
+    return <Redirect to={`/add/${currencyIdA}`} />
+  }
+  return <AddLiquidity {...props} />
+}

src/pages/AddLiquidity/tsconfig.json

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

src/pages/App.tsx

@@ -1,21 +1,23 @@
 import React, { Suspense } from 'react'
-import { BrowserRouter, HashRouter, Route, Switch } from 'react-router-dom'
+import { HashRouter, Route, Switch } from 'react-router-dom'
 import styled from 'styled-components'
 import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
-import Footer from '../components/Footer'
 import Header from '../components/Header'
 import Popups from '../components/Popups'
 import Web3ReactManager from '../components/Web3ReactManager'
 import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
 import AddLiquidity from './AddLiquidity'
-import CreatePool from './CreatePool'
+import {
+  RedirectDuplicateTokenIds,
+  RedirectOldAddLiquidityPathStructure,
+  RedirectToAddLiquidity
+} from './AddLiquidity/redirects'
 import MigrateV1 from './MigrateV1'
 import MigrateV1Exchange from './MigrateV1/MigrateV1Exchange'
 import RemoveV1Exchange from './MigrateV1/RemoveV1Exchange'
 import Pool from './Pool'
 import PoolFinder from './PoolFinder'
 import RemoveLiquidity from './RemoveLiquidity'
-import Send from './Send'
 import Swap from './Swap'
 import { RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
 
@@ -54,17 +56,10 @@ const Marginer = styled.div`
   margin-top: 5rem;
 `
 
-let Router: React.ComponentType
-if (process.env.PUBLIC_URL === '.') {
-  Router = HashRouter
-} else {
-  Router = BrowserRouter
-}
-
 export default function App() {
   return (
     <Suspense fallback={null}>
-      <Router>
+      <HashRouter>
         <Route component={GoogleAnalyticsReporter} />
         <Route component={DarkModeQueryParamReader} />
         <AppWrapper>
@@ -77,11 +72,13 @@ export default function App() {
               <Switch>
                 <Route exact strict path="/swap" component={Swap} />
                 <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-                <Route exact strict path="/send" component={Send} />
+                <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
                 <Route exact strict path="/find" component={PoolFinder} />
                 <Route exact strict path="/pool" component={Pool} />
-                <Route exact strict path="/create" component={CreatePool} />
-                <Route exact strict path="/add/:tokens" component={AddLiquidity} />
+                <Route exact strict path="/create" component={RedirectToAddLiquidity} />
+                <Route exact path="/add" component={AddLiquidity} />
+                <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
+                <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
                 <Route exact strict path="/remove/:tokens" component={RemoveLiquidity} />
                 <Route exact strict path="/migrate/v1" component={MigrateV1} />
                 <Route exact strict path="/migrate/v1/:address" component={MigrateV1Exchange} />
@@ -90,10 +87,9 @@ export default function App() {
               </Switch>
             </Web3ReactManager>
             <Marginer />
-            <Footer />
           </BodyWrapper>
         </AppWrapper>
-      </Router>
+      </HashRouter>
     </Suspense>
   )
 }

src/pages/AppBody.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import NavigationTabs from '../components/NavigationTabs'
 
 export const BodyWrapper = styled.div`
   position: relative;
@@ -17,10 +16,5 @@ export const BodyWrapper = styled.div`
  * The styled container element that wraps the content of most pages and the tabs.
  */
 export default function AppBody({ children }: { children: React.ReactNode }) {
-  return (
-    <BodyWrapper>
-      <NavigationTabs />
-      <>{children}</>
-    </BodyWrapper>
-  )
+  return <BodyWrapper>{children}</BodyWrapper>
 }

src/pages/CreatePool/index.tsx

@@ -1,145 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { RouteComponentProps, Redirect } from 'react-router-dom'
-import { Token, WETH } from '@uniswap/sdk'
-import AppBody from '../AppBody'
-
-import Row, { AutoRow } from '../../components/Row'
-import TokenLogo from '../../components/TokenLogo'
-import TokenSearchModal from '../../components/SearchModal/TokenSearchModal'
-import { Text } from 'rebass'
-import { Plus } from 'react-feather'
-import { TYPE, StyledInternalLink } from '../../theme'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
-import { ButtonPrimary, ButtonDropdown, ButtonDropdownLight } from '../../components/Button'
-
-import { useToken } from '../../hooks/Tokens'
-import { useActiveWeb3React } from '../../hooks'
-import { usePair } from '../../data/Reserves'
-
-enum Fields {
-  TOKEN0 = 0,
-  TOKEN1 = 1
-}
-
-enum STEP {
-  SELECT_TOKENS = 'SELECT_TOKENS', // choose input and output tokens
-  READY_TO_CREATE = 'READY_TO_CREATE', // enable 'create' button
-  SHOW_CREATE_PAGE = 'SHOW_CREATE_PAGE' // show create page
-}
-
-export default function CreatePool({ location }: RouteComponentProps) {
-  const { chainId } = useActiveWeb3React()
-  const [showSearch, setShowSearch] = useState<boolean>(false)
-  const [activeField, setActiveField] = useState<number>(Fields.TOKEN0)
-
-  const [token0Address, setToken0Address] = useState<string>(WETH[chainId].address)
-  const [token1Address, setToken1Address] = useState<string>()
-
-  const token0: Token = useToken(token0Address)
-  const token1: Token = useToken(token1Address)
-
-  const [step, setStep] = useState<string>(STEP.SELECT_TOKENS)
-
-  const pair = usePair(token0, token1)
-
-  // if both tokens selected but pair doesnt exist, enable button to create pair
-  useEffect(() => {
-    if (token0Address && token1Address && pair === null) {
-      setStep(STEP.READY_TO_CREATE)
-    }
-  }, [pair, token0Address, token1Address])
-
-  // if theyve clicked create, show add liquidity page
-  if (step === STEP.SHOW_CREATE_PAGE) {
-    return <Redirect to={{ ...location, pathname: `/add/${token0Address}-${token1Address}` }} push={true} />
-  }
-
-  return (
-    <AppBody>
-      <AutoColumn gap="20px">
-        <AutoColumn gap="24px">
-          {!token0Address ? (
-            <ButtonDropdown
-              onClick={() => {
-                setShowSearch(true)
-                setActiveField(Fields.TOKEN0)
-              }}
-            >
-              <Text fontSize={20}>Select first token</Text>
-            </ButtonDropdown>
-          ) : (
-            <ButtonDropdownLight
-              onClick={() => {
-                setShowSearch(true)
-                setActiveField(Fields.TOKEN0)
-              }}
-            >
-              <Row align="flex-end">
-                <TokenLogo address={token0Address} />
-                <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-                  {token0?.symbol}{' '}
-                </Text>
-                <TYPE.darkGray fontWeight={500} fontSize={16} marginLeft={'8px'}>
-                  {token0?.address === WETH[chainId]?.address && '(default)'}
-                </TYPE.darkGray>
-              </Row>
-            </ButtonDropdownLight>
-          )}
-          <ColumnCenter>
-            <Plus size="16" color="#888D9B" />
-          </ColumnCenter>
-          {!token1Address ? (
-            <ButtonDropdown
-              onClick={() => {
-                setShowSearch(true)
-                setActiveField(Fields.TOKEN1)
-              }}
-              disabled={step !== STEP.SELECT_TOKENS}
-            >
-              <Text fontSize={20}>Select second token</Text>
-            </ButtonDropdown>
-          ) : (
-            <ButtonDropdownLight
-              onClick={() => {
-                setShowSearch(true)
-                setActiveField(Fields.TOKEN1)
-              }}
-            >
-              <Row>
-                <TokenLogo address={token1Address} />
-                <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-                  {token1?.symbol}
-                </Text>
-              </Row>
-            </ButtonDropdownLight>
-          )}
-          {pair ? ( // pair already exists - prompt to add liquidity to existing pool
-            <AutoRow padding="10px" justify="center">
-              <TYPE.body textAlign="center">
-                Pool already exists!{' '}
-                <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>Join the pool.</StyledInternalLink>
-              </TYPE.body>
-            </AutoRow>
-          ) : (
-            <ButtonPrimary disabled={step !== STEP.READY_TO_CREATE} onClick={() => setStep(STEP.SHOW_CREATE_PAGE)}>
-              <Text fontWeight={500} fontSize={20}>
-                Create Pool
-              </Text>
-            </ButtonPrimary>
-          )}
-        </AutoColumn>
-        <TokenSearchModal
-          isOpen={showSearch}
-          onTokenSelect={address => {
-            activeField === Fields.TOKEN0 ? setToken0Address(address) : setToken1Address(address)
-          }}
-          onDismiss={() => {
-            setShowSearch(false)
-          }}
-          hiddenToken={activeField === Fields.TOKEN0 ? token1Address : token0Address}
-          showCommonBases={activeField === Fields.TOKEN0}
-        />
-      </AutoColumn>
-    </AppBody>
-  )
-}

src/pages/MigrateV1/MigrateV1Exchange.tsx

@@ -1,7 +1,6 @@
 import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { ChainId, Fraction, JSBI, Percent, Token, TokenAmount, WETH } from '@uniswap/sdk'
 import React, { useCallback, useMemo, useState } from 'react'
-import { ArrowLeft } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Redirect, RouteComponentProps } from 'react-router'
 import { ButtonConfirmed } from '../../components/Button'
@@ -21,7 +20,7 @@ import { useV1ExchangeContract, useV2MigratorContract } from '../../hooks/useCon
 import { NEVER_RELOAD, useSingleCallResult } from '../../state/multicall/hooks'
 import { useIsTransactionPending, useTransactionAdder } from '../../state/transactions/hooks'
 import { useETHBalances, useTokenBalance } from '../../state/wallet/hooks'
-import { TYPE, ExternalLink } from '../../theme'
+import { TYPE, ExternalLink, BackArrow } from '../../theme'
 import { isAddress, getEtherscanLink } from '../../utils'
 import { BodyWrapper } from '../AppBody'
 import { EmptyState } from './EmptyState'
@@ -344,10 +343,6 @@ export default function MigrateV1Exchange({
   )
   const userLiquidityBalance = useTokenBalance(account, liquidityToken)
 
-  const handleBack = useCallback(() => {
-    history.push('/migrate/v1')
-  }, [history])
-
   // redirect for invalid url params
   if (!validatedAddress || tokenAddress === AddressZero) {
     console.error('Invalid address in path', address)
@@ -358,9 +353,7 @@ export default function MigrateV1Exchange({
     <BodyWrapper style={{ padding: 24 }}>
       <AutoColumn gap="16px">
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
-          <div style={{ cursor: 'pointer' }}>
-            <ArrowLeft onClick={handleBack} />
-          </div>
+          <BackArrow to="/migrate/v1" />
           <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
           <div>
             <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />

src/pages/MigrateV1/RemoveV1Exchange.tsx

@@ -1,7 +1,6 @@
 import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { JSBI, Token, TokenAmount, WETH, Fraction, Percent } from '@uniswap/sdk'
 import React, { useCallback, useMemo, useState } from 'react'
-import { ArrowLeft } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Redirect, RouteComponentProps } from 'react-router'
 import { ButtonConfirmed } from '../../components/Button'
@@ -16,7 +15,7 @@ import { useV1ExchangeContract } from '../../hooks/useContract'
 import { NEVER_RELOAD, useSingleCallResult } from '../../state/multicall/hooks'
 import { useIsTransactionPending, useTransactionAdder } from '../../state/transactions/hooks'
 import { useTokenBalance, useETHBalances } from '../../state/wallet/hooks'
-import { TYPE } from '../../theme'
+import { BackArrow, TYPE } from '../../theme'
 import { isAddress } from '../../utils'
 import { BodyWrapper } from '../AppBody'
 import { EmptyState } from './EmptyState'
@@ -128,7 +127,6 @@ function V1PairRemoval({
 }
 
 export default function RemoveV1Exchange({
-  history,
   match: {
     params: { address }
   }
@@ -149,10 +147,6 @@ export default function RemoveV1Exchange({
   )
   const userLiquidityBalance = useTokenBalance(account, liquidityToken)
 
-  const handleBack = useCallback(() => {
-    history.push('/migrate/v1')
-  }, [history])
-
   // redirect for invalid url params
   if (!validatedAddress || tokenAddress === AddressZero) {
     console.error('Invalid address in path', address)
@@ -163,9 +157,7 @@ export default function RemoveV1Exchange({
     <BodyWrapper style={{ padding: 24 }}>
       <AutoColumn gap="16px">
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
-          <div style={{ cursor: 'pointer' }}>
-            <ArrowLeft onClick={handleBack} />
-          </div>
+          <BackArrow to="/migrate/v1" />
           <TYPE.mediumHeader>Remove V1 Liquidity</TYPE.mediumHeader>
           <div>
             <QuestionHelper text="Remove your Uniswap V1 liquidity tokens." />

src/pages/MigrateV1/index.tsx

@@ -1,7 +1,5 @@
 import { JSBI, Token } from '@uniswap/sdk'
 import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react'
-import { ArrowLeft } from 'react-feather'
-import { RouteComponentProps } from 'react-router'
 import { ThemeContext } from 'styled-components'
 import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
@@ -10,7 +8,7 @@ import { useAllTokenV1Exchanges } from '../../data/V1'
 import { useActiveWeb3React } from '../../hooks'
 import { useToken, useAllTokens } from '../../hooks/Tokens'
 import { useTokenBalancesWithLoadingIndicator } from '../../state/wallet/hooks'
-import { TYPE } from '../../theme'
+import { BackArrow, TYPE } from '../../theme'
 import { LightCard } from '../../components/Card'
 import { BodyWrapper } from '../AppBody'
 import { EmptyState } from './EmptyState'
@@ -20,7 +18,7 @@ import { Dots } from '../../components/swap/styleds'
 import { useAddUserToken } from '../../state/user/hooks'
 import { isDefaultToken, isCustomAddedToken } from '../../utils'
 
-export default function MigrateV1({ history }: RouteComponentProps) {
+export default function MigrateV1() {
   const theme = useContext(ThemeContext)
   const { account, chainId } = useActiveWeb3React()
 
@@ -68,17 +66,11 @@ export default function MigrateV1({ history }: RouteComponentProps) {
   // should never always be false, because a V1 exhchange exists for WETH on all testnets
   const isLoading = Object.keys(V1Exchanges)?.length === 0 || V1LiquidityBalancesLoading
 
-  const handleBackClick = useCallback(() => {
-    history.push('/pool')
-  }, [history])
-
   return (
     <BodyWrapper style={{ padding: 24 }}>
       <AutoColumn gap="16px">
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
-          <div style={{ cursor: 'pointer' }}>
-            <ArrowLeft onClick={handleBackClick} />
-          </div>
+          <BackArrow to="/pool" />
           <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
           <div>
             <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />

src/pages/Pool/index.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useContext, useCallback } from 'react'
-import styled, { ThemeContext } from 'styled-components'
-import { JSBI } from '@uniswap/sdk'
-import { RouteComponentProps } from 'react-router-dom'
+import React, { useContext } from 'react'
+import { ThemeContext } from 'styled-components'
+import { Pair } from '@uniswap/sdk'
+import { Link } from 'react-router-dom'
+import { SwapPoolTabs } from '../../components/NavigationTabs'
 
 import Question from '../../components/QuestionHelper'
-import PairSearchModal from '../../components/SearchModal/PairSearchModal'
-import PositionCard from '../../components/PositionCard'
+import FullPositionCard from '../../components/PositionCard'
 import { useUserHasLiquidityInAllTokens } from '../../data/V1'
 import { useTokenBalancesWithLoadingIndicator } from '../../state/wallet/hooks'
 import { StyledInternalLink, TYPE } from '../../theme'
@@ -13,7 +13,7 @@ import { Text } from 'rebass'
 import { LightCard } from '../../components/Card'
 import { RowBetween } from '../../components/Row'
 import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
+import { AutoColumn } from '../../components/Column'
 
 import { useActiveWeb3React } from '../../hooks'
 import { usePairs } from '../../data/Reserves'
@@ -21,70 +21,47 @@ import { useAllDummyPairs } from '../../state/user/hooks'
 import AppBody from '../AppBody'
 import { Dots } from '../../components/swap/styleds'
 
-const Positions = styled.div`
-  position: relative;
-  width: 100%;
-`
-
-const FixedBottom = styled.div`
-  position: absolute;
-  bottom: -80px;
-  width: 100%;
-`
-
-export default function Pool({ history }: RouteComponentProps) {
+export default function Pool() {
   const theme = useContext(ThemeContext)
   const { account } = useActiveWeb3React()
-  const [showPoolSearch, setShowPoolSearch] = useState(false)
 
   // fetch the user's balances of all tracked V2 LP tokens
-  const V2DummyPairs = useAllDummyPairs()
-  const [V2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
-    account,
-    V2DummyPairs?.map(p => p.liquidityToken)
+  const v2DummyPairs = useAllDummyPairs()
+  const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
+    account ?? undefined,
+    v2DummyPairs?.map(p => p.liquidityToken)
   )
   // fetch the reserves for all V2 pools in which the user has a balance
-  const V2DummyPairsWithABalance = V2DummyPairs.filter(
-    V2DummyPair =>
-      V2PairsBalances[V2DummyPair.liquidityToken.address] &&
-      JSBI.greaterThan(V2PairsBalances[V2DummyPair.liquidityToken.address].raw, JSBI.BigInt(0))
+  const v2DummyPairsWithABalance = v2DummyPairs.filter(dummyPair =>
+    v2PairsBalances[dummyPair.liquidityToken.address]?.greaterThan('0')
   )
-  const V2Pairs = usePairs(
-    V2DummyPairsWithABalance.map(V2DummyPairWithABalance => [
+  const v2Pairs = usePairs(
+    v2DummyPairsWithABalance.map(V2DummyPairWithABalance => [
       V2DummyPairWithABalance.token0,
       V2DummyPairWithABalance.token1
     ])
   )
-  const V2IsLoading =
-    fetchingV2PairBalances || V2Pairs?.length < V2DummyPairsWithABalance.length || V2Pairs?.some(V2Pair => !!!V2Pair)
+  const v2IsLoading =
+    fetchingV2PairBalances || v2Pairs?.length < v2DummyPairsWithABalance.length || v2Pairs?.some(V2Pair => !V2Pair)
 
-  const allV2PairsWithLiquidity = V2Pairs.filter(V2Pair => !!V2Pair).map(V2Pair => (
-    <PositionCard key={V2Pair.liquidityToken.address} pair={V2Pair} />
-  ))
+  const allV2PairsWithLiquidity = v2Pairs
+    .filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
+    .map(V2Pair => <FullPositionCard key={V2Pair.liquidityToken.address} pair={V2Pair} />)
 
   const hasV1Liquidity = useUserHasLiquidityInAllTokens()
 
-  const handleSearchDismiss = useCallback(() => {
-    setShowPoolSearch(false)
-  }, [setShowPoolSearch])
-
   return (
-    <AppBody>
-      <AutoColumn gap="lg" justify="center">
-        <ButtonPrimary
-          id="join-pool-button"
-          padding="16px"
-          onClick={() => {
-            setShowPoolSearch(true)
-          }}
-        >
-          <Text fontWeight={500} fontSize={20}>
-            Join {allV2PairsWithLiquidity?.length > 0 ? 'another' : 'a'} pool
-          </Text>
-        </ButtonPrimary>
+    <>
+      <AppBody>
+        <SwapPoolTabs active={'pool'} />
+        <AutoColumn gap="lg" justify="center">
+          <ButtonPrimary id="join-pool-button" as={Link} style={{ padding: 16 }} to="/add/ETH">
+            <Text fontWeight={500} fontSize={20}>
+              Add Liquidity
+            </Text>
+          </ButtonPrimary>
 
-        <Positions>
-          <AutoColumn gap="12px">
+          <AutoColumn gap="12px" style={{ width: '100%' }}>
             <RowBetween padding={'0 8px'}>
               <Text color={theme.text1} fontWeight={500}>
                 Your Liquidity
@@ -98,7 +75,7 @@ export default function Pool({ history }: RouteComponentProps) {
                   Connect to a wallet to view your liquidity.
                 </TYPE.body>
               </LightCard>
-            ) : V2IsLoading ? (
+            ) : v2IsLoading ? (
               <LightCard padding="40px">
                 <TYPE.body color={theme.text3} textAlign="center">
                   <Dots>Loading</Dots>
@@ -123,16 +100,14 @@ export default function Pool({ history }: RouteComponentProps) {
               </Text>
             </div>
           </AutoColumn>
-          <FixedBottom>
-            <ColumnCenter>
-              <ButtonSecondary width="136px" padding="8px" borderRadius="10px" onClick={() => history.push('/create')}>
-                + Create Pool
-              </ButtonSecondary>
-            </ColumnCenter>
-          </FixedBottom>
-        </Positions>
-        <PairSearchModal isOpen={showPoolSearch} onDismiss={handleSearchDismiss} />
-      </AutoColumn>
-    </AppBody>
+        </AutoColumn>
+      </AppBody>
+
+      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1.5rem' }}>
+        <ButtonSecondary as={Link} style={{ width: 'initial' }} to="/migrate/v1">
+          Migrate V1 Liquidity
+        </ButtonSecondary>
+      </div>
+    </>
   )
 }

src/pages/Pool/styleds.tsx

@@ -17,9 +17,13 @@ export const MaxButton = styled.button<{ width: string }>`
   border: 1px solid ${({ theme }) => theme.primary5};
   border-radius: 0.5rem;
   font-size: 1rem;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0.25rem 0.5rem;
+  `};
   font-weight: 500;
   cursor: pointer;
-  margin-right: 0.5rem;
+  margin: 0.25rem;
+  overflow: hidden;
   color: ${({ theme }) => theme.primary1};
   :hover {
     border: 1px solid ${({ theme }) => theme.primary1};

src/pages/Pool/tsconfig.json

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

src/pages/PoolFinder/index.tsx

@@ -5,7 +5,8 @@ import { Text } from 'rebass'
 import { ButtonDropdownLight } from '../../components/Button'
 import { LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
-import PositionCard from '../../components/PositionCard'
+import { FindPoolTabs } from '../../components/NavigationTabs'
+import { MinimalPositionCard } from '../../components/PositionCard'
 import Row from '../../components/Row'
 import TokenSearchModal from '../../components/SearchModal/TokenSearchModal'
 import TokenLogo from '../../components/TokenLogo'
@@ -28,12 +29,12 @@ export default function PoolFinder() {
   const [showSearch, setShowSearch] = useState<boolean>(false)
   const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
 
-  const [token0Address, setToken0Address] = useState<string>(WETH[chainId].address)
+  const [token0Address, setToken0Address] = useState<string>(chainId ? WETH[chainId].address : '')
   const [token1Address, setToken1Address] = useState<string>()
-  const token0: Token = useToken(token0Address)
-  const token1: Token = useToken(token1Address)
+  const token0: Token | null | undefined = useToken(token0Address)
+  const token1: Token | null | undefined = useToken(token1Address)
 
-  const pair: Pair = usePair(token0, token1)
+  const pair: Pair | null | undefined = usePair(token0 ?? undefined, token1 ?? undefined)
   const addPair = usePairAdder()
   useEffect(() => {
     if (pair) {
@@ -45,7 +46,7 @@ export default function PoolFinder() {
     pair === null ||
     (!!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)))
 
-  const position: TokenAmount = useTokenBalanceTreatingWETHasETH(account, pair?.liquidityToken)
+  const position: TokenAmount | undefined = useTokenBalanceTreatingWETHasETH(account ?? undefined, pair?.liquidityToken)
   const poolImported: boolean = !!position && JSBI.greaterThan(position.raw, JSBI.BigInt(0))
 
   const handleTokenSelect = useCallback(
@@ -61,6 +62,7 @@ export default function PoolFinder() {
 
   return (
     <AppBody>
+      <FindPoolTabs />
       <AutoColumn gap="md">
         <ButtonDropdownLight
           onClick={() => {
@@ -118,13 +120,13 @@ export default function PoolFinder() {
 
         {position ? (
           poolImported ? (
-            <PositionCard pair={pair} minimal={true} border="1px solid #CED0D9" />
+            <MinimalPositionCard pair={pair} border="1px solid #CED0D9" />
           ) : (
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
                 <Text textAlign="center">You don’t have liquidity in this pool yet.</Text>
-                <StyledInternalLink to={`/add/${token0.address}-${token1.address}`}>
-                  <Text textAlign="center">Add liquidity?</Text>
+                <StyledInternalLink to={`/add/${token0?.address}/${token1?.address}`}>
+                  <Text textAlign="center">Add liquidity.</Text>
                 </StyledInternalLink>
               </AutoColumn>
             </LightCard>
@@ -133,7 +135,7 @@ export default function PoolFinder() {
           <LightCard padding="45px 10px">
             <AutoColumn gap="sm" justify="center">
               <Text textAlign="center">No pool found.</Text>
-              <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>Create pool?</StyledInternalLink>
+              <StyledInternalLink to={`/add/${token0Address}/${token1Address}`}>Create pool?</StyledInternalLink>
             </AutoColumn>
           </LightCard>
         ) : (
@@ -149,6 +151,7 @@ export default function PoolFinder() {
         isOpen={showSearch}
         onTokenSelect={handleTokenSelect}
         onDismiss={handleSearchDismiss}
+        showCommonBases
         hiddenToken={activeField === Fields.TOKEN0 ? token1Address : token0Address}
       />
     </AppBody>

src/pages/PoolFinder/tsconfig.json

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

src/pages/RemoveLiquidity/index.tsx

@@ -13,7 +13,8 @@ import { AutoColumn, ColumnCenter } from '../../components/Column'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import DoubleLogo from '../../components/DoubleLogo'
-import PositionCard from '../../components/PositionCard'
+import { AddRemoveTabs } from '../../components/NavigationTabs'
+import { MinimalPositionCard } from '../../components/PositionCard'
 import Row, { RowBetween, RowFixed } from '../../components/Row'
 
 import Slider from '../../components/Slider'
@@ -390,6 +391,7 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
   return (
     <>
       <AppBody>
+        <AddRemoveTabs adding={false} />
         <Wrapper>
           <ConfirmationModal
             isOpen={showConfirm}
@@ -593,7 +595,7 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
 
       {pair ? (
         <AutoColumn style={{ minWidth: '20rem', marginTop: '1rem' }}>
-          <PositionCard pair={pair} minimal={true} />
+          <MinimalPositionCard pair={pair} />
         </AutoColumn>
       ) : null}
     </>

src/pages/Send/index.tsx

@@ -1,583 +0,0 @@
-import { JSBI, TokenAmount, WETH } from '@uniswap/sdk'
-import React, { useContext, useEffect, useState } from 'react'
-import { ArrowDown } from 'react-feather'
-import ReactGA from 'react-ga'
-import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
-import AddressInputPanel from '../../components/AddressInputPanel'
-import { ButtonError, ButtonLight, ButtonPrimary, ButtonSecondary } from '../../components/Button'
-import Card, { BlueCard, GreyCard } from '../../components/Card'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
-import ConfirmationModal from '../../components/ConfirmationModal'
-import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { AutoRow, RowBetween } from '../../components/Row'
-import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
-import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'
-import SwapModalFooter from '../../components/swap/SwapModalFooter'
-import { ArrowWrapper, BottomGrouping, Dots, InputGroup, StyledNumerical, Wrapper } from '../../components/swap/styleds'
-import TradePrice from '../../components/swap/TradePrice'
-import { TransferModalHeader } from '../../components/swap/TransferModalHeader'
-import BetterTradeLink from '../../components/swap/BetterTradeLink'
-import TokenLogo from '../../components/TokenLogo'
-import { TokenWarningCards } from '../../components/TokenWarningCard'
-import { INITIAL_ALLOWED_SLIPPAGE, MIN_ETH, BETTER_TRADE_LINK_THRESHOLD } from '../../constants'
-import { getTradeVersion, isTradeBetter } from '../../data/V1'
-import { useActiveWeb3React } from '../../hooks'
-import { useApproveCallbackFromTrade, ApprovalState } from '../../hooks/useApproveCallback'
-import { useSendCallback } from '../../hooks/useSendCallback'
-import { useSwapCallback } from '../../hooks/useSwapCallback'
-import { useWalletModalToggle, useToggleSettingsMenu } from '../../state/application/hooks'
-import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
-import { Field } from '../../state/swap/actions'
-import {
-  useDefaultsFromURLSearch,
-  useDerivedSwapInfo,
-  useSwapActionHandlers,
-  useSwapState
-} from '../../state/swap/hooks'
-import { useAllTokenBalancesTreatingWETHasETH } from '../../state/wallet/hooks'
-import { CursorPointer, TYPE } from '../../theme'
-import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
-import AppBody from '../AppBody'
-import { useUserSlippageTolerance, useUserDeadline, useExpertModeManager } from '../../state/user/hooks'
-import { ClickableText } from '../Pool/styleds'
-
-export default function Send() {
-  useDefaultsFromURLSearch()
-
-  // text translation
-  // const { t } = useTranslation()
-  const { chainId, account } = useActiveWeb3React()
-  const theme = useContext(ThemeContext)
-
-  // toggle wallet when disconnected
-  const toggleWalletModal = useWalletModalToggle()
-
-  // for expert mode
-  const toggleSettings = useToggleSettingsMenu()
-  const [expertMode] = useExpertModeManager()
-
-  // sending state
-  const [sendingWithSwap, setSendingWithSwap] = useState<boolean>(false)
-  const [recipient, setRecipient] = useState<string>('')
-  const [ENS, setENS] = useState<string>('')
-  const [recipientError, setRecipientError] = useState<string | null>('Enter a Recipient')
-
-  // trade details, check query params for initial state
-  const { independentField, typedValue } = useSwapState()
-  const {
-    parsedAmount,
-    bestTrade: bestTradeV2,
-    tokenBalances,
-    tokens,
-    error: swapError,
-    v1Trade
-  } = useDerivedSwapInfo()
-
-  const toggledVersion = useToggledVersion()
-  const bestTrade = {
-    [Version.v1]: v1Trade,
-    [Version.v2]: bestTradeV2
-  }[toggledVersion]
-
-  const betterTradeLinkVersion: Version | undefined =
-    toggledVersion === Version.v2 && isTradeBetter(bestTradeV2, v1Trade, BETTER_TRADE_LINK_THRESHOLD)
-      ? Version.v1
-      : toggledVersion === Version.v1 && isTradeBetter(v1Trade, bestTradeV2)
-      ? Version.v2
-      : undefined
-
-  const parsedAmounts = {
-    [Field.INPUT]: independentField === Field.INPUT ? parsedAmount : bestTrade?.inputAmount,
-    [Field.OUTPUT]: independentField === Field.OUTPUT ? parsedAmount : bestTrade?.outputAmount
-  }
-
-  const isSwapValid = !swapError && !recipientError && bestTrade
-  const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT
-
-  // modal and loading
-  const [showConfirm, setShowConfirm] = useState<boolean>(false) // show confirmation modal
-  const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false) // waiting for user confirmaion/rejection
-  const [txHash, setTxHash] = useState<string>('')
-  const [deadline] = useUserDeadline() // custom from user settings
-  const [allowedSlippage] = useUserSlippageTolerance() // custom from user settings
-
-  const route = bestTrade?.route
-  const userHasSpecifiedInputOutput =
-    !!tokens[Field.INPUT] &&
-    !!tokens[Field.OUTPUT] &&
-    !!parsedAmounts[independentField] &&
-    parsedAmounts[independentField].greaterThan(JSBI.BigInt(0))
-  const noRoute = !route
-
-  // check whether the user has approved the router on the input token
-  const [approval, approveCallback] = useApproveCallbackFromTrade(bestTrade, allowedSlippage)
-
-  // check if user has gone through approval process, used to show two step buttons, reset on token change
-  const [approvalSubmitted, setApprovalSubmitted] = useState<boolean>(false)
-
-  // mark when a user has submitted an approval, reset onTokenSelection for input field
-  useEffect(() => {
-    if (approval === ApprovalState.PENDING) {
-      setApprovalSubmitted(true)
-    }
-  }, [approval, approvalSubmitted])
-
-  const formattedAmounts = {
-    [independentField]: typedValue,
-    [dependentField]: parsedAmounts[dependentField] ? parsedAmounts[dependentField].toSignificant(6) : ''
-  }
-
-  const slippageAdjustedAmounts = computeSlippageAdjustedAmounts(bestTrade, allowedSlippage)
-
-  const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(bestTrade)
-
-  const { onSwitchTokens, onTokenSelection, onUserInput } = useSwapActionHandlers()
-
-  // reset field if sending with with swap is cancled
-  useEffect(() => {
-    if (!sendingWithSwap) {
-      onTokenSelection(Field.OUTPUT, null)
-    }
-  }, [onTokenSelection, sendingWithSwap])
-
-  const maxAmountInput: TokenAmount =
-    !!tokenBalances[Field.INPUT] &&
-    !!tokens[Field.INPUT] &&
-    !!WETH[chainId] &&
-    tokenBalances[Field.INPUT].greaterThan(
-      new TokenAmount(tokens[Field.INPUT], tokens[Field.INPUT].equals(WETH[chainId]) ? MIN_ETH : '0')
-    )
-      ? tokens[Field.INPUT].equals(WETH[chainId])
-        ? tokenBalances[Field.INPUT].subtract(new TokenAmount(WETH[chainId], MIN_ETH))
-        : tokenBalances[Field.INPUT]
-      : undefined
-  const atMaxAmountInput: boolean =
-    !!maxAmountInput && !!parsedAmounts[Field.INPUT] ? maxAmountInput.equalTo(parsedAmounts[Field.INPUT]) : undefined
-
-  const swapCallback = useSwapCallback(bestTrade, allowedSlippage, deadline, recipient)
-
-  function onSwap() {
-    if (priceImpactWithoutFee && !confirmPriceImpactWithoutFee(priceImpactWithoutFee)) {
-      return
-    }
-
-    setAttemptingTxn(true)
-    swapCallback()
-      .then(hash => {
-        setAttemptingTxn(false)
-        setTxHash(hash)
-
-        ReactGA.event({
-          category: 'Send',
-          action: recipient === account ? 'Swap w/o Send' : 'Swap w/ Send',
-          label: [
-            bestTrade.inputAmount.token.symbol,
-            bestTrade.outputAmount.token.symbol,
-            getTradeVersion(bestTrade)
-          ].join('/')
-        })
-      })
-      .catch(error => {
-        setAttemptingTxn(false)
-        // we only care if the error is something _other_ than the user rejected the tx
-        if (error?.code !== 4001) {
-          console.error(error)
-        }
-      })
-  }
-
-  const sendCallback = useSendCallback(parsedAmounts?.[Field.INPUT], recipient)
-  const isSendValid = sendCallback !== null && (sendingWithSwap === false || approval === ApprovalState.APPROVED)
-
-  async function onSend() {
-    setAttemptingTxn(true)
-    sendCallback()
-      .then(hash => {
-        setAttemptingTxn(false)
-        setTxHash(hash)
-
-        ReactGA.event({ category: 'Send', action: 'Send', label: tokens[Field.INPUT]?.symbol })
-      })
-      .catch(error => {
-        setAttemptingTxn(false)
-        // we only care if the error is something _other_ than the user rejected the tx
-        if (error?.code !== 4001) {
-          console.error(error)
-        }
-      })
-  }
-
-  const [showInverted, setShowInverted] = useState<boolean>(false)
-
-  // warnings on slippage
-  const severity = !sendingWithSwap ? 0 : warningSeverity(priceImpactWithoutFee)
-
-  // show approval buttons when: no errors on input, not approved or pending, or has been approved in this session
-  const showApproveFlow =
-    ((sendingWithSwap && isSwapValid) || (!sendingWithSwap && isSendValid)) &&
-    (approval === ApprovalState.NOT_APPROVED ||
-      approval === ApprovalState.PENDING ||
-      (approvalSubmitted && approval === ApprovalState.APPROVED)) &&
-    !(severity > 3 && !expertMode)
-
-  function modalHeader() {
-    if (!sendingWithSwap) {
-      return <TransferModalHeader amount={parsedAmounts?.[Field.INPUT]} ENSName={ENS} recipient={recipient} />
-    }
-
-    if (sendingWithSwap) {
-      return (
-        <AutoColumn gap="lg" style={{ marginTop: '40px' }}>
-          <AutoColumn gap="sm">
-            <AutoRow gap="10px">
-              <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'30px'} />
-              <Text fontSize={36} fontWeight={500}>
-                {slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4)} {tokens[Field.OUTPUT]?.symbol}
-              </Text>
-            </AutoRow>
-            <BlueCard>
-              Via {parsedAmounts[Field.INPUT]?.toSignificant(4)} {tokens[Field.INPUT]?.symbol} swap
-            </BlueCard>
-          </AutoColumn>
-          <AutoColumn gap="sm">
-            <TYPE.darkGray fontSize={20}>To</TYPE.darkGray>
-            <TYPE.blue fontSize={36}>
-              {recipient?.slice(0, 6)}...{recipient?.slice(36, 42)}
-            </TYPE.blue>
-          </AutoColumn>
-        </AutoColumn>
-      )
-    }
-  }
-
-  function modalBottom() {
-    if (!sendingWithSwap) {
-      return (
-        <AutoColumn>
-          <ButtonPrimary onClick={onSend} id="confirm-send">
-            <Text color="white" fontSize={20}>
-              Confirm send
-            </Text>
-          </ButtonPrimary>
-        </AutoColumn>
-      )
-    }
-
-    if (sendingWithSwap) {
-      return (
-        <SwapModalFooter
-          trade={bestTrade}
-          onSwap={onSwap}
-          setShowInverted={setShowInverted}
-          severity={severity}
-          showInverted={showInverted}
-          slippageAdjustedAmounts={slippageAdjustedAmounts}
-          priceImpactWithoutFee={priceImpactWithoutFee}
-          parsedAmounts={parsedAmounts}
-          realizedLPFee={realizedLPFee}
-          confirmText={severity > 2 ? 'Send Anyway' : 'Confirm Send'}
-        />
-      )
-    }
-  }
-
-  // text to show while loading
-  const pendingText: string = sendingWithSwap
-    ? `Sending ${parsedAmounts[Field.OUTPUT]?.toSignificant(6)} ${tokens[Field.OUTPUT]?.symbol} to ${recipient}`
-    : `Sending ${parsedAmounts[Field.INPUT]?.toSignificant(6)} ${tokens[Field.INPUT]?.symbol} to ${recipient}`
-
-  const allBalances = useAllTokenBalancesTreatingWETHasETH() // only for 0 balance token selection behavior
-  const swapState = useSwapState()
-  function _onTokenSelect(address: string) {
-    // if no user balance - switch view to a send with swap
-    const hasBalance = allBalances?.[address]?.greaterThan('0') ?? false
-    if (!hasBalance) {
-      onTokenSelection(
-        Field.INPUT,
-        swapState[Field.INPUT]?.address === address ? null : swapState[Field.INPUT]?.address
-      )
-      onTokenSelection(Field.OUTPUT, address)
-      setSendingWithSwap(true)
-    } else {
-      onTokenSelection(Field.INPUT, address)
-    }
-  }
-
-  function _onRecipient(result) {
-    if (result.address) {
-      setRecipient(result.address)
-    } else {
-      setRecipient('')
-    }
-    if (result.name) {
-      setENS(result.name)
-    }
-  }
-
-  const sendAmountError =
-    !sendingWithSwap && JSBI.equal(parsedAmounts?.[Field.INPUT]?.raw ?? JSBI.BigInt(0), JSBI.BigInt(0))
-      ? 'Enter an amount'
-      : null
-
-  return (
-    <>
-      {sendingWithSwap ? <TokenWarningCards tokens={tokens} /> : null}
-      <AppBody>
-        <Wrapper id="send-page">
-          <ConfirmationModal
-            isOpen={showConfirm}
-            title={sendingWithSwap ? 'Confirm swap and send' : 'Confirm Send'}
-            onDismiss={() => {
-              setShowConfirm(false)
-              if (txHash) {
-                onUserInput(Field.INPUT, '')
-              }
-              setTxHash('')
-            }}
-            attemptingTxn={attemptingTxn}
-            hash={txHash}
-            topContent={modalHeader}
-            bottomContent={modalBottom}
-            pendingText={pendingText}
-          />
-          {!sendingWithSwap && (
-            <AutoColumn justify="center" style={{ marginBottom: '1rem' }}>
-              <InputGroup gap="lg" justify="center">
-                <StyledNumerical
-                  id="sending-no-swap-input"
-                  value={formattedAmounts[Field.INPUT]}
-                  onUserInput={val => onUserInput(Field.INPUT, val)}
-                />
-                <CurrencyInputPanel
-                  field={Field.INPUT}
-                  value={formattedAmounts[Field.INPUT]}
-                  onUserInput={(field, val) => onUserInput(Field.INPUT, val)}
-                  onMax={() => {
-                    maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact())
-                  }}
-                  showMaxButton={!atMaxAmountInput}
-                  token={tokens[Field.INPUT]}
-                  onTokenSelection={address => _onTokenSelect(address)}
-                  hideBalance={true}
-                  hideInput={true}
-                  showSendWithSwap={true}
-                  label={''}
-                  id="swap-currency-input"
-                  otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
-                />
-              </InputGroup>
-              <RowBetween style={{ width: 'fit-content' }}>
-                <ButtonSecondary
-                  width="fit-content"
-                  style={{ fontSize: '14px' }}
-                  padding={'4px 8px'}
-                  onClick={() => setSendingWithSwap(true)}
-                >
-                  + Add a swap
-                </ButtonSecondary>
-                {account && (
-                  <ButtonSecondary
-                    style={{ fontSize: '14px', marginLeft: '8px' }}
-                    padding={'4px 8px'}
-                    width="fit-content"
-                    disabled={atMaxAmountInput}
-                    onClick={() => {
-                      maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact())
-                    }}
-                  >
-                    Input Max
-                  </ButtonSecondary>
-                )}
-              </RowBetween>
-            </AutoColumn>
-          )}
-          <AutoColumn gap={'md'}>
-            {sendingWithSwap && (
-              <>
-                <CurrencyInputPanel
-                  field={Field.INPUT}
-                  label={independentField === Field.OUTPUT && parsedAmounts[Field.INPUT] ? 'From (estimated)' : 'From'}
-                  value={formattedAmounts[Field.INPUT]}
-                  showMaxButton={!atMaxAmountInput}
-                  token={tokens[Field.INPUT]}
-                  onUserInput={onUserInput}
-                  onMax={() => {
-                    maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact())
-                  }}
-                  onTokenSelection={address => {
-                    setApprovalSubmitted(false)
-                    onTokenSelection(Field.INPUT, address)
-                  }}
-                  otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
-                  id="swap-currency-input"
-                />
-                {sendingWithSwap ? (
-                  <ColumnCenter>
-                    <RowBetween padding="0 1rem 0 12px">
-                      <ArrowWrapper onClick={onSwitchTokens}>
-                        <ArrowDown size="16" color={theme.text2} onClick={onSwitchTokens} />
-                      </ArrowWrapper>
-                      <ButtonSecondary
-                        onClick={() => setSendingWithSwap(false)}
-                        style={{ marginRight: '0px', width: 'auto', fontSize: '14px' }}
-                        padding={'4px 6px'}
-                      >
-                        Remove Swap
-                      </ButtonSecondary>
-                    </RowBetween>
-                  </ColumnCenter>
-                ) : (
-                  <CursorPointer>
-                    <AutoColumn style={{ padding: '0 1rem' }}>
-                      <ArrowWrapper>
-                        <ArrowDown
-                          size="16"
-                          onClick={onSwitchTokens}
-                          color={tokens[Field.INPUT] && tokens[Field.OUTPUT] ? theme.primary1 : theme.text2}
-                        />
-                      </ArrowWrapper>
-                    </AutoColumn>
-                  </CursorPointer>
-                )}
-                <CurrencyInputPanel
-                  field={Field.OUTPUT}
-                  value={formattedAmounts[Field.OUTPUT]}
-                  onUserInput={onUserInput}
-                  label={independentField === Field.INPUT && parsedAmounts[Field.OUTPUT] ? 'To (estimated)' : 'To'}
-                  showMaxButton={false}
-                  token={tokens[Field.OUTPUT]}
-                  onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
-                  otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
-                  id="swap-currency-output"
-                />
-                {sendingWithSwap && (
-                  <RowBetween padding="0 1rem 0 12px">
-                    <ArrowDown size="16" color={theme.text2} />
-                  </RowBetween>
-                )}
-              </>
-            )}
-
-            <AutoColumn gap="lg" justify="center">
-              <AddressInputPanel
-                onChange={_onRecipient}
-                onError={(error: boolean, input) => {
-                  if (error && input !== '') {
-                    setRecipientError('Invalid Recipient')
-                  } else if (error && input === '') {
-                    setRecipientError('Enter a Recipient')
-                  } else {
-                    setRecipientError(null)
-                  }
-                }}
-              />
-            </AutoColumn>
-            {sendingWithSwap && (
-              <Card padding={'.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
-                <AutoColumn gap="4px">
-                  <RowBetween align="center">
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      Price
-                    </Text>
-                    <TradePrice
-                      inputToken={tokens[Field.INPUT]}
-                      outputToken={tokens[Field.OUTPUT]}
-                      price={bestTrade?.executionPrice}
-                      showInverted={showInverted}
-                      setShowInverted={setShowInverted}
-                    />
-                  </RowBetween>
-
-                  {allowedSlippage !== INITIAL_ALLOWED_SLIPPAGE && (
-                    <RowBetween align="center">
-                      <ClickableText>
-                        <Text fontWeight={500} fontSize={14} color={theme.text2} onClick={toggleSettings}>
-                          Slippage Tolerance
-                        </Text>
-                      </ClickableText>
-                      <ClickableText>
-                        <Text fontWeight={500} fontSize={14} color={theme.text2} onClick={toggleSettings}>
-                          {allowedSlippage ? allowedSlippage / 100 : '-'}%
-                        </Text>
-                      </ClickableText>
-                    </RowBetween>
-                  )}
-                </AutoColumn>
-              </Card>
-            )}
-          </AutoColumn>
-          <BottomGrouping>
-            {!account ? (
-              <ButtonLight
-                onClick={() => {
-                  toggleWalletModal()
-                }}
-              >
-                Connect Wallet
-              </ButtonLight>
-            ) : noRoute && userHasSpecifiedInputOutput ? (
-              <GreyCard style={{ textAlign: 'center' }}>
-                <TYPE.main mb="4px">Insufficient liquidity for this trade.</TYPE.main>
-              </GreyCard>
-            ) : showApproveFlow ? (
-              <RowBetween>
-                <ButtonPrimary
-                  onClick={approveCallback}
-                  disabled={approval !== ApprovalState.NOT_APPROVED || approvalSubmitted}
-                  width="48%"
-                  altDisbaledStyle={approval === ApprovalState.PENDING} // show solid button while waiting
-                >
-                  {approval === ApprovalState.PENDING ? (
-                    <Dots>Approving</Dots>
-                  ) : approvalSubmitted && approval === ApprovalState.APPROVED ? (
-                    'Approved'
-                  ) : (
-                    'Approve ' + tokens[Field.INPUT]?.symbol
-                  )}
-                </ButtonPrimary>
-                <ButtonError
-                  onClick={() => {
-                    expertMode ? (sendingWithSwap ? onSwap() : onSend()) : setShowConfirm(true)
-                  }}
-                  width="48%"
-                  id="send-button"
-                  disabled={approval !== ApprovalState.APPROVED}
-                  error={sendingWithSwap && isSwapValid && severity > 2}
-                >
-                  <Text fontSize={16} fontWeight={500}>
-                    {severity > 3 && !expertMode ? `Price Impact High` : `Send${severity > 2 ? ' Anyway' : ''}`}
-                  </Text>
-                </ButtonError>
-              </RowBetween>
-            ) : (
-              <ButtonError
-                onClick={() => {
-                  expertMode ? (sendingWithSwap ? onSwap() : onSend()) : setShowConfirm(true)
-                }}
-                id="send-button"
-                disabled={
-                  (sendingWithSwap && !isSwapValid) ||
-                  (!sendingWithSwap && !isSendValid) ||
-                  (severity > 3 && !expertMode && sendingWithSwap)
-                }
-                error={sendingWithSwap && isSwapValid && severity > 2}
-              >
-                <Text fontSize={20} fontWeight={500}>
-                  {(sendingWithSwap ? swapError : null) ||
-                    sendAmountError ||
-                    recipientError ||
-                    (severity > 3 && !expertMode && `Price Impact Too High`) ||
-                    `Send${severity > 2 ? ' Anyway' : ''}`}
-                </Text>
-              </ButtonError>
-            )}
-            {betterTradeLinkVersion && <BetterTradeLink version={betterTradeLinkVersion} />}
-          </BottomGrouping>
-        </Wrapper>
-      </AppBody>
-
-      <AdvancedSwapDetailsDropdown trade={bestTrade} />
-    </>
-  )
-}

src/pages/Swap/index.tsx

@@ -1,15 +1,17 @@
-import { JSBI, TokenAmount, WETH } from '@uniswap/sdk'
-import React, { useContext, useState, useEffect } from 'react'
+import { JSBI, TokenAmount } from '@uniswap/sdk'
+import React, { useContext, useState, useEffect, useCallback } from 'react'
 import { ArrowDown } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
+import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
 import Card, { GreyCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import { RowBetween } from '../../components/Row'
+import { SwapPoolTabs } from '../../components/NavigationTabs'
+import { AutoRow, RowBetween } from '../../components/Row'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'
 import { ArrowWrapper, BottomGrouping, Dots, Wrapper } from '../../components/swap/styleds'
@@ -20,11 +22,12 @@ import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import { TokenWarningCards } from '../../components/TokenWarningCard'
 import { useActiveWeb3React } from '../../hooks'
 import { useApproveCallbackFromTrade, ApprovalState } from '../../hooks/useApproveCallback'
+import useENSAddress from '../../hooks/useENSAddress'
 import { useSwapCallback } from '../../hooks/useSwapCallback'
 import { useWalletModalToggle, useToggleSettingsMenu } from '../../state/application/hooks'
 import { useExpertModeManager, useUserSlippageTolerance, useUserDeadline } from '../../state/user/hooks'
 
-import { INITIAL_ALLOWED_SLIPPAGE, MIN_ETH, BETTER_TRADE_LINK_THRESHOLD } from '../../constants'
+import { INITIAL_ALLOWED_SLIPPAGE, BETTER_TRADE_LINK_THRESHOLD } from '../../constants'
 import { getTradeVersion, isTradeBetter } from '../../data/V1'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
 import { Field } from '../../state/swap/actions'
@@ -34,7 +37,8 @@ import {
   useSwapActionHandlers,
   useSwapState
 } from '../../state/swap/hooks'
-import { CursorPointer, TYPE } from '../../theme'
+import { CursorPointer, LinkStyledButton, TYPE } from '../../theme'
+import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
 import { ClickableText } from '../Pool/styleds'
@@ -42,7 +46,7 @@ import { ClickableText } from '../Pool/styleds'
 export default function Swap() {
   useDefaultsFromURLSearch()
 
-  const { chainId, account } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
   // toggle wallet when disconnected
@@ -57,30 +61,45 @@ export default function Swap() {
   const [allowedSlippage] = useUserSlippageTolerance()
 
   // swap state
-  const { independentField, typedValue } = useSwapState()
-  const { bestTrade: bestTradeV2, tokenBalances, parsedAmount, tokens, error, v1Trade } = useDerivedSwapInfo()
+  const { independentField, typedValue, recipient } = useSwapState()
+  const { v1Trade, v2Trade, tokenBalances, parsedAmount, tokens, error } = useDerivedSwapInfo()
+  const { address: recipientAddress } = useENSAddress(recipient)
   const toggledVersion = useToggledVersion()
-  const bestTrade = {
-    [Version.v1]: v1Trade,
-    [Version.v2]: bestTradeV2
-  }[toggledVersion]
+  const trade =
+    {
+      [Version.v1]: v1Trade,
+      [Version.v2]: v2Trade
+    }[toggledVersion] ?? undefined
 
   const betterTradeLinkVersion: Version | undefined =
-    toggledVersion === Version.v2 && isTradeBetter(bestTradeV2, v1Trade, BETTER_TRADE_LINK_THRESHOLD)
+    toggledVersion === Version.v2 && isTradeBetter(v2Trade, v1Trade, BETTER_TRADE_LINK_THRESHOLD)
       ? Version.v1
-      : toggledVersion === Version.v1 && isTradeBetter(v1Trade, bestTradeV2)
+      : toggledVersion === Version.v1 && isTradeBetter(v1Trade, v2Trade)
       ? Version.v2
       : undefined
 
   const parsedAmounts = {
-    [Field.INPUT]: independentField === Field.INPUT ? parsedAmount : bestTrade?.inputAmount,
-    [Field.OUTPUT]: independentField === Field.OUTPUT ? parsedAmount : bestTrade?.outputAmount
+    [Field.INPUT]: independentField === Field.INPUT ? parsedAmount : trade?.inputAmount,
+    [Field.OUTPUT]: independentField === Field.OUTPUT ? parsedAmount : trade?.outputAmount
   }
 
-  const { onSwitchTokens, onTokenSelection, onUserInput } = useSwapActionHandlers()
+  const { onSwitchTokens, onTokenSelection, onUserInput, onChangeRecipient } = useSwapActionHandlers()
   const isValid = !error
   const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT
 
+  const handleTypeInput = useCallback(
+    (field, value) => {
+      onUserInput(Field.INPUT, value)
+    },
+    [onUserInput]
+  )
+  const handleTypeOutput = useCallback(
+    (field, value) => {
+      onUserInput(Field.OUTPUT, value)
+    },
+    [onUserInput]
+  )
+
   // modal and loading
   const [showConfirm, setShowConfirm] = useState<boolean>(false) // show confirmation modal
   const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false) // waiting for user confirmaion/rejection
@@ -88,19 +107,17 @@ export default function Swap() {
 
   const formattedAmounts = {
     [independentField]: typedValue,
-    [dependentField]: parsedAmounts[dependentField] ? parsedAmounts[dependentField].toSignificant(6) : ''
+    [dependentField]: parsedAmounts[dependentField]?.toSignificant(6) ?? ''
   }
 
-  const route = bestTrade?.route
-  const userHasSpecifiedInputOutput =
-    !!tokens[Field.INPUT] &&
-    !!tokens[Field.OUTPUT] &&
-    !!parsedAmounts[independentField] &&
-    parsedAmounts[independentField].greaterThan(JSBI.BigInt(0))
+  const route = trade?.route
+  const userHasSpecifiedInputOutput = Boolean(
+    tokens[Field.INPUT] && tokens[Field.OUTPUT] && parsedAmounts[independentField]?.greaterThan(JSBI.BigInt(0))
+  )
   const noRoute = !route
 
   // check whether the user has approved the router on the input token
-  const [approval, approveCallback] = useApproveCallbackFromTrade(bestTrade, allowedSlippage)
+  const [approval, approveCallback] = useApproveCallbackFromTrade(trade, allowedSlippage)
 
   // check if user has gone through approval process, used to show two step buttons, reset on token change
   const [approvalSubmitted, setApprovalSubmitted] = useState<boolean>(false)
@@ -112,31 +129,23 @@ export default function Swap() {
     }
   }, [approval, approvalSubmitted])
 
-  const maxAmountInput: TokenAmount =
-    !!tokenBalances[Field.INPUT] &&
-    !!tokens[Field.INPUT] &&
-    !!WETH[chainId] &&
-    tokenBalances[Field.INPUT].greaterThan(
-      new TokenAmount(tokens[Field.INPUT], tokens[Field.INPUT].equals(WETH[chainId]) ? MIN_ETH : '0')
-    )
-      ? tokens[Field.INPUT].equals(WETH[chainId])
-        ? tokenBalances[Field.INPUT].subtract(new TokenAmount(WETH[chainId], MIN_ETH))
-        : tokenBalances[Field.INPUT]
-      : undefined
-  const atMaxAmountInput: boolean =
-    maxAmountInput && parsedAmounts[Field.INPUT] ? maxAmountInput.equalTo(parsedAmounts[Field.INPUT]) : undefined
+  const maxAmountInput: TokenAmount | undefined = maxAmountSpend(tokenBalances[Field.INPUT])
+  const atMaxAmountInput = Boolean(maxAmountInput && parsedAmounts[Field.INPUT]?.equalTo(maxAmountInput))
 
-  const slippageAdjustedAmounts = computeSlippageAdjustedAmounts(bestTrade, allowedSlippage)
+  const slippageAdjustedAmounts = computeSlippageAdjustedAmounts(trade, allowedSlippage)
 
   // the callback to execute the swap
-  const swapCallback = useSwapCallback(bestTrade, allowedSlippage, deadline)
+  const swapCallback = useSwapCallback(trade, allowedSlippage, deadline, recipient)
 
-  const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(bestTrade)
+  const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(trade)
 
   function onSwap() {
     if (priceImpactWithoutFee && !confirmPriceImpactWithoutFee(priceImpactWithoutFee)) {
       return
     }
+    if (!swapCallback) {
+      return
+    }
     setAttemptingTxn(true)
     swapCallback()
       .then(hash => {
@@ -145,12 +154,15 @@ export default function Swap() {
 
         ReactGA.event({
           category: 'Swap',
-          action: 'Swap w/o Send',
-          label: [
-            bestTrade.inputAmount.token.symbol,
-            bestTrade.outputAmount.token.symbol,
-            getTradeVersion(bestTrade)
-          ].join('/')
+          action:
+            recipient === null
+              ? 'Swap w/o Send'
+              : (recipientAddress ?? recipient) === account
+              ? 'Swap w/o Send + recipient'
+              : 'Swap w/ Send',
+          label: [trade?.inputAmount?.token?.symbol, trade?.outputAmount?.token?.symbol, getTradeVersion(trade)].join(
+            '/'
+          )
         })
       })
       .catch(error => {
@@ -185,6 +197,7 @@ export default function Swap() {
         slippageAdjustedAmounts={slippageAdjustedAmounts}
         priceImpactSeverity={priceImpactSeverity}
         independentField={independentField}
+        recipient={recipient}
       />
     )
   }
@@ -201,7 +214,7 @@ export default function Swap() {
         parsedAmounts={parsedAmounts}
         priceImpactWithoutFee={priceImpactWithoutFee}
         slippageAdjustedAmounts={slippageAdjustedAmounts}
-        trade={bestTrade}
+        trade={trade}
       />
     )
   }
@@ -215,6 +228,7 @@ export default function Swap() {
     <>
       <TokenWarningCards tokens={tokens} />
       <AppBody>
+        <SwapPoolTabs active={'swap'} />
         <Wrapper id="swap-page">
           <ConfirmationModal
             isOpen={showConfirm}
@@ -235,28 +249,28 @@ export default function Swap() {
           />
 
           <AutoColumn gap={'md'}>
-            <>
-              <CurrencyInputPanel
-                field={Field.INPUT}
-                label={independentField === Field.OUTPUT ? 'From (estimated)' : 'From'}
-                value={formattedAmounts[Field.INPUT]}
-                showMaxButton={!atMaxAmountInput}
-                token={tokens[Field.INPUT]}
-                onUserInput={onUserInput}
-                onMax={() => {
-                  maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact())
-                }}
-                onTokenSelection={address => {
-                  setApprovalSubmitted(false) // reset 2 step UI for approvals
-                  onTokenSelection(Field.INPUT, address)
-                }}
-                otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
-                id="swap-currency-input"
-              />
+            <CurrencyInputPanel
+              field={Field.INPUT}
+              label={independentField === Field.OUTPUT ? 'From (estimated)' : 'From'}
+              value={formattedAmounts[Field.INPUT]}
+              showMaxButton={!atMaxAmountInput}
+              token={tokens[Field.INPUT]}
+              onUserInput={handleTypeInput}
+              onMax={() => {
+                maxAmountInput && onUserInput(Field.INPUT, maxAmountInput.toExact())
+              }}
+              onTokenSelection={address => {
+                setApprovalSubmitted(false) // reset 2 step UI for approvals
+                onTokenSelection(Field.INPUT, address)
+              }}
+              otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
+              id="swap-currency-input"
+            />
 
-              <CursorPointer>
-                <AutoColumn style={{ padding: '0 1rem' }}>
-                  <ArrowWrapper>
+            <CursorPointer>
+              <AutoColumn justify="space-between">
+                <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
+                  <ArrowWrapper clickable>
                     <ArrowDown
                       size="16"
                       onClick={() => {
@@ -266,20 +280,39 @@ export default function Swap() {
                       color={tokens[Field.INPUT] && tokens[Field.OUTPUT] ? theme.primary1 : theme.text2}
                     />
                   </ArrowWrapper>
-                </AutoColumn>
-              </CursorPointer>
-              <CurrencyInputPanel
-                field={Field.OUTPUT}
-                value={formattedAmounts[Field.OUTPUT]}
-                onUserInput={onUserInput}
-                label={independentField === Field.INPUT ? 'To (estimated)' : 'To'}
-                showMaxButton={false}
-                token={tokens[Field.OUTPUT]}
-                onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
-                otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
-                id="swap-currency-output"
-              />
-            </>
+                  {recipient === null ? (
+                    <LinkStyledButton id="add-recipient-button" onClick={() => onChangeRecipient('')}>
+                      + add recipient (optional)
+                    </LinkStyledButton>
+                  ) : null}
+                </AutoRow>
+              </AutoColumn>
+            </CursorPointer>
+            <CurrencyInputPanel
+              field={Field.OUTPUT}
+              value={formattedAmounts[Field.OUTPUT]}
+              onUserInput={handleTypeOutput}
+              label={independentField === Field.INPUT ? 'To (estimated)' : 'To'}
+              showMaxButton={false}
+              token={tokens[Field.OUTPUT]}
+              onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
+              otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
+              id="swap-currency-output"
+            />
+
+            {recipient !== null ? (
+              <>
+                <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
+                  <ArrowWrapper clickable={false}>
+                    <ArrowDown size="16" color={theme.text2} />
+                  </ArrowWrapper>
+                  <LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
+                    - remove recipient
+                  </LinkStyledButton>
+                </AutoRow>
+                <AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} />
+              </>
+            ) : null}
 
             <Card padding={'.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
               <AutoColumn gap="4px">
@@ -290,7 +323,7 @@ export default function Swap() {
                   <TradePrice
                     inputToken={tokens[Field.INPUT]}
                     outputToken={tokens[Field.OUTPUT]}
-                    price={bestTrade?.executionPrice}
+                    price={trade?.executionPrice}
                     showInverted={showInverted}
                     setShowInverted={setShowInverted}
                   />
@@ -371,7 +404,7 @@ export default function Swap() {
         </Wrapper>
       </AppBody>
 
-      <AdvancedSwapDetailsDropdown trade={bestTrade} />
+      <AdvancedSwapDetailsDropdown trade={trade} />
     </>
   )
 }

src/pages/Swap/redirects.tsx

@@ -1,7 +1,7 @@
-// Redirects to swap but only replace the pathname
 import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
 
+// Redirects to swap but only replace the pathname
 export function RedirectPathToSwapOnly({ location }: RouteComponentProps) {
   return <Redirect to={{ ...location, pathname: '/swap' }} />
 }

src/pages/Swap/tsconfig.json

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

src/state/burn/actions.ts

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit'
+import { ChainId } from '@uniswap/sdk'
 
 export enum Field {
   LIQUIDITY_PERCENT = 'LIQUIDITY_PERCENT',
@@ -8,3 +9,7 @@ export enum Field {
 }
 
 export const typeInput = createAction<{ field: Field; typedValue: string }>('typeInputBurn')
+export const setBurnDefaultsFromURLMatchParams = createAction<{
+  chainId: ChainId
+  params: { tokens: string }
+}>('setBurnDefaultsFromURLMatchParams')

src/state/burn/hooks.ts

@@ -3,8 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { useActiveWeb3React } from '../../hooks'
 import { AppDispatch, AppState } from '../index'
-import { Field, typeInput } from './actions'
-import { setDefaultsFromURLMatchParams } from '../mint/actions'
+import { Field, setBurnDefaultsFromURLMatchParams, typeInput } from './actions'
 import { useToken } from '../../hooks/Tokens'
 import { Token, Pair, TokenAmount, Percent, JSBI, Route } from '@uniswap/sdk'
 import { usePair } from '../../data/Reserves'
@@ -177,11 +176,11 @@ export function useBurnActionHandlers(): {
 }
 
 // updates the burn state to use the appropriate tokens, given the route
-export function useDefaultsFromURLMatchParams(params: { [k: string]: string }) {
+export function useDefaultsFromURLMatchParams(params: { tokens: string }) {
   const { chainId } = useActiveWeb3React()
   const dispatch = useDispatch<AppDispatch>()
   useEffect(() => {
     if (!chainId) return
-    dispatch(setDefaultsFromURLMatchParams({ chainId, params }))
+    dispatch(setBurnDefaultsFromURLMatchParams({ chainId, params }))
   }, [dispatch, chainId, params])
 }

src/state/burn/reducer.ts

@@ -1,10 +1,10 @@
 import { createReducer } from '@reduxjs/toolkit'
+import { ChainId, WETH } from '@uniswap/sdk'
+import { isAddress } from '../../utils'
 
-import { Field, typeInput } from './actions'
-import { setDefaultsFromURLMatchParams } from '../mint/actions'
-import { parseTokens } from '../mint/reducer'
+import { Field, setBurnDefaultsFromURLMatchParams, typeInput } from './actions'
 
-export interface MintState {
+export interface BurnState {
   readonly independentField: Field
   readonly typedValue: string
   readonly [Field.TOKEN_A]: {
@@ -15,7 +15,7 @@ export interface MintState {
   }
 }
 
-const initialState: MintState = {
+const initialState: BurnState = {
   independentField: Field.LIQUIDITY_PERCENT,
   typedValue: '0',
   [Field.TOKEN_A]: {
@@ -26,9 +26,27 @@ const initialState: MintState = {
   }
 }
 
-export default createReducer<MintState>(initialState, builder =>
+export function parseTokens(chainId: ChainId, tokens: string): string[] {
+  return (
+    tokens
+      // split by '-'
+      .split('-')
+      // map to addresses
+      .map((token): string =>
+        isAddress(token) ? token : token.toLowerCase() === 'ETH'.toLowerCase() ? WETH[chainId]?.address ?? '' : ''
+      )
+      //remove duplicates
+      .filter((token, i, array) => array.indexOf(token) === i)
+      // add two empty elements for cases where the array is length 0
+      .concat(['', ''])
+      // only consider the first 2 elements
+      .slice(0, 2)
+  )
+}
+
+export default createReducer<BurnState>(initialState, builder =>
   builder
-    .addCase(setDefaultsFromURLMatchParams, (state, { payload: { chainId, params } }) => {
+    .addCase(setBurnDefaultsFromURLMatchParams, (state, { payload: { chainId, params } }) => {
       const tokens = parseTokens(chainId, params?.tokens ?? '')
       return {
         independentField: Field.LIQUIDITY_PERCENT,

src/state/mint/actions.ts

@@ -1,13 +1,9 @@
 import { createAction } from '@reduxjs/toolkit'
-import { RouteComponentProps } from 'react-router-dom'
 
 export enum Field {
   TOKEN_A = 'TOKEN_A',
   TOKEN_B = 'TOKEN_B'
 }
 
-export const setDefaultsFromURLMatchParams = createAction<{
-  chainId: number
-  params: RouteComponentProps<{ [k: string]: string }>['match']['params']
-}>('setDefaultsFromMatch')
 export const typeInput = createAction<{ field: Field; typedValue: string; noLiquidity: boolean }>('typeInputMint')
+export const resetMintState = createAction<void>('resetMintState')

src/state/mint/hooks.ts

@@ -1,11 +1,10 @@
-import { useEffect, useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Token, TokenAmount, Route, JSBI, Price, Percent, Pair } from '@uniswap/sdk'
 
 import { useActiveWeb3React } from '../../hooks'
 import { AppDispatch, AppState } from '../index'
-import { setDefaultsFromURLMatchParams, Field, typeInput } from './actions'
-import { useToken } from '../../hooks/Tokens'
+import { Field, typeInput } from './actions'
 import { useTokenBalancesTreatWETHAsETH } from '../wallet/hooks'
 import { usePair } from '../../data/Reserves'
 import { useTotalSupply } from '../../data/TotalSupply'
@@ -17,7 +16,10 @@ export function useMintState(): AppState['mint'] {
   return useSelector<AppState, AppState['mint']>(state => state.mint)
 }
 
-export function useDerivedMintInfo(): {
+export function useDerivedMintInfo(
+  tokenA: Token | undefined,
+  tokenB: Token | undefined
+): {
   dependentField: Field
   tokens: { [field in Field]?: Token }
   pair?: Pair | null
@@ -31,19 +33,11 @@ export function useDerivedMintInfo(): {
 } {
   const { account } = useActiveWeb3React()
 
-  const {
-    independentField,
-    typedValue,
-    otherTypedValue,
-    [Field.TOKEN_A]: { address: tokenAAddress },
-    [Field.TOKEN_B]: { address: tokenBAddress }
-  } = useMintState()
+  const { independentField, typedValue, otherTypedValue } = useMintState()
 
   const dependentField = independentField === Field.TOKEN_A ? Field.TOKEN_B : Field.TOKEN_A
 
   // tokens
-  const tokenA = useToken(tokenAAddress)
-  const tokenB = useToken(tokenBAddress)
   const tokens: { [field in Field]?: Token } = useMemo(
     () => ({
       [Field.TOKEN_A]: tokenA,
@@ -172,16 +166,16 @@ export function useDerivedMintInfo(): {
   }
 }
 
-export function useMintActionHandlers(): {
+export function useMintActionHandlers(
+  noLiquidity: boolean | undefined
+): {
   onUserInput: (field: Field, typedValue: string) => void
 } {
   const dispatch = useDispatch<AppDispatch>()
 
-  const { noLiquidity } = useDerivedMintInfo()
-
   const onUserInput = useCallback(
     (field: Field, typedValue: string) => {
-      dispatch(typeInput({ field, typedValue, noLiquidity: noLiquidity === true ? true : false }))
+      dispatch(typeInput({ field, typedValue, noLiquidity: noLiquidity === true }))
     },
     [dispatch, noLiquidity]
   )
@@ -190,13 +184,3 @@ export function useMintActionHandlers(): {
     onUserInput
   }
 }
-
-// updates the mint state to use the appropriate tokens, given the route
-export function useDefaultsFromURLMatchParams(params: { [k: string]: string }) {
-  const { chainId } = useActiveWeb3React()
-  const dispatch = useDispatch<AppDispatch>()
-  useEffect(() => {
-    if (!chainId) return
-    dispatch(setDefaultsFromURLMatchParams({ chainId, params }))
-  }, [dispatch, chainId, params])
-}

src/state/mint/reducer.test.ts

@@ -1,7 +1,6 @@
-import { ChainId, WETH } from '@uniswap/sdk'
 import { createStore, Store } from 'redux'
 
-import { Field, setDefaultsFromURLMatchParams } from './actions'
+import { Field, typeInput } from './actions'
 import reducer, { MintState } from './reducer'
 
 describe('mint reducer', () => {
@@ -11,30 +10,19 @@ describe('mint reducer', () => {
     store = createStore(reducer, {
       independentField: Field.TOKEN_A,
       typedValue: '',
-      otherTypedValue: '',
-      [Field.TOKEN_A]: { address: '' },
-      [Field.TOKEN_B]: { address: '' }
+      otherTypedValue: ''
     })
   })
 
-  describe('setDefaultsFromURLMatchParams', () => {
-    test('ETH to DAI', () => {
-      store.dispatch(
-        setDefaultsFromURLMatchParams({
-          chainId: ChainId.MAINNET,
-          params: {
-            tokens: 'ETH-0x6b175474e89094c44da98b954eedeac495271d0f'
-          }
-        })
-      )
-
-      expect(store.getState()).toEqual({
-        independentField: Field.TOKEN_A,
-        typedValue: '',
-        otherTypedValue: '',
-        [Field.TOKEN_A]: { address: WETH[ChainId.MAINNET].address },
-        [Field.TOKEN_B]: { address: '0x6b175474e89094c44da98b954eedeac495271d0f' }
-      })
+  describe('typeInput', () => {
+    it('sets typed value', () => {
+      store.dispatch(typeInput({ field: Field.TOKEN_A, typedValue: '1.0', noLiquidity: false }))
+      expect(store.getState()).toEqual({ independentField: Field.TOKEN_A, typedValue: '1.0', otherTypedValue: '' })
+    })
+    it('clears other value', () => {
+      store.dispatch(typeInput({ field: Field.TOKEN_A, typedValue: '1.0', noLiquidity: false }))
+      store.dispatch(typeInput({ field: Field.TOKEN_B, typedValue: '1.0', noLiquidity: false }))
+      expect(store.getState()).toEqual({ independentField: Field.TOKEN_B, typedValue: '1.0', otherTypedValue: '' })
     })
   })
 })

src/state/mint/reducer.ts

@@ -1,71 +1,21 @@
 import { createReducer } from '@reduxjs/toolkit'
-import { ChainId, WETH } from '@uniswap/sdk'
-
-import { isAddress } from '../../utils'
-import { Field, setDefaultsFromURLMatchParams, typeInput } from './actions'
+import { Field, resetMintState, typeInput } from './actions'
 
 export interface MintState {
   readonly independentField: Field
   readonly typedValue: string
   readonly otherTypedValue: string // for the case when there's no liquidity
-  readonly [Field.TOKEN_A]: {
-    readonly address: string
-  }
-  readonly [Field.TOKEN_B]: {
-    readonly address: string
-  }
 }
 
 const initialState: MintState = {
   independentField: Field.TOKEN_A,
   typedValue: '',
-  otherTypedValue: '',
-  [Field.TOKEN_A]: {
-    address: ''
-  },
-  [Field.TOKEN_B]: {
-    address: ''
-  }
-}
-
-export function parseTokens(chainId: number, tokens: string): string[] {
-  return (
-    tokens
-      // split by '-'
-      .split('-')
-      // map to addresses
-      .map((token): string =>
-        isAddress(token)
-          ? token
-          : token.toLowerCase() === 'ETH'.toLowerCase()
-          ? WETH[chainId as ChainId]?.address ?? ''
-          : ''
-      )
-      //remove duplicates
-      .filter((token, i, array) => array.indexOf(token) === i)
-      // add two empty elements for cases where the array is length 0
-      .concat(['', ''])
-      // only consider the first 2 elements
-      .slice(0, 2)
-  )
+  otherTypedValue: ''
 }
 
 export default createReducer<MintState>(initialState, builder =>
   builder
-    .addCase(setDefaultsFromURLMatchParams, (state, { payload: { chainId, params } }) => {
-      const tokens = parseTokens(chainId, params?.tokens ?? '')
-      return {
-        independentField: Field.TOKEN_A,
-        typedValue: '',
-        otherTypedValue: '',
-        [Field.TOKEN_A]: {
-          address: tokens[0]
-        },
-        [Field.TOKEN_B]: {
-          address: tokens[1]
-        }
-      }
-    })
+    .addCase(resetMintState, () => initialState)
     .addCase(typeInput, (state, { payload: { field, typedValue, noLiquidity } }) => {
       if (noLiquidity) {
         // they're typing into the field they've last typed in

src/state/multicall/reducer.test.ts

@@ -192,6 +192,54 @@ describe('multicall reducer', () => {
         }
       })
     })
+
+    it('updates state to fetching even if already fetching older block', () => {
+      store.dispatch(
+        fetchingMulticallResults({
+          chainId: 1,
+          fetchingBlockNumber: 2,
+          calls: [{ address: DAI_ADDRESS, callData: '0x0' }]
+        })
+      )
+      store.dispatch(
+        fetchingMulticallResults({
+          chainId: 1,
+          fetchingBlockNumber: 3,
+          calls: [{ address: DAI_ADDRESS, callData: '0x0' }]
+        })
+      )
+      expect(store.getState()).toEqual({
+        callResults: {
+          [1]: {
+            [`${DAI_ADDRESS}-0x0`]: { fetchingBlockNumber: 3 }
+          }
+        }
+      })
+    })
+
+    it('does not do update if fetching newer block', () => {
+      store.dispatch(
+        fetchingMulticallResults({
+          chainId: 1,
+          fetchingBlockNumber: 2,
+          calls: [{ address: DAI_ADDRESS, callData: '0x0' }]
+        })
+      )
+      store.dispatch(
+        fetchingMulticallResults({
+          chainId: 1,
+          fetchingBlockNumber: 1,
+          calls: [{ address: DAI_ADDRESS, callData: '0x0' }]
+        })
+      )
+      expect(store.getState()).toEqual({
+        callResults: {
+          [1]: {
+            [`${DAI_ADDRESS}-0x0`]: { fetchingBlockNumber: 2 }
+          }
+        }
+      })
+    })
   })
 
   describe('errorFetchingMulticallResults', () => {

src/state/multicall/reducer.ts

@@ -79,7 +79,7 @@ export default createReducer(initialState, builder =>
             fetchingBlockNumber
           }
         } else {
-          if (current.fetchingBlockNumber ?? 0 >= fetchingBlockNumber) return
+          if ((current.fetchingBlockNumber ?? 0) >= fetchingBlockNumber) return
           state.callResults[chainId][callKey].fetchingBlockNumber = fetchingBlockNumber
         }
       })

src/state/multicall/updater.tsx

@@ -1,13 +1,15 @@
-import { BigNumber } from '@ethersproject/bignumber'
+import { Contract } from '@ethersproject/contracts'
 import { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useActiveWeb3React } from '../../hooks'
 import { useMulticallContract } from '../../hooks/useContract'
 import useDebounce from '../../hooks/useDebounce'
 import chunkArray from '../../utils/chunkArray'
+import { retry } from '../../utils/retry'
 import { useBlockNumber } from '../application/hooks'
 import { AppDispatch, AppState } from '../index'
 import {
+  Call,
   errorFetchingMulticallResults,
   fetchingMulticallResults,
   parseCallKey,
@@ -17,6 +19,26 @@ import {
 // chunk calls so we do not exceed the gas limit
 const CALL_CHUNK_SIZE = 500
 
+/**
+ * Fetches a chunk of calls, enforcing a minimum block number constraint
+ * @param multicallContract multicall contract to fetch against
+ * @param chunk chunk of calls to make
+ * @param minBlockNumber minimum block number of the result set
+ */
+async function fetchChunk(
+  multicallContract: Contract,
+  chunk: Call[],
+  minBlockNumber: number
+): Promise<{ results: string[]; blockNumber: number }> {
+  const [resultsBlockNumber, returnData] = await multicallContract.aggregate(
+    chunk.map(obj => [obj.address, obj.callData])
+  )
+  if (resultsBlockNumber.toNumber() < minBlockNumber) {
+    throw new Error('Fetched for old block number')
+  }
+  return { results: returnData, blockNumber: resultsBlockNumber.toNumber() }
+}
+
 /**
  * From the current all listeners state, return each call key mapped to the
  * minimum number of blocks per fetch. This is how often each key must be fetched.
@@ -77,8 +99,8 @@ export function outdatedListeningKeys(
     // already fetching it for a recent enough block, don't refetch it
     if (data.fetchingBlockNumber && data.fetchingBlockNumber >= minDataBlockNumber) return false
 
-    // if data is newer than minDataBlockNumber, don't fetch it
-    return !(data.blockNumber && data.blockNumber >= minDataBlockNumber)
+    // if data is older than minDataBlockNumber, fetch it
+    return !data.blockNumber || data.blockNumber < minDataBlockNumber
   })
 }
 
@@ -121,9 +143,9 @@ export default function Updater() {
     )
 
     chunkedCalls.forEach((chunk, index) =>
-      multicallContract
-        .aggregate(chunk.map(obj => [obj.address, obj.callData]))
-        .then(([resultsBlockNumber, returnData]: [BigNumber, string[]]) => {
+      // todo: cancel retries when the block number updates
+      retry(() => fetchChunk(multicallContract, chunk, latestBlockNumber), { n: 10, minWait: 2500, maxWait: 5000 })
+        .then(({ results: returnData, blockNumber: fetchBlockNumber }) => {
           // accumulates the length of all previous indices
           const firstCallKeyIndex = chunkedCalls.slice(0, index).reduce<number>((memo, curr) => memo + curr.length, 0)
           const lastCallKeyIndex = firstCallKeyIndex + returnData.length
@@ -137,7 +159,7 @@ export default function Updater() {
                   memo[callKey] = returnData[i] ?? null
                   return memo
                 }, {}),
-              blockNumber: resultsBlockNumber.toNumber()
+              blockNumber: fetchBlockNumber
             })
           )
         })

src/state/swap/actions.ts

@@ -13,4 +13,6 @@ export const replaceSwapState = createAction<{
   typedValue: string
   inputTokenAddress?: string
   outputTokenAddress?: string
+  recipient: string | null
 }>('replaceSwapState')
+export const setRecipient = createAction<{ recipient: string | null }>('setRecipient')

src/state/swap/hooks.test.ts

@@ -18,7 +18,8 @@ describe('hooks', () => {
         [Field.OUTPUT]: { address: '0x6B175474E89094C44Da98b954EedeAC495271d0F' },
         [Field.INPUT]: { address: WETH[ChainId.MAINNET].address },
         typedValue: '20.5',
-        independentField: Field.OUTPUT
+        independentField: Field.OUTPUT,
+        recipient: null
       })
     })
 
@@ -32,7 +33,8 @@ describe('hooks', () => {
         [Field.INPUT]: { address: '' },
         [Field.OUTPUT]: { address: WETH[ChainId.MAINNET].address },
         typedValue: '',
-        independentField: Field.INPUT
+        independentField: Field.INPUT,
+        recipient: null
       })
     })
 
@@ -46,7 +48,58 @@ describe('hooks', () => {
         [Field.OUTPUT]: { address: WETH[ChainId.MAINNET].address },
         [Field.INPUT]: { address: '' },
         typedValue: '20.5',
-        independentField: Field.INPUT
+        independentField: Field.INPUT,
+        recipient: null
+      })
+    })
+
+    test('invalid recipient', () => {
+      expect(
+        queryParametersToSwapState(
+          parse('?outputCurrency=eth&exactAmount=20.5&recipient=abc', { parseArrays: false, ignoreQueryPrefix: true }),
+          ChainId.MAINNET
+        )
+      ).toEqual({
+        [Field.OUTPUT]: { address: WETH[ChainId.MAINNET].address },
+        [Field.INPUT]: { address: '' },
+        typedValue: '20.5',
+        independentField: Field.INPUT,
+        recipient: null
+      })
+    })
+
+    test('valid recipient', () => {
+      expect(
+        queryParametersToSwapState(
+          parse('?outputCurrency=eth&exactAmount=20.5&recipient=0x0fF2D1eFd7A57B7562b2bf27F3f37899dB27F4a5', {
+            parseArrays: false,
+            ignoreQueryPrefix: true
+          }),
+          ChainId.MAINNET
+        )
+      ).toEqual({
+        [Field.OUTPUT]: { address: WETH[ChainId.MAINNET].address },
+        [Field.INPUT]: { address: '' },
+        typedValue: '20.5',
+        independentField: Field.INPUT,
+        recipient: '0x0fF2D1eFd7A57B7562b2bf27F3f37899dB27F4a5'
+      })
+    })
+    test('accepts any recipient', () => {
+      expect(
+        queryParametersToSwapState(
+          parse('?outputCurrency=eth&exactAmount=20.5&recipient=bob.argent.xyz', {
+            parseArrays: false,
+            ignoreQueryPrefix: true
+          }),
+          ChainId.MAINNET
+        )
+      ).toEqual({
+        [Field.OUTPUT]: { address: WETH[ChainId.MAINNET].address },
+        [Field.INPUT]: { address: '' },
+        typedValue: '20.5',
+        independentField: Field.INPUT,
+        recipient: 'bob.argent.xyz'
       })
     })
   })