catch error in bytes32 string parsing (#1253)

* feat: allow overriding proposals in the UI

* Fix code style issues with ESLint

Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,14 +1,13 @@
 ---
 name: Bug Report
-about: Create a report to help us improve
+about: Describe an issue in the Uniswap Interface
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 **Bug Description**
-A clear and concise description of what the bug is.
+A clear and concise description of the bug.
 
 **Steps to Reproduce**
 1. Go to ...

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Support
+    url: https://discord.gg/EwFs3Pp
+    about: Please ask and answer questions here
+  - name: List a token
+    url: https://github.com/Uniswap/default-token-list#adding-a-token
+    about: Any requests to add a token to Uniswap should go here

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature Request
-about: Suggest an idea for this project
+about: Suggest an idea for improving the UX of the Uniswap Interface
 title: ''
-labels: ''
+labels: 'improvement'
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/ISSUE_TEMPLATE/something-else.md

@@ -1,10 +0,0 @@
----
-name: Something Else
-about: Tell us something else
-title: ''
-labels: ''
-assignees: ''
-
----
-
-

.github/pull_request_template.md

@@ -1,3 +0,0 @@
-**PLEASE DO NOT SUBMIT TOKEN ADDITIONS AS PULL REQUESTS**
-
-All token requests should be made via an issue.

.github/workflows/lint.yml

@@ -0,0 +1,48 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - master
+  pull_request_target:
+    branches:
+      - master
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          always-auth: true
+          registry-url: https://registry.npmjs.org
+
+      - name: Set output of cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Node dependency cache
+        uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            yarn-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linters
+        uses: wearerequired/lint-action@77d70b9a07ecb93bc98dc46dc27d96c4f004d035
+        with:
+          github_token: ${{ secrets.github_token }}
+          eslint: true
+          eslint_extensions: js,jsx,ts,tsx,json
+          auto_fix: true

.github/workflows/release.yaml

@@ -1,8 +1,7 @@
 name: Release
 on:
-  # every morning
   schedule:
-    - cron:  '0 12 * * 1-4'
+    - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
 
   # manual trigger
   workflow_dispatch:
@@ -37,6 +36,8 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '12'
+          always-auth: true
+          registry-url: https://registry.npmjs.org
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
@@ -100,4 +101,4 @@ jobs:
             - https://ipfs.infura.io/ipfs/${{ steps.upload.outputs.hash }}/
             - https://ipfs.io/ipfs/${{ steps.upload.outputs.hash }}/
 
-            ${{ needs.bump_version.outputs.changelog }}
+            ${{ needs.bump_version.outputs.changelog }}

.github/workflows/tests.yaml

@@ -6,6 +6,7 @@ on:
   pull_request:
     branches:
       - master
+
 jobs:
   integration-tests:
     name: Integration tests
@@ -16,6 +17,9 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '12'
+          always-auth: true
+          registry-url: https://registry.npmjs.org
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -29,6 +33,9 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: yarn cypress install
       - run: yarn build
+        env:
+          CI: false
+          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
       - run: yarn integration-test
 
   unit-tests:
@@ -40,6 +47,9 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '12'
+          always-auth: true
+          registry-url: https://registry.npmjs.org
+
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -53,25 +63,3 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: yarn test
 
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '12'
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint
-

README.md

@@ -1,5 +1,6 @@
 # Uniswap Interface
 
+[![Lint](https://github.com/Uniswap/uniswap-interface/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions?query=workflow%3ALint)
 [![Tests](https://github.com/Uniswap/uniswap-interface/workflows/Tests/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions?query=workflow%3ATests)
 [![Styled With Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
 

cypress.json

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

cypress/integration/lists.test.ts

@@ -0,0 +1,20 @@
+describe('Lists', () => {
+  beforeEach(() => {
+    cy.visit('/swap')
+  })
+
+  it('defaults to uniswap list', () => {
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#currency-search-selected-list-name').should('contain', 'Uniswap')
+  })
+
+  it('change list', () => {
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('#currency-search-change-list-button').click()
+    cy.get('#list-row-tokens-1inch-eth .select-button').click()
+    cy.get('#currency-search-selected-list-name').should('contain', '1inch')
+    cy.get('#currency-search-change-list-button').click()
+    cy.get('#list-row-tokens-uniswap-eth .select-button').click()
+    cy.get('#currency-search-selected-list-name').should('contain', 'Uniswap')
+  })
+})

cypress/integration/migrate-v1.test.ts

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

cypress/integration/swap.test.ts

@@ -1,5 +1,7 @@
 describe('Swap', () => {
-  beforeEach(() => cy.visit('/swap'))
+  beforeEach(() => {
+    cy.visit('/swap')
+  })
   it('can enter an amount into input', () => {
     cy.get('#swap-currency-input .token-amount-input')
       .type('0.001', { delay: 200 })
@@ -41,14 +43,33 @@ describe('Swap', () => {
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
 
-  it('add a recipient', () => {
-    cy.get('#add-recipient-button').click()
-    cy.get('#recipient').should('exist')
+  it('add a recipient does not exist unless in expert mode', () => {
+    cy.get('#add-recipient-button').should('not.exist')
   })
 
-  it('remove recipient', () => {
-    cy.get('#add-recipient-button').click()
-    cy.get('#remove-recipient-button').click()
-    cy.get('#recipient').should('not.exist')
+  describe('expert mode', () => {
+    beforeEach(() => {
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns('confirm')
+      })
+      cy.get('#open-settings-dialog-button').click()
+      cy.get('#toggle-expert-mode-button').click()
+      cy.get('#confirm-expert-mode').click()
+    })
+
+    it('add a recipient is visible', () => {
+      cy.get('#add-recipient-button').should('be.visible')
+    })
+
+    it('add a recipient', () => {
+      cy.get('#add-recipient-button').click()
+      cy.get('#recipient').should('exist')
+    })
+
+    it('remove recipient', () => {
+      cy.get('#add-recipient-button').click()
+      cy.get('#remove-recipient-button').click()
+      cy.get('#recipient').should('not.exist')
+    })
   })
 })

cypress/integration/token-warning.ts

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

cypress/support/commands.js

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

cypress/tsconfig.json

@@ -3,15 +3,8 @@
     "strict": true,
     "baseUrl": "../node_modules",
     "target": "es5",
-    "lib": [
-      "es5",
-      "dom"
-    ],
-    "types": [
-      "cypress"
-    ]
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
   },
-  "include": [
-    "**/*.ts"
-  ]
-}
+  "include": ["**/*.ts"]
+}

package.json

@@ -4,37 +4,34 @@
   "homepage": ".",
   "private": true,
   "devDependencies": {
-    "@ethersproject/address": "5.0.0-beta.134",
-    "@ethersproject/bignumber": "5.0.0-beta.138",
-    "@ethersproject/constants": "5.0.0-beta.133",
-    "@ethersproject/contracts": "5.0.0-beta.151",
-    "@ethersproject/experimental": "5.0.0-beta.141",
-    "@ethersproject/networks": "5.0.0-beta.136",
-    "@ethersproject/providers": "5.0.0-beta.162",
-    "@ethersproject/solidity": "5.0.2",
-    "@ethersproject/strings": "5.0.0-beta.136",
-    "@ethersproject/units": "5.0.0-beta.132",
-    "@ethersproject/wallet": "5.0.0-beta.141",
+    "@ethersproject/experimental": "^5.0.1",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@reduxjs/toolkit": "^1.3.5",
     "@types/jest": "^25.2.1",
     "@types/lodash.flatmap": "^4.5.6",
+    "@types/luxon": "^1.24.4",
+    "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.5",
     "@types/qs": "^6.9.2",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.0.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^5.1.0",
     "@types/testing-library__cypress": "^5.0.5",
+    "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
-    "@uniswap/sdk": "3.0.3-beta.1",
-    "@uniswap/token-lists": "^1.0.0-beta.9",
+    "@uniswap/governance": "^1.0.2",
+    "@uniswap/liquidity-staker": "^1.0.2",
+    "@uniswap/merkle-distributor": "1.0.1",
+    "@uniswap/sdk": "3.0.3",
+    "@uniswap/token-lists": "^1.0.0-beta.19",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@web3-react/core": "^6.0.9",
@@ -44,55 +41,69 @@
     "@web3-react/walletconnect-connector": "^6.1.1",
     "@web3-react/walletlink-connector": "^6.0.9",
     "ajv": "^6.12.3",
+    "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
-    "cypress": "^4.5.0",
+    "cypress": "^4.11.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "ethers": "^5.0.7",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
     "inter-ui": "^3.13.1",
     "jazzicon": "^1.5.0",
     "lodash.flatmap": "^4.5.0",
+    "luxon": "^1.25.0",
+    "multicodec": "^2.0.0",
+    "multihashes": "^3.0.1",
+    "node-vibrant": "^3.1.5",
     "polished": "^3.3.2",
     "prettier": "^1.17.0",
-    "qrcode.react": "^0.9.3",
     "qs": "^6.9.4",
     "react": "^16.13.1",
+    "react-confetti": "^6.0.0",
     "react-device-detect": "^1.6.2",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
     "react-i18next": "^10.7.0",
+    "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.4.1",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
-    "redux-localstorage-simple": "^2.2.0",
+    "redux-localstorage-simple": "^2.3.1",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.11.0",
     "styled-components": "^4.2.0",
     "typescript": "^3.8.3",
-    "use-media": "^1.4.0"
+    "use-count-up": "^2.2.5",
+    "wcag-contrast": "^3.0.0"
+  },
+  "resolutions": {
+    "@walletconnect/web3-provider": "1.1.1-alpha.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "ignorePatterns": [
+      "node_modules"
+    ]
   },
   "browserslist": {
     "production": [

public/index.html

@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "a141524a42594f028627f6004b23ff75"}'></script>
   </body>
 </html>

public/locales/es-AR.json

@@ -1,75 +1,75 @@
 {
-	"noWallet": "No se encontró billetera de Ethereum",
-	"wrongNetwork": "Te encontrás en la red equivocada",
-	"switchNetwork": "Por favor cambia a {{ correctNetwork }}",
-	"installWeb3MobileBrowser": "Por favor ingresá desde un navegador móvil con web3 habilitado como Trust Wallet o Coinbase Wallet.",
-	"installMetamask": "Por favor visítanos nuevamente luego de instalar Metamask en Chrome o Brave.",
-	"disconnected": "Desconectado",
-	"swap": "Intercambiar",
-	"send": "Enviar",
-	"pool": "Pool",
-	"betaWarning": "Este proyecto se encuentra en beta. Usalo bajo tu propio riesgo.",
-	"input": "Entrada",
-	"output": "Salida",
-	"estimated": "estimado",
-	"balance": "Saldo: {{ balanceInput }}",
-	"unlock": "Desbloquear",
-	"pending": "Pendiente",
-	"selectToken": "Seleccioná un token",
-	"searchOrPaste": "Buscar Token o Pegar Dirección",
-	"noExchange": "No se encontró la divisa",
-	"exchangeRate": "Tasa de Cambio",
-	"enterValueCont": "Ingresá un valor en {{ missingCurrencyValue }} para continuar.",
-	"selectTokenCont": "Seleccioná un token para continuar.",
-	"noLiquidity": "Sin liquidez.",
-	"unlockTokenCont": "Por favor desbloqueá un token para continuar.",
-	"transactionDetails": "Detalles de la transacción",
-	"hideDetails": "Ocultar detalles",
-	"youAreSelling": "Estás vendiendo",
-	"orTransFail": "o la transacción fallará.",
-	"youWillReceive": "Vas a recibir al menos",
-	"youAreBuying": "Estás comprando",
-	"itWillCost": "Costará a lo sumo",
-	"insufficientBalance": "Saldo insuficiente",
-	"inputNotValid": "No es un valor de entrada válido",
-	"differentToken": "Debe ser un token distinto.",
-	"noRecipient": "Ingresá una dirección de billetera para enviar.",
-	"invalidRecipient": "Por favor ingrese una billetera de destino válida.",
-	"recipientAddress": "Dirección del recipiente",
-	"youAreSending": "Estás enviando",
-	"willReceive": "recibirá al menos",
-	"to": "a",
-	"addLiquidity": "Agregar liquidez",
-	"deposit": "Depositar",
-	"currentPoolSize": "Tamaño del Pool Actual",
-	"yourPoolShare": "Tu parte del Pool",
-	"noZero": "El monto no puede ser cero.",
-	"mustBeETH": "Una de las entradas debe ser ETH.",
-	"enterCurrencyOrLabelCont": "Ingresá un valor de {{ inputCurrency }} o de {{ label }} para continuar.",
-	"youAreAdding": "Estás agregando entre",
-	"and": "y",
-	"intoPool": "en el pool de liquidez.",
-	"outPool": "en el pool de liquidez.",
-	"youWillMint": "Vas a acuñar",
-	"liquidityTokens": "tokens de liquidez.",
-	"totalSupplyIs": "El actual suministro total de tokens de liquidez es",
-	"youAreSettingExRate": "Está configurando el tipo de cambio inicial a",
-	"totalSupplyIs0": "El actual suministro total de tokens de liquidez es 0.",
-	"tokenWorth": "Al tipo de cambio actual, cada token del pool vale",
-	"firstLiquidity": "Sos la primer persona en agregar liquidez!",
-	"initialExchangeRate": "El tipo de cambio inicial se establecerá en función de tus depósitos. Por favor, asegúrate de que tus depósitos en ETH y {{ label }} tengan el mismo valor fíat.",
-	"removeLiquidity": "Remover Liquidez",
-	"poolTokens": "Pool de Tokens",
-	"enterLabelCont": "Ingresá un valor de {{ label }} para continuar.",
-	"youAreRemoving": "Estás quitando entre",
-	"youWillRemove": "Vas a remover",
-	"createExchange": "Crear divisa",
-	"invalidTokenAddress": "No es una dirección de token válida",
-	"exchangeExists": "La divisa {{ label }} ya existe!",
-	"invalidSymbol": "Símbolo inválido",
-	"invalidDecimals": "Decimales inválidos",
-	"tokenAddress": "Dirección de Token",
-	"label": "Etiqueta",
-	"decimals": "Decimales",
-	"enterTokenCont": "Ingresá una dirección de token para continuar"
+  "noWallet": "No se encontró billetera de Ethereum",
+  "wrongNetwork": "Te encontrás en la red equivocada",
+  "switchNetwork": "Por favor cambia a {{ correctNetwork }}",
+  "installWeb3MobileBrowser": "Por favor ingresá desde un navegador móvil con web3 habilitado como Trust Wallet o Coinbase Wallet.",
+  "installMetamask": "Por favor visítanos nuevamente luego de instalar Metamask en Chrome o Brave.",
+  "disconnected": "Desconectado",
+  "swap": "Intercambiar",
+  "send": "Enviar",
+  "pool": "Pool",
+  "betaWarning": "Este proyecto se encuentra en beta. Usalo bajo tu propio riesgo.",
+  "input": "Entrada",
+  "output": "Salida",
+  "estimated": "estimado",
+  "balance": "Saldo: {{ balanceInput }}",
+  "unlock": "Desbloquear",
+  "pending": "Pendiente",
+  "selectToken": "Seleccioná un token",
+  "searchOrPaste": "Buscar Token o Pegar Dirección",
+  "noExchange": "No se encontró la divisa",
+  "exchangeRate": "Tasa de Cambio",
+  "enterValueCont": "Ingresá un valor en {{ missingCurrencyValue }} para continuar.",
+  "selectTokenCont": "Seleccioná un token para continuar.",
+  "noLiquidity": "Sin liquidez.",
+  "unlockTokenCont": "Por favor desbloqueá un token para continuar.",
+  "transactionDetails": "Detalles de la transacción",
+  "hideDetails": "Ocultar detalles",
+  "youAreSelling": "Estás vendiendo",
+  "orTransFail": "o la transacción fallará.",
+  "youWillReceive": "Vas a recibir al menos",
+  "youAreBuying": "Estás comprando",
+  "itWillCost": "Costará a lo sumo",
+  "insufficientBalance": "Saldo insuficiente",
+  "inputNotValid": "No es un valor de entrada válido",
+  "differentToken": "Debe ser un token distinto.",
+  "noRecipient": "Ingresá una dirección de billetera para enviar.",
+  "invalidRecipient": "Por favor ingrese una billetera de destino válida.",
+  "recipientAddress": "Dirección del recipiente",
+  "youAreSending": "Estás enviando",
+  "willReceive": "recibirá al menos",
+  "to": "a",
+  "addLiquidity": "Agregar liquidez",
+  "deposit": "Depositar",
+  "currentPoolSize": "Tamaño del Pool Actual",
+  "yourPoolShare": "Tu parte del Pool",
+  "noZero": "El monto no puede ser cero.",
+  "mustBeETH": "Una de las entradas debe ser ETH.",
+  "enterCurrencyOrLabelCont": "Ingresá un valor de {{ inputCurrency }} o de {{ label }} para continuar.",
+  "youAreAdding": "Estás agregando entre",
+  "and": "y",
+  "intoPool": "en el pool de liquidez.",
+  "outPool": "en el pool de liquidez.",
+  "youWillMint": "Vas a acuñar",
+  "liquidityTokens": "tokens de liquidez.",
+  "totalSupplyIs": "El actual suministro total de tokens de liquidez es",
+  "youAreSettingExRate": "Está configurando el tipo de cambio inicial a",
+  "totalSupplyIs0": "El actual suministro total de tokens de liquidez es 0.",
+  "tokenWorth": "Al tipo de cambio actual, cada token del pool vale",
+  "firstLiquidity": "Sos la primer persona en agregar liquidez!",
+  "initialExchangeRate": "El tipo de cambio inicial se establecerá en función de tus depósitos. Por favor, asegúrate de que tus depósitos en ETH y {{ label }} tengan el mismo valor fíat.",
+  "removeLiquidity": "Remover Liquidez",
+  "poolTokens": "Pool de Tokens",
+  "enterLabelCont": "Ingresá un valor de {{ label }} para continuar.",
+  "youAreRemoving": "Estás quitando entre",
+  "youWillRemove": "Vas a remover",
+  "createExchange": "Crear divisa",
+  "invalidTokenAddress": "No es una dirección de token válida",
+  "exchangeExists": "La divisa {{ label }} ya existe!",
+  "invalidSymbol": "Símbolo inválido",
+  "invalidDecimals": "Decimales inválidos",
+  "tokenAddress": "Dirección de Token",
+  "label": "Etiqueta",
+  "decimals": "Decimales",
+  "enterTokenCont": "Ingresá una dirección de token para continuar"
 }

public/locales/es-US.json

@@ -1,75 +1,75 @@
 {
-	"noWallet": "No se ha encontrado billetera de Ethereum",
-	"wrongNetwork": "Se encuentra en la red equivocada",
-	"switchNetwork": "Por favor cambie a {{ correctNetwork }}",
-	"installWeb3MobileBrowser": "Por favor ingrese desde un navegador móvil con web3 habilitado como Trust Wallet o Coinbase Wallet.",
-	"installMetamask": "Por favor visítenos nuevamente luego de instalar Metamask en Chrome o Brave.",
-	"disconnected": "Desconectado",
-	"swap": "Intercambiar",
-	"send": "Enviar",
-	"pool": "Pool",
-	"betaWarning": "Este proyecto se encuentra en beta. Úselo bajo tu propio riesgo.",
-	"input": "Entrada",
-	"output": "Salida",
-	"estimated": "estimado",
-	"balance": "Saldo: {{ balanceInput }}",
-	"unlock": "Desbloquear",
-	"pending": "Pendiente",
-	"selectToken": "Seleccione un token",
-	"searchOrPaste": "Buscar Token o Pegar Dirección",
-	"noExchange": "No se ha encontrado la divisa",
-	"exchangeRate": "Tasa de Cambio",
-	"enterValueCont": "Ingrese un valor en {{ missingCurrencyValue }} para continuar.",
-	"selectTokenCont": "Seleccione un token para continuar.",
-	"noLiquidity": "Sin liquidez.",
-	"unlockTokenCont": "Por favor desbloquea un token para continuar.",
-	"transactionDetails": "Detalles de la transacción",
-	"hideDetails": "Ocultar detalles",
-	"youAreSelling": "Está vendiendo",
-	"orTransFail": "o la transacción fallará.",
-	"youWillReceive": "Va a recibir al menos",
-	"youAreBuying": "Está comprando",
-	"itWillCost": "Costará a lo sumo",
-	"insufficientBalance": "Saldo insuficiente",
-	"inputNotValid": "No es un valor de entrada válido",
-	"differentToken": "Debe ser un token distinto.",
-	"noRecipient": "Ingrese una dirección de billetera para enviar.",
-	"invalidRecipient": "Por favor ingrese una billetera de destino válida.",
-	"recipientAddress": "Dirección del recipiente",
-	"youAreSending": "Está enviando",
-	"willReceive": "recibirá al menos",
-	"to": "a",
-	"addLiquidity": "Agregar liquidez",
-	"deposit": "Depositar",
-	"currentPoolSize": "Tamaño del Pool Actual",
-	"yourPoolShare": "Su parte del Pool",
-	"noZero": "El monto no puede ser cero.",
-	"mustBeETH": "Una de las entradas debe ser ETH.",
-	"enterCurrencyOrLabelCont": "Ingrese un valor de {{ inputCurrency }} o de {{ label }} para continuar.",
-	"youAreAdding": "Está agregando entre",
-	"and": "y",
-	"intoPool": "en el pool de liquidez.",
-	"outPool": "en el pool de liquidez.",
-	"youWillMint": "Va a acuñar",
-	"liquidityTokens": "tokens de liquidez.",
-	"totalSupplyIs": "El actual suministro total de tokens de liquidez es",
-	"youAreSettingExRate": "Está configurando el tipo de cambio inicial a",
-	"totalSupplyIs0": "El actual suministro total de tokens de liquidez es 0.",
-	"tokenWorth": "Al tipo de cambio actual, cada token del pool vale",
-	"firstLiquidity": "Es la primer persona en agregar liquidez!",
-	"initialExchangeRate": "El tipo de cambio inicial se establecerá en función de sus depósitos. Por favor, asegúrese de que sus depósitos en ETH y {{ label }} tengan el mismo valor fíat.",
-	"removeLiquidity": "Remover Liquidez",
-	"poolTokens": "Pool de Tokens",
-	"enterLabelCont": "Ingresa un valor de {{ label }} para continuar.",
-	"youAreRemoving": "Está quitando entre",
-	"youWillRemove": "Va a remover",
-	"createExchange": "Crear tipo de cambio",
-	"invalidTokenAddress": "No es una dirección de token válida",
-	"exchangeExists": "El tipo de cambio {{ label }} ya existe!",
-	"invalidSymbol": "Símbolo inválido",
-	"invalidDecimals": "Decimales inválidos",
-	"tokenAddress": "Dirección de Token",
-	"label": "Etiqueta",
-	"decimals": "Decimales",
-	"enterTokenCont": "Ingrese una dirección de token para continuar"
+  "noWallet": "No se ha encontrado billetera de Ethereum",
+  "wrongNetwork": "Se encuentra en la red equivocada",
+  "switchNetwork": "Por favor cambie a {{ correctNetwork }}",
+  "installWeb3MobileBrowser": "Por favor ingrese desde un navegador móvil con web3 habilitado como Trust Wallet o Coinbase Wallet.",
+  "installMetamask": "Por favor visítenos nuevamente luego de instalar Metamask en Chrome o Brave.",
+  "disconnected": "Desconectado",
+  "swap": "Intercambiar",
+  "send": "Enviar",
+  "pool": "Pool",
+  "betaWarning": "Este proyecto se encuentra en beta. Úselo bajo tu propio riesgo.",
+  "input": "Entrada",
+  "output": "Salida",
+  "estimated": "estimado",
+  "balance": "Saldo: {{ balanceInput }}",
+  "unlock": "Desbloquear",
+  "pending": "Pendiente",
+  "selectToken": "Seleccione un token",
+  "searchOrPaste": "Buscar Token o Pegar Dirección",
+  "noExchange": "No se ha encontrado la divisa",
+  "exchangeRate": "Tasa de Cambio",
+  "enterValueCont": "Ingrese un valor en {{ missingCurrencyValue }} para continuar.",
+  "selectTokenCont": "Seleccione un token para continuar.",
+  "noLiquidity": "Sin liquidez.",
+  "unlockTokenCont": "Por favor desbloquea un token para continuar.",
+  "transactionDetails": "Detalles de la transacción",
+  "hideDetails": "Ocultar detalles",
+  "youAreSelling": "Está vendiendo",
+  "orTransFail": "o la transacción fallará.",
+  "youWillReceive": "Va a recibir al menos",
+  "youAreBuying": "Está comprando",
+  "itWillCost": "Costará a lo sumo",
+  "insufficientBalance": "Saldo insuficiente",
+  "inputNotValid": "No es un valor de entrada válido",
+  "differentToken": "Debe ser un token distinto.",
+  "noRecipient": "Ingrese una dirección de billetera para enviar.",
+  "invalidRecipient": "Por favor ingrese una billetera de destino válida.",
+  "recipientAddress": "Dirección del recipiente",
+  "youAreSending": "Está enviando",
+  "willReceive": "recibirá al menos",
+  "to": "a",
+  "addLiquidity": "Agregar liquidez",
+  "deposit": "Depositar",
+  "currentPoolSize": "Tamaño del Pool Actual",
+  "yourPoolShare": "Su parte del Pool",
+  "noZero": "El monto no puede ser cero.",
+  "mustBeETH": "Una de las entradas debe ser ETH.",
+  "enterCurrencyOrLabelCont": "Ingrese un valor de {{ inputCurrency }} o de {{ label }} para continuar.",
+  "youAreAdding": "Está agregando entre",
+  "and": "y",
+  "intoPool": "en el pool de liquidez.",
+  "outPool": "en el pool de liquidez.",
+  "youWillMint": "Va a acuñar",
+  "liquidityTokens": "tokens de liquidez.",
+  "totalSupplyIs": "El actual suministro total de tokens de liquidez es",
+  "youAreSettingExRate": "Está configurando el tipo de cambio inicial a",
+  "totalSupplyIs0": "El actual suministro total de tokens de liquidez es 0.",
+  "tokenWorth": "Al tipo de cambio actual, cada token del pool vale",
+  "firstLiquidity": "Es la primer persona en agregar liquidez!",
+  "initialExchangeRate": "El tipo de cambio inicial se establecerá en función de sus depósitos. Por favor, asegúrese de que sus depósitos en ETH y {{ label }} tengan el mismo valor fíat.",
+  "removeLiquidity": "Remover Liquidez",
+  "poolTokens": "Pool de Tokens",
+  "enterLabelCont": "Ingresa un valor de {{ label }} para continuar.",
+  "youAreRemoving": "Está quitando entre",
+  "youWillRemove": "Va a remover",
+  "createExchange": "Crear tipo de cambio",
+  "invalidTokenAddress": "No es una dirección de token válida",
+  "exchangeExists": "El tipo de cambio {{ label }} ya existe!",
+  "invalidSymbol": "Símbolo inválido",
+  "invalidDecimals": "Decimales inválidos",
+  "tokenAddress": "Dirección de Token",
+  "label": "Etiqueta",
+  "decimals": "Decimales",
+  "enterTokenCont": "Ingrese una dirección de token para continuar"
 }

public/locales/ro.json

@@ -5,71 +5,87 @@
   "installWeb3MobileBrowser": "Incearcă să vizitezi această pagina folosind un browser precum Trust Wallet sau Coinbase Wallet.",
   "installMetamask": "Vizitează această pagină din nou după ce instalezi MetaMask în Chrome sau Brave",
   "disconnected": "Deconectat",
-  "swap": "Schimba",
+  "swap": "Schimbă",
+  "swapAnyway": "Schimbă Oricum",
   "send": "Trimite",
-  "pool": "Extrage",
+  "sendAnyway": "Trimite Oricum",
+  "pool": "Depune Lichiditate",
   "betaWarning": "Proiectul este încă în versiunea beta. Folosește-l cu grijă, riscul este al tău.",
   "input": "Input",
   "output": "Output",
   "estimated": "estimat",
   "balance": "Balanță: {{ balanceInput }}",
-  "unlock": "Deschide",
+  "unlock": "Deblochează",
   "pending": "În Așteptare",
-  "selectToken": "Selectează un token",
-  "searchOrPaste": "Caută Token sau Setează Adresă",
-  "noExchange": "Niciun Exchange Găsit",
-  "exchangeRate": "Curs Valutar",
+  "selectToken": "Selectează un jeton",
+  "searchOrPaste": "Caută după Numele, Simbolul sau Adresa Jetonului",
+  "searchOrPasteMobile": "Nume, Simbol sau Adresă",
+  "noExchange": "Nicio Piață de Schimb Găsită",
+  "noToken": "Nicin Jeton Găsit",
+  "exchangeRate": "Curs de Schimb",
+  "unknownError": "Ups! A intervenit o eroare tehnică. Te rog reîncarcă pagina, sau acceseaz-o de pe alt navigator sau dispozitiv.",
   "enterValueCont": "Setează o valoare pentru {{ missingCurrencyValue }} pentru a continua.",
-  "selectTokenCont": "Selectează un token pentru a continua.",
-  "noLiquidity": "Lichiditate Inexistentă.",
-  "unlockTokenCont": "Te rog deblochează tokenul pentru a continua.",
-  "transactionDetails": "Detalii Tranzacții",
+  "selectTokenCont": "Selectează un jeton pentru a continua.",
+  "noLiquidity": "Nu Există Lichiditate.",
+  "insufficientLiquidity": "Lichiditate Insuficientă.",
+  "unlockTokenCont": "Te rog deblochează jetonul pentru a continua.",
+  "transactionDetails": "Detalii Avansate",
   "hideDetails": "Ascunde Detaili",
-  "youAreSelling": "Vinzi",
+  "slippageWarning": "Alertă Deviație de Preț",
+  "highSlippageWarning": "Alertă Deviație de Preț Mare",
+  "youAreSelling": "Tu vinzi",
   "orTransFail": "sau tranzacția va eșua.",
   "youWillReceive": "Vei primi cel puțin",
-  "youAreBuying": "Cumperi",
+  "youAreBuying": "Tu cumperi",
   "itWillCost": "Va costa cel mult",
+  "forAtMost": "pentru maximum",
   "insufficientBalance": "Balanță Insuficientă",
   "inputNotValid": "Valoarea setată nu este validă",
-  "differentToken": "Trebuie să fie un token diferit.",
+  "differentToken": "Trebuie să fie un jeton diferit.",
   "noRecipient": "Setează o adresă de portofel pentru destinatar.",
   "invalidRecipient": "Te rog setează o adresă de portofel validă pentru destinatar.",
   "recipientAddress": "Adresa Destinatarului",
-  "youAreSending": "Trimiți",
+  "youAreSending": "Tu trimiți",
   "willReceive": "vei primi cel puțin",
   "to": "spre",
-  "addLiquidity": "Crește Lichiditatea",
+  "addLiquidity": "Adaugă Lichiditate",
   "deposit": "Depozitează",
-  "currentPoolSize": "Mărimea Actualului Fond Comun",
-  "yourPoolShare": "Partea Ta Din Fond Comun",
+  "currentPoolSize": "Volumul Actual al Fondului",
+  "yourPoolShare": "Partea Ta din Fond",
   "noZero": "Cantitatea nu poate fi zero.",
   "mustBeETH": "Una dintre valori trebuie să fie ETH.",
   "enterCurrencyOrLabelCont": "Setează o valoare pentru {{ inputCurrency }} sau {{ label }} pentru a continua. ",
-  "youAreAdding": "Adaugi între",
+  "youAreAdding": "Tu adaugi",
   "and": "și",
-  "intoPool": "în fondul comun de lichidatate.",
-  "outPool": "din fondul comun de lichiditate.",
-  "youWillMint": "Vei printa",
-  "liquidityTokens": "tokene disponibile.",
-  "totalSupplyIs": "Actuala ofertă totală de tokene disponibile este",
-  "youAreSettingExRate": "Setezi cursul valutar inițial la",
-  "totalSupplyIs0": "Actuala ofertă totală de tokene disponibile este 0.",
-  "tokenWorth": "La acest schimb valutar, fiecare token disponibil este estimată la",
-  "firstLiquidity": "Ești prima persoană care aduce lichiditate!",
-  "initialExchangeRate": "Schimbul valutar inițial va fi setat în funcție de depozitul tău. Te rog asigură-te că depoziturile ETH și {{ label }} pe care le-ai făcut au aceeași valoare în monezi naționale.",
-  "removeLiquidity": "Elimină Lichiditate",
-  "poolTokens": "Extrage Tokene",
+  "intoPool": "în fondul de lichidatate.",
+  "outPool": "din fondul de lichiditate.",
+  "youWillMint": "Tu vei tipări",
+  "liquidityTokens": "jetoane de lichiditate.",
+  "totalSupplyIs": "Cantitatea totală de jetoane de lichiditate este",
+  "youAreSettingExRate": "Setezi cursul de schimb inițial la",
+  "totalSupplyIs0": "Cantitatea totală de jetoane de lichiditate este 0.",
+  "tokenWorth": "La cursul de schimb actual, fiecare jeton de lichiditate este valorat la",
+  "firstLiquidity": "Ești prima persoană care depune lichiditate!",
+  "initialExchangeRate": "Cursul de schimb inițial va fi setat în funcție de depozitele tale. Te rog asigură-te că ETH-ul și {{ label }}-ul pe care le-ai depozitat au aceeași valoare în bani fiat.",
+  "removeLiquidity": "Retrage Lichiditat",
+  "poolTokens": "Depune Jetoane",
   "enterLabelCont": "Setează o valoare pentru {{ label }} pentru a continua.",
-  "youAreRemoving": "Elimini între",
-  "youWillRemove": "Vei elimina",
-  "createExchange": "Creează Exchange",
-  "invalidTokenAddress": "Adresă de token nu este validă",
-  "exchangeExists": "{{ label }} Exchange există deja!",
-  "invalidSymbol": "Simbol invalid!",
-  "invalidDecimals": "Zecimale invalidate",
-  "tokenAddress": "Adresă Token",
+  "youAreRemoving": "Retragi între",
+  "youWillRemove": "Vei retrage",
+  "createExchange": "Creează Piață de Schimb",
+  "invalidTokenAddress": "Adresa de jeton nu este validă",
+  "exchangeExists": "{{ label }} Piața de schimb există deja!",
+  "invalidSymbol": "Simbol invalid",
+  "invalidDecimals": "Zecimale invalide",
+  "tokenAddress": "Adresă Jeton",
   "label": "Denumire",
+  "name": "Nume",
+  "symbol": "Simbol",
   "decimals": "Zecimale",
-  "enterTokenCont": "Setează o adresă de token pentru a continua"
+  "enterTokenCont": "Setează o adresă de jeton pentru a continua",
+  "priceChange": "Deviație de preț așteptată",
+  "forAtLeast": "pentru cel puțin ",
+  "brokenToken": "Jetonul selectat nu este compatibil cu Uniswap V1. Depunerea de lichiditate îți va bloca fondurile pe vecie.",
+  "toleranceExplanation": "Micșorând această limită, vei reduce riscul de frontrunning. În același timp, devine mai probabil că tranzacția va eșua din cauza variațiilor normale de preț.",
+  "tokenSearchPlaceholder": "Caută nume sau lipește adresă"
 }

public/locales/vi.json

@@ -1,87 +1,87 @@
 {
-	"noWallet": "Không tìm thấy ví tiền Ethereum",
-	"wrongNetwork": "Kết nối mạng không đúng",
-	"switchNetwork": "Vui lòng chuyển sang {{ correctNetwork }}",
-	"installWeb3MobileBrowser": "Vui lòng truy cập từ trình duyệt di động hỗ trợ web3 như là Ví Trust hoặc Ví Coinbase",
-	"installMetamask": "Vui lòng truy cập sau khi cài đặt Metamask trên Chrome hoặc Brave.",
-	"disconnected": "Ngắt kết nối rồi",
-	"swap": "Hoán đổi",
-	"swapAnyway": "Tiếp tục hoán đổi?",
-	"send": "Gửi",
-	"sendAnyway": "Tiếp tục gửi?",
-	"pool": "Chung vốn",
-	"betaWarning": "Dự án này đang trong giai đoạn thử nghiệm. Sử dụng có rủi ro của riêng bạn",
-	"input": "Đầu vào",
-	"output": "Đầu ra",
-	"estimated": "ước lượng",
-	"balance": "Số dư: {{ balanceInput }}",
-	"unlock": "Mở khóa",
-	"pending": "Đang chờ xử lý",
-	"selectToken": "Chọn một đồng tiền ảo",
-	"searchOrPaste": "Tìm kiếm tên, biểu tượng, hoặc địa chỉ của đồng tiền ảo",
-	"searchOrPasteMobile": "Tên, Biểu tương, hoặc Địa chỉ",
-	"noExchange": "Không Tìm Thấy Giao Dịch",
-	"exchangeRate": "Tỷ giá",
-	"unknownError": "Rất tiếc! Xảy ra lỗi không xác định. Vui lòng làm mới trang, hoặc truy cập từ trình duyệt hay thiết bị khác.",
-	"enterValueCont": "Nhập một giá trị {{ missingCurrencyValue }} để tiếp tục.",
-	"selectTokenCont": "Chọn một đồng tiền ảo để tiếp tục.",
-	"noLiquidity": "Không có tính thanh khoản.",
-	"insufficientLiquidity": "Không đủ tính thanh khoản.",
-	"unlockTokenCont": "Vui lòng mở khoá đồng tiền ảo để tiếp tục",
-	"transactionDetails": "Chi tiết nâng cao",
-	"hideDetails": "Che giấu chi tiết",
-	"slippageWarning": "Cảnh báo trượt giá",
-	"highSlippageWarning": "Cảnh báo trượt giá cao",
-	"youAreSelling": "Bạn đang bán",
-	"orTransFail": "hoặc giao dịch sẽ thất bại.",
-	"youWillReceive": "Bạn sẽ nhận dược ít nhất là",
-	"youAreBuying": "Bạn đang mua",
-	"itWillCost": "Nó sẽ có giá cao nhất",
-	"forAtMost": "nhiều nhất",
-	"insufficientBalance": "Số dư không đủ",
-	"inputNotValid": "Giá trị nhập vào không hợp lệ",
-	"differentToken": "Đồng tiền ảo phải khác nhau.",
-	"noRecipient": "Nhập địa chỉ ví để gửi đến.",
-	"invalidRecipient": "Vui lòng nhập một người nhận địa chỉ ví hợp lệ.",
-	"recipientAddress": "Địa chỉ người nhận",
-	"youAreSending": "Bạn đang gửi",
-	"willReceive": "sẽ nhận dược ít nhất là",
-	"to": "đến",
-	"addLiquidity": "Thêm tiền thanh khoản",
-	"deposit": "Gửi tiền",
-	"currentPoolSize": "Quy mô hiện tại của quỹ",
-	"yourPoolShare": "Phần hùn của bạn trong quỹ",
-	"noZero": "Số tiền không thể bằng không.",
-	"mustBeETH": "Một trong những đầu vào phải là ETH.",
-	"enterCurrencyOrLabelCont": "Nhập giá trị {{ inputCurrency }} hoặc {{ label }} để tiếp tục.",
-	"youAreAdding": "Bạn đang thêm",
-	"and": "và",
-	"intoPool": "vào nhóm thanh khoản.",
-	"outPool": "từ nhóm thanh khoản.",
-	"youWillMint": "Bạn sẽ đúc tiền",
-	"liquidityTokens": "dồng thanh khoản.",
-	"totalSupplyIs": "Tổng cung hiện tại của đồng thanh khoản là",
-	"youAreSettingExRate": "Bạn đang đặt tỷ giá hối đoái ban đầu thành",
-	"totalSupplyIs0": "Tổng cung hiện tại của đồng thanh khoản là 0.",
-	"tokenWorth": "Tại tỷ giá hối đoái hiện tại, giá trị đồng token của quỹ là",
-	"firstLiquidity": "Bạn là người đầu tiên thêm thanh khoản!",
-	"initialExchangeRate": "Tỷ giá hối đoái ban đầu sẽ được thiết lập dựa trên tiền gửi của bạn. Vui lòng đảm bảo rằng tiền gửi ETH và {{ label }} của bạn có cùng giá trị tiền định danh.",
-	"removeLiquidity": "Loại bỏ thanh khoản",
-	"poolTokens": "Đồng tiền ảo của quỹ",
-	"enterLabelCont": "Nhập giá trị {{ label }} để tiếp tục",
-	"youAreRemoving": "Bạn đang loại bỏ giữa",
-	"youWillRemove": "Bạn sẽ loại bỏ",
-	"createExchange": "Tạo giao dịch",
-	"invalidTokenAddress": "Địa chỉ đồng tiền điện tử không hợp lệ",
-	"exchangeExists": "{{ label }} Giao dịch đã tồn tại!",
-	"invalidSymbol": "Biểu tượng không hợp lệ",
-	"invalidDecimals": "Số thập phân không hợp lệ",
-	"tokenAddress": "Địa chỉ đồng tiền điện tử",
-	"label": "Nhãn",
-	"name": "Tên",
-	"symbol": "Biểu tượng",
-	"decimals": "Số thập phân",
-	"enterTokenCont": "Nhập địa chỉ đồng tiền ảo để tiếp tục",
-	"priceChange": "Trượt giá dự kiến",
-	"forAtLeast": "cho ít nhất "
+  "noWallet": "Không tìm thấy ví tiền Ethereum",
+  "wrongNetwork": "Kết nối mạng không đúng",
+  "switchNetwork": "Vui lòng chuyển sang {{ correctNetwork }}",
+  "installWeb3MobileBrowser": "Vui lòng truy cập từ trình duyệt di động hỗ trợ web3 như là Ví Trust hoặc Ví Coinbase",
+  "installMetamask": "Vui lòng truy cập sau khi cài đặt Metamask trên Chrome hoặc Brave.",
+  "disconnected": "Ngắt kết nối rồi",
+  "swap": "Hoán đổi",
+  "swapAnyway": "Tiếp tục hoán đổi?",
+  "send": "Gửi",
+  "sendAnyway": "Tiếp tục gửi?",
+  "pool": "Chung vốn",
+  "betaWarning": "Dự án này đang trong giai đoạn thử nghiệm. Sử dụng có rủi ro của riêng bạn",
+  "input": "Đầu vào",
+  "output": "Đầu ra",
+  "estimated": "ước lượng",
+  "balance": "Số dư: {{ balanceInput }}",
+  "unlock": "Mở khóa",
+  "pending": "Đang chờ xử lý",
+  "selectToken": "Chọn một đồng tiền ảo",
+  "searchOrPaste": "Tìm kiếm tên, biểu tượng, hoặc địa chỉ của đồng tiền ảo",
+  "searchOrPasteMobile": "Tên, Biểu tượng, hoặc Địa chỉ",
+  "noExchange": "Không tìm thấy giao dịch",
+  "exchangeRate": "Tỷ giá",
+  "unknownError": "Rất tiếc! Xảy ra lỗi không xác định. Vui lòng làm mới trang, hoặc truy cập từ trình duyệt hay thiết bị khác.",
+  "enterValueCont": "Nhập một giá trị {{ missingCurrencyValue }} để tiếp tục.",
+  "selectTokenCont": "Chọn một đồng tiền ảo để tiếp tục.",
+  "noLiquidity": "Không có tính thanh khoản.",
+  "insufficientLiquidity": "Không đủ tính thanh khoản.",
+  "unlockTokenCont": "Vui lòng mở khoá đồng tiền ảo để tiếp tục",
+  "transactionDetails": "Chi tiết nâng cao",
+  "hideDetails": "Ẩn chi tiết",
+  "slippageWarning": "Cảnh báo trượt giá",
+  "highSlippageWarning": "Cảnh báo trượt giá cao",
+  "youAreSelling": "Bạn đang bán",
+  "orTransFail": "hoặc giao dịch sẽ thất bại.",
+  "youWillReceive": "Bạn sẽ nhận dược ít nhất là",
+  "youAreBuying": "Bạn đang mua",
+  "itWillCost": "Nó sẽ có giá cao nhất",
+  "forAtMost": "nhiều nhất",
+  "insufficientBalance": "Số dư không đủ",
+  "inputNotValid": "Giá trị nhập vào không hợp lệ",
+  "differentToken": "Đồng tiền ảo phải khác nhau.",
+  "noRecipient": "Nhập địa chỉ ví để gửi đến.",
+  "invalidRecipient": "Vui lòng nhập một người nhận địa chỉ ví hợp lệ.",
+  "recipientAddress": "Địa chỉ người nhận",
+  "youAreSending": "Bạn đang gửi",
+  "willReceive": "sẽ nhận dược ít nhất là",
+  "to": "đến",
+  "addLiquidity": "Thêm tiền thanh khoản",
+  "deposit": "Gửi tiền",
+  "currentPoolSize": "Quy mô hiện tại của quỹ",
+  "yourPoolShare": "Phần hùn của bạn trong quỹ",
+  "noZero": "Số tiền không thể bằng không.",
+  "mustBeETH": "Một trong những đầu vào phải là ETH.",
+  "enterCurrencyOrLabelCont": "Nhập giá trị {{ inputCurrency }} hoặc {{ label }} để tiếp tục.",
+  "youAreAdding": "Bạn đang thêm",
+  "and": "và",
+  "intoPool": "vào nhóm thanh khoản.",
+  "outPool": "từ nhóm thanh khoản.",
+  "youWillMint": "Bạn sẽ đúc tiền",
+  "liquidityTokens": "đồng thanh khoản.",
+  "totalSupplyIs": "Tổng cung hiện tại của đồng thanh khoản là",
+  "youAreSettingExRate": "Bạn đang đặt tỷ giá hối đoái ban đầu thành",
+  "totalSupplyIs0": "Tổng cung hiện tại của đồng thanh khoản là 0.",
+  "tokenWorth": "Tại tỷ giá hối đoái hiện tại, giá trị đồng token của quỹ là",
+  "firstLiquidity": "Bạn là người đầu tiên thêm thanh khoản!",
+  "initialExchangeRate": "Tỷ giá hối đoái ban đầu sẽ được thiết lập dựa trên tiền gửi của bạn. Vui lòng đảm bảo rằng tiền gửi ETH và {{ label }} của bạn có cùng giá trị tiền định danh.",
+  "removeLiquidity": "Loại bỏ thanh khoản",
+  "poolTokens": "Đồng tiền ảo của quỹ",
+  "enterLabelCont": "Nhập giá trị {{ label }} để tiếp tục",
+  "youAreRemoving": "Bạn đang loại bỏ giữa",
+  "youWillRemove": "Bạn sẽ loại bỏ",
+  "createExchange": "Tạo giao dịch",
+  "invalidTokenAddress": "Địa chỉ đồng tiền điện tử không hợp lệ",
+  "exchangeExists": "{{ label }} Giao dịch đã tồn tại!",
+  "invalidSymbol": "Biểu tượng không hợp lệ",
+  "invalidDecimals": "Số thập phân không hợp lệ",
+  "tokenAddress": "Địa chỉ đồng tiền điện tử",
+  "label": "Nhãn",
+  "name": "Tên",
+  "symbol": "Biểu tượng",
+  "decimals": "Số thập phân",
+  "enterTokenCont": "Nhập địa chỉ đồng tiền ảo để tiếp tục",
+  "priceChange": "Trượt giá dự kiến",
+  "forAtLeast": "cho ít nhất "
 }

src/assets/svg/logo.svg

@@ -1,14 +1,13 @@
-<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3463 13.7365C14.9529 14.8091 13.5964 15.1416 12.9598 15.2028C11.9952 15.2969 11.7955 14.7385 11.9839 14.0369C12.0457 13.7857 12.183 13.5597 12.377 13.3896C12.571 13.2194 12.8125 13.1133 13.0686 13.0857C13.3209 13.0625 13.5747 13.1112 13.8007 13.2263C14.0267 13.3414 14.2158 13.5183 14.3463 13.7365Z" fill="black"/>
-<path d="M18.1331 11.752C17.4281 17.1689 26.9322 16.0416 26.7513 20.3529C27.6888 19.1287 28.0919 15.8024 25.3319 14.0903C22.8729 12.5637 19.6687 13.3991 18.1331 11.752Z" fill="black"/>
-<path d="M23.6074 9.70952C23.5455 9.65207 23.4818 9.59557 23.4199 9.53906C23.4827 9.59651 23.5455 9.65678 23.6074 9.70952Z" fill="black"/>
-<path d="M25.8167 13.6578L25.8111 13.6493C25.7253 13.4892 25.6275 13.3359 25.5186 13.1906C25.1981 12.7546 24.7385 12.4421 24.2164 12.3054C23.8689 12.2153 23.5135 12.1592 23.1552 12.1378C22.7924 12.1114 22.4221 12.0963 22.048 12.0766C21.2981 12.0351 20.5303 11.9579 19.7803 11.7432C19.5928 11.6895 19.4053 11.6311 19.2244 11.5605C19.1306 11.5266 19.0434 11.4899 18.9506 11.4503C18.8578 11.4107 18.7631 11.3655 18.6694 11.3175C18.3167 11.1235 17.9901 10.8852 17.6972 10.6084C17.1197 10.0688 16.666 9.45662 16.2113 8.86332C15.7827 8.26774 15.3227 7.69559 14.8333 7.14934C14.3504 6.6142 13.7796 6.16633 13.1458 5.82524C12.4896 5.4932 11.7768 5.28871 11.0449 5.22253C11.8041 5.13971 12.5721 5.23381 13.2892 5.49752C14.0129 5.77972 14.6744 6.20174 15.2364 6.73968C15.6033 7.08534 15.9477 7.45433 16.2676 7.84435C18.6488 7.37347 20.58 7.79161 22.064 8.6034L22.0977 8.62035C22.5701 8.8777 23.0127 9.18658 23.4177 9.54138C23.4824 9.59788 23.5461 9.65439 23.6052 9.71183C23.9213 10.0036 24.2155 10.3183 24.4855 10.6536L24.5061 10.6809C25.3826 11.7959 25.8157 12.9552 25.8167 13.6578Z" fill="black"/>
-<path d="M25.8161 13.6577L25.8105 13.6465L25.8161 13.6577Z" fill="black"/>
-<path d="M11.1654 5.91992C11.7729 6.00845 12.3925 6.25142 12.7919 6.71476C13.1913 7.1781 13.3384 7.78082 13.4538 8.35434C13.5475 8.79885 13.6216 9.25183 13.7959 9.67279C13.8803 9.87809 14.004 10.058 14.1072 10.252C14.1925 10.413 14.3481 10.558 14.4081 10.7304C14.4188 10.7551 14.4228 10.7823 14.4197 10.8091C14.4166 10.8359 14.4064 10.8614 14.3903 10.8829C14.1784 11.1184 13.6066 10.8566 13.3909 10.7511C13.0182 10.5655 12.6843 10.3097 12.4075 9.99769C11.5423 9.0324 11.0951 7.64332 11.1223 6.37855C11.1283 6.225 11.1427 6.07189 11.1654 5.91992Z" fill="black"/>
-<path d="M21.326 16.8066C20.0136 20.486 25.9665 22.9544 23.7363 26.695C26.0246 25.7457 27.1112 22.8781 26.1615 20.6028C25.3309 18.6054 22.8747 17.8774 21.326 16.8066Z" fill="black"/>
-<path d="M13.4531 21.6165C13.8108 21.3457 14.2018 21.1226 14.6165 20.9526C15.0361 20.7839 15.4714 20.6577 15.9159 20.5759C16.798 20.4073 17.6708 20.3659 18.4039 20.0693C18.7661 19.9272 19.0994 19.7197 19.3873 19.4571C19.666 19.197 19.8793 18.8743 20.0098 18.5154C20.1435 18.1367 20.1977 17.7343 20.1692 17.3335C20.1361 16.903 20.0391 16.4798 19.8814 16.0781C20.2082 16.4195 20.4461 16.8366 20.5741 17.2925C20.7022 17.7483 20.7163 18.2288 20.6154 18.6915C20.5007 19.1812 20.2531 19.6295 19.9001 19.9864C19.5507 20.3322 19.1294 20.5959 18.6664 20.7586C18.2246 20.9143 17.7639 21.0093 17.2968 21.0411C16.8468 21.0788 16.4118 21.0892 15.9843 21.1146C15.12 21.151 14.2664 21.3203 13.4531 21.6165Z" fill="black"/>
-<path d="M21.8492 28.0849C21.7171 28.1904 21.5849 28.3025 21.4396 28.4004C21.2934 28.4972 21.1401 28.5828 20.9811 28.6566C20.6502 28.8188 20.2863 28.9016 19.9181 28.8986C18.9206 28.8798 18.2156 28.1339 17.8031 27.291C17.5219 26.7166 17.3278 26.0959 16.9941 25.5488C16.5169 24.7662 15.7004 24.1362 14.7441 24.2529C14.3542 24.3019 13.9885 24.478 13.772 24.818C13.202 25.7061 14.0204 26.9501 15.0638 26.774C15.1526 26.7604 15.2394 26.7364 15.3226 26.7024C15.4054 26.667 15.4828 26.6197 15.5522 26.5621C15.698 26.4402 15.8079 26.2806 15.87 26.1007C15.9386 25.913 15.9538 25.7098 15.9141 25.5139C15.8713 25.3092 15.751 25.1292 15.5785 25.012C15.779 25.1063 15.9353 25.2751 16.0144 25.4829C16.0965 25.6966 16.1176 25.9292 16.0754 26.1543C16.0344 26.3889 15.9314 26.6082 15.7772 26.7891C15.6953 26.8821 15.6006 26.963 15.496 27.0292C15.3923 27.0947 15.2812 27.1475 15.1651 27.1865C14.9296 27.2673 14.6789 27.2934 14.432 27.2628C14.0852 27.2132 13.7582 27.0707 13.4851 26.8503C13.1626 26.5941 12.9226 26.2589 12.6311 25.9707C12.2969 25.6184 11.9025 25.3291 11.4667 25.1165C11.1662 24.9839 10.8517 24.886 10.5293 24.8246C10.3671 24.7907 10.203 24.7662 10.039 24.7455C9.96397 24.7379 9.59648 24.656 9.54492 24.704C10.052 24.2351 10.6048 23.8187 11.1949 23.4609C11.8008 23.0997 12.4513 22.8201 13.1298 22.6294C13.8333 22.4305 14.569 22.3738 15.2944 22.4627C15.6678 22.5077 16.0336 22.6028 16.3819 22.7452C16.7469 22.8916 17.0838 23.1007 17.3775 23.363C17.6682 23.6381 17.9032 23.9672 18.0694 24.3321C18.2194 24.6736 18.3313 25.0308 18.4031 25.3972C18.6168 26.4924 18.5381 28.1904 19.9659 28.4409C20.0403 28.4554 20.1154 28.4661 20.1909 28.4729L20.4243 28.4786C20.5848 28.4671 20.7442 28.4441 20.9015 28.4098C21.2272 28.3329 21.5446 28.224 21.8492 28.0849Z" fill="black"/>
-<path d="M13.5531 26.8907L13.5156 26.8613L13.5531 26.8907Z" fill="black"/>
-<path d="M12.2721 11.4336C12.2201 11.6343 12.1293 11.8228 12.0049 11.9883C11.7733 12.2902 11.4669 12.5256 11.1162 12.6711C10.8007 12.8076 10.4667 12.8958 10.1253 12.9329C10.0512 12.9423 9.97433 12.9479 9.90027 12.9536C9.684 12.9618 9.47603 13.0394 9.30683 13.175C9.13763 13.3106 9.01608 13.497 8.95998 13.707C8.93429 13.8115 8.91519 13.9175 8.90279 14.0244C8.86905 14.3012 8.86342 14.5894 8.83342 14.9378C8.75997 15.5308 8.58922 16.1074 8.32812 16.6443C7.98876 17.3619 7.60815 17.9401 7.69627 18.767C7.75439 19.3038 8.02813 19.6635 8.39187 20.0346C9.0481 20.7089 10.5171 21.0102 10.189 22.6715C9.9912 23.6631 8.35437 24.7038 6.05382 25.0673C6.28256 25.0324 5.76039 24.1481 5.72757 24.0916C5.48102 23.7036 5.21103 23.3382 5.0151 22.9173C4.63073 22.1008 4.45261 21.1562 4.61011 20.2615C4.77604 19.3198 5.46977 18.5984 6.04632 17.8789C6.73255 17.0229 7.45252 15.9013 7.61189 14.79C7.64939 14.5207 7.67564 14.1835 7.73564 13.8482C7.79284 13.4768 7.90867 13.1169 8.07875 12.7822C8.19485 12.5626 8.3477 12.3648 8.53062 12.1974C8.62598 12.1085 8.6889 11.99 8.7093 11.8609C8.72969 11.7318 8.70639 11.5996 8.64311 11.4854L4.97572 4.85926L10.2434 11.3893C10.3034 11.465 10.3792 11.5265 10.4655 11.5694C10.5518 11.6123 10.6464 11.6357 10.7427 11.6377C10.839 11.6398 10.9345 11.6206 11.0225 11.5814C11.1106 11.5422 11.189 11.484 11.2521 11.411C11.3188 11.3328 11.3567 11.2339 11.3592 11.131C11.3618 11.0281 11.3289 10.9274 11.2662 10.846C10.9221 10.4043 10.5584 9.95412 10.2059 9.5115L8.8803 7.86344L6.21975 4.57297L2.5918 0L6.56099 4.27821L9.39309 7.42364L10.8059 9.00013C11.2746 9.53034 11.7433 10.0436 12.2121 10.6011L12.2889 10.6953L12.3058 10.8412C12.3287 11.0392 12.3173 11.2396 12.2721 11.4336Z" fill="black"/>
-<path d="M13.4856 26.8466C13.231 26.6491 13.0046 26.4174 12.8125 26.1582C13.0186 26.405 13.2436 26.6352 13.4856 26.8466Z" fill="black"/>
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2968 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z" fill="black"/>
+<path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z" fill="black"/>
+<path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z" fill="black"/>
+<path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z" fill="black"/>
+<path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91233 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27858C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z" fill="black"/>
+<path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79009 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z" fill="black"/>
+<path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7562 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87092 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926351 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z" fill="black"/>
+</g>
 </svg>

src/assets/svg/logo_pink.svg

@@ -1,14 +1,13 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3078 13.7367C14.9143 14.8093 13.5578 15.1418 12.9212 15.203C11.9566 15.2972 11.7569 14.7387 11.9453 14.0371C12.0072 13.7859 12.1444 13.5599 12.3384 13.3898C12.5325 13.2196 12.7739 13.1135 13.03 13.0859C13.2823 13.0627 13.5361 13.1114 13.7621 13.2265C13.9881 13.3417 14.1773 13.5185 14.3078 13.7367V13.7367Z" fill="#FF007A"/>
-<path d="M18.094 11.7521C17.389 17.169 26.8931 16.0418 26.7122 20.3531C27.6497 19.1288 28.0528 15.8026 25.2929 14.0905C22.8339 12.5639 19.6296 13.3992 18.094 11.7521Z" fill="#FF007A"/>
-<path d="M23.5684 9.7093C23.5065 9.65186 23.4427 9.59535 23.3809 9.53885C23.4437 9.59629 23.5065 9.65657 23.5684 9.7093Z" fill="#FF007A"/>
-<path d="M25.7771 13.6581L25.7715 13.6496C25.6857 13.4895 25.5879 13.3362 25.479 13.191C25.1586 12.7549 24.699 12.4424 24.1769 12.3057C23.8293 12.2156 23.4739 12.1595 23.1156 12.1381C22.7528 12.1117 22.3825 12.0966 22.0085 12.0769C21.2585 12.0354 20.4907 11.9582 19.7407 11.7435C19.5532 11.6898 19.3658 11.6314 19.1848 11.5608C19.0911 11.5269 19.0039 11.4902 18.9111 11.4506C18.8183 11.4111 18.7236 11.3658 18.6298 11.3178C18.2772 11.1238 17.9505 10.8855 17.6577 10.6087C17.0802 10.0691 16.6265 9.45692 16.1718 8.86362C15.7432 8.26804 15.2831 7.6959 14.7937 7.14964C14.3108 6.61451 13.74 6.16664 13.1063 5.82555C12.45 5.49351 11.7372 5.28902 11.0054 5.22283C11.7646 5.14002 12.5326 5.23412 13.2497 5.49782C13.9733 5.78002 14.6348 6.20204 15.1968 6.73999C15.5637 7.08565 15.9082 7.45463 16.228 7.84465C18.6092 7.37378 20.5404 7.79192 22.0244 8.6037L22.0582 8.62065C22.5305 8.87801 22.9732 9.18689 23.3781 9.54168C23.4428 9.59819 23.5066 9.65469 23.5656 9.71214C23.8817 10.0039 24.1759 10.3187 24.4459 10.6539L24.4665 10.6812C25.3431 11.7962 25.7762 12.9555 25.7771 13.6581Z" fill="#FF007A"/>
-<path d="M25.776 13.657L25.7705 13.6458L25.776 13.657Z" fill="#FF007A"/>
-<path d="M11.1263 5.92056C11.7338 6.00909 12.3535 6.25206 12.7528 6.7154C13.1522 7.17874 13.2994 7.78146 13.4147 8.35498C13.5084 8.79949 13.5825 9.25247 13.7569 9.67343C13.8412 9.87873 13.965 10.0586 14.0681 10.2526C14.1534 10.4136 14.309 10.5587 14.369 10.731C14.3798 10.7558 14.3838 10.7829 14.3806 10.8097C14.3775 10.8365 14.3674 10.862 14.3512 10.8836C14.1394 11.119 13.5675 10.8572 13.3519 10.7517C12.9791 10.5661 12.6453 10.3104 12.3685 9.99834C11.5032 9.03304 11.056 7.64396 11.0832 6.37919C11.0892 6.22564 11.1036 6.07253 11.1263 5.92056Z" fill="#FF007A"/>
-<path d="M21.2865 16.8057C19.974 20.4851 25.927 22.9535 23.6967 26.6941C25.9851 25.7448 27.0716 22.8772 26.122 20.6019C25.2914 18.6045 22.8352 17.8765 21.2865 16.8057Z" fill="#FF007A"/>
-<path d="M13.4131 21.6174C13.7707 21.3466 14.1618 21.1234 14.5765 20.9535C14.996 20.7848 15.4313 20.6586 15.8758 20.5768C16.758 20.4082 17.6308 20.3668 18.3639 20.0701C18.7261 19.928 19.0594 19.7206 19.3473 19.458C19.626 19.1979 19.8393 18.8751 19.9698 18.5162C20.1034 18.1375 20.1577 17.7351 20.1291 17.3343C20.096 16.9038 19.999 16.4807 19.8413 16.079C20.1681 16.4204 20.4061 16.8375 20.5341 17.2933C20.6621 17.7492 20.6763 18.2297 20.5754 18.6923C20.4607 19.1821 20.2131 19.6303 19.8601 19.9872C19.5107 20.333 19.0893 20.5967 18.6264 20.7595C18.1846 20.9151 17.7238 21.0102 17.2567 21.042C16.8067 21.0797 16.3717 21.09 15.9443 21.1154C15.08 21.1519 14.2263 21.3211 13.4131 21.6174V21.6174Z" fill="#FF007A"/>
-<path d="M21.8102 28.0852C21.678 28.1907 21.5458 28.3028 21.4005 28.4007C21.2543 28.4975 21.101 28.5831 20.9421 28.6569C20.6111 28.8191 20.2472 28.9019 19.879 28.8989C18.8815 28.8801 18.1765 28.1342 17.7641 27.2913C17.4828 26.7169 17.2888 26.0962 16.955 25.5491C16.4778 24.7665 15.6613 24.1365 14.7051 24.2532C14.3151 24.3022 13.9495 24.4783 13.7329 24.8183C13.1629 25.7064 13.9814 26.9504 15.0248 26.7743C15.1135 26.7607 15.2003 26.7367 15.2835 26.7027C15.3664 26.6673 15.4437 26.62 15.5132 26.5624C15.6589 26.4405 15.7688 26.281 15.831 26.101C15.8995 25.9133 15.9148 25.7101 15.875 25.5142C15.8322 25.3095 15.7119 25.1295 15.5394 25.0123C15.74 25.1066 15.8962 25.2754 15.9754 25.4832C16.0574 25.6969 16.0785 25.9295 16.0363 26.1546C15.9953 26.3892 15.8924 26.6085 15.7382 26.7894C15.6563 26.8824 15.5616 26.9633 15.4569 27.0295C15.3532 27.095 15.2421 27.1478 15.126 27.1868C14.8905 27.2677 14.6399 27.2937 14.3929 27.2631C14.0461 27.2135 13.7191 27.071 13.4461 26.8506C13.1236 26.5944 12.8836 26.2592 12.592 25.971C12.2578 25.6187 11.8635 25.3294 11.4277 25.1168C11.1272 24.9842 10.8127 24.8863 10.4902 24.8249C10.328 24.791 10.164 24.7665 9.99991 24.7458C9.92491 24.7383 9.55742 24.6563 9.50586 24.7043C10.0129 24.2354 10.5657 23.819 11.1558 23.4612C11.7617 23.1 12.4123 22.8205 13.0908 22.6297C13.7942 22.4308 14.53 22.3741 15.2554 22.463C15.6288 22.508 15.9945 22.6031 16.3428 22.7455C16.7078 22.892 17.0447 23.101 17.3384 23.3633C17.6292 23.6384 17.8641 23.9675 18.0303 24.3324C18.1803 24.6739 18.2923 25.0311 18.364 25.3975C18.5778 26.4927 18.499 28.1907 19.9268 28.4412C20.0012 28.4557 20.0763 28.4664 20.1518 28.4732L20.3852 28.4789C20.5457 28.4674 20.7052 28.4444 20.8624 28.4101C21.1881 28.3332 21.5056 28.2243 21.8102 28.0852V28.0852Z" fill="#FF007A"/>
-<path d="M13.514 26.8916L13.4766 26.8622L13.514 26.8916Z" fill="#FF007A"/>
-<path d="M12.2325 11.4336C12.1805 11.6343 12.0897 11.8228 11.9653 11.9883C11.7338 12.2902 11.4273 12.5256 11.0766 12.6711C10.7612 12.8076 10.4272 12.8958 10.0857 12.9329C10.0116 12.9423 9.93478 12.9479 9.86072 12.9536C9.64444 12.9618 9.43648 13.0394 9.26728 13.175C9.09808 13.3106 8.97653 13.497 8.92043 13.707C8.89474 13.8115 8.87564 13.9175 8.86324 14.0244C8.82949 14.3012 8.82387 14.5894 8.79387 14.9378C8.72041 15.5308 8.54967 16.1074 8.28857 16.6443C7.94921 17.3619 7.5686 17.9401 7.65672 18.767C7.71484 19.3038 7.98858 19.6635 8.35232 20.0346C9.00855 20.7089 10.4776 21.0102 10.1495 22.6715C9.95165 23.6631 8.31482 24.7038 6.01426 25.0673C6.24301 25.0324 5.72083 24.1481 5.68802 24.0916C5.44147 23.7036 5.17148 23.3382 4.97555 22.9173C4.59118 22.1008 4.41306 21.1562 4.57056 20.2615C4.73649 19.3198 5.43022 18.5984 6.00677 17.8789C6.693 17.0229 7.41297 15.9013 7.57234 14.79C7.60984 14.5207 7.63609 14.1835 7.69609 13.8482C7.75329 13.4768 7.86912 13.1169 8.0392 12.7822C8.1553 12.5626 8.30815 12.3648 8.49106 12.1974C8.58643 12.1085 8.64935 11.99 8.66975 11.8609C8.69014 11.7318 8.66684 11.5996 8.60356 11.4854L4.93617 4.85926L10.2038 11.3893C10.2638 11.465 10.3396 11.5265 10.4259 11.5694C10.5122 11.6123 10.6069 11.6357 10.7031 11.6377C10.7994 11.6398 10.8949 11.6206 10.983 11.5814C11.071 11.5422 11.1494 11.484 11.2126 11.411C11.2793 11.3328 11.3171 11.2339 11.3197 11.131C11.3222 11.0281 11.2894 10.9274 11.2266 10.846C10.8826 10.4043 10.5188 9.95412 10.1663 9.5115L8.84075 7.86344L6.1802 4.57297L2.55225 0L6.52144 4.27821L9.35354 7.42364L10.7663 9.00013C11.235 9.53034 11.7038 10.0436 12.1725 10.6011L12.2494 10.6953L12.2663 10.8412C12.2891 11.0392 12.2777 11.2396 12.2325 11.4336Z" fill="#FF007A"/>
-<path d="M13.447 26.8463C13.1925 26.6488 12.966 26.4171 12.7739 26.1579C12.98 26.4047 13.205 26.6349 13.447 26.8463V26.8463Z" fill="#FF007A"/>
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:darken">
+<path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2967 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z" fill="#FF007A"/>
+<path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z" fill="#FF007A"/>
+<path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z" fill="#FF007A"/>
+<path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z" fill="#FF007A"/>
+<path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91234 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27859C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z" fill="#FF007A"/>
+<path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79008 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z" fill="#FF007A"/>
+<path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7563 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87091 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z" fill="#FF007A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926352 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z" fill="#FF007A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z" fill="#FF007A"/>
+</g>
 </svg>

src/assets/svg/logo_white.svg

@@ -1,14 +1,11 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3078 13.7367C14.9143 14.8093 13.5578 15.1418 12.9212 15.203C11.9566 15.2972 11.7569 14.7387 11.9453 14.0371C12.0072 13.7859 12.1444 13.5599 12.3384 13.3898C12.5325 13.2196 12.7739 13.1135 13.03 13.0859C13.2823 13.0627 13.5361 13.1114 13.7621 13.2265C13.9881 13.3417 14.1773 13.5185 14.3078 13.7367V13.7367Z" fill="white"/>
-<path d="M18.094 11.7521C17.389 17.169 26.8931 16.0418 26.7122 20.3531C27.6497 19.1288 28.0528 15.8026 25.2929 14.0905C22.8339 12.5639 19.6296 13.3992 18.094 11.7521Z" fill="white"/>
-<path d="M23.5684 9.7093C23.5065 9.65186 23.4427 9.59535 23.3809 9.53885C23.4437 9.59629 23.5065 9.65657 23.5684 9.7093Z" fill="white"/>
-<path d="M25.7771 13.6581L25.7715 13.6496C25.6857 13.4895 25.5879 13.3362 25.479 13.191C25.1586 12.7549 24.699 12.4424 24.1769 12.3057C23.8293 12.2156 23.4739 12.1595 23.1156 12.1381C22.7528 12.1117 22.3825 12.0966 22.0085 12.0769C21.2585 12.0354 20.4907 11.9582 19.7407 11.7435C19.5532 11.6898 19.3658 11.6314 19.1848 11.5608C19.0911 11.5269 19.0039 11.4902 18.9111 11.4506C18.8183 11.4111 18.7236 11.3658 18.6298 11.3178C18.2772 11.1238 17.9505 10.8855 17.6577 10.6087C17.0802 10.0691 16.6265 9.45692 16.1718 8.86362C15.7432 8.26804 15.2831 7.6959 14.7937 7.14964C14.3108 6.61451 13.74 6.16664 13.1063 5.82555C12.45 5.49351 11.7372 5.28902 11.0054 5.22283C11.7646 5.14002 12.5326 5.23412 13.2497 5.49782C13.9733 5.78002 14.6348 6.20204 15.1968 6.73999C15.5637 7.08565 15.9082 7.45463 16.228 7.84465C18.6092 7.37378 20.5404 7.79192 22.0244 8.6037L22.0582 8.62065C22.5305 8.87801 22.9732 9.18689 23.3781 9.54168C23.4428 9.59819 23.5066 9.65469 23.5656 9.71214C23.8817 10.0039 24.1759 10.3187 24.4459 10.6539L24.4665 10.6812C25.3431 11.7962 25.7762 12.9555 25.7771 13.6581Z" fill="white"/>
-<path d="M25.776 13.657L25.7705 13.6458L25.776 13.657Z" fill="white"/>
-<path d="M11.1263 5.92056C11.7338 6.00909 12.3535 6.25206 12.7528 6.7154C13.1522 7.17874 13.2994 7.78146 13.4147 8.35498C13.5084 8.79949 13.5825 9.25247 13.7569 9.67343C13.8412 9.87873 13.965 10.0586 14.0681 10.2526C14.1534 10.4136 14.309 10.5587 14.369 10.731C14.3798 10.7558 14.3838 10.7829 14.3806 10.8097C14.3775 10.8365 14.3674 10.862 14.3512 10.8836C14.1394 11.119 13.5675 10.8572 13.3519 10.7517C12.9791 10.5661 12.6453 10.3104 12.3685 9.99834C11.5032 9.03304 11.056 7.64396 11.0832 6.37919C11.0892 6.22564 11.1036 6.07253 11.1263 5.92056Z" fill="white"/>
-<path d="M21.2865 16.8057C19.974 20.4851 25.927 22.9535 23.6967 26.6941C25.9851 25.7448 27.0716 22.8772 26.122 20.6019C25.2914 18.6045 22.8352 17.8765 21.2865 16.8057Z" fill="white"/>
-<path d="M13.4131 21.6174C13.7707 21.3466 14.1618 21.1234 14.5765 20.9535C14.996 20.7848 15.4313 20.6586 15.8758 20.5768C16.758 20.4082 17.6308 20.3668 18.3639 20.0701C18.7261 19.928 19.0594 19.7206 19.3473 19.458C19.626 19.1979 19.8393 18.8751 19.9698 18.5162C20.1034 18.1375 20.1577 17.7351 20.1291 17.3343C20.096 16.9038 19.999 16.4807 19.8413 16.079C20.1681 16.4204 20.4061 16.8375 20.5341 17.2933C20.6621 17.7492 20.6763 18.2297 20.5754 18.6923C20.4607 19.1821 20.2131 19.6303 19.8601 19.9872C19.5107 20.333 19.0893 20.5967 18.6264 20.7595C18.1846 20.9151 17.7238 21.0102 17.2567 21.042C16.8067 21.0797 16.3717 21.09 15.9443 21.1154C15.08 21.1519 14.2263 21.3211 13.4131 21.6174V21.6174Z" fill="white"/>
-<path d="M21.8102 28.0852C21.678 28.1907 21.5458 28.3028 21.4005 28.4007C21.2543 28.4975 21.101 28.5831 20.9421 28.6569C20.6111 28.8191 20.2472 28.9019 19.879 28.8989C18.8815 28.8801 18.1765 28.1342 17.7641 27.2913C17.4828 26.7169 17.2888 26.0962 16.955 25.5491C16.4778 24.7665 15.6613 24.1365 14.7051 24.2532C14.3151 24.3022 13.9495 24.4783 13.7329 24.8183C13.1629 25.7064 13.9814 26.9504 15.0248 26.7743C15.1135 26.7607 15.2003 26.7367 15.2835 26.7027C15.3664 26.6673 15.4437 26.62 15.5132 26.5624C15.6589 26.4405 15.7688 26.281 15.831 26.101C15.8995 25.9133 15.9148 25.7101 15.875 25.5142C15.8322 25.3095 15.7119 25.1295 15.5394 25.0123C15.74 25.1066 15.8962 25.2754 15.9754 25.4832C16.0574 25.6969 16.0785 25.9295 16.0363 26.1546C15.9953 26.3892 15.8924 26.6085 15.7382 26.7894C15.6563 26.8824 15.5616 26.9633 15.4569 27.0295C15.3532 27.095 15.2421 27.1478 15.126 27.1868C14.8905 27.2677 14.6399 27.2937 14.3929 27.2631C14.0461 27.2135 13.7191 27.071 13.4461 26.8506C13.1236 26.5944 12.8836 26.2592 12.592 25.971C12.2578 25.6187 11.8635 25.3294 11.4277 25.1168C11.1272 24.9842 10.8127 24.8863 10.4902 24.8249C10.328 24.791 10.164 24.7665 9.99991 24.7458C9.92491 24.7383 9.55742 24.6563 9.50586 24.7043C10.0129 24.2354 10.5657 23.819 11.1558 23.4612C11.7617 23.1 12.4123 22.8205 13.0908 22.6297C13.7942 22.4308 14.53 22.3741 15.2554 22.463C15.6288 22.508 15.9945 22.6031 16.3428 22.7455C16.7078 22.892 17.0447 23.101 17.3384 23.3633C17.6292 23.6384 17.8641 23.9675 18.0303 24.3324C18.1803 24.6739 18.2923 25.0311 18.364 25.3975C18.5778 26.4927 18.499 28.1907 19.9268 28.4412C20.0012 28.4557 20.0763 28.4664 20.1518 28.4732L20.3852 28.4789C20.5457 28.4674 20.7052 28.4444 20.8624 28.4101C21.1881 28.3332 21.5056 28.2243 21.8102 28.0852V28.0852Z" fill="white"/>
-<path d="M13.514 26.8916L13.4766 26.8622L13.514 26.8916Z" fill="white"/>
-<path d="M12.2325 11.4336C12.1805 11.6343 12.0897 11.8228 11.9653 11.9883C11.7338 12.2902 11.4273 12.5256 11.0766 12.6711C10.7612 12.8076 10.4272 12.8958 10.0857 12.9329C10.0116 12.9423 9.93478 12.9479 9.86072 12.9536C9.64444 12.9618 9.43648 13.0394 9.26728 13.175C9.09808 13.3106 8.97653 13.497 8.92043 13.707C8.89474 13.8115 8.87564 13.9175 8.86324 14.0244C8.82949 14.3012 8.82387 14.5894 8.79387 14.9378C8.72041 15.5308 8.54967 16.1074 8.28857 16.6443C7.94921 17.3619 7.5686 17.9401 7.65672 18.767C7.71484 19.3038 7.98858 19.6635 8.35232 20.0346C9.00855 20.7089 10.4776 21.0102 10.1495 22.6715C9.95165 23.6631 8.31482 24.7038 6.01426 25.0673C6.24301 25.0324 5.72083 24.1481 5.68802 24.0916C5.44147 23.7036 5.17148 23.3382 4.97555 22.9173C4.59118 22.1008 4.41306 21.1562 4.57056 20.2615C4.73649 19.3198 5.43022 18.5984 6.00677 17.8789C6.693 17.0229 7.41297 15.9013 7.57234 14.79C7.60984 14.5207 7.63609 14.1835 7.69609 13.8482C7.75329 13.4768 7.86912 13.1169 8.0392 12.7822C8.1553 12.5626 8.30815 12.3648 8.49106 12.1974C8.58643 12.1085 8.64935 11.99 8.66975 11.8609C8.69014 11.7318 8.66684 11.5996 8.60356 11.4854L4.93617 4.85926L10.2038 11.3893C10.2638 11.465 10.3396 11.5265 10.4259 11.5694C10.5122 11.6123 10.6069 11.6357 10.7031 11.6377C10.7994 11.6398 10.8949 11.6206 10.983 11.5814C11.071 11.5422 11.1494 11.484 11.2126 11.411C11.2793 11.3328 11.3171 11.2339 11.3197 11.131C11.3222 11.0281 11.2894 10.9274 11.2266 10.846C10.8826 10.4043 10.5188 9.95412 10.1663 9.5115L8.84075 7.86344L6.1802 4.57297L2.55225 0L6.52144 4.27821L9.35354 7.42364L10.7663 9.00013C11.235 9.53034 11.7038 10.0436 12.1725 10.6011L12.2494 10.6953L12.2663 10.8412C12.2891 11.0392 12.2777 11.2396 12.2325 11.4336Z" fill="white"/>
-<path d="M13.447 26.8463C13.1925 26.6488 12.966 26.4171 12.7739 26.1579C12.98 26.4047 13.205 26.6349 13.447 26.8463V26.8463Z" fill="white"/>
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2967 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z" fill="white"/>
+<path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z" fill="white"/>
+<path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z" fill="white"/>
+<path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z" fill="white"/>
+<path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91234 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27859C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z" fill="white"/>
+<path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79008 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z" fill="white"/>
+<path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7563 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87091 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926352 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z" fill="white"/>
 </svg>

src/components/AccountDetails/Transaction.tsx

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

src/components/AccountDetails/index.tsx

@@ -99,7 +99,7 @@ const LowerSection = styled.div`
   flex-grow: 1;
   overflow: auto;
   background-color: ${({ theme }) => theme.bg2};
-  border-bottom-left-radius: 25px;
+  border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 
   h5 {
@@ -200,7 +200,7 @@ const MainWalletAction = styled(WalletAction)`
   color: ${({ theme }) => theme.primary1};
 `
 
-function renderTransactions(transactions) {
+function renderTransactions(transactions: string[]) {
   return (
     <TransactionListWrapper>
       {transactions.map((hash, i) => {
@@ -212,8 +212,8 @@ function renderTransactions(transactions) {
 
 interface AccountDetailsProps {
   toggleWalletModal: () => void
-  pendingTransactions: any[]
-  confirmedTransactions: any[]
+  pendingTransactions: string[]
+  confirmedTransactions: string[]
   ENSName?: string
   openOptions: () => void
 }
@@ -251,26 +251,26 @@ export default function AccountDetails({
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''} />
+          <img src={WalletConnectIcon} alt={'wallet connect logo'} />
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''} />
+          <img src={CoinbaseWalletIcon} alt={'coinbase wallet logo'} />
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''} />
+          <img src={FortmaticIcon} alt={'fortmatic logo'} />
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <>
           <IconWrapper size={16}>
-            <img src={PortisIcon} alt={''} />
+            <img src={PortisIcon} alt={'portis logo'} />
             <MainWalletAction
               onClick={() => {
                 portis.portis.showPortis()
@@ -282,15 +282,12 @@ export default function AccountDetails({
         </>
       )
     }
+    return null
   }
 
-  const clearAllTransactionsCallback = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault()
-      dispatch(clearAllTransactions({ chainId }))
-    },
-    [dispatch, chainId]
-  )
+  const clearAllTransactionsCallback = useCallback(() => {
+    if (chainId) dispatch(clearAllTransactions({ chainId }))
+  }, [dispatch, chainId])
 
   return (
     <>
@@ -338,7 +335,7 @@ export default function AccountDetails({
                     <>
                       <div>
                         {getStatusIcon()}
-                        <p> {shortenAddress(account)}</p>
+                        <p> {account && shortenAddress(account)}</p>
                       </div>
                     </>
                   )}
@@ -349,17 +346,21 @@ export default function AccountDetails({
                   <>
                     <AccountControl>
                       <div>
-                        <Copy toCopy={account}>
-                          <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                        </Copy>
-                        <AddressLink
-                          hasENS={!!ENSName}
-                          isENS={true}
-                          href={getEtherscanLink(chainId, ENSName, 'address')}
-                        >
-                          <LinkIcon size={16} />
-                          <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
-                        </AddressLink>
+                        {account && (
+                          <Copy toCopy={account}>
+                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                          </Copy>
+                        )}
+                        {chainId && account && (
+                          <AddressLink
+                            hasENS={!!ENSName}
+                            isENS={true}
+                            href={chainId && getEtherscanLink(chainId, ENSName, 'address')}
+                          >
+                            <LinkIcon size={16} />
+                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                          </AddressLink>
+                        )}
                       </div>
                     </AccountControl>
                   </>
@@ -367,22 +368,25 @@ export default function AccountDetails({
                   <>
                     <AccountControl>
                       <div>
-                        <Copy toCopy={account}>
-                          <span style={{ marginLeft: '4px' }}>Copy Address</span>
-                        </Copy>
-                        <AddressLink
-                          hasENS={!!ENSName}
-                          isENS={false}
-                          href={getEtherscanLink(chainId, account, 'address')}
-                        >
-                          <LinkIcon size={16} />
-                          <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
-                        </AddressLink>
+                        {account && (
+                          <Copy toCopy={account}>
+                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                          </Copy>
+                        )}
+                        {chainId && account && (
+                          <AddressLink
+                            hasENS={!!ENSName}
+                            isENS={false}
+                            href={getEtherscanLink(chainId, account, 'address')}
+                          >
+                            <LinkIcon size={16} />
+                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                          </AddressLink>
+                        )}
                       </div>
                     </AccountControl>
                   </>
                 )}
-                {/* {formatConnectorName()} */}
               </AccountGroupingRow>
             </InfoCard>
           </YourAccount>

src/components/AddressInputPanel/index.tsx

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

src/components/Blocklist/index.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode, useMemo } from 'react'
+import { BLOCKED_ADDRESSES } from '../../constants'
+import { useActiveWeb3React } from '../../hooks'
+
+export default function Blocklist({ children }: { children: ReactNode }) {
+  const { account } = useActiveWeb3React()
+  const blocked: boolean = useMemo(() => Boolean(account && BLOCKED_ADDRESSES.indexOf(account) !== -1), [account])
+  if (blocked) {
+    return <div>Blocked address</div>
+  }
+  return <>{children}</>
+}

src/components/Button/index.tsx

@@ -10,13 +10,13 @@ const Base = styled(RebassButton)<{
   padding?: string
   width?: string
   borderRadius?: string
-  altDisbaledStyle?: boolean
+  altDisabledStyle?: boolean
 }>`
   padding: ${({ padding }) => (padding ? padding : '18px')};
   width: ${({ width }) => (width ? width : '100%')};
   font-weight: 500;
   text-align: center;
-  border-radius: 20px;
+  border-radius: 12px;
   border-radius: ${({ borderRadius }) => borderRadius && borderRadius};
   outline: none;
   border: 1px solid transparent;
@@ -27,6 +27,8 @@ const Base = styled(RebassButton)<{
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
   &:disabled {
     cursor: auto;
   }
@@ -51,12 +53,13 @@ export const ButtonPrimary = styled(Base)`
     background-color: ${({ theme }) => darken(0.1, theme.primary1)};
   }
   &:disabled {
-    background-color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? theme.primary1 : theme.bg3)};
-    color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? 'white' : theme.text3)};
+    background-color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? theme.primary1 : theme.bg3)};
+    color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? 'white' : theme.text3)};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
     outline: none;
+    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
   }
 `
 
@@ -107,28 +110,31 @@ export const ButtonGray = styled(Base)`
 `
 
 export const ButtonSecondary = styled(Base)`
-  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.primaryText1};
+  border: 1px solid ${({ theme }) => theme.primary4};
+  color: ${({ theme }) => theme.primary1};
+  background-color: transparent;
   font-size: 16px;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: ${({ padding }) => (padding ? padding : '10px')};
 
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    background-color: ${({ theme }) => theme.primary4};
+    border: 1px solid ${({ theme }) => theme.primary3};
   }
   &:hover {
-    background-color: ${({ theme }) => theme.primary4};
+    border: 1px solid ${({ theme }) => theme.primary3};
   }
   &:active {
     box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
-    background-color: ${({ theme }) => theme.primary4};
+    border: 1px solid ${({ theme }) => theme.primary3};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.primary5};
     opacity: 50%;
     cursor: auto;
   }
+  a:hover {
+    text-decoration: none;
+  }
 `
 
 export const ButtonPink = styled(Base)`
@@ -153,6 +159,26 @@ export const ButtonPink = styled(Base)`
   }
 `
 
+export const ButtonUNIGradient = styled(ButtonPrimary)`
+  color: white;
+  padding: 4px 8px;
+  height: 36px;
+  font-weight: 500;
+  background-color: ${({ theme }) => theme.bg3};
+  background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
+  width: fit-content;
+  position: relative;
+  cursor: pointer;
+  border: none;
+  white-space: no-wrap;
+  :hover {
+    opacity: 0.8;
+  }
+  :active {
+    opacity: 0.9;
+  }
+`
+
 export const ButtonOutlined = styled(Base)`
   border: 1px solid ${({ theme }) => theme.bg2};
   background-color: transparent;
@@ -181,13 +207,13 @@ export const ButtonEmpty = styled(Base)`
   align-items: center;
 
   &:focus {
-    background-color: ${({ theme }) => theme.advancedBG};
+    text-decoration: underline;
   }
   &:hover {
-    background-color: ${({ theme }) => theme.advancedBG};
+    text-decoration: underline;
   }
   &:active {
-    background-color: ${({ theme }) => theme.advancedBG};
+    text-decoration: underline;
   }
   &:disabled {
     opacity: 50%;
@@ -251,11 +277,15 @@ const ButtonErrorStyle = styled(Base)`
   }
 `
 
-export function ButtonConfirmed({ confirmed, ...rest }: { confirmed?: boolean } & ButtonProps) {
+export function ButtonConfirmed({
+  confirmed,
+  altDisabledStyle,
+  ...rest
+}: { confirmed?: boolean; altDisabledStyle?: boolean } & ButtonProps) {
   if (confirmed) {
     return <ButtonConfirmedStyle {...rest} />
   } else {
-    return <ButtonPrimary {...rest} />
+    return <ButtonPrimary {...rest} altDisabledStyle={altDisabledStyle} />
   }
 }
 

src/components/Card/index.tsx

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

src/components/Confetti/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import ReactConfetti from 'react-confetti'
+import { useWindowSize } from '../../hooks/useWindowSize'
+
+// eslint-disable-next-line react/prop-types
+export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {
+  const { width, height } = useWindowSize()
+
+  const _variant = variant ? variant : height && width && height > 1.5 * width ? 'bottom' : variant
+
+  return start && width && height ? (
+    <ReactConfetti
+      style={{ zIndex: 1401 }}
+      numberOfPieces={400}
+      recycle={false}
+      run={true}
+      width={width}
+      height={height}
+      confettiSource={{
+        h: height,
+        w: width,
+        x: 0,
+        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5
+      }}
+      initialVelocityX={15}
+      initialVelocityY={30}
+      gravity={0.45}
+      tweenDuration={100}
+      wind={0.05}
+    />
+  ) : null
+}

src/components/ConfirmationModal/index.tsx

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

src/components/CurrencyInputPanel/index.tsx

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

src/components/CurrencyLogo/index.tsx

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

src/components/DoubleLogo/index.tsx

@@ -22,7 +22,7 @@ const HigherLogo = styled(CurrencyLogo)`
 `
 const CoveredLogo = styled(CurrencyLogo)<{ sizeraw: number }>`
   position: absolute;
-  left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
+  left: ${({ sizeraw }) => '-' + (sizeraw / 2).toString() + 'px'} !important;
 `
 
 export default function DoubleCurrencyLogo({

src/components/FormattedCurrencyAmount/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { CurrencyAmount, Fraction, JSBI } from '@uniswap/sdk'
+
+const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
+
+export default function FormattedCurrencyAmount({
+  currencyAmount,
+  significantDigits = 4
+}: {
+  currencyAmount: CurrencyAmount
+  significantDigits?: number
+}) {
+  return (
+    <>
+      {currencyAmount.equalTo(JSBI.BigInt(0))
+        ? '0'
+        : currencyAmount.greaterThan(CURRENCY_AMOUNT_MIN)
+        ? currencyAmount.toSignificant(significantDigits)
+        : `<${CURRENCY_AMOUNT_MIN.toSignificant(1)}`}
+    </>
+  )
+}

src/components/Header/Polling.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { TYPE, ExternalLink } from '../../theme'
+
+import { useBlockNumber } from '../../state/application/hooks'
+import { getEtherscanLink } from '../../utils'
+import { useActiveWeb3React } from '../../hooks'
+
+const StyledPolling = styled.div`
+  position: fixed;
+  display: flex;
+  right: 0;
+  bottom: 0;
+  padding: 1rem;
+  color: white;
+  transition: opacity 0.25s ease;
+  color: ${({ theme }) => theme.green1};
+  :hover {
+    opacity: 1;
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    display: none;
+  `}
+`
+const StyledPollingDot = styled.div`
+  width: 8px;
+  height: 8px;
+  min-height: 8px;
+  min-width: 8px;
+  margin-left: 0.5rem;
+  margin-top: 3px;
+  border-radius: 50%;
+  position: relative;
+  background-color: ${({ theme }) => theme.green1};
+`
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const Spinner = styled.div`
+  animation: ${rotate360} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+  transform: translateZ(0);
+
+  border-top: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-left: 2px solid ${({ theme }) => theme.green1};
+  background: transparent;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  position: relative;
+
+  left: -3px;
+  top: -3px;
+`
+
+export default function Polling() {
+  const { chainId } = useActiveWeb3React()
+
+  const blockNumber = useBlockNumber()
+
+  const [isMounted, setIsMounted] = useState(true)
+
+  useEffect(
+    () => {
+      const timer1 = setTimeout(() => setIsMounted(true), 1000)
+
+      // this will clear Timeout when component unmount like in willComponentUnmount
+      return () => {
+        setIsMounted(false)
+        clearTimeout(timer1)
+      }
+    },
+    [blockNumber] //useEffect will run only one time
+    //if you pass a value to array, like this [data] than clearTimeout will run every time this value changes (useEffect re-run)
+  )
+
+  return (
+    <ExternalLink href={chainId && blockNumber ? getEtherscanLink(chainId, blockNumber.toString(), 'block') : ''}>
+      <StyledPolling>
+        <TYPE.small style={{ opacity: isMounted ? '0.2' : '0.6' }}>{blockNumber}</TYPE.small>
+        <StyledPollingDot>{!isMounted && <Spinner />}</StyledPollingDot>
+      </StyledPolling>
+    </ExternalLink>
+  )
+}

src/components/Header/URLWarning.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { AlertTriangle, X } from 'react-feather'
+import { useURLWarningToggle, useURLWarningVisible } from '../../state/user/hooks'
+import { isMobile } from 'react-device-detect'
+
+const PhishAlert = styled.div<{ isActive: any }>`
+  width: 100%;
+  padding: 6px 6px;
+  background-color: ${({ theme }) => theme.blue1};
+  color: white;
+  font-size: 11px;
+  justify-content: space-between;
+  align-items: center;
+  display: ${({ isActive }) => (isActive ? 'flex' : 'none')};
+`
+
+export const StyledClose = styled(X)`
+  :hover {
+    cursor: pointer;
+  }
+`
+
+export default function URLWarning() {
+  const toggleURLWarning = useURLWarningToggle()
+  const showURLWarning = useURLWarningVisible()
+
+  return isMobile ? (
+    <PhishAlert isActive={showURLWarning}>
+      <div style={{ display: 'flex' }}>
+        <AlertTriangle style={{ marginRight: 6 }} size={12} /> Make sure the URL is
+        <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code>
+      </div>
+      <StyledClose size={12} onClick={toggleURLWarning} />
+    </PhishAlert>
+  ) : window.location.hostname === 'app.uniswap.org' ? (
+    <PhishAlert isActive={showURLWarning}>
+      <div style={{ display: 'flex' }}>
+        <AlertTriangle style={{ marginRight: 6 }} size={12} /> Always make sure the URL is
+        <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code> - bookmark it
+        to be safe.
+      </div>
+      <StyledClose size={12} onClick={toggleURLWarning} />
+    </PhishAlert>
+  ) : null
+}

src/components/Header/UniBalanceContent.tsx

@@ -0,0 +1,127 @@
+import { ChainId, TokenAmount } from '@uniswap/sdk'
+import React, { useMemo } from 'react'
+import { X } from 'react-feather'
+import styled from 'styled-components'
+import tokenLogo from '../../assets/images/token-logo.png'
+import { UNI } from '../../constants'
+import { useTotalSupply } from '../../data/TotalSupply'
+import { useActiveWeb3React } from '../../hooks'
+import { useMerkleDistributorContract } from '../../hooks/useContract'
+import useCurrentBlockTimestamp from '../../hooks/useCurrentBlockTimestamp'
+import { useTotalUniEarned } from '../../state/stake/hooks'
+import { useAggregateUniBalance, useTokenBalance } from '../../state/wallet/hooks'
+import { ExternalLink, StyledInternalLink, TYPE, UniTokenAnimated } from '../../theme'
+import { computeUniCirculation } from '../../utils/computeUniCirculation'
+import useUSDCPrice from '../../utils/useUSDCPrice'
+import { AutoColumn } from '../Column'
+import { RowBetween } from '../Row'
+import { Break, CardBGImage, CardNoise, CardSection, DataCard } from '../earn/styled'
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+`
+
+const ModalUpper = styled(DataCard)`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #021d43 100%);
+  padding: 0.5rem;
+`
+
+const StyledClose = styled(X)`
+  position: absolute;
+  right: 16px;
+  top: 16px;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+
+/**
+ * Content for balance stats modal
+ */
+export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowUniBalanceModal: any }) {
+  const { account, chainId } = useActiveWeb3React()
+  const uni = chainId ? UNI[chainId] : undefined
+
+  const total = useAggregateUniBalance()
+  const uniBalance: TokenAmount | undefined = useTokenBalance(account ?? undefined, uni)
+  const uniToClaim: TokenAmount | undefined = useTotalUniEarned()
+
+  const totalSupply: TokenAmount | undefined = useTotalSupply(uni)
+  const uniPrice = useUSDCPrice(uni)
+  const blockTimestamp = useCurrentBlockTimestamp()
+  const unclaimedUni = useTokenBalance(useMerkleDistributorContract()?.address, uni)
+  const circulation: TokenAmount | undefined = useMemo(
+    () =>
+      blockTimestamp && uni && chainId === ChainId.MAINNET
+        ? computeUniCirculation(uni, blockTimestamp, unclaimedUni)
+        : totalSupply,
+    [blockTimestamp, chainId, totalSupply, unclaimedUni, uni]
+  )
+
+  return (
+    <ContentWrapper gap="lg">
+      <ModalUpper>
+        <CardBGImage />
+        <CardNoise />
+        <CardSection gap="md">
+          <RowBetween>
+            <TYPE.white color="white">Your UNI Breakdown</TYPE.white>
+            <StyledClose stroke="white" onClick={() => setShowUniBalanceModal(false)} />
+          </RowBetween>
+        </CardSection>
+        <Break />
+        {account && (
+          <>
+            <CardSection gap="sm">
+              <AutoColumn gap="md" justify="center">
+                <UniTokenAnimated width="48px" src={tokenLogo} />{' '}
+                <TYPE.white fontSize={48} fontWeight={600} color="white">
+                  {total?.toFixed(2, { groupSeparator: ',' })}
+                </TYPE.white>
+              </AutoColumn>
+              <AutoColumn gap="md">
+                <RowBetween>
+                  <TYPE.white color="white">Balance:</TYPE.white>
+                  <TYPE.white color="white">{uniBalance?.toFixed(2, { groupSeparator: ',' })}</TYPE.white>
+                </RowBetween>
+                <RowBetween>
+                  <TYPE.white color="white">Unclaimed:</TYPE.white>
+                  <TYPE.white color="white">
+                    {uniToClaim?.toFixed(4, { groupSeparator: ',' })}{' '}
+                    {uniToClaim && uniToClaim.greaterThan('0') && (
+                      <StyledInternalLink onClick={() => setShowUniBalanceModal(false)} to="/uni">
+                        (claim)
+                      </StyledInternalLink>
+                    )}
+                  </TYPE.white>
+                </RowBetween>
+              </AutoColumn>
+            </CardSection>
+            <Break />
+          </>
+        )}
+        <CardSection gap="sm">
+          <AutoColumn gap="md">
+            <RowBetween>
+              <TYPE.white color="white">UNI price:</TYPE.white>
+              <TYPE.white color="white">${uniPrice?.toFixed(2) ?? '-'}</TYPE.white>
+            </RowBetween>
+            <RowBetween>
+              <TYPE.white color="white">UNI in circulation:</TYPE.white>
+              <TYPE.white color="white">{circulation?.toFixed(0, { groupSeparator: ',' })}</TYPE.white>
+            </RowBetween>
+            <RowBetween>
+              <TYPE.white color="white">Total Supply</TYPE.white>
+              <TYPE.white color="white">{totalSupply?.toFixed(0, { groupSeparator: ',' })}</TYPE.white>
+            </RowBetween>
+            {uni && uni.chainId === ChainId.MAINNET ? (
+              <ExternalLink href={`https://uniswap.info/token/${uni.address}`}>View UNI Analytics</ExternalLink>
+            ) : null}
+          </AutoColumn>
+        </CardSection>
+      </ModalUpper>
+    </ContentWrapper>
+  )
+}

src/components/Header/VersionSwitch.tsx

@@ -1,76 +0,0 @@
-import { stringify } from 'qs'
-import React, { useCallback, useMemo } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import styled from 'styled-components'
-import useParsedQueryString from '../../hooks/useParsedQueryString'
-import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
-import { MouseoverTooltip } from '../Tooltip'
-
-const VersionLabel = styled.span<{ enabled: boolean }>`
-  padding: 0.35rem 0.6rem;
-  border-radius: 12px;
-  background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-  color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
-  font-size: 1rem;
-  font-weight: ${({ enabled }) => (enabled ? '500' : '400')};
-  :hover {
-    user-select: ${({ enabled }) => (enabled ? 'none' : 'initial')};
-    background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
-    color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
-  }
-`
-
-interface VersionToggleProps extends React.ComponentProps<typeof Link> {
-  enabled: boolean
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const VersionToggle = styled(({ enabled, ...rest }: VersionToggleProps) => <Link {...rest} />)<VersionToggleProps>`
-  border-radius: 12px;
-  opacity: ${({ enabled }) => (enabled ? 1 : 0.5)};
-  cursor: ${({ enabled }) => (enabled ? 'pointer' : 'default')};
-  background: ${({ theme }) => theme.bg3};
-  color: ${({ theme }) => theme.primary1};
-  display: flex;
-  width: fit-content;
-  margin-left: 0.5rem;
-  text-decoration: none;
-  :hover {
-    text-decoration: none;
-  }
-`
-
-export default function VersionSwitch() {
-  const version = useToggledVersion()
-  const location = useLocation()
-  const query = useParsedQueryString()
-  const versionSwitchAvailable = location.pathname === '/swap' || location.pathname === '/send'
-
-  const toggleDest = useMemo(() => {
-    return versionSwitchAvailable
-      ? {
-          ...location,
-          search: `?${stringify({ ...query, use: version === Version.v1 ? undefined : Version.v1 })}`
-        }
-      : location
-  }, [location, query, version, versionSwitchAvailable])
-
-  const handleClick = useCallback(
-    e => {
-      if (!versionSwitchAvailable) e.preventDefault()
-    },
-    [versionSwitchAvailable]
-  )
-
-  const toggle = (
-    <VersionToggle enabled={versionSwitchAvailable} to={toggleDest} onClick={handleClick}>
-      <VersionLabel enabled={version === Version.v2 || !versionSwitchAvailable}>V2</VersionLabel>
-      <VersionLabel enabled={version === Version.v1 && versionSwitchAvailable}>V1</VersionLabel>
-    </VersionToggle>
-  )
-  return versionSwitchAvailable ? (
-    toggle
-  ) : (
-    <MouseoverTooltip text="This page is only compatible with Uniswap V2.">{toggle}</MouseoverTooltip>
-  )
-}

src/components/Header/index.tsx

@@ -1,74 +1,115 @@
-import { ChainId } from '@uniswap/sdk'
-import React from 'react'
-import { isMobile } from 'react-device-detect'
+import { ChainId, TokenAmount } from '@uniswap/sdk'
+import React, { useState } from 'react'
 import { Text } from 'rebass'
+import { NavLink } from 'react-router-dom'
+import { darken } from 'polished'
+import { useTranslation } from 'react-i18next'
 
 import styled from 'styled-components'
 
 import Logo from '../../assets/svg/logo.svg'
 import LogoDark from '../../assets/svg/logo_white.svg'
-import Wordmark from '../../assets/svg/wordmark.svg'
-import WordmarkDark from '../../assets/svg/wordmark_white.svg'
 import { useActiveWeb3React } from '../../hooks'
 import { useDarkModeManager } from '../../state/user/hooks'
-import { useETHBalances } from '../../state/wallet/hooks'
+import { useETHBalances, useAggregateUniBalance } from '../../state/wallet/hooks'
+import { CardNoise } from '../earn/styled'
+import { CountUp } from 'use-count-up'
+import { TYPE, ExternalLink } from '../../theme'
 
 import { YellowCard } from '../Card'
 import Settings from '../Settings'
 import Menu from '../Menu'
 
-import Row, { RowBetween } from '../Row'
+import Row, { RowFixed } from '../Row'
 import Web3Status from '../Web3Status'
-import VersionSwitch from './VersionSwitch'
+import ClaimModal from '../claim/ClaimModal'
+import { useToggleSelfClaimModal, useShowClaimPopup } from '../../state/application/hooks'
+import { useUserHasAvailableClaim } from '../../state/claim/hooks'
+import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
+import { Dots } from '../swap/styleds'
+import Modal from '../Modal'
+import UniBalanceContent from './UniBalanceContent'
+import usePrevious from '../../hooks/usePrevious'
 
 const HeaderFrame = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 120px;
   align-items: center;
   justify-content: space-between;
-  flex-direction: column;
+  align-items: center;
+  flex-direction: row;
   width: 100%;
   top: 0;
-  position: absolute;
+  position: relative;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 1rem;
   z-index: 2;
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    padding: 12px 0 0 0;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    grid-template-columns: 1fr;
+    padding: 0 1rem;
     width: calc(100%);
     position: relative;
   `};
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+        padding: 0.5rem 1rem;
+  `}
+`
+
+const HeaderControls = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-self: flex-end;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    flex-direction: row;
+    justify-content: space-between;
+    justify-self: center;
+    width: 100%;
+    max-width: 960px;
+    padding: 1rem;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    z-index: 99;
+    height: 72px;
+    border-radius: 12px 12px 0 0;
+    background-color: ${({ theme }) => theme.bg1};
+  `};
 `
 
 const HeaderElement = styled.div`
   display: flex;
   align-items: center;
+  gap: 8px;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+   flex-direction: row-reverse;
+    align-items: center;
+  `};
 `
 
 const HeaderElementWrap = styled.div`
   display: flex;
   align-items: center;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    margin-top: 0.5rem;
-`};
 `
 
-const Title = styled.a`
-  display: flex;
-  align-items: center;
-  pointer-events: auto;
-
-  :hover {
-    cursor: pointer;
-  }
-`
-
-const TitleText = styled(Row)`
-  width: fit-content;
-  white-space: nowrap;
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    display: none;
+const HeaderRow = styled(RowFixed)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+   width: 100%;
   `};
 `
 
+const HeaderLinks = styled(Row)`
+  justify-content: center;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    padding: 1rem 0 1rem 1rem;
+    justify-content: flex-end;
+`};
+`
+
 const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
@@ -77,46 +118,52 @@ const AccountElement = styled.div<{ active: boolean }>`
   border-radius: 12px;
   white-space: nowrap;
   width: 100%;
+  cursor: pointer;
 
   :focus {
     border: 1px solid blue;
   }
 `
 
-const TestnetWrapper = styled.div`
-  white-space: nowrap;
-  width: fit-content;
-  margin-left: 10px;
-  pointer-events: auto;
+const UNIAmount = styled(AccountElement)`
+  color: white;
+  padding: 4px 8px;
+  height: 36px;
+  font-weight: 500;
+  background-color: ${({ theme }) => theme.bg3};
+  background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
 `
 
-const NetworkCard = styled(YellowCard)`
+const UNIWrapper = styled.span`
   width: fit-content;
-  margin-right: 10px;
-  border-radius: 12px;
-  padding: 8px 12px;
-`
+  position: relative;
+  cursor: pointer;
 
-const UniIcon = styled.div`
-  transition: transform 0.3s ease;
   :hover {
-    transform: rotate(-5deg);
+    opacity: 0.8;
   }
+
+  :active {
+    opacity: 0.9;
+  }
+`
+
+const HideSmall = styled.span`
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    img { 
-      width: 4.5rem;
-    }
+    display: none;
   `};
 `
 
-const HeaderControls = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
+const NetworkCard = styled(YellowCard)`
+  border-radius: 12px;
+  padding: 8px 12px;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    flex-direction: column;
-    align-items: flex-end;
+    margin: 0;
+    margin-right: 0.5rem;
+    width: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
   `};
 `
 
@@ -126,8 +173,88 @@ const BalanceText = styled(Text)`
   `};
 `
 
-const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
-  [ChainId.MAINNET]: null,
+const Title = styled.a`
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  justify-self: flex-start;
+  margin-right: 12px;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    justify-self: center;
+  `};
+  :hover {
+    cursor: pointer;
+  }
+`
+
+const UniIcon = styled.div`
+  transition: transform 0.3s ease;
+  :hover {
+    transform: rotate(-5deg);
+  }
+`
+
+const activeClassName = 'ACTIVE'
+
+const StyledNavLink = styled(NavLink).attrs({
+  activeClassName
+})`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: left;
+  border-radius: 3rem;
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.text2};
+  font-size: 1rem;
+  width: fit-content;
+  margin: 0 12px;
+  font-weight: 500;
+
+  &.${activeClassName} {
+    border-radius: 12px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.text1};
+  }
+
+  :hover,
+  :focus {
+    color: ${({ theme }) => darken(0.1, theme.text1)};
+  }
+`
+
+const StyledExternalLink = styled(ExternalLink).attrs({
+  activeClassName
+})<{ isActive?: boolean }>`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: left;
+  border-radius: 3rem;
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.text2};
+  font-size: 1rem;
+  width: fit-content;
+  margin: 0 12px;
+  font-weight: 500;
+
+  &.${activeClassName} {
+    border-radius: 12px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.text1};
+  }
+
+  :hover,
+  :focus {
+    color: ${({ theme }) => darken(0.1, theme.text1)};
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+      display: none;
+`}
+`
+
+const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
   [ChainId.ROPSTEN]: 'Ropsten',
   [ChainId.GÖRLI]: 'Görli',
@@ -136,44 +263,122 @@ const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
 
 export default function Header() {
   const { account, chainId } = useActiveWeb3React()
+  const { t } = useTranslation()
 
-  const userEthBalance = useETHBalances([account])[account]
+  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
   const [isDark] = useDarkModeManager()
 
+  const toggleClaimModal = useToggleSelfClaimModal()
+
+  const availableClaim: boolean = useUserHasAvailableClaim(account)
+
+  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
+
+  const aggregateBalance: TokenAmount | undefined = useAggregateUniBalance()
+
+  const [showUniBalanceModal, setShowUniBalanceModal] = useState(false)
+  const showClaimPopup = useShowClaimPopup()
+
+  const countUpValue = aggregateBalance?.toFixed(0) ?? '0'
+  const countUpValuePrevious = usePrevious(countUpValue) ?? '0'
+
   return (
     <HeaderFrame>
-      <RowBetween style={{ alignItems: 'flex-start' }} padding="1rem 1rem 0 1rem">
+      <ClaimModal />
+      <Modal isOpen={showUniBalanceModal} onDismiss={() => setShowUniBalanceModal(false)}>
+        <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
+      </Modal>
+      <HeaderRow>
+        <Title href=".">
+          <UniIcon>
+            <img width={'24px'} src={isDark ? LogoDark : Logo} alt="logo" />
+          </UniIcon>
+        </Title>
+        <HeaderLinks>
+          <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
+            {t('swap')}
+          </StyledNavLink>
+          <StyledNavLink
+            id={`pool-nav-link`}
+            to={'/pool'}
+            isActive={(match, { pathname }) =>
+              Boolean(match) ||
+              pathname.startsWith('/add') ||
+              pathname.startsWith('/remove') ||
+              pathname.startsWith('/create') ||
+              pathname.startsWith('/find')
+            }
+          >
+            {t('pool')}
+          </StyledNavLink>
+          <StyledNavLink id={`stake-nav-link`} to={'/uni'}>
+            UNI
+          </StyledNavLink>
+          <StyledNavLink id={`stake-nav-link`} to={'/vote'}>
+            Vote
+          </StyledNavLink>
+          <StyledExternalLink id={`stake-nav-link`} href={'https://uniswap.info'}>
+            Charts <span style={{ fontSize: '11px' }}>↗</span>
+          </StyledExternalLink>
+        </HeaderLinks>
+      </HeaderRow>
+      <HeaderControls>
         <HeaderElement>
-          <Title href=".">
-            <UniIcon>
-              <img src={isDark ? LogoDark : Logo} alt="logo" />
-            </UniIcon>
-            <TitleText>
-              <img style={{ marginLeft: '4px', marginTop: '4px' }} src={isDark ? WordmarkDark : Wordmark} alt="logo" />
-            </TitleText>
-          </Title>
+          <HideSmall>
+            {chainId && NETWORK_LABELS[chainId] && (
+              <NetworkCard title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</NetworkCard>
+            )}
+          </HideSmall>
+          {availableClaim && !showClaimPopup && (
+            <UNIWrapper onClick={toggleClaimModal}>
+              <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
+                <TYPE.white padding="0 2px">
+                  {claimTxn && !claimTxn?.receipt ? <Dots>Claiming UNI</Dots> : 'Claim UNI'}
+                </TYPE.white>
+              </UNIAmount>
+              <CardNoise />
+            </UNIWrapper>
+          )}
+          {!availableClaim && aggregateBalance && (
+            <UNIWrapper onClick={() => setShowUniBalanceModal(true)}>
+              <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
+                {account && (
+                  <HideSmall>
+                    <TYPE.white
+                      style={{
+                        paddingRight: '.4rem'
+                      }}
+                    >
+                      <CountUp
+                        key={countUpValue}
+                        isCounting
+                        start={parseFloat(countUpValuePrevious)}
+                        end={parseFloat(countUpValue)}
+                        thousandsSeparator={','}
+                        duration={1}
+                      />
+                    </TYPE.white>
+                  </HideSmall>
+                )}
+                UNI
+              </UNIAmount>
+              <CardNoise />
+            </UNIWrapper>
+          )}
+          <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
+            {account && userEthBalance ? (
+              <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
+                {userEthBalance?.toSignificant(4)} ETH
+              </BalanceText>
+            ) : null}
+            <Web3Status />
+          </AccountElement>
         </HeaderElement>
-        <HeaderControls>
-          <HeaderElement>
-            <TestnetWrapper>
-              {!isMobile && NETWORK_LABELS[chainId] && <NetworkCard>{NETWORK_LABELS[chainId]}</NetworkCard>}
-            </TestnetWrapper>
-            <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
-              {account && userEthBalance ? (
-                <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
-                  {userEthBalance?.toSignificant(4)} ETH
-                </BalanceText>
-              ) : null}
-              <Web3Status />
-            </AccountElement>
-          </HeaderElement>
-          <HeaderElementWrap>
-            <VersionSwitch />
-            <Settings />
-            <Menu />
-          </HeaderElementWrap>
-        </HeaderControls>
-      </RowBetween>
+        <HeaderElementWrap>
+          <Settings />
+          <Menu />
+        </HeaderElementWrap>
+      </HeaderControls>
     </HeaderFrame>
   )
 }

src/components/Identicon/index.tsx

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

src/components/ListLogo/index.tsx

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

src/components/Loader/index.tsx

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

src/components/Logo/index.tsx

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

src/components/Menu/index.tsx

@@ -1,10 +1,14 @@
-import React, { useRef, useEffect } from 'react'
-import { Info, BookOpen, Code, PieChart, MessageCircle } from 'react-feather'
+import React, { useRef } from 'react'
+import { BookOpen, Code, Info, MessageCircle, PieChart } from 'react-feather'
 import styled from 'styled-components'
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
-import useToggle from '../../hooks/useToggle'
+import { useActiveWeb3React } from '../../hooks'
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useToggleModal } from '../../state/application/hooks'
 
 import { ExternalLink } from '../../theme'
