chore(i18n): synchronize translations from crowdin [skip ci]

* add usdc price in trade price

* adjust color

* adjust usdc price

* Fix code style issues with ESLint

* round to 4

* use same format as fiat value

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

.env

@@ -1,2 +1 @@
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
-REACT_APP_WALLETCONNECT_BRIDGE_URL="https://uniswap.bridge.walletconnect.org"

.eslintrc.json

@@ -21,13 +21,45 @@
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
+  "plugins": ["simple-import-sort"],
   "rules": {
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "object-shorthand": ["error", "always"],
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "lodash",
+            "message": "Please import from 'lodash/module' directly to support tree-shaking."
+          },
+          {
+            "name": "ethers",
+            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
+          },
+          {
+            "name": "styled-components",
+            "message": "Please import from styled-components/macro."
+          }
+        ],
+        "patterns": [
+          {
+            "group": ["**/dist"],
+            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
+          },
+          {
+            "group": ["!styled-components/macro"]
+          }
+        ]
+      }
+    ]
   }
 }

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    # Files stored in repository root
+    directory: "/"
+    schedule:
+      interval: "daily"
+    allow:
+      - dependency-name: "@uniswap/token-lists"

.github/workflows/integration-tests.yaml

@@ -11,7 +11,7 @@ on:
 jobs:
   integration-tests:
     name: Cypress
-    runs-on: ubuntu-16.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -41,11 +41,10 @@ jobs:
       - run: yarn build
         env:
           CI: false
-          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+          REACT_APP_NETWORK_URL: 'https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847'
+          REACT_APP_SERVICE_WORKER: false
 
-      - run: yarn integration-test
+      - run: yarn test:e2e
         env:
           CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-
-

.github/workflows/lint.yml

@@ -4,13 +4,14 @@ on:
   push:
     branches:
       - main
-  pull_request_target:
+  pull_request:
     branches:
       - main
 
 jobs:
   run-linters:
     name: Run linters
+    if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.owner.login == github.repository_owner }}
     runs-on: ubuntu-latest
 
     steps:
@@ -39,7 +40,7 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Run linters
-        uses: wearerequired/lint-action@b98b0918aa71490373d2eca9e8e39a9bc1cc2517
+        uses: wearerequired/lint-action@36c7e6689e80d785d27a22f71d970f3a3b4fcb70
         with:
           github_token: ${{ secrets.github_token }}
           eslint: true

.github/workflows/release.yaml

@@ -23,6 +23,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           release_branches: .*
+          default_bump: false
 
   create_release:
     name: Create Release
@@ -55,7 +56,7 @@ jobs:
           pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}
 
       - name: Pin to Crust
-        uses: crustio/ipfs-crust-action@v1.0.8
+        uses: crustio/ipfs-crust-action@v2.0.3
         continue-on-error: true
         timeout-minutes: 2
         with:

.gitignore

@@ -4,8 +4,6 @@
 /src/types/v3
 /src/abis/types
 /src/locales/**/*.js
-/src/locales/**/*.ts
-/src/locales/**/*.json
 /src/locales/**/en-US.po
 /src/state/data/generated.ts
 
@@ -18,6 +16,9 @@
 # production
 /build
 
+# bundle
+/dist
+
 # misc
 .DS_Store
 .env.local

.yarnrc

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

CONTRIBUTING.md

@@ -1,46 +1,75 @@
-# Development
-
-## Install Dependencies
-
-```bash
-yarn install
-```
-
-## Generate locale files
-
-```
-yarn i18n:extract
-```
-
-## Run the interface
-
-```bash
-yarn start
-```
 
 # Contributing
 
 Thank you for your interest in contributing to the Uniswap interface! 🦄
 
