merge beta to production (#317)

* update SNX exchange and token address (#301) * update SNX exchange and token address * checksum exchange address * Account improvements (#302) * begin account migration * prep for styling * improve multi-network support allow deprecated window.web3 providers * kill old modal * remove tests * clean up css * Style account modal * kill scss * bug fixes * use suspense for code-splitting and i18n move abis add ENS support to Web3Status * Account modal mobile styles * style tweaks * finalize migration * fix account styling * fix ethereum svg * fixes * Split wallet modal into components * refactor wallet modal and add connect button styles * removing tap highlights fix spacing on some mobile browsers * Styling fixes for account and warning * clean up injected connector logic * remove console * add wrong network copy * restore border radius change wallet logo * various improvements (#313) * add unchecked signer * remove focus underline from tabs * update tokens * remove console log * remove snx for now * make slippage warnings more robust * memo-ize contexts * improve slippage styling * fix warnings + bugs * clear stale network error * Feather icons (#314) * Remove fontawesome * Update new SNX exchange and new token address (#316) * Update new SNX exchange and new token address * remove whitespace * checksum exchange address

merge beta to production (#317)
* update SNX exchange and token address (#301) * update SNX exchange and token address * checksum exchange address * Account improvements (#302) * begin account migration * prep for styling * improve multi-network support allow deprecated window.web3 providers * kill old modal * remove tests * clean up css * Style account modal * kill scss * bug fixes * use suspense for code-splitting and i18n move abis add ENS support to Web3Status * Account modal mobile styles * style tweaks * finalize migration * fix account styling * fix ethereum svg * fixes * Split wallet modal into components * refactor wallet modal and add connect button styles * removing tap highlights fix spacing on some mobile browsers * Styling fixes for account and warning * clean up injected connector logic * remove console * add wrong network copy * restore border radius change wallet logo * various improvements (#313) * add unchecked signer * remove focus underline from tabs * update tokens * remove console log * remove snx for now * make slippage warnings more robust * memo-ize contexts * improve slippage styling * fix warnings + bugs * clear stale network error * Feather icons (#314) * Remove fontawesome * Update new SNX exchange and new token address (#316) * Update new SNX exchange and new token address * remove whitespace * checksum exchange address
b7f49672 · Noah Zinsmeister · GitHub · 45a66d39 · b7f49672 · b7f49672
Commit b7f49672 authored May 30, 2019 by Noah Zinsmeister Committed by GitHub May 30, 2019
81 changed files
--- a/.env.example
+++ b/.env.example
 REACT_APP_NETWORK_ID="1"
 REACT_APP_NETWORK_URL=""
-REACT_APP_NETWORK_NAME="Main Ethereum Network"
\ No newline at end of file
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,4 +11,3 @@ install: yarn
 script:
  - yarn check:all
  - yarn build
-  - yarn test
--- a/README.md
+++ b/README.md
@@ -24,17 +24,15 @@ yarn
 ### Configure Environment
-Rename `.env.example` to `.env` and fill in the appropriate variables.
+Rename `.env.local.example` to `.env.local` and fill in the appropriate variables.
 ### Run
 ```bash
 yarn start
-# or
-yarn start:rinkeby
 ```
-More robust support for other testnets is in the works!
+To run on a testnet, simply update the `.env.local` file appropriately.
 ## Contributions

--- a/package.json
+++ b/package.json
@@ -5,32 +5,31 @@
  "homepage": ".",
  "private": true,
  "dependencies": {
+    "@reach/dialog": "^0.2.8",
    "@reach/tooltip": "^0.2.0",
-    "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.2.0",
    "escape-string-regexp": "^2.0.0",
-    "ethers": "^4.0.27",
+    "ethers": "^4.0.28",
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "i18next-xhr-backend": "^2.0.1",
    "jazzicon": "^1.5.0",
-    "node-sass": "^4.11.0",
+    "polished": "^3.3.2",
    "react": "^16.8.6",
-    "react-aria-modal": "^4.0.0",
+    "react-device-detect": "^1.6.2",
    "react-dom": "^16.8.6",
+    "react-feather": "^1.1.6",
    "react-ga": "^2.5.7",
    "react-i18next": "^10.7.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^3.0.1",
-    "react-transition-group": "1.x",
+    "react-spring": "^8.0.20",
    "styled-components": "^4.2.0",
-    "ua-parser-js": "^0.7.18",
    "web3-react": "^5.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
-    "start:rinkeby": "REACT_APP_NETWORK_ID=4 REACT_APP_NETWORK_NAME='Rinkeby Test Network' yarn start",
-    "build:rinkeby": "REACT_APP_NETWORK_ID=4 REACT_APP_NETWORK_NAME='Rinkeby Test Network' yarn build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint:base": "yarn eslint './src/**/*.{js,jsx}'",

--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html>
+<!DOCTYPE html />
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -23,8 +23,7 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" />
-    <div id="modal-root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

--- a/public/libraries/qr-scanner/qr-scanner-worker.min.js
+++ b/public/libraries/qr-scanner/qr-scanner-worker.min.js
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -6,7 +6,9 @@
  "installMetamask": "Please visit us after installing Metamask on Chrome or Brave.",
  "disconnected": "Disconnected",
  "swap": "Swap",
+  "swapAnyway": "Swap Anyway",
  "send": "Send",
+  "sendAnyway": "Send Anyway",
  "pool": "Pool",
  "betaWarning": "This project is in beta. Use at your own risk.",
  "input": "Input",
@@ -19,6 +21,7 @@
  "searchOrPaste": "Search Token or Paste Address",
  "noExchange": "No Exchange Found",
  "exchangeRate": "Exchange Rate",
+  "unknownError": "Oops! An unknown error occurred. Please refresh the page, or visit from another browser or device.",
  "enterValueCont": "Enter a {{ missingCurrencyValue }} value to continue.",
  "selectTokenCont": "Select a token to continue.",
  "noLiquidity": "No liquidity.",
@@ -27,6 +30,7 @@
  "transactionDetails": "Transaction Details",
  "hideDetails": "Hide Details",
  "slippageWarning": "Slippage Warning",
+  "highSlippageWarning": "High Slippage Warning",
  "youAreSelling": "You are selling",
  "orTransFail": "or the transaction will fail.",
  "youWillReceive": "You will receive at least",

--- a/src/InjectedConnector.js
+++ b/src/InjectedConnector.js
+import { Connectors } from 'web3-react'
+const { Connector, ErrorCodeMixin } = Connectors
+const InjectedConnectorErrorCodes = ['ETHEREUM_ACCESS_DENIED', 'NO_WEB3', 'UNLOCK_REQUIRED']
+export default class InjectedConnector extends ErrorCodeMixin(Connector, InjectedConnectorErrorCodes) {
+  constructor(args = {}) {
+    super(args)
+    this.runOnDeactivation = []
+    this.networkChangedHandler = this.networkChangedHandler.bind(this)
+    this.accountsChangedHandler = this.accountsChangedHandler.bind(this)
+    const { ethereum } = window
+    if (ethereum && ethereum.isMetaMask) {
+      ethereum.autoRefreshOnNetworkChange = false
+    }
+  }
+  async onActivation() {
+    const { ethereum, web3 } = window
+    if (ethereum) {
+      await ethereum.enable().catch(error => {
+        const deniedAccessError = Error(error)
+        deniedAccessError.code = InjectedConnector.errorCodes.ETHEREUM_ACCESS_DENIED
+        throw deniedAccessError
+      })
+      // initialize event listeners
+      if (ethereum.on) {
+        ethereum.on('networkChanged', this.networkChangedHandler)
+        ethereum.on('accountsChanged', this.accountsChangedHandler)
+        this.runOnDeactivation.push(() => {
+          if (ethereum.removeListener) {
+            ethereum.removeListener('networkChanged', this.networkChangedHandler)
+            ethereum.removeListener('accountsChanged', this.accountsChangedHandler)
+          }
+        })
+      }
+    } else if (web3) {
+      console.warn('Your web3 provider is outdated, please upgrade to a modern provider.')
+    } else {
+      const noWeb3Error = Error('Your browser is not equipped with web3 capabilities.')
+      noWeb3Error.code = InjectedConnector.errorCodes.NO_WEB3
+      throw noWeb3Error
+    }
+  }
+  async getProvider() {
+    const { ethereum, web3 } = window
+    return ethereum || web3.currentProvider
+  }
+  async getAccount(provider) {
+    const account = await super.getAccount(provider)
+    if (account === null) {
+      const unlockRequiredError = Error('Ethereum account locked.')
+      unlockRequiredError.code = InjectedConnector.errorCodes.UNLOCK_REQUIRED
+      throw unlockRequiredError
+    }
+    return account
+  }
+  onDeactivation() {
+    this.runOnDeactivation.forEach(runner => runner())
+    this.runOnDeactivation = []
+  }
+  // event handlers
+  networkChangedHandler(networkId) {
+    const networkIdNumber = Number(networkId)
+    try {
+      super._validateNetworkId(networkIdNumber)
+      super._web3ReactUpdateHandler({
+        updateNetworkId: true,
+        networkId: networkIdNumber
+      })
+    } catch (error) {
+      super._web3ReactErrorHandler(error)
+    }
+  }
+  accountsChangedHandler(accounts) {
+    if (!accounts[0]) {
+      const unlockRequiredError = Error('Ethereum account locked.')
+      unlockRequiredError.code = InjectedConnector.errorCodes.UNLOCK_REQUIRED
+      super._web3ReactErrorHandler(unlockRequiredError)
+    } else {
+      super._web3ReactUpdateHandler({
+        updateAccount: true,
+        account: accounts[0]
+      })
+    }
+  }
+}
--- a/src/assets/images/brave-logo.svg
+++ b/src/assets/images/brave-logo.svg
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1736 2036.92">
-    <defs>
-        <style>
-            .cls-2{fill:#fff}
-        </style>
-        <linearGradient id="linear-gradient" x1="868.25" y1="-1245.53" x2="868.25" y2="791.39" gradientTransform="translate(-.25 1245.53)" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#f9ba16"/>
-            <stop offset=".04" stop-color="#faa612"/>
-            <stop offset=".11" stop-color="#fc8b0c"/>
-            <stop offset=".19" stop-color="#fd7508"/>
-            <stop offset=".28" stop-color="#fe6404"/>
-            <stop offset=".4" stop-color="#ff5902"/>
-            <stop offset=".56" stop-color="#ff5200"/>
-            <stop offset="1" stop-color="#ff5000"/>
-        </linearGradient>
-    </defs>
-    <g id="Layer_2" data-name="Layer 2">
-        <g id="Layer_1-2" data-name="Layer 1">
-            <path d="M1736 659l-148.2-256.1 17.6-82.9-134.9-137-111.9 15.4L1177.4 0h-310l-310 2.5-180.8 198-111.9-16.1-134.1 138.5 17.2 82.5L0 660.5 40.5 814l184 700.6a358.61 358.61 0 0 0 138.1 199.8s223.9 157.8 444.5 301a98.76 98.76 0 0 0 123.1 0c247.9-162.5 444.1-301.7 444.1-301.7a359 359 0 0 0 137.8-199.8l183.3-701z" fill="url(#linear-gradient)"/>
-            <path class="cls-2" d="M915.5 1213.3a266.26 266.26 0 0 0-35.9-13.3h-22.2a253.36 253.36 0 0 0-35.9 13.3l-54.9 23c-17.6 7.2-45.2 20.4-62.1 29.1L603.4 1318a19.39 19.39 0 0 0-2.5 35.9l87.5 62.1c15.4 10.8 39.8 29.8 53.8 42.3l24.8 21.2 51.7 45.2 23.3 20.8a40.33 40.33 0 0 0 51.7 0L918 1524l51.7-45.2 24.8-21.5c14.3-12.6 38.4-31.6 53.8-42.3l87.9-62.8a19 19 0 0 0-2.5-35.8l-102.2-51.3c-16.9-8.6-44.8-21.5-62.4-28.7l-53.6-23.1z"/>
-            <path class="cls-2" d="M1536.9 698.5l2.9-9a239.82 239.82 0 0 0-2.5-35.9 307.9 307.9 0 0 0-32.6-61.3l-56.7-83.6c-10.4-15.8-28.7-40.5-40.5-55.2l-76.1-94.7a259.16 259.16 0 0 0-22.6-26.5l-33.7 6.1-118.7 20.4-50.9 9.7a131.88 131.88 0 0 1-50.2-7.2l-92.2-29.8c-17.9-5.7-47.7-14-66-18.3a141.51 141.51 0 0 0-29.1 0 141.51 141.51 0 0 0-29.1 0c-18.3 4.3-48.1 12.6-66 18.3l-92.2 29.8a133.86 133.86 0 0 1-50.2 7.2l-51.3-9.7-117-22.6-33.7-6.1a259.16 259.16 0 0 0-22.6 26.5l-77.8 96.9c-11.8 14.7-30.1 39.5-40.5 55.2l-56.7 83.9a461.89 461.89 0 0 0-26.9 44.8 203.06 203.06 0 0 0-7.9 53.1l3.2 9a127.14 127.14 0 0 0 5.4 17.2 578.09 578.09 0 0 0 46.6 49.9l196.6 181.9a52.81 52.81 0 0 1 9.7 56L425 1082a101.22 101.22 0 0 0 0 63.9l6.5 17.9a172.65 172.65 0 0 0 53.1 74.6l31.2 25.5a59.06 59.06 0 0 0 57.4 6.8l111.6-53.1a284 284 0 0 0 56.3-37.7l89.3-80.7a35.89 35.89 0 0 0 2.4-50.7l-.6-.6L678 915.5a51.14 51.14 0 0 1-12.2-54.5l51.3-127a89.25 89.25 0 0 0 0-59.9 88.69 88.69 0 0 0-44.5-40.9l-245-92.6c-17.6-6.8-16.9-13.6 2.2-15.4l127-11.8a184.69 184.69 0 0 1 66.4 8.3l126.6 45.2a40 40 0 0 1 24.8 44.8L728.3 814c-4.3 18.3-8.6 38.7-10 45.2a35.78 35.78 0 0 0 31.2 18.3l88.3 17.2a204.2 204.2 0 0 0 67.1 0l80.7-16.9a35.71 35.71 0 0 0 31.2-18.7c0-6.5-5.7-26.5-10-44.8l-47-202.7a39.36 39.36 0 0 1 24.8-44.8l126.6-45.2a184.14 184.14 0 0 1 66.4-8.3l127 11.8c18.7 0 19.7 8.6 2.2 15.4l-244.7 92.9a88.54 88.54 0 0 0-44.5 40.2 89.25 89.25 0 0 0 0 59.9l53.1 127.4a51.39 51.39 0 0 1-12.9 54.2L904 1047.9a35.77 35.77 0 0 0 1.2 50.7l.6.6 89.7 79.6a285.94 285.94 0 0 0 56.3 35.9l111.6 53.1a59.06 59.06 0 0 0 57.4-6.8l31.2-25.5a173.23 173.23 0 0 0 53.1-74.6l6.5-17.9a101.22 101.22 0 0 0 0-63.9l-34.4-74.6a52.92 52.92 0 0 1 11.8-54.9l196.2-182.2a581.78 581.78 0 0 0 46.6-50.2 123.28 123.28 0 0 0 5.1-18.7z"/>
-        </g>
-    </g>
-</svg>
--- a/src/assets/images/circle.svg
+++ b/src/assets/images/circle.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="#2F80ED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/images/coinbase-wallet-logo.png
+++ b/src/assets/images/coinbase-wallet-logo.png
--- a/src/assets/images/ethereum-logo.svg
+++ b/src/assets/images/ethereum-logo.svg
-<svg width="256" height="417" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-    <path fill="#343434" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"/>
+<svg width="256px" height="417px" viewBox="0 0 256 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-    <path fill="#8C8C8C" d="M127.962 0L0 212.32l127.962 75.639V154.158z"/>
+	<g>
-    <path fill="#3C3C3B" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z"/>
+		<polygon fill="#343434" points="127.9611 0 125.1661 9.5 125.1661 285.168 127.9611 287.958 255.9231 212.32"/>
-    <path fill="#8C8C8C" d="M127.962 416.905v-104.72L0 236.585z"/>
+		<polygon fill="#8C8C8C" points="127.962 0 0 212.32 127.962 287.959 127.962 154.158"/>
-    <path fill="#141414" d="M127.961 287.958l127.96-75.637-127.96-58.162z"/>
+		<polygon fill="#3C3C3B" points="127.9611 312.1866 126.3861 314.1066 126.3861 412.3056 127.9611 416.9066 255.9991 236.5866"/>
-    <path fill="#393939" d="M0 212.32l127.96 75.638v-133.8z"/>
+		<polygon fill="#8C8C8C" points="127.962 416.9052 127.962 312.1852 0 236.5852"/>
-</svg>
+		<polygon fill="#141414" points="127.9611 287.9577 255.9211 212.3207 127.9611 154.1587"/>
+		<polygon fill="#393939" points="0.0009 212.3208 127.9609 287.9578 127.9609 154.1588"/>
+	</g>
+</svg>
\ No newline at end of file
--- a/src/assets/images/generic-token-logo.png
+++ b/src/assets/images/generic-token-logo.png
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/metamask-logo.svg
+++ b/src/assets/images/metamask-logo.svg
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 318.6 318.6" xml:space="preserve">
-    <style>
-        .st1{fill:#e4761b;stroke:#e4761b}.st1,.st10{stroke-linecap:round;stroke-linejoin:round}.st2{fill:#763d16;stroke:#763d16}.st2,.st3,.st4,.st5,.st6,.st7,.st8{stroke-linecap:round;stroke-linejoin:round}.st3{fill:#f6851b;stroke:#f6851b}.st4{fill:#e2761b;stroke:#e2761b}.st5{fill:#cd6116;stroke:#cd6116}.st6{fill:#c0ad9e;stroke:#c0ad9e}.st7{fill:#d7c1b3;stroke:#d7c1b3}.st8{fill:#e4751f;stroke:#e4751f}.st10{fill:#161616;stroke:#161616}
-    </style>
-    <path fill="#161616" stroke="#161616" d="M277.3 145.6l-5-3.6 8-7.3-6.1-4.8 8-6.1-5.3-4 8.4-40.8-12.6-37.9-81.1 30.3h-67.5L43 41.1 30.4 79l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5-17.4 54.2 16.1 55.3 56.7-15.6 11 9 22.4 15.5H177l22.4-15.5 11-9 56.7 15.6 16.2-55.3-17.5-54.2z"/>
-    <path class="st1" d="M105.3 253l-56.7 15.6-16.1-55.3zm178-39.7l-16.2 55.3-56.7-15.6z"/>
-    <path class="st2" d="M265.8 159.1l-52.3-15.3 18.3-4.8zm-215.9 0L84 139l18.2 4.8zM43.4 142l-1.9-12.1L84 139z"/>
-    <path class="st2" d="M272.3 142l-40.5-3 42.4-9.1z"/>
-    <path class="st2" d="M272.3 142l-6.5 17.1-34-20.1zm-228.9 0l40.6-3-34.1 20.1zm188.4-3l45.1-19.2-2.7 10.1zM84 139l-42.5-9.1-2.6-10.1z"/>
-    <path class="st3" d="M124.1 71.4h67.5l-15.1 41.1z"/>
-    <path class="st3" d="M176.5 112.5h-37.3l-15.1-41.1z"/>
-    <path class="st2" d="M276.9 119.8L231.8 139l-.8-51.6zm-174.7 24L84 139l.7-51.6z"/>
-    <path class="st2" d="M84.7 87.4L84 139l-45.1-19.2zm146.3 0l.8 51.6-18.3 4.8z"/>
-    <path class="st1" d="M139.2 112.5L43 41.1l81.1 30.3z"/>
-    <path class="st4" d="M272.7 41.1l-96.2 71.4 15.1-41.1z"/>
-    <path class="st1" d="M210.4 253l26.5-39.7h46.4zM32.5 213.3h46.4l26.4 39.7z"/>
-    <path class="st3" d="M229.3 167.7l54 45.6h-46.4zm-142.9 0l-53.9 45.6 17.4-54.2zm-7.5 45.6H32.5l53.9-45.6z"/>
-    <path class="st3" d="M229.3 167.7l36.5-8.6 17.5 54.2z"/>
-    <path class="st2" d="M84.7 87.4l54.5 25.1-37 31.3zm128.8 56.4l-37-31.3L231 87.4zm52.3 15.3l6.5-17.1 5 3.6zm-215.9 0l-11.5-13.5 5-3.6zM272.3 142l1.9-12.1 6.1 4.8zm-228.9 0l-8-7.3 6.1-4.8z"/>
-    <path class="st2" d="M33.5 123.8l5.4-4 2.6 10.1zm248.7 0l-8 6.1 2.7-10.1z"/>
-    <path class="st3" d="M49.9 159.1l52.3-15.3-15.8 23.9zm215.9 0l-36.5 8.6-15.8-23.9z"/>
-    <path class="st2" d="M38.9 119.8L30.4 79l54.3 8.4zM231 87.4l54.3-8.4-8.4 40.8z"/>
-    <path class="st1" d="M102.2 143.8l37-31.3 3.4 57.7zm111.3 0l15.8 23.9-56.2 2.5zm-40.4 26.4l3.4-57.7 37 31.3z"/>
-    <path class="st1" d="M142.6 170.2l-56.2-2.5 15.8-23.9z"/>
-    <path class="st2" d="M272.7 41.1L285.3 79 231 87.4zM43 41.1l96.2 71.4-54.5-25.1zm188 46.3l-54.5 25.1 96.2-71.4z"/>
-    <path class="st2" d="M84.7 87.4L30.4 79 43 41.1z"/>
-    <path class="st5" d="M105.3 253l-26.4-39.7 31.1.4zm105.1 0l-4.7-39.3 31.2-.4z"/>
-    <path class="st3" d="M173.1 170.2h-30.5l-3.4-57.7z"/>
-    <path class="st3" d="M139.2 112.5h37.3l-3.4 57.7z"/>
-    <path class="st6" d="M116.3 262l-11-9 31.5 14.9zm62.6 5.9l31.5-14.9-11 9z"/>
-    <path class="st7" d="M136.6 258.6l.2 9.3-31.5-14.9zm42.6 0l31.2-5.6-31.5 14.9z"/>
-    <path class="st3" d="M86.4 167.7l23.6 46-31.1-.4zm150.5 45.6l-31.2.4 23.6-46z"/>
-    <path class="st8" d="M86.4 167.7l22.8 23.1.8 22.9zm142.9 0l-23.6 46 .9-22.9z"/>
-    <path class="st7" d="M105.3 253l33.9-16.5-2.6 22.1zm105.1 0l-31.2 5.6-2.7-22.1z"/>
-    <path class="st1" d="M139.2 236.5L105.3 253l4.7-39.3zm37.3 0l29.2-22.8 4.7 39.3z"/>
-    <path class="st5" d="M173.1 170.2l56.2-2.5-22.7 23.1zm-63.9 20.6l-22.8-23.1 56.2 2.5z"/>
-    <path class="st5" d="M142.6 170.2l-13.5 11.5-19.9 9.1zm64 20.6l-20-9.1-13.5-11.5z"/>
-    <path class="st3" d="M205.7 213.7l-27.4-14.6 28.3-8.3zm-95.7 0l-.8-22.9 28.2 8.3z"/>
-    <path d="M137.4 199.1l-28.2-8.3 19.9-9.1zm40.9 0l8.3-17.4 20 9.1z" fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round"/>
-    <path class="st5" d="M186.6 181.7l-8.3 17.4-5.2-28.9zm-57.5 0l13.5-11.5-5.2 28.9z"/>
-    <path class="st6" d="M199.4 262L177 277.5l1.9-9.6zm-62.6 5.9l1.9 9.6-22.4-15.5z"/>
-    <path class="st4" d="M178.3 199.1l-6.5-10.7 1.3-18.2z"/>
-    <path class="st8" d="M137.4 199.1l5.2-28.9 1.3 18.2z"/>
-    <path class="st3" d="M173.1 170.2l-1.3 18.2h-27.9z"/>
-    <path class="st3" d="M143.9 188.4l-1.3-18.2h30.5zm34.4 10.7l27.4 14.6-29.2 22.8zm-39.1 37.4L110 213.7l27.4-14.6z"/>
-    <path class="st3" d="M137.4 199.1l6.6 34.1-4.8 3.3zm39.1 37.4l-4.8-3.3 6.6-34.1z"/>
-    <path class="st8" d="M171.8 188.4l6.5 10.7-6.6 34.1zm-27.9 0l.1 44.8-6.6-34.1z"/>
-    <path class="st3" d="M143.9 188.4h27.9l-.1 44.8zm27.8 44.8H144l-.1-44.8z"/>
-    <path class="st6" d="M179.2 258.6l-.3 9.3-1.9 9.6zm-40.5 18.9l-1.9-9.6-.2-9.3z"/>
-    <path class="st6" d="M136.6 258.6l2.4-2.2-.3 21.1zm40.4 18.9l-.3-21.1 2.5 2.2z"/>
-    <path class="st6" d="M138.7 277.5l.3-21.1h37.7zm38-21.1l.3 21.1h-38.3z"/>
-    <path class="st10" d="M176.5 236.5l2.7 22.1-2.5-2.2zM139 256.4l-2.4 2.2 2.6-22.1zm.2-19.9l1.5 4.7-1.7 15.2z"/>
-    <path class="st10" d="M176.7 256.4l-1.7-15.2 1.5-4.7zm-33-18.7l-3 3.5-1.5-4.7z"/>
-    <path class="st10" d="M176.5 236.5l-1.5 4.7-3-3.5z"/>
-    <path class="st10" d="M172 237.7l-.3-4.5 4.8 3.3zm-32.8-1.2l4.8-3.3-.3 4.5z"/>
-    <path class="st10" d="M171.7 233.2l.3 4.5h-28.3z"/>
-    <path class="st10" d="M143.7 237.7l.3-4.5h27.7zm-3 3.5H175l1.7 15.2z"/>
-    <path class="st10" d="M176.7 256.4H139l1.7-15.2zm-36-15.2l3-3.5H172z"/>
-    <path class="st10" d="M172 237.7l3 3.5h-34.3z"/>
-</svg>
--- a/src/assets/images/pending.svg
+++ b/src/assets/images/pending.svg
-<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.1603 6C10.7795 8.39146 7.72159 9.21084 5.33013 7.83013C2.93866 6.44942 2.11929 3.39146 3.5 1" stroke="#2F80ED" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/src/assets/images/qr-code.svg
+++ b/src/assets/images/qr-code.svg
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1.5H1.5V7.5H7.5V1.5ZM1.5 0H0V1.5V7.5V9H1.5H7.5H9V7.5V1.5V0H7.5H1.5ZM4.5 3H3V4.5V6H4.5H6V4.5V3H4.5ZM1.5 19.5V13.5H7.5V19.5H1.5ZM0 12H1.5H7.5H9V13.5V19.5V21H7.5H1.5H0V19.5V13.5V12ZM4.5 15H3V16.5V18H4.5H6V16.5V15H4.5ZM13.5 1.5H19.5V7.5H13.5V1.5ZM12 0H13.5H19.5H21V1.5V7.5V9H19.5H13.5H12V7.5V1.5V0ZM16.5 3H15V4.5V6H16.5H18V4.5V3H16.5ZM16.5 12H12V21H13.5V16.5H15V18H21V12H19.5V13.5H16.5V12ZM18 19.5H16.5V21H18V19.5ZM19.5 19.5H21V21H19.5V19.5Z" fill="black"/>
-</svg>
--- a/src/assets/images/spinner.svg
+++ b/src/assets/images/spinner.svg
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/assets/images/trust-wallet-logo.svg
+++ b/src/assets/images/trust-wallet-logo.svg
-<svg width="288" height="288" viewBox="0 0 288 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>logo_solid_square_white</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(60 145)">
-<g id="logo_solid_square_white">
-<g id="background">
-<use xlink:href="#path0_fill" transform="translate(-60 -145)" fill="#3375BB"/>
-</g>
-<g id="logo">
-<use xlink:href="#path1_stroke" transform="translate(11.2 -85.7)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" d="M 288 0L -1.2207e-05 0L -1.2207e-05 288L 288 288L 288 0Z"/>
-<path id="path1_stroke" d="M 72.4 -7.62939e-07L 76.6355 -5.46695C 74.1422 -7.39862 70.6578 -7.39862 68.1645 -5.46695L 72.4 -7.62939e-07ZM 144.9 21.3L 151.815 21.4125C 151.845 19.5591 151.13 17.7711 149.83 16.4498C 148.53 15.1284 146.754 14.3843 144.9 14.3843L 144.9 21.3ZM 72.4 169.4L 68.5688 175.157C 70.8895 176.702 73.9105 176.702 76.2313 175.157L 72.4 169.4ZM 0 21.3L 0 14.3843C -1.85365 14.3843 -3.62972 15.1284 -4.92975 16.4498C -6.22977 17.7711 -6.94493 19.5591 -6.91479 21.4125L 0 21.3ZM 68.1645 5.46695C 99.5499 29.7826 135.462 28.2157 144.9 28.2157L 144.9 14.3843C 135.138 14.3843 103.85 15.6174 76.6355 -5.46695L 68.1645 5.46695ZM 137.985 21.1875C 137.464 53.3107 136.105 75.9691 133.501 92.7573C 130.933 109.367 127.26 119.322 122.533 126.314C 117.743 133.578 111.735 137.889 102.832 143.208C 93.8514 148.587 82.5075 154.381 68.5688 163.643L 76.2313 175.157C 89.4926 166.319 100.549 160.688 109.934 155.076C 119.396 149.405 127.719 143.159 133.992 134.061C 140.327 124.69 144.448 112.476 147.17 94.8708C 149.858 77.4434 151.286 53.8393 151.815 21.4125L 137.985 21.1875ZM 76.2313 163.643C 62.2932 154.381 50.957 148.588 41.9868 143.21C 33.0938 137.892 27.0986 133.583 22.3207 126.32C 17.6046 119.329 13.9431 109.373 11.3835 92.7609C 8.7891 75.9718 7.43568 53.3117 6.91479 21.1875L -6.91479 21.4125C -6.38568 53.8383 -4.96409 77.4407 -2.2866 94.8672C 0.425666 112.47 4.53296 124.684 10.8543 134.055C 17.1139 143.154 25.425 149.402 34.8789 155.075C 44.2556 160.687 55.3068 166.319 68.5688 175.157L 76.2313 163.643ZM 0 28.2157C 9.34002 28.2157 45.2509 29.782 76.6355 5.46695L 68.1645 -5.46695C 40.9491 15.618 9.65998 14.3843 0 14.3843L 0 28.2157Z"/>
-</defs>
-</svg>
--- a/src/components/AddressInputPanel/address-input-panel.scss
+++ b/src/components/AddressInputPanel/address-input-panel.scss
-@import '../../variables.scss';
-.address-input-panel {
-  @extend %col-nowrap;
-  &__input {
-    font-size: 1rem;
-    outline: none;
-    border: none;
-    flex: 1 1 auto;
-    width: 0;
-    color: $royal-blue;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &::placeholder {
-      color: $chalice-gray;
-    }
-    &--error {
-      color: $salmon-red;
-    }
-  }
-  &__recipient-row {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  &__input-container {
-    flex: 1;
-  }
-  &__qr-container {
-    padding: 10px;
-    background: $concrete-gray;
-    border: 1px solid $mercury-gray;
-    border-radius: 10px;
-    margin-right: 16px;
-    height: 21px;
-    & > img {
-      height: 21px;
-    }
-  }
-}
--- a/src/components/AddressInputPanel/index.js
+++ b/src/components/AddressInputPanel/index.js
 import React, { useState, useEffect } from 'react'
-import classnames from 'classnames'
+import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context } from 'web3-react'
+import { lighten } from 'polished'
 import { isAddress } from '../../utils'
 import { useDebounce } from '../../hooks'
-// import QrCode from '../QrCode' // commented out pending further review
-import './address-input-panel.scss'
+const InputPanel = styled.div`
+  ${({ theme }) => theme.flexColumnNoWrap}
+  box-shadow: 0 4px 8px 0 ${({ theme }) => lighten(0.9, theme.royalBlue)};
+  position: relative;
+  border-radius: 1.25rem;
+  background-color: ${({ theme }) => theme.white};
+  z-index: 1;
+`
+const ContainerRow = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.25rem;
+  box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+  background-color: ${({ theme }) => theme.white};
+  transition: box-shadow 200ms ease-in-out;
+`
+const InputContainer = styled.div`
+  flex: 1;
+`
+const LabelRow = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  color: ${({ theme }) => theme.doveGray};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0.75rem 1rem;
+`
+const LabelContainer = styled.div`
+  flex: 1 1 auto;
+  width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+const InputRow = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  padding: 0.25rem 0.85rem 0.75rem;
+`
+const Input = styled.input`
+  font-size: 1rem;
+  outline: none;
+  border: none;
+  flex: 1 1 auto;
+  width: 0;
+  color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)};
+  transition: color 200ms ease-in-out;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ::placeholder {
+    color: ${({ theme }) => theme.chaliceGray};
+  }
+`
 export default function AddressInputPanel({ title, initialInput = '', onChange = () => {}, onError = () => {} }) {
  const { t } = useTranslation()
@@ -82,40 +142,29 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
  }
  return (
-    <div className="currency-input-panel">
+    <InputPanel>
-      <div
+      <ContainerRow error={input !== '' && error}>
-        className={classnames('currency-input-panel__container address-input-panel__recipient-row', {
+        <InputContainer>
-          'currency-input-panel__container--error': input !== '' && error
+          <LabelRow>
-        })}
+            <LabelContainer>
-      >
+              <span>{title || t('recipientAddress')}</span>
-        <div className="address-input-panel__input-container">
+            </LabelContainer>
-          <div className="currency-input-panel__label-row">
+          </LabelRow>
-            <div className="currency-input-panel__label-container">
+          <InputRow>
-              <span className="currency-input-panel__label">{title || t('recipientAddress')}</span>
+            <Input
-            </div>
-          </div>
-          <div className="currency-input-panel__input-row">
-            <input
              type="text"
              autoComplete="off"
              autoCorrect="off"
              autoCapitalize="off"
              spellCheck="false"
-              className={classnames('address-input-panel__input', {
-                'address-input-panel__input--error': input !== '' && error
-              })}
              placeholder="0x1234..."
+              error={input !== '' && error}
              onChange={onInput}
              value={input}
            />
-          </div>
+          </InputRow>
-        </div>
+        </InputContainer>
-        {/* commented out pending further review
+      </ContainerRow>
-        <div className="address-input-panel__qr-container">
+    </InputPanel>
-          <QrCode onValueReceived={value => onChange(value)} />
-        </div>
-        */}
-      </div>
-    </div>
  )
 }
--- a/src/components/ContextualInfo/contextual-info.scss
+++ b/src/components/ContextualInfo/contextual-info.scss
-@import '../../variables.scss';
-.contextual-info {
-  &__summary-wrapper {
-    color: $dove-gray;
-    font-size: 0.75rem;
-    text-align: center;
-    margin-top: 1rem;
-    padding-top: 1rem;
-  }
-  &--error {
-    color: $salmon-red;
-  }
-  &__details {
-    background-color: $concrete-gray;
-    padding: 1.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    margin-top: 1rem;
-  }
-  &__open-details-container {
-    cursor: pointer;
-    @extend %row-nowrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75rem;
-    color: $royal-blue;
-    span {
-      margin-right: 12px;
-    }
-    img {
-      height: 0.75rem;
-      width: 0.75rem;
-    }
-  }
-}
--- a/src/components/ContextualInfo/index.js
+++ b/src/components/ContextualInfo/index.js
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import c from 'classnames'
+import styled from 'styled-components'
 import DropdownBlue from '../../assets/images/dropdown-blue.svg'
 import DropupBlue from '../../assets/images/dropup-blue.svg'
-import './contextual-info.scss'
+const SummaryWrapper = styled.div`
+  color: ${({ error, theme }) => (error ? theme.salmonRed : theme.doveGray)};
+  font-size: 0.75rem;
+  text-align: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+`
+const SummaryWrapperContainer = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  color: ${({ theme }) => theme.royalBlue};
+  text-align: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  span {
+    margin-right: 12px;
+  }
+  img {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+`
 class ContextualInfo extends Component {
  static propTypes = {
@@ -38,18 +66,12 @@ class ContextualInfo extends Component {
    const { openDetailsText, closeDetailsText, contextualInfo, isError } = this.props
    if (contextualInfo) {
-      return (
+      return <SummaryWrapper error={isError}>{contextualInfo}</SummaryWrapper>
-        <div className={c({ 'contextual-info--error': isError }, 'contextual-info__summary-wrapper')}>
-          <div>{contextualInfo}</div>
-        </div>
-      )
    }
    return (
      <>
-        <div
+        <SummaryWrapperContainer
-          key="open-details"
-          className="contextual-info__summary-wrapper contextual-info__open-details-container"
          onClick={() =>
            this.setState(prevState => {
              return { showDetails: !prevState.showDetails }
@@ -67,7 +89,7 @@ class ContextualInfo extends Component {
              <img src={DropupBlue} alt="dropup" />
            </>
          )}
-        </div>
+        </SummaryWrapperContainer>
        {this.renderDetails()}
      </>
    )

--- a/src/components/ContextualInfoNew/contextual-info.scss
+++ b/src/components/ContextualInfoNew/contextual-info.scss
-@import '../../variables.scss';
-.contextual-info {
-  &__summary-wrapper {
-    color: $dove-gray;
-    font-size: 0.75rem;
-    text-align: center;
-    margin-top: 1rem;
-    padding-top: 1rem;
-  }
-  &--error {
-    color: $salmon-red;
-  }
-  &__details {
-    background-color: $concrete-gray;
-    padding: 1.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    margin-top: 1rem;
-  }
-  &__open-details-container {
-    cursor: pointer;
-    @extend %row-nowrap;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75rem;
-    color: $royal-blue;
-    span {
-      margin-right: 12px;
-    }
-    img {
-      height: 0.75rem;
-      width: 0.75rem;
-    }
-  }
-}
--- a/src/components/ContextualInfoNew/index.js
+++ b/src/components/ContextualInfoNew/index.js
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
-import c from 'classnames'
+import { transparentize } from 'polished'
 import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
 import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
-import './contextual-info.scss'
+const SummaryWrapper = styled.div`
+  color: ${({ error, theme }) => (error ? theme.salmonRed : theme.doveGray)};
+  font-size: 0.75rem;
+  text-align: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+`
+const SummaryWrapperContainer = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  color: ${({ theme }) => theme.royalBlue};
+  text-align: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  img {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+`
+const Details = styled.div`
+  background-color: ${({ theme }) => theme.concreteGray};
+  padding: 1.5rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  margin-top: 1rem;
+`
+const ErrorSpan = styled.span`
+  margin-right: 12px;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  color: ${({ isError, theme }) => isError && theme.salmonRed};
+  ${({ slippageWarning, highSlippageWarning, theme }) =>
+    highSlippageWarning
+      ? css`
+          color: ${theme.salmonRed};
+          font-weight: 600;
+        `
+      : slippageWarning &&
+        css`
+          background-color: ${transparentize(0.6, theme.warningYellow)};
+          font-weight: 600;
+          padding: 0.25rem;
+        `}
+`
-const WrappedDropup = ({ isError, ...rest }) => <Dropup {...rest} />
+const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
 const ColoredDropup = styled(WrappedDropup)`
  path {
-    stroke: ${props => props.isError && props.theme.salmonRed};
+    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    ${({ highSlippageWarning, theme }) =>
+      highSlippageWarning &&
+      css`
+        stroke: ${theme.salmonRed};
+      `}
  }
 `
-const WrappedDropdown = ({ isError, ...rest }) => <Dropdown {...rest} />
+const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
 const ColoredDropdown = styled(WrappedDropdown)`
  path {
-    stroke: ${props => props.isError && props.theme.salmonRed};
+    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    ${({ highSlippageWarning, theme }) =>
+      highSlippageWarning &&
+      css`
+        stroke: ${theme.salmonRed};
+      `}
  }
 `
@@ -27,29 +90,34 @@ export default function ContextualInfo({
  contextualInfo = '',
  allowExpand = false,
  renderTransactionDetails = () => {},
-  isError = false
+  isError = false,
+  slippageWarning,
+  highSlippageWarning
 }) {
  const [showDetails, setShowDetails] = useState(false)
  return !allowExpand ? (
-    <div className={c({ 'contextual-info--error': isError }, 'contextual-info__summary-wrapper')}>
+    <SummaryWrapper>{contextualInfo}</SummaryWrapper>
-      <div>{contextualInfo}</div>
-    </div>
  ) : (
    <>
-      <div
+      <SummaryWrapperContainer onClick={() => setShowDetails(s => !s)}>
-        key="open-details"
-        className="contextual-info__summary-wrapper contextual-info__open-details-container"
-        onClick={() => setShowDetails(s => !s)}
-      >
        <>
-          <span className={c({ 'contextual-info--error': isError })}>
+          <ErrorSpan isError={isError} slippageWarning={slippageWarning} highSlippageWarning={highSlippageWarning}>
+            {(slippageWarning || highSlippageWarning) && (
+              <span role="img" aria-label="warning">
+                ⚠️
+              </span>
+            )}
            {contextualInfo ? contextualInfo : showDetails ? closeDetailsText : openDetailsText}
-          </span>
+          </ErrorSpan>
-          {showDetails ? <ColoredDropup isError={isError} /> : <ColoredDropdown isError={isError} />}
+          {showDetails ? (
+            <ColoredDropup isError={isError} highSlippageWarning={highSlippageWarning} />
+          ) : (
+            <ColoredDropdown isError={isError} highSlippageWarning={highSlippageWarning} />
+          )}
        </>
-      </div>
+      </SummaryWrapperContainer>
-      {showDetails && <div className="contextual-info__details">{renderTransactionDetails()}</div>}
+      {showDetails && <Details>{renderTransactionDetails()}</Details>}
    </>
  )
 }
--- a/src/components/CurrencyInputPanel/currency-panel.scss
+++ b/src/components/CurrencyInputPanel/currency-panel.scss
-@import '../../variables.scss';
-.currency-input-panel {
-  @extend %col-nowrap;
-  box-shadow: 0 4px 8px 0 rgba($royal-blue, 0.1);
-  position: relative;
-  border-radius: 1.25rem;
-  z-index: 200;
-  &__container {
-    border-radius: 1.25rem;
-    box-shadow: 0 0 0 0.5px $mercury-gray;
-    background-color: $white;
-    transition: box-shadow 200ms ease-in-out;
-    &--error {
-      box-shadow: 0 0 0 0.5px $salmon-red;
-    }
-    &:focus-within {
-      box-shadow: 0 0 0.5px 0.5px $malibu-blue;
-    }
-    &--error:focus-within {
-      box-shadow: 0 0 0.5px 0.5px $salmon-red;
-    }
-  }
-  &__label-row {
-    @extend %row-nowrap;
-    align-items: center;
-    color: $dove-gray;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    padding: 0.75rem 1rem;
-  }
-  &__label-container {
-    flex: 1 1 auto;
-    width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  &__label-description {
-    opacity: 0.75;
-    margin-left: 0.25rem;
-  }
-  &__input-row {
-    @extend %row-nowrap;
-    align-items: center;
-    padding: 0.25rem 0.85rem 0.75rem;
-  }
-  &__input {
-    font-size: 1.5rem;
-    @extend %borderless-input;
-    &--error {
-      color: $salmon-red;
-    }
-    &[type='number'] {
-      -moz-appearance: textfield;
-    }
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-    }
-  }
-  &__extra-text {
-    &--error {
-      color: $salmon-red;
-    }
-  }
-  &__currency-select {
-    @extend %row-nowrap;
-    align-items: center;
-    font-size: 1rem;
-    color: $royal-blue;
-    height: 2rem;
-    padding: 0 1rem;
-    border: 1px solid $royal-blue;
-    border-radius: 2.5rem;
-    background-color: $zumthor-blue;
-    outline: none;
-    cursor: pointer;
-    user-select: none;
-    &:active {
-      background-color: rgba($zumthor-blue, 0.8);
-    }
-    &:focus {
-      box-shadow: 0 0 0.5px 0.5px $malibu-blue;
-    }
-    &--selected {
-      background-color: $concrete-gray;
-      border-color: $mercury-gray;
-      color: $black;
-      padding: 0 0.5rem;
-      .currency-input-panel__dropdown-icon {
-        background-image: url(../../assets/images/dropdown.svg);
-      }
-    }
-    &--disabled {
-      .currency-input-panel__dropdown-icon {
-        opacity: 0;
-      }
-    }
-  }
-  &__sub-currency-select {
-    @extend %row-nowrap;
-    line-height: 0;
-    background: $zumthor-blue;
-    border: 1px solid $royal-blue;
-    color: $royal-blue;
-    height: 2rem;
-    padding: 10px 50px 10px 10px;
-    margin-right: -40px;
-    border-radius: 2.5rem;
-    outline: none;
-    cursor: pointer;
-    user-select: none;
-    &--pending {
-      line-height: 0.9;
-      .loader {
-        height: 0.5rem;
-        width: 0.5rem;
-      }
-    }
-  }
-  &__dropdown-icon {
-    height: 1rem;
-    width: 0.75rem;
-    margin-left: 0.7rem;
-    background-image: url(../../assets/images/dropdown-blue.svg);
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: 50% 50%;
-  }
-  &__selected-token-logo {
-    margin-right: 0.4rem;
-    border-radius: 1rem;
-    object-fit: contain;
-  }
-}
-.token-modal {
-  background-color: $white;
-  position: relative;
-  bottom: 21rem;
-  width: 100%;
-  height: 21rem;
-  z-index: 2000;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  transition: 250ms ease-in-out;
-  &__search-container {
-    @extend %row-nowrap;
-    padding: 1rem;
-    border-bottom: 1px solid $mercury-gray;
-  }
-  &__search-input {
-    @extend %borderless-input;
-  }
-  &__search-icon {
-    margin-right: 0.2rem;
-  }
-  &__token-list {
-    -webkit-overflow-scrolling: touch;
-    height: 17.5rem;
-    overflow-y: auto;
-  }
-  &__token-row {
-    @extend %row-nowrap;
-    align-items: center;
-    padding: 1rem 1.5rem;
-    margin: 0.25rem 0.5rem;
-    justify-content: space-between;
-    cursor: pointer;
-    user-select: none;
-    &--selected {
-      background-color: $concrete-gray;
-      box-sizing: border-box;
-      border: 1px solid $mercury-gray;
-      border-radius: 2.5rem;
-      .token-modal__token-label {
-        color: $black;
-      }
-    }
-    &--searching {
-      justify-content: center;
-      .loader {
-        margin-right: 1rem;
-      }
-    }
-    &:hover {
-      background-color: $concrete-gray;
-      .token-modal__token-label {
-        color: $black;
-      }
-    }
-    &:active {
-      background-color: darken($concrete-gray, 1);
-    }
-    &--no-exchange {
-      color: $dove-gray;
-      justify-content: center;
-      background-color: darken($concrete-gray, 1);
-    }
-    &--create-exchange {
-      color: $white;
-      justify-content: center;
-      background-color: $malibu-blue;
-      text-decoration: none;
-      &:hover {
-        background-color: lighten($malibu-blue, 1);
-      }
-      &:active {
-        background-color: darken($malibu-blue, 1);
-      }
-    }
-  }
-  &__token-logo {
-    object-fit: contain;
-    border-radius: 1rem;
-  }
-  &__token-label {
-    color: $dove-gray;
-  }
-  @media only screen and (min-width: 768px) {
-    max-width: 560px;
-    max-height: 768px;
-    position: absolute;
-    margin-left: auto;
-    margin-right: auto;
-    border-radius: 1rem;
-    padding-bottom: 1rem;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    margin-top: 4rem;
-  }
-}
-.token-modal-appear {
-  bottom: 0;
-}
-.token-modal-appear.modal-container-appear-active {
-  bottom: 0;
-}
--- a/src/components/CurrencyInputPanel/index.js
+++ b/src/components/CurrencyInputPanel/index.js
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
-@import '../../variables.scss';
-.header {
-  @extend %col-nowrap;
-  display: block;
-  &__no-decoration {
-    text-decoration: none;
-  }
-  &__top {
-    @extend %row-nowrap;
-    padding: 1.25rem 0.75rem;
-    align-items: center;
-    border-bottom: 1px solid $concrete-gray;
-  }
-  &__title {
-    font-size: 1rem;
-    font-weight: 500;
-    margin-left: 1rem;
-    line-height: 1.5rem;
-    color: $wisteria-purple;
-  }
-  &__center-group {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  &__navigation {
-    margin-bottom: 1rem;
-  }
-  &__dialog {
-    @extend %col-nowrap;
-    border-radius: 0.875rem;
-    border: 1px solid $mercury-gray;
-    margin: 1rem 0.75rem 0 0.75rem;
-    padding: 1.5rem 1rem;
-    text-align: center;
-    display: none;
-    &__description {
-      font-size: 0.75rem;
-      color: $dove-gray;
-      margin-top: 0.4rem;
-    }
-    &--disconnected {
-      display: block;
-    }
-  }
-  &__download {
-    @extend %row-nowrap;
-    justify-content: center;
-    margin-top: 1rem;
-    img {
-      height: 3.5rem;
-      width: 3.5rem;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-    img + img {
-      margin-left: 1rem;
-    }
-  }
-  @media only screen and (min-width: 768px) {
-    //position: fixed;
-    top: 0px;
-    left: 0px;
-    flex: 0 0 auto;
-    &__top {
-      border: none;
-      padding: 1.25rem;
-    }
-  }
-}
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
-import classnames from 'classnames'
-import { useWeb3Context, Connectors } from 'web3-react'
-import UAParser from 'ua-parser-js'
-import Logo from '../Logo'
+import { Link } from '../../theme'
-import CoinbaseWalletLogo from '../../assets/images/coinbase-wallet-logo.png'
-import TrustLogo from '../../assets/images/trust-wallet-logo.svg'
-import BraveLogo from '../../assets/images/brave-logo.svg'
-import MetamaskLogo from '../../assets/images/metamask-logo.svg'
 import Web3Status from '../Web3Status'
+import { darken } from 'polished'
-import './header.scss'
+const HeaderElement = styled.div`
+  margin: 1.25rem;
+  display: flex;
+  min-width: 0;
+`
-const { Connector, InjectedConnector } = Connectors
+const Title = styled.div`
+  display: flex;
+  align-items: center;
-const links = {
+  #image {
-  coinbaseWallet: {
+    font-size: 1.5rem;
-    android: 'https://play.google.com/store/apps/details?id=org.toshi',
+    margin-right: 1rem;
-    ios: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455'
-  },
-  trust: {
-    android:
-      'https://links.trustwalletapp.com/a/key_live_lfvIpVeI9TFWxPCqwU8rZnogFqhnzs4D?&event=openURL&url=https://uniswap.exchange/swap',
-    ios:
-      'https://links.trustwalletapp.com/a/key_live_lfvIpVeI9TFWxPCqwU8rZnogFqhnzs4D?&event=openURL&url=https://uniswap.exchange/swap'
-  },
-  metamask: {
-    chrome: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn'
-  },
-  brave: {
-    android: 'https://play.google.com/store/apps/details?id=com.brave.browser',
-    ios: 'https://itunes.apple.com/us/app/brave-browser-fast-adblocker/id1052879175'
  }
-}
-function getTrustLink() {
-  const os = ua.getOS()
-  if (os.name === 'Android') {
-    return links.trust.android
-  }
-  if (os.name === 'iOS') {
-    return links.trust.ios
-  }
-}
-function getCoinbaseWalletLink() {
-  const os = ua.getOS()
-  if (os.name === 'Android') {
+  #link {
-    return links.coinbaseWallet.android
+    text-decoration-color: ${({ theme }) => theme.wisteriaPurple};
  }
-  if (os.name === 'iOS') {
+  #title {
-    return links.coinbaseWallet.ios
+    display: inline;
+    font-size: 1rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.wisteriaPurple};
+    :hover {
+      color: ${({ theme }) => darken(0.2, theme.wisteriaPurple)};
+    }
  }
-}
+`
-function getBraveLink() {
-  const os = ua.getOS()
-  if (os.name === 'Mac OS') {
-    return links.brave.ios
-  }
-  return links.brave.android
-}
-function getMetamaskLink() {
-  return links.metamask.chrome
-}
-const ua = new UAParser(window.navigator.userAgent)
-function isMobile() {
-  return ua.getDevice().type === 'mobile'
-}
-function BaseBlockingWarning({ title, description, children }) {
-  return (
-    <div
-      className={classnames('header__dialog', {
-        'header__dialog--disconnected': true
-      })}
-    >
-      <div key="warning-title">{title}</div>
-      <div key="warning-desc" className="header__dialog__description">
-        {description}
-      </div>
-      {children}
-    </div>
-  )
-}
-function BlockingWarning() {
-  const { t } = useTranslation()
-  const correctNetwork = process.env.REACT_APP_NETWORK_NAME || 'Main Ethereum Network'
-  const context = useWeb3Context()
-  if (context.error && context.error.code === Connector.errorCodes.UNSUPPORTED_NETWORK) {
-    return <BaseBlockingWarning title={t('wrongNetwork')} description={t('switchNetwork', { correctNetwork })} />
-  }
-  // this is an intermediate state before infura is set
-  if (context.error && context.error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) {
-    return null
-  }
-  if (context.error) {
-    console.error(context.error)
-    return <BaseBlockingWarning title={t('disconnected')} />
-  }
-  if (!context.account) {
-    return (
-      <BaseBlockingWarning
-        title={t('noWallet')}
-        description={isMobile() ? t('installWeb3MobileBrowser') : t('installMetamask')}
-      >
-        <div key="warning-logos" className="header__download">
-          {isMobile() ? (
-            <>
-              <img
-                alt="coinbase"
-                src={CoinbaseWalletLogo}
-                key="coinbase-wallet"
-                onClick={() => window.open(getCoinbaseWalletLink(), '_blank')}
-              />
-              <img alt="trust" src={TrustLogo} key="trust" onClick={() => window.open(getTrustLink(), '_blank')} />
-            </>
-          ) : (
-            <>
-              <img
-                alt="metamask"
-                src={MetamaskLogo}
-                key="metamask"
-                onClick={() => window.open(getMetamaskLink(), '_blank')}
-              />
-              <img alt="brave" src={BraveLogo} key="brave" onClick={() => window.open(getBraveLink(), '_blank')} />
-            </>
-          )}
-        </div>
-      </BaseBlockingWarning>
-    )
-  }
-  return null
-}
 export default function Header() {
-  const context = useWeb3Context()
  return (
-    <div className="header">
+    <>
-      <BlockingWarning />
+      <HeaderElement>
-      <div className={classnames('header__top')}>
+        <Title>
-        <a className="header__no-decoration" href="https://uniswap.io" target="_blank" rel="noopener noreferrer">
+          <span id="image" role="img" aria-label="Unicorn Emoji">
-          <Logo />
+            🦄
-        </a>
+          </span>
-        <div className="header__center-group">
+          <Link id="link" href="https://uniswap.io">
-          <a className="header__no-decoration" href="https://uniswap.io" target="_blank" rel="noopener noreferrer">
+            <h1 id="title">Uniswap</h1>
-            <span className="header__title">Uniswap</span>
+          </Link>
-          </a>
+        </Title>
-        </div>
+      </HeaderElement>
-        <Web3Status isConnected={!!(context.active && context.account)} />
+      <HeaderElement>
-      </div>
+        <Web3Status />
-    </div>
+      </HeaderElement>
+    </>
  )
 }
--- a/src/components/Logo/index.js
+++ b/src/components/Logo/index.js
-import React from 'react'
-import './logo.scss'
-export default function Logo(props) {
-  return (
-    <div className="logo">
-      <span role="img" aria-label="logo">
-        🦄
-      </span>
-    </div>
-  )
-}
--- a/src/components/Logo/logo.scss
+++ b/src/components/Logo/logo.scss
-.logo {
-  font-size: 1.5rem;
-  line-height: 1.75rem;
-}
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
-import React, { Component } from 'react'
+import React from 'react'
-import ReactDOM from 'react-dom'
+import styled, { css } from 'styled-components'
-import PropTypes from 'prop-types'
+import { animated, useTransition } from 'react-spring'
-import { CSSTransitionGroup } from 'react-transition-group'
+import { DialogOverlay, DialogContent } from '@reach/dialog'
-import './modal.scss'
+import '@reach/dialog/styles.css'
-const modalRoot = document.querySelector('#modal-root')
+const AnimatedDialogOverlay = animated(DialogOverlay)
+const StyledDialogOverlay = styled(AnimatedDialogOverlay).attrs({
-export default class Modal extends Component {
+  suppressClassNameWarning: true
-  static propTypes = {
+})`
-    onClose: PropTypes.func.isRequired
+  &[data-reach-dialog-overlay] {
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
  }
+`
-  componentDidMount() {
+const FilteredDialogContent = ({ minHeight, ...rest }) => <DialogContent {...rest} />
-    // The portal element is inserted in the DOM tree after
+const StyledDialogContent = styled(FilteredDialogContent)`
-    // the Modal's children are mounted, meaning that children
+  &[data-reach-dialog-content] {
-    // will be mounted on a detached DOM node. If a child
+    margin: 0 0 2rem 0;
-    // component requires to be attached to the DOM tree
+    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`}
-    // immediately when mounted, for example to measure a
+    padding: 0;
-    // DOM node, or uses 'autoFocus' in a descendant, add
+    width: 50vw;
-    // state to Modal and only render the children when Modal
+    max-width: 650px;
-    // is inserted in the DOM tree.
+    ${({ theme }) => theme.mediaWidth.upToMedium`width: 75vw;`}
-    // modalRoot.style.display = 'block';
+    ${({ theme }) => theme.mediaWidth.upToSmall`width: 90vw;`}
-    // modalRoot.appendChild(this.el);
+    ${({ minHeight }) =>
+      minHeight &&
+      css`
+        min-height: ${minHeight}vh;
+      `}
+    max-height: 50vh;
+    ${({ theme }) => theme.mediaHeight.upToMedium`max-height: 75vh;`}
+    ${({ theme }) => theme.mediaHeight.upToSmall`max-height: 90vh;`}
+    display: flex;
+    overflow: hidden;
+    border-radius: 1.5rem;
  }
+`
-  componentWillUnmount() {
+const HiddenCloseButton = styled.button`
-    setTimeout(() => {
+  margin: 0;
-      // modalRoot.style.display = 'none';
+  padding: 0;
-      // modalRoot.removeChild(this.el);
+  width: 0;
-    }, 500)
+  height: 0;
-  }
+  border: none;
+`
-  render() {
+export default function Modal({ isOpen, onDismiss, minHeight = 50, initialFocusRef, children }) {
-    return ReactDOM.createPortal(
+  const transitions = useTransition(isOpen, null, {
-      <div>
+    config: { duration: 125 },
-        <CSSTransitionGroup
+    from: { opacity: 0 },
-          transitionName="modal-container"
+    enter: { opacity: 1 },
-          transitionAppear={true}
+    leave: { opacity: 0 }
-          transitionLeave={true}
+  })
-          transitionAppearTimeout={200}
-          transitionLeaveTimeout={200}
+  return transitions.map(
-          transitionEnterTimeout={200}
+    ({ item, key, props }) =>
-        >
+      item && (
-          <div className="modal-container" onClick={this.props.onClose} key="modal" />
+        <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
-        </CSSTransitionGroup>
+          <StyledDialogContent hidden={true} minHeight={minHeight}>
-        {this.props.children}
+            <HiddenCloseButton onClick={onDismiss} />
-      </div>,
+            {children}
-      modalRoot
+          </StyledDialogContent>
-    )
+        </StyledDialogOverlay>
-  }
+      )
+  )
 }
--- a/src/components/Modal/modal.scss
+++ b/src/components/Modal/modal.scss
-@import '../../variables.scss';
-.modal-container {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  background-color: rgba($black, 0.6);
-  z-index: 1000;
-}
-.modal-container-appear {
-  opacity: 0.01;
-}
-.modal-container-appear.modal-container-appear-active {
-  opacity: 1;
-  transition: opacity 200ms ease-in-out;
-}
--- a/src/components/NavigationTabs/index.js
+++ b/src/components/NavigationTabs/index.js
 import React, { useCallback } from 'react'
 import { withRouter, NavLink } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+import { transparentize, darken } from 'polished'
 import { useBodyKeyDown } from '../../hooks'
-import './navigation-tabs.scss'
 import { useBetaMessageManager } from '../../contexts/Application'
 const tabOrder = [
@@ -25,6 +25,80 @@ const tabOrder = [
  }
 ]
+const BetaMessage = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  cursor: pointer;
+  flex: 1 0 auto;
+  align-items: center;
+  position: relative;
+  padding: 0.5rem 1rem;
+  padding-right: 2rem;
+  margin-bottom: 1rem;
+  border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
+  background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
+  border-radius: 2rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.wisteriaPurple};
+  &:after {
+    content: '✕';
+    top: 0.5rem;
+    right: 1rem;
+    position: absolute;
+    color: ${({ theme }) => theme.wisteriaPurple};
+  }
+`
+const Tabs = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  height: 2.5rem;
+  background-color: ${({ theme }) => theme.concreteGray};
+  border-radius: 3rem;
+  box-shadow: 0 0 0 1px ${({ theme }) => darken(0.05, theme.concreteGray)};
+  margin-bottom: 1rem;
+`
+const activeClassName = 'ACTIVE'
+const StyledNavLink = styled(NavLink).attrs({
+  activeClassName
+})`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  flex: 1 0 auto;
+  border-radius: 3rem;
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.doveGray};
+  font-size: 1rem;
+  &.${activeClassName} {
+    background-color: ${({ theme }) => theme.white};
+    border-radius: 3rem;
+    box-shadow: 0 0 0.5px 1px ${({ theme }) => theme.mercuryGray};
+    font-weight: 500;
+    color: ${({ theme }) => theme.royalBlue};
+    :hover {
+      box-shadow: 0 0 0.5px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
+    }
+  }
+  :hover,
+  :focus {
+    font-weight: 500;
+    color: ${({ theme }) => darken(0.1, theme.royalBlue)};
+  }
+`
 function NavigationTabs({ location: { pathname }, history }) {
  const { t } = useTranslation()
@@ -49,26 +123,20 @@ function NavigationTabs({ location: { pathname }, history }) {
  return (
    <>
-      <div className="tabs">
+      <Tabs>
        {tabOrder.map(({ path, textKey, regex }) => (
-          <NavLink
+          <StyledNavLink key={path} to={path} isActive={(_, { pathname }) => pathname.match(regex)}>
-            key={path}
-            to={path}
-            className="tab"
-            activeClassName="tab--selected"
-            isActive={(_, { pathname }) => pathname.match(regex)}
-          >
            {t(textKey)}
-          </NavLink>
+          </StyledNavLink>
        ))}
-      </div>
+      </Tabs>
      {showBetaMessage && (
-        <div className="beta-message" onClick={dismissBetaMessage}>
+        <BetaMessage onClick={dismissBetaMessage}>
          <span role="img" aria-label="warning">
            💀
          </span>{' '}
          {t('betaWarning')}
-        </div>
+        </BetaMessage>
      )}
    </>
  )

--- a/src/components/NavigationTabs/navigation-tabs.scss
+++ b/src/components/NavigationTabs/navigation-tabs.scss
-@import '../../variables';
-.beta-message {
-  @extend %row-nowrap;
-  cursor: pointer;
-  flex: 1 0 auto;
-  align-items: center;
-  position: relative;
-  padding: 0.5rem 1rem;
-  margin-bottom: 1rem;
-  border: 1px solid rgba($wisteria-purple, 0.4);
-  background-color: rgba($wisteria-purple, 0.1);
-  border-radius: 2rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-align: center;
-  color: $wisteria-purple;
-  &:after {
-    content: '✕';
-    top: 0.5rem;
-    right: 1rem;
-    position: absolute;
-    color: $wisteria-purple;
-  }
-}
-.tabs {
-  @extend %row-nowrap;
-  align-items: center;
-  height: 2.5rem;
-  background-color: $concrete-gray;
-  border-radius: 3rem;
-  box-shadow: 0 0 0 0.5px darken($concrete-gray, 5);
-  margin-bottom: 1rem;
-}
-.tab {
-  @extend %row-nowrap;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  flex: 1 0 auto;
-  border-radius: 3rem;
-  cursor: pointer;
-  text-decoration: none;
-  color: $dove-gray;
-  font-size: 1rem;
-  &--selected {
-    background-color: $white;
-    border-radius: 3rem;
-    box-shadow: 0 0 0.5px 0.5px $mercury-gray;
-    font-weight: 500;
-    color: $royal-blue;
-  }
-}
--- a/src/components/OversizedPanel/index.js
+++ b/src/components/OversizedPanel/index.js
 import React from 'react'
+import styled from 'styled-components'
-import './oversized-panel.scss'
+const Panel = styled.div`
+  position: relative;
+  background-color: ${({ theme }) => theme.concreteGray};
+  width: calc(100% - 1rem);
+  margin: 0 auto;
+  border-radius: 0.625rem;
+`
-export default function OversizedPanel(props) {
+const PanelTop = styled.div`
+  content: '';
+  position: absolute;
+  top: -0.5rem;
+  left: 0;
+  height: 1rem;
+  width: 100%;
+  background-color: ${({ theme }) => theme.concreteGray};
+`
+const PanelBottom = styled.div`
+  position: absolute;
+  top: 80%;
+  left: 0;
+  height: 1rem;
+  width: 100%;
+  background-color: ${({ theme }) => theme.concreteGray};
+`
+export default function OversizedPanel({ hideTop, hideBottom, children }) {
  return (
-    <div className="oversized-panel">
+    <Panel>
-      {props.hideTop || <div className="oversized-panel__top" />}
+      {hideTop || <PanelTop />}
-      {props.children}
+      {children}
-      {props.hideBottom || <div className="oversized-panel__bottom" />}
+      {hideBottom || <PanelBottom />}
-    </div>
+    </Panel>
  )
 }
--- a/src/components/OversizedPanel/oversized-panel.scss
+++ b/src/components/OversizedPanel/oversized-panel.scss
-@import '../../variables.scss';
-.oversized-panel {
-  position: relative;
-  background-color: $concrete-gray;
-  width: calc(100% - 1rem);
-  margin: 0 auto;
-  border-radius: 0.625rem;
-  &__top {
-    content: '';
-    position: absolute;
-    top: -0.5rem;
-    left: 0;
-    height: 1rem;
-    width: 100%;
-    background-color: $concrete-gray;
-    z-index: 100;
-  }
-  &__bottom {
-    position: absolute;
-    top: 80%;
-    left: 0;
-    height: 1rem;
-    width: 100%;
-    background-color: $concrete-gray;
-    z-index: 100;
-  }
-}
--- a/src/components/QrCode/index.js
+++ b/src/components/QrCode/index.js
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { CSSTransitionGroup } from 'react-transition-group'
-import Modal from '../Modal'
-import QrCodeSVG from '../../assets/images/qr-code.svg'
-import QrScanner from '../../libraries/qr-scanner'
-import './qr-code.scss'
-class QrCode extends Component {
-  static propTypes = {
-    onValueReceived: PropTypes.func
-  }
-  static defaultProps = {
-    onValueReceived() {}
-  }
-  state = {
-    videoOpen: false,
-    stream: null
-  }
-  componentDidUpdate() {
-    const { videoOpen, stream } = this.state
-    if (videoOpen && !stream && this.videoRef) {
-      this.startStreamingVideo(this.videoRef)
-    } else if (!videoOpen && stream) {
-      this.setState({ stream: null })
-    }
-  }
-  startStreamingVideo(videoRef) {
-    if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices
-        .getUserMedia({ video: { facingMode: 'user' }, audio: false })
-        .then(stream => {
-          videoRef.srcObject = stream
-          new QrScanner(videoRef, val => {
-            this.closeVideo()
-            this.props.onValueReceived(val)
-          })
-          this.setState({
-            stream: stream.getTracks()[0]
-          })
-        })
-        .catch(error => {
-          this.closeVideo()
-          console.error(error)
-        })
-    }
-  }
-  openVideo = () => {
-    this.setState({ videoOpen: true })
-  }
-  closeVideo = () => {
-    if (this.state.stream) {
-      this.state.stream.stop()
-    }
-    this.setState({ videoOpen: false, stream: null })
-    this.videoRef = null
-  }
-  setVideoRef = element => {
-    this.videoRef = element
-  }
-  renderQrReader() {
-    if (this.state.videoOpen) {
-      return (
-        <Modal key="modal" onClose={this.closeVideo}>
-          <CSSTransitionGroup
-            transitionName="qr-modal"
-            transitionAppear={true}
-            transitionLeave={true}
-            transitionAppearTimeout={200}
-            transitionLeaveTimeout={200}
-            transitionEnterTimeout={200}
-          >
-            <div className="qr-code__modal">
-              <video playsInline muted autoPlay ref={this.setVideoRef} className="qr-code__video" />
-            </div>
-          </CSSTransitionGroup>
-        </Modal>
-      )
-    }
-    return null
-  }
-  render() {
-    return [
-      <img
-        key="icon"
-        src={QrCodeSVG}
-        alt="code"
-        onClick={() => {
-          this.state.videoOpen ? this.closeVideo() : this.openVideo()
-        }}
-      />,
-      this.renderQrReader()
-    ]
-  }
-}
-export default QrCode
--- a/src/components/QrCode/qr-code.scss
+++ b/src/components/QrCode/qr-code.scss
-.qr-code {
-  &__video {
-    height: 100%;
-    width: 100%;
-  }
-  &__modal {
-    z-index: 2000;
-    position: absolute;
-    top: 100px;
-    bottom: 100px;
-    right: 100px;
-    left: 100px;
-  }
-}
--- a/src/components/TokenLogo/index.js
+++ b/src/components/TokenLogo/index.js
-import React, { Component } from 'react'
+import React, { useState } from 'react'
-import PropTypes from 'prop-types'
+import styled from 'styled-components'
-import EthereumLogo from '../../assets/images/ethereum-logo.svg'
-const RINKEBY_TOKEN_MAP = {
+import { ReactComponent as EthereumLogo } from '../../assets/images/ethereum-logo.svg'
-  '0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B': '0x0d8775f648430679a709e98d2b0cb6250d2887ef',
-  '0x2448eE2641d78CC42D7AD76498917359D961A783': '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
-  '0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85': '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
-  '0x879884c3C46A24f56089f3bBbe4d5e38dB5788C0': '0xd26114cd6ee289accf82350c8d8487fedb8a0c07',
-  '0xF22e3F33768354c9805d046af3C0926f27741B43': '0xe41d2489571d322189246dafa5ebde1f4699f498'
-}
 const TOKEN_ICON_API = 'https://raw.githubusercontent.com/TrustWallet/tokens/master/tokens'
 const BAD_IMAGES = {}
-export default class TokenLogo extends Component {
-  static propTypes = {
-    address: PropTypes.string,
-    size: PropTypes.string,
-    className: PropTypes.string
-  }
-  static defaultProps = {
-    address: '',
-    size: '1rem',
-    className: ''
-  }
-  state = {
-    error: false
-  }
-  render() {
-    const { address, size, className } = this.props
-    // let path = GenericTokenLogo;
-    let path = ''
-    const mainAddress = RINKEBY_TOKEN_MAP[address] ? RINKEBY_TOKEN_MAP[address] : address
-    if (mainAddress === 'ETH') {
-      path = EthereumLogo
-    }
-    if (!this.state.error && !BAD_IMAGES[mainAddress] && mainAddress !== 'ETH') {
-      path = `${TOKEN_ICON_API}/${mainAddress.toLowerCase()}.png`
-    }
-    if (!path) {
-      return (
-        <div className={className} style={{ width: size, fontSize: size }}>
-          <span role="img" aria-label="thinking">
-            🤔
-          </span>
-        </div>
-      )
-    }
+const Image = styled.img`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: 1rem;
+`
+const Emoji = styled.span`
+  width: ${({ size }) => size};
+  font-size: ${({ size }) => size};
+`
+const StyledEthereumLogo = styled(EthereumLogo)`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`
+export default function TokenLogo({ address, size = '1rem', ...rest }) {
+  const [error, setError] = useState(false)
+  let path = ''
+  if (address === 'ETH') {
+    return <StyledEthereumLogo size={size} />
+  } else if (!error && !BAD_IMAGES[address]) {
+    path = `${TOKEN_ICON_API}/${address.toLowerCase()}.png`
+  } else {
    return (
-      <img
+      <Emoji {...rest}>
-        alt="images"
+        <span role="img" aria-label="Thinking">
-        src={path}
+          🤔
-        className={className}
+        </span>
-        style={{
+      </Emoji>
-          width: size,
-          height: size
-        }}
-        onError={() => {
-          this.setState({ error: true })
-          BAD_IMAGES[mainAddress] = true
-        }}
-      />
    )
  }
+  return (
+    <Image
+      {...rest}
+      alt={address}
+      src={path}
+      size={size}
+      onError={() => {
+        BAD_IMAGES[address] = true
+        setError(true)
+      }}
+    />
+  )
 }
--- a/src/components/WalletModal/Copy.js
+++ b/src/components/WalletModal/Copy.js
+import React from 'react'
+import styled from 'styled-components'
+import { useCopyClipboard } from '../../hooks'
+import { Link } from '../../theme'
+import { CheckCircle, Copy } from 'react-feather'
+const CopyIcon = styled(Link)`
+  color: ${({ theme }) => theme.silverGray};
+  flex-shrink: 0;
+  margin-right: 1rem;
+  margin-left: 0.5rem;
+  text-decoration: none;
+  :hover,
+  :active,
+  :focus {
+    text-decoration: none;
+    color: ${({ theme }) => theme.doveGray};
+  }
+`
+const TransactionStatusText = styled.span`
+  margin-left: 0.25rem;
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+`
+export default function CopyHelper({ toCopy }) {
+  const [isCopied, setCopied] = useCopyClipboard()
+  return (
+    <CopyIcon onClick={() => setCopied(toCopy)}>
+      {isCopied ? (
+        <TransactionStatusText>
+          <CheckCircle size={'16'} />
+          <TransactionStatusText>Copied</TransactionStatusText>
+        </TransactionStatusText>
+      ) : (
+        <TransactionStatusText>
+          <Copy size={'16'} />
+        </TransactionStatusText>
+      )}
+    </CopyIcon>
+  )
+}
--- a/src/components/WalletModal/Info.js
+++ b/src/components/WalletModal/Info.js
+import React from 'react'
+import styled from 'styled-components'
+import { useWeb3Context } from 'web3-react'
+import { getEtherscanLink } from '../../utils'
+import { Link, Spinner } from '../../theme'
+import Copy from './Copy'
+import { Check } from 'react-feather'
+import Circle from '../../assets/images/circle.svg'
+import { transparentize } from 'polished'
+const TransactionStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+const TransactionWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0.75rem;
+  a {
+    /* flex: 1 1 auto; */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 250px;
+  }
+`
+const TransactionStatusText = styled.span`
+  margin-left: 0.25rem;
+`
+const TransactionState = styled.div`
+  background-color: ${({ pending, theme }) =>
+    pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
+  border-radius: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.75rem;
+  border: 1px solid;
+  border-color: ${({ pending, theme }) =>
+    pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};
+  :hover {
+    border-color: ${({ pending, theme }) =>
+      pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
+  }
+`
+const ButtonWrapper = styled.div`
+  a {
+    color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.connectedGreen)};
+  }
+`
+export default function Info({ hash, pending }) {
+  const { networkId } = useWeb3Context()
+  return (
+    <TransactionWrapper key={hash}>
+      <TransactionStatusWrapper>
+        <Link href={getEtherscanLink(networkId, hash, 'transaction')}>{hash} ↗ </Link>
+        <Copy />
+      </TransactionStatusWrapper>
+      {pending ? (
+        <ButtonWrapper pending={pending}>
+          <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
+            <TransactionState pending={pending}>
+              <Spinner src={Circle} alt="loader" />
+              <TransactionStatusText>Pending</TransactionStatusText>
+            </TransactionState>
+          </Link>
+        </ButtonWrapper>
+      ) : (
+        <ButtonWrapper pending={pending}>
+          <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
+            <TransactionState pending={pending}>
+              <Check size="16" />
+              <TransactionStatusText>Confirmed</TransactionStatusText>
+            </TransactionState>
+          </Link>
+        </ButtonWrapper>
+      )}
+    </TransactionWrapper>
+  )
+}
--- a/src/components/WalletModal/Transaction.js
+++ b/src/components/WalletModal/Transaction.js
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useWeb3Context } from 'web3-react'
+import Copy from './Copy'
+import { getEtherscanLink } from '../../utils'
+import { Link, Spinner } from '../../theme'
+import Circle from '../../assets/images/circle.svg'
+import { Check } from 'react-feather'
+import { transparentize } from 'polished'
+const TransactionStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+const TransactionWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0.75rem;
+  a {
+    /* flex: 1 1 auto; */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 250px;
+  }
+`
+const TransactionStatusText = styled.span`
+  margin-left: 0.5rem;
+`
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+const TransactionState = styled.div`
+  display: flex;
+  background-color: ${({ pending, theme }) =>
+    pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
+  border-radius: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.75rem;
+  border: 1px solid;
+  border-color: ${({ pending, theme }) =>
+    pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};
+  #pending {
+    animation: 2s ${rotate} linear infinite;
+  }
+  :hover {
+    border-color: ${({ pending, theme }) =>
+      pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
+  }
+`
+const ButtonWrapper = styled.div`
+  a {
+    color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.connectedGreen)};
+  }
+`
+export default function Transaction({ hash, pending }) {
+  const { networkId } = useWeb3Context()
+  return (
+    <TransactionWrapper key={hash}>
+      <TransactionStatusWrapper>
+        <Link href={getEtherscanLink(networkId, hash, 'transaction')}>{hash} ↗ </Link>
+        <Copy toCopy={hash} />
+      </TransactionStatusWrapper>
+      {pending ? (
+        <ButtonWrapper pending={pending}>
+          <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
+            <TransactionState pending={pending}>
+              <Spinner src={Circle} id="pending" />
+              <TransactionStatusText>Pending</TransactionStatusText>
+            </TransactionState>
+          </Link>
+        </ButtonWrapper>
+      ) : (
+        <ButtonWrapper pending={pending}>
+          <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
+            <TransactionState pending={pending}>
+              <Check size="16" />
+              <TransactionStatusText>Confirmed</TransactionStatusText>
+            </TransactionState>
+          </Link>
+        </ButtonWrapper>
+      )}
+    </TransactionWrapper>
+  )
+}
--- a/src/components/WalletModal/index.js
+++ b/src/components/WalletModal/index.js
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { useWeb3Context } from 'web3-react'
+import Transaction from './Transaction'
+import Copy from './Copy'
+import Modal from '../Modal'
+import { getEtherscanLink } from '../../utils'
+import { Link } from '../../theme'
+const Wrapper = styled.div`
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  ${({ theme }) => theme.flexColumnNoWrap}
+`
+const UpperSection = styled.div`
+  padding: 2rem;
+  background-color: ${({ theme }) => theme.concreteGray};
+  h5 {
+    margin: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  h5:last-child {
+    margin-bottom: 0px;
+  }
+  h4 {
+    margin-top: 0;
+    font-weight: 500;
+  }
+`
+const YourAccount = styled.div`
+  h5 {
+    margin: 0 0 1rem 0;
+    font-weight: 400;
+    color: ${({ theme }) => theme.doveGray};
+  }
+  h4 {
+    margin: 0;
+    font-weight: 500;
+  }
+`
+const LowerSection = styled.div`
+  ${({ theme }) => theme.flexColumnNoWrap}
+  padding: 2rem;
+  flex-grow: 1;
+  overflow: auto;
+  h5 {
+    margin: 0;
+    font-weight: 400;
+    color: ${({ theme }) => theme.doveGray};
+  }
+  div:last-child {
+    /* margin-bottom: 0; */
+  }
+`
+const AccountControl = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  min-width: 0;
+  ${({ hasENS, isENS }) =>
+    hasENS &&
+    isENS &&
+    css`
+      margin-bottom: 0.75rem;
+    `}
+  font-weight: ${({ hasENS, isENS }) => (hasENS ? (isENS ? css`500` : css`400`) : css`500`)};
+  font-size: ${({ hasENS, isENS }) => (hasENS ? (isENS ? css`1rem` : css`0.8rem`) : css`1rem`)};
+  a:hover {
+    text-decoration: underline;
+  }
+  a {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+const TransactionListWrapper = styled.div`
+  ${({ theme }) => theme.flexColumnNoWrap} /* margin: 0 0 1rem 0; */
+`
+const StyledLink = styled(Link)`
+  color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.royalBlue : theme.doveGray) : theme.royalBlue)};
+`
+// function getErrorMessage(event) {
+//   switch (event.code) {
+//     case InjectedConnector.errorCodes.ETHEREUM_ACCESS_DENIED: {
+//       return 'Permission Required'
+//     }
+//     case InjectedConnector.errorCodes.UNLOCK_REQUIRED: {
+//       return 'Account Unlock Required'
+//     }
+//     case InjectedConnector.errorCodes.NO_WEB3: {
+//       return 'Not a Web3 Browser'
+//     }
+//     default: {
+//       return 'Connection Error'
+//     }
+//   }
+// }
+export default function WalletModal({ isOpen, error, onDismiss, pendingTransactions, confirmedTransactions, ENSName }) {
+  const { account, networkId } = useWeb3Context()
+  function renderTransactions(transactions, pending) {
+    return (
+      <TransactionListWrapper>
+        {transactions.map((hash, i) => {
+          return <Transaction key={i} hash={hash} pending={pending} />
+        })}
+      </TransactionListWrapper>
+    )
+  }
+  function wrappedOnDismiss() {
+    onDismiss()
+  }
+  function getWalletDisplay() {
+    if (error) {
+      return (
+        <>
+          <UpperSection>
+            <h4>Wrong Network</h4>
+            <h5>Please connect to the main Ethereum network.</h5>
+          </UpperSection>
+        </>
+      )
+    } else if (account) {
+      return (
+        <>
+          <UpperSection>
+            <YourAccount>
+              <h5>Your Account</h5>
+              {ENSName && (
+                <AccountControl hasENS={!!ENSName} isENS={true}>
+                  <StyledLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(networkId, ENSName, 'address')}>
+                    {ENSName} ↗{' '}
+                  </StyledLink>
+                  <Copy toCopy={ENSName} />
+                </AccountControl>
+              )}
+              <AccountControl hasENS={!!ENSName} isENS={false}>
+                <StyledLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(networkId, account, 'address')}>
+                  {account} ↗{' '}
+                </StyledLink>
+                <Copy toCopy={account} />
+              </AccountControl>
+            </YourAccount>
+          </UpperSection>
+          {!!pendingTransactions.length || !!confirmedTransactions.length ? (
+            <LowerSection>
+              <h5>Recent Transactions</h5>
+              {renderTransactions(pendingTransactions, true)}
+              {renderTransactions(confirmedTransactions, false)}
+            </LowerSection>
+          ) : (
+            <LowerSection>
+              <h5>Your transactions will appear here...</h5>
+            </LowerSection>
+          )}
+        </>
+      )
+    } else {
+      return (
+        <>
+          <UpperSection>
+            <h4>No Ethereum account found</h4>
+            <h5>Please visit this page in a Web3 enabled browser.</h5>
+            <h5>
+              <Link href={'https://ethereum.org/use/#_3-what-is-a-wallet-and-which-one-should-i-use'}>
+                Learn more ↗
+              </Link>
+            </h5>
+          </UpperSection>
+        </>
+      )
+    }
+  }
+  return (
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} minHeight={null}>
+      <Wrapper>{getWalletDisplay()}</Wrapper>
+    </Modal>
+  )
+}
--- a/src/components/Web3ReactManager/index.js
+++ b/src/components/Web3ReactManager/index.js
+import React, { useState, useEffect } from 'react'
+import { useWeb3Context, Connectors } from 'web3-react'
+import styled from 'styled-components'
+import { ethers } from 'ethers'
+import { useTranslation } from 'react-i18next'
+import { isMobile } from 'react-device-detect'
+import { Spinner } from '../../theme'
+import Circle from '../../assets/images/circle.svg'
+const { Connector } = Connectors
+const MessageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20rem;
+`
+const Message = styled.h2`
+  color: ${({ theme }) => theme.uniswapPink};
+`
+const SpinnerWrapper = styled(Spinner)`
+  font-size: 4rem;
+  svg {
+    path {
+      color: ${({ theme }) => theme.uniswapPink};
+    }
+  }
+`
+function tryToSetConnector(setConnector, setError) {
+  setConnector('Injected', { suppressAndThrowErrors: true }).catch(error => {
+    setConnector('Network')
+  })
+}
+export default function Web3ReactManager({ children }) {
+  const { t } = useTranslation()
+  const { active, error, setConnector, setError } = useWeb3Context()
+  // control whether or not we render the error, after parsing
+  const blockRender = error && error.code && error.code === Connector.errorCodes.UNSUPPORTED_NETWORK
+  useEffect(() => {
+    if (!active && !error) {
+      if (window.ethereum || window.web3) {
+        if (isMobile) {
+          tryToSetConnector(setConnector, setError)
+        } else {
+          const library = new ethers.providers.Web3Provider(window.ethereum || window.web3)
+          library.listAccounts().then(accounts => {
+            if (accounts.length >= 1) {
+              tryToSetConnector(setConnector, setError)
+            } else {
+              setConnector('Network')
+            }
+          })
+        }
+      } else {
+        setConnector('Network')
+      }
+    }
+  }, [active, error, setConnector, setError])
+  // parse the error
+  useEffect(() => {
+    if (error) {
+      // if the user changes to the wrong network, unset the connector
+      if (error.code === Connector.errorCodes.UNSUPPORTED_NETWORK) {
+        setConnector('Network')
+      }
+    }
+  }, [error, setConnector])
+  const [showLoader, setShowLoader] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowLoader(true)
+    }, 600)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+  if (blockRender) {
+    return null
+  } else if (error) {
+    return (
+      <MessageWrapper>
+        <Message>{t('unknownError')}</Message>
+      </MessageWrapper>
+    )
+  } else if (!active) {
+    return showLoader ? (
+      <MessageWrapper>
+        <SpinnerWrapper src={Circle} />
+      </MessageWrapper>
+    ) : null
+  } else {
+    return children
+  }
+}
--- a/src/components/Web3Status/index.js
+++ b/src/components/Web3Status/index.js
--- a/src/components/Web3Status/web3-status.scss
+++ b/src/components/Web3Status/web3-status.scss
-@import '../../variables.scss';
-.web3-status {
-  @extend %row-nowrap;
-  height: 2rem;
-  font-size: 0.9rem;
-  align-items: center;
-  border: 1px solid $mercury-gray;
-  padding: 0.5rem;
-  border-radius: 2rem;
-  color: $dove-gray;
-  font-weight: 400;
-  box-sizing: border-box;
-  &__identicon {
-    height: 1rem;
-    width: 1rem;
-    border-radius: 1.125rem;
-    background-color: $silver-gray;
-  }
-  &__text {
-    flex: 1 1 auto;
-    overflow: hidden;
-    margin-right: 0.75rem;
-    margin-left: 0.25rem;
-    font-size: 0.75rem;
-  }
-  &__pending-container {
-    display: flex;
-    justify-content: space-around;
-  }
-  &--pending {
-    background-color: $zumthor-blue;
-    color: $royal-blue;
-    border: 1px solid $royal-blue;
-  }
-}
-.pending-modal {
-  background-color: $white;
-  position: relative;
-  bottom: 12rem;
-  height: 12rem;
-  width: 100%;
-  z-index: 2000;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  transition: 250ms ease-in-out;
-  &__transaction-list {
-    height: 12rem;
-    overflow-y: auto;
-  }
-  &__transaction-row {
-    @extend %row-nowrap;
-    box-sizing: border-box;
-    align-items: center;
-    padding: 0.25rem 1.5rem;
-    justify-content: space-between;
-    cursor: pointer;
-    width: 100%;
-    user-select: none;
-  }
-  &__transaction-label {
-    color: $royal-blue;
-    width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 200;
-  }
-  &__pending-indicator {
-    @extend %row-nowrap;
-    color: $royal-blue;
-    border: 1px solid $royal-blue;
-    background-color: $zumthor-blue;
-    padding: 0.5rem 0.75rem;
-    border-radius: 100px;
-    font-size: 0.75rem;
-    & > .loading {
-      margin-right: 0.5rem;
-    }
-  }
-  &__header {
-    font-size: 1rem;
-    color: $dove-gray;
-    padding: 1rem 1.5rem 0.25rem 1.5rem;
-  }
-}
-.pending-modal-appear {
-  bottom: 0;
-}
-.pending-modal-appear.modal-container-appear-active {
-  bottom: 0;
-}
--- a/src/abi/erc20.json
+++ b/src/abi/erc20.json
--- a/src/abi/erc20_bytes32.json
+++ b/src/abi/erc20_bytes32.json
--- a/src/abi/exchange.json
+++ b/src/abi/exchange.json
--- a/src/abi/factory.json
+++ b/src/abi/factory.json
--- a/src/constants/index.js
+++ b/src/constants/index.js
 export const FACTORY_ADDRESSES = {
  1: '0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95',
-  4: '0xf5D915570BC477f9B8D6C0E980aA81757A3AaC36'
+  3: '0x9c83dCE8CA20E9aAF9D3efc003b2ea62aBC08351',
+  4: '0xf5D915570BC477f9B8D6C0E980aA81757A3AaC36',
+  42: '0xD3E51Ef092B2845f10401a0159B2B96e8B6c3D30'
 }
--- a/src/contexts/Allowances.js
+++ b/src/contexts/Allowances.js
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { safeAccess, isAddress, getTokenAllowance } from '../utils'
@@ -46,9 +46,11 @@ export default function Provider({ children }) {
    dispatch({ type: UPDATE, payload: { networkId, address, tokenAddress, spenderAddress, value, blockNumber } })
  }, [])
-  const contextValue = useMemo(() => [state, { update }], [state, update])
+  return (
+    <AllowancesContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
-  return <AllowancesContext.Provider value={contextValue}>{children}</AllowancesContext.Provider>
+      {children}
+    </AllowancesContext.Provider>
+  )
 }
 export function useAddressAllowance(address, tokenAddress, spenderAddress) {

--- a/src/contexts/Application.js
+++ b/src/contexts/Application.js
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { safeAccess } from '../utils'
@@ -51,13 +51,17 @@ export default function Provider({ children }) {
    dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
  }, [])