+import { ButtonPrimary } from '../Button'
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
@@ -52,15 +56,19 @@ const MenuFlyout = styled.span`
   background-color: ${({ theme }) => theme.bg3};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 0.5rem;
+  border-radius: 12px;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
   font-size: 1rem;
   position: absolute;
-  top: 3rem;
+  top: 4rem;
   right: 0rem;
   z-index: 100;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    top: -17.25rem;
+  `};
 `
 
 const MenuItem = styled(ExternalLink)`
@@ -80,33 +88,21 @@ const MenuItem = styled(ExternalLink)`
 const CODE_LINK = 'https://github.com/Uniswap/uniswap-interface'
 
 export default function Menu() {
+  const { account } = useActiveWeb3React()
+
   const node = useRef<HTMLDivElement>()
-  const [open, toggle] = useToggle(false)
-
-  useEffect(() => {
-    const handleClickOutside = e => {
-      if (node.current?.contains(e.target) ?? false) {
-        return
-      }
-      toggle()
-    }
-
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside)
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [open, toggle])
+  const open = useModalOpen(ApplicationModal.MENU)
+  const toggle = useToggleModal(ApplicationModal.MENU)
+  useOnClickOutside(node, open ? toggle : undefined)
+  const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
 
   return (
-    <StyledMenu ref={node}>
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
       <StyledMenuButton onClick={toggle}>
         <StyledMenuIcon />
       </StyledMenuButton>
+
       {open && (
         <MenuFlyout>
           <MenuItem id="link" href="https://uniswap.org/">
@@ -129,6 +125,11 @@ export default function Menu() {
             <PieChart size={14} />
             Analytics
           </MenuItem>
+          {account && (
+            <ButtonPrimary onClick={openClaimModal} padding="8px 16px" width="100%" borderRadius="12px" mt="0.5rem">
+              Claim UNI
+            </ButtonPrimary>
+          )}
         </MenuFlyout>
       )}
     </StyledMenu>

src/components/Modal/index.tsx

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

src/components/ModalViews/index.tsx

@@ -0,0 +1,72 @@
+import React, { useContext } from 'react'
+import { useActiveWeb3React } from '../../hooks'
+
+import { AutoColumn, ColumnCenter } from '../Column'
+import styled, { ThemeContext } from 'styled-components'
+import { RowBetween } from '../Row'
+import { TYPE, CloseIcon, CustomLightSpinner } from '../../theme'
+import { ArrowUpCircle } from 'react-feather'
+
+import Circle from '../../assets/images/blue-loader.svg'
+import { getEtherscanLink } from '../../utils'
+import { ExternalLink } from '../../theme/components'
+
+const ConfirmOrLoadingWrapper = styled.div`
+  width: 100%;
+  padding: 24px;
+`
+
+const ConfirmedIcon = styled(ColumnCenter)`
+  padding: 60px 0;
+`
+
+export function LoadingView({ children, onDismiss }: { children: any; onDismiss: () => void }) {
+  return (
+    <ConfirmOrLoadingWrapper>
+      <RowBetween>
+        <div />
+        <CloseIcon onClick={onDismiss} />
+      </RowBetween>
+      <ConfirmedIcon>
+        <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
+      </ConfirmedIcon>
+      <AutoColumn gap="100px" justify={'center'}>
+        {children}
+        <TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
+      </AutoColumn>
+    </ConfirmOrLoadingWrapper>
+  )
+}
+
+export function SubmittedView({
+  children,
+  onDismiss,
+  hash
+}: {
+  children: any
+  onDismiss: () => void
+  hash: string | undefined
+}) {
+  const theme = useContext(ThemeContext)
+  const { chainId } = useActiveWeb3React()
+
+  return (
+    <ConfirmOrLoadingWrapper>
+      <RowBetween>
+        <div />
+        <CloseIcon onClick={onDismiss} />
+      </RowBetween>
+      <ConfirmedIcon>
+        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
+      </ConfirmedIcon>
+      <AutoColumn gap="100px" justify={'center'}>
+        {children}
+        {chainId && hash && (
+          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
+            <TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
+          </ExternalLink>
+        )}
+      </AutoColumn>
+    </ConfirmOrLoadingWrapper>
+  )
+}

src/components/NavigationTabs/index.tsx

@@ -55,7 +55,7 @@ const StyledArrowLeft = styled(ArrowLeft)`
 export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
   const { t } = useTranslation()
   return (
-    <Tabs style={{ marginBottom: '20px' }}>
+    <Tabs style={{ marginBottom: '20px', display: 'none' }}>
       <StyledNavLink id={`swap-nav-link`} to={'/swap'} isActive={() => active === 'swap'}>
         {t('swap')}
       </StyledNavLink>
@@ -80,14 +80,14 @@ export function FindPoolTabs() {
   )
 }
 