+# Development
+
+## Running the interface locally
+
+1. `yarn install`
+1. `yarn start`
+
+## Creating a production build
+
+1. `yarn install`
+1. `yarn build`
+
+## Engineering standards
+
+Code merged into the `main` branch of this repository should adhere to high standards of correctness and maintainability. 
+Use your best judgment when applying these standards.  If code is in the critical path, will be frequently visited, or 
+makes large architectural changes, consider following all the standards.
+
+- Have at least one engineer approve of large code refactorings
+- At least manually test small code changes, prefer automated tests
+- Thoroughly unit test when code is not obviously correct
+- If something breaks, add automated tests so it doesn't break again
+- Add integration tests for new pages or flows
+- Verify that all CI checks pass before merging
+- Have at least one product manager or designer approve of significant UX changes
+
+## Guidelines
+
+The following points should help guide your development:
+
+- Security: the interface is safe to use
+  - Avoid adding unnecessary dependencies due to [supply chain risk](https://github.com/LavaMoat/lavamoat#further-reading-on-software-supplychain-security)
+- Reproducibility: anyone can build the interface
+  - Avoid adding steps to the development/build processes
+  - The build must be deterministic, i.e. a particular commit hash always produces the same build
+- Decentralization: anyone can run the interface
+  - An Ethereum node should be the only critical dependency 
+  - All other external dependencies should only enhance the UX ([graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation))
+- Accessibility: anyone can use the interface
+  - The interface should be responsive, small and run well on low performance devices (majority of swaps on mobile!)
+
+## Release process
+
+Releases are cut automatically from the `main` branch Monday-Thursday in the morning according to the [release workflow](./.github/workflows/release.yaml).
+
+Fix pull requests should be merged whenever ready and tested. 
+If a fix is urgently needed in production, releases can be manually triggered on [GitHub](https://github.com/Uniswap/uniswap-interface/actions/workflows/release.yaml)
+after the fix is merged into `main`.
+
+Features should not be merged into `main` until they are ready for users.
+When building larger features or collaborating with other developers, create a new branch from `main` to track its development.
+Use the automatic Vercel preview for sharing the feature to collect feedback.  
+When the feature is ready for review, create a new pull request from the feature branch into `main` and request reviews from 
+the appropriate UX reviewers (PMs or designers).
+
 ## Finding a first issue
 
 Start with issues with the label
 [`good first issue`](https://github.com/Uniswap/uniswap-interface/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).
 
-## Pull requests
-
-**Please open all pull requests against the `main` branch.**
-CI checks will run against all PRs.
-
 # Translations
 
-Help Uniswap reach a global audience! 
+Uniswap uses [Crowdin](https://crowdin.com/project/uniswap-interface) for managing translations. 
+[This workflow](./.github/workflows/crowdin.yaml) uploads new strings for translation to the Crowdin project whenever code using the [lingui translation macros](https://lingui.js.org/ref/macro.html) is merged into `main`.
 
-Uniswap uses [Crowdin](https://crowdin.com/project/uniswap-interface) 
-for managing translations. Whenever a new string is added to the project,
-it gets uploaded to Crowdin for translation by [this workflow](./.github/workflows/crowdin.yaml).
-
-Every hour, translations are synced from Crowdin in [this other workflow](./.github/workflows/crowdin-sync.yaml).
+Every hour, translations are synced back down from Crowdin to the repository in [this other workflow](./.github/workflows/crowdin-sync.yaml).
+We sync to the repository on a schedule, rather than download translations at build time, so that builds are always reproducible.
 
 You can contribute by joining Crowdin to proofread existing translations [here](https://crowdin.com/project/uniswap-interface/invite?d=93i5n413q403t4g473p443o4c3t2g3s21343u2c3n403l4b3v2735353i4g4k4l4g453j4g4o4j4e4k4b323l4a3h463s4g453q443m4e3t2b303s2a35353l403o443v293e303k4g4n4r4g483i4g4r4j4e4o473i5n4a3t463t4o4)
 

README.md

@@ -26,14 +26,19 @@ To access the Uniswap Interface, use an IPFS gateway link from the
 [latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
 or visit [app.uniswap.org](https://app.uniswap.org).
 
+## Unsupported tokens
+
+Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
+
+You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
+
 ## Contributions
 
 For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
 
 ## Accessing Uniswap V2
 
-The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for 
-Uniswap protocol V2.
+The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
 - Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
 - View V2 liquidity: https://app.uniswap.org/#/pool/v2
@@ -41,6 +46,6 @@ Uniswap protocol V2.
 - Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
 
 ## Accessing Uniswap V1
- 
-The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways 
+
+The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
 linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

cosmos.config.json

@@ -0,0 +1,7 @@
+{
+  "staticPath": "public",
+  "watchDirs": ["src"],
+  "webpack": {
+    "configPath": "react-scripts/config/webpack.config"
+  }
+}

custom-test-env.js

@@ -0,0 +1,16 @@
+// Custom test environment to provide `TextEncoder`/`TextDecoder`
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Environment = require('jest-environment-jsdom')
+
+module.exports = class CustomTestEnvironment extends Environment {
+  async setup() {
+    await super.setup()
+    if (typeof this.global.TextEncoder === 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const { TextEncoder, TextDecoder } = require('util')
+      this.global.TextEncoder = TextEncoder
+      this.global.TextDecoder = TextDecoder
+    }
+  }
+}

cypress.json

@@ -2,7 +2,6 @@
   "projectId": "yp82ef",
   "baseUrl": "http://localhost:3000",
   "pluginsFile": false,
-  "fixturesFolder": false,
   "supportFile": "cypress/support/index.js",
   "video": false,
   "defaultCommandTimeout": 10000

cypress/fixtures/feeTierDistribution.json

@@ -0,0 +1,25 @@
+{
+  "_meta": {
+    "block": {
+      "number": 99999999
+    }
+  },
+  "asToken0": [
+    {
+      "feeTier": "500",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "1"
+    },
+    {
+      "feeTier": "3000",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "7"
+    },
+    {
+      "feeTier": "10000",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "2"
+    }
+  ],
+  "asToken1": []
+}

cypress/integration/add-liquidity.test.ts

@@ -1,4 +1,14 @@
+import { CyHttpMessages } from 'cypress/types/net-stubbing'
+
+import { aliasQuery, hasQuery } from '../utils/graphql-test-utils'
+
 describe('Add Liquidity', () => {
+  beforeEach(() => {
+    cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req) => {
+      aliasQuery(req, 'feeTierDistribution')
+    })
+  })
+
   it('loads the two correct tokens', () => {
     cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/500')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
@@ -23,4 +33,32 @@ describe('Add Liquidity', () => {
     cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
   })
+
+  it('loads fee tier distribution', () => {
+    cy.fixture('feeTierDistribution.json').then((feeTierDistribution) => {
+      cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req: CyHttpMessages.IncomingHttpRequest) => {
+        if (hasQuery(req, 'feeTierDistribution')) {
+          req.alias = 'feeTierDistributionQuery'
+
+          req.reply({
+            body: {
+              data: {
+                ...feeTierDistribution,
+              },
+            },
+            headers: {
+              'access-control-allow-origin': '*',
+            },
+          })
+        }
+      })
+
+      cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+
+      cy.wait('@feeTierDistributionQuery')
+
+      cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
+      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '70%')
+    })
+  })
 })

cypress/support/commands.js

@@ -4,9 +4,9 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
+import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
-import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')

cypress/utils/graphql-test-utils.ts

@@ -0,0 +1,12 @@
+// Utility to match GraphQL mutation based on the query name
+export const hasQuery = (req: any, queryName: string) => {
+  const { body } = req
+  return body.hasOwnProperty('query') && body.query.includes(queryName)
+}
+
+// Alias query if queryName  matches
+export const aliasQuery = (req: any, queryName: string) => {
+  if (hasQuery(req, queryName)) {
+    req.alias = `${queryName}Query`
+  }
+}

lingui.config.ts

@@ -40,6 +40,7 @@ export default {
     'ru-RU',
     'sr-SP',
     'sv-SE',
+    'sw-TZ',
     'tr-TR',
     'uk-UA',
     'vi-VN',

package.json

@@ -2,30 +2,41 @@
   "name": "@uniswap/interface",
   "description": "Uniswap Interface",
   "homepage": ".",
+  "main": "dist/interface.js",
+  "module": "dist/interface.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "lib",
+    "dist"
+  ],
   "private": true,
   "devDependencies": {
-    "@ethersproject/experimental": "^5.2.0",
+    "@davatar/react": "1.6.2",
+    "@ethersproject/experimental": "^5.4.0",
+    "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
     "@graphql-codegen/typescript": "1.22.3",
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
-    "@lingui/loader": "^3.9.0",
     "@lingui/macro": "^3.9.0",
     "@lingui/react": "^3.9.0",
-    "@metamask/jazzicon": "^2.0.0",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
-    "@reduxjs/toolkit": "^1.6.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "@typechain/ethers-v5": "^7.0.0",
+    "@types/array.prototype.flat": "^1.2.1",
+    "@types/array.prototype.flatmap": "^1.2.2",
+    "@types/d3": "^6.7.1",
     "@types/jest": "^25.2.1",
     "@types/lingui__core": "^2.7.1",
     "@types/lingui__macro": "^2.7.4",
     "@types/lingui__react": "^2.8.3",
-    "@types/lodash.clonedeep": "^4.5.6",
-    "@types/lodash.flatmap": "^4.5.6",
     "@types/luxon": "^1.24.4",
     "@types/ms.macro": "^2.0.0",
     "@types/multicodec": "^1.0.0",
@@ -48,47 +59,52 @@
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/token-lists": "^1.0.0-beta.19",
+    "@uniswap/sdk-core": "^3.0.1",
+    "@uniswap/token-lists": "^1.0.0-beta.26",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^3.0.0-alpha.2",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@uniswap/v3-sdk": "^3.0.0-alpha.9",
+    "@uniswap/v3-sdk": "^3.4.1",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/portis-connector": "^6.0.9",
-    "@web3-react/walletconnect-connector": "^6.2.0",
-    "@web3-react/walletlink-connector": "^6.2.0",
+    "@web3-react/walletconnect-connector": "^7.0.2-alpha.0",
+    "@web3-react/walletlink-connector": "^6.2.3",
     "ajv": "^6.12.3",
+    "array.prototype.flat": "^1.2.4",
+    "array.prototype.flatmap": "^1.2.4",
     "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
-    "cross-env": "^7.0.2",
-    "cypress": "^4.11.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^7.7.0",
+    "d3": "^7.0.0",
     "eslint": "^7.11.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.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "ethers": "^5.4.6",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
     "inter-ui": "^3.13.1",
-    "lightweight-charts": "^3.3.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.flatmap": "^4.5.0",
+    "jest-styled-components": "^7.0.5",
     "luxon": "^1.25.0",
+    "microbundle": "^0.13.3",
     "ms.macro": "^2.0.0",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
-    "node-vibrant": "^3.1.5",
+    "node-vibrant": "^3.2.1-alpha.1",
     "polished": "^3.3.2",
+    "polyfill-object.fromentries": "^1.0.1",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
-    "react-device-detect": "^1.6.2",
+    "react-cosmos": "^5.6.3",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
@@ -103,39 +119,38 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
-    "redux-devtools-extension": "^2.13.9",
     "redux-localstorage-simple": "^2.3.1",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
     "styled-components": "^5.3.0",
-    "styled-system": "^5.1.5",
     "typechain": "^5.0.0",
     "typescript": "^4.2.3",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "wcag-contrast": "^3.0.0",
+    "web-vitals": "^2.1.0",
     "workbox-core": "^6.1.0",
-    "workbox-expiration": "^6.1.0",
     "workbox-precaching": "^6.1.0",
-    "workbox-routing": "^6.1.0",
-    "workbox-strategies": "^6.1.0"
+    "workbox-routing": "^6.1.0"
   },
   "resolutions": {
-    "@walletconnect/web3-provider": "1.5.0-rc.5"
+    "@walletconnect/ethereum-provider": "1.6.5"
   },
   "scripts": {
-    "compile-contract-types": "yarn compile-external-abi-types && yarn compile-v3-contract-types",
-    "compile-external-abi-types": "typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
-    "compile-v3-contract-types": "typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
-    "build": "yarn compile-contract-types && yarn graphql:generate && yarn i18n:extract && yarn i18n:compile && react-scripts build",
-    "i18n:extract": "lingui extract --locale en-US",
-    "i18n:compile": "lingui compile",
-    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
+    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
+    "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
     "graphql:generate": "graphql-codegen --config codegen.yml",
-    "postinstall": "yarn compile-contract-types",
-    "start": "yarn compile-contract-types && react-scripts start",
-    "test": "react-scripts test --env=jsdom",
-    "prestart": "yarn graphql:generate && touch src/locales/en-US.po"
+    "prei18n:extract": "touch src/locales/en-US.po",
+    "i18n:extract": "lingui extract --locale en-US",
+    "i18n:compile": "yarn i18n:extract && lingui compile",
+    "postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=./custom-test-env.js",
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "bundle": "microbundle --tsconfig tsconfig.lib.json src/lib/index.tsx --format esm,cjs",
+    "cosmos": "open http://localhost:5000 && cross-env FAST_REFRESH=false cosmos"
   },
   "eslintConfig": {
     "extends": "react-app",

public/images/256x256_App_Icon_Pink.svg

@@ -0,0 +1,11 @@
+<svg width="257" height="256" viewBox="0 0 257 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.4347 60.2768C94.3434 59.9524 94.2552 59.9143 95.2394 59.7631C97.1254 59.473 101.579 59.8683 104.648 60.5981C111.812 62.3011 118.331 66.6637 125.29 74.4117L127.139 76.4701L129.784 76.0449C140.926 74.2544 152.26 75.6774 161.741 80.057C164.349 81.2619 168.461 83.6603 168.975 84.2766C169.138 84.473 169.439 85.7374 169.642 87.0866C170.347 91.7544 169.994 95.3323 168.567 98.0046C167.79 99.4588 167.746 99.9197 168.268 101.164C168.686 102.157 169.848 102.892 170.999 102.891C173.355 102.888 175.891 99.0791 177.066 93.78L177.532 91.6751L178.457 92.7224C183.528 98.4681 187.512 106.304 188.196 111.881L188.374 113.336L187.522 112.014C186.054 109.739 184.58 108.19 182.693 106.941C179.29 104.69 175.693 103.923 166.164 103.421C157.559 102.968 152.689 102.233 147.859 100.658C139.643 97.9792 135.501 94.4114 125.74 81.6059C121.405 75.918 118.726 72.7711 116.06 70.2368C110.004 64.4784 104.053 61.4584 96.4347 60.2768Z" fill="#FF007A"/>
+<path d="M170.916 72.9763C171.132 69.1649 171.649 66.651 172.688 64.3552C173.099 63.4465 173.485 62.7027 173.544 62.7027C173.604 62.7027 173.425 63.3735 173.147 64.1931C172.391 66.4212 172.267 69.4687 172.788 73.0144C173.448 77.5132 173.824 78.1623 178.579 83.022C180.809 85.3014 183.403 88.1762 184.344 89.4105L186.054 91.6547L184.344 90.0508C182.253 88.0895 177.444 84.2644 176.381 83.7176C175.669 83.3509 175.563 83.3573 175.124 83.7946C174.719 84.1975 174.634 84.803 174.577 87.6654C174.49 92.1267 173.882 94.9901 172.414 97.8533C171.621 99.4019 171.495 99.0714 172.214 97.3235C172.75 96.0184 172.805 95.4446 172.801 91.1259C172.792 82.4485 171.762 80.3624 165.721 76.7887C164.19 75.8834 161.668 74.5778 160.117 73.8872C158.565 73.1965 157.333 72.595 157.378 72.5501C157.549 72.3798 163.441 74.0995 165.812 75.0117C169.339 76.3686 169.922 76.5444 170.35 76.3807C170.637 76.271 170.776 75.4347 170.916 72.9763Z" fill="#FF007A"/>
+<path d="M100.497 87.8209C96.2514 81.9758 93.6246 73.0138 94.1933 66.3144L94.3691 64.2413L95.3355 64.4176C97.1504 64.7486 100.28 65.9133 101.745 66.8033C105.766 69.2453 107.506 72.4605 109.277 80.7164C109.796 83.1346 110.477 85.8712 110.79 86.7976C111.294 88.2889 113.199 91.7721 114.748 94.0343C115.864 95.6636 115.123 96.4356 112.657 96.213C108.89 95.873 103.788 92.3519 100.497 87.8209Z" fill="#FF007A"/>
+<path d="M165.766 131.323C145.925 123.335 138.937 116.4 138.937 104.7C138.937 102.979 138.996 101.57 139.068 101.57C139.14 101.57 139.908 102.138 140.774 102.833C144.797 106.06 149.303 107.438 161.776 109.258C169.115 110.328 173.245 111.193 177.056 112.457C189.166 116.473 196.658 124.624 198.445 135.725C198.964 138.951 198.66 145 197.818 148.188C197.153 150.706 195.125 155.245 194.588 155.419C194.439 155.468 194.292 154.896 194.254 154.118C194.05 149.95 191.943 145.891 188.406 142.851C184.383 139.395 178.979 136.643 165.766 131.323Z" fill="#FF007A"/>
+<path d="M151.837 134.642C151.588 133.163 151.157 131.273 150.879 130.444L150.372 128.935L151.313 129.991C152.614 131.451 153.642 133.32 154.514 135.81C155.179 137.71 155.254 138.275 155.249 141.362C155.244 144.393 155.161 145.029 154.546 146.739C153.578 149.436 152.376 151.348 150.359 153.4C146.735 157.089 142.075 159.131 135.351 159.978C134.182 160.125 130.775 160.373 127.78 160.529C120.232 160.922 115.264 161.733 110.801 163.3C110.159 163.525 109.586 163.662 109.528 163.604C109.347 163.425 112.386 161.613 114.897 160.404C118.436 158.699 121.96 157.768 129.854 156.454C133.754 155.804 137.781 155.016 138.804 154.702C148.461 151.741 153.426 144.1 151.837 134.642Z" fill="#FF007A"/>
+<path d="M160.932 150.795C158.296 145.128 157.691 139.657 159.135 134.554C159.289 134.009 159.538 133.562 159.687 133.562C159.837 133.562 160.459 133.899 161.07 134.31C162.284 135.127 164.721 136.505 171.212 140.044C179.311 144.46 183.929 147.879 187.07 151.786C189.82 155.208 191.522 159.104 192.341 163.856C192.805 166.548 192.533 173.024 191.843 175.735C189.665 184.281 184.604 190.993 177.385 194.911C176.327 195.484 175.377 195.955 175.275 195.958C175.172 195.96 175.557 194.98 176.131 193.78C178.56 188.703 178.836 183.765 177 178.269C175.876 174.904 173.584 170.797 168.956 163.857C163.575 155.788 162.256 153.641 160.932 150.795Z" fill="#FF007A"/>
+<path d="M86.4067 181.371C93.7696 175.154 102.931 170.738 111.276 169.382C114.872 168.798 120.864 169.03 124.194 169.882C129.532 171.248 134.307 174.308 136.791 177.954C139.218 181.517 140.259 184.622 141.343 191.53C141.771 194.255 142.236 196.992 142.377 197.611C143.191 201.192 144.775 204.054 146.739 205.491C149.857 207.773 155.227 207.915 160.509 205.855C161.405 205.505 162.184 205.263 162.238 205.318C162.43 205.508 159.77 207.288 157.894 208.226C155.369 209.487 153.361 209.975 150.693 209.975C145.855 209.975 141.839 207.514 138.487 202.495C137.828 201.508 136.346 198.55 135.193 195.922C131.655 187.851 129.907 185.393 125.799 182.702C122.223 180.361 117.612 179.941 114.143 181.642C109.586 183.876 108.315 189.699 111.579 193.39C112.876 194.856 115.295 196.121 117.273 196.367C120.973 196.828 124.153 194.013 124.153 190.277C124.153 187.851 123.221 186.467 120.873 185.407C117.668 183.961 114.222 185.652 114.238 188.663C114.245 189.947 114.805 190.754 116.092 191.336C116.918 191.71 116.937 191.74 116.263 191.6C113.322 190.99 112.633 187.444 114.998 185.09C117.837 182.264 123.709 183.511 125.725 187.368C126.572 188.988 126.67 192.215 125.932 194.164C124.279 198.525 119.46 200.819 114.571 199.571C111.243 198.721 109.887 197.801 105.874 193.667C98.9012 186.484 96.1941 185.092 86.141 183.523L84.2146 183.222L86.4067 181.371Z" fill="#FF007A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8241 20.4645C57.1114 48.7285 93.0139 92.734 94.7963 95.1977C96.2679 97.232 95.7141 99.0609 93.1929 100.494C91.7909 101.291 88.9084 102.099 87.4652 102.099C85.8329 102.099 83.9939 101.313 82.6548 100.042C81.7084 99.1447 77.8882 93.4402 69.0694 79.7566C62.3216 69.2863 56.6747 60.6007 56.5206 60.4553C56.1644 60.119 56.1705 60.1303 68.3813 81.9787C76.0487 95.6979 78.6371 100.548 78.6371 101.197C78.6371 102.516 78.2771 103.21 76.6495 105.025C73.9363 108.052 72.7235 111.453 71.8479 118.492C70.8664 126.382 68.1064 131.955 60.4577 141.494C55.9803 147.078 55.2477 148.102 54.118 150.352C52.695 153.187 52.3037 154.774 52.1451 158.353C51.9775 162.137 52.3039 164.581 53.46 168.199C54.4721 171.366 55.5285 173.458 58.2292 177.641C60.5599 181.251 61.9019 183.933 61.9019 184.983C61.9019 185.818 62.0613 185.819 65.6729 185.003C74.316 183.052 81.3341 179.619 85.2812 175.412C87.724 172.808 88.2975 171.371 88.3161 167.802C88.3283 165.469 88.2462 164.98 87.6153 163.637C86.5884 161.452 84.7188 159.635 80.5983 156.818C75.1992 153.127 72.8932 150.156 72.2562 146.07C71.7337 142.717 72.3399 140.351 75.3267 134.091C78.4182 127.612 79.1843 124.85 79.7025 118.319C80.0372 114.1 80.5008 112.435 81.7131 111.1C82.9776 109.707 84.1158 109.235 87.245 108.808C92.3466 108.111 95.5951 106.791 98.2652 104.33C100.582 102.196 101.551 100.139 101.7 97.0427L101.813 94.6959L100.518 93.1867C95.8304 87.7209 30.6848 16.168 30.3963 16.168C30.3347 16.168 31.8773 18.1015 33.8241 20.4645ZM64.5333 162.634C65.5932 160.757 65.0301 158.344 63.2572 157.166C61.5821 156.052 58.9799 156.576 58.9799 158.028C58.9799 158.471 59.2248 158.793 59.7768 159.077C60.7063 159.555 60.7738 160.093 60.0425 161.192C59.3019 162.306 59.3616 163.284 60.2111 163.949C61.5802 165.021 63.5183 164.432 64.5333 162.634Z" fill="#FF007A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M105.032 110.039C102.637 110.774 100.309 113.312 99.5884 115.974C99.1487 117.598 99.3982 120.446 100.057 121.325C101.121 122.746 102.149 123.12 104.935 123.101C110.389 123.063 115.131 120.724 115.682 117.799C116.134 115.402 114.051 112.08 111.183 110.622C109.703 109.87 106.555 109.571 105.032 110.039ZM111.408 115.024C112.249 113.829 111.881 112.537 110.451 111.664C107.726 110 103.607 111.377 103.607 113.95C103.607 115.231 105.755 116.629 107.724 116.629C109.035 116.629 110.829 115.847 111.408 115.024Z" fill="#FF007A"/>
+</svg>

public/index.html

@@ -2,27 +2,31 @@
 <html translate="no">
   <head>
     <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
+      Only files inside the `public` folder can be referenced from the HTML.
+    -->
     <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#ff007a" />
     <meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" />
+
     <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="preconnect" href="https://www.google-analytics.com/">
+
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin>
 
     <style>
         * {
@@ -30,9 +34,23 @@
             box-sizing: border-box;
         }
 
+        /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+        @font-face {
+            font-family: 'Inter custom';
+            font-weight: 100 900;
+            font-style: normal;
+            font-display: block;
+            font-named-instance: 'Regular';
+            src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2 supports variations(gvar)"),
+                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2-variations"),
+                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2");
+        }
+
         @supports (font-variation-settings: normal) {
             * {
-                font-family: 'Inter var', sans-serif;
+                font-family: 'Inter custom', sans-serif;
             }
         }
 
@@ -83,8 +101,6 @@
             }
         }
     </style>
-
-    <title>Uniswap Interface</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -92,7 +108,7 @@
     <!-- The root is the container of the app -->
     <div id="root">
       <!-- Triggers the font to load immediately and then is replaced by the app -->
-      <div style="visibility: hidden">X</div>
+      <div>&emsp;</div>
     </div>
 
     <div id="background-radial-gradient"></div>

public/manifest.json

@@ -2,6 +2,7 @@
   "background_color": "#fff",
   "display": "standalone",
   "homepage_url": "https://app.uniswap.org",
+  "providedBy": { "name": "Uniswap", "url": "https://uniswap.org" },
   "icons": [
     {
       "src": "./images/192x192_App_Icon.png",
@@ -18,6 +19,8 @@
   ],
   "orientation": "portrait",
   "name": "Uniswap",
+  "description": "Swap or provide liquidity on the Uniswap Protocol",
+  "iconPath": "./images/256x256_App_Icon_Pink.svg",
   "short_name": "Uniswap",
   "start_url": ".",
   "theme_color": "#ff007a"

src/assets/svg/auto_router.svg

@@ -0,0 +1,10 @@
+<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+ <linearGradient id="gradient1" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(95)">
+    <stop id="stop1" offset="0" stop-color="#2274E2"/>
+    <stop id="stop1" offset="0.5" stop-color="#2274E2"/>
+    <stop id="stop2" offset="1" stop-color="#3FB672" />
+  </linearGradient>
+  </defs>
+<path d="M16 16C10 16 9 10 5 10M16 16C16 17.6569 17.3431 19 19 19C20.6569 19 22 17.6569 22 16C22 14.3431 20.6569 13 19 13C17.3431 13 16 14.3431 16 16ZM5 10C9 10 10 4 16 4M5 10H1.5M16 4C16 5.65685 17.3431 7 19 7C20.6569 7 22 5.65685 22 4C22 2.34315 20.6569 1 19 1C17.3431 1 16 2.34315 16 4Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="url(#gradient1)" />
+</svg>

src/assets/svg/logo.svg

@@ -1,13 +1,13 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="15" viewBox="0 0 14 15" fill="black" 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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
 </g>
 </svg>

src/assets/svg/logo_white.svg

@@ -1,11 +0,0 @@
-<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.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="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.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="white"/>
-<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="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.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="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.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="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/assets/svg/optimistic_ethereum.svg

@@ -0,0 +1,16 @@
+<svg width="170" height="168" viewBox="0 0 170 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path opacity="0.6" d="M85.05 168C132.022 168 170.1 130.105 170.1 83.3593C170.1 36.6135 0 36.6135 0 83.3593C0 130.105 38.0782 168 85.05 168Z" fill="#FF505F"/>
+<path opacity="0.6" d="M85.05 168C132.022 168 170.1 130.105 170.1 83.3593C170.1 36.6135 0 36.6135 0 83.3593C0 130.105 38.0782 168 85.05 168Z" fill="#FF0320"/>
+<path d="M85.05 0C132.022 0 170.1 37.8949 170.1 84.6407C170.1 131.386 0 131.386 0 84.6407C0 37.8949 38.0782 0 85.05 0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.665 64.0394L112.444 12.3742L89.0263 78.9477L144.665 64.0394Z" fill="#FF4E65"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.777 64.215L112.444 12.3742L165.349 58.4347L143.777 64.215Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M144.551 63.613L142.479 124.467L88.912 78.5213L144.551 63.613Z" fill="#D0001A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.663 63.7886L142.479 124.467L165.235 58.0083L143.663 63.7886Z" fill="#FF697B"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="170" height="168" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/static_route.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 18C19 18.5523 18.5523 19 18 19V21C19.6569 21 21 19.6569 21 18H19ZM18 19C17.4477 19 17 18.5523 17 18H15C15 19.6569 16.3431 21 18 21V19ZM17 18C17 17.4477 17.4477 17 18 17V15C16.3431 15 15 16.3431 15 18H17ZM18 17C18.5523 17 19 17.4477 19 18H21C21 16.3431 19.6569 15 18 15V17ZM8 7H16V5H8V7ZM16 11H8V13H16V11ZM8 19H16V17H8V19ZM4 15C4 17.2091 5.79086 19 8 19V17C6.89543 17 6 16.1046 6 15H4ZM8 11C5.79086 11 4 12.7909 4 15H6C6 13.8954 6.89543 13 8 13V11ZM18 9C18 10.1046 17.1046 11 16 11V13C18.2091 13 20 11.2091 20 9H18ZM16 7C17.1046 7 18 7.89543 18 9H20C20 6.79086 18.2091 5 16 5V7ZM7 6C7 6.55228 6.55228 7 6 7V9C7.65685 9 9 7.65685 9 6H7ZM6 7C5.44772 7 5 6.55228 5 6H3C3 7.65685 4.34315 9 6 9V7ZM5 6C5 5.44772 5.44772 5 6 5V3C4.34315 3 3 4.34315 3 6H5ZM6 5C6.55228 5 7 5.44772 7 6H9C9 4.34315 7.65685 3 6 3V5Z"/>
+</svg>

src/components/AccountDetails/Copy.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import styled from 'styled-components/macro'
-import useCopyClipboard from '../../hooks/useCopyClipboard'
-
-import { LinkStyledButton } from '../../theme'
-import { CheckCircle, Copy } from 'react-feather'
 import { Trans } from '@lingui/macro'
+import React from 'react'
+import { CheckCircle, Copy } from 'react-feather'
+import styled from 'styled-components/macro'
+
+import useCopyClipboard from '../../hooks/useCopyClipboard'
+import { LinkStyledButton } from '../../theme'
 
 const CopyIcon = styled(LinkStyledButton)`
   color: ${({ theme }) => theme.text3};

src/components/AccountDetails/Transaction.tsx

@@ -1,14 +1,13 @@
-import styled from 'styled-components/macro'
 import { CheckCircle, Triangle } from 'react-feather'
+import styled from 'styled-components/macro'
 
 import { useActiveWeb3React } from '../../hooks/web3'
-import { ExternalLink } from '../../theme'
 import { useAllTransactions } from '../../state/transactions/hooks'
+import { ExternalLink } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { RowFixed } from '../Row'
 import Loader from '../Loader'
-
-const TransactionWrapper = styled.div``
+import { RowFixed } from '../Row'
+import { TransactionSummary } from './TransactionSummary'
 
 const TransactionStatusText = styled.div`
   margin-right: 0.5rem;
@@ -40,26 +39,28 @@ export default function Transaction({ hash }: { hash: string }) {
   const allTransactions = useAllTransactions()
 
   const tx = allTransactions?.[hash]
-  const summary = tx?.summary
+  const info = tx?.info
   const pending = !tx?.receipt
   const success = !pending && tx && (tx.receipt?.status === 1 || typeof tx.receipt?.status === 'undefined')
 
   if (!chainId) return null
 
   return (
-    <TransactionWrapper>
+    <div>
       <TransactionState
         href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
         pending={pending}
         success={success}
       >
         <RowFixed>
-          <TransactionStatusText>{summary ?? hash} ↗</TransactionStatusText>
+          <TransactionStatusText>
+            <TransactionSummary info={info} /> ↗
+          </TransactionStatusText>
         </RowFixed>
         <IconWrapper pending={pending} success={success}>
           {pending ? <Loader /> : success ? <CheckCircle size="16" /> : <Triangle size="16" />}
         </IconWrapper>
       </TransactionState>
-    </TransactionWrapper>
+    </div>
   )
 }

src/components/AccountDetails/TransactionSummary.tsx

@@ -0,0 +1,329 @@
+import { Trans } from '@lingui/macro'
+import { Fraction, TradeType } from '@uniswap/sdk-core'
+import JSBI from 'jsbi'
+
+import { useCurrency, useToken } from '../../hooks/Tokens'
+import useENSName from '../../hooks/useENSName'
+import { VoteOption } from '../../state/governance/types'
+import {
+  AddLiquidityV2PoolTransactionInfo,
+  AddLiquidityV3PoolTransactionInfo,
+  ApproveTransactionInfo,
+  ClaimTransactionInfo,
+  CollectFeesTransactionInfo,
+  CreateV3PoolTransactionInfo,
+  DelegateTransactionInfo,
+  DepositLiquidityStakingTransactionInfo,
+  ExactInputSwapTransactionInfo,
+  ExactOutputSwapTransactionInfo,
+  MigrateV2LiquidityToV3TransactionInfo,
+  RemoveLiquidityV3TransactionInfo,
+  SubmitProposalTransactionInfo,
+  TransactionInfo,
+  TransactionType,
+  VoteTransactionInfo,
+  WithdrawLiquidityStakingTransactionInfo,
+  WrapTransactionInfo,
+} from '../../state/transactions/actions'
+
+function formatAmount(amountRaw: string, decimals: number, sigFigs: number): string {
+  return new Fraction(amountRaw, JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))).toSignificant(sigFigs)
+}
+
+function FormattedCurrencyAmount({
+  rawAmount,
+  symbol,
+  decimals,
+  sigFigs,
+}: {
+  rawAmount: string
+  symbol: string
+  decimals: number
+  sigFigs: number
+}) {
+  return (
+    <>
+      {formatAmount(rawAmount, decimals, sigFigs)} {symbol}
+    </>
+  )
+}
+
+function FormattedCurrencyAmountManaged({
+  rawAmount,
+  currencyId,
+  sigFigs = 6,
+}: {
+  rawAmount: string
+  currencyId: string
+  sigFigs: number
+}) {
+  const currency = useCurrency(currencyId)
+  return currency ? (
+    <FormattedCurrencyAmount
+      rawAmount={rawAmount}
+      decimals={currency.decimals}
+      sigFigs={sigFigs}
+      symbol={currency.symbol ?? '???'}
+    />
+  ) : null
+}
+
+function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransactionInfo }) {
+  const { ENSName } = useENSName()
+  return typeof uniAmountRaw === 'string' ? (
+    <Trans>
+      Claim <FormattedCurrencyAmount rawAmount={uniAmountRaw} symbol={'UNI'} decimals={18} sigFigs={4} /> for{' '}
+      {ENSName ?? recipient}
+    </Trans>
+  ) : (
+    <Trans>Claim UNI reward for {ENSName ?? recipient}</Trans>
+  )
+}
+
+function SubmitProposalTransactionSummary({}: { info: SubmitProposalTransactionInfo }) {
+  return <Trans>Submit new proposal</Trans>
+}
+
+function ApprovalSummary({ info }: { info: ApproveTransactionInfo }) {
+  const token = useToken(info.tokenAddress)
+
+  return <Trans>Approve {token?.symbol}</Trans>
+}
+
+function VoteSummary({ info }: { info: VoteTransactionInfo }) {
+  const proposalKey = `${info.governorAddress}/${info.proposalId}`
+  if (info.reason && info.reason.trim().length > 0) {
+    switch (info.decision) {
+      case VoteOption.For:
+        return <Trans>Vote for proposal {proposalKey}</Trans>
+      case VoteOption.Abstain:
+        return <Trans>Vote to abstain on proposal {proposalKey}</Trans>
+      case VoteOption.Against:
+        return <Trans>Vote against proposal {proposalKey}</Trans>
+    }
+  } else {
+    switch (info.decision) {
+      case VoteOption.For:
+        return (
+          <Trans>
+            Vote for proposal {proposalKey} with reason &quot;{info.reason}&quot;
+          </Trans>
+        )
+      case VoteOption.Abstain:
+        return (
+          <Trans>
+            Vote to abstain on proposal {proposalKey} with reason &quot;{info.reason}&quot;
+          </Trans>
+        )
+      case VoteOption.Against:
+        return (
+          <Trans>
+            Vote against proposal {proposalKey} with reason &quot;{info.reason}&quot;
+          </Trans>
+        )
+    }
+  }
+}
+
+function DelegateSummary({ info: { delegatee } }: { info: DelegateTransactionInfo }) {
+  const { ENSName } = useENSName(delegatee)
+  return <Trans>Delegate voting power to {ENSName ?? delegatee}</Trans>
+}
+
+function WrapSummary({ info: { currencyAmountRaw, unwrapped } }: { info: WrapTransactionInfo }) {
+  if (unwrapped) {
+    return (
+      <Trans>
+        Unwrap <FormattedCurrencyAmount rawAmount={currencyAmountRaw} symbol={'WETH'} decimals={18} sigFigs={6} /> to
+        ETH
+      </Trans>
+    )
+  } else {
+    return (
+      <Trans>
+        Wrap <FormattedCurrencyAmount rawAmount={currencyAmountRaw} symbol={'ETH'} decimals={18} sigFigs={6} /> to WETH
+      </Trans>
+    )
+  }
+}
+
+function DepositLiquidityStakingSummary({}: { info: DepositLiquidityStakingTransactionInfo }) {
+  // not worth rendering the tokens since you can should no longer deposit liquidity in the staking contracts
+  // todo: deprecate and delete the code paths that allow this, show user more information
+  return <Trans>Deposit liquidity</Trans>
+}
+
+function WithdrawLiquidityStakingSummary({}: { info: WithdrawLiquidityStakingTransactionInfo }) {
+  return <Trans>Withdraw deposited liquidity</Trans>
+}
+
+function MigrateLiquidityToV3Summary({
+  info: { baseCurrencyId, quoteCurrencyId },
+}: {
+  info: MigrateV2LiquidityToV3TransactionInfo
+}) {
+  const baseCurrency = useCurrency(baseCurrencyId)
+  const quoteCurrency = useCurrency(quoteCurrencyId)
+
+  return (
+    <Trans>
+      Migrate {baseCurrency?.symbol}/{quoteCurrency?.symbol} liquidity to V3
+    </Trans>
+  )
+}
+
+function CreateV3PoolSummary({ info: { quoteCurrencyId, baseCurrencyId } }: { info: CreateV3PoolTransactionInfo }) {
+  const baseCurrency = useCurrency(baseCurrencyId)
+  const quoteCurrency = useCurrency(quoteCurrencyId)
+
+  return (
+    <Trans>
+      Create {baseCurrency?.symbol}/{quoteCurrency?.symbol} V3 pool
+    </Trans>
+  )
+}
+
+function CollectFeesSummary({ info: { currencyId0, currencyId1 } }: { info: CollectFeesTransactionInfo }) {
+  const currency0 = useCurrency(currencyId0)
+  const currency1 = useCurrency(currencyId1)
+
+  return (
+    <Trans>
+      Collect {currency0?.symbol}/{currency1?.symbol} fees
+    </Trans>
+  )
+}
+
+function RemoveLiquidityV3Summary({
+  info: { baseCurrencyId, quoteCurrencyId, expectedAmountBaseRaw, expectedAmountQuoteRaw },
+}: {
+  info: RemoveLiquidityV3TransactionInfo
+}) {
+  return (
+    <Trans>
+      Remove{' '}
+      <FormattedCurrencyAmountManaged rawAmount={expectedAmountBaseRaw} currencyId={baseCurrencyId} sigFigs={3} /> and{' '}
+      <FormattedCurrencyAmountManaged rawAmount={expectedAmountQuoteRaw} currencyId={quoteCurrencyId} sigFigs={3} />
+    </Trans>
+  )
+}
+
+function AddLiquidityV3PoolSummary({
+  info: { createPool, quoteCurrencyId, baseCurrencyId },
+}: {
+  info: AddLiquidityV3PoolTransactionInfo
+}) {
+  const baseCurrency = useCurrency(baseCurrencyId)
+  const quoteCurrency = useCurrency(quoteCurrencyId)
+
+  return createPool ? (
+    <Trans>
+      Create pool and add {baseCurrency?.symbol}/{quoteCurrency?.symbol} V3 liquidity
+    </Trans>
+  ) : (
+    <Trans>
+      Add {baseCurrency?.symbol}/{quoteCurrency?.symbol} V3 liquidity
+    </Trans>
+  )
+}
+
+function AddLiquidityV2PoolSummary({
+  info: { quoteCurrencyId, expectedAmountBaseRaw, expectedAmountQuoteRaw, baseCurrencyId },
+}: {
+  info: AddLiquidityV2PoolTransactionInfo
+}) {
+  return (
+    <Trans>
+      Add <FormattedCurrencyAmountManaged rawAmount={expectedAmountBaseRaw} currencyId={baseCurrencyId} sigFigs={3} />{' '}
+      and <FormattedCurrencyAmountManaged rawAmount={expectedAmountQuoteRaw} currencyId={quoteCurrencyId} sigFigs={3} />{' '}
+      to Uniswap V2
+    </Trans>
+  )
+}
+
+function SwapSummary({ info }: { info: ExactInputSwapTransactionInfo | ExactOutputSwapTransactionInfo }) {
+  if (info.tradeType === TradeType.EXACT_INPUT) {
+    return (
+      <Trans>
+        Swap exactly{' '}
+        <FormattedCurrencyAmountManaged
+          rawAmount={info.inputCurrencyAmountRaw}
+          currencyId={info.inputCurrencyId}
+          sigFigs={6}
+        />{' '}
+        for{' '}
+        <FormattedCurrencyAmountManaged
+          rawAmount={info.expectedOutputCurrencyAmountRaw}
+          currencyId={info.outputCurrencyId}
+          sigFigs={6}
+        />
+      </Trans>
+    )
+  } else {
+    return (
+      <Trans>
+        Swap{' '}
+        <FormattedCurrencyAmountManaged
+          rawAmount={info.expectedInputCurrencyAmountRaw}
+          currencyId={info.inputCurrencyId}
+          sigFigs={6}
+        />{' '}
+        for exactly{' '}
+        <FormattedCurrencyAmountManaged
+          rawAmount={info.outputCurrencyAmountRaw}
+          currencyId={info.outputCurrencyId}
+          sigFigs={6}
+        />
+      </Trans>
+    )
+  }
+}
+
+export function TransactionSummary({ info }: { info: TransactionInfo }) {
+  switch (info.type) {
+    case TransactionType.ADD_LIQUIDITY_V3_POOL:
+      return <AddLiquidityV3PoolSummary info={info} />
+
+    case TransactionType.ADD_LIQUIDITY_V2_POOL:
+      return <AddLiquidityV2PoolSummary info={info} />
+
+    case TransactionType.CLAIM:
+      return <ClaimSummary info={info} />
+
+    case TransactionType.DEPOSIT_LIQUIDITY_STAKING:
+      return <DepositLiquidityStakingSummary info={info} />
+
+    case TransactionType.WITHDRAW_LIQUIDITY_STAKING:
+      return <WithdrawLiquidityStakingSummary info={info} />
+
+    case TransactionType.SWAP:
+      return <SwapSummary info={info} />
+
+    case TransactionType.APPROVAL:
+      return <ApprovalSummary info={info} />
+
+    case TransactionType.VOTE:
+      return <VoteSummary info={info} />
+
+    case TransactionType.DELEGATE:
+      return <DelegateSummary info={info} />
+
+    case TransactionType.WRAP:
+      return <WrapSummary info={info} />
+
+    case TransactionType.CREATE_V3_POOL:
+      return <CreateV3PoolSummary info={info} />
+
+    case TransactionType.MIGRATE_LIQUIDITY_V3:
+      return <MigrateLiquidityToV3Summary info={info} />
+
+    case TransactionType.COLLECT_FEES:
+      return <CollectFeesSummary info={info} />
+
+    case TransactionType.REMOVE_LIQUIDITY_V3:
+      return <RemoveLiquidityV3Summary info={info} />
+
+    case TransactionType.SUBMIT_PROPOSAL:
+      return <SubmitProposalTransactionSummary info={info} />
+  }
+}

src/components/AccountDetails/index.tsx

@@ -1,27 +1,27 @@
+import { Trans } from '@lingui/macro'
 import { useCallback, useContext } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import { ExternalLink as LinkIcon } from 'react-feather'
+import { useAppDispatch } from 'state/hooks'
+import styled, { ThemeContext } from 'styled-components/macro'
+
+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 { ReactComponent as Close } from '../../assets/images/x.svg'
+import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { clearAllTransactions } from '../../state/transactions/actions'
+import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
 import { shortenAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { ButtonSecondary } from '../Button'
+import Identicon from '../Identicon'
 import { AutoRow } from '../Row'
 import Copy from './Copy'
 import Transaction from './Transaction'
 
-import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
-import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
-import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
-import PortisIcon from '../../assets/images/portisIcon.png'
-import Identicon from '../Identicon'
-import { ButtonSecondary } from '../Button'
-import { ExternalLink as LinkIcon } from 'react-feather'
-import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
-import { Trans } from '@lingui/macro'
-import { useAppDispatch } from 'state/hooks'
-
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;

src/components/AddressInputPanel/index.tsx

@@ -1,6 +1,7 @@
 import { t, Trans } from '@lingui/macro'
-import { useContext, useCallback, ReactNode } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import { ReactNode, useCallback, useContext } from 'react'
+import styled, { ThemeContext } from 'styled-components/macro'
+
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink, TYPE } from '../../theme'

src/components/Badge/RangeBadge.tsx

@@ -1,9 +1,9 @@
+import { Trans } from '@lingui/macro'
 import Badge, { BadgeVariant } from 'components/Badge'
+import { AlertCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
-import { Trans } from '@lingui/macro'
-import { AlertCircle } from 'react-feather'
 
 const BadgeWrapper = styled.div`
   font-size: 14px;

src/components/Badge/index.tsx

@@ -1,6 +1,6 @@
 import { readableColor } from 'polished'
 import { PropsWithChildren } from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components/macro'
 import { Color } from 'theme/styled'
 
 export enum BadgeVariant {

src/components/Blocklist/index.tsx

@@ -1,14 +1,25 @@
-import { ReactNode, useMemo } from 'react'
-import { useActiveWeb3React } from '../../hooks/web3'
 import { Trans } from '@lingui/macro'
+import { ReactNode, useMemo } from 'react'
+
+import { useActiveWeb3React } from '../../hooks/web3'
 
 // SDN OFAC addresses
 const BLOCKED_ADDRESSES: string[] = [
+  '0x7Db418b5D567A4e0E8c59Ad71BE1FcE48f3E6107',
+  '0x72a5843cc08275C8171E582972Aa4fDa8C397B2A',
+  '0x7F19720A857F834887FC9A7bC0a0fBe7Fc7f8102',
+  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
+  '0x1da5821544e25c636c1417Ba96Ade4Cf6D2f9B5A',
+  '0x9F4cda013E354b8fC285BF4b9A60460cEe7f7Ea9',
+  '0x19Aa5Fe80D33a56D56c78e82eA5E50E5d80b4Dff',
+  '0x2f389cE8bD8ff92De3402FFCe4691d17fC4f6535',
+  '0xe7aa314c77F4233C18C6CC84384A9247c0cf367B',
   '0x7F367cC41522cE07553e823bf3be79A889DEbe1B',
   '0xd882cFc20F52f2599D84b8e8D58C7FB62cfE344b',
   '0x901bb9583b24D97e995513C6778dc6888AB6870e',
-  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
   '0x8576aCC5C05D6Ce88f4e49bf65BdF0C62F91353C',
+  '0xC8a65Fadf0e0dDAf421F28FEAb69Bf6E2E589963',
+  '0x308eD4B7b49797e1A98D3818bFF6fe5385410370',
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {

src/components/Button/index.tsx

@@ -1,14 +1,14 @@
-import styled from 'styled-components/macro'
+import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
+import { Check, ChevronDown } from 'react-feather'
+import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 import { RowBetween } from '../Row'
-import { ChevronDown, Check } from 'react-feather'
-import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
-import useTheme from 'hooks/useTheme'
 
 type ButtonProps = Omit<ButtonPropsOriginal, 'css'>
 
-const Base = styled(RebassButton)<
+export const BaseButton = styled(RebassButton)<
   {
     padding?: string
     width?: string
@@ -41,10 +41,6 @@ const Base = styled(RebassButton)<
   transition: transform 450ms ease;
   transform: perspective(1px) translateZ(0);
 
-  &:hover {
-    transform: scale(0.99);
-  }
-
   > * {
     user-select: none;
   }
@@ -54,7 +50,7 @@ const Base = styled(RebassButton)<
   }
 `
 
-export const ButtonPrimary = styled(Base)`
+export const ButtonPrimary = styled(BaseButton)`
   background-color: ${({ theme }) => theme.primary1};
   color: white;
   &:focus {
@@ -71,7 +67,8 @@ export const ButtonPrimary = styled(Base)`
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
       altDisabledStyle ? (disabled ? theme.primary1 : theme.bg2) : theme.bg2};
-    color: ${({ theme }) => theme.text2};
+    color: ${({ altDisabledStyle, disabled, theme }) =>
+      altDisabledStyle ? (disabled ? theme.white : theme.text2) : theme.text2};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
@@ -79,7 +76,7 @@ export const ButtonPrimary = styled(Base)`
   }
 `
 
-export const ButtonLight = styled(Base)`
+export const ButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.primary5};
   color: ${({ theme }) => theme.primaryText1};
   font-size: 16px;
@@ -107,7 +104,7 @@ export const ButtonLight = styled(Base)`
   }
 `
 
-export const ButtonGray = styled(Base)`
+export const ButtonGray = styled(BaseButton)`
   background-color: ${({ theme }) => theme.bg1};
   color: ${({ theme }) => theme.text2};
   font-size: 16px;
@@ -121,7 +118,7 @@ export const ButtonGray = styled(Base)`
   }
 `
 
-export const ButtonSecondary = styled(Base)`
+export const ButtonSecondary = styled(BaseButton)`
   border: 1px solid ${({ theme }) => theme.primary4};
   color: ${({ theme }) => theme.primary1};
   background-color: transparent;
@@ -149,11 +146,10 @@ export const ButtonSecondary = styled(Base)`
   }
 `
 
-export const ButtonOutlined = styled(Base)`
+export const ButtonOutlined = styled(BaseButton)`
   border: 1px solid ${({ theme }) => theme.bg2};
   background-color: transparent;
   color: ${({ theme }) => theme.text1};
-
   &:focus {
     box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
   }
@@ -169,7 +165,28 @@ export const ButtonOutlined = styled(Base)`
   }
 `
 
-export const ButtonEmpty = styled(Base)`
+export const ButtonYellow = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.yellow3};
+  color: white;
+  &:focus {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.yellow3)};
+    background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
+  }
+  &:hover {
+    background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
+  }
+  &:active {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.yellow3)};
+    background-color: ${({ theme }) => darken(0.1, theme.yellow3)};
+  }
+  &:disabled {
+    background-color: ${({ theme }) => theme.yellow3};
+    opacity: 50%;
+    cursor: auto;
+  }
+`
+
+export const ButtonEmpty = styled(BaseButton)`
   background-color: transparent;
   color: ${({ theme }) => theme.primary1};
   display: flex;
@@ -191,7 +208,7 @@ export const ButtonEmpty = styled(Base)`
   }
 `
 
-export const ButtonText = styled(Base)`
+export const ButtonText = styled(BaseButton)`
   padding: 0;
   width: fit-content;
   background: none;
@@ -213,7 +230,7 @@ export const ButtonText = styled(Base)`
   }
 `
 
-const ButtonConfirmedStyle = styled(Base)`
+const ButtonConfirmedStyle = styled(BaseButton)`
   background-color: ${({ theme }) => theme.bg3};
   color: ${({ theme }) => theme.text1};
   /* border: 1px solid ${({ theme }) => theme.green1}; */
@@ -226,7 +243,7 @@ const ButtonConfirmedStyle = styled(Base)`
   }
 `
 
-const ButtonErrorStyle = styled(Base)`
+const ButtonErrorStyle = styled(BaseButton)`
   background-color: ${({ theme }) => theme.red1};
   border: 1px solid ${({ theme }) => theme.red1};
 

src/components/Card/index.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $borderRadius?: string }>`
   width: ${({ width }) => width ?? '100%'};