-  const contextValue = useMemo(() => [state, { dismissBetaMessage, updateBlockNumber }], [
+  return (
-    state,
+    <ApplicationContext.Provider
-    dismissBetaMessage,
+      value={useMemo(() => [state, { dismissBetaMessage, updateBlockNumber }], [
-    updateBlockNumber
+        state,
-  ])
+        dismissBetaMessage,
+        updateBlockNumber
-  return <ApplicationContext.Provider value={contextValue}>{children}</ApplicationContext.Provider>
+      ])}
+    >
+      {children}
+    </ApplicationContext.Provider>
+  )
 }
 export function Updater() {

--- a/src/contexts/Balances.js
+++ b/src/contexts/Balances.js
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { safeAccess, isAddress, getEtherBalance, getTokenBalance } from '../utils'
@@ -44,9 +44,11 @@ export default function Provider({ children }) {
    dispatch({ type: UPDATE, payload: { networkId, address, tokenAddress, value, blockNumber } })
  }, [])
-  const contextValue = useMemo(() => [state, { update }], [state, update])
+  return (
+    <BalancesContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
-  return <BalancesContext.Provider value={contextValue}>{children}</BalancesContext.Provider>
+      {children}
+    </BalancesContext.Provider>
+  )
 }
 export function useAddressBalance(address, tokenAddress) {
@@ -66,14 +68,13 @@ export function useAddressBalance(address, tokenAddress) {
      library
    ) {
      let stale = false
      ;(tokenAddress === 'ETH' ? getEtherBalance(address, library) : getTokenBalance(tokenAddress, address, library))
        .then(value => {
          if (!stale) {
            update(networkId, address, tokenAddress, value, globalBlockNumber)
          }
        })
-        .catch(e => {
+        .catch(() => {
          if (!stale) {
            update(networkId, address, tokenAddress, null, globalBlockNumber)
          }

--- a/src/contexts/Tokens.js
+++ b/src/contexts/Tokens.js
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { ethers } from 'ethers'
@@ -18,14 +18,17 @@ const EXCHANGE_ADDRESS = 'exchangeAddress'
 const UPDATE = 'UPDATE'
+const ETH = {
+  ETH: {
+    [NAME]: 'Ethereum',
+    [SYMBOL]: 'ETH',
+    [DECIMALS]: 18,
+    [EXCHANGE_ADDRESS]: null
+  }
+}
 const INITIAL_TOKENS_CONTEXT = {
  1: {
-    ETH: {
-      [NAME]: 'Ethereum',
-      [SYMBOL]: 'ETH',
-      [DECIMALS]: 18,
-      [EXCHANGE_ADDRESS]: null
-    },
    '0x960b236A07cf122663c4303350609A66A7B288C0': {
      [NAME]: 'Aragon Network Token',
      [SYMBOL]: 'ANT',
@@ -56,6 +59,12 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 18,
      [EXCHANGE_ADDRESS]: '0xF7B5A4b934658025390ff69dB302BC7F2AC4a542'
    },
+    '0xF5DCe57282A584D2746FaF1593d3121Fcac444dC': {
+      [NAME]: 'Compound Dai',
+      [SYMBOL]: 'cDAI',
+      [DECIMALS]: 8,
+      [EXCHANGE_ADDRESS]: '0x45A2FDfED7F7a2c791fb1bdF6075b83faD821ddE'
+    },
    '0x41e5560054824eA6B0732E656E3Ad64E20e94E45': {
      [NAME]: 'Civic',
      [SYMBOL]: 'CVC',
@@ -98,12 +107,6 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 12,
      [EXCHANGE_ADDRESS]: '0x4B17685b330307C751B47f33890c8398dF4Fe407'
    },
-    '0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd': {
-      [NAME]: 'Gemini dollar',
-      [SYMBOL]: 'GUSD',
-      [DECIMALS]: 2,
-      [EXCHANGE_ADDRESS]: '0xD883264737Ed969d2696eE4B4cAF529c2Fc2A141'
-    },
    '0x818Fc6C2Ec5986bc6E2CBf00939d90556aB12ce5': {
      [NAME]: 'Kin',
      [SYMBOL]: 'KIN',
@@ -122,6 +125,12 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 18,
      [EXCHANGE_ADDRESS]: '0xF173214C720f58E03e194085B1DB28B50aCDeeaD'
    },
+    '0xBBbbCA6A901c926F240b89EacB641d8Aec7AEafD': {
+      [NAME]: 'LoopringCoin V2',
+      [SYMBOL]: 'LRC',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0xA539BAaa3aCA455c986bB1E25301CEF936CE1B65'
+    },
    '0x6c6EE5e31d828De241282B9606C8e98Ea48526E2': {
      [NAME]: 'HoloToken',
      [SYMBOL]: 'HOT',
@@ -230,11 +239,11 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 18,
      [EXCHANGE_ADDRESS]: '0x1aEC8F11A7E78dC22477e91Ed924Fab46e3A88Fd'
    },
-    '0xEf8a2c1BC94e630463293F71bF5414d13e80F62D': {
+    '0x5a4aDe4f3E934a0885f42884F7077261C3F4f66F': {
      [NAME]: 'Synthetix Network Token',
      [SYMBOL]: 'SNX',
      [DECIMALS]: 18,
-      [EXCHANGE_ADDRESS]: '0xd9025Ed64BAA7B9046E37fe94670C79fcCB2b5C8'
+      [EXCHANGE_ADDRESS]: '0x8Da198A049426bFCf1522B0Dc52f84beDa6e38FF'
    },
    '0x42d6622deCe394b54999Fbd73D108123806f6a18': {
      [NAME]: 'SPANK',
@@ -290,12 +299,6 @@ const INITIAL_TOKENS_CONTEXT = {
      [DECIMALS]: 18,
      [EXCHANGE_ADDRESS]: '0x8dE0d002DC83478f479dC31F76cB0a8aa7CcEa17'
    },
-    '0x05f4a42e251f2d52b8ed15E9FEdAacFcEF1FAD27': {
-      [NAME]: 'Zilliqa',
-      [SYMBOL]: 'ZIL',
-      [DECIMALS]: 12,
-      [EXCHANGE_ADDRESS]: '0x7dc095A5CF7D6208CC680fA9866F80a53911041a'
-    },
    '0xE41d2489571d322189246DaFA5ebDe1F4699F498': {
      [NAME]: '0x Protocol Token',
      [SYMBOL]: 'ZRX',
@@ -341,17 +344,20 @@ export default function Provider({ children }) {
    dispatch({ type: UPDATE, payload: { networkId, tokenAddress, name, symbol, decimals, exchangeAddress } })
  }, [])
-  const contextValue = useMemo(() => [state, { update }], [state, update])
+  return (
+    <TokensContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
-  return <TokensContext.Provider value={contextValue}>{children}</TokensContext.Provider>
+      {children}
+    </TokensContext.Provider>
+  )
 }
 export function useTokenDetails(tokenAddress) {
  const { networkId, library } = useWeb3Context()
  const [state, { update }] = useTokensContext()
+  const allTokensInNetwork = { ...ETH, ...(safeAccess(state, [networkId]) || {}) }
  const { [NAME]: name, [SYMBOL]: symbol, [DECIMALS]: decimals, [EXCHANGE_ADDRESS]: exchangeAddress } =
-    safeAccess(state, [networkId, tokenAddress]) || {}
+    safeAccess(allTokensInNetwork, [tokenAddress]) || {}
  useEffect(() => {
    if (
@@ -390,7 +396,7 @@ export function useAllTokenDetails(requireExchange = true) {
  const { networkId } = useWeb3Context()
  const [state] = useTokensContext()
-  const tokenDetails = safeAccess(state, [networkId]) || {}
+  const tokenDetails = { ...ETH, ...(safeAccess(state, [networkId]) || {}) }
  return requireExchange
    ? Object.keys(tokenDetails)

--- a/src/contexts/Transactions.js
+++ b/src/contexts/Transactions.js
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
-import { ethers } from 'ethers'
 import { safeAccess } from '../utils'
 import { useBlockNumber } from './Application'
 const RESPONSE = 'response'
+const CUSTOM_DATA = 'CUSTOM_DATA'
 const BLOCK_NUMBER_CHECKED = 'BLOCK_NUMBER_CHECKED'
 const RECEIPT = 'receipt'
@@ -93,9 +93,13 @@ export default function Provider({ children }) {
    dispatch({ type: FINALIZE, payload: { networkId, hash, receipt } })
  }, [])
-  const contextValue = useMemo(() => [state, { add, check, finalize }], [state, add, check, finalize])
+  return (
+    <TransactionsContext.Provider
-  return <TransactionsContext.Provider value={contextValue}>{children}</TransactionsContext.Provider>
+      value={useMemo(() => [state, { add, check, finalize }], [state, add, check, finalize])}
+    >
+      {children}
+    </TransactionsContext.Provider>
+  )
 }
 export function Updater() {
@@ -145,7 +149,7 @@ export function useTransactionAdder() {
  const [, { add }] = useTransactionsContext()
  return useCallback(
-    response => {
+    (response, customData = {}) => {
      if (!(networkId || networkId === 0)) {
        throw Error(`Invalid networkId '${networkId}`)
      }
@@ -155,7 +159,7 @@ export function useTransactionAdder() {
      if (!hash) {
        throw Error('No transaction hash found.')
      }
-      add(networkId, hash, response)
+      add(networkId, hash, { ...response, [CUSTOM_DATA]: customData })
    },
    [networkId, add]
  )
@@ -178,12 +182,7 @@ export function usePendingApproval(tokenAddress) {
        return false
      } else if (!allTransactions[hash][RESPONSE]) {
        return false
-      } else if (allTransactions[hash][RESPONSE].to !== tokenAddress) {
+      } else if (allTransactions[hash][RESPONSE][CUSTOM_DATA].approval !== tokenAddress) {
-        return false
-      } else if (
-        allTransactions[hash][RESPONSE].data.substring(0, 10) !==
-        ethers.utils.id('approve(address,uint256)').substring(0, 10)
-      ) {
        return false
      } else {
        return true

--- a/src/hooks/index.js
+++ b/src/hooks/index.js
 import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
-import ERC20_ABI from '../abi/erc20'
+import ERC20_ABI from '../constants/abis/erc20'
-import { getContract, getFactoryContract, getExchangeContract } from '../utils'
+import { getContract, getFactoryContract, getExchangeContract, isAddress } from '../utils'
+import copy from 'copy-to-clipboard'
 // modified from https://usehooks.com/useDebounce/
 export function useDebounce(value, delay) {
@@ -28,8 +29,13 @@ export function useDebounce(value, delay) {
 // modified from https://usehooks.com/useKeyPress/
 export function useBodyKeyDown(targetKey, onKeyDown, suppressOnKeyDown = false) {
  const downHandler = useCallback(
-    ({ target: { tagName }, key }) => {
+    event => {
+      const {
+        target: { tagName },
+        key
+      } = event
      if (key === targetKey && tagName === 'BODY' && !suppressOnKeyDown) {
+        event.preventDefault()
        onKeyDown()
      }
    },
@@ -44,6 +50,41 @@ export function useBodyKeyDown(targetKey, onKeyDown, suppressOnKeyDown = false)
  }, [downHandler])
 }
+export function useENSName(address) {
+  const { library } = useWeb3Context()
+  const [ENSName, setENSNname] = useState()
+  useEffect(() => {
+    if (isAddress(address)) {
+      let stale = false
+      library
+        .lookupAddress(address)
+        .then(name => {
+          if (!stale) {
+            if (name) {
+              setENSNname(name)
+            } else {
+              setENSNname(null)
+            }
+          }
+        })
+        .catch(() => {
+          if (!stale) {
+            setENSNname(null)
+          }
+        })
+      return () => {
+        stale = true
+        setENSNname()
+      }
+    }
+  }, [library, address])
+  return ENSName
+}
 // returns null on errors
 export function useContract(address, ABI, withSignerIfPossible = true) {
  const { library, account } = useWeb3Context()
@@ -94,3 +135,26 @@ export function useExchangeContract(exchangeAddress, withSignerIfPossible = true
    }
  }, [exchangeAddress, library, withSignerIfPossible, account])
 }
+export function useCopyClipboard(timeout = 500) {
+  const [isCopied, setIsCopied] = useState(false)
+  const staticCopy = useCallback(text => {
+    const didCopy = copy(text)
+    setIsCopied(didCopy)
+  }, [])
+  useEffect(() => {
+    if (isCopied) {
+      const hide = setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+      return () => {
+        clearTimeout(hide)
+      }
+    }
+  }, [isCopied, setIsCopied, timeout])
+  return [isCopied, staticCopy]
+}
--- a/src/i18n.js
+++ b/src/i18n.js
 import i18next from 'i18next'
+import { initReactI18next } from 'react-i18next'
 import XHR from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import { initReactI18next } from 'react-i18next'
 i18next
-  // load translation using xhr -> see /public/locales
-  // https://github.com/i18next/i18next-xhr-backend
  .use(XHR)
-  // detect user language
-  // https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  .use(initReactI18next)
-  // https://www.i18next.com/overview/configuration-options
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json'
    },
    react: {
-      useSuspense: false
+      useSuspense: true
    },
    lng: 'en',
    fallbackLng: 'en',
+    preload: ['en'],
    keySeparator: false,
    interpolation: { escapeValue: false }
  })

--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import BalancesContextProvider from './contexts/Balances'
 import AllowancesContextProvider from './contexts/Allowances'
 import App from './pages/App'
+import InjectedConnector from './InjectedConnector'
 import './i18n'
@@ -21,12 +22,10 @@ if (process.env.NODE_ENV === 'production') {
 }
 ReactGA.pageview(window.location.pathname + window.location.search)
-const { InjectedConnector, NetworkOnlyConnector } = Connectors
+const { NetworkOnlyConnector } = Connectors
-const Injected = new InjectedConnector({ supportedNetworks: [Number(process.env.REACT_APP_NETWORK_ID) || 1] })
+const Injected = new InjectedConnector({ supportedNetworks: [Number(process.env.REACT_APP_NETWORK_ID || '1')] })
-const Infura = new NetworkOnlyConnector({
+const Network = new NetworkOnlyConnector({ providerURL: process.env.REACT_APP_NETWORK_URL || '' })
-  providerURL: process.env.REACT_APP_NETWORK_URL || ''
+const connectors = { Injected, Network }
-})
-const connectors = { Injected, Infura }
 function ContextProviders({ children }) {
  return (

--- a/src/libraries/qr-scanner.js
+++ b/src/libraries/qr-scanner.js
-/* eslint-disable */
-/*
- @asset(/libraries/qr-scanner/qr-scanner-worker.min.js) */
-'use strict'
-export default class QrScanner {
-  constructor(video, onDecode, canvasSize = QrScanner.DEFAULT_CANVAS_SIZE) {
-    this.$video = video
-    this.$canvas = document.createElement('canvas')
-    this._onDecode = onDecode
-    this._active = false
-    this.$canvas.width = canvasSize
-    this.$canvas.height = canvasSize
-    this._sourceRect = { x: 0, y: 0, width: canvasSize, height: canvasSize }
-    this.$video.addEventListener('canplay', () => this._updateSourceRect())
-    this.$video.addEventListener(
-      'play',
-      () => {
-        this._updateSourceRect()
-        this._scanFrame()
-      },
-      false
-    )
-    this._qrWorker = new Worker(QrScanner.WORKER_PATH)
-  }
-  _updateSourceRect() {
-    const smallestDimension = Math.min(this.$video.videoWidth, this.$video.videoHeight)
-    const sourceRectSize = Math.round((2 / 3) * smallestDimension)
-    this._sourceRect.width = this._sourceRect.height = sourceRectSize
-    this._sourceRect.x = (this.$video.videoWidth - sourceRectSize) / 2
-    this._sourceRect.y = (this.$video.videoHeight - sourceRectSize) / 2
-  }
-  _scanFrame() {
-    if (this.$video.paused || this.$video.ended) return false
-    requestAnimationFrame(() => {
-      QrScanner.scanImage(this.$video, this._sourceRect, this._qrWorker, this.$canvas, true)
-        .then(this._onDecode, error => {
-          if (error !== 'QR code not found.') console.error(error)
-        })
-        .then(() => this._scanFrame())
-    })
-  }
-  _getCameraStream(facingMode, exact = false) {
-    const constraintsToTry = [{ width: { min: 1024 } }, { width: { min: 768 } }, {}]
-    if (facingMode) {
-      if (exact) facingMode = { exact: facingMode }
-      constraintsToTry.forEach(constraint => (constraint.facingMode = facingMode))
-    }
-    return this._getMatchingCameraStream(constraintsToTry)
-  }
-  _getMatchingCameraStream(constraintsToTry) {
-    if (constraintsToTry.length === 0) return Promise.reject('Camera not found.')
-    return navigator.mediaDevices
-      .getUserMedia({ video: constraintsToTry.shift() })
-      .catch(() => this._getMatchingCameraStream(constraintsToTry))
-  }
-  start() {
-    if (this._active) return Promise.resolve()
-    this._active = true
-    clearTimeout(this._offTimeout)
-    let facingMode = 'environment'
-    return this._getCameraStream('environment', true)
-      .catch(() => {
-        facingMode = 'user'
-        return this._getCameraStream()
-      })
-      .then(stream => {
-        this.$video.srcObject = stream
-        this._setVideoMirror(facingMode)
-      })
-      .catch(e => {
-        this._active = false
-        throw e
-      })
-  }
-  stop() {
-    if (!this._active) return
-    this._active = false
-    this.$video.pause()
-    this._offTimeout = setTimeout(() => {
-      this.$video.srcObject.getTracks()[0].stop()
-      this.$video.srcObject = null
-    }, 3e3)
-  }
-  _setVideoMirror(facingMode) {
-    const scaleFactor = facingMode === 'user' ? -1 : 1
-    this.$video.style.transform = 'scaleX(' + scaleFactor + ')'
-  }
-  setGrayscaleWeights(red, green, blue) {
-    this._qrWorker.postMessage({ type: 'grayscaleWeights', data: { red, green, blue } })
-  }
-  static scanImage(
-    imageOrFileOrUrl,
-    sourceRect = null,
-    worker = null,
-    canvas = null,
-    fixedCanvasSize = false,
-    alsoTryWithoutSourceRect = false
-  ) {
-    const promise = new Promise((resolve, reject) => {
-      worker = worker || new Worker(QrScanner.WORKER_PATH)
-      let timeout, onMessage, onError
-      onMessage = event => {
-        if (event.data.type !== 'qrResult') return
-        worker.removeEventListener('message', onMessage)
-        worker.removeEventListener('error', onError)
-        clearTimeout(timeout)
-        if (event.data.data !== null) resolve(event.data.data)
-        else reject('QR code not found.')
-      }
-      onError = () => {
-        worker.removeEventListener('message', onMessage)
-        worker.removeEventListener('error', onError)
-        clearTimeout(timeout)
-        reject('Worker error.')
-      }
-      worker.addEventListener('message', onMessage)
-      worker.addEventListener('error', onError)
-      timeout = setTimeout(onError, 3e3)
-      QrScanner._loadImage(imageOrFileOrUrl)
-        .then(image => {
-          const imageData = QrScanner._getImageData(image, sourceRect, canvas, fixedCanvasSize)
-          worker.postMessage({ type: 'decode', data: imageData }, [imageData.data.buffer])
-        })
-        .catch(reject)
-    })
-    if (sourceRect && alsoTryWithoutSourceRect)
-      return promise.catch(() => QrScanner.scanImage(imageOrFileOrUrl, null, worker, canvas, fixedCanvasSize))
-    else return promise
-  }
-  static _getImageData(image, sourceRect = null, canvas = null, fixedCanvasSize = false) {
-    canvas = canvas || document.createElement('canvas')
-    const sourceRectX = sourceRect && sourceRect.x ? sourceRect.x : 0
-    const sourceRectY = sourceRect && sourceRect.y ? sourceRect.y : 0
-    const sourceRectWidth = sourceRect && sourceRect.width ? sourceRect.width : image.width || image.videoWidth
-    const sourceRectHeight = sourceRect && sourceRect.height ? sourceRect.height : image.height || image.videoHeight
-    if (!fixedCanvasSize && (canvas.width !== sourceRectWidth || canvas.height !== sourceRectHeight)) {
-      canvas.width = sourceRectWidth
-      canvas.height = sourceRectHeight
-    }
-    const context = canvas.getContext('2d', { alpha: false })
-    context.imageSmoothingEnabled = false
-    context.drawImage(
-      image,
-      sourceRectX,
-      sourceRectY,
-      sourceRectWidth,
-      sourceRectHeight,
-      0,
-      0,
-      canvas.width,
-      canvas.height
-    )
-    return context.getImageData(0, 0, canvas.width, canvas.height)
-  }
-  static _loadImage(imageOrFileOrUrl) {
-    if (
-      imageOrFileOrUrl instanceof HTMLCanvasElement ||
-      imageOrFileOrUrl instanceof HTMLVideoElement ||
-      (window.ImageBitmap && imageOrFileOrUrl instanceof window.ImageBitmap) ||
-      (window.OffscreenCanvas && imageOrFileOrUrl instanceof window.OffscreenCanvas)
-    )
-      return Promise.resolve(imageOrFileOrUrl)
-    else if (imageOrFileOrUrl instanceof Image)
-      return QrScanner._awaitImageLoad(imageOrFileOrUrl).then(() => imageOrFileOrUrl)
-    else if (
-      imageOrFileOrUrl instanceof File ||
-      imageOrFileOrUrl instanceof URL ||
-      typeof imageOrFileOrUrl === 'string'
-    ) {
-      const image = new Image()
-      if (imageOrFileOrUrl instanceof File) image.src = URL.createObjectURL(imageOrFileOrUrl)
-      else image.src = imageOrFileOrUrl
-      return QrScanner._awaitImageLoad(image).then(() => {
-        if (imageOrFileOrUrl instanceof File) URL.revokeObjectURL(image.src)
-        return image
-      })
-    } else return Promise.reject('Unsupported image type.')
-  }
-  static _awaitImageLoad(image) {
-    return new Promise((resolve, reject) => {
-      if (image.complete && image.naturalWidth !== 0) resolve()
-      else {
-        let onLoad, onError
-        onLoad = () => {
-          image.removeEventListener('load', onLoad)
-          image.removeEventListener('error', onError)
-          resolve()
-        }
-        onError = () => {
-          image.removeEventListener('load', onLoad)
-          image.removeEventListener('error', onError)
-          reject('Image load error')
-        }
-        image.addEventListener('load', onLoad)
-        image.addEventListener('error', onError)
-      }
-    })
-  }
-}
-QrScanner.DEFAULT_CANVAS_SIZE = 400
-QrScanner.WORKER_PATH = '/libraries/qr-scanner/qr-scanner-worker.min.js'
-//# sourceMappingURL=qr-scanner.min.js.map
--- a/src/pages/App.js
+++ b/src/pages/App.js
-import React, { useEffect } from 'react'
+import React, { Suspense, lazy } from 'react'
+import styled from 'styled-components'
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
-import { useWeb3Context, Connectors } from 'web3-react'
-import NavigationTabs from '../components/NavigationTabs'
+import Web3ReactManager from '../components/Web3ReactManager'
 import Header from '../components/Header'
-import Swap from './Swap'
+import NavigationTabs from '../components/NavigationTabs'
-import Send from './Send'
-import Pool from './Pool'
-import './App.scss'
-const { Connector, InjectedConnector } = Connectors
+const Swap = lazy(() => import('./Swap'))
+const Send = lazy(() => import('./Send'))
+const Pool = lazy(() => import('./Pool'))
-export default function App() {
+const HeaderWrapper = styled.div`
-  const { setConnector, setError, error, active, connectorName } = useWeb3Context()
+  ${({ theme }) => theme.flexRowNoWrap}
+  width: 100%;
+  justify-content: space-between;
+`
-  // start web3-react on page-load
+const BodyWrapper = styled.div`
-  useEffect(() => {
+  ${({ theme }) => theme.flexRowNoWrap}
-    setConnector('Injected', { suppressAndThrowErrors: true }).catch(error => {
+  width: 100%;
-      if (error.code === Connector.errorCodes.UNSUPPORTED_NETWORK) {
+  justify-content: center;
-        setError(error, { connectorName: 'Injected' })
+  flex-grow: 1;
-      } else {
+  flex-basis: 0;
-        setConnector('Infura')
+  overflow: auto;
-      }
+`
-    })
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-  // if the metamask user logs out, set the infura provider
+const Body = styled.div`
-  useEffect(() => {
+  width: 35rem;
-    if (error && error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) {
+  margin: 1.25rem;
-      setConnector('Infura')
+`
-    }
-  }, [error, connectorName, setConnector])
-  // active state
+export default function App() {
-  if (active || error) {
+  return (
-    return (
+    <>
-      <div id="app-container">
+      <Suspense fallback={null}>
-        <Header />
+        <HeaderWrapper>
-        {/* this is an intermediate state before infura is set */}
+          <Header />
-        {(!error || error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) && (
+        </HeaderWrapper>
-          <div className="app__wrapper">
+        <BodyWrapper>
-            <div className="body">
+          <Body>
-              <div className="body__content">
+            <Web3ReactManager>
-                <BrowserRouter>
+              <BrowserRouter>
-                  <NavigationTabs />
+                <NavigationTabs />
+                {/* this Suspense is for route code-splitting */}
+                <Suspense fallback={null}>
                  <Switch>
                    <Route exact strict path="/swap" component={Swap} />
                    <Route exact strict path="/send" component={Send} />
@@ -59,15 +58,12 @@ export default function App() {
                    />
                    <Redirect to="/swap" />
                  </Switch>
-                </BrowserRouter>
+                </Suspense>
-              </div>
+              </BrowserRouter>
-            </div>
+            </Web3ReactManager>
-          </div>
+          </Body>
-        )}
+        </BodyWrapper>
-      </div>
+      </Suspense>
-    )
+    </>
-  }
+  )
-  // loading state
-  return null
 }
--- a/src/pages/App.scss
+++ b/src/pages/App.scss
-@import '../variables.scss';
-.app {
-  &__wrapper {
-    height: 100%;
-    position: relative;
-    margin: auto;
-    max-width: 560px;
-    width: 100%;
-    overflow-y: auto;
-    & > div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      bottom: 0;
-    }
-  }
-}
-#app-container {
-  width: 100vw;
-  height: 100vh;
-  @extend %col-nowrap;
-}
-.body {
-  @extend %col-nowrap;
-  height: 100%;
-  background-color: $white;
-  &__content {
-    padding: 1rem 0.75rem;
-    flex: 1 1 auto;
-    height: 0;
-    overflow-y: auto;
-  }
-}
--- a/src/pages/App.test.js
+++ b/src/pages/App.test.js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Web3Provider, { Connectors } from 'web3-react'
-import App from './App'
-// TODO, fix this hacky workaround
-const { NetworkOnlyConnector } = Connectors
-const Injected = new NetworkOnlyConnector({
-  providerURL: process.env.REACT_APP_NETWORK_URL
-})
-export const connectors = { Injected }
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(
-    <Web3Provider connectors={connectors} libraryName="ethers.js">
-      <App />
-    </Web3Provider>,
-    div
-  )
-  ReactDOM.unmountComponentAtNode(div)
-})
--- a/src/pages/Pool/AddLiquidity.js
+++ b/src/pages/Pool/AddLiquidity.js
 import React, { useReducer, useState, useCallback, useEffect, useMemo } from 'react'
-import classnames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context } from 'web3-react'
 import { ethers } from 'ethers'
 import ReactGA from 'react-ga'
+import styled from 'styled-components'
+import { Button } from '../../theme'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import OversizedPanel from '../../components/OversizedPanel'
 import ContextualInfo from '../../components/ContextualInfo'
@@ -17,8 +18,6 @@ import { useTokenDetails } from '../../contexts/Tokens'
 import { useAddressBalance, useExchangeReserves } from '../../contexts/Balances'
 import { useAddressAllowance } from '../../contexts/Allowances'
-import './pool.scss'
 const INPUT = 0
 const OUTPUT = 1
@@ -31,6 +30,72 @@ const DEADLINE_FROM_NOW = 60 * 15
 // denominated in bips
 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
+const BlueSpan = styled.span`
+  color: ${({ theme }) => theme.royalBlue};
+`
+const NewExchangeWarning = styled.div`
+  margin-top: 1rem;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  border: 1px solid rgba($pizazz-orange, 0.4);
+  background-color: rgba($pizazz-orange, 0.1);
+  border-radius: 1rem;
+`
+const NewExchangeWarningText = styled.div`
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-align: center;
+  :first-child {
+    padding-bottom: 0.3rem;
+    font-weight: 500;
+  }
+`
+const DownArrowBackground = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  justify-content: center;
+  align-items: center;
+`
+const DownArrow = styled.img`
+  width: 0.625rem;
+  height: 0.625rem;
+  position: relative;
+  padding: 0.875rem;
+`
+const SummaryPanel = styled.div`
+  ${({ theme }) => theme.flexColumnNoWrap}
+  padding: 1rem 0;
+`
+const ExchangeRateWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  color: ${({ theme }) => theme.doveGray};
+  font-size: 0.75rem;
+  padding: 0.25rem 1rem 0;
+`
+const ExchangeRate = styled.span`
+  flex: 1 1 auto;
+  width: 0;
+  color: ${({ theme }) => theme.chaliceGray};
+`
+const Flex = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+  button {
+    max-width: 20rem;
+  }
+`
 function calculateSlippageBounds(value) {
  if (value) {
    const offset = value.mul(ALLOWED_SLIPPAGE).div(ethers.utils.bigNumberify(10000))
@@ -209,15 +274,15 @@ export default function AddLiquidity() {
      action: 'Open'
    })
-    const b = text => <span className="swap__highlight-text">{text}</span>
+    const b = text => <BlueSpan>{text}</BlueSpan>
    if (isNewExchange) {
      return (
        <div>
-          <div className="pool__summary-item">
+          <div>
            {t('youAreAdding')} {b(`${inputValue} ETH`)} {t('and')} {b(`${outputValue} ${symbol}`)} {t('intoPool')}
          </div>
-          <div className="pool__summary-item">
+          <div>
            {t('youAreSettingExRate')}{' '}
            {b(
              `1 ETH = ${amountFormatter(
@@ -229,26 +294,26 @@ export default function AddLiquidity() {
            )}
            .
          </div>
-          <div className="pool__summary-item">
+          <div>
            {t('youWillMint')} {b(`${inputValue}`)} {t('liquidityTokens')}
          </div>
-          <div className="pool__summary-item">{t('totalSupplyIs0')}</div>
+          <div>{t('totalSupplyIs0')}</div>
        </div>
      )
    } else {
      return (
        <>
-          <div className="pool__summary-modal__item">
+          <div>
            {t('youAreAdding')} {b(`${amountFormatter(inputValueParsed, 18, 4)} ETH`)} {t('and')} {'at most'}{' '}
            {b(`${amountFormatter(outputValueMax, decimals, 4)} ${symbol}`)} {t('intoPool')}
          </div>
-          <div className="pool__summary-modal__item">
+          <div>
            {t('youWillMint')} {b(amountFormatter(liquidityMinted, 18, 4))} {t('liquidityTokens')}
          </div>
-          <div className="pool__summary-modal__item">
+          <div>
            {t('totalSupplyIs')} {b(amountFormatter(totalPoolTokens, 18, 4))}
          </div>
-          <div className="pool__summary-modal__item">
+          <div>
            {t('tokenWorth')} {b(amountFormatter(ethPerLiquidityToken, 18, 4))} ETH {t('and')}{' '}
            {b(amountFormatter(tokenPerLiquidityToken, decimals, Math.min(decimals, 4)))} {symbol}
          </div>
@@ -450,15 +515,15 @@ export default function AddLiquidity() {
  return (
    <>
      {isNewExchange ? (
-        <div className="pool__new-exchange-warning">
+        <NewExchangeWarning>
-          <div className="pool__new-exchange-warning-text">
+          <NewExchangeWarningText>
            <span role="img" aria-label="first-liquidity">
              🚰
            </span>{' '}
            {t('firstLiquidity')}
-          </div>
+          </NewExchangeWarningText>
-          <div className="pool__new-exchange-warning-text">{t('initialExchangeRate', { symbol })}</div>
+          <NewExchangeWarningText>{t('initialExchangeRate', { symbol })}</NewExchangeWarningText>
-        </div>
+        </NewExchangeWarning>
      ) : null}
      <CurrencyInputPanel
@@ -473,9 +538,9 @@ export default function AddLiquidity() {
        disableTokenSelect
      />
      <OversizedPanel>
-        <div className="swap__down-arrow-background">
+        <DownArrowBackground>
-          <img className="swap__down-arrow" src={isActive ? PlusBlue : PlusGrey} alt="plus" />
+          <DownArrow src={isActive ? PlusBlue : PlusGrey} alt="plus" />
-        </div>
+        </DownArrowBackground>
      </OversizedPanel>
      <CurrencyInputPanel
        title={t('deposit')}
@@ -493,13 +558,13 @@ export default function AddLiquidity() {
        errorMessage={outputError}
      />
      <OversizedPanel hideBottom>
-        <div className="pool__summary-panel">
+        <SummaryPanel>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="pool__exchange-rate">{t('exchangeRate')}</span>
+            <ExchangeRate>{t('exchangeRate')}</ExchangeRate>
            <span>{marketRate ? `1 ETH = ${amountFormatter(marketRate, 18, 4)} ${symbol}` : ' - '}</span>
-          </div>
+          </ExchangeRateWrapper>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="swap__exchange-rate">{t('currentPoolSize')}</span>
+            <ExchangeRate>{t('currentPoolSize')}</ExchangeRate>
            <span>
              {exchangeETHBalance && exchangeTokenBalance
                ? `${amountFormatter(exchangeETHBalance, 18, 4)} ETH + ${amountFormatter(
@@ -509,11 +574,11 @@ export default function AddLiquidity() {
                  )} ${symbol}`
                : ' - '}
            </span>
-          </div>
+          </ExchangeRateWrapper>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="swap__exchange-rate">
+            <ExchangeRate>
              {t('yourPoolShare')} ({exchangeETHBalance && amountFormatter(poolTokenPercentage, 16, 2)}%)
-            </span>
+            </ExchangeRate>
            <span>
              {ethShare && tokenShare
                ? `${amountFormatter(ethShare, 18, 4)} ETH + ${amountFormatter(
@@ -523,21 +588,15 @@ export default function AddLiquidity() {
                  )} ${symbol}`
                : ' - '}
            </span>
-          </div>
+          </ExchangeRateWrapper>
-        </div>
+        </SummaryPanel>
      </OversizedPanel>
      {renderSummary()}
-      <div className="pool__cta-container">
+      <Flex>
-        <button
+        <Button disabled={!isValid} onClick={onAddLiquidity}>
-          className={classnames('pool__cta-btn', {
-            'pool__cta-btn--inactive': !isActive
-          })}
-          disabled={!isValid}
-          onClick={onAddLiquidity}
-        >
          {t('addLiquidity')}
-        </button>
+        </Button>
-      </div>
+      </Flex>
    </>
  )
 }
--- a/src/pages/Pool/CreateExchange.js
+++ b/src/pages/Pool/CreateExchange.js
@@ -2,16 +2,58 @@ import React, { useState, useEffect } from 'react'
 import { withRouter } from 'react-router'
 import { useWeb3Context } from 'web3-react'
 import { ethers } from 'ethers'
-import classnames from 'classnames'
+import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import ReactGA from 'react-ga'
+import { Button } from '../../theme'
 import AddressInputPanel from '../../components/AddressInputPanel'
 import OversizedPanel from '../../components/OversizedPanel'
 import { useFactoryContract } from '../../hooks'
 import { useTokenDetails } from '../../contexts/Tokens'
 import { useTransactionAdder } from '../../contexts/Transactions'
+const SummaryPanel = styled.div`
+  ${({ theme }) => theme.flexColumnNoWrap};
+  padding: 1rem 0;
+`
+const ExchangeRateWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  color: ${({ theme }) => theme.doveGray};
+  font-size: 0.75rem;
+  padding: 0.25rem 1rem 0;
+`
+const ExchangeRate = styled.span`
+  flex: 1 1 auto;
+  width: 0;
+  color: ${({ theme }) => theme.chaliceGray};
+`
+const CreateExchangeWrapper = styled.div`
+  color: ${({ theme }) => theme.doveGray};
+  text-align: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+`
+const SummaryText = styled.div`
+  font-size: 0.75rem;
+  color: ${({ error, theme }) => error && theme.salmonRed};
+`
+const Flex = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+  button {
+    max-width: 20rem;
+  }
+`
 function CreateExchange({ history, location }) {
  const { t } = useTranslation()
  const { account } = useWeb3Context()
@@ -81,35 +123,29 @@ function CreateExchange({ history, location }) {
        onError={setTokenAddressError}
      />
      <OversizedPanel hideBottom>
-        <div className="pool__summary-panel">
+        <SummaryPanel>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="pool__exchange-rate">{t('name')}</span>
+            <ExchangeRate>{t('name')}</ExchangeRate>
            <span>{name ? name : ' - '}</span>
-          </div>
+          </ExchangeRateWrapper>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="pool__exchange-rate">{t('symbol')}</span>
+            <ExchangeRate>{t('symbol')}</ExchangeRate>
            <span>{symbol ? symbol : ' - '}</span>
-          </div>
+          </ExchangeRateWrapper>
-          <div className="pool__exchange-rate-wrapper">
+          <ExchangeRateWrapper>
-            <span className="swap__exchange-rate">{t('decimals')}</span>
+            <ExchangeRate>{t('decimals')}</ExchangeRate>
            <span>{decimals || decimals === 0 ? decimals : ' - '}</span>
-          </div>
+          </ExchangeRateWrapper>
-        </div>
+        </SummaryPanel>
      </OversizedPanel>
-      <div className="create-exchange__summary-panel">
+      <CreateExchangeWrapper>
-        <div
+        <SummaryText>{errorMessage ? errorMessage : t('enterTokenCont')}</SummaryText>
-          className={classnames('create-exchange__summary-text', {
+      </CreateExchangeWrapper>
-            'create-exchange--error': !!errorMessage
+      <Flex>
-          })}
+        <Button disabled={!isValid} onClick={createExchange}>
-        >
-          {errorMessage ? errorMessage : t('enterTokenCont')}
-        </div>
-      </div>
-      <div className="pool__cta-container">
-        <button className="pool__cta-btn" disabled={!isValid} onClick={createExchange}>
          {t('createExchange')}
-        </button>
+        </Button>
-      </div>
+      </Flex>
    </>
  )
 }

--- a/src/pages/Pool/ModeSelector.js
+++ b/src/pages/Pool/ModeSelector.js
 import React, { useState, useCallback } from 'react'
 import { withRouter, NavLink } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { CSSTransitionGroup } from 'react-transition-group'
+import styled from 'styled-components'
 import OversizedPanel from '../../components/OversizedPanel'
 import Dropdown from '../../assets/images/dropdown-blue.svg'
 import Modal from '../../components/Modal'
 import { useBodyKeyDown } from '../../hooks'
-import './pool.scss'
 const poolTabOrder = [
  {
    path: '/add-liquidity',
@@ -28,10 +26,61 @@ const poolTabOrder = [
  }
 ]
+const LiquidityContainer = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  font-size: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.75rem;
+  color: ${({ theme }) => theme.royalBlue};
+  font-weight: 500;
+  cursor: pointer;
+  img {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+`
+const LiquidityLabel = styled.span`
+  flex: 1 0 auto;
+`
+const activeClassName = 'MODE'
+const StyledNavLink = styled(NavLink).attrs({
+  activeClassName
+})`
+  ${({ theme }) => theme.flexRowNoWrap}
+  padding: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.doveGray};
+  font-size: 1rem;
+  &.${activeClassName} {
+    background-color: ${({ theme }) => theme.white};
+    border-radius: 3rem;
+    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.mercuryGray};
+    font-weight: 500;
+    color: ${({ theme }) => theme.royalBlue};
+  }
+`
+const PoolModal = styled.div`
+  background-color: ${({ theme }) => theme.white};
+  width: 100%;
+  height: 100%;
+  padding: 2rem 0 2rem 0;
+`
 function ModeSelector({ location: { pathname }, history }) {
  const { t } = useTranslation()
-  const [isShowingModal, setIsShowingModal] = useState(false)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
  const activeTabKey = poolTabOrder[poolTabOrder.findIndex(({ regex }) => pathname.match(regex))].textKey
@@ -49,53 +98,41 @@ function ModeSelector({ location: { pathname }, history }) {
    navigate(-1)
  }, [navigate])
-  useBodyKeyDown('ArrowDown', navigateRight, isShowingModal)
+  useBodyKeyDown('ArrowDown', navigateRight, modalIsOpen)
-  useBodyKeyDown('ArrowUp', navigateLeft, isShowingModal)
+  useBodyKeyDown('ArrowUp', navigateLeft, modalIsOpen)
  return (
    <OversizedPanel hideTop>
-      <div
+      <LiquidityContainer
-        className="pool__liquidity-container"
        onClick={() => {
-          setIsShowingModal(true)
+          setModalIsOpen(true)
        }}
      >
-        <span className="pool__liquidity-label">{t(activeTabKey)}</span>
+        <LiquidityLabel>{t(activeTabKey)}</LiquidityLabel>
        <img src={Dropdown} alt="dropdown" />
-      </div>
+      </LiquidityContainer>
-      {isShowingModal && (
+      <Modal
-        <Modal
+        isOpen={modalIsOpen}
-          onClose={() => {
+        onDismiss={() => {
-            setIsShowingModal(false)
+          setModalIsOpen(false)
-          }}
+        }}
-        >
+        minHeight={null}
-          <CSSTransitionGroup
+      >
-            transitionName="pool-modal"
+        <PoolModal>
-            transitionAppear={true}
+          {poolTabOrder.map(({ path, textKey, regex }) => (
-            transitionLeave={true}
+            <StyledNavLink
-            transitionAppearTimeout={200}
+              key={path}
-            transitionLeaveTimeout={200}
+              to={path}
-            transitionEnterTimeout={200}
+              isActive={(_, { pathname }) => pathname.match(regex)}
-          >
+              onClick={() => {
-            <div className="pool-modal">
+                setModalIsOpen(false)
-              {poolTabOrder.map(({ path, textKey, regex }) => (
+              }}
-                <NavLink
+            >
-                  key={path}
+              {t(textKey)}
-                  to={path}
+            </StyledNavLink>
-                  className="pool-modal__item"
+          ))}
-                  activeClassName="pool-modal__item--selected"
+        </PoolModal>
-                  isActive={(_, { pathname }) => pathname.match(regex)}
+      </Modal>
-                  onClick={() => {
-                    setIsShowingModal(false)
-                  }}
-                >
-                  {t(textKey)}
-                </NavLink>
-              ))}
-            </div>
-          </CSSTransitionGroup>
-        </Modal>
-      )}
    </OversizedPanel>
  )
 }

--- a/src/pages/Pool/RemoveLiquidity.js
+++ b/src/pages/Pool/RemoveLiquidity.js
--- a/src/pages/Pool/index.js
+++ b/src/pages/Pool/index.js
--- a/src/pages/Pool/pool.scss
+++ b/src/pages/Pool/pool.scss
--- a/src/pages/Send/index.js
+++ b/src/pages/Send/index.js
--- a/src/pages/Send/send.scss
+++ b/src/pages/Send/send.scss
-@import '../../variables.scss';
-.send {
-  @extend %col-nowrap;
-  height: 100%;
-  background-color: $white;
-  &__last-summary-text {
-    margin-top: 1rem;
-  }
-}
--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
--- a/src/pages/Swap/swap.scss
+++ b/src/pages/Swap/swap.scss
--- a/src/theme/components.js
+++ b/src/theme/components.js
--- a/src/theme/index.js
+++ b/src/theme/index.js
--- a/src/utils/index.js
+++ b/src/utils/index.js
--- a/src/utils/signer.js
+++ b/src/utils/signer.js
--- a/src/variables.scss
+++ b/src/variables.scss
--- a/yarn.lock
+++ b/yarn.lock