-export function AddRemoveTabs({ adding }: { adding: boolean }) {
+export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating: boolean }) {
   return (
     <Tabs>
       <RowBetween style={{ padding: '1rem' }}>
         <HistoryLink to="/pool">
           <StyledArrowLeft />
         </HistoryLink>
-        <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>
+        <ActiveText>{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}</ActiveText>
         <QuestionHelper
           text={
             adding

src/components/NumericalInput/index.tsx

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

src/components/Popover/index.tsx

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

src/components/Popups/ClaimPopup.tsx

@@ -0,0 +1,113 @@
+import { TokenAmount } from '@uniswap/sdk'
+import React, { useEffect } from 'react'
+import { X } from 'react-feather'
+import styled, { keyframes } from 'styled-components'
+import tokenLogo from '../../assets/images/token-logo.png'
+import { ButtonPrimary } from '../../components/Button'
+import { useActiveWeb3React } from '../../hooks'
+import { ApplicationModal } from '../../state/application/actions'
+import {
+  useModalOpen,
+  useShowClaimPopup,
+  useToggleSelfClaimModal,
+  useToggleShowClaimPopup
+} from '../../state/application/hooks'
+
+import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
+import { TYPE } from '../../theme'
+import { AutoColumn } from '../Column'
+import { CardBGImage, CardNoise } from '../earn/styled'
+
+const StyledClaimPopup = styled(AutoColumn)`
+  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #021d43 100%);
+  border-radius: 20px;
+  padding: 1.5rem;
+  overflow: hidden;
+  position: relative;
+  max-width: 360px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+`
+
+const StyledClose = styled(X)`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+
+const rotate = keyframes`
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+
+  100% {
+    transform: perspective(1000px) rotateY(360deg);
+  }
+`
+
+const UniToken = styled.img`
+  animation: ${rotate} 5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+`
+
+export default function ClaimPopup() {
+  const { account } = useActiveWeb3React()
+
+  // dont store these in persisted state yet
+  const showClaimPopup: boolean = useShowClaimPopup()
+  const toggleShowClaimPopup = useToggleShowClaimPopup()
+
+  // toggle for showing this modal
+  const showClaimModal = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const toggleSelfClaimModal = useToggleSelfClaimModal()
+
+  // const userHasAvailableclaim = useUserHasAvailableClaim()
+  const userHasAvailableclaim: boolean = useUserHasAvailableClaim(account)
+  const unclaimedAmount: TokenAmount | undefined = useUserUnclaimedAmount(account)
+
+  // listen for available claim and show popup if needed
+  useEffect(() => {
+    if (userHasAvailableclaim) {
+      toggleShowClaimPopup()
+    }
+    // the toggleShowClaimPopup function changes every time the popup changes, so this will cause an infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userHasAvailableclaim])
+
+  return (
+    <>
+      {showClaimPopup && !showClaimModal && (
+        <StyledClaimPopup gap="md">
+          <CardBGImage />
+          <CardNoise />
+          <StyledClose stroke="white" onClick={toggleShowClaimPopup} />
+          <AutoColumn style={{ padding: '2rem 0', zIndex: 10 }} justify="center">
+            <UniToken width="48px" src={tokenLogo} />{' '}
+            <TYPE.white style={{ marginTop: '1rem' }} fontSize={36} fontWeight={600}>
+              {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+            </TYPE.white>
+            <TYPE.white style={{ paddingTop: '1.25rem', textAlign: 'center' }} fontWeight={600} color="white">
+              <span role="img" aria-label="party">
+                🎉
+              </span>{' '}
+              UNI has arrived{' '}
+              <span role="img" aria-label="party">
+                🎉
+              </span>
+            </TYPE.white>
+            <TYPE.subHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
+              {`Thanks for being part of the Uniswap community <3`}
+            </TYPE.subHeader>
+          </AutoColumn>
+          <AutoColumn style={{ zIndex: 10 }} justify="center">
+            <ButtonPrimary padding="8px" borderRadius="8px" width={'fit-content'} onClick={toggleSelfClaimModal}>
+              Claim your UNI tokens
+            </ButtonPrimary>
+          </AutoColumn>
+        </StyledClaimPopup>
+      )}
+    </>
+  )
+}

src/components/Popups/ListUpdatePopup.tsx

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

src/components/Popups/PopupItem.tsx

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

src/components/Popups/TransactionPopup.tsx

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

src/components/Popups/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useMediaLayout } from 'use-media'
 import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'
 import PopupItem from './PopupItem'
+import ClaimPopup from './ClaimPopup'
+import { useURLWarningVisible } from '../../state/user/hooks'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;
@@ -11,6 +12,11 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
   height: ${({ height }) => height};
   margin: ${({ height }) => (height ? '0 auto;' : 0)};
   margin-bottom: ${({ height }) => (height ? '20px' : 0)}};
+
+  display: none;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: block;
+  `};
 `
 
 const MobilePopupInner = styled.div`
@@ -25,12 +31,13 @@ const MobilePopupInner = styled.div`
   }
 `
 
-const FixedPopupColumn = styled(AutoColumn)`
-  position: absolute;
-  top: 112px;
+const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean }>`
+  position: fixed;
+  top: ${({ extraPadding }) => (extraPadding ? '108px' : '88px')};
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
+  z-index: 3;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
@@ -41,30 +48,26 @@ export default function Popups() {
   // get all popups
   const activePopups = useActivePopups()
 
-  // switch view settings on mobile
-  const isMobile = useMediaLayout({ maxWidth: '600px' })
+  const urlWarningActive = useURLWarningVisible()
 
-  if (!isMobile) {
-    return (
-      <FixedPopupColumn gap="20px">
+  return (
+    <>
+      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive}>
+        <ClaimPopup />
         {activePopups.map(item => (
-          <PopupItem key={item.key} content={item.content} popKey={item.key} />
+          <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
         ))}
       </FixedPopupColumn>
-    )
-  }
-  //mobile
-  else
-    return (
       <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
         <MobilePopupInner>
           {activePopups // reverse so new items up front
             .slice(0)
             .reverse()
             .map(item => (
-              <PopupItem key={item.key} content={item.content} popKey={item.key} />
+              <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
             ))}
         </MobilePopupInner>
       </MobilePopupWrapper>
-    )
+    </>
+  )
 }

src/components/PositionCard/V1.tsx

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

src/components/PositionCard/index.tsx

@@ -1,4 +1,4 @@
-import { JSBI, Pair, Percent } from '@uniswap/sdk'
+import { JSBI, Pair, Percent, TokenAmount } from '@uniswap/sdk'
 import { darken } from 'polished'
 import React, { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
@@ -9,33 +9,46 @@ import { useTotalSupply } from '../../data/TotalSupply'
 
 import { useActiveWeb3React } from '../../hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
-import { ExternalLink } from '../../theme'
+import { ExternalLink, TYPE, HideExtraSmall, ExtraSmallOnly } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/wrappedCurrency'
-import { ButtonSecondary } from '../Button'
+import { ButtonPrimary, ButtonSecondary, ButtonEmpty, ButtonUNIGradient } from '../Button'
+import { transparentize } from 'polished'
+import { CardNoise } from '../earn/styled'
 
-import Card, { GreyCard } from '../Card'
+import { useColor } from '../../hooks/useColor'
+
+import Card, { GreyCard, LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { AutoRow, RowBetween, RowFixed } from '../Row'
+import { RowBetween, RowFixed, AutoRow } from '../Row'
 import { Dots } from '../swap/styleds'
+import { BIG_INT_ZERO } from '../../constants'
 
 export const FixedHeightRow = styled(RowBetween)`
   height: 24px;
 `
 
 export const HoverCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.bg2};
+  border: 1px solid transparent;
   :hover {
     border: 1px solid ${({ theme }) => darken(0.06, theme.bg2)};
   }
 `
+const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
+  border: none;
+  background: ${({ theme, bgColor }) =>
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
+  position: relative;
+  overflow: hidden;
+`
 
 interface PositionCardProps {
   pair: Pair
   showUnwrapped?: boolean
   border?: string
+  stakedBalance?: TokenAmount // optional balance to indicate that liquidity is deposited in mining pool
 }
 
 export function MinimalPositionCard({ pair, showUnwrapped = false, border }: PositionCardProps) {
@@ -46,9 +59,14 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
 
   const [showMore, setShowMore] = useState(false)
 
-  const userPoolBalance = useTokenBalance(account, pair.liquidityToken)
+  const userPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
   const totalPoolTokens = useTotalSupply(pair.liquidityToken)
 
+  const poolTokenPercentage =
+    !!userPoolBalance && !!totalPoolTokens && JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
+      ? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
+      : undefined
+
   const [token0Deposited, token1Deposited] =
     !!pair &&
     !!totalPoolTokens &&
@@ -63,7 +81,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
 
   return (
     <>
-      {userPoolBalance && (
+      {userPoolBalance && JSBI.greaterThan(userPoolBalance.raw, JSBI.BigInt(0)) ? (
         <GreyCard border={border}>
           <AutoColumn gap="12px">
             <FixedHeightRow>
@@ -88,12 +106,20 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
             </FixedHeightRow>
             <AutoColumn gap="4px">
               <FixedHeightRow>
-                <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                <Text fontSize={16} fontWeight={500}>
+                  Your pool share:
+                </Text>
+                <Text fontSize={16} fontWeight={500}>
+                  {poolTokenPercentage ? poolTokenPercentage.toFixed(6) + '%' : '-'}
+                </Text>
+              </FixedHeightRow>
+              <FixedHeightRow>
+                <Text fontSize={16} fontWeight={500}>
                   {currency0.symbol}:
                 </Text>
                 {token0Deposited ? (
                   <RowFixed>
-                    <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {token0Deposited?.toSignificant(6)}
                     </Text>
                   </RowFixed>
@@ -102,12 +128,12 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
                 )}
               </FixedHeightRow>
               <FixedHeightRow>
-                <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                <Text fontSize={16} fontWeight={500}>
                   {currency1.symbol}:
                 </Text>
                 {token1Deposited ? (
                   <RowFixed>
-                    <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {token1Deposited?.toSignificant(6)}
                     </Text>
                   </RowFixed>
@@ -118,12 +144,22 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
             </AutoColumn>
           </AutoColumn>
         </GreyCard>
+      ) : (
+        <LightCard>
+          <TYPE.subHeader style={{ textAlign: 'center' }}>
+            <span role="img" aria-label="wizard-icon">
+              ⭐️
+            </span>{' '}
+            By adding liquidity you&apos;ll earn 0.3% of all trades on this pair proportional to your share of the pool.
+            Fees are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
+          </TYPE.subHeader>
+        </LightCard>
       )}
     </>
   )
 }
 
-export default function FullPositionCard({ pair, border }: PositionCardProps) {
+export default function FullPositionCard({ pair, border, stakedBalance }: PositionCardProps) {
   const { account } = useActiveWeb3React()
 
   const currency0 = unwrappedToken(pair.token0)
@@ -131,9 +167,12 @@ export default function FullPositionCard({ pair, border }: PositionCardProps) {
 
   const [showMore, setShowMore] = useState(false)
 
-  const userPoolBalance = useTokenBalance(account, pair.liquidityToken)
+  const userDefaultPoolBalance = useTokenBalance(account ?? undefined, pair.liquidityToken)
   const totalPoolTokens = useTotalSupply(pair.liquidityToken)
 
+  // if staked balance balance provided, add to standard liquidity amount
+  const userPoolBalance = stakedBalance ? userDefaultPoolBalance?.add(stakedBalance) : userDefaultPoolBalance
+
   const poolTokenPercentage =
     !!userPoolBalance && !!totalPoolTokens && JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
       ? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
@@ -151,26 +190,72 @@ export default function FullPositionCard({ pair, border }: PositionCardProps) {
         ]
       : [undefined, undefined]
 
+  const backgroundColor = useColor(pair?.token0)
+
   return (
-    <HoverCard border={border}>
+    <StyledPositionCard border={border} bgColor={backgroundColor}>
+      <CardNoise />
       <AutoColumn gap="12px">
-        <FixedHeightRow onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer' }}>
-          <RowFixed>
-            <DoubleCurrencyLogo currency0={currency0} currency1={currency1} margin={true} size={20} />
+        <FixedHeightRow>
+          <AutoRow gap="8px">
+            <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
             <Text fontWeight={500} fontSize={20}>
               {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
             </Text>
-          </RowFixed>
-          <RowFixed>
-            {showMore ? (
-              <ChevronUp size="20" style={{ marginLeft: '10px' }} />
-            ) : (
-              <ChevronDown size="20" style={{ marginLeft: '10px' }} />
+            {!!stakedBalance && (
+              <ButtonUNIGradient as={Link} to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`}>
+                <HideExtraSmall>Earning UNI</HideExtraSmall>
+                <ExtraSmallOnly>
+                  <span role="img" aria-label="bolt">
+                    ⚡
+                  </span>
+                </ExtraSmallOnly>
+              </ButtonUNIGradient>
             )}
+          </AutoRow>
+
+          <RowFixed gap="8px">
+            <ButtonEmpty
+              padding="6px 8px"
+              borderRadius="12px"
+              width="fit-content"
+              onClick={() => setShowMore(!showMore)}
+            >
+              {showMore ? (
+                <>
+                  Manage
+                  <ChevronUp size="20" style={{ marginLeft: '10px' }} />
+                </>
+              ) : (
+                <>
+                  Manage
+                  <ChevronDown size="20" style={{ marginLeft: '10px' }} />
+                </>
+              )}
+            </ButtonEmpty>
           </RowFixed>
         </FixedHeightRow>
+
         {showMore && (
           <AutoColumn gap="8px">
+            <FixedHeightRow>
+              <Text fontSize={16} fontWeight={500}>
+                Your total pool tokens:
+              </Text>
+              <Text fontSize={16} fontWeight={500}>
+                {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
+              </Text>
+            </FixedHeightRow>
+            {stakedBalance && (
+              <FixedHeightRow>
+                <Text fontSize={16} fontWeight={500}>
+                  Pool tokens in rewards pool:
+                </Text>
+                <Text fontSize={16} fontWeight={500}>
+                  {stakedBalance.toSignificant(4)}
+                </Text>
+              </FixedHeightRow>
+            )}
             <FixedHeightRow>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500}>
@@ -206,39 +291,62 @@ export default function FullPositionCard({ pair, border }: PositionCardProps) {
                 '-'
               )}
             </FixedHeightRow>
-            <FixedHeightRow>
-              <Text fontSize={16} fontWeight={500}>
-                Your pool tokens:
-              </Text>
-              <Text fontSize={16} fontWeight={500}>
-                {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
-              </Text>
-            </FixedHeightRow>
+
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
                 Your pool share:
               </Text>
               <Text fontSize={16} fontWeight={500}>
-                {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
+                {poolTokenPercentage
+                  ? (poolTokenPercentage.toFixed(2) === '0.00' ? '<0.01' : poolTokenPercentage.toFixed(2)) + '%'
+                  : '-'}
               </Text>
             </FixedHeightRow>
 
-            <AutoRow justify="center" marginTop={'10px'}>
-              <ExternalLink href={`https://uniswap.info/pair/${pair.liquidityToken.address}`}>
-                View pool information ↗
+            <ButtonSecondary padding="8px" borderRadius="8px">
+              <ExternalLink
+                style={{ width: '100%', textAlign: 'center' }}
+                href={`https://uniswap.info/account/${account}`}
+              >
+                View accrued fees and analytics<span style={{ fontSize: '11px' }}>↗</span>
               </ExternalLink>
-            </AutoRow>
-            <RowBetween marginTop="10px">
-              <ButtonSecondary as={Link} to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`} width="48%">
-                Add
-              </ButtonSecondary>
-              <ButtonSecondary as={Link} width="48%" to={`/remove/${currencyId(currency0)}/${currencyId(currency1)}`}>
-                Remove
-              </ButtonSecondary>
-            </RowBetween>
+            </ButtonSecondary>
+            {userDefaultPoolBalance && JSBI.greaterThan(userDefaultPoolBalance.raw, BIG_INT_ZERO) && (
+              <RowBetween marginTop="10px">
+                <ButtonPrimary
+                  padding="8px"
+                  borderRadius="8px"
+                  as={Link}
+                  to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}
+                  width="48%"
+                >
+                  Add
+                </ButtonPrimary>
+                <ButtonPrimary
+                  padding="8px"
+                  borderRadius="8px"
+                  as={Link}
+                  width="48%"
+                  to={`/remove/${currencyId(currency0)}/${currencyId(currency1)}`}
+                >
+                  Remove
+                </ButtonPrimary>
+              </RowBetween>
+            )}
+            {stakedBalance && JSBI.greaterThan(stakedBalance.raw, BIG_INT_ZERO) && (
+              <ButtonPrimary
+                padding="8px"
+                borderRadius="8px"
+                as={Link}
+                to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`}
+                width="100%"
+              >
+                Manage Liquidity in Rewards Pool
+              </ButtonPrimary>
+            )}
           </AutoColumn>
         )}
       </AutoColumn>
-    </HoverCard>
+    </StyledPositionCard>
   )
 }

src/components/ProgressSteps/index.tsx

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

src/components/QuestionHelper/index.tsx

@@ -22,7 +22,32 @@ const QuestionWrapper = styled.div`
   }
 `
 
-export default function QuestionHelper({ text, disabled }: { text: string; disabled?: boolean }) {
+const LightQuestionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  border: none;
+  background: none;
+  outline: none;
+  cursor: default;
+  border-radius: 36px;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: ${({ theme }) => theme.white};
+
+  :hover,
+  :focus {
+    opacity: 0.7;
+  }
+`
+
+const QuestionMark = styled.span`
+  font-size: 1rem;
+`
+
+export default function QuestionHelper({ text }: { text: string }) {
   const [show, setShow] = useState<boolean>(false)
 
   const open = useCallback(() => setShow(true), [setShow])
@@ -30,7 +55,7 @@ export default function QuestionHelper({ text, disabled }: { text: string; disab
 
   return (
     <span style={{ marginLeft: 4 }}>
-      <Tooltip text={text} show={show && !disabled}>
+      <Tooltip text={text} show={show}>
         <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
           <Question size={16} />
         </QuestionWrapper>
@@ -38,3 +63,20 @@ export default function QuestionHelper({ text, disabled }: { text: string; disab
     </span>
   )
 }
+
+export function LightQuestionHelper({ text }: { text: string }) {
+  const [show, setShow] = useState<boolean>(false)
+
+  const open = useCallback(() => setShow(true), [setShow])
+  const close = useCallback(() => setShow(false), [setShow])
+
+  return (
+    <span style={{ marginLeft: 4 }}>
+      <Tooltip text={text} show={show}>
+        <LightQuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
+          <QuestionMark>?</QuestionMark>
+        </LightQuestionWrapper>
+      </Tooltip>
+    </span>
+  )
+}

src/components/SearchModal/CommonBases.tsx

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

src/components/SearchModal/CurrencyList.tsx

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

src/components/SearchModal/CurrencySearch.tsx

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

src/components/SearchModal/CurrencySearchModal.tsx

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

src/components/SearchModal/ListSelect.tsx

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

src/components/SearchModal/filtering.ts

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

src/components/SearchModal/sorting.ts

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

src/components/SearchModal/styleds.tsx

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

src/components/Settings/index.tsx

@@ -1,24 +1,24 @@
-import React, { useRef, useEffect, useContext, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
-import styled from 'styled-components'
-
-import {
-  useUserSlippageTolerance,
-  useExpertModeManager,
-  useUserDeadline,
-  useDarkModeManager
-} from '../../state/user/hooks'
-import SlippageTabs from '../SlippageTabs'
-import { RowFixed, RowBetween } from '../Row'
-import { TYPE } from '../../theme'
-import QuestionHelper from '../QuestionHelper'
-import Toggle from '../Toggle'
-import { ThemeContext } from 'styled-components'
-import { AutoColumn } from '../Column'
-import { ButtonError } from '../Button'
-import { useSettingsMenuOpen, useToggleSettingsMenu } from '../../state/application/hooks'
 import { Text } from 'rebass'
+import styled, { ThemeContext } from 'styled-components'
+import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useToggleSettingsMenu } from '../../state/application/hooks'
+import {
+  useDarkModeManager,
+  useExpertModeManager,
+  useUserTransactionTTL,
+  useUserSlippageTolerance
+} from '../../state/user/hooks'
+import { TYPE } from '../../theme'
+import { ButtonError } from '../Button'
+import { AutoColumn } from '../Column'
 import Modal from '../Modal'
+import QuestionHelper from '../QuestionHelper'
+import { RowBetween, RowFixed } from '../Row'
+import Toggle from '../Toggle'
+import TransactionSettings from '../TransactionSettings'
 
 const StyledMenuIcon = styled(Settings)`
   height: 20px;
@@ -85,18 +85,15 @@ const StyledMenu = styled.div`
 
 const MenuFlyout = styled.span`
   min-width: 20.125rem;
-  background-color: ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.bg2};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
-
-  border: 1px solid ${({ theme }) => theme.bg3};
-
-  border-radius: 0.5rem;
+  border-radius: 12px;
   display: flex;
   flex-direction: column;
   font-size: 1rem;
   position: absolute;
-  top: 3rem;
+  top: 4rem;
   right: 0rem;
   z-index: 100;
 
@@ -104,6 +101,11 @@ const MenuFlyout = styled.span`
     min-width: 18.125rem;
     right: -46px;
   `};
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    min-width: 18.125rem;
+    top: -22rem;
+  `};
 `
 
 const Break = styled.div`
@@ -123,13 +125,13 @@ const ModalContentWrapper = styled.div`
 
 export default function SettingsTab() {
   const node = useRef<HTMLDivElement>()
-  const open = useSettingsMenuOpen()
+  const open = useModalOpen(ApplicationModal.SETTINGS)
   const toggle = useToggleSettingsMenu()
 
   const theme = useContext(ThemeContext)
   const [userSlippageTolerance, setUserslippageTolerance] = useUserSlippageTolerance()
 
-  const [deadline, setDeadline] = useUserDeadline()
+  const [ttl, setTtl] = useUserTransactionTTL()
 
   const [expertMode, toggleExpertMode] = useExpertModeManager()
 
@@ -138,27 +140,11 @@ export default function SettingsTab() {
   // show confirmation view before turning on
   const [showConfirmation, setShowConfirmation] = useState(false)
 
-  useEffect(() => {
-    const handleClickOutside = e => {
-      if (node.current?.contains(e.target) ?? false) {
-        return
-      }
-      toggle()
-    }
-
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside)
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [open, toggle])
+  useOnClickOutside(node, open ? toggle : undefined)
 
   return (
-    <StyledMenu ref={node}>
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
+    <StyledMenu ref={node as any}>
       <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)} maxHeight={100}>
         <ModalContentWrapper>
           <AutoColumn gap="lg">
@@ -188,7 +174,7 @@ export default function SettingsTab() {
                   }
                 }}
               >
-                <Text fontSize={20} fontWeight={500}>
+                <Text fontSize={20} fontWeight={500} id="confirm-expert-mode">
                   Turn On Expert Mode
                 </Text>
               </ButtonError>
@@ -196,15 +182,15 @@ export default function SettingsTab() {
           </AutoColumn>
         </ModalContentWrapper>
       </Modal>
-      <StyledMenuButton onClick={toggle}>
+      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button">
         <StyledMenuIcon />
-        {expertMode && (
+        {expertMode ? (
           <EmojiWrapper>
             <span role="img" aria-label="wizard-icon">
               🧙
             </span>
           </EmojiWrapper>
-        )}
+        ) : null}
       </StyledMenuButton>
       {open && (
         <MenuFlyout>
@@ -212,11 +198,11 @@ export default function SettingsTab() {
             <Text fontWeight={600} fontSize={14}>
               Transaction Settings
             </Text>
-            <SlippageTabs
+            <TransactionSettings
               rawSlippage={userSlippageTolerance}
               setRawSlippage={setUserslippageTolerance}
-              deadline={deadline}
-              setDeadline={setDeadline}
+              deadline={ttl}
+              setDeadline={setTtl}
             />
             <Text fontWeight={600} fontSize={14}>
               Interface Settings
@@ -229,6 +215,7 @@ export default function SettingsTab() {
                 <QuestionHelper text="Bypasses confirmation modals and allows high slippage trades. Use at your own risk." />
               </RowFixed>
               <Toggle
+                id="toggle-expert-mode-button"
                 isActive={expertMode}
                 toggle={
                   expertMode

src/components/Slider/index.tsx

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

src/components/Toggle/index.tsx

@@ -6,30 +6,45 @@ const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
   border-radius: 14px;
   background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text4) : 'none')};
   color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text3)};
-  font-size: 0.825rem;
+  font-size: 1rem;
   font-weight: 400;
-`
 
-const StyledToggle = styled.a<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 16px;
-  border: 1px solid ${({ theme, isActive }) => (isActive ? theme.primary5 : theme.text4)};
-  display: flex;
-  width: fit-content;
-  cursor: pointer;
-  text-decoration: none;
+  padding: 0.35rem 0.6rem;
+  border-radius: 12px;
+  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text4) : 'none')};
+  color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text2)};
+  font-size: 1rem;
+  font-weight: ${({ isOnSwitch }) => (isOnSwitch ? '500' : '400')};
   :hover {
-    text-decoration: none;
+    user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
+    background: ${({ theme, isActive, isOnSwitch }) =>
+      isActive ? (isOnSwitch ? theme.primary1 : theme.text3) : 'none'};
+    color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text3)};
   }
 `
 
+const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
+  border-radius: 12px;
+  border: none;
+  /* border: 1px solid ${({ theme, isActive }) => (isActive ? theme.primary5 : theme.text4)}; */
+  background: ${({ theme }) => theme.bg3};
+  display: flex;
+  width: fit-content;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  /* background-color: transparent; */
+`
+
 export interface ToggleProps {
+  id?: string
   isActive: boolean
   toggle: () => void
 }
 
-export default function Toggle({ isActive, toggle }: ToggleProps) {
+export default function Toggle({ id, isActive, toggle }: ToggleProps) {
   return (
-    <StyledToggle isActive={isActive} target="_self" onClick={toggle}>
+    <StyledToggle id={id} isActive={isActive} onClick={toggle}>
       <ToggleElement isActive={isActive} isOnSwitch={true}>
         On
       </ToggleElement>

src/components/TokenWarningCard/index.tsx

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

src/components/TokenWarningModal/index.tsx

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

src/components/TransactionConfirmationModal/index.tsx

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

src/components/TransactionSettings/index.tsx

@@ -23,9 +23,9 @@ const FancyButton = styled.button`
   align-items: center;
   height: 2rem;
   border-radius: 36px;
-  font-size: 12px;
+  font-size: 1rem;
   width: auto;
-  min-width: 3rem;
+  min-width: 3.5rem;
   border: 1px solid ${({ theme }) => theme.bg3};
   outline: none;
   background: ${({ theme }) => theme.bg1};
@@ -104,48 +104,44 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
     slippageInput === '' || (rawSlippage / 100).toFixed(2) === Number.parseFloat(slippageInput).toFixed(2)
   const deadlineInputIsValid = deadlineInput === '' || (deadline / 60).toString() === deadlineInput
 
-  let slippageError: SlippageError
+  let slippageError: SlippageError | undefined
   if (slippageInput !== '' && !slippageInputIsValid) {
     slippageError = SlippageError.InvalidInput
   } else if (slippageInputIsValid && rawSlippage < 50) {
     slippageError = SlippageError.RiskyLow
   } else if (slippageInputIsValid && rawSlippage > 500) {
     slippageError = SlippageError.RiskyHigh
+  } else {
+    slippageError = undefined
   }
 
-  let deadlineError: DeadlineError
+  let deadlineError: DeadlineError | undefined
   if (deadlineInput !== '' && !deadlineInputIsValid) {
     deadlineError = DeadlineError.InvalidInput
+  } else {
+    deadlineError = undefined
   }
 
-  function parseCustomSlippage(event) {
-    setSlippageInput(event.target.value)
+  function parseCustomSlippage(value: string) {
+    setSlippageInput(value)
 
-    let valueAsIntFromRoundedFloat: number
     try {
-      valueAsIntFromRoundedFloat = Number.parseInt((Number.parseFloat(event.target.value) * 100).toString())
+      const valueAsIntFromRoundedFloat = Number.parseInt((Number.parseFloat(value) * 100).toString())
+      if (!Number.isNaN(valueAsIntFromRoundedFloat) && valueAsIntFromRoundedFloat < 5000) {
+        setRawSlippage(valueAsIntFromRoundedFloat)
+      }
     } catch {}
-
-    if (
-      typeof valueAsIntFromRoundedFloat === 'number' &&
-      !Number.isNaN(valueAsIntFromRoundedFloat) &&
-      valueAsIntFromRoundedFloat < 5000
-    ) {
-      setRawSlippage(valueAsIntFromRoundedFloat)
-    }
   }
 
-  function parseCustomDeadline(event) {
-    setDeadlineInput(event.target.value)
+  function parseCustomDeadline(value: string) {
+    setDeadlineInput(value)
 
-    let valueAsInt: number
     try {
-      valueAsInt = Number.parseInt(event.target.value) * 60
+      const valueAsInt: number = Number.parseInt(value) * 60
+      if (!Number.isNaN(valueAsInt) && valueAsInt > 0) {
+        setDeadline(valueAsInt)
+      }
     } catch {}
-
-    if (typeof valueAsInt === 'number' && !Number.isNaN(valueAsInt) && valueAsInt > 0) {
-      setDeadline(valueAsInt)
-    }
   }
 
   return (
@@ -195,14 +191,15 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
                   </span>
                 </SlippageEmojiContainer>
               ) : null}
+              {/* https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */}
               <Input
-                ref={inputRef}
+                ref={inputRef as any}
                 placeholder={(rawSlippage / 100).toFixed(2)}
                 value={slippageInput}
                 onBlur={() => {
-                  parseCustomSlippage({ target: { value: (rawSlippage / 100).toFixed(2) } })
+                  parseCustomSlippage((rawSlippage / 100).toFixed(2))
                 }}
-                onChange={parseCustomSlippage}
+                onChange={e => parseCustomSlippage(e.target.value)}
                 color={!slippageInputIsValid ? 'red' : ''}
               />
               %
@@ -238,11 +235,11 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
             <Input
               color={!!deadlineError ? 'red' : undefined}
               onBlur={() => {
-                parseCustomDeadline({ target: { value: (deadline / 60).toString() } })
+                parseCustomDeadline((deadline / 60).toString())
               }}
               placeholder={(deadline / 60).toString()}
               value={deadlineInput}
-              onChange={parseCustomDeadline}
+              onChange={e => parseCustomDeadline(e.target.value)}
             />
           </OptionCustom>
           <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>

src/components/WalletModal/Option.tsx

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

src/components/WalletModal/PendingView.tsx

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

src/components/WalletModal/index.tsx

@@ -1,22 +1,24 @@
-import React, { useState, useEffect } from 'react'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
+import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import React, { useEffect, useState } from 'react'
+import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components'
-import { isMobile } from 'react-device-detect'
-import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
-import usePrevious from '../../hooks/usePrevious'
-import { useWalletModalOpen, useWalletModalToggle } from '../../state/application/hooks'
-
-import Modal from '../Modal'
-import AccountDetails from '../AccountDetails'
-import PendingView from './PendingView'
-import Option from './Option'
-import { SUPPORTED_WALLETS } from '../../constants'
-import { ExternalLink } from '../../theme'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, fortmatic, portis } from '../../connectors'
+import { fortmatic, injected, portis } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import { SUPPORTED_WALLETS } from '../../constants'
+import usePrevious from '../../hooks/usePrevious'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
+import { ExternalLink } from '../../theme'
+import AccountDetails from '../AccountDetails'
+
+import Modal from '../Modal'
+import Option from './Option'
+import PendingView from './PendingView'
 
 const CloseIcon = styled.div`
   position: absolute;
@@ -128,11 +130,11 @@ export default function WalletModal({
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
 
-  const [pendingWallet, setPendingWallet] = useState()
+  const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
 
   const [pendingError, setPendingError] = useState<boolean>()
 
-  const walletModalOpen = useWalletModalOpen()
+  const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
   const toggleWalletModal = useWalletModalToggle()
 
   const previousAccount = usePrevious(account)
@@ -161,7 +163,7 @@ export default function WalletModal({
     }
   }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
 
-  const tryActivation = async connector => {
+  const tryActivation = async (connector: AbstractConnector | undefined) => {
     let name = ''
     Object.keys(SUPPORTED_WALLETS).map(key => {
       if (connector === SUPPORTED_WALLETS[key].connector) {
@@ -183,13 +185,14 @@ export default function WalletModal({
       connector.walletConnectProvider = undefined
     }
 
-    activate(connector, undefined, true).catch(error => {
-      if (error instanceof UnsupportedChainIdError) {
-        activate(connector) // a little janky...can't use setError because the connector isn't set
-      } else {
-        setPendingError(true)
-      }
-    })
+    connector &&
+      activate(connector, undefined, true).catch(error => {
+        if (error instanceof UnsupportedChainIdError) {
+          activate(connector) // a little janky...can't use setError because the connector isn't set
+        } else {
+          setPendingError(true)
+        }
+      })
   }
 
   // close wallet modal if fortmatic modal is active
@@ -349,9 +352,7 @@ export default function WalletModal({
           {walletView !== WALLET_VIEWS.PENDING && (
             <Blurb>
               <span>New to Ethereum? &nbsp;</span>{' '}
-              <ExternalLink href="https://ethereum.org/use/#3-what-is-a-wallet-and-which-one-should-i-use">
-                Learn more about wallets
-              </ExternalLink>
+              <ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
             </Blurb>
           )}
         </ContentWrapper>
@@ -360,7 +361,7 @@ export default function WalletModal({
   }
 
   return (
-    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={null} maxHeight={90}>
+    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
       <Wrapper>{getModalContent()}</Wrapper>
     </Modal>
   )

src/components/Web3ReactManager/index.tsx

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

src/components/Web3Status/index.tsx

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

src/components/analytics/GoogleAnalyticsReporter.tsx

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

src/components/claim/AddressClaimModal.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react'
+import Modal from '../Modal'
+import { AutoColumn, ColumnCenter } from '../Column'
+import styled from 'styled-components'
+import { DataCard, CardSection, Break } from '../earn/styled'
+import { RowBetween } from '../Row'
+import { TYPE, ExternalLink, CloseIcon, CustomLightSpinner, UniTokenAnimated } from '../../theme'
+import { ButtonPrimary } from '../Button'
+import { useClaimCallback, useUserUnclaimedAmount, useUserHasAvailableClaim } from '../../state/claim/hooks'
+import tokenLogo from '../../assets/images/token-logo.png'
+import Circle from '../../assets/images/blue-loader.svg'
+import { Text } from 'rebass'
+import AddressInputPanel from '../AddressInputPanel'
+import useENS from '../../hooks/useENS'
+import { useActiveWeb3React } from '../../hooks'
+import { isAddress } from 'ethers/lib/utils'
+import Confetti from '../Confetti'
+import { CardNoise, CardBGImage, CardBGImageSmaller } from '../earn/styled'
+import { useIsTransactionPending } from '../../state/transactions/hooks'
+import { TokenAmount } from '@uniswap/sdk'
+import { getEtherscanLink, shortenAddress } from '../../utils'
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+`
+
+const ModalUpper = styled(DataCard)`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #021d43 100%);
+`
+
+const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
+  width: 100%;
+  padding: 24px;
+  position: relative;
+  background: ${({ activeBG }) =>
+    activeBG &&
+    'radial-gradient(76.02% 75.41% at 1.84% 0%, rgba(255, 0, 122, 0.2) 0%, rgba(33, 114, 229, 0.2) 100%), #FFFFFF;'};
+`
+
+const ConfirmedIcon = styled(ColumnCenter)`
+  padding: 60px 0;
+`
+
+export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boolean; onDismiss: () => void }) {
+  const { chainId } = useActiveWeb3React()
+
+  // state for smart contract input
+  const [typed, setTyped] = useState('')
+  function handleRecipientType(val: string) {
+    setTyped(val)
+  }
+
+  // monitor for third party recipient of claim
+  const { address: parsedAddress } = useENS(typed)
+
+  // used for UI loading states
+  const [attempting, setAttempting] = useState<boolean>(false)
+
+  // monitor the status of the claim from contracts and txns
+  const { claimCallback } = useClaimCallback(parsedAddress)
+  const unclaimedAmount: TokenAmount | undefined = useUserUnclaimedAmount(parsedAddress)
+
+  // check if the user has something available
+  const hasAvailableClaim = useUserHasAvailableClaim(parsedAddress)
+
+  const [hash, setHash] = useState<string | undefined>()
+
+  // monitor the status of the claim from contracts and txns
+  const claimPending = useIsTransactionPending(hash ?? '')
+  const claimConfirmed = hash && !claimPending
+
+  // use the hash to monitor this txn
+
+  function onClaim() {
+    setAttempting(true)
+    claimCallback()
+      .then(hash => {
+        setHash(hash)
+      })
+      // reset modal and log error
+      .catch(error => {
+        setAttempting(false)
+        console.log(error)
+      })
+  }
+
+  function wrappedOnDismiss() {
+    setAttempting(false)
+    setHash(undefined)
+    setTyped('')
+    onDismiss()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight={90}>
+      <Confetti start={Boolean(isOpen && claimConfirmed && attempting)} />
+      {!attempting && (
+        <ContentWrapper gap="lg">
+          <ModalUpper>
+            <CardBGImage />
+            <CardNoise />
+            <CardSection gap="md">
+              <RowBetween>
+                <TYPE.white fontWeight={500}>Claim UNI Token</TYPE.white>
+                <CloseIcon onClick={wrappedOnDismiss} style={{ zIndex: 99 }} stroke="white" />
+              </RowBetween>
+              <TYPE.white fontWeight={700} fontSize={36}>
+                {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+              </TYPE.white>
+            </CardSection>
+            <Break />
+          </ModalUpper>
+          <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
+            <TYPE.subHeader fontWeight={500}>
+              Enter an address to trigger a UNI claim. If the address has any claimable UNI it will be sent to them on
+              submission.
+            </TYPE.subHeader>
+            <AddressInputPanel value={typed} onChange={handleRecipientType} />
+            {parsedAddress && !hasAvailableClaim && (
+              <TYPE.error error={true}>Address has no available claim</TYPE.error>
+            )}
+            <ButtonPrimary
+              disabled={!isAddress(parsedAddress ?? '') || !hasAvailableClaim}
+              padding="16px 16px"
+              width="100%"
+              borderRadius="12px"
+              mt="1rem"
+              onClick={onClaim}
+            >
+              Claim UNI
+            </ButtonPrimary>
+          </AutoColumn>
+        </ContentWrapper>
+      )}
+      {(attempting || claimConfirmed) && (
+        <ConfirmOrLoadingWrapper activeBG={true}>
+          <CardNoise />
+          <CardBGImageSmaller desaturate />
+          <RowBetween>
+            <div />
+            <CloseIcon onClick={wrappedOnDismiss} style={{ zIndex: 99 }} stroke="black" />
+          </RowBetween>
+          <ConfirmedIcon>
+            {!claimConfirmed ? (
+              <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
+            ) : (
+              <UniTokenAnimated width="72px" src={tokenLogo} />
+            )}
+          </ConfirmedIcon>
+          <AutoColumn gap="100px" justify={'center'}>
+            <AutoColumn gap="12px" justify={'center'}>
+              <TYPE.largeHeader fontWeight={600} color="black">
+                {claimConfirmed ? 'Claimed' : 'Claiming'}
+              </TYPE.largeHeader>
+              {!claimConfirmed && (
+                <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
+                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                </Text>
+              )}
+              {parsedAddress && (
+                <TYPE.largeHeader fontWeight={600} color="black">
+                  for {shortenAddress(parsedAddress)}
+                </TYPE.largeHeader>
+              )}
+            </AutoColumn>
+            {claimConfirmed && (
+              <>
+                <TYPE.subHeader fontWeight={500} color="black">
+                  <span role="img" aria-label="party-hat">
+                    🎉{' '}
+                  </span>
+                  Welcome to team Unicorn :){' '}
+                  <span role="img" aria-label="party-hat">
+                    🎉
+                  </span>
+                </TYPE.subHeader>
+              </>
+            )}
+            {attempting && !hash && (
+              <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
+            )}
+            {attempting && hash && !claimConfirmed && chainId && hash && (
+              <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ zIndex: 99 }}>
+                View transaction on Etherscan
+              </ExternalLink>
+            )}
+          </AutoColumn>
+        </ConfirmOrLoadingWrapper>
+      )}
+    </Modal>
+  )
+}

src/components/claim/ClaimModal.tsx

@@ -0,0 +1,207 @@
+import { JSBI, TokenAmount } from '@uniswap/sdk'
+import { isAddress } from 'ethers/lib/utils'
+import React, { useEffect, useState } from 'react'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+import Circle from '../../assets/images/blue-loader.svg'
+import tokenLogo from '../../assets/images/token-logo.png'
+import { useActiveWeb3React } from '../../hooks'
+import { ApplicationModal } from '../../state/application/actions'
+import { useModalOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
+import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
+import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
+import { CloseIcon, CustomLightSpinner, ExternalLink, TYPE, UniTokenAnimated } from '../../theme'
+import { getEtherscanLink } from '../../utils'
+import { ButtonPrimary } from '../Button'
+import { AutoColumn, ColumnCenter } from '../Column'
+import Confetti from '../Confetti'
+import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from '../earn/styled'
+
+import Modal from '../Modal'
+import { RowBetween } from '../Row'
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+`
+
+const ModalUpper = styled(DataCard)`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #021d43 100%);
+`
+
+const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
+  width: 100%;
+  padding: 24px;
+  position: relative;
+  background: ${({ activeBG }) =>
+    activeBG &&
+    'radial-gradient(76.02% 75.41% at 1.84% 0%, rgba(255, 0, 122, 0.2) 0%, rgba(33, 114, 229, 0.2) 100%), #FFFFFF;'};
+`
+
+const ConfirmedIcon = styled(ColumnCenter)`
+  padding: 60px 0;
+`
+
+const SOCKS_AMOUNT = 1000
+const USER_AMOUNT = 400
+
+export default function ClaimModal() {
+  const isOpen = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const toggleClaimModal = useToggleSelfClaimModal()
+
+  const { account, chainId } = useActiveWeb3React()
+
+  // used for UI loading states
+  const [attempting, setAttempting] = useState<boolean>(false)
+
+  // get user claim data
+  const userClaimData = useUserClaimData(account)
+
+  // monitor the status of the claim from contracts and txns
+  const { claimCallback } = useClaimCallback(account)
+  const unclaimedAmount: TokenAmount | undefined = useUserUnclaimedAmount(account)
+  const { claimSubmitted, claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
+  const claimConfirmed = Boolean(claimTxn?.receipt)
+
+  function onClaim() {
+    setAttempting(true)
+    claimCallback()
+      // reset modal and log error
+      .catch(error => {
+        setAttempting(false)
+        console.log(error)
+      })
+  }
+
+  // once confirmed txn is found, if modal is closed open, mark as not attempting regradless
+  useEffect(() => {
+    if (claimConfirmed && claimSubmitted && attempting) {
+      setAttempting(false)
+      if (!isOpen) {
+        toggleClaimModal()
+      }
+    }
+  }, [attempting, claimConfirmed, claimSubmitted, isOpen, toggleClaimModal])
+
+  const nonLPAmount = JSBI.multiply(
+    JSBI.BigInt((userClaimData?.flags?.isSOCKS ? SOCKS_AMOUNT : 0) + (userClaimData?.flags?.isUser ? USER_AMOUNT : 0)),
+    JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))
+  )
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={toggleClaimModal} maxHeight={90}>
+      <Confetti start={Boolean(isOpen && claimConfirmed)} />
+      {!attempting && !claimConfirmed && (
+        <ContentWrapper gap="lg">
+          <ModalUpper>
+            <CardBGImage />
+            <CardNoise />
+            <CardSection gap="md">
+              <RowBetween>
+                <TYPE.white fontWeight={500}>Claim UNI</TYPE.white>
+                <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} color="white" />
+              </RowBetween>
+              <TYPE.white fontWeight={700} fontSize={36}>
+                {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+              </TYPE.white>
+            </CardSection>
+            <Break />
+            <CardSection gap="sm">
+              {userClaimData?.flags?.isSOCKS && (
+                <RowBetween>
+                  <TYPE.subHeader color="white">SOCKS</TYPE.subHeader>
+                  <TYPE.subHeader color="white">{SOCKS_AMOUNT} UNI</TYPE.subHeader>
+                </RowBetween>
+              )}
+              {userClaimData?.flags?.isLP &&
+                unclaimedAmount &&
+                JSBI.greaterThanOrEqual(unclaimedAmount.raw, nonLPAmount) && (
+                  <RowBetween>
+                    <TYPE.subHeader color="white">Liquidity</TYPE.subHeader>
+                    <TYPE.subHeader color="white">
+                      {unclaimedAmount
+                        .subtract(new TokenAmount(unclaimedAmount.token, nonLPAmount))
+                        .toFixed(0, { groupSeparator: ',' })}{' '}
+                      UNI
+                    </TYPE.subHeader>
+                  </RowBetween>
+                )}
+              {userClaimData?.flags?.isUser && (
+                <RowBetween>
+                  <TYPE.subHeader color="white">User</TYPE.subHeader>
+                  <TYPE.subHeader color="white">{USER_AMOUNT} UNI</TYPE.subHeader>
+                </RowBetween>
+              )}
+            </CardSection>
+          </ModalUpper>
+          <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
+            <TYPE.subHeader fontWeight={500}>
+              As a member of the Uniswap community you may claim UNI to be used for voting and governance. <br /> <br />
+              <ExternalLink href="https://uniswap.org/blog/uni">Read more about UNI</ExternalLink>
+            </TYPE.subHeader>
+            <ButtonPrimary
+              disabled={!isAddress(account ?? '')}
+              padding="16px 16px"
+              width="100%"
+              borderRadius="12px"
+              mt="1rem"
+              onClick={onClaim}
+            >
+              Claim UNI
+            </ButtonPrimary>
+          </AutoColumn>
+        </ContentWrapper>
+      )}
+      {(attempting || claimConfirmed) && (
+        <ConfirmOrLoadingWrapper activeBG={true}>
+          <CardNoise />
+          <CardBGImageSmaller desaturate />
+          <RowBetween>
+            <div />
+            <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} stroke="black" />
+          </RowBetween>
+          <ConfirmedIcon>
+            {!claimConfirmed ? (
+              <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
+            ) : (
+              <UniTokenAnimated width="72px" src={tokenLogo} />
+            )}
+          </ConfirmedIcon>
+          <AutoColumn gap="100px" justify={'center'}>
+            <AutoColumn gap="12px" justify={'center'}>
+              <TYPE.largeHeader fontWeight={600} color="black">
+                {claimConfirmed ? 'Claimed!' : 'Claiming'}
+              </TYPE.largeHeader>
+              {!claimConfirmed && (
+                <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
+                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                </Text>
+              )}
+            </AutoColumn>
+            {claimConfirmed && (
+              <>
+                <TYPE.subHeader fontWeight={500} color="black">
+                  <span role="img" aria-label="party-hat">
+                    🎉{' '}
+                  </span>
+                  Welcome to team Unicorn :){' '}
+                  <span role="img" aria-label="party-hat">
+                    🎉
+                  </span>
+                </TYPE.subHeader>
+              </>
+            )}
+            {attempting && !claimSubmitted && (
+              <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
+            )}
+            {attempting && claimSubmitted && !claimConfirmed && chainId && claimTxn?.hash && (
+              <ExternalLink href={getEtherscanLink(chainId, claimTxn?.hash, 'transaction')} style={{ zIndex: 99 }}>
+                View transaction on Etherscan
+              </ExternalLink>
+            )}
+          </AutoColumn>
+        </ConfirmOrLoadingWrapper>
+      )}
+    </Modal>
+  )
+}

src/components/earn/ClaimRewardModal.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import Modal from '../Modal'
+import { AutoColumn } from '../Column'
+import styled from 'styled-components'
+import { RowBetween } from '../Row'
+import { TYPE, CloseIcon } from '../../theme'
+import { ButtonError } from '../Button'
+import { StakingInfo } from '../../state/stake/hooks'
+import { useStakingContract } from '../../hooks/useContract'
+import { SubmittedView, LoadingView } from '../ModalViews'
+import { TransactionResponse } from '@ethersproject/providers'
+import { useTransactionAdder } from '../../state/transactions/hooks'
+import { useActiveWeb3React } from '../../hooks'
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+  padding: 1rem;
+`
+
+interface StakingModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  stakingInfo: StakingInfo
+}
+
+export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: StakingModalProps) {
+  const { account } = useActiveWeb3React()
+
+  // monitor call to help UI loading state
+  const addTransaction = useTransactionAdder()
+  const [hash, setHash] = useState<string | undefined>()
+  const [attempting, setAttempting] = useState(false)
+
+  function wrappedOnDismiss() {
+    setHash(undefined)
+    setAttempting(false)
+    onDismiss()
+  }
+
+  const stakingContract = useStakingContract(stakingInfo.stakingRewardAddress)
+
+  async function onClaimReward() {
+    if (stakingContract && stakingInfo?.stakedAmount) {
+      setAttempting(true)
+      await stakingContract
+        .getReward({ gasLimit: 350000 })
+        .then((response: TransactionResponse) => {
+          addTransaction(response, {
+            summary: `Claim accumulated UNI rewards`
+          })
+          setHash(response.hash)
+        })
+        .catch((error: any) => {
+          setAttempting(false)
+          console.log(error)
+        })
+    }
+  }
+
+  let error: string | undefined
+  if (!account) {
+    error = 'Connect Wallet'
+  }
+  if (!stakingInfo?.stakedAmount) {
+    error = error ?? 'Enter an amount'
+  }
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight={90}>
+      {!attempting && !hash && (
+        <ContentWrapper gap="lg">
+          <RowBetween>
+            <TYPE.mediumHeader>Claim</TYPE.mediumHeader>
+            <CloseIcon onClick={wrappedOnDismiss} />
+          </RowBetween>
+          {stakingInfo?.earnedAmount && (
+            <AutoColumn justify="center" gap="md">
+              <TYPE.body fontWeight={600} fontSize={36}>
+                {stakingInfo?.earnedAmount?.toSignificant(6)}
+              </TYPE.body>
+              <TYPE.body>Unclaimed UNI</TYPE.body>
+            </AutoColumn>
+          )}
+          <TYPE.subHeader style={{ textAlign: 'center' }}>
+            When you claim without withdrawing your liquidity remains in the mining pool.
+          </TYPE.subHeader>
+          <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onClaimReward}>
+            {error ?? 'Claim'}
+          </ButtonError>
+        </ContentWrapper>
+      )}
+      {attempting && !hash && (
+        <LoadingView onDismiss={wrappedOnDismiss}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.body fontSize={20}>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</TYPE.body>
+          </AutoColumn>
+        </LoadingView>
+      )}
+      {hash && (
+        <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
+            <TYPE.body fontSize={20}>Claimed UNI!</TYPE.body>
+          </AutoColumn>
+        </SubmittedView>
+      )}
+    </Modal>
+  )
+}

src/components/earn/PoolCard.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import { AutoColumn } from '../Column'
+import { RowBetween } from '../Row'
+import styled from 'styled-components'
+import { TYPE, StyledInternalLink } from '../../theme'
+import DoubleCurrencyLogo from '../DoubleLogo'
+import { ETHER, JSBI, TokenAmount } from '@uniswap/sdk'
+import { ButtonPrimary } from '../Button'
+import { StakingInfo } from '../../state/stake/hooks'
+import { useColor } from '../../hooks/useColor'
+import { currencyId } from '../../utils/currencyId'
+import { Break, CardNoise, CardBGImage } from './styled'
+import { unwrappedToken } from '../../utils/wrappedCurrency'
+import { useTotalSupply } from '../../data/TotalSupply'
+import { usePair } from '../../data/Reserves'
+import useUSDCPrice from '../../utils/useUSDCPrice'
+import { BIG_INT_SECONDS_IN_WEEK } from '../../constants'
+
+const StatContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+  display: none;
+`};
+`
+
+const Wrapper = styled(AutoColumn)<{ showBackground: boolean; bgColor: any }>`
+  border-radius: 12px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  opacity: ${({ showBackground }) => (showBackground ? '1' : '1')};
+  background: ${({ theme, bgColor, showBackground }) =>
+    `radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${showBackground ? theme.black : theme.bg5} 100%) `};
+  color: ${({ theme, showBackground }) => (showBackground ? theme.white : theme.text1)} !important;
+
+  ${({ showBackground }) =>
+    showBackground &&
+    `  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);`}
+`
+
+const TopSection = styled.div`
+  display: grid;
+  grid-template-columns: 48px 1fr 120px;
+  grid-gap: 0px;
+  align-items: center;
+  padding: 1rem;
+  z-index: 1;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    grid-template-columns: 48px 1fr 96px;
+  `};
+`
+
+const BottomSection = styled.div<{ showBackground: boolean }>`
+  padding: 12px 16px;
+  opacity: ${({ showBackground }) => (showBackground ? '1' : '0.4')};
+  border-radius: 0 0 12px 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  z-index: 1;
+`
+
+export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo }) {
+  const token0 = stakingInfo.tokens[0]
+  const token1 = stakingInfo.tokens[1]
+
+  const currency0 = unwrappedToken(token0)
+  const currency1 = unwrappedToken(token1)
+
+  const isStaking = Boolean(stakingInfo.stakedAmount.greaterThan('0'))
+
+  // get the color of the token
+  const token = currency0 === ETHER ? token1 : token0
+  const WETH = currency0 === ETHER ? token0 : token1
+  const backgroundColor = useColor(token)
+
+  const totalSupplyOfStakingToken = useTotalSupply(stakingInfo.stakedAmount.token)
+  const [, stakingTokenPair] = usePair(...stakingInfo.tokens)
+
+  // let returnOverMonth: Percent = new Percent('0')
+  let valueOfTotalStakedAmountInWETH: TokenAmount | undefined
+  if (totalSupplyOfStakingToken && stakingTokenPair) {
+    // take the total amount of LP tokens staked, multiply by ETH value of all LP tokens, divide by all LP tokens
+    valueOfTotalStakedAmountInWETH = new TokenAmount(
+      WETH,
+      JSBI.divide(
+        JSBI.multiply(
+          JSBI.multiply(stakingInfo.totalStakedAmount.raw, stakingTokenPair.reserveOf(WETH).raw),
+          JSBI.BigInt(2) // this is b/c the value of LP shares are ~double the value of the WETH they entitle owner to
+        ),
+        totalSupplyOfStakingToken.raw
+      )
+    )
+  }
+
+  // get the USD value of staked WETH
+  const USDPrice = useUSDCPrice(WETH)
+  const valueOfTotalStakedAmountInUSDC =
+    valueOfTotalStakedAmountInWETH && USDPrice?.quote(valueOfTotalStakedAmountInWETH)
+
+  return (
+    <Wrapper showBackground={isStaking} bgColor={backgroundColor}>
+      <CardBGImage desaturate />
+      <CardNoise />
+
+      <TopSection>
+        <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={24} />
+        <TYPE.white fontWeight={600} fontSize={24} style={{ marginLeft: '8px' }}>
+          {currency0.symbol}-{currency1.symbol}
+        </TYPE.white>
+
+        <StyledInternalLink to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`} style={{ width: '100%' }}>
+          <ButtonPrimary padding="8px" borderRadius="8px">
+            {isStaking ? 'Manage' : 'Deposit'}
+          </ButtonPrimary>
+        </StyledInternalLink>
+      </TopSection>
+
+      <StatContainer>
+        <RowBetween>
+          <TYPE.white> Total deposited</TYPE.white>
+          <TYPE.white>
+            {valueOfTotalStakedAmountInUSDC
+              ? `$${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}`
+              : `${valueOfTotalStakedAmountInWETH?.toSignificant(4, { groupSeparator: ',' }) ?? '-'} ETH`}
+          </TYPE.white>
+        </RowBetween>
+        <RowBetween>
+          <TYPE.white> Pool rate </TYPE.white>
+          <TYPE.white>
+            {stakingInfo
+              ? stakingInfo.active
+                ? `${stakingInfo.totalRewardRate
+                    ?.multiply(BIG_INT_SECONDS_IN_WEEK)
+                    ?.toFixed(0, { groupSeparator: ',' })} UNI / week`
+                : '0 UNI / week'
+              : '-'}
+          </TYPE.white>
+        </RowBetween>
+      </StatContainer>
+
+      {isStaking && (
+        <>
+          <Break />
+          <BottomSection showBackground={true}>
+            <TYPE.black color={'white'} fontWeight={500}>
+              <span>Your rate</span>
+            </TYPE.black>
+
+            <TYPE.black style={{ textAlign: 'right' }} color={'white'} fontWeight={500}>
+              <span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
+                ⚡
+              </span>
+              {stakingInfo
+                ? stakingInfo.active
+                  ? `${stakingInfo.rewardRate
+                      ?.multiply(BIG_INT_SECONDS_IN_WEEK)
+                      ?.toSignificant(4, { groupSeparator: ',' })} UNI / week`
+                  : '0 UNI / week'
+                : '-'}
+            </TYPE.black>
+          </BottomSection>
+        </>
+      )}
+    </Wrapper>
+  )
+}