src/components/Confetti/index.tsx

@@ -1,4 +1,5 @@
 import ReactConfetti from 'react-confetti'
+
 import { useWindowSize } from '../../hooks/useWindowSize'
 
 // eslint-disable-next-line react/prop-types

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -1,10 +1,11 @@
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import HoverInlineText from 'components/HoverInlineText'
 import { useMemo } from 'react'
+
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
-import HoverInlineText from 'components/HoverInlineText'
-import { Trans } from '@lingui/macro'
 
 export function FiatValue({
   fiatValue,

src/components/CurrencyInputPanel/index.tsx

@@ -1,24 +1,26 @@
-import { Pair } from '@uniswap/v2-sdk'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
-import { useState, useCallback, ReactNode } from 'react'
-import styled from 'styled-components/macro'
+import { Pair } from '@uniswap/v2-sdk'
+import { AutoColumn } from 'components/Column'
+import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { darken } from 'polished'
+import { ReactNode, useCallback, useState } from 'react'
+import { Lock } from 'react-feather'
+import styled from 'styled-components/macro'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+
+import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
+import useTheme from '../../hooks/useTheme'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
-import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
+import { TYPE } from '../../theme'
+import { ButtonGray } from '../Button'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { ButtonGray } from '../Button'
-import { RowBetween, RowFixed } from '../Row'
-import { TYPE } from '../../theme'
 import { Input as NumericalInput } from '../NumericalInput'
-import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
-import { useActiveWeb3React } from '../../hooks/web3'
-import { Trans } from '@lingui/macro'
-import useTheme from '../../hooks/useTheme'
-import { Lock } from 'react-feather'
-import { AutoColumn } from 'components/Column'
+import { RowBetween, RowFixed } from '../Row'
+import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
@@ -53,7 +55,8 @@ const Container = styled.div<{ hideInput: boolean }>`
   }
 `
 
-const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boolean }>`
+const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   align-items: center;
   font-size: 24px;
   font-weight: 500;
@@ -80,6 +83,7 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
 const InputRow = styled.div<{ selected: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
+  justify-content: space-between;
   padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 0.75rem 1rem')};
 `
 
@@ -144,6 +148,10 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   `};
 `
 
+const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
+  ${loadingOpacityMixin}
+`
+
 interface CurrencyInputPanelProps {
   value: string
   onUserInput: (value: string) => void
@@ -164,6 +172,7 @@ interface CurrencyInputPanelProps {
   disableNonToken?: boolean
   renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
   locked?: boolean
+  loading?: boolean
 }
 
 export default function CurrencyInputPanel({
@@ -185,6 +194,7 @@ export default function CurrencyInputPanel({
   pair = null, // used for double token logo
   hideInput = false,
   locked = false,
+  loading = false,
   ...rest
 }: CurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
@@ -211,6 +221,7 @@ export default function CurrencyInputPanel({
       <Container hideInput={hideInput}>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           <CurrencySelect
+            visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
             className="open-currency-select-button"
@@ -247,15 +258,12 @@ export default function CurrencyInputPanel({
             </Aligner>
           </CurrencySelect>
           {!hideInput && (
-            <>
-              <NumericalInput
-                className="token-amount-input"
-                value={value}
-                onUserInput={(val) => {
-                  onUserInput(val)
-                }}
-              />
-            </>
+            <StyledNumericalInput
+              className="token-amount-input"
+              value={value}
+              onUserInput={onUserInput}
+              $loading={loading}
+            />
           )}
         </InputRow>
         {!hideInput && !hideBalance && (
@@ -289,7 +297,9 @@ export default function CurrencyInputPanel({
               ) : (
                 <span />
               )}
-              <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
+              <LoadingOpacityContainer $loading={loading}>
+                <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
+              </LoadingOpacityContainer>
             </RowBetween>
           </FiatRow>
         )}

src/components/CurrencyLogo/index.tsx

@@ -1,13 +1,38 @@
 import { Currency } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
 import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
+
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Logo from '../Logo'
 
-export const getTokenLogoURL = (address: string) =>
-  `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+type Network = 'ethereum' | 'arbitrum' | 'optimism'
+
+function chainIdToNetworkName(networkId: SupportedChainId): Network {
+  switch (networkId) {
+    case SupportedChainId.MAINNET:
+      return 'ethereum'
+    case SupportedChainId.ARBITRUM_ONE:
+      return 'arbitrum'
+    case SupportedChainId.OPTIMISM:
+      return 'optimism'
+    default:
+      return 'ethereum'
+  }
+}
+
+export const getTokenLogoURL = (
+  address: string,
+  chainId: SupportedChainId = SupportedChainId.MAINNET
+): string | void => {
+  const networkName = chainIdToNetworkName(chainId)
+  const networksWithUrls = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.MAINNET, SupportedChainId.OPTIMISM]
+  if (networksWithUrls.includes(chainId)) {
+    return `https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/${networkName}/assets/${address}/logo.png`
+  }
+}
 
 const StyledEthereumLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
@@ -30,7 +55,7 @@ export default function CurrencyLogo({
   style,
   ...rest
 }: {
-  currency?: Currency
+  currency?: Currency | null
   size?: string
   style?: React.CSSProperties
 }) {
@@ -40,7 +65,11 @@ export default function CurrencyLogo({
     if (!currency || currency.isNative) return []
 
     if (currency.isToken) {
-      const defaultUrls = currency.chainId === 1 ? [getTokenLogoURL(currency.address)] : []
+      const defaultUrls = []
+      const url = getTokenLogoURL(currency.address, currency.chainId)
+      if (url) {
+        defaultUrls.push(url)
+      }
       if (currency instanceof WrappedTokenInfo) {
         return [...uriLocations, ...defaultUrls]
       }
@@ -50,7 +79,7 @@ export default function CurrencyLogo({
   }, [currency, uriLocations])
 
   if (currency?.isNative) {
-    return <StyledEthereumLogo src={EthereumLogo} size={size} style={style} {...rest} />
+    return <StyledEthereumLogo src={EthereumLogo} alt="ethereum logo" size={size} style={style} {...rest} />
   }
 
   return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} {...rest} />

src/components/DoubleLogo/index.tsx

@@ -1,5 +1,6 @@
 import { Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'
+
 import CurrencyLogo from '../CurrencyLogo'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`

src/components/DowntimeWarning/index.tsx

@@ -0,0 +1,77 @@
+import { Trans } from '@lingui/macro'
+import { L2_CHAIN_IDS, SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
+import { AlertOctagon } from 'react-feather'
+import styled from 'styled-components/macro'
+import { ExternalLink } from 'theme'
+
+const Root = styled.div`
+  background-color: ${({ theme }) => (theme.darkMode ? '#888D9B' : '#CED0D9')};
+  border-radius: 18px;
+  color: black;
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  margin: 12px auto;
+  padding: 16px;
+  width: 100%;
+  max-width: 880px;
+`
+const WarningIcon = styled(AlertOctagon)`
+  display: block;
+  margin: auto 16px auto 0;
+  min-height: 22px;
+  min-width: 22px;
+`
+const ReadMoreLink = styled(ExternalLink)`
+  color: black;
+  text-decoration: underline;
+`
+
+export default function DowntimeWarning() {
+  const { chainId } = useActiveWeb3React()
+  if (!chainId || !L2_CHAIN_IDS.includes(chainId)) {
+    return null
+  }
+
+  const Content = () => {
+    switch (chainId) {
+      case SupportedChainId.OPTIMISM:
+      case SupportedChainId.OPTIMISTIC_KOVAN:
+        return (
+          <div>
+            <Trans>
+              Optimistic Ethereum is in Beta and may experience downtime. Optimism expects planned downtime to upgrade
+              the network in the near future. During downtime, your position will not earn fees and you will be unable
+              to remove liquidity.{' '}
+              <ReadMoreLink href="https://help.uniswap.org/en/articles/5406082-what-happens-if-the-optimistic-ethereum-network-experiences-downtime">
+                Read more.
+              </ReadMoreLink>
+            </Trans>
+          </div>
+        )
+      case SupportedChainId.ARBITRUM_ONE:
+      case SupportedChainId.ARBITRUM_RINKEBY:
+        return (
+          <div>
+            <Trans>
+              Arbitrum is in Beta and may experience downtime. During downtime, your position will not earn fees and you
+              will be unable to remove liquidity.{' '}
+              <ReadMoreLink href="https://help.uniswap.org/en/articles/5576122-arbitrum-network-downtime">
+                Read more.
+              </ReadMoreLink>
+            </Trans>
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Root>
+      <WarningIcon />
+      <Content />
+    </Root>
+  )
+}

src/components/ErrorBoundary/index.tsx

@@ -1,11 +1,12 @@
 import { Trans } from '@lingui/macro'
 import React, { ErrorInfo } from 'react'
+import ReactGA from 'react-ga'
+import styled from 'styled-components/macro'
+
 import store, { AppState } from '../../state'
 import { ExternalLink, TYPE } from '../../theme'
+import { userAgent } from '../../utils/userAgent'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components/macro'
-import ReactGA from 'react-ga'
-import { getUserAgent } from '../../utils/getUserAgent'
 import { AutoRow } from '../Row'
 
 const FallbackWrapper = styled.div`
@@ -136,7 +137,7 @@ function getRelevantState(): null | keyof AppState {
 
 function issueBody(error: Error): string {
   const relevantState = getRelevantState()
-  const deviceData = getUserAgent()
+  const deviceData = userAgent
   return `## URL
   
 ${window.location.href}

src/components/FeeSelector/index.tsx

@@ -1,19 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { Token } from '@uniswap/sdk-core'
 import { Trans } from '@lingui/macro'
-import { AutoColumn } from 'components/Column'
-import { DynamicSection } from 'pages/AddLiquidity/styled'
-import { TYPE } from 'theme'
-import { RowBetween } from 'components/Row'
-import { ButtonGray, ButtonRadioChecked } from 'components/Button'
-import styled, { keyframes } from 'styled-components/macro'
+import { Currency } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
+import { ButtonGray, ButtonRadioChecked } from 'components/Button'
 import Card from 'components/Card'
-import usePrevious from 'hooks/usePrevious'
+import { AutoColumn } from 'components/Column'
+import { RowBetween } from 'components/Row'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
+import usePrevious from 'hooks/usePrevious'
+import { DynamicSection } from 'pages/AddLiquidity/styled'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { Box } from 'rebass'
+import styled, { keyframes } from 'styled-components/macro'
+import { TYPE } from 'theme'
 
 const pulse = (color: string) => keyframes`
   0% {
@@ -62,7 +62,7 @@ const FeeTierPercentageBadge = ({ percentage }: { percentage: number | undefined
   return (
     <Badge>
       <TYPE.label fontSize={12}>
-        {Boolean(percentage) ? <Trans>{percentage?.toFixed(0)}% select</Trans> : <Trans>Not created</Trans>}
+        {percentage !== undefined ? <Trans>{percentage?.toFixed(0)}% select</Trans> : <Trans>Not created</Trans>}
       </TYPE.label>
     </Badge>
   )
@@ -72,16 +72,16 @@ export default function FeeSelector({
   disabled = false,
   feeAmount,
   handleFeePoolSelect,
-  token0,
-  token1,
+  currencyA,
+  currencyB,
 }: {
   disabled?: boolean
   feeAmount?: FeeAmount
   handleFeePoolSelect: (feeAmount: FeeAmount) => void
-  token0?: Token | undefined
-  token1?: Token | undefined
+  currencyA?: Currency | undefined
+  currencyB?: Currency | undefined
 }) {
-  const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(token0, token1)
+  const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
 
   const [showOptions, setShowOptions] = useState(false)
   const [pulsing, setPulsing] = useState(false)
@@ -137,7 +137,7 @@ export default function FeeSelector({
       <DynamicSection gap="md" disabled={disabled}>
         <FocusedOutlineCard pulsing={pulsing} onAnimationEnd={() => setPulsing(false)}>
           <RowBetween>
-            <AutoColumn>
+            <AutoColumn id="add-liquidity-selected-fee">
               {!feeAmount ? (
                 <>
                   <TYPE.label>
@@ -149,10 +149,10 @@ export default function FeeSelector({
                 </>
               ) : (
                 <>
-                  <TYPE.label>
+                  <TYPE.label className="selected-fee-label">
                     <Trans>{FeeAmountLabel[feeAmount].label}% fee tier</Trans>
                   </TYPE.label>
-                  <Box style={{ width: 'fit-content', marginTop: '8px' }}>
+                  <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && feeAmount && <FeeTierPercentageBadge percentage={distributions[feeAmount]} />}
                   </Box>
                 </>
@@ -173,7 +173,7 @@ export default function FeeSelector({
               onClick={() => handleFeePoolSelectWithEvent(FeeAmount.LOW)}
             >
               <AutoColumn gap="sm" justify="flex-start">
-                <AutoColumn justify="flex-start" gap="4px">
+                <AutoColumn justify="flex-start" gap="6px">
                   <ResponsiveText>
                     <Trans>0.05% fee</Trans>
                   </ResponsiveText>

src/components/FormattedCurrencyAmount/index.tsx

@@ -1,5 +1,5 @@
-import JSBI from 'jsbi'
 import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core'
+import JSBI from 'jsbi'
 
 const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
 

src/components/Header/ChainConnectivityWarning.tsx

@@ -0,0 +1,76 @@
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO, L2ChainInfo, SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
+import { AlertOctagon } from 'react-feather'
+import styled from 'styled-components/macro'
+import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+
+const BodyRow = styled.div`
+  color: ${({ theme }) => theme.black};
+  font-size: 12px;
+`
+const CautionIcon = styled(AlertOctagon)`
+  color: ${({ theme }) => theme.black};
+`
+const Link = styled(ExternalLink)`
+  color: ${({ theme }) => theme.black};
+  text-decoration: underline;
+`
+const TitleRow = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 8px;
+`
+const TitleText = styled.div`
+  color: black;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  margin: 0px 12px;
+`
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.yellow3};
+  border-radius: 12px;
+  bottom: 60px;
+  display: none;
+  max-width: 348px;
+  padding: 16px 20px;
+  position: absolute;
+  right: 16px;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
+    display: block;
+  }
+`
+
+export function ChainConnectivityWarning() {
+  const { chainId } = useActiveWeb3React()
+  const info = CHAIN_INFO[chainId ?? SupportedChainId.MAINNET]
+  const label = info?.label
+
+  return (
+    <Wrapper>
+      <TitleRow>
+        <CautionIcon />
+        <TitleText>
+          <Trans>Network Warning</Trans>
+        </TitleText>
+      </TitleRow>
+      <BodyRow>
+        {chainId === SupportedChainId.MAINNET ? (
+          <Trans>You may have lost your network connection.</Trans>
+        ) : (
+          <Trans>You may have lost your network connection, or {label} might be down right now.</Trans>
+        )}{' '}
+        {(info as L2ChainInfo).statusPage !== undefined && (
+          <span>
+            <Trans>Check network status</Trans>{' '}
+            <Link href={(info as L2ChainInfo).statusPage || ''}>
+              <Trans>here.</Trans>
+            </Link>
+          </span>
+        )}
+      </BodyRow>
+    </Wrapper>
+  )
+}

src/components/Header/NetworkCard.tsx

@@ -1,232 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { YellowCard } from 'components/Card'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { useActiveWeb3React } from 'hooks/web3'
-import { useEffect, useRef, useState } from 'react'
-import { ArrowDownCircle } from 'react-feather'
-import { ApplicationModal } from 'state/application/actions'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
-import styled, { css } from 'styled-components'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { switchToNetwork } from 'utils/switchToNetwork'
-import { L2_CHAIN_IDS, L2_INFO, NETWORK_LABELS, SupportedChainId } from '../../constants/chains'
-
-const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) and (max-width: ${
-  MEDIA_WIDTHS.upToMedium + 400
-}px)`
-
-const BaseWrapper = css`
-  position: relative;
-  ${StopOverflowQuery} {
-    position: absolute;
-    top: 80px;
-    right: 20px;
-  }
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    margin-left: 12px;
-  `};
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    margin: 0 0.5rem 0 0;
-    width: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 1;
-  `};
-`
-const L2Wrapper = styled.div`
-  ${BaseWrapper}
-`
-const BaseMenuItem = css`
-  align-items: center;
-  background-color: transparent;
-  border-radius: 12px;
-  color: ${({ theme }) => theme.text2};
-  cursor: pointer;
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  font-size: 14px;
-  font-weight: 400;
-  justify-content: space-between;
-  :hover {
-    color: ${({ theme }) => theme.text1};
-    text-decoration: none;
-  }
-`
-const DisabledMenuItem = styled.div`
-  ${BaseMenuItem}
-  align-items: center;
-  background-color: ${({ theme }) => theme.bg2};
-  cursor: auto;
-  display: flex;
-  font-size: 10px;
-  font-style: italic;
-  justify-content: center;
-  :hover,
-  :active,
-  :focus {
-    color: ${({ theme }) => theme.text2};
-  }
-`
-const FallbackWrapper = styled(YellowCard)`
-  ${BaseWrapper}
-  width: auto;
-  border-radius: 12px;
-  padding: 8px 12px;
-`
-const Icon = styled.img`
-  width: 17px;
-`
-const L1Tag = styled.div`
-  color: #c4d9f8;
-  opacity: 40%;
-`
-const L2Tag = styled.div<{ chainId: SupportedChainId }>`
-  background-color: ${({ chainId }) => (chainId === SupportedChainId.ARBITRUM_ONE ? '#28A0F0' : '#FF0420')};
-  border-radius: 6px;
-  color: white;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 2px 6px;
-`
-const MenuFlyout = styled.span`
-  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-radius: 20px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  font-size: 1rem;
-  position: absolute;
-  left: 0rem;
-  top: 3rem;
-  z-index: 100;
-  width: 237px;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    top: -10.25rem;
-  `};
-  > {
-    padding: 12px;
-  }
-  > :not(:first-child) {
-    margin-top: 8px;
-  }
-  > :not(:last-child) {
-    margin-bottom: 8px;
-  }
-  ${StopOverflowQuery} {
-    left: unset;
-    right: 0rem;
-  }
-`
-const LinkOutCircle = styled(ArrowDownCircle)`
-  transform: rotate(230deg);
-  width: 20px;
-  height: 20px;
-`
-const MenuItem = styled(ExternalLink)`
-  ${BaseMenuItem}
-`
-const ButtonMenuItem = styled.button`
-  ${BaseMenuItem}
-  border: none;
-  outline: none;
-  box-shadow: none;
-`
-const NetworkInfo = styled.button`
-  align-items: center;
-  background-color: ${({ theme }) => theme.bg2};
-  border-radius: 8px;
-  border: none;
-  color: ${({ theme }) => theme.text1};
-  display: flex;
-  flex-direction: row;
-  font-weight: 500;
-  height: 100%;
-  justify-content: space-between;
-  margin: 0;
-  padding: 8px;
-  width: 172px;
-
-  :hover,
-  :focus {
-    cursor: pointer;
-    outline: none;
-    background-color: ${({ theme }) => theme.bg3};
-  }
-`
-
-export default function NetworkCard() {
-  const { chainId, library } = useActiveWeb3React()
-  const node = useRef<HTMLDivElement>(null)
-  const open = useModalOpen(ApplicationModal.ARBITRUM_OPTIONS)
-  const toggle = useToggleModal(ApplicationModal.ARBITRUM_OPTIONS)
-  useOnClickOutside(node, open ? toggle : undefined)
-
-  const [implements3085, setImplements3085] = useState(false)
-  useEffect(() => {
-    // metamask is currently the only known implementer of this EIP
-    // here we proceed w/ a noop feature check to ensure the user's version of metamask supports network switching
-    // if not, we hide the UI
-    if (!library?.provider?.request || !chainId || !library?.provider?.isMetaMask) {
-      return
-    }
-    switchToNetwork({ library, chainId })
-      .then((x) => x ?? setImplements3085(true))
-      .catch(() => setImplements3085(false))
-  }, [library, chainId])
-
-  if (!chainId || chainId === SupportedChainId.MAINNET || !NETWORK_LABELS[chainId] || !library) {
-    return null
-  }
-
-  if (L2_CHAIN_IDS.includes(chainId)) {
-    const info = L2_INFO[chainId]
-    return (
-      <L2Wrapper ref={node}>
-        <NetworkInfo onClick={toggle}>
-          <Icon src={info.logoUrl} />
-          <span>{NETWORK_LABELS[chainId]}</span>
-          <L2Tag chainId={chainId}>L2 Alpha</L2Tag>
-        </NetworkInfo>
-        {open && (
-          <MenuFlyout>
-            <MenuItem href={info.bridge}>
-              <div>
-                <Trans>{NETWORK_LABELS[chainId]} Bridge</Trans>
-              </div>
-              <LinkOutCircle />
-            </MenuItem>
-            <MenuItem href={info.explorer}>
-              <div>
-                <Trans>{NETWORK_LABELS[chainId]} Explorer</Trans>
-              </div>
-              <LinkOutCircle />
-            </MenuItem>
-            <MenuItem href={info.docs}>
-              <div>
-                <Trans>Learn more</Trans>
-              </div>
-              <LinkOutCircle />
-            </MenuItem>
-            {implements3085 ? (
-              <ButtonMenuItem onClick={() => switchToNetwork({ library, chainId: SupportedChainId.MAINNET })}>
-                <div>
-                  <Trans>Switch to Ethereum</Trans>
-                </div>
-                <L1Tag>L1</L1Tag>
-              </ButtonMenuItem>
-            ) : (
-              <DisabledMenuItem>
-                <Trans>Change your network to go back to L1</Trans>
-              </DisabledMenuItem>
-            )}
-          </MenuFlyout>
-        )}
-      </L2Wrapper>
-    )
-  }
-
-  return <FallbackWrapper title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</FallbackWrapper>
-}

src/components/Header/NetworkSelector.tsx

@@ -0,0 +1,249 @@
+import { Trans } from '@lingui/macro'
+import {
+  ARBITRUM_HELP_CENTER_LINK,
+  CHAIN_INFO,
+  L2_CHAIN_IDS,
+  OPTIMISM_HELP_CENTER_LINK,
+  SupportedChainId,
+  SupportedL2ChainId,
+} from 'constants/chains'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import { useActiveWeb3React } from 'hooks/web3'
+import { useCallback, useRef } from 'react'
+import { ArrowDownCircle, ChevronDown } from 'react-feather'
+import { ApplicationModal } from 'state/application/actions'
+import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useAppSelector } from 'state/hooks'
+import styled from 'styled-components/macro'
+import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { switchToNetwork } from 'utils/switchToNetwork'
+
+const ActiveRowLinkList = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 8px;
+  & > a {
+    align-items: center;
+    color: ${({ theme }) => theme.text2};
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    font-weight: 500;
+    justify-content: space-between;
+    padding: 8px 0 4px;
+    text-decoration: none;
+  }
+  & > a:first-child {
+    border-top: 1px solid ${({ theme }) => theme.text2};
+    margin: 0;
+    margin-top: 6px;
+    padding-top: 10px;
+  }
+`
+const ActiveRowWrapper = styled.div`
+  background-color: ${({ theme }) => theme.bg2};
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 8px 0 8px 0;
+  width: 100%;
+`
+const FlyoutHeader = styled.div`
+  color: ${({ theme }) => theme.text2};
+  font-weight: 400;
+`
+const FlyoutMenu = styled.div`
+  align-items: flex-start;
+  background-color: ${({ theme }) => theme.bg1};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  overflow: auto;
+  padding: 16px;
+  position: absolute;
+  top: 64px;
+  width: 272px;
+  z-index: 99;
+  & > *:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    top: 50px;
+  }
+`
+const FlyoutRow = styled.div<{ active: boolean }>`
+  align-items: center;
+  background-color: ${({ active, theme }) => (active ? theme.bg2 : 'transparent')};
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  font-weight: 500;
+  justify-content: space-between;
+  padding: 6px 8px;
+  text-align: left;
+  width: 100%;
+`
+const FlyoutRowActiveIndicator = styled.div`
+  background-color: ${({ theme }) => theme.green1};
+  border-radius: 50%;
+  height: 9px;
+  width: 9px;
+`
+const LinkOutCircle = styled(ArrowDownCircle)`
+  transform: rotate(230deg);
+  width: 16px;
+  height: 16px;
+`
+const Logo = styled.img`
+  height: 20px;
+  width: 20px;
+  margin-right: 8px;
+`
+const NetworkLabel = styled.div`
+  flex: 1 1 auto;
+`
+const SelectorLabel = styled(NetworkLabel)`
+  display: none;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+    margin-right: 8px;
+  }
+`
+const SelectorControls = styled.div<{ interactive: boolean }>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg1};
+  border: 2px solid ${({ theme }) => theme.bg1};
+  border-radius: 12px;
+  color: ${({ theme }) => theme.text1};
+  cursor: ${({ interactive }) => (interactive ? 'pointer' : 'auto')};
+  display: flex;
+  font-weight: 500;
+  justify-content: space-between;
+  padding: 6px 8px;
+`
+const SelectorLogo = styled(Logo)<{ interactive?: boolean }>`
+  margin-right: ${({ interactive }) => (interactive ? 8 : 0)}px;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    margin-right: 8px;
+  }
+`
+const SelectorWrapper = styled.div`
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    position: relative;
+  }
+`
+const StyledChevronDown = styled(ChevronDown)`
+  width: 12px;
+`
+const BridgeText = ({ chainId }: { chainId: SupportedL2ChainId }) => {
+  switch (chainId) {
+    case SupportedChainId.ARBITRUM_ONE:
+    case SupportedChainId.ARBITRUM_RINKEBY:
+      return <Trans>Arbitrum Bridge</Trans>
+    case SupportedChainId.OPTIMISM:
+    case SupportedChainId.OPTIMISTIC_KOVAN:
+      return <Trans>Optimism Gateway</Trans>
+    default:
+      return <Trans>Bridge</Trans>
+  }
+}
+const ExplorerText = ({ chainId }: { chainId: SupportedL2ChainId }) => {
+  switch (chainId) {
+    case SupportedChainId.ARBITRUM_ONE:
+    case SupportedChainId.ARBITRUM_RINKEBY:
+      return <Trans>Arbiscan</Trans>
+    case SupportedChainId.OPTIMISM:
+    case SupportedChainId.OPTIMISTIC_KOVAN:
+      return <Trans>Optimistic Etherscan</Trans>
+    default:
+      return <Trans>Explorer</Trans>
+  }
+}
+
+export default function NetworkSelector() {
+  const { chainId, library } = useActiveWeb3React()
+  const node = useRef<HTMLDivElement>()
+  const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
+  const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
+  useOnClickOutside(node, open ? toggle : undefined)
+  const implements3085 = useAppSelector((state) => state.application.implements3085)
+
+  const info = chainId ? CHAIN_INFO[chainId] : undefined
+
+  const isOnL2 = chainId ? L2_CHAIN_IDS.includes(chainId) : false
+  const showSelector = Boolean(implements3085 || isOnL2)
+  const mainnetInfo = CHAIN_INFO[SupportedChainId.MAINNET]
+
+  const conditionalToggle = useCallback(() => {
+    if (showSelector) {
+      toggle()
+    }
+  }, [showSelector, toggle])
+
+  if (!chainId || !info || !library) {
+    return null
+  }
+
+  function Row({ targetChain }: { targetChain: number }) {
+    if (!library || !chainId || (!implements3085 && targetChain !== chainId)) {
+      return null
+    }
+    const handleRowClick = () => {
+      switchToNetwork({ library, chainId: targetChain })
+      toggle()
+    }
+    const active = chainId === targetChain
+    const hasExtendedInfo = L2_CHAIN_IDS.includes(targetChain)
+    const isOptimism = targetChain === SupportedChainId.OPTIMISM
+    const rowText = `${CHAIN_INFO[targetChain].label}${isOptimism ? ' (Optimism)' : ''}`
+    const RowContent = () => (
+      <FlyoutRow onClick={handleRowClick} active={active}>
+        <Logo src={CHAIN_INFO[targetChain].logoUrl} />
+        <NetworkLabel>{rowText}</NetworkLabel>
+        {chainId === targetChain && <FlyoutRowActiveIndicator />}
+      </FlyoutRow>
+    )
+    const helpCenterLink = isOptimism ? OPTIMISM_HELP_CENTER_LINK : ARBITRUM_HELP_CENTER_LINK
+    if (active && hasExtendedInfo) {
+      return (
+        <ActiveRowWrapper>
+          <RowContent />
+          <ActiveRowLinkList>
+            <ExternalLink href={CHAIN_INFO[targetChain as SupportedL2ChainId].bridge}>
+              <BridgeText chainId={chainId} /> <LinkOutCircle />
+            </ExternalLink>
+            <ExternalLink href={CHAIN_INFO[targetChain].explorer}>
+              <ExplorerText chainId={chainId} /> <LinkOutCircle />
+            </ExternalLink>
+            <ExternalLink href={helpCenterLink}>
+              <Trans>Help Center</Trans> <LinkOutCircle />
+            </ExternalLink>
+          </ActiveRowLinkList>
+        </ActiveRowWrapper>
+      )
+    }
+    return <RowContent />
+  }
+
+  return (
+    <SelectorWrapper ref={node as any}>
+      <SelectorControls onClick={conditionalToggle} interactive={showSelector}>
+        <SelectorLogo interactive={showSelector} src={info.logoUrl || mainnetInfo.logoUrl} />
+        <SelectorLabel>{info.label}</SelectorLabel>
+        {showSelector && <StyledChevronDown />}
+      </SelectorControls>
+      {open && (
+        <FlyoutMenu>
+          <FlyoutHeader>
+            <Trans>Select a network</Trans>
+          </FlyoutHeader>
+          <Row targetChain={SupportedChainId.MAINNET} />
+          <Row targetChain={SupportedChainId.OPTIMISM} />
+          <Row targetChain={SupportedChainId.ARBITRUM_ONE} />
+        </FlyoutMenu>
+      )}
+    </SelectorWrapper>
+  )
+}

src/components/Header/Polling.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useState } from 'react'
-import styled, { keyframes } from 'styled-components'
-import { useActiveWeb3React } from '../../hooks/web3'
+import { useAppSelector } from 'state/hooks'
+import styled, { keyframes } from 'styled-components/macro'
 
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useBlockNumber } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { ChainConnectivityWarning } from './ChainConnectivityWarning'
 
-const StyledPolling = styled.div`
+const StyledPolling = styled.div<{ warning: boolean }>`
   position: fixed;
   display: flex;
   align-items: center;
   right: 0;
   bottom: 0;
   padding: 1rem;
-  color: ${({ theme }) => theme.green1};
+  color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
+  transition: 250ms ease color;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     display: none;
@@ -26,15 +29,15 @@ const StyledPollingNumber = styled(TYPE.small)<{ breathe: boolean; hovering: boo
     opacity: 1;
   }
 `
-const StyledPollingDot = styled.div`
+const StyledPollingDot = styled.div<{ warning: boolean }>`
   width: 8px;
   height: 8px;
   min-height: 8px;
   min-width: 8px;
-  margin-left: 0.5rem;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme }) => theme.green1};
+  background-color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
+  transition: 250ms ease background-color;
 `
 
 const rotate360 = keyframes`
@@ -46,19 +49,20 @@ const rotate360 = keyframes`
   }
 `
 
-const Spinner = styled.div`
+const Spinner = styled.div<{ warning: boolean }>`
   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};
+  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
   background: transparent;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   position: relative;
+  transition: 250ms ease border-color;
 
   left: -3px;
   top: -3px;
@@ -66,11 +70,10 @@ const Spinner = styled.div`
 
 export default function Polling() {
   const { chainId } = useActiveWeb3React()
-
   const blockNumber = useBlockNumber()
-
   const [isMounting, setIsMounting] = useState(false)
   const [isHover, setIsHover] = useState(false)
+  const chainConnectivityWarning = useAppSelector((state) => state.application.chainConnectivityWarning)
 
   useEffect(
     () => {
@@ -91,15 +94,24 @@ export default function Polling() {
   )
 
   return (
-    <ExternalLink
-      href={chainId && blockNumber ? getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK) : ''}
-    >
-      <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
-        <StyledPollingNumber breathe={isMounting} hovering={isHover}>
-          {blockNumber}
-        </StyledPollingNumber>
-        <StyledPollingDot>{isMounting && <Spinner />}</StyledPollingDot>
-      </StyledPolling>
-    </ExternalLink>
+    <>
+      <ExternalLink
+        href={chainId && blockNumber ? getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK) : ''}
+      >
+        <StyledPolling
+          onMouseEnter={() => setIsHover(true)}
+          onMouseLeave={() => setIsHover(false)}
+          warning={chainConnectivityWarning}
+        >
+          <StyledPollingNumber breathe={isMounting} hovering={isHover}>
+            {blockNumber}&ensp;
+          </StyledPollingNumber>
+          <StyledPollingDot warning={chainConnectivityWarning}>
+            {isMounting && <Spinner warning={chainConnectivityWarning} />}
+          </StyledPollingDot>{' '}
+        </StyledPolling>
+      </ExternalLink>
+      {chainConnectivityWarning && <ChainConnectivityWarning />}
+    </>
   )
 }

src/components/Header/UniBalanceContent.tsx

@@ -1,22 +1,24 @@
+import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { CHAIN_INFO, SupportedChainId } from 'constants/chains'
 import { useMemo } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
+
 import tokenLogo from '../../assets/images/token-logo.png'
 import { UNI } from '../../constants/tokens'
-import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { useActiveWeb3React } from '../../hooks/web3'
 import { useMerkleDistributorContract } from '../../hooks/useContract'
 import useCurrentBlockTimestamp from '../../hooks/useCurrentBlockTimestamp'
+import { useTotalSupply } from '../../hooks/useTotalSupply'
+import useUSDCPrice from '../../hooks/useUSDCPrice'
+import { useActiveWeb3React } from '../../hooks/web3'
 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 '../../hooks/useUSDCPrice'
 import { AutoColumn } from '../Column'
-import { RowBetween } from '../Row'
 import { Break, CardBGImage, CardNoise, CardSection, DataCard } from '../earn/styled'
-import { Trans } from '@lingui/macro'
+import { RowBetween } from '../Row'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -59,6 +61,8 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
     [blockTimestamp, chainId, totalSupply, unclaimedUni, uni]
   )
 
+  const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
+
   return (
     <ContentWrapper gap="lg">
       <ModalUpper>
@@ -128,7 +132,7 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
               <TYPE.white color="white">{totalSupply?.toFixed(0, { groupSeparator: ',' })}</TYPE.white>
             </RowBetween>
             {uni && uni.chainId === 1 ? (
-              <ExternalLink href={`https://info.uniswap.org/token/${uni.address}`}>
+              <ExternalLink href={`${infoLink}/token/${uni.address}`}>
                 <Trans>View UNI Analytics</Trans>
               </ExternalLink>
             ) : null}

src/components/Header/index.tsx

@@ -1,8 +1,9 @@
 import { Trans } from '@lingui/macro'
 import useScrollPosition from '@react-hook/window-scroll'
+import { CHAIN_INFO, SupportedChainId } from 'constants/chains'
+import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
 import { useState } from 'react'
-import { Moon, Sun } from 'react-feather'
 import { NavLink } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useShowClaimPopup, useToggleSelfClaimModal } from 'state/application/hooks'
@@ -11,18 +12,18 @@ import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
 import { useETHBalances } from 'state/wallet/hooks'
 import styled from 'styled-components/macro'
-import Logo from '../../assets/svg/logo.svg'
-import LogoDark from '../../assets/svg/logo_white.svg'
+
+import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink, TYPE } from '../../theme'
 import ClaimModal from '../claim/ClaimModal'
 import { CardNoise } from '../earn/styled'
 import Menu from '../Menu'
 import Modal from '../Modal'
-import Row, { RowFixed } from '../Row'
+import Row from '../Row'
 import { Dots } from '../swap/styleds'
 import Web3Status from '../Web3Status'
-import NetworkCard from './NetworkCard'
+import NetworkSelector from './NetworkSelector'
 import UniBalanceContent from './UniBalanceContent'
 
 const HeaderFrame = styled.div<{ showBackground: boolean }>`
@@ -38,22 +39,27 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
   padding: 1rem;
   z-index: 21;
   position: relative;
-
   /* Background slide effect on scroll. */
-  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.bg0} 50% )}}`}
+  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.bg0} 50% )}}`};
   background-position: ${({ showBackground }) => (showBackground ? '0 -100%' : '0 0')};
   background-size: 100% 200%;
   box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.bg2 : 'transparent;')};
-  transition: background-position .1s, box-shadow .1s;
+  transition: background-position 0.1s, box-shadow 0.1s;
+  background-blend-mode: hard-light;
+
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    grid-template-columns: 48px 1fr 1fr;
+  `};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding:  1rem;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr 1fr;
   `};
 
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-    padding: 1rem;
-  `}
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding:  1rem;
+    grid-template-columns: 36px 1fr;
+  `};
 `
 
 const HeaderControls = styled.div`
@@ -61,51 +67,26 @@ const HeaderControls = styled.div`
   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;
 