src/components/earn/StakingModal.tsx

@@ -0,0 +1,265 @@
+import React, { useState, useCallback } from 'react'
+import useIsArgentWallet from '../../hooks/useIsArgentWallet'
+import useTransactionDeadline from '../../hooks/useTransactionDeadline'
+import Modal from '../Modal'
+import { AutoColumn } from '../Column'
+import styled from 'styled-components'
+import { RowBetween } from '../Row'
+import { TYPE, CloseIcon } from '../../theme'
+import { ButtonConfirmed, ButtonError } from '../Button'
+import ProgressCircles from '../ProgressSteps'
+import CurrencyInputPanel from '../CurrencyInputPanel'
+import { TokenAmount, Pair } from '@uniswap/sdk'
+import { useActiveWeb3React } from '../../hooks'
+import { maxAmountSpend } from '../../utils/maxAmountSpend'
+import { usePairContract, useStakingContract } from '../../hooks/useContract'
+import { useApproveCallback, ApprovalState } from '../../hooks/useApproveCallback'
+import { splitSignature } from 'ethers/lib/utils'
+import { StakingInfo, useDerivedStakeInfo } from '../../state/stake/hooks'
+import { wrappedCurrencyAmount } from '../../utils/wrappedCurrency'
+import { TransactionResponse } from '@ethersproject/providers'
+import { useTransactionAdder } from '../../state/transactions/hooks'
+import { LoadingView, SubmittedView } from '../ModalViews'
+
+const HypotheticalRewardRate = styled.div<{ dim: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  padding-right: 20px;
+  padding-left: 20px;
+
+  opacity: ${({ dim }) => (dim ? 0.5 : 1)};
+`
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+  padding: 1rem;
+`
+
+interface StakingModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  stakingInfo: StakingInfo
+  userLiquidityUnstaked: TokenAmount | undefined
+}
+
+export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiquidityUnstaked }: StakingModalProps) {
+  const { account, chainId, library } = useActiveWeb3React()
+
+  // track and parse user input
+  const [typedValue, setTypedValue] = useState('')
+  const { parsedAmount, error } = useDerivedStakeInfo(typedValue, stakingInfo.stakedAmount.token, userLiquidityUnstaked)
+  const parsedAmountWrapped = wrappedCurrencyAmount(parsedAmount, chainId)
+
+  let hypotheticalRewardRate: TokenAmount = new TokenAmount(stakingInfo.rewardRate.token, '0')
+  if (parsedAmountWrapped?.greaterThan('0')) {
+    hypotheticalRewardRate = stakingInfo.getHypotheticalRewardRate(
+      stakingInfo.stakedAmount.add(parsedAmountWrapped),
+      stakingInfo.totalStakedAmount.add(parsedAmountWrapped),
+      stakingInfo.totalRewardRate
+    )
+  }
+
+  // state for pending and submitted txn views
+  const addTransaction = useTransactionAdder()
+  const [attempting, setAttempting] = useState<boolean>(false)
+  const [hash, setHash] = useState<string | undefined>()
+  const wrappedOnDismiss = useCallback(() => {
+    setHash(undefined)
+    setAttempting(false)
+    onDismiss()
+  }, [onDismiss])
+
+  // pair contract for this token to be staked
+  const dummyPair = new Pair(new TokenAmount(stakingInfo.tokens[0], '0'), new TokenAmount(stakingInfo.tokens[1], '0'))
+  const pairContract = usePairContract(dummyPair.liquidityToken.address)
+
+  // approval data for stake
+  const deadline = useTransactionDeadline()
+  const [signatureData, setSignatureData] = useState<{ v: number; r: string; s: string; deadline: number } | null>(null)
+  const [approval, approveCallback] = useApproveCallback(parsedAmount, stakingInfo.stakingRewardAddress)
+
+  const isArgentWallet = useIsArgentWallet()
+  const stakingContract = useStakingContract(stakingInfo.stakingRewardAddress)
+  async function onStake() {
+    setAttempting(true)
+    if (stakingContract && parsedAmount && deadline) {
+      if (approval === ApprovalState.APPROVED) {
+        await stakingContract.stake(`0x${parsedAmount.raw.toString(16)}`, { gasLimit: 350000 })
+      } else if (signatureData) {
+        stakingContract
+          .stakeWithPermit(
+            `0x${parsedAmount.raw.toString(16)}`,
+            signatureData.deadline,
+            signatureData.v,
+            signatureData.r,
+            signatureData.s,
+            { gasLimit: 350000 }
+          )
+          .then((response: TransactionResponse) => {
+            addTransaction(response, {
+              summary: `Deposit liquidity`
+            })
+            setHash(response.hash)
+          })
+          .catch((error: any) => {
+            setAttempting(false)
+            console.log(error)
+          })
+      } else {
+        setAttempting(false)
+        throw new Error('Attempting to stake without approval or a signature. Please contact support.')
+      }
+    }
+  }
+
+  // wrapped onUserInput to clear signatures
+  const onUserInput = useCallback((typedValue: string) => {
+    setSignatureData(null)
+    setTypedValue(typedValue)
+  }, [])
+
+  // used for max input button
+  const maxAmountInput = maxAmountSpend(userLiquidityUnstaked)
+  const atMaxAmount = Boolean(maxAmountInput && parsedAmount?.equalTo(maxAmountInput))
+  const handleMax = useCallback(() => {
+    maxAmountInput && onUserInput(maxAmountInput.toExact())
+  }, [maxAmountInput, onUserInput])
+
+  async function onAttemptToApprove() {
+    if (!pairContract || !library || !deadline) throw new Error('missing dependencies')
+    const liquidityAmount = parsedAmount
+    if (!liquidityAmount) throw new Error('missing liquidity amount')
+
+    if (isArgentWallet) {
+      return approveCallback()
+    }
+
+    // try to gather a signature for permission
+    const nonce = await pairContract.nonces(account)
+
+    const EIP712Domain = [
+      { name: 'name', type: 'string' },
+      { name: 'version', type: 'string' },
+      { name: 'chainId', type: 'uint256' },
+      { name: 'verifyingContract', type: 'address' }
+    ]
+    const domain = {
+      name: 'Uniswap V2',
+      version: '1',
+      chainId: chainId,
+      verifyingContract: pairContract.address
+    }
+    const Permit = [
+      { name: 'owner', type: 'address' },
+      { name: 'spender', type: 'address' },
+      { name: 'value', type: 'uint256' },
+      { name: 'nonce', type: 'uint256' },
+      { name: 'deadline', type: 'uint256' }
+    ]
+    const message = {
+      owner: account,
+      spender: stakingInfo.stakingRewardAddress,
+      value: liquidityAmount.raw.toString(),
+      nonce: nonce.toHexString(),
+      deadline: deadline.toNumber()
+    }
+    const data = JSON.stringify({
+      types: {
+        EIP712Domain,
+        Permit
+      },
+      domain,
+      primaryType: 'Permit',
+      message
+    })
+
+    library
+      .send('eth_signTypedData_v4', [account, data])
+      .then(splitSignature)
+      .then(signature => {
+        setSignatureData({
+          v: signature.v,
+          r: signature.r,
+          s: signature.s,
+          deadline: deadline.toNumber()
+        })
+      })
+      .catch(error => {
+        // for all errors other than 4001 (EIP-1193 user rejected request), fall back to manual approve
+        if (error?.code !== 4001) {
+          approveCallback()
+        }
+      })
+  }
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight={90}>
+      {!attempting && !hash && (
+        <ContentWrapper gap="lg">
+          <RowBetween>
+            <TYPE.mediumHeader>Deposit</TYPE.mediumHeader>
+            <CloseIcon onClick={wrappedOnDismiss} />
+          </RowBetween>
+          <CurrencyInputPanel
+            value={typedValue}
+            onUserInput={onUserInput}
+            onMax={handleMax}
+            showMaxButton={!atMaxAmount}
+            currency={stakingInfo.stakedAmount.token}
+            pair={dummyPair}
+            label={''}
+            disableCurrencySelect={true}
+            customBalanceText={'Available to deposit: '}
+            id="stake-liquidity-token"
+          />
+
+          <HypotheticalRewardRate dim={!hypotheticalRewardRate.greaterThan('0')}>
+            <div>
+              <TYPE.black fontWeight={600}>Weekly Rewards</TYPE.black>
+            </div>
+
+            <TYPE.black>
+              {hypotheticalRewardRate.multiply((60 * 60 * 24 * 7).toString()).toSignificant(4, { groupSeparator: ',' })}{' '}
+              UNI / week
+            </TYPE.black>
+          </HypotheticalRewardRate>
+
+          <RowBetween>
+            <ButtonConfirmed
+              mr="0.5rem"
+              onClick={onAttemptToApprove}
+              confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
+              disabled={approval !== ApprovalState.NOT_APPROVED || signatureData !== null}
+            >
+              Approve
+            </ButtonConfirmed>
+            <ButtonError
+              disabled={!!error || (signatureData === null && approval !== ApprovalState.APPROVED)}
+              error={!!error && !!parsedAmount}
+              onClick={onStake}
+            >
+              {error ?? 'Deposit'}
+            </ButtonError>
+          </RowBetween>
+          <ProgressCircles steps={[approval === ApprovalState.APPROVED || signatureData !== null]} disabled={true} />
+        </ContentWrapper>
+      )}
+      {attempting && !hash && (
+        <LoadingView onDismiss={wrappedOnDismiss}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.largeHeader>Depositing Liquidity</TYPE.largeHeader>
+            <TYPE.body fontSize={20}>{parsedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
+          </AutoColumn>
+        </LoadingView>
+      )}
+      {attempting && hash && (
+        <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
+            <TYPE.body fontSize={20}>Deposited {parsedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
+          </AutoColumn>
+        </SubmittedView>
+      )}
+    </Modal>
+  )
+}

src/components/earn/UnstakingModal.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import Modal from '../Modal'
+import { AutoColumn } from '../Column'
+import styled from 'styled-components'
+import { RowBetween } from '../Row'
+import { TYPE, CloseIcon } from '../../theme'
+import { ButtonError } from '../Button'
+import { StakingInfo } from '../../state/stake/hooks'
+import { useStakingContract } from '../../hooks/useContract'
+import { SubmittedView, LoadingView } from '../ModalViews'
+import { TransactionResponse } from '@ethersproject/providers'
+import { useTransactionAdder } from '../../state/transactions/hooks'
+import FormattedCurrencyAmount from '../FormattedCurrencyAmount'
+import { useActiveWeb3React } from '../../hooks'
+
+const ContentWrapper = styled(AutoColumn)`
+  width: 100%;
+  padding: 1rem;
+`
+
+interface StakingModalProps {
+  isOpen: boolean
+  onDismiss: () => void
+  stakingInfo: StakingInfo
+}
+
+export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: StakingModalProps) {
+  const { account } = useActiveWeb3React()
+
+  // monitor call to help UI loading state
+  const addTransaction = useTransactionAdder()
+  const [hash, setHash] = useState<string | undefined>()
+  const [attempting, setAttempting] = useState(false)
+
+  function wrappedOndismiss() {
+    setHash(undefined)
+    setAttempting(false)
+    onDismiss()
+  }
+
+  const stakingContract = useStakingContract(stakingInfo.stakingRewardAddress)
+
+  async function onWithdraw() {
+    if (stakingContract && stakingInfo?.stakedAmount) {
+      setAttempting(true)
+      await stakingContract
+        .exit({ gasLimit: 300000 })
+        .then((response: TransactionResponse) => {
+          addTransaction(response, {
+            summary: `Withdraw deposited liquidity`
+          })
+          setHash(response.hash)
+        })
+        .catch((error: any) => {
+          setAttempting(false)
+          console.log(error)
+        })
+    }
+  }
+
+  let error: string | undefined
+  if (!account) {
+    error = 'Connect Wallet'
+  }
+  if (!stakingInfo?.stakedAmount) {
+    error = error ?? 'Enter an amount'
+  }
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={wrappedOndismiss} maxHeight={90}>
+      {!attempting && !hash && (
+        <ContentWrapper gap="lg">
+          <RowBetween>
+            <TYPE.mediumHeader>Withdraw</TYPE.mediumHeader>
+            <CloseIcon onClick={wrappedOndismiss} />
+          </RowBetween>
+          {stakingInfo?.stakedAmount && (
+            <AutoColumn justify="center" gap="md">
+              <TYPE.body fontWeight={600} fontSize={36}>
+                {<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />}
+              </TYPE.body>
+              <TYPE.body>Deposited liquidity:</TYPE.body>
+            </AutoColumn>
+          )}
+          {stakingInfo?.earnedAmount && (
+            <AutoColumn justify="center" gap="md">
+              <TYPE.body fontWeight={600} fontSize={36}>
+                {<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />}
+              </TYPE.body>
+              <TYPE.body>Unclaimed UNI</TYPE.body>
+            </AutoColumn>
+          )}
+          <TYPE.subHeader style={{ textAlign: 'center' }}>
+            When you withdraw, your UNI is claimed and your liquidity is removed from the mining pool.
+          </TYPE.subHeader>
+          <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onWithdraw}>
+            {error ?? 'Withdraw & Claim'}
+          </ButtonError>
+        </ContentWrapper>
+      )}
+      {attempting && !hash && (
+        <LoadingView onDismiss={wrappedOndismiss}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.body fontSize={20}>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
+            <TYPE.body fontSize={20}>Claiming {stakingInfo?.earnedAmount?.toSignificant(4)} UNI</TYPE.body>
+          </AutoColumn>
+        </LoadingView>
+      )}
+      {hash && (
+        <SubmittedView onDismiss={wrappedOndismiss} hash={hash}>
+          <AutoColumn gap="12px" justify={'center'}>
+            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
+            <TYPE.body fontSize={20}>Withdrew UNI-V2!</TYPE.body>
+            <TYPE.body fontSize={20}>Claimed UNI!</TYPE.body>
+          </AutoColumn>
+        </SubmittedView>
+      )}
+    </Modal>
+  )
+}