+  &:not(:first-child) {
+    margin-left: 0.5em;
+  }
+
   /* addresses safari's lack of support for "gap" */
   & > *:not(:first-child) {
     margin-left: 8px;
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    flex-direction: row-reverse;
     align-items: center;
   `};
 `
 
-const HeaderElementWrap = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-const HeaderRow = styled(RowFixed)`
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-   width: 100%;
-  `};
-`
-
 const HeaderLinks = styled(Row)`
   justify-self: center;
   background-color: ${({ theme }) => theme.bg0};
@@ -116,8 +97,25 @@ const HeaderLinks = styled(Row)`
   grid-auto-flow: column;
   grid-gap: 10px;
   overflow: auto;
+  align-items: center;
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    justify-self: start;  
+    `};
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    justify-self: flex-end;
+    justify-self: center;
+  `};
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    flex-direction: row;
+    justify-content: space-between;
+    justify-self: center;
+    z-index: 99;
+    position: fixed;
+    bottom: 0; right: 50%;
+    transform: translate(50%,-50%);
+    margin: 0 auto;
+    background-color: ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg2};
+    box-shadow: 0px 6px 10px rgb(0 0 0 / 2%);
   `};
 `
 
@@ -125,11 +123,10 @@ const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg2)};
+  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
   border-radius: 12px;
   white-space: nowrap;
   width: 100%;
-  cursor: pointer;
 
   :focus {
     border: 1px solid blue;
@@ -159,12 +156,6 @@ const UNIWrapper = styled.span`
   }
 `
 
-const HideSmall = styled.span`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
-`
-
 const BalanceText = styled(Text)`
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
     display: none;