src/components/earn/styled.ts

@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+import { AutoColumn } from '../Column'
+
+import uImage from '../../assets/images/big_unicorn.png'
+import xlUnicorn from '../../assets/images/xl_uni.png'
+import noise from '../../assets/images/noise.png'
+
+export const TextBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 20px;
+  width: fit-content;
+  justify-self: flex-end;
+`
+
+export const DataCard = styled(AutoColumn)<{ disabled?: boolean }>`
+  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #2172e5 100%);
+  border-radius: 12px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+`
+
+export const CardBGImage = styled.span<{ desaturate?: boolean }>`
+  background: url(${uImage});
+  width: 1000px;
+  height: 600px;
+  position: absolute;
+  border-radius: 12px;
+  opacity: 0.4;
+  top: -100px;
+  left: -100px;
+  transform: rotate(-15deg);
+  user-select: none;
+
+  ${({ desaturate }) => desaturate && `filter: saturate(0)`}
+`
+
+export const CardBGImageSmaller = styled.span<{ desaturate?: boolean }>`
+  background: url(${xlUnicorn});
+  width: 1200px;
+  height: 1200px;
+  position: absolute;
+  border-radius: 12px;
+  top: -300px;
+  left: -300px;
+  opacity: 0.4;
+  user-select: none;
+
+  ${({ desaturate }) => desaturate && `filter: saturate(0)`}
+`
+
+export const CardNoise = styled.span`
+  background: url(${noise});
+  background-size: cover;
+  mix-blend-mode: overlay;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.15;
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+`
+
+export const CardSection = styled(AutoColumn)<{ disabled?: boolean }>`
+  padding: 1rem;
+  z-index: 1;
+  opacity: ${({ disabled }) => disabled && '0.4'};
+`
+
+export const Break = styled.div`
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  height: 1px;
+`

src/components/swap/AdvancedSwapDetails.tsx

@@ -1,9 +1,9 @@
 import { Trade, TradeType } from '@uniswap/sdk'
 import React, { useContext } from 'react'
-import { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'
 import { useUserSlippageTolerance } from '../../state/user/hooks'
-import { TYPE } from '../../theme'
+import { TYPE, ExternalLink } from '../../theme'
 import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown } from '../../utils/prices'
 import { AutoColumn } from '../Column'
 import QuestionHelper from '../QuestionHelper'
@@ -12,6 +12,16 @@ import FormattedPriceImpact from './FormattedPriceImpact'
 import { SectionBreak } from './styleds'
 import SwapRoute from './SwapRoute'
 
+const InfoLink = styled(ExternalLink)`
+  width: 100%;
+  border: 1px solid ${({ theme }) => theme.bg3};
+  padding: 6px 6px;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 14px;
+  color: ${({ theme }) => theme.text1};
+`
+
 function TradeSummary({ trade, allowedSlippage }: { trade: Trade; allowedSlippage: number }) {
   const theme = useContext(ThemeContext)
   const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(trade)
@@ -73,22 +83,31 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
 
   const [allowedSlippage] = useUserSlippageTolerance()
 
-  const showRoute = trade?.route?.path?.length > 2
+  const showRoute = Boolean(trade && trade.route.path.length > 2)
 
   return (
     <AutoColumn gap="md">
-      {trade && <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />}
-      {showRoute && (
+      {trade && (
         <>
-          <SectionBreak />
+          <TradeSummary trade={trade} allowedSlippage={allowedSlippage} />
+          {showRoute && (
+            <>
+              <SectionBreak />
+              <AutoColumn style={{ padding: '0 24px' }}>
+                <RowFixed>
+                  <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+                    Route
+                  </TYPE.black>
+                  <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
+                </RowFixed>
+                <SwapRoute trade={trade} />
+              </AutoColumn>
+            </>
+          )}
           <AutoColumn style={{ padding: '0 24px' }}>
-            <RowFixed>
-              <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
-                Route
-              </TYPE.black>
-              <QuestionHelper text="Routing through these tokens resulted in the best price for your trade." />
-            </RowFixed>
-            <SwapRoute trade={trade} />
+            <InfoLink href={'https://uniswap.info/pair/' + trade.route.pairs[0].liquidityToken.address} target="_blank">
+              View pair analytics ↗
+            </InfoLink>
           </AutoColumn>
         </>
       )}

src/components/swap/AdvancedSwapDetailsDropdown.tsx

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

src/components/swap/BetterTradeLink.tsx

@@ -4,14 +4,27 @@ import { useLocation } from 'react-router'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import useParsedQueryString from '../../hooks/useParsedQueryString'
-import { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
+import useToggledVersion, { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
 
 import { StyledInternalLink } from '../../theme'
 import { YellowCard } from '../Card'
 import { AutoColumn } from '../Column'
 
-export default function BetterTradeLink({ version }: { version: Version }) {
+function VersionLinkContainer({ children }: { children: React.ReactNode }) {
   const theme = useContext(ThemeContext)
+
+  return (
+    <YellowCard style={{ marginTop: '12px', padding: '0.5rem 0.5rem' }}>
+      <AutoColumn gap="sm" justify="center" style={{ alignItems: 'center', textAlign: 'center' }}>
+        <Text lineHeight="145.23%;" fontSize={14} fontWeight={400} color={theme.text1}>
+          {children}
+        </Text>
+      </AutoColumn>
+    </YellowCard>
+  )
+}
+
+export default function BetterTradeLink({ version }: { version: Version }) {
   const location = useLocation()
   const search = useParsedQueryString()
 
@@ -26,15 +39,36 @@ export default function BetterTradeLink({ version }: { version: Version }) {
   }, [location, search, version])
 
   return (
-    <YellowCard style={{ marginTop: '12px', padding: '8px 4px' }}>
-      <AutoColumn gap="sm" justify="center" style={{ alignItems: 'center', textAlign: 'center' }}>
-        <Text lineHeight="145.23%;" fontSize={14} fontWeight={400} color={theme.text1}>
-          There is a better price for this trade on{' '}
-          <StyledInternalLink to={linkDestination}>
-            <b>Uniswap {version.toUpperCase()} ↗</b>
-          </StyledInternalLink>
-        </Text>
-      </AutoColumn>
-    </YellowCard>
+    <VersionLinkContainer>
+      There is a better price for this trade on{' '}
+      <StyledInternalLink to={linkDestination}>
+        <b>Uniswap {version.toUpperCase()} ↗</b>
+      </StyledInternalLink>
+    </VersionLinkContainer>
+  )
+}
+
+export function DefaultVersionLink() {
+  const location = useLocation()
+  const search = useParsedQueryString()
+  const version = useToggledVersion()
+
+  const linkDestination = useMemo(() => {
+    return {
+      ...location,
+      search: `?${stringify({
+        ...search,
+        use: DEFAULT_VERSION
+      })}`
+    }
+  }, [location, search])
+
+  return (
+    <VersionLinkContainer>
+      Showing {version.toUpperCase()} price.{' '}
+      <StyledInternalLink to={linkDestination}>
+        <b>Switch to Uniswap {DEFAULT_VERSION.toUpperCase()} ↗</b>
+      </StyledInternalLink>
+    </VersionLinkContainer>
   )
 }