@@ -205,14 +196,15 @@ const StyledNavLink = styled(NavLink).attrs({
   text-decoration: none;
   color: ${({ theme }) => theme.text2};
   font-size: 1rem;
-  width: fit-content;
   font-weight: 500;
   padding: 8px 12px;
   word-break: break-word;
-
+  overflow: hidden;
+  white-space: nowrap;
   &.${activeClassName} {
     border-radius: 12px;
     font-weight: 600;
+    justify-content: center;
     color: ${({ theme }) => theme.text1};
     background-color: ${({ theme }) => theme.bg2};
   }
@@ -249,47 +241,14 @@ const StyledExternalLink = styled(ExternalLink).attrs({
     color: ${({ theme }) => darken(0.1, theme.text1)};
     text-decoration: none;
   }
-
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-      display: none;
-`}
-`
-
-const StyledMenuButton = styled.button`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  height: 35px;
-  background-color: ${({ theme }) => theme.bg2};
-  margin-left: 8px;
-  padding: 0.15rem 0.5rem;
-  border-radius: 0.5rem;
-
-  :hover,
-  :focus {
-    cursor: pointer;
-    outline: none;
-    background-color: ${({ theme }) => theme.bg4};
-  }
-
-  svg {
-    margin-top: 2px;
-  }
-  > * {
-    stroke: ${({ theme }) => theme.text1};
-  }
 `
 
 export default function Header() {
-  const { account } = useActiveWeb3React()
+  const { account, chainId } = useActiveWeb3React()
 
   const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
-  // const [isDark] = useDarkModeManager()
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
+  const [darkMode] = useDarkModeManager()
+  const { white, black } = useTheme()
 
   const toggleClaimModal = useToggleSelfClaimModal()
 
@@ -302,19 +261,18 @@ export default function Header() {
 
   const scrollY = useScrollPosition()
 
+  const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
   return (
     <HeaderFrame showBackground={scrollY > 45}>
       <ClaimModal />
       <Modal isOpen={showUniBalanceModal} onDismiss={() => setShowUniBalanceModal(false)}>
         <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
       </Modal>
-      <HeaderRow>
-        <Title href=".">
-          <UniIcon>
-            <img width={'24px'} src={darkMode ? LogoDark : Logo} alt="logo" />
-          </UniIcon>
-        </Title>
-      </HeaderRow>
+      <Title href=".">
+        <UniIcon>
+          <Logo fill={darkMode ? white : black} width="24px" height="100%" title="logo" />
+        </UniIcon>
+      </Title>
       <HeaderLinks>
         <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
           <Trans>Swap</Trans>
@@ -332,19 +290,22 @@ export default function Header() {
         >
           <Trans>Pool</Trans>
         </StyledNavLink>
-        <StyledNavLink id={`stake-nav-link`} to={'/vote'}>
-          <Trans>Vote</Trans>
-        </StyledNavLink>
-        <StyledExternalLink id={`stake-nav-link`} href={'https://info.uniswap.org'}>
+        {(!chainId || chainId === SupportedChainId.MAINNET) && (
+          <StyledNavLink id={`vote-nav-link`} to={'/vote'}>
+            <Trans>Vote</Trans>
+          </StyledNavLink>
+        )}
+        <StyledExternalLink id={`charts-nav-link`} href={infoLink}>
           <Trans>Charts</Trans>
           <sup>↗</sup>
         </StyledExternalLink>
       </HeaderLinks>
+
       <HeaderControls>
         <HeaderElement>
-          <HideSmall>
-            <NetworkCard />
-          </HideSmall>
+          <NetworkSelector />
+        </HeaderElement>
+        <HeaderElement>
           {availableClaim && !showClaimPopup && (
             <UNIWrapper onClick={toggleClaimModal}>
               <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
@@ -361,21 +322,18 @@ export default function Header() {
               <CardNoise />
             </UNIWrapper>
           )}
-          <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
+          <AccountElement active={!!account}>
             {account && userEthBalance ? (
-              <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
-                <Trans>{userEthBalance?.toSignificant(4)} ETH</Trans>
+              <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
+                <Trans>{userEthBalance?.toSignificant(3)} ETH</Trans>
               </BalanceText>
             ) : null}
             <Web3Status />
           </AccountElement>
         </HeaderElement>
-        <HeaderElementWrap>
-          <StyledMenuButton onClick={() => toggleDarkMode()}>
-            {darkMode ? <Moon size={20} /> : <Sun size={20} />}
-          </StyledMenuButton>
+        <HeaderElement>
           <Menu />
-        </HeaderElementWrap>
+        </HeaderElement>
       </HeaderControls>
     </HeaderFrame>
   )

src/components/Identicon/index.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useRef } from 'react'
-
+import Davatar from '@davatar/react'
 import styled from 'styled-components/macro'
 
 import { useActiveWeb3React } from '../../hooks/web3'
-import Jazzicon from '@metamask/jazzicon'
 
 const StyledIdenticonContainer = styled.div`
   height: 1rem;
@@ -13,17 +11,12 @@ const StyledIdenticonContainer = styled.div`
 `
 
 export default function Identicon() {
-  const ref = useRef<HTMLDivElement>()
-
-  const { account } = useActiveWeb3React()
-
-  useEffect(() => {
-    if (account && ref.current) {
-      ref.current.innerHTML = ''
-      ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)))
-    }
-  }, [account])
+  const { account, library } = useActiveWeb3React()
 
   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
-  return <StyledIdenticonContainer ref={ref as any} />
+  return (
+    <StyledIdenticonContainer>
+      {account && library?.provider && <Davatar address={account} size={16} provider={library.provider} />}
+    </StyledIdenticonContainer>
+  )
 }

src/components/InputStepCounter/InputStepCounter.tsx

@@ -1,14 +1,14 @@
-import { useState, useCallback, useEffect, ReactNode } from 'react'
-import { LightCard } from 'components/Card'
-import { RowBetween } from 'components/Row'
-import { Input as NumericalInput } from '../NumericalInput'
-import styled, { keyframes } from 'styled-components'
-import { TYPE } from 'theme'
-import { AutoColumn } from 'components/Column'
-import { ButtonPrimary } from 'components/Button'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { formattedFeeAmount } from 'utils'
 import { Trans } from '@lingui/macro'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { ButtonGray } from 'components/Button'
+import { OutlineCard } from 'components/Card'
+import { AutoColumn } from 'components/Column'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { Minus, Plus } from 'react-feather'
+import styled, { keyframes } from 'styled-components/macro'
+import { TYPE } from 'theme'
+
+import { Input as NumericalInput } from '../NumericalInput'
 
 const pulse = (color: string) => keyframes`
   0% {
@@ -24,25 +24,37 @@ const pulse = (color: string) => keyframes`
   }
 `
 
-const SmallButton = styled(ButtonPrimary)`
-  /* background-color: ${({ theme }) => theme.bg2}; */
-  border-radius: 8px;
-  padding: 4px 6px;
-  width: 48%;
+const InputRow = styled.div`
+  display: grid;
+
+  grid-template-columns: 30px 1fr 30px;
 `
 
-const FocusedOutlineCard = styled(LightCard)<{ active?: boolean; pulsing?: boolean }>`
+const SmallButton = styled(ButtonGray)`
+  border-radius: 8px;
+  padding: 4px;
+`
+
+const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
   border-color: ${({ active, theme }) => active && theme.blue1};
   padding: 12px;
   animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear;
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
-  /* background-color: ${({ theme }) => theme.bg0}; */
+  background-color: transparent;
   text-align: center;
-  margin-right: 12px;
   width: 100%;
   font-weight: 500;
+  padding: 0 10px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 16px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    font-size: 12px;
+  `};
 `
 
 const InputTitle = styled(TYPE.small)`
@@ -51,11 +63,17 @@ const InputTitle = styled(TYPE.small)`
   font-weight: 500;
 `
 
+const ButtonLabel = styled(TYPE.white)<{ disabled: boolean }>`
+  color: ${({ theme, disabled }) => (disabled ? theme.text2 : theme.text1)} !important;
+`
+
 interface StepCounterProps {
   value: string
   onUserInput: (value: string) => void
   decrement: () => string
   increment: () => string
+  decrementDisabled?: boolean
+  incrementDisabled?: boolean
   feeAmount?: FeeAmount
   label?: string
   width?: string
@@ -69,7 +87,8 @@ const StepCounter = ({
   value,
   decrement,
   increment,
-  feeAmount,
+  decrementDisabled = false,
+  incrementDisabled = false,
   width,
   locked,
   onUserInput,
@@ -87,9 +106,6 @@ const StepCounter = ({
   // animation if parent value updates local value
   const [pulsing, setPulsing] = useState<boolean>(false)
 
-  // format fee amount
-  const feeAmountFormatted = feeAmount ? formattedFeeAmount(feeAmount * 2) : ''
-
   const handleOnFocus = () => {
     setUseLocalValue(true)
     setActive(true)
@@ -126,39 +142,45 @@ const StepCounter = ({
 
   return (
     <FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur} width={width}>
-      <AutoColumn gap="6px" style={{ marginBottom: '12px' }}>
+      <AutoColumn gap="6px">
         <InputTitle fontSize={12} textAlign="center">
           {title}
         </InputTitle>
-        <StyledInput
-          className="rate-input-0"
-          value={localValue}
-          fontSize="20px"
-          disabled={locked}
-          onUserInput={(val) => {
-            setLocalValue(val)
-          }}
-        />
+
+        <InputRow>
+          {!locked && (
+            <SmallButton onClick={handleDecrement} disabled={decrementDisabled}>
+              <ButtonLabel disabled={decrementDisabled} fontSize="12px">
+                <Minus size={18} />
+              </ButtonLabel>
+            </SmallButton>
+          )}
+
+          <StyledInput
+            className="rate-input-0"
+            value={localValue}
+            fontSize="20px"
+            disabled={locked}
+            onUserInput={(val) => {
+              setLocalValue(val)
+            }}
+          />
+
+          {!locked && (
+            <SmallButton onClick={handleIncrement} disabled={incrementDisabled}>
+              <ButtonLabel disabled={incrementDisabled} fontSize="12px">
+                <Plus size={18} />
+              </ButtonLabel>
+            </SmallButton>
+          )}
+        </InputRow>
+
         <InputTitle fontSize={12} textAlign="center">
           <Trans>
             {tokenB} per {tokenA}
           </Trans>
         </InputTitle>
       </AutoColumn>
-      {!locked ? (
-        <RowBetween>
-          <SmallButton onClick={handleDecrement}>
-            <TYPE.white fontSize="12px">
-              <Trans>-{feeAmountFormatted}%</Trans>
-            </TYPE.white>
-          </SmallButton>
-          <SmallButton onClick={handleIncrement}>
-            <TYPE.white fontSize="12px">
-              <Trans>+{feeAmountFormatted}%</Trans>
-            </TYPE.white>
-          </SmallButton>
-        </RowBetween>
-      ) : null}
     </FocusedOutlineCard>
   )
 }

src/components/LineChart/index.tsx

@@ -1,169 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback, Dispatch, SetStateAction, ReactNode } from 'react'
-import { createChart, IChartApi } from 'lightweight-charts'
-import { darken } from 'polished'
-import { RowBetween } from 'components/Row'
-import Card from '../Card'
-import styled from 'styled-components/macro'
-import useTheme from 'hooks/useTheme'
-
-const Wrapper = styled(Card)`
-  width: 100%;
-  padding: 1rem;
-  display: flex;
-  background-color: ${({ theme }) => theme.bg0};
-  flex-direction: column;
-  > * {
-    font-size: 1rem;
-  }
-`
-
-const DEFAULT_HEIGHT = 300
-
-type LineChartProps = {
-  data: any[]
-  color?: string | undefined
-  height?: number | undefined
-  setValue?: Dispatch<SetStateAction<number | undefined>> // used for value on hover
-  topLeft?: ReactNode | undefined
-  topRight?: ReactNode | undefined
-  bottomLeft?: ReactNode | undefined
-  bottomRight?: ReactNode | undefined
-} & React.HTMLAttributes<HTMLDivElement>
-
-const LineChart = ({
-  data,
-  color = '#56B2A4',
-  setValue,
-  topLeft,
-  topRight,
-  bottomLeft,
-  bottomRight,
-  height = DEFAULT_HEIGHT,
-  ...rest
-}: LineChartProps) => {
-  const theme = useTheme()
-
-  const chartRef = useRef<HTMLDivElement>(null)
-  const [chartCreated, setChart] = useState<IChartApi | undefined>()
-
-  // for reseting value on hover exit
-  const currenValue = data[data.length - 1].value
-
-  const handleResize = useCallback(() => {
-    if (chartCreated && chartRef?.current?.parentElement) {
-      chartCreated.resize(chartRef.current.parentElement.clientWidth - 32, height)
-      chartCreated.timeScale().fitContent()
-      chartCreated.timeScale().scrollToPosition(0, false)
-    }
-  }, [chartCreated, chartRef, height])
-
-  // add event listener for resize
-  const isClient = typeof window === 'object'
-  useEffect(() => {
-    if (!isClient) {
-      return
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [isClient, chartRef, handleResize]) // Empty array ensures that effect is only run on mount and unmount
-
-  const textColor = theme.text2
-
-  // if chart not instantiated in canvas, create it
-  useEffect(() => {
-    if (!chartCreated && data && !!chartRef?.current?.parentElement) {
-      const chart = createChart(chartRef.current, {
-        height: height,
-        width: chartRef.current.parentElement.clientWidth - 32,
-        layout: {
-          backgroundColor: 'transparent',
-          textColor: textColor,
-          fontFamily: 'Inter',
-        },
-        rightPriceScale: {
-          scaleMargins: {
-            top: 0.1,
-            bottom: 0.1,
-          },
-          borderVisible: false,
-        },
-        timeScale: {
-          borderVisible: false,
-        },
-        watermark: {
-          color: 'rgba(0, 0, 0, 0)',
-        },
-        grid: {
-          horzLines: {
-            visible: false,
-          },
-          vertLines: {
-            visible: false,
-          },
-        },
-        crosshair: {
-          horzLine: {
-            visible: true,
-            style: 3,
-            width: 1,
-            color: '#505050',
-            labelBackgroundColor: color,
-          },
-          vertLine: {
-            visible: true,
-            style: 3,
-            width: 1,
-            color: '#505050',
-            labelBackgroundColor: color,
-          },
-        },
-      })
-
-      const series = chart.addAreaSeries({
-        lineColor: color,
-        topColor: darken(0.4, color),
-        bottomColor: theme.bg0,
-        lineWidth: 2,
-        priceLineVisible: false,
-      })
-
-      series.setData(data)
-
-      // update the title when hovering on the chart
-      chart.subscribeCrosshairMove(function (param) {
-        if (
-          chartRef?.current &&
-          (param === undefined ||
-            param.time === undefined ||
-            (param && param.point && param.point.x < 0) ||
-            (param && param.point && param.point.x > chartRef.current.clientWidth) ||
-            (param && param.point && param.point.y < 0) ||
-            (param && param.point && param.point.y > height))
-        ) {
-          setValue && setValue(currenValue)
-        } else {
-          const price = parseFloat(param.seriesPrices.get(series)?.toString() ?? currenValue)
-          setValue && setValue(price)
-        }
-      })
-      chart.timeScale().fitContent()
-      setChart(chart)
-    }
-  }, [color, chartCreated, currenValue, data, height, setValue, textColor, theme])
-
-  return (
-    <Wrapper>
-      <RowBetween>
-        {topLeft ?? null}
-        {topRight ?? null}
-      </RowBetween>
-      <div ref={chartRef} id={'line-chart'} {...rest} />
-      <RowBetween>
-        {bottomLeft ?? null}
-        {bottomRight ?? null}
-      </RowBetween>
-    </Wrapper>
-  )
-}
-
-export default LineChart

src/components/LiquidityChartRangeInput/Area.tsx

@@ -0,0 +1,47 @@
+import { area, curveStepAfter, ScaleLinear } from 'd3'
+import React, { useMemo } from 'react'
+import styled from 'styled-components/macro'
+
+import { ChartEntry } from './types'
+
+const Path = styled.path<{ fill: string | undefined }>`
+  opacity: 0.5;
+  stroke: ${({ fill, theme }) => fill ?? theme.blue2};
+  fill: ${({ fill, theme }) => fill ?? theme.blue2};
+`
+
+export const Area = ({
+  series,
+  xScale,
+  yScale,
+  xValue,
+  yValue,
+  fill,
+}: {
+  series: ChartEntry[]
+  xScale: ScaleLinear<number, number>
+  yScale: ScaleLinear<number, number>
+  xValue: (d: ChartEntry) => number
+  yValue: (d: ChartEntry) => number
+  fill?: string | undefined
+}) =>
+  useMemo(
+    () => (
+      <Path
+        fill={fill}
+        d={
+          area()
+            .curve(curveStepAfter)
+            .x((d: unknown) => xScale(xValue(d as ChartEntry)))
+            .y1((d: unknown) => yScale(yValue(d as ChartEntry)))
+            .y0(yScale(0))(
+            series.filter((d) => {
+              const value = xScale(xValue(d))
+              return value > 0 && value <= innerWidth
+            }) as Iterable<[number, number]>
+          ) ?? undefined
+        }
+      />
+    ),
+    [fill, series, xScale, xValue, yScale, yValue]
+  )

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -0,0 +1,43 @@
+import { Axis as d3Axis, axisBottom, NumberValue, ScaleLinear, select } from 'd3'
+import React, { useMemo } from 'react'
+import styled from 'styled-components/macro'
+
+const StyledGroup = styled.g`
+  line {
+    display: none;
+  }
+
+  text {
+    color: ${({ theme }) => theme.text2};
+    transform: translateY(5px);
+  }
+`
+
+const Axis = ({ axisGenerator }: { axisGenerator: d3Axis<NumberValue> }) => {
+  const axisRef = (axis: SVGGElement) => {
+    axis &&
+      select(axis)
+        .call(axisGenerator)
+        .call((g) => g.select('.domain').remove())
+  }
+
+  return <g ref={axisRef} />
+}
+
+export const AxisBottom = ({
+  xScale,
+  innerHeight,
+  offset = 0,
+}: {
+  xScale: ScaleLinear<number, number>
+  innerHeight: number
+  offset?: number
+}) =>
+  useMemo(
+    () => (
+      <StyledGroup transform={`translate(0, ${innerHeight + offset})`}>
+        <Axis axisGenerator={axisBottom(xScale).ticks(6)} />
+      </StyledGroup>
+    ),
+    [innerHeight, offset, xScale]
+  )

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -0,0 +1,273 @@
+import { brushHandleAccentPath, brushHandlePath, OffScreenHandle } from 'components/LiquidityChartRangeInput/svg'
+import { BrushBehavior, brushX, D3BrushEvent, ScaleLinear, select } from 'd3'
+import usePrevious from 'hooks/usePrevious'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styled from 'styled-components/macro'
+
+const Handle = styled.path<{ color: string }>`
+  cursor: ew-resize;
+  pointer-events: none;
+
+  stroke-width: 3;
+  stroke: ${({ color }) => color};
+  fill: ${({ color }) => color};
+`
+
+const HandleAccent = styled.path`
+  cursor: ew-resize;
+  pointer-events: none;
+
+  stroke-width: 1.5;
+  stroke: ${({ theme }) => theme.white};
+  opacity: 0.6;
+`
+
+const LabelGroup = styled.g<{ visible: boolean }>`
+  opacity: ${({ visible }) => (visible ? '1' : '0')};
+  transition: opacity 300ms;
+`
+
+const TooltipBackground = styled.rect`
+  fill: ${({ theme }) => theme.bg2};
+`
+
+const Tooltip = styled.text`
+  text-anchor: middle;
+  font-size: 13px;
+  fill: ${({ theme }) => theme.text1};
+`
+
+// flips the handles draggers when close to the container edges
+const FLIP_HANDLE_THRESHOLD_PX = 20
+
+// margin to prevent tick snapping from putting the brush off screen
+const BRUSH_EXTENT_MARGIN_PX = 2
+
+/**
+ * Returns true if every element in `a` maps to the
+ * same pixel coordinate as elements in `b`
+ */
+const compare = (a: [number, number], b: [number, number], xScale: ScaleLinear<number, number>): boolean => {
+  // normalize pixels to 1 decimals
+  const aNorm = a.map((x) => xScale(x).toFixed(1))
+  const bNorm = b.map((x) => xScale(x).toFixed(1))
+  return aNorm.every((v, i) => v === bNorm[i])
+}
+
+export const Brush = ({
+  id,
+  xScale,
+  interactive,
+  brushLabelValue,
+  brushExtent,
+  setBrushExtent,
+  innerWidth,
+  innerHeight,
+  westHandleColor,
+  eastHandleColor,
+}: {
+  id: string
+  xScale: ScaleLinear<number, number>
+  interactive: boolean
+  brushLabelValue: (d: 'w' | 'e', x: number) => string
+  brushExtent: [number, number]
+  setBrushExtent: (extent: [number, number], mode: string | undefined) => void
+  innerWidth: number
+  innerHeight: number
+  westHandleColor: string
+  eastHandleColor: string
+}) => {
+  const brushRef = useRef<SVGGElement | null>(null)
+  const brushBehavior = useRef<BrushBehavior<SVGGElement> | null>(null)
+
+  // only used to drag the handles on brush for performance
+  const [localBrushExtent, setLocalBrushExtent] = useState<[number, number] | null>(brushExtent)
+  const [showLabels, setShowLabels] = useState(false)
+  const [hovering, setHovering] = useState(false)
+
+  const previousBrushExtent = usePrevious(brushExtent)
+
+  const brushed = useCallback(
+    (event: D3BrushEvent<unknown>) => {
+      const { type, selection, mode } = event
+
+      if (!selection) {
+        setLocalBrushExtent(null)
+        return
+      }
+
+      const scaled = (selection as [number, number]).map(xScale.invert) as [number, number]
+
+      // avoid infinite render loop by checking for change
+      if (type === 'end' && !compare(brushExtent, scaled, xScale)) {
+        setBrushExtent(scaled, mode)
+      }
+
+      setLocalBrushExtent(scaled)
+    },
+    [xScale, brushExtent, setBrushExtent]
+  )
+
+  // keep local and external brush extent in sync
+  // i.e. snap to ticks on bruhs end
+  useEffect(() => {
+    setLocalBrushExtent(brushExtent)
+  }, [brushExtent])
+
+  // initialize the brush
+  useEffect(() => {
+    if (!brushRef.current) return
+
+    brushBehavior.current = brushX<SVGGElement>()
+      .extent([
+        [Math.max(0 + BRUSH_EXTENT_MARGIN_PX, xScale(0)), 0],
+        [innerWidth - BRUSH_EXTENT_MARGIN_PX, innerHeight],
+      ])
+      .handleSize(30)
+      .filter(() => interactive)
+      .on('brush end', brushed)
+
+    brushBehavior.current(select(brushRef.current))
+
+    if (previousBrushExtent && compare(brushExtent, previousBrushExtent, xScale)) {
+      select(brushRef.current)
+        .transition()
+        .call(brushBehavior.current.move as any, brushExtent.map(xScale))
+    }
+
+    // brush linear gradient
+    select(brushRef.current)
+      .selectAll('.selection')
+      .attr('stroke', 'none')
+      .attr('fill-opacity', '0.1')
+      .attr('fill', `url(#${id}-gradient-selection)`)
+  }, [brushExtent, brushed, id, innerHeight, innerWidth, interactive, previousBrushExtent, xScale])
+
+  // respond to xScale changes only
+  useEffect(() => {
+    if (!brushRef.current || !brushBehavior.current) return
+
+    brushBehavior.current.move(select(brushRef.current) as any, brushExtent.map(xScale) as any)
+  }, [brushExtent, xScale])
+
+  // show labels when local brush changes
+  useEffect(() => {
+    setShowLabels(true)
+    const timeout = setTimeout(() => setShowLabels(false), 1500)
+    return () => clearTimeout(timeout)
+  }, [localBrushExtent])
+
+  // variables to help render the SVGs
+  const flipWestHandle = localBrushExtent && xScale(localBrushExtent[0]) > FLIP_HANDLE_THRESHOLD_PX
+  const flipEastHandle = localBrushExtent && xScale(localBrushExtent[1]) > innerWidth - FLIP_HANDLE_THRESHOLD_PX
+
+  const showWestArrow = localBrushExtent && (xScale(localBrushExtent[0]) < 0 || xScale(localBrushExtent[1]) < 0)
+  const showEastArrow =
+    localBrushExtent && (xScale(localBrushExtent[0]) > innerWidth || xScale(localBrushExtent[1]) > innerWidth)
+
+  const westHandleInView =
+    localBrushExtent && xScale(localBrushExtent[0]) >= 0 && xScale(localBrushExtent[0]) <= innerWidth
+  const eastHandleInView =
+    localBrushExtent && xScale(localBrushExtent[1]) >= 0 && xScale(localBrushExtent[1]) <= innerWidth
+
+  return useMemo(
+    () => (
+      <>
+        <defs>
+          <linearGradient id={`${id}-gradient-selection`} x1="0%" y1="100%" x2="100%" y2="100%">
+            <stop stopColor={westHandleColor} />
+            <stop stopColor={eastHandleColor} offset="1" />
+          </linearGradient>
+
+          {/* clips at exactly the svg area */}
+          <clipPath id={`${id}-brush-clip`}>
+            <rect x="0" y="0" width={innerWidth} height={innerHeight} />
+          </clipPath>
+        </defs>
+
+        {/* will host the d3 brush */}
+        <g
+          ref={brushRef}
+          clipPath={`url(#${id}-brush-clip)`}
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
+        />
+
+        {/* custom brush handles */}
+        {localBrushExtent && (
+          <>
+            {/* west handle */}
+            {westHandleInView ? (
+              <g
+                transform={`translate(${Math.max(0, xScale(localBrushExtent[0]))}, 0), scale(${
+                  flipWestHandle ? '-1' : '1'
+                }, 1)`}
+              >
+                <g>
+                  <Handle color={westHandleColor} d={brushHandlePath(innerHeight)} />
+                  <HandleAccent d={brushHandleAccentPath()} />
+                </g>
+
+                <LabelGroup
+                  transform={`translate(50,0), scale(${flipWestHandle ? '1' : '-1'}, 1)`}
+                  visible={showLabels || hovering}
+                >
+                  <TooltipBackground y="0" x="-30" height="30" width="60" rx="8" />
+                  <Tooltip transform={`scale(-1, 1)`} y="15" dominantBaseline="middle">
+                    {brushLabelValue('w', localBrushExtent[0])}
+                  </Tooltip>
+                </LabelGroup>
+              </g>
+            ) : null}
+
+            {/* east handle */}
+            {eastHandleInView ? (
+              <g transform={`translate(${xScale(localBrushExtent[1])}, 0), scale(${flipEastHandle ? '-1' : '1'}, 1)`}>
+                <g>
+                  <Handle color={eastHandleColor} d={brushHandlePath(innerHeight)} />
+                  <HandleAccent d={brushHandleAccentPath()} />
+                </g>
+
+                <LabelGroup
+                  transform={`translate(50,0), scale(${flipEastHandle ? '-1' : '1'}, 1)`}
+                  visible={showLabels || hovering}
+                >
+                  <TooltipBackground y="0" x="-30" height="30" width="60" rx="8" />
+                  <Tooltip y="15" dominantBaseline="middle">
+                    {brushLabelValue('e', localBrushExtent[1])}
+                  </Tooltip>
+                </LabelGroup>
+              </g>
+            ) : null}
+
+            {showWestArrow && <OffScreenHandle color={westHandleColor} />}
+
+            {showEastArrow && (
+              <g transform={`translate(${innerWidth}, 0) scale(-1, 1)`}>
+                <OffScreenHandle color={eastHandleColor} />
+              </g>
+            )}
+          </>
+        )}
+      </>
+    ),
+    [
+      brushLabelValue,
+      eastHandleColor,
+      eastHandleInView,
+      flipEastHandle,
+      flipWestHandle,
+      hovering,
+      id,
+      innerHeight,
+      innerWidth,
+      localBrushExtent,
+      showEastArrow,
+      showLabels,
+      showWestArrow,
+      westHandleColor,
+      westHandleInView,
+      xScale,
+    ]
+  )
+}

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -0,0 +1,147 @@
+import { max, scaleLinear, ZoomTransform } from 'd3'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Bound } from 'state/mint/v3/actions'
+
+import { Area } from './Area'
+import { AxisBottom } from './AxisBottom'
+import { Brush } from './Brush'
+import { Line } from './Line'
+import { ChartEntry, LiquidityChartRangeInputProps } from './types'
+import Zoom, { ZoomOverlay } from './Zoom'
+
+export const xAccessor = (d: ChartEntry) => d.price0
+export const yAccessor = (d: ChartEntry) => d.activeLiquidity
+
+export function Chart({
+  id = 'liquidityChartRangeInput',
+  data: { series, current },
+  ticksAtLimit,
+  styles,
+  dimensions: { width, height },
+  margins,
+  interactive = true,
+  brushDomain,
+  brushLabels,
+  onBrushDomainChange,
+  zoomLevels,
+}: LiquidityChartRangeInputProps) {
+  const zoomRef = useRef<SVGRectElement | null>(null)
+
+  const [zoom, setZoom] = useState<ZoomTransform | null>(null)
+
+  const [innerHeight, innerWidth] = useMemo(
+    () => [height - margins.top - margins.bottom, width - margins.left - margins.right],
+    [width, height, margins]
+  )
+
+  const { xScale, yScale } = useMemo(() => {
+    const scales = {
+      xScale: scaleLinear()
+        .domain([current * zoomLevels.initialMin, current * zoomLevels.initialMax] as number[])
+        .range([0, innerWidth]),
+      yScale: scaleLinear()
+        .domain([0, max(series, yAccessor)] as number[])
+        .range([innerHeight, 0]),
+    }
+
+    if (zoom) {
+      const newXscale = zoom.rescaleX(scales.xScale)
+      scales.xScale.domain(newXscale.domain())
+    }
+
+    return scales
+  }, [current, zoomLevels.initialMin, zoomLevels.initialMax, innerWidth, series, innerHeight, zoom])
+
+  useEffect(() => {
+    // reset zoom as necessary
+    setZoom(null)
+  }, [zoomLevels])
+
+  useEffect(() => {
+    if (!brushDomain) {
+      onBrushDomainChange(xScale.domain() as [number, number], undefined)
+    }
+  }, [brushDomain, onBrushDomainChange, xScale])
+
+  return (
+    <>
+      <Zoom
+        svg={zoomRef.current}
+        xScale={xScale}
+        setZoom={setZoom}
+        width={innerWidth}
+        height={
+          // allow zooming inside the x-axis
+          height
+        }
+        resetBrush={() => {
+          onBrushDomainChange(
+            [current * zoomLevels.initialMin, current * zoomLevels.initialMax] as [number, number],
+            'reset'
+          )
+        }}
+        showResetButton={Boolean(ticksAtLimit[Bound.LOWER] || ticksAtLimit[Bound.UPPER])}
+        zoomLevels={zoomLevels}
+      />
+      <svg width="100%" height="100%" viewBox={`0 0 ${width} ${height}`} style={{ overflow: 'visible' }}>
+        <defs>
+          <clipPath id={`${id}-chart-clip`}>
+            <rect x="0" y="0" width={innerWidth} height={height} />
+          </clipPath>
+
+          {brushDomain && (
+            // mask to highlight selected area
+            <mask id={`${id}-chart-area-mask`}>
+              <rect
+                fill="white"
+                x={xScale(brushDomain[0])}
+                y="0"
+                width={xScale(brushDomain[1]) - xScale(brushDomain[0])}
+                height={innerHeight}
+              />
+            </mask>
+          )}
+        </defs>
+
+        <g transform={`translate(${margins.left},${margins.top})`}>
+          <g clipPath={`url(#${id}-chart-clip)`}>
+            <Area series={series} xScale={xScale} yScale={yScale} xValue={xAccessor} yValue={yAccessor} />
+
+            {brushDomain && (
+              // duplicate area chart with mask for selected area
+              <g mask={`url(#${id}-chart-area-mask)`}>
+                <Area
+                  series={series}
+                  xScale={xScale}
+                  yScale={yScale}
+                  xValue={xAccessor}
+                  yValue={yAccessor}
+                  fill={styles.area.selection}
+                />
+              </g>
+            )}
+
+            <Line value={current} xScale={xScale} innerHeight={innerHeight} />
+
+            <AxisBottom xScale={xScale} innerHeight={innerHeight} />
+          </g>
+
+          <ZoomOverlay width={innerWidth} height={height} ref={zoomRef} />
+
+          <Brush
+            id={id}
+            xScale={xScale}
+            interactive={interactive}
+            brushLabelValue={brushLabels}
+            brushExtent={brushDomain ?? (xScale.domain() as [number, number])}
+            innerWidth={innerWidth}
+            innerHeight={innerHeight}
+            setBrushExtent={onBrushDomainChange}
+            westHandleColor={styles.brush.handle.west}
+            eastHandleColor={styles.brush.handle.east}
+          />
+        </g>
+      </svg>
+    </>
+  )
+}

src/components/LiquidityChartRangeInput/Line.tsx

@@ -0,0 +1,24 @@
+import { ScaleLinear } from 'd3'
+import React, { useMemo } from 'react'
+import styled from 'styled-components/macro'
+
+const StyledLine = styled.line`
+  opacity: 0.5;
+  stroke-width: 2;
+  stroke: ${({ theme }) => theme.text1};
+  fill: none;
+`
+
+export const Line = ({
+  value,
+  xScale,
+  innerHeight,
+}: {
+  value: number
+  xScale: ScaleLinear<number, number>
+  innerHeight: number
+}) =>
+  useMemo(
+    () => <StyledLine x1={xScale(value)} y1="0" x2={xScale(value)} y2={innerHeight} />,
+    [value, xScale, innerHeight]
+  )

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -0,0 +1,131 @@
+import { ButtonGray } from 'components/Button'
+import { ScaleLinear, select, zoom, ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { RefreshCcw, ZoomIn, ZoomOut } from 'react-feather'
+import styled from 'styled-components/macro'
+
+import { ZoomLevels } from './types'
+
+const Wrapper = styled.div<{ count: number }>`
+  display: grid;
+  grid-template-columns: repeat(${({ count }) => count.toString()}, 1fr);
+  grid-gap: 6px;
+
+  position: absolute;
+  top: -75px;
+  right: 0;
+`
+
+const Button = styled(ButtonGray)`
+  &:hover {
+    background-color: ${({ theme }) => theme.bg2};
+    color: ${({ theme }) => theme.text1};
+  }
+
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+`
+
+export const ZoomOverlay = styled.rect`
+  fill: transparent;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
+export default function Zoom({
+  svg,
+  xScale,
+  setZoom,
+  width,
+  height,
+  resetBrush,
+  showResetButton,
+  zoomLevels,
+}: {
+  svg: SVGElement | null
+  xScale: ScaleLinear<number, number>
+  setZoom: (transform: ZoomTransform) => void
+  width: number
+  height: number
+  resetBrush: () => void
+  showResetButton: boolean
+  zoomLevels: ZoomLevels
+}) {
+  const zoomBehavior = useRef<ZoomBehavior<Element, unknown>>()
+
+  const [zoomIn, zoomOut, zoomInitial, zoomReset] = useMemo(
+    () => [
+      () =>
+        svg &&
+        zoomBehavior.current &&
+        select(svg as Element)
+          .transition()
+          .call(zoomBehavior.current.scaleBy, 2),
+      () =>
+        svg &&
+        zoomBehavior.current &&
+        select(svg as Element)
+          .transition()
+          .call(zoomBehavior.current.scaleBy, 0.5),
+      () =>
+        svg &&
+        zoomBehavior.current &&
+        select(svg as Element)
+          .transition()
+          .call(zoomBehavior.current.scaleTo, 0.5),
+      () =>
+        svg &&
+        zoomBehavior.current &&
+        select(svg as Element)
+          .call(zoomBehavior.current.transform, zoomIdentity.translate(0, 0).scale(1))
+          .transition()
+          .call(zoomBehavior.current.scaleTo, 0.5),
+    ],
+    [svg]
+  )
+
+  useEffect(() => {
+    if (!svg) return
+
+    zoomBehavior.current = zoom()
+      .scaleExtent([zoomLevels.min, zoomLevels.max])
+      .extent([
+        [0, 0],
+        [width, height],
+      ])
+      .on('zoom', ({ transform }: { transform: ZoomTransform }) => setZoom(transform))
+
+    select(svg as Element).call(zoomBehavior.current)
+  }, [height, width, setZoom, svg, xScale, zoomBehavior, zoomLevels, zoomLevels.max, zoomLevels.min])
+
+  useEffect(() => {
+    // reset zoom to initial on zoomLevel change
+    zoomInitial()
+  }, [zoomInitial, zoomLevels])
+
+  return (
+    <Wrapper count={showResetButton ? 3 : 2}>
+      {showResetButton && (
+        <Button
+          onClick={() => {
+            resetBrush()
+            zoomReset()
+          }}
+          disabled={false}
+        >
+          <RefreshCcw size={16} />
+        </Button>
+      )}
+      <Button onClick={zoomIn} disabled={false}>
+        <ZoomIn size={16} />
+      </Button>
+      <Button onClick={zoomOut} disabled={false}>
+        <ZoomOut size={16} />
+      </Button>
+    </Wrapper>
+  )
+}

src/components/LiquidityChartRangeInput/hooks.ts

@@ -0,0 +1,57 @@
+import { Currency } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { usePoolActiveLiquidity } from 'hooks/usePoolTickData'
+import JSBI from 'jsbi'
+import { useCallback, useMemo } from 'react'
+
+import { ChartEntry } from './types'
+
+export interface TickProcessed {
+  liquidityActive: JSBI
+  price0: string
+}
+
+export function useDensityChartData({
+  currencyA,
+  currencyB,
+  feeAmount,
+}: {
+  currencyA: Currency | undefined
+  currencyB: Currency | undefined
+  feeAmount: FeeAmount | undefined
+}) {
+  const { isLoading, isUninitialized, isError, error, data } = usePoolActiveLiquidity(currencyA, currencyB, feeAmount)
+
+  const formatData = useCallback(() => {
+    if (!data?.length) {
+      return undefined
+    }
+
+    const newData: ChartEntry[] = []
+
+    for (let i = 0; i < data.length; i++) {
+      const t: TickProcessed = data[i]
+
+      const chartEntry = {
+        activeLiquidity: parseFloat(t.liquidityActive.toString()),
+        price0: parseFloat(t.price0),
+      }
+
+      if (chartEntry.activeLiquidity > 0) {
+        newData.push(chartEntry)
+      }
+    }
+
+    return newData
+  }, [data])
+
+  return useMemo(() => {
+    return {
+      isLoading,
+      isUninitialized,
+      isError,
+      error,
+      formattedData: !isLoading && !isUninitialized ? formatData() : undefined,
+    }
+  }, [isLoading, isUninitialized, isError, error, formatData])
+}

src/components/LiquidityChartRangeInput/index.tsx

@@ -0,0 +1,209 @@
+import { Trans } from '@lingui/macro'
+import { Currency, Price, Token } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { AutoColumn, ColumnCenter } from 'components/Column'
+import Loader from 'components/Loader'
+import { format } from 'd3'
+import { useColor } from 'hooks/useColor'
+import useTheme from 'hooks/useTheme'
+import { saturate } from 'polished'
+import React, { ReactNode, useCallback, useMemo } from 'react'
+import { BarChart2, CloudOff, Inbox } from 'react-feather'
+import ReactGA from 'react-ga'
+import { batch } from 'react-redux'
+import { Bound } from 'state/mint/v3/actions'
+import styled from 'styled-components/macro'
+
+import { TYPE } from '../../theme'
+import { Chart } from './Chart'
+import { useDensityChartData } from './hooks'
+import { ZoomLevels } from './types'
+
+const ZOOM_LEVELS: Record<FeeAmount, ZoomLevels> = {
+  [FeeAmount.LOW]: {
+    initialMin: 0.999,
+    initialMax: 1.001,
+    min: 0.00001,
+    max: 1.5,
+  },
+  [FeeAmount.MEDIUM]: {
+    initialMin: 0.5,
+    initialMax: 2,
+    min: 0.00001,
+    max: 20,
+  },
+  [FeeAmount.HIGH]: {
+    initialMin: 0.5,
+    initialMax: 2,
+    min: 0.00001,
+    max: 20,
+  },
+}
+
+const ChartWrapper = styled.div`
+  position: relative;
+
+  justify-content: center;
+  align-content: center;
+`
+
+function InfoBox({ message, icon }: { message?: ReactNode; icon: ReactNode }) {
+  return (
+    <ColumnCenter style={{ height: '100%', justifyContent: 'center' }}>
+      {icon}
+      {message && (
+        <TYPE.mediumHeader padding={10} marginTop="20px" textAlign="center">
+          {message}
+        </TYPE.mediumHeader>
+      )}
+    </ColumnCenter>
+  )
+}
+
+export default function LiquidityChartRangeInput({
+  currencyA,
+  currencyB,
+  feeAmount,
+  ticksAtLimit,
+  price,
+  priceLower,
+  priceUpper,
+  onLeftRangeInput,
+  onRightRangeInput,
+  interactive,
+}: {
+  currencyA: Currency | undefined
+  currencyB: Currency | undefined
+  feeAmount?: FeeAmount
+  ticksAtLimit: { [bound in Bound]?: boolean | undefined }
+  price: number | undefined
+  priceLower?: Price<Token, Token>
+  priceUpper?: Price<Token, Token>
+  onLeftRangeInput: (typedValue: string) => void
+  onRightRangeInput: (typedValue: string) => void
+  interactive: boolean
+}) {
+  const theme = useTheme()
+
+  const tokenAColor = useColor(currencyA?.wrapped)
+  const tokenBColor = useColor(currencyB?.wrapped)
+
+  const isSorted = currencyA && currencyB && currencyA?.wrapped.sortsBefore(currencyB?.wrapped)
+
+  const { isLoading, isUninitialized, isError, error, formattedData } = useDensityChartData({
+    currencyA,
+    currencyB,
+    feeAmount,
+  })
+
+  const onBrushDomainChangeEnded = useCallback(
+    (domain, mode) => {
+      let leftRangeValue = Number(domain[0])
+      const rightRangeValue = Number(domain[1])
+
+      if (leftRangeValue <= 0) {
+        leftRangeValue = 1 / 10 ** 6
+      }
+
+      batch(() => {
+        // simulate user input for auto-formatting and other validations
+        if (
+          (!ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER] || mode === 'handle' || mode === 'reset') &&
+          leftRangeValue > 0
+        ) {
+          onLeftRangeInput(leftRangeValue.toFixed(6))
+        }
+
+        if ((!ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER] || mode === 'reset') && rightRangeValue > 0) {
+          // todo: remove this check. Upper bound for large numbers
+          // sometimes fails to parse to tick.
+          if (rightRangeValue < 1e35) {
+            onRightRangeInput(rightRangeValue.toFixed(6))
+          }
+        }
+      })
+    },
+    [isSorted, onLeftRangeInput, onRightRangeInput, ticksAtLimit]
+  )
+
+  interactive = interactive && Boolean(formattedData?.length)
+
+  const brushDomain: [number, number] | undefined = useMemo(() => {
+    const leftPrice = isSorted ? priceLower : priceUpper?.invert()
+    const rightPrice = isSorted ? priceUpper : priceLower?.invert()
+
+    return leftPrice && rightPrice
+      ? [parseFloat(leftPrice?.toSignificant(6)), parseFloat(rightPrice?.toSignificant(6))]
+      : undefined
+  }, [isSorted, priceLower, priceUpper])
+
+  const brushLabelValue = useCallback(
+    (d: 'w' | 'e', x: number) => {
+      if (!price) return ''
+
+      if (d === 'w' && ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]) return '0'
+      if (d === 'e' && ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]) return '∞'
+
+      const percent = (x < price ? -1 : 1) * ((Math.max(x, price) - Math.min(x, price)) / price) * 100
+
+      return price ? `${format(Math.abs(percent) > 1 ? '.2~s' : '.2~f')(percent)}%` : ''
+    },
+    [isSorted, price, ticksAtLimit]
+  )
+
+  if (isError) {
+    ReactGA.exception({
+      ...error,
+      category: 'Liquidity',
+      fatal: false,
+    })
+  }
+
+  return (
+    <AutoColumn gap="md" style={{ minHeight: '200px' }}>
+      {isUninitialized ? (
+        <InfoBox
+          message={<Trans>Your position will appear here.</Trans>}
+          icon={<Inbox size={56} stroke={theme.text1} />}
+        />
+      ) : isLoading ? (
+        <InfoBox icon={<Loader size="40px" stroke={theme.text4} />} />
+      ) : isError ? (
+        <InfoBox
+          message={<Trans>Liquidity data not available.</Trans>}
+          icon={<CloudOff size={56} stroke={theme.text4} />}
+        />
+      ) : !formattedData || formattedData === [] || !price ? (
+        <InfoBox
+          message={<Trans>There is no liquidity data.</Trans>}
+          icon={<BarChart2 size={56} stroke={theme.text4} />}
+        />
+      ) : (
+        <ChartWrapper>
+          <Chart
+            data={{ series: formattedData, current: price }}
+            dimensions={{ width: 400, height: 200 }}
+            margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
+            styles={{
+              area: {
+                selection: theme.blue1,
+              },
+              brush: {
+                handle: {
+                  west: saturate(0.1, tokenAColor) ?? theme.red1,
+                  east: saturate(0.1, tokenBColor) ?? theme.blue1,
+                },
+              },
+            }}
+            interactive={interactive}
+            brushLabels={brushLabelValue}
+            brushDomain={brushDomain}
+            onBrushDomainChange={onBrushDomainChangeEnded}
+            zoomLevels={ZOOM_LEVELS[feeAmount ?? FeeAmount.MEDIUM]}
+            ticksAtLimit={ticksAtLimit}
+          />
+        </ChartWrapper>
+      )}
+    </AutoColumn>
+  )
+}

src/components/LiquidityChartRangeInput/svg.tsx

@@ -0,0 +1,61 @@
+/*
+ * Generates an SVG path for the east brush handle.
+ * Apply `scale(-1, 1)` to generate west brush handle.
+ *
+ *    |```````\
+ *    |  | |  |
+ *    |______/
+ *    |
+ *    |
+ *    |
+ *    |
+ *    |
+ *
+ * https://medium.com/@dennismphil/one-side-rounded-rectangle-using-svg-fb31cf318d90
+ */
+export const brushHandlePath = (height: number) =>
+  [
+    // handle
+    `M 0 0`, // move to origin
+    `v ${height}`, // vertical line
+    'm 1 0', // move 1px to the right
+    `V 0`, // second vertical line
+    `M 0 1`, // move to origin
+
+    // head
+    'h 12', // horizontal line
+    'q 2 0, 2 2', // rounded corner
+    'v 22', // vertical line
+    'q 0 2 -2 2', // rounded corner
+    'h -12', // horizontal line
+    `z`, // close path
+  ].join(' ')
+
+export const brushHandleAccentPath = () =>
+  [
+    'm 5 7', // move to first accent
+    'v 14', // vertical line
+    'M 0 0', // move to origin
+    'm 9 7', // move to second accent
+    'v 14', // vertical line
+    'z',
+  ].join(' ')
+
+export const OffScreenHandle = ({
+  color,
+  size = 10,
+  margin = 10,
+}: {
+  color: string
+  size?: number
+  margin?: number
+}) => (
+  <polygon
+    points={`0 0, ${size} ${size}, 0 ${size}`}
+    transform={` translate(${size + margin}, ${margin}) rotate(45) `}
+    fill={color}
+    stroke={color}
+    strokeWidth="4"
+    strokeLinejoin="round"
+  />
+)

src/components/LiquidityChartRangeInput/types.ts

@@ -0,0 +1,61 @@
+import { Bound } from 'state/mint/v3/actions'
+
+export interface ChartEntry {
+  activeLiquidity: number
+  price0: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+}
+
+export interface Margins {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface ZoomLevels {
+  initialMin: number
+  initialMax: number
+  min: number
+  max: number
+}
+
+export interface LiquidityChartRangeInputProps {
+  // to distringuish between multiple charts in the DOM
+  id?: string
+
+  data: {
+    series: ChartEntry[]
+    current: number
+  }
+  ticksAtLimit: { [bound in Bound]?: boolean | undefined }
+
+  styles: {
+    area: {
+      // color of the ticks in range
+      selection: string
+    }
+
+    brush: {
+      handle: {
+        west: string
+        east: string
+      }
+    }
+  }
+
+  dimensions: Dimensions
+  margins: Margins
+
+  interactive?: boolean
+
+  brushLabels: (d: 'w' | 'e', x: number) => string
+  brushDomain: [number, number] | undefined
+  onBrushDomainChange: (domain: [number, number], mode: string | undefined) => void
+
+  zoomLevels: ZoomLevels
+}

src/components/ListLogo/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components/macro'
-import useHttpLocations from '../../hooks/useHttpLocations'
 
+import useHttpLocations from '../../hooks/useHttpLocations'
 import Logo from '../Logo'
 
 const StyledListLogo = styled(Logo)<{ size: string }>`

src/components/Loader/index.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 
 const rotate = keyframes`
   from {

src/components/Loader/styled.tsx

@@ -0,0 +1,39 @@
+import styled, { css, keyframes } from 'styled-components/macro'
+
+export const loadingAnimation = keyframes`
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`
+
+export const LoadingRows = styled.div`
+  display: grid;
+
+  & > div {
+    animation: ${loadingAnimation} 1.5s infinite;
+    animation-fill-mode: both;
+    background: linear-gradient(
+      to left,
+      ${({ theme }) => theme.bg1} 25%,
+      ${({ theme }) => theme.bg2} 50%,
+      ${({ theme }) => theme.bg1} 75%
+    );
+    background-size: 400%;
+    border-radius: 12px;
+    height: 2.4em;
+    will-change: background-position;
+  }
+`
+
+export const loadingOpacityMixin = css<{ $loading: boolean }>`
+  filter: ${({ $loading }) => ($loading ? 'grayscale(1)' : 'none')};
+  opacity: ${({ $loading }) => ($loading ? '0.4' : '1')};
+  transition: opacity 0.2s ease-in-out;
+`
+
+export const LoadingOpacityContainer = styled.div<{ $loading: boolean }>`
+  ${loadingOpacityMixin}
+`

src/components/Logo/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
+
 import useTheme from '../../hooks/useTheme'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}

src/components/Menu/index.tsx

@@ -1,16 +1,22 @@
-import React, { useRef } from 'react'
-import { BookOpen, Code, Info, MessageCircle, PieChart } from 'react-feather'
+import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId } from 'constants/chains'
+import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
+import { useActiveLocale } from 'hooks/useActiveLocale'
+import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
+import React, { useEffect, useRef, useState } from 'react'
+import { BookOpen, Check, ChevronLeft, Code, Globe, Info, MessageCircle, Moon, PieChart, Sun } from 'react-feather'
 import { Link } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { useDarkModeManager } from 'state/user/hooks'
+import styled, { css } from 'styled-components/macro'
+
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
-import { useActiveWeb3React } from '../../hooks/web3'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleModal } from '../../state/application/hooks'
-import { Trans } from '@lingui/macro'
 import { ExternalLink } from '../../theme'
 import { ButtonPrimary } from '../Button'
-import { L2_CHAIN_IDS } from 'constants/chains'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',
@@ -30,17 +36,18 @@ const StyledMenuButton = styled.button`
   background-color: transparent;
   margin: 0;
   padding: 0;
-  height: 35px;
-  background-color: ${({ theme }) => theme.bg2};
+  height: 38px;
+  background-color: ${({ theme }) => theme.bg0};
+  border: 1px solid ${({ theme }) => theme.bg0};
 
   padding: 0.15rem 0.5rem;
-  border-radius: 0.5rem;
+  border-radius: 12px;
 
   :hover,
   :focus {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme }) => theme.bg3};
+    border: 1px solid ${({ theme }) => theme.bg3};
   }
 
   svg {
@@ -55,7 +62,6 @@ const UNIbutton = styled(ButtonPrimary)`
 `
 
 const StyledMenu = styled.div`
-  margin-left: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -65,18 +71,22 @@ const StyledMenu = styled.div`
 `
 
 const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
-  min-width: 8.125rem;
-  background-color: ${({ theme }) => theme.bg2};
+  min-width: 196px;
+  max-height: 350px;
+  overflow: auto;
+  background-color: ${({ theme }) => theme.bg1};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
+  border: 1px solid ${({ theme }) => theme.bg0};
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
-  font-size: 1rem;
+  font-size: 16px;
   position: absolute;
   top: 3rem;
   z-index: 100;
+
   ${({ flyoutAlignment = FlyoutAlignment.RIGHT }) =>
     flyoutAlignment === FlyoutAlignment.RIGHT
       ? css`
@@ -86,8 +96,9 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
           left: 0rem;
         `};
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    top: unset;
-    bottom: 3em
+    bottom: unset;
+    right: 0;
+    left: unset;
   `};
 `
 
@@ -97,15 +108,13 @@ const MenuItem = styled(ExternalLink)`
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 0.5rem;
+  justify-content: space-between;
   color: ${({ theme }) => theme.text2};
   :hover {
     color: ${({ theme }) => theme.text1};
     cursor: pointer;
     text-decoration: none;
   }
-  > svg {
-    margin-right: 8px;
-  }
 `
 
 const InternalMenuItem = styled(Link)`
@@ -122,8 +131,71 @@ const InternalMenuItem = styled(Link)`
   }
 `
 
+const InternalLinkMenuItem = styled(InternalMenuItem)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem 0.5rem;
+  justify-content: space-between;
+  text-decoration: none;
+  :hover {
+    color: ${({ theme }) => theme.text1};
+    cursor: pointer;
+    text-decoration: none;
+  }
+`
+
+const ToggleMenuItem = styled.button`
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  border: none;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem 0.5rem;
+  justify-content: space-between;
+  font-size: 1rem;
+  font-weight: 500;
+  color: ${({ theme }) => theme.text2};
+  :hover {
+    color: ${({ theme }) => theme.text1};
+    cursor: pointer;
+    text-decoration: none;
+  }
+`
+
 const CODE_LINK = 'https://github.com/Uniswap/uniswap-interface'
 
+function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) {
+  const { to, onClick } = useLocationLinkProps(locale)
+
+  if (!to) return null
+
+  return (
+    <InternalLinkMenuItem onClick={onClick} key={key} to={to}>
+      <div>{LOCALE_LABEL[locale]}</div>
+      {active && <Check opacity={0.6} size={16} />}
+    </InternalLinkMenuItem>
+  )
+}
+
+function LanguageMenu({ close }: { close: () => void }) {
+  const activeLocale = useActiveLocale()
+
+  return (
+    <MenuFlyout>
+      <ToggleMenuItem onClick={close}>
+        <ChevronLeft size={16} />
+      </ToggleMenuItem>
+      {SUPPORTED_LOCALES.map((locale) => (
+        <LanguageMenuItem locale={locale} active={activeLocale === locale} key={locale} />
+      ))}
+    </MenuFlyout>
+  )
+}
+
 export default function Menu() {
   const { account, chainId } = useActiveWeb3React()
 
@@ -133,53 +205,87 @@ export default function Menu() {
   useOnClickOutside(node, open ? toggle : undefined)
   const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
   const showUNIClaimOption = Boolean(!!account && !!chainId && !L2_CHAIN_IDS.includes(chainId))
+  const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
+
+  const [darkMode, toggleDarkMode] = useDarkModeManager()
+
+  const [menu, setMenu] = useState<'main' | 'lang'>('main')
+
+  useEffect(() => {
+    setMenu('main')
+  }, [open])
 
   return (
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
     <StyledMenu ref={node as any}>
-      <StyledMenuButton onClick={toggle}>
+      <StyledMenuButton onClick={toggle} aria-label={t`Menu`}>
         <StyledMenuIcon />
       </StyledMenuButton>
 
-      {open && (
-        <MenuFlyout>
-          <MenuItem href="https://uniswap.org/">
-            <Info size={14} />
-            <div>
-              <Trans>About</Trans>
-            </div>
-          </MenuItem>
-          <MenuItem href="https://docs.uniswap.org/">
-            <BookOpen size={14} />
-            <div>
-              <Trans>Docs</Trans>
-            </div>
-          </MenuItem>
-          <MenuItem href={CODE_LINK}>
-            <Code size={14} />
-            <div>
-              <Trans>Code</Trans>
-            </div>
-          </MenuItem>
-          <MenuItem href="https://discord.gg/FCfyBSbCU5">
-            <MessageCircle size={14} />
-            <div>
-              <Trans>Discord</Trans>
-            </div>
-          </MenuItem>
-          <MenuItem href="https://info.uniswap.org/">
-            <PieChart size={14} />
-            <div>
-              <Trans>Analytics</Trans>
-            </div>
-          </MenuItem>
-          {showUNIClaimOption && (
-            <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" $borderRadius="12px" mt="0.5rem">
-              <Trans>Claim UNI</Trans>
-            </UNIbutton>
-          )}
-        </MenuFlyout>
-      )}
+      {open &&
+        (() => {
+          switch (menu) {
+            case 'lang':
+              return <LanguageMenu close={() => setMenu('main')} />
+            case 'main':
+            default:
+              return (
+                <MenuFlyout>
+                  <MenuItem href="https://uniswap.org/">
+                    <div>
+                      <Trans>About</Trans>
+                    </div>
+                    <Info opacity={0.6} size={16} />
+                  </MenuItem>
+                  <MenuItem href="https://docs.uniswap.org/">
+                    <div>
+                      <Trans>Docs</Trans>
+                    </div>
+                    <BookOpen opacity={0.6} size={16} />
+                  </MenuItem>
+                  <MenuItem href={CODE_LINK}>
+                    <div>
+                      <Trans>Code</Trans>
+                    </div>
+                    <Code opacity={0.6} size={16} />
+                  </MenuItem>
+                  <MenuItem href="https://discord.gg/FCfyBSbCU5">
+                    <div>
+                      <Trans>Discord</Trans>
+                    </div>
+                    <MessageCircle opacity={0.6} size={16} />
+                  </MenuItem>
+                  <MenuItem href={infoLink}>
+                    <div>
+                      <Trans>Analytics</Trans>
+                    </div>
+                    <PieChart opacity={0.6} size={16} />
+                  </MenuItem>
+                  <ToggleMenuItem onClick={() => setMenu('lang')}>
+                    <div>
+                      <Trans>Language</Trans>
+                    </div>
+                    <Globe opacity={0.6} size={16} />
+                  </ToggleMenuItem>
+                  <ToggleMenuItem onClick={() => toggleDarkMode()}>
+                    <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
+                    {darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
+                  </ToggleMenuItem>
+                  {showUNIClaimOption && (
+                    <UNIbutton
+                      onClick={openClaimModal}
+                      padding="8px 16px"
+                      width="100%"
+                      $borderRadius="12px"
+                      mt="0.5rem"
+                    >
+                      <Trans>Claim UNI</Trans>
+                    </UNIbutton>
+                  )}
+                </MenuFlyout>
+              )
+          }
+        })()}
     </StyledMenu>
   )
 }
@@ -220,11 +326,11 @@ export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, men
         <NewMenuFlyout flyoutAlignment={flyoutAlignment}>
           {menuItems.map(({ content, link, external }, i) =>
             external ? (
-              <ExternalMenuItem id="link" href={link} key={link + i}>
+              <ExternalMenuItem href={link} key={i}>
                 {content}
               </ExternalMenuItem>
             ) : (
-              <NewMenuItem id="link" to={link} key={link + i}>
+              <NewMenuItem to={link} key={i}>
                 {content}
               </NewMenuItem>
             )

src/components/Modal/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import styled, { css } from 'styled-components'
-import { animated, useTransition, useSpring } from 'react-spring'
-import { DialogOverlay, DialogContent } from '@reach/dialog'
-import { isMobile } from 'react-device-detect'
+import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { transparentize } from 'polished'
+import React from 'react'
+import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
+import styled, { css } from 'styled-components/macro'
+
+import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/ModalViews/index.tsx

@@ -1,16 +1,15 @@
-import { useContext } from 'react'
-import { useActiveWeb3React } from '../../hooks/web3'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-
-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 { Trans } from '@lingui/macro'
+import { useContext } from 'react'
+import { ArrowUpCircle } from 'react-feather'
+import styled, { ThemeContext } from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
+import { useActiveWeb3React } from '../../hooks/web3'
+import { CloseIcon, CustomLightSpinner, TYPE } from '../../theme'
 import { ExternalLink } from '../../theme/components'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { AutoColumn, ColumnCenter } from '../Column'
+import { RowBetween } from '../Row'
 
 const ConfirmOrLoadingWrapper = styled.div`
   width: 100%;

src/components/NavigationTabs/index.tsx

@@ -1,18 +1,19 @@
-import styled from 'styled-components/macro'
-import { darken } from 'polished'
 import { Trans } from '@lingui/macro'
-import { NavLink, Link as HistoryLink, useLocation } from 'react-router-dom'
 import { Percent } from '@uniswap/sdk-core'
-
+import useTheme from 'hooks/useTheme'
+import { darken } from 'polished'
+import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
-import Row, { RowBetween } from '../Row'
-import SettingsTab from '../Settings'
-
+import { Link as HistoryLink, NavLink, useLocation } from 'react-router-dom'
+import { Box } from 'rebass'
 import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
+import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
-import useTheme from 'hooks/useTheme'
+
+import Row, { RowBetween } from '../Row'
+import SettingsTab from '../Settings'
 
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -49,6 +50,15 @@ const StyledNavLink = styled(NavLink).attrs({
   }
 `
 
+const StyledHistoryLink = styled(HistoryLink)<{ flex: string | undefined }>`
+  flex: ${({ flex }) => flex ?? 'none'};
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    flex: none;
+    margin-right: 10px;
+  `};
+`
+
 const ActiveText = styled.div`
   font-weight: 500;
   font-size: 20px;
@@ -74,11 +84,11 @@ export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
 export function FindPoolTabs({ origin }: { origin: string }) {
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
+      <RowBetween style={{ padding: '1rem 1rem 0 1rem', position: 'relative' }}>
         <HistoryLink to={origin}>
           <StyledArrowLeft />
         </HistoryLink>
-        <ActiveText>
+        <ActiveText style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
           <Trans>Import V2 Pool</Trans>
         </ActiveText>
       </RowBetween>
@@ -91,11 +101,14 @@ export function AddRemoveTabs({
   creating,
   defaultSlippage,
   positionID,
+  children,
 }: {
   adding: boolean
   creating: boolean
   defaultSlippage: Percent
   positionID?: string | undefined
+  showBackLink?: boolean
+  children?: ReactNode | undefined
 }) {
   const theme = useTheme()
   // reset states on back
@@ -110,7 +123,7 @@ export function AddRemoveTabs({
   return (
     <Tabs>
       <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
-        <HistoryLink
+        <StyledHistoryLink
           to={poolLink}
           onClick={() => {
             if (adding) {
@@ -119,10 +132,15 @@ export function AddRemoveTabs({
               dispatch(resetMintV3State())
             }
           }}
+          flex={children ? '1' : undefined}
         >
           <StyledArrowLeft stroke={theme.text2} />
-        </HistoryLink>
-        <TYPE.mediumHeader fontWeight={500} fontSize={20}>
+        </StyledHistoryLink>
+        <TYPE.mediumHeader
+          fontWeight={500}
+          fontSize={20}
+          style={{ flex: '1', margin: 'auto', textAlign: children ? 'start' : 'center' }}
+        >
           {creating ? (
             <Trans>Create a pair</Trans>
           ) : adding ? (
@@ -131,6 +149,7 @@ export function AddRemoveTabs({
             <Trans>Remove Liquidity</Trans>
           )}
         </TYPE.mediumHeader>
+        <Box style={{ marginRight: '.5rem' }}>{children}</Box>
         <SettingsTab placeholderSlippage={defaultSlippage} />
       </RowBetween>
     </Tabs>

src/components/NetworkAlert/MinimalNetworkAlert.tsx

@@ -1,123 +0,0 @@
-import { Trans } from '@lingui/macro'
-import {
-  ArbitrumWrapperBackgroundDarkMode,
-  ArbitrumWrapperBackgroundLightMode,
-  OptimismWrapperBackgroundDarkMode,
-  OptimismWrapperBackgroundLightMode,
-} from 'components/NetworkAlert/NetworkAlert'
-import { L2_CHAIN_IDS, L2_INFO, NETWORK_LABELS, SupportedChainId } from 'constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
-import { ArrowDownCircle } from 'react-feather'
-import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
-import styled from 'styled-components/macro'
-import { MEDIA_WIDTHS } from 'theme'
-
-const L2Icon = styled.img`
-  display: none;
-  height: 40px;
-  margin: auto 20px auto 4px;
-  width: 40px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
-const DesktopTextBreak = styled.div`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
-    display: block;
-  }
-`
-const Wrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; logoUrl: string }>`
-  ${({ chainId, darkMode }) =>
-    chainId === SupportedChainId.OPTIMISM
-      ? darkMode
-        ? OptimismWrapperBackgroundDarkMode
-        : OptimismWrapperBackgroundLightMode
-      : darkMode
-      ? ArbitrumWrapperBackgroundDarkMode
-      : ArbitrumWrapperBackgroundLightMode};
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 12px;
-  position: relative;
-  width: 100%;
-
-  :before {
-    background-image: url(${({ logoUrl }) => logoUrl});
-    background-repeat: no-repeat;
-    background-size: 300px;
-    content: '';
-    height: 300px;
-    opacity: 0.1;
-    position: absolute;
-    transform: rotate(25deg) translate(-90px, -40px);
-    width: 300px;
-    z-index: -1;
-  }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    flex-direction: row;
-    padding: 16px 20px;
-  }
-`
-const Body = styled.div`
-  line-height: 143%;
-  margin: 12px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    margin: 16px 20px 31px;
-    flex: 1 1 auto;
-    margin: 0;
-  }
-`
-const LinkOutCircle = styled(ArrowDownCircle)`
-  transform: rotate(230deg);
-  width: 20px;
-  height: 20px;
-`
-const LinkOutToBridge = styled.a`
-  align-items: center;
-  background-color: black;
-  border-radius: 16px;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  margin: 0;
-  max-height: 47px;
-  padding: 14px;
-  text-decoration: none;
-  width: auto;
-  :hover,
-  :focus,
-  :active {
-    background-color: black;
-  }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    margin: auto 0 auto auto;
-    padding: 14px 17px;
-    min-width: 226px;
-  }
-`
-export function MinimalNetworkAlert() {
-  const { chainId } = useActiveWeb3React()
-  const [darkMode] = useDarkModeManager()
-  const [arbitrumAlphaAcknowledged] = useArbitrumAlphaAlert()
-
-  if (!chainId || !L2_CHAIN_IDS.includes(chainId) || arbitrumAlphaAcknowledged) {
-    return null
-  }
-  const info = L2_INFO[chainId]
-  return (
-    <Wrapper darkMode={darkMode} chainId={chainId} logoUrl={info.logoUrl}>
-      <L2Icon src={info.logoUrl} />
-      <Body>
-        <Trans>This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network.</Trans>
-        <DesktopTextBreak /> <Trans>You must bridge L1 assets to the network to swap them.</Trans>
-      </Body>
-      <LinkOutToBridge href={info.bridge} target="_blank" rel="noopener noreferrer">
-        <Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
-        <LinkOutCircle />
-      </LinkOutToBridge>
-    </Wrapper>
-  )
-}

src/components/NetworkAlert/NetworkAlert.tsx

@@ -1,26 +1,75 @@
 import { Trans } from '@lingui/macro'
-import { L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId } from 'constants/chains'
+import {
+  ARBITRUM_HELP_CENTER_LINK,
+  L2_CHAIN_IDS,
+  OPTIMISM_HELP_CENTER_LINK,
+  SupportedChainId,
+  SupportedL2ChainId,
+} from 'constants/chains'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useCallback, useState } from 'react'
 import { ArrowDownCircle, X } from 'react-feather'
-import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
+import { useArbitrumAlphaAlert, useDarkModeManager, useOptimismAlphaAlert } from 'state/user/hooks'
 import { useETHBalances } from 'state/wallet/hooks'
 import styled, { css } from 'styled-components/macro'
-import { MEDIA_WIDTHS, TYPE } from 'theme'
-import { L2_INFO } from '../../constants/chains'
+import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+
+import { CHAIN_INFO } from '../../constants/chains'
+
+export const DesktopTextBreak = styled.div`
+  display: none;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
+    display: block;
+  }
+`
 
 const L2Icon = styled.img`
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   justify-self: center;
 `
+const BetaTag = styled.span<{ color: string }>`
+  align-items: center;
+  background-color: ${({ color }) => color};
+  border-radius: 6px;
+  color: ${({ theme }) => theme.white};
+  display: flex;
+  font-size: 14px;
+  height: 28px;
+  justify-content: center;
+  left: -16px;
+  position: absolute;
+  transform: rotate(-15deg);
+  top: -16px;
+  width: 60px;
+  z-index: 1;
+`
+const Body = styled.p`
+  font-size: 12px;
+  grid-column: 1 / 3;
+  line-height: 143%;
+  margin: 0;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    grid-column: 2 / 3;
+  }
+`
+export const Controls = styled.div<{ thin?: boolean }>`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  ${({ thin }) =>
+    thin &&
+    css`
+      margin: auto 32px auto 0;
+    `}
+`
 const CloseIcon = styled(X)`
   cursor: pointer;
   position: absolute;
   top: 16px;
   right: 16px;
 `
-const ContentWrapper = styled.div`
+const BodyText = styled.div`
   align-items: center;
   display: grid;
   grid-gap: 4px;
@@ -32,6 +81,37 @@ const ContentWrapper = styled.div`
     grid-gap: 8px;
   }
 `
+const LearnMoreLink = styled(ExternalLink)<{ thin?: boolean }>`
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 8px;
+  color: ${({ theme }) => theme.text1};
+  display: flex;
+  font-size: 16px;
+  height: 44px;
+  justify-content: space-between;
+  margin: 0 0 20px 0;
+  padding: 12px 16px;
+  text-decoration: none;
+  width: auto;
+  :hover,
+  :focus,
+  :active {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  transition: background-color 150ms ease-in-out;
+  ${({ thin }) =>
+    thin &&
+    css`
+      font-size: 14px;
+      margin: auto;
+      width: 112px;
+    `}
+`
+const RootWrapper = styled.div`
+  position: relative;
+`
 export const ArbitrumWrapperBackgroundDarkMode = css`
   background: radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),
     radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.3) 0%, rgba(33, 114, 229, 0.3) 100%), hsla(0, 0%, 100%, 0.1);
@@ -48,9 +128,9 @@ export const OptimismWrapperBackgroundLightMode = css`
   background: radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),
     radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.5);
 `
-const RootWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; logoUrl: string }>`
+const ContentWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; logoUrl: string; thin?: boolean }>`
   ${({ chainId, darkMode }) =>
-    chainId === SupportedChainId.OPTIMISM
+    [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
       ? darkMode
         ? OptimismWrapperBackgroundDarkMode
         : OptimismWrapperBackgroundLightMode
@@ -61,11 +141,17 @@ const RootWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; l
   display: flex;
   flex-direction: column;
   max-width: 480px;
-  min-height: 218px;
+  min-height: 174px;
   overflow: hidden;
   position: relative;
   width: 100%;
-
+  ${({ thin }) =>
+    thin &&
+    css`
+      flex-direction: row;
+      max-width: max-content;
+      min-height: min-content;
+    `}
   :before {
     background-image: url(${({ logoUrl }) => logoUrl});
     background-repeat: no-repeat;
@@ -79,32 +165,30 @@ const RootWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; l
     z-index: -1;
   }
 `
-const Header = styled(TYPE.largeHeader)`
+const Header = styled.h2<{ thin?: boolean }>`
+  font-weight: 600;
+  font-size: 20px;
   margin: 0;
   padding-right: 30px;
-`
-const Body = styled.p`
-  grid-column: 1 / 3;
-  line-height: 143%;
-  margin: 0;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    grid-column: 2 / 3;
-  }
+  display: ${({ thin }) => (thin ? 'none' : 'block')};
 `
 const LinkOutCircle = styled(ArrowDownCircle)`
+  margin-left: 12px;
   transform: rotate(230deg);
   width: 20px;
   height: 20px;
 `
-const LinkOutToBridge = styled.a`
+const LinkOutToBridge = styled(ExternalLink)<{ thin?: boolean }>`
   align-items: center;
   background-color: black;
-  border-radius: 16px;
+  border-radius: 8px;
   color: white;
   display: flex;
+  font-size: 16px;
+  height: 44px;
   justify-content: space-between;
-  margin: 0 18px 18px 18px;
-  padding: 14px 24px;
+  margin: 0 12px 20px 18px;
+  padding: 12px 16px;
   text-decoration: none;
   width: auto;
   :hover,
@@ -112,44 +196,85 @@ const LinkOutToBridge = styled.a`
   :active {
     background-color: black;
   }
+  ${({ thin }) =>
+    thin &&
+    css`
+      font-size: 14px;
+      margin: auto 10px;
+      width: 168px;
+    `}
 `
-export function NetworkAlert() {
+
+interface NetworkAlertProps {
+  thin?: boolean
+}
+
+export function NetworkAlert(props: NetworkAlertProps) {
   const { account, chainId } = useActiveWeb3React()
   const [darkMode] = useDarkModeManager()
   const [arbitrumAlphaAcknowledged, setArbitrumAlphaAcknowledged] = useArbitrumAlphaAlert()
+  const [optimismAlphaAcknowledged, setOptimismAlphaAcknowledged] = useOptimismAlphaAlert()
   const [locallyDismissed, setLocallyDimissed] = useState(false)
   const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
 
   const dismiss = useCallback(() => {
     if (userEthBalance?.greaterThan(0)) {
-      setArbitrumAlphaAcknowledged(true)
+      switch (chainId) {
+        case SupportedChainId.OPTIMISM:
+          setOptimismAlphaAcknowledged(true)
+          break
+        case SupportedChainId.ARBITRUM_ONE:
+          setArbitrumAlphaAcknowledged(true)
+          break
+      }
     } else {
       setLocallyDimissed(true)
     }
-  }, [setArbitrumAlphaAcknowledged, userEthBalance])
-  if (!chainId || !L2_CHAIN_IDS.includes(chainId) || arbitrumAlphaAcknowledged || locallyDismissed) {
+  }, [chainId, setArbitrumAlphaAcknowledged, setOptimismAlphaAcknowledged, userEthBalance])
+
+  const onOptimismAndOptimismAcknowledged = SupportedChainId.OPTIMISM === chainId && optimismAlphaAcknowledged
+  const onArbitrumAndArbitrumAcknowledged = SupportedChainId.ARBITRUM_ONE === chainId && arbitrumAlphaAcknowledged
+  if (
+    !chainId ||
+    !L2_CHAIN_IDS.includes(chainId) ||
+    onArbitrumAndArbitrumAcknowledged ||
+    onOptimismAndOptimismAcknowledged ||
+    locallyDismissed
+  ) {
     return null
   }
-  const info = L2_INFO[chainId]
+  const info = CHAIN_INFO[chainId as SupportedL2ChainId]
+  const isOptimism = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
+  const depositUrl = isOptimism ? `${info.bridge}?chainId=1` : info.bridge
+  const helpCenterLink = isOptimism ? OPTIMISM_HELP_CENTER_LINK : ARBITRUM_HELP_CENTER_LINK
+  const showCloseIcon = Boolean(userEthBalance?.greaterThan(0) && !props.thin)
   return (
-    <RootWrapper chainId={chainId} darkMode={darkMode} logoUrl={info.logoUrl}>
-      <CloseIcon onClick={dismiss} />
-      <ContentWrapper>
-        <L2Icon src={info.logoUrl} />
-        <Header>
-          <Trans>Uniswap on {NETWORK_LABELS[chainId]}</Trans>
-        </Header>
-        <Body>
-          <Trans>
-            This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network. You must bridge L1 assets to
-            the network to swap them.
-          </Trans>
-        </Body>
+    <RootWrapper>
+      <BetaTag color={isOptimism ? '#ff0420' : '#0490ed'}>Beta</BetaTag>
+      <ContentWrapper chainId={chainId} darkMode={darkMode} logoUrl={info.logoUrl} thin={props.thin}>
+        {showCloseIcon && <CloseIcon onClick={dismiss} />}
+        <BodyText>
+          <L2Icon src={info.logoUrl} />
+          <Header thin={props.thin}>
+            <Trans>Uniswap on {info.label}</Trans>
+          </Header>
+          <Body>
+            <Trans>
+              To starting trading on {info.label}, first bridge your assets from L1 to L2. Please treat this as a beta
+              release and learn about the risks before using {info.label}.
+            </Trans>
+          </Body>
+        </BodyText>
+        <Controls thin={props.thin}>
+          <LinkOutToBridge href={depositUrl} thin={props.thin}>
+            <Trans>Deposit Assets</Trans>
+            <LinkOutCircle />
+          </LinkOutToBridge>
+          <LearnMoreLink href={helpCenterLink} thin={props.thin}>
+            <Trans>Learn More</Trans>
+          </LearnMoreLink>
+        </Controls>
       </ContentWrapper>
-      <LinkOutToBridge href={info.bridge} target="_blank" rel="noopener noreferrer">
-        <Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
-        <LinkOutCircle />
-      </LinkOutToBridge>
     </RootWrapper>
   )
 }

src/components/NumericalInput/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components/macro'
+
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`

src/components/Popover/index.tsx

@@ -1,21 +1,17 @@
-import { Placement } from '@popperjs/core'
-import { transparentize } from 'polished'
-import React, { useCallback, useState } from 'react'
+import { Options, Placement } from '@popperjs/core'
+import Portal from '@reach/portal'
+import React, { useCallback, useMemo, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components/macro'
+
 import useInterval from '../../hooks/useInterval'
-import Portal from '@reach/portal'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
   z-index: 9999;
   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: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
   color: ${({ theme }) => theme.text2};
-  border-radius: 8px;
 `
 
 const ReferenceElement = styled.div`
@@ -34,9 +30,9 @@ const Arrow = styled.div`
     z-index: 9998;
 
     content: '';
-    border: 1px solid ${({ theme }) => theme.bg3};
+    border: 1px solid ${({ theme }) => theme.bg2};
     transform: rotate(45deg);
-    background: ${({ theme }) => theme.bg2};
+    background: ${({ theme }) => theme.bg0};
   }
 
   &.arrow-top {
@@ -84,14 +80,22 @@ export default function Popover({ content, show, children, placement = 'auto' }:
   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',
-    modifiers: [
-      { name: 'offset', options: { offset: [8, 8] } },
-      { name: 'arrow', options: { element: arrowElement } },
-    ],
-  })
+
+  const options = useMemo(
+    (): Options => ({
+      placement,
+      strategy: 'fixed',
+      modifiers: [
+        { name: 'offset', options: { offset: [8, 8] } },
+        { name: 'arrow', options: { element: arrowElement } },
+        { name: 'preventOverflow', options: { padding: 8 } },
+      ],
+    }),
+    [arrowElement, placement]
+  )
+
+  const { styles, update, attributes } = usePopper(referenceElement, popperElement, options)
+
   const updateCallback = useCallback(() => {
     update && update()
   }, [update])

src/components/Popups/ClaimPopup.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useCallback, useEffect } from 'react'
-import ReactGA from 'react-ga'
 import { Heart, X } from 'react-feather'
-import styled, { keyframes } from 'styled-components'
+import ReactGA from 'react-ga'
+import styled, { keyframes } from 'styled-components/macro'
+
 import tokenLogo from '../../assets/images/token-logo.png'
 import { ButtonPrimary } from '../../components/Button'
 import { useActiveWeb3React } from '../../hooks/web3'
@@ -14,7 +15,6 @@ import {
   useToggleSelfClaimModal,
   useToggleShowClaimPopup,
 } from '../../state/application/hooks'
-
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'

src/components/Popups/PopupItem.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
-import { useSpring } from 'react-spring/web'
-import styled, { ThemeContext } from 'styled-components'
 import { animated } from 'react-spring'
+import { useSpring } from 'react-spring/web'
+import styled, { ThemeContext } from 'styled-components/macro'
+
 import { PopupContent } from '../../state/application/actions'
 import { useRemovePopup } from '../../state/application/hooks'
 import TransactionPopup from './TransactionPopup'
@@ -73,9 +74,9 @@ export default function PopupItem({
   let popupContent
   if ('txn' in content) {
     const {
-      txn: { hash, success, summary },
+      txn: { hash },
     } = content
-    popupContent = <TransactionPopup hash={hash} success={success} summary={summary} />
+    popupContent = <TransactionPopup hash={hash} />
   }
 
   const faderStyle = useSpring({

src/components/Popups/TransactionPopup.tsx

@@ -1,10 +1,13 @@
 import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
+
 import { useActiveWeb3React } from '../../hooks/web3'
+import { useTransaction } from '../../state/transactions/hooks'
 import { TYPE } from '../../theme'
 import { ExternalLink } from '../../theme/components'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { TransactionSummary } from '../AccountDetails/TransactionSummary'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
@@ -12,26 +15,24 @@ const RowNoFlex = styled(AutoRow)`
   flex-wrap: nowrap;
 `
 
-export default function TransactionPopup({
-  hash,
-  success,
-  summary,
-}: {
-  hash: string
-  success?: boolean
-  summary?: string
-}) {
+export default function TransactionPopup({ hash }: { hash: string }) {
   const { chainId } = useActiveWeb3React()
 
+  const tx = useTransaction(hash)
   const theme = useContext(ThemeContext)
 
+  if (!tx) return null
+  const success = Boolean(tx.receipt && tx.receipt.status === 1)
+
   return (
     <RowNoFlex>
       <div style={{ paddingRight: 16 }}>
         {success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
       </div>
       <AutoColumn gap="8px">
-        <TYPE.body fontWeight={500}>{summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}</TYPE.body>
+        <TYPE.body fontWeight={500}>
+          <TransactionSummary info={tx.info} />
+        </TYPE.body>
         {chainId && (
           <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
             View on Explorer

src/components/Popups/index.tsx

@@ -1,9 +1,13 @@
+import { SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
 import styled from 'styled-components/macro'
+import { MEDIA_WIDTHS } from 'theme'
+
 import { useActivePopups } from '../../state/application/hooks'
-import { AutoColumn } from '../Column'
-import PopupItem from './PopupItem'
-import ClaimPopup from './ClaimPopup'
 import { useURLWarningVisible } from '../../state/user/hooks'
+import { AutoColumn } from '../Column'
+import ClaimPopup from './ClaimPopup'
+import PopupItem from './PopupItem'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;
@@ -30,9 +34,13 @@ const MobilePopupInner = styled.div`
   }
 `
 
-const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean }>`
+const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${
+  MEDIA_WIDTHS.upToMedium + 500
+}px)`
+
+const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
   position: fixed;
-  top: ${({ extraPadding }) => (extraPadding ? '80px' : '88px')};
+  top: ${({ extraPadding }) => (extraPadding ? '64px' : '56px')};
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
@@ -41,6 +49,10 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean }>`
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
   `};
+
+  ${StopOverflowQuery} {
+    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '64px' : extraPadding ? '64px' : '56px')};
+  }
 `
 
 export default function Popups() {
@@ -49,9 +61,13 @@ export default function Popups() {
 
   const urlWarningActive = useURLWarningVisible()
 
+  // need extra padding if network is not L1 Ethereum
+  const { chainId } = useActiveWeb3React()
+  const isNotOnMainnet = Boolean(chainId && chainId !== SupportedChainId.MAINNET)
+
   return (
     <>
-      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive}>
+      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive} xlPadding={isNotOnMainnet}>
         <ClaimPopup />
         {activePopups.map((item) => (
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />

src/components/PositionCard/Sushi.tsx

@@ -1,23 +1,21 @@
+import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
+import Badge, { BadgeVariant } from 'components/Badge'
+import { transparentize } from 'polished'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { Trans } from '@lingui/macro'
-
-import { unwrappedToken } from '../../utils/unwrappedToken'
-import { ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
 
 import { useColor } from '../../hooks/useColor'
-
+import { unwrappedToken } from '../../utils/unwrappedToken'
+import { ButtonEmpty } from '../Button'
 import { LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
 import { FixedHeightRow } from '.'
-import Badge, { BadgeVariant } from 'components/Badge'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;

src/components/PositionCard/V2.tsx

@@ -1,31 +1,29 @@
-import JSBI from 'jsbi'
-import { useState } from 'react'
-import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import JSBI from 'jsbi'
+import { transparentize } from 'polished'
+import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { Trans } from '@lingui/macro'
 
+import { BIG_INT_ZERO } from '../../constants/misc'
+import { useColor } from '../../hooks/useColor'
+import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
-import { ButtonPrimary, ButtonSecondary, ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
-
-import { useColor } from '../../hooks/useColor'
-
+import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
 import { LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowBetween, RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants/misc'
 import { FixedHeightRow } from '.'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`

src/components/PositionCard/index.tsx

@@ -1,32 +1,30 @@
-import JSBI from 'jsbi'
-import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import JSBI from 'jsbi'
+import { transparentize } from 'polished'
 import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { Trans } from '@lingui/macro'
 
+import { BIG_INT_ZERO } from '../../constants/misc'
+import { useColor } from '../../hooks/useColor'
+import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
-import { ButtonPrimary, ButtonSecondary, ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
-
-import { useColor } from '../../hooks/useColor'
-
+import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
 import { GreyCard, LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowBetween, RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants/misc'
 
 export const FixedHeightRow = styled(RowBetween)`
   height: 24px;

src/components/PositionList/index.tsx

@@ -1,6 +1,6 @@
+import { Trans } from '@lingui/macro'
 import PositionListItem from 'components/PositionListItem'
 import React from 'react'
-import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 import { PositionDetails } from 'types/position'
@@ -47,7 +47,7 @@ export default function PositionList({ positions }: PositionListProps) {
           {positions && ' (' + positions.length + ')'}
         </div>
         <div>
-          <Trans>Price range</Trans>
+          <Trans>Status</Trans>
         </div>
       </DesktopHeader>
       <MobileHeader>

src/components/PositionListItem/index.tsx

@@ -1,22 +1,25 @@
-import { useMemo } from 'react'
+import { Trans } from '@lingui/macro'
+import { Percent, Price, Token } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
+import RangeBadge from 'components/Badge/RangeBadge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import { usePool } from 'hooks/usePools'
+import HoverInlineText from 'components/HoverInlineText'
+import Loader from 'components/Loader'
+import { RowBetween } from 'components/Row'
 import { useToken } from 'hooks/Tokens'
+import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
+import { usePool } from 'hooks/usePools'
+import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
+import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
 import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
 import { PositionDetails } from 'types/position'
-import { Price, Token, Percent } from '@uniswap/sdk-core'
-import { formatPrice } from 'utils/formatCurrencyAmount'
-import Loader from 'components/Loader'
+import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
-import RangeBadge from 'components/Badge/RangeBadge'
-import { RowFixed } from 'components/Row'
-import HoverInlineText from 'components/HoverInlineText'
+
 import { DAI, USDC, USDT, WBTC, WETH9_EXTENDED } from '../../constants/tokens'
-import { Trans } from '@lingui/macro'
 
 const LinkRow = styled(Link)`
   align-items: center;
@@ -24,6 +27,9 @@ const LinkRow = styled(Link)`
   display: flex;
   cursor: pointer;
   user-select: none;
+  display: flex;
+  flex-direction: column;
+
   justify-content: space-between;
   color: ${({ theme }) => theme.text1};
   margin: 8px 0;
@@ -32,25 +38,23 @@ const LinkRow = styled(Link)`
   font-weight: 500;
   background-color: ${({ theme }) => theme.bg1};
 
-  &:first-of-type {
-    margin: 0 0 8px 0;
-  }
   &:last-of-type {
     margin: 8px 0 0 0;
   }
   & > div:not(:first-child) {
-    text-align: right;
+    text-align: center;
   }
   :hover {
     background-color: ${({ theme }) => theme.bg2};
   }
+
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    flex-direction: row;
+    /* flex-direction: row; */
   }
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     flex-direction: column;
-    row-gap: 24px;
+    row-gap: 12px;
   `};
 `
 
@@ -70,11 +74,14 @@ const RangeLineItem = styled(DataLineItem)`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-self: flex-end;
+
+  margin-top: 4px;
+  width: 100%;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-  flex-direction: column;
-  row-gap: 4px;
+  background-color: ${({ theme }) => theme.bg2};
+    border-radius: 12px;
+    padding: 8px 0;
 `};
 `
 
@@ -97,6 +104,9 @@ const ExtentsText = styled.span`
   color: ${({ theme }) => theme.text3};
   font-size: 14px;
   margin-right: 4px;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
 `
 
 const PrimaryPositionIdData = styled.div`
@@ -201,6 +211,8 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
     return undefined
   }, [liquidity, pool, tickLower, tickUpper])
 
+  const tickAtLimit = useIsTickAtLimit(feeAmount, tickLower, tickUpper)
+
   // prices
   const { priceLower, priceUpper, quote, base } = getPriceOrderingFromPositionForUI(position)
 
@@ -216,7 +228,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
 
   return (
     <LinkRow to={positionSummaryLink}>
-      <RowFixed>
+      <RowBetween>
         <PrimaryPositionIdData>
           <DoubleCurrencyLogo currency0={currencyBase} currency1={currencyQuote} size={18} margin />
           <DataText>
@@ -230,7 +242,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
           </Badge>
         </PrimaryPositionIdData>
         <RangeBadge removed={removed} inRange={!outOfRange} />
-      </RowFixed>
+      </RowBetween>
 
       {priceLower && priceUpper ? (
         <RangeLineItem>
@@ -239,23 +251,23 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
               <Trans>Min: </Trans>
             </ExtentsText>
             <Trans>
-              {formatPrice(priceLower, 5)} <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
-              <HoverInlineText text={currencyBase?.symbol ?? ''} />
+              {formatTickPrice(priceLower, tickAtLimit, Bound.LOWER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
+              per <HoverInlineText text={currencyBase?.symbol ?? ''} />
             </Trans>
           </RangeText>{' '}
           <HideSmall>
             <DoubleArrow>⟷</DoubleArrow>{' '}
           </HideSmall>
           <SmallOnly>
-            <DoubleArrow>↕</DoubleArrow>{' '}
+            <DoubleArrow>⟷</DoubleArrow>{' '}
           </SmallOnly>
           <RangeText>
             <ExtentsText>
               <Trans>Max:</Trans>
             </ExtentsText>
             <Trans>
-              {formatPrice(priceUpper, 5)} <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
-              <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
+              {formatTickPrice(priceUpper, tickAtLimit, Bound.UPPER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
+              per <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
             </Trans>
           </RangeText>
         </RangeLineItem>

src/components/PositionPreview/index.tsx

@@ -1,30 +1,34 @@
-import { useState, useCallback, useContext, ReactNode } from 'react'
-import { Position } from '@uniswap/v3-sdk'
-import { LightCard } from 'components/Card'
-import { AutoColumn } from 'components/Column'
-import { TYPE } from 'theme'
-import { RowBetween, RowFixed } from 'components/Row'
-import CurrencyLogo from 'components/CurrencyLogo'
-import { unwrappedToken } from 'utils/unwrappedToken'
-import { Break } from 'components/earn/styled'
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
-import RateToggle from 'components/RateToggle'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
+import { Position } from '@uniswap/v3-sdk'
 import RangeBadge from 'components/Badge/RangeBadge'
-import { ThemeContext } from 'styled-components'
+import { LightCard } from 'components/Card'
+import { AutoColumn } from 'components/Column'
+import CurrencyLogo from 'components/CurrencyLogo'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import { Break } from 'components/earn/styled'
+import RateToggle from 'components/RateToggle'
+import { RowBetween, RowFixed } from 'components/Row'
 import JSBI from 'jsbi'
+import { ReactNode, useCallback, useContext, useState } from 'react'
+import { Bound } from 'state/mint/v3/actions'
+import { ThemeContext } from 'styled-components/macro'
+import { TYPE } from 'theme'
+import { formatTickPrice } from 'utils/formatTickPrice'
+import { unwrappedToken } from 'utils/unwrappedToken'
 
 export const PositionPreview = ({
   position,
   title,
   inRange,
   baseCurrencyDefault,
+  ticksAtLimit,
 }: {
   position: Position
   title?: ReactNode
   inRange: boolean
   baseCurrencyDefault?: Currency | undefined
+  ticksAtLimit: { [bound: string]: boolean | undefined }
 }) => {
   const theme = useContext(ThemeContext)
 
@@ -121,7 +125,11 @@ export const PositionPreview = ({
               <TYPE.main fontSize="12px">
                 <Trans>Min Price</Trans>
               </TYPE.main>
-              <TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(5)}`}</TYPE.mediumHeader>
+              <TYPE.mediumHeader textAlign="center">{`${formatTickPrice(
+                priceLower,
+                ticksAtLimit,
+                Bound.LOWER
+              )}`}</TYPE.mediumHeader>
               <TYPE.main textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
@@ -138,7 +146,11 @@ export const PositionPreview = ({
               <TYPE.main fontSize="12px">
                 <Trans>Max Price</Trans>
               </TYPE.main>
-              <TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(5)}`}</TYPE.mediumHeader>
+              <TYPE.mediumHeader textAlign="center">{`${formatTickPrice(
+                priceUpper,
+                ticksAtLimit,
+                Bound.UPPER
+              )}`}</TYPE.mediumHeader>
               <TYPE.main textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}

src/components/ProgressSteps/index.tsx

@@ -1,8 +1,9 @@
 import { useContext } from 'react'
 import styled from 'styled-components/macro'
-import { AutoColumn } from '../Column'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
+
 import { TYPE } from '../../theme'
+import { AutoColumn } from '../Column'
 
 const Wrapper = styled(AutoColumn)`
   margin-right: 8px;

src/components/QuestionHelper/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
+
 import Tooltip from '../Tooltip'
 
 const QuestionWrapper = styled.div`

src/components/RangeSelector/PresetsButtons.tsx

@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/macro'
+import { ButtonOutlined } from 'components/Button'
+import { AutoRow } from 'components/Row'
+import React from 'react'
+import ReactGA from 'react-ga'
+import styled from 'styled-components/macro'
+import { TYPE } from 'theme'
+
+const Button = styled(ButtonOutlined).attrs(() => ({
+  padding: '8px',
+  $borderRadius: '8px',
+}))`
+  color: ${({ theme }) => theme.text1};
+  flex: 1;
+`
+
+export default function PresetsButtons({ setFullRange }: { setFullRange: () => void }) {
+  return (
+    <AutoRow gap="4px" width="auto">
+      <Button
+        onClick={() => {
+          setFullRange()
+          ReactGA.event({
+            category: 'Liquidity',
+            action: 'Full Range Clicked',
+          })
+        }}
+      >
+        <TYPE.body fontSize={12}>
+          <Trans>Full Range</Trans>
+        </TYPE.body>
+      </Button>
+    </AutoRow>
+  )
+}

src/components/RangeSelector/index.tsx

@@ -1,7 +1,9 @@
 import { Trans } from '@lingui/macro'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
+import { AutoColumn } from 'components/Column'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
 import { RowBetween } from 'components/Row'
+import { Bound } from 'state/mint/v3/actions'
 
 // currencyA is the base token
 export default function RangeSelector({
@@ -16,6 +18,7 @@ export default function RangeSelector({
   currencyA,
   currencyB,
   feeAmount,
+  ticksAtLimit,
 }: {
   priceLower?: Price<Token, Token>
   priceUpper?: Price<Token, Token>
@@ -28,6 +31,7 @@ export default function RangeSelector({
   currencyA?: Currency | null
   currencyB?: Currency | null
   feeAmount?: number
+  ticksAtLimit: { [bound in Bound]?: boolean | undefined }
 }) {
   const tokenA = (currencyA ?? undefined)?.wrapped
   const tokenB = (currencyB ?? undefined)?.wrapped
@@ -37,31 +41,37 @@ export default function RangeSelector({
   const rightPrice = isSorted ? priceUpper : priceLower?.invert()
 
   return (
-    <RowBetween>
-      <StepCounter
-        value={leftPrice?.toSignificant(5) ?? ''}
-        onUserInput={onLeftRangeInput}
-        width="48%"
-        decrement={isSorted ? getDecrementLower : getIncrementUpper}
-        increment={isSorted ? getIncrementLower : getDecrementUpper}
-        feeAmount={feeAmount}
-        label={leftPrice ? `${currencyB?.symbol}` : '-'}
-        title={<Trans>Min Price</Trans>}
-        tokenA={currencyA?.symbol}
-        tokenB={currencyB?.symbol}
-      />
-      <StepCounter
-        value={rightPrice?.toSignificant(5) ?? ''}
-        onUserInput={onRightRangeInput}
-        width="48%"
-        decrement={isSorted ? getDecrementUpper : getIncrementLower}
-        increment={isSorted ? getIncrementUpper : getDecrementLower}
-        feeAmount={feeAmount}
-        label={rightPrice ? `${currencyB?.symbol}` : '-'}
-        tokenA={currencyA?.symbol}
-        tokenB={currencyB?.symbol}
-        title={<Trans>Max Price</Trans>}
-      />
-    </RowBetween>
+    <AutoColumn gap="md">
+      <RowBetween>
+        <StepCounter
+          value={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER] ? '0' : leftPrice?.toSignificant(5) ?? ''}
+          onUserInput={onLeftRangeInput}
+          width="48%"
+          decrement={isSorted ? getDecrementLower : getIncrementUpper}
+          increment={isSorted ? getIncrementLower : getDecrementUpper}
+          decrementDisabled={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
+          incrementDisabled={ticksAtLimit[isSorted ? Bound.LOWER : Bound.UPPER]}
+          feeAmount={feeAmount}
+          label={leftPrice ? `${currencyB?.symbol}` : '-'}
+          title={<Trans>Min Price</Trans>}
+          tokenA={currencyA?.symbol}
+          tokenB={currencyB?.symbol}
+        />
+        <StepCounter
+          value={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER] ? '∞' : rightPrice?.toSignificant(5) ?? ''}
+          onUserInput={onRightRangeInput}
+          width="48%"
+          decrement={isSorted ? getDecrementUpper : getIncrementLower}
+          increment={isSorted ? getIncrementUpper : getDecrementLower}
+          incrementDisabled={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
+          decrementDisabled={ticksAtLimit[isSorted ? Bound.UPPER : Bound.LOWER]}
+          feeAmount={feeAmount}
+          label={rightPrice ? `${currencyB?.symbol}` : '-'}
+          tokenA={currencyA?.symbol}
+          tokenB={currencyB?.symbol}
+          title={<Trans>Max Price</Trans>}
+        />
+      </RowBetween>
+    </AutoColumn>
   )
 }

src/components/RateToggle/index.tsx

@@ -22,10 +22,10 @@ export default function RateToggle({
     <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }} onClick={handleRateToggle}>
       <ToggleWrapper width="fit-content">
         <ToggleElement isActive={isSorted} fontSize="12px">
-          <Trans>{isSorted ? currencyA.symbol : currencyB.symbol} price</Trans>
+          <Trans>{isSorted ? currencyA.symbol : currencyB.symbol}</Trans>
         </ToggleElement>
         <ToggleElement isActive={!isSorted} fontSize="12px">
-          <Trans>{isSorted ? currencyB.symbol : currencyA.symbol} price</Trans>
+          <Trans>{isSorted ? currencyB.symbol : currencyA.symbol}</Trans>
         </ToggleElement>
       </ToggleWrapper>
     </div>

src/components/RoutingDiagram/RoutingDiagram.test.tsx

@@ -0,0 +1,56 @@
+import { Currency, Percent } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { DAI, USDC, WBTC } from 'constants/tokens'
+import { render } from 'test-utils'
+
+import RoutingDiagram, { RoutingDiagramEntry } from './RoutingDiagram'
+
+const percent = (strings: TemplateStringsArray) => new Percent(parseInt(strings[0]), 100)
+
+const singleRoute: RoutingDiagramEntry = { percent: percent`100`, path: [[USDC, DAI, FeeAmount.LOW]] }
+
+const multiRoute: RoutingDiagramEntry[] = [
+  { percent: percent`75`, path: [[USDC, DAI, FeeAmount.LOW]] },
+  {
+    percent: percent`25`,
+    path: [
+      [USDC, WBTC, FeeAmount.MEDIUM],
+      [WBTC, DAI, FeeAmount.HIGH],
+    ],
+  },
+]
+
+jest.mock(
+  'components/CurrencyLogo',
+  () =>
+    ({ currency }: { currency: Currency }) =>
+      `CurrencyLogo currency=${currency.symbol}`
+)
+
+jest.mock(
+  'components/DoubleLogo',
+  () =>
+    ({ currency0, currency1 }: { currency0: Currency; currency1: Currency }) =>
+      `DoubleCurrencyLogo currency0=${currency0.symbol} currency1=${currency1.symbol}`
+)
+
+jest.mock('../Popover', () => () => 'Popover')
+
+jest.mock('hooks/useTokenInfoFromActiveList', () => ({
+  useTokenInfoFromActiveList: (currency: Currency) => currency,
+}))
+
+it('renders when no routes are provided', () => {
+  const { asFragment } = render(<RoutingDiagram currencyIn={DAI} currencyOut={USDC} routes={[]} />)
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('renders single route', () => {
+  const { asFragment } = render(<RoutingDiagram currencyIn={USDC} currencyOut={DAI} routes={[singleRoute]} />)
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('renders multi route', () => {
+  const { asFragment } = render(<RoutingDiagram currencyIn={USDC} currencyOut={DAI} routes={multiRoute} />)
+  expect(asFragment()).toMatchSnapshot()
+})

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -0,0 +1,113 @@
+import { Currency, Percent } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import Badge from 'components/Badge'
+import CurrencyLogo from 'components/CurrencyLogo'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import Row, { AutoRow } from 'components/Row'
+import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
+import { Box } from 'rebass'
+import styled from 'styled-components/macro'
+import { TYPE } from 'theme'
+
+export interface RoutingDiagramEntry {
+  percent: Percent
+  path: [Currency, Currency, FeeAmount][]
+}
+
+const Wrapper = styled(Box)`
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg0};
+  width: 400px;
+`
+
+const RouteContainerRow = styled(Row)`
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: 24px 1fr 24px;
+`
+
+const RouteRow = styled(Row)`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 0.1rem 0.5rem;
+  position: relative;
+`
+
+const PoolBadge = styled(Badge)`
+  display: flex;
+  padding: 0.25rem 0.5rem;
+`
+
+const DottedLine = styled.div`
+  border-color: ${({ theme }) => theme.bg4};
+  border-top-style: dotted;
+  border-width: 4px;
+  height: 0px;
+  position: absolute;
+  width: calc(100%);
+  z-index: 1;
+`
+
+const OpaqueBadge = styled(Badge)`
+  background-color: ${({ theme }) => theme.bg2};
+  z-index: 2;
+`
+
+export default function RoutingDiagram({
+  currencyIn,
+  currencyOut,
+  routes,
+}: {
+  currencyIn: Currency
+  currencyOut: Currency
+  routes: RoutingDiagramEntry[]
+}) {
+  const tokenIn = useTokenInfoFromActiveList(currencyIn)
+  const tokenOut = useTokenInfoFromActiveList(currencyOut)
+
+  return (
+    <Wrapper>
+      {routes.map(({ percent, path }, index) => (
+        <RouteContainerRow key={index}>
+          <CurrencyLogo currency={tokenIn} />
+          <Route percent={percent} path={path} />
+          <CurrencyLogo currency={tokenOut} />
+        </RouteContainerRow>
+      ))}
+    </Wrapper>
+  )
+}
+
+function Route({ percent, path }: { percent: RoutingDiagramEntry['percent']; path: RoutingDiagramEntry['path'] }) {
+  return (
+    <RouteRow>
+      <DottedLine />
+      <OpaqueBadge>
+        <TYPE.small fontSize={12} style={{ wordBreak: 'normal' }}>
+          {percent.toSignificant(2)}%
+        </TYPE.small>
+      </OpaqueBadge>
+
+      <AutoRow gap="1px" width="100%" style={{ justifyContent: 'space-evenly', zIndex: 2 }}>
+        {path.map(([currency0, currency1, feeAmount], index) => (
+          <Pool key={index} currency0={currency0} currency1={currency1} feeAmount={feeAmount} />
+        ))}
+      </AutoRow>
+    </RouteRow>
+  )
+}
+
+function Pool({ currency0, currency1, feeAmount }: { currency0: Currency; currency1: Currency; feeAmount: FeeAmount }) {
+  const tokenInfo0 = useTokenInfoFromActiveList(currency0)
+  const tokenInfo1 = useTokenInfoFromActiveList(currency1)
+
+  return (
+    <PoolBadge>
+      <Box margin="0 5px 0 10px">
+        <DoubleCurrencyLogo currency0={tokenInfo1} currency1={tokenInfo0} size={20} />
+      </Box>
+      <TYPE.small fontSize={12}>{feeAmount / 10000}%</TYPE.small>
+    </PoolBadge>
+  )
+}

src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders multi route 1`] = `
+<DocumentFragment>
+  <div
+    class="RoutingDiagram__Wrapper-sc-o1ook0-0 fUoVYh css-vurnku"
+  >
+    <div
+      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV iiQQUx"
+    >
+      CurrencyLogo currency=USDC
+      <div
+        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+      >
+        <div
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
+        />
+        <div
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+        >
+          <div
+            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            style="word-break: normal;"
+          >
+            75%
+          </div>
+        </div>
+        <div
+          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          style="justify-content: space-evenly; z-index: 2;"
+          width="100%"
+        >
+          <div
+            class="Badge-sc-1mhw5si-0 RoutingDiagram__PoolBadge-sc-o1ook0-3 gayll bRJvWg"
+          >
+            <div
+              class="css-1t7xebc"
+            >
+              DoubleCurrencyLogo currency0=DAI currency1=USDC
+            </div>
+            <div
+              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            >
+              0.05%
+            </div>
+          </div>
+        </div>
+      </div>
+      CurrencyLogo currency=DAI
+    </div>
+    <div
+      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV iiQQUx"
+    >
+      CurrencyLogo currency=USDC
+      <div
+        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+      >
+        <div
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
+        />
+        <div
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+        >
+          <div
+            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            style="word-break: normal;"
+          >
+            25%
+          </div>
+        </div>
+        <div
+          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          style="justify-content: space-evenly; z-index: 2;"
+          width="100%"
+        >
+          <div
+            class="Badge-sc-1mhw5si-0 RoutingDiagram__PoolBadge-sc-o1ook0-3 gayll bRJvWg"
+          >
+            <div
+              class="css-1t7xebc"
+            >
+              DoubleCurrencyLogo currency0=WBTC currency1=USDC
+            </div>
+            <div
+              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            >
+              0.3%
+            </div>
+          </div>
+          <div
+            class="Badge-sc-1mhw5si-0 RoutingDiagram__PoolBadge-sc-o1ook0-3 gayll bRJvWg"
+          >
+            <div
+              class="css-1t7xebc"
+            >
+              DoubleCurrencyLogo currency0=DAI currency1=WBTC
+            </div>
+            <div
+              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            >
+              1%
+            </div>
+          </div>
+        </div>
+      </div>
+      CurrencyLogo currency=DAI
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders single route 1`] = `
+<DocumentFragment>
+  <div
+    class="RoutingDiagram__Wrapper-sc-o1ook0-0 fUoVYh css-vurnku"
+  >
+    <div
+      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV iiQQUx"
+    >
+      CurrencyLogo currency=USDC
+      <div
+        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+      >
+        <div
+          class="RoutingDiagram__DottedLine-sc-o1ook0-4 gwivhA"
+        />
+        <div
+          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-5 gayll cvyxdH"
+        >
+          <div
+            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            style="word-break: normal;"
+          >
+            100%
+          </div>
+        </div>
+        <div
+          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          style="justify-content: space-evenly; z-index: 2;"
+          width="100%"
+        >
+          <div
+            class="Badge-sc-1mhw5si-0 RoutingDiagram__PoolBadge-sc-o1ook0-3 gayll bRJvWg"
+          >
+            <div
+              class="css-1t7xebc"
+            >
+              DoubleCurrencyLogo currency0=DAI currency1=USDC
+            </div>
+            <div
+              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab css-15li2d9"
+            >
+              0.05%
+            </div>
+          </div>
+        </div>
+      </div>
+      CurrencyLogo currency=DAI
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders when no routes are provided 1`] = `
+<DocumentFragment>
+  <div
+    class="RoutingDiagram__Wrapper-sc-o1ook0-0 fUoVYh css-vurnku"
+  />
+</DocumentFragment>
+`;

src/components/Row/index.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 const Row = styled(Box)<{
   width?: string

src/components/SearchModal/CommonBases.tsx

@@ -1,14 +1,19 @@
 import { Trans } from '@lingui/macro'
-import { Text } from 'rebass'
 import { Currency } from '@uniswap/sdk-core'
+import { AutoColumn } from 'components/Column'
+import CurrencyLogo from 'components/CurrencyLogo'
+import QuestionHelper from 'components/QuestionHelper'
+import { AutoRow } from 'components/Row'
+import { COMMON_BASES } from 'constants/routing'
+import { Text } from 'rebass'
 import styled from 'styled-components/macro'
+import { currencyId } from 'utils/currencyId'
 
-import { COMMON_BASES } from '../../constants/routing'
-import { currencyId } from '../../utils/currencyId'
-import { AutoColumn } from '../Column'
-import QuestionHelper from '../QuestionHelper'
-import { AutoRow } from '../Row'
-import CurrencyLogo from '../CurrencyLogo'
+const MobileWrapper = styled(AutoColumn)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
 
 const BaseWrapper = styled.div<{ disable?: boolean }>`
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
@@ -39,7 +44,7 @@ export default function CommonBases({
   const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
 
   return bases.length > 0 ? (
-    <AutoColumn gap="md">
+    <MobileWrapper gap="md">
       <AutoRow>
         <Text fontWeight={500} fontSize={14}>
           <Trans>Common bases</Trans>
@@ -63,6 +68,6 @@ export default function CommonBases({
           )
         })}
       </AutoRow>
-    </AutoColumn>
+    </MobileWrapper>
   ) : null
 }

src/components/SearchModal/CurrencyList.tsx

@@ -1,27 +1,28 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { LightGreyCard } from 'components/Card'
+import QuestionHelper from 'components/QuestionHelper'
+import useTheme from 'hooks/useTheme'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
+
+import TokenListLogo from '../../assets/svg/tokenlist.svg'
+import { useIsUserAddedToken } from '../../hooks/Tokens'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useCombinedActiveList } from '../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import { TYPE } from '../../theme'
-import { useIsUserAddedToken } from '../../hooks/Tokens'
-import Column from '../Column'
-import { RowFixed, RowBetween } from '../Row'
-import CurrencyLogo from '../CurrencyLogo'
-import { MouseoverTooltip } from '../Tooltip'
-import { MenuItem } from './styleds'
-import Loader from '../Loader'
 import { isTokenOnList } from '../../utils'
+import Column from '../Column'
+import CurrencyLogo from '../CurrencyLogo'
+import Loader from '../Loader'
+import { RowBetween, RowFixed } from '../Row'
+import { MouseoverTooltip } from '../Tooltip'
 import ImportRow from './ImportRow'
-import { LightGreyCard } from 'components/Card'
-import TokenListLogo from '../../assets/svg/tokenlist.svg'
-import QuestionHelper from 'components/QuestionHelper'
-import useTheme from 'hooks/useTheme'
+import { MenuItem } from './styleds'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'