fix: remove animation from toggles on initial page load (#3886)

* fix: use simple toggle instead of toggle with text init commit

* fix: also change toggle in voting page and list toggle used in manage token list

* fix: simplify all toggle components into one configurable toggle

* fix: add ease-in animations for toggle

* fix: remove animation from toggle on initial page load to reduce thrash

Co-authored-by: Lynn Yu <lynn.yu@UNISWAP-MAC-015.local>
Co-authored-by: Lynn Yu <lynn.yu@uniswap.org>

.env

@@ -1 +1,2 @@
-REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
+REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
+REACT_APP_LOCALES="locales"

.env.production

@@ -1,5 +1,4 @@
 REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
-REACT_APP_PORTIS_ID="c0e2bf01-4b08-4fd5-ac7b-8e26b58cd236"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
-REACT_APP_GOOGLE_ANALYTICS_ID="UA-128182339-4"
+REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
 REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"

.github/pull_request_template.md

@@ -0,0 +1,24 @@
+Your PR title must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), and should start with one of the following [types](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type):
+
+- build: Changes that affect the build system or external dependencies (example scopes: yarn, eslint, typescript)
+- ci: Changes to our CI configuration files and scripts (example scopes: vercel, github, cypress)
+- docs: Documentation only changes
+- feat: A new feature
+- fix: A bug fix
+- perf: A code change that improves performance
+- refactor: A code change that neither fixes a bug nor adds a feature
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- test: Adding missing tests or correcting existing tests
+
+Example commit messages:
+
+- feat: adds support for gnosis safe wallet
+- fix: removes a polling memory leak
+- chore: bumps redux version
+
+Other things to note:
+
+- Please describe the change using verb statements (ex: Removes X from Y)
+- PRs with multiple changes should use a list of verb statements
+- Add any relevant unit / integration tests
+- Changes will be previewable via vercel. Non-obvious changes should include instructions for how to reproduce them

.github/workflows/bundle.yaml

@@ -1,40 +0,0 @@
-name: Widgets
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build
-        run: yarn widgets:build

.github/workflows/crowdin-sync.yaml

@@ -42,7 +42,7 @@ jobs:
         run: "yarn i18n:extract"
 
       - name: Synchronize
-        uses: crowdin/github-action@1.1.0
+        uses: crowdin/github-action@1.4.9
         with:
           upload_sources: false
           download_translations: true

.github/workflows/integration-tests.yaml

@@ -38,10 +38,10 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - run: yarn cypress install
+
       - run: yarn build
         env:
           CI: false
-          REACT_APP_NETWORK_URL: 'https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847'
           REACT_APP_SERVICE_WORKER: false
 
       - run: yarn test:e2e

.gitignore

@@ -17,11 +17,9 @@
 # testing
 /coverage
 
-# production
+# builds
 /build
-
-# widgets
-/dist
+/dts
 
 # misc
 .DS_Store

README.md

@@ -1,9 +1,9 @@
-# Uniswap Interface
+# Uniswap Labs Interface
 
-[![Unit Tests](https://github.com/Uniswap/uniswap-interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions/workflows/unit-tests.yaml)
-[![Integration Tests](https://github.com/Uniswap/uniswap-interface/actions/workflows/integration-tests.yaml/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions/workflows/integration-tests.yaml)
-[![Lint](https://github.com/Uniswap/uniswap-interface/actions/workflows/lint.yml/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions/workflows/lint.yml)
-[![Release](https://github.com/Uniswap/uniswap-interface/actions/workflows/release.yaml/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions/workflows/release.yaml)
+[![Unit Tests](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml)
+[![Integration Tests](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml)
+[![Lint](https://github.com/Uniswap/interface/actions/workflows/lint.yml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/lint.yml)
+[![Release](https://github.com/Uniswap/interface/actions/workflows/release.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/release.yaml)
 [![Crowdin](https://badges.crowdin.net/uniswap-interface/localized.svg)](https://crowdin.com/project/uniswap-interface)
 
 An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
@@ -48,4 +48,4 @@ The Uniswap Interface supports swapping, adding liquidity, removing liquidity an
 ## Accessing Uniswap V1
 
 The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
-linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

cosmos.config.json

@@ -1,9 +0,0 @@
-{
-  "watchDirs": [
-    "src"
-  ],
-  "webpack": {
-    "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.js"
-  }
-}

cosmos.override.js

@@ -1,25 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { DefinePlugin } = require('webpack')
-
-// Renders the cosmos fixtures in isolation, instead of using public/index.html.
-module.exports = (webpackConfig) => ({
-  ...webpackConfig,
-  plugins: webpackConfig.plugins.map((plugin) => {
-    if (plugin instanceof HtmlWebpackPlugin) {
-      return new HtmlWebpackPlugin({
-        templateContent: '<body></body>',
-      })
-    }
-    if (plugin instanceof DefinePlugin) {
-      return new DefinePlugin({
-        ...plugin.definitions,
-        'process.env': {
-          ...plugin.definitions['process.env'],
-          REACT_APP_IS_WIDGET: true,
-        },
-      })
-    }
-    return plugin
-  }),
-})

cypress/integration/swap.test.ts

@@ -2,16 +2,27 @@ describe('Swap', () => {
   beforeEach(() => {
     cy.visit('/swap')
   })
+
+  it('starts with ETH selected by default', () => {
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+    cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'ETH')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'Select a token')
+  })
+
   it('can enter an amount into input', () => {
-    cy.get('#swap-currency-input .token-amount-input').type('0.001', { delay: 200 }).should('have.value', '0.001')
+    cy.get('#swap-currency-input .token-amount-input')
+      .clear()
+      .type('0.001', { delay: 200 })
+      .should('have.value', '0.001')
   })
 
   it('zero swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input').type('0.0', { delay: 200 }).should('have.value', '0.0')
+    cy.get('#swap-currency-input .token-amount-input').clear().type('0.0', { delay: 200 }).should('have.value', '0.0')
   })
 
   it('invalid swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input').type('\\', { delay: 200 }).should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input').clear().type('\\', { delay: 200 }).should('have.value', '')
   })
 
   it('can enter an amount into output', () => {

package.json

@@ -1,16 +1,35 @@
 {
-  "name": "@uniswap/interface",
+  "name": "@uniswap/widgets",
+  "version": "1.0.7",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "main": "dist/interface.js",
-  "module": "dist/interface.esm.js",
-  "types": "dist/index.d.ts",
   "files": [
-    "lib",
     "dist"
   ],
-  "private": true,
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./locales/*": {
+      "import": "./dist/locales/*.js",
+      "require": "./dist/cjs/locales/*.cjs"
+    },
+    "./fonts.css": {
+      "import": "./dist/fonts.css",
+      "require": "./dist/fonts.css"
+    }
+  },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@ethersproject/experimental": "^5.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
@@ -18,16 +37,13 @@
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
+    "@lingui/core": "^3.9.0",
+    "@lingui/macro": "^3.9.0",
+    "@lingui/react": "^3.9.0",
     "@metamask/jazzicon": "^2.0.0",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
-    "@reduxjs/toolkit": "^1.6.1",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-replace": "^3.0.1",
-    "@rollup/plugin-url": "^6.1.0",
-    "@svgr/rollup": "^6.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -64,13 +80,11 @@
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@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": "^7.0.2-alpha.0",
-    "@web3-react/walletlink-connector": "^6.2.11",
+    "@web3-react/metamask": "^8.0.19-beta.0",
+    "@web3-react/walletconnect": "^8.0.26-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
+    "babel-plugin-macros": "^3.1.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.3",
     "cypress": "^7.7.0",
@@ -91,30 +105,35 @@
     "polyfill-object.fromentries": "^1.0.1",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
+    "react": "^17.0.1",
     "react-confetti": "^6.0.0",
-    "react-cosmos": "^5.6.6",
-    "react-ga": "^2.5.7",
+    "react-dom": "^17.0.1",
+    "react-ga4": "^1.4.1",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
-    "rollup": "^2.63.0",
-    "rollup-plugin-dts": "^4.1.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-typescript2": "^0.31.1",
     "sass": "^1.45.1",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
     "typechain": "^5.0.0",
-    "typescript": "^4.2.3",
+    "typescript": "^4.4.3",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "use-resize-observer": "^8.0.0",
     "wcag-contrast": "^3.0.0",
     "web-vitals": "^2.1.0",
+    "web3-react-abstract-connector": "npm:@web3-react/abstract-connector@^6.0.7",
+    "web3-react-fortmatic-connector": "npm:@web3-react/fortmatic-connector@^6.0.9",
+    "web3-react-injected-connector": "npm:@web3-react/injected-connector@^6.0.7",
+    "web3-react-types": "npm:@web3-react/types@^6.0.7",
+    "web3-react-walletconnect-connector": "npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0",
+    "web3-react-walletlink-connector": "npm:@web3-react/walletlink-connector@^6.2.13",
     "workbox-core": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0"
@@ -124,20 +143,18 @@
   },
   "scripts": {
     "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/**/artifacts/contracts/**/*.json\"",
+    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
     "graphql:generate": "graphql-codegen --config codegen.yml",
     "prei18n:extract": "touch src/locales/en-US.po",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
-    "postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "prepare": "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'",
-    "widgets:start": "cosmos",
-    "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
+    "test": "react-scripts test --env=./custom-test-env.cjs",
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'"
   },
   "browserslist": {
     "production": [
@@ -153,35 +170,26 @@
   },
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@ethersproject/abi": "^5.4.1",
-    "@ethersproject/abstract-provider": "^5.4.1",
-    "@ethersproject/address": "^5.4.0",
-    "@ethersproject/bignumber": "^5.4.2",
-    "@ethersproject/bytes": "^5.4.0",
-    "@ethersproject/constants": "^5.4.0",
-    "@ethersproject/contracts": "^5.4.1",
-    "@ethersproject/hash": "^5.4.0",
-    "@ethersproject/providers": "5.4.0",
-    "@ethersproject/solidity": "^5.4.0",
-    "@ethersproject/strings": "^5.4.0",
-    "@ethersproject/units": "^5.4.0",
-    "@ethersproject/wallet": "^5.4.0",
+    "@babel/runtime": "^7.17.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
-    "@lingui/core": "^3.9.0",
-    "@lingui/macro": "^3.9.0",
-    "@lingui/react": "^3.9.0",
     "@popperjs/core": "^2.4.4",
-    "@uniswap/redux-multicall": "^1.0.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@uniswap/redux-multicall": "^1.1.1",
     "@uniswap/router-sdk": "^1.0.3",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.5.10",
+    "@uniswap/smart-order-router": "^2.5.26",
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
-    "@uniswap/v3-sdk": "^3.7.1",
-    "@web3-react/core": "^6.0.9",
+    "@uniswap/v3-sdk": "^3.8.2",
+    "@web3-react/core": "^8.0.23-beta.0",
+    "@web3-react/eip1193": "^8.0.18-beta.0",
+    "@web3-react/empty": "^8.0.12-beta.0",
+    "@web3-react/types": "^8.0.12-beta.0",
+    "@web3-react/url": "^8.0.17-beta.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
+    "ethers": "^5.1.4",
     "immer": "^9.0.6",
     "jotai": "^1.3.7",
     "jsbi": "^3.1.4",
@@ -192,24 +200,28 @@
     "node-vibrant": "^3.2.1-alpha.1",
     "polished": "^3.3.2",
     "popper-max-size-modifier": "^0.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-popper": "^2.2.3",
-    "react-redux": "^7.2.2",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
-    "redux": "^4.1.2",
+    "setimmediate": "^1.0.5",
     "styled-components": "^5.3.0",
     "tiny-invariant": "^1.2.0",
     "wcag-contrast": "^3.0.0",
-    "wicg-inert": "^3.1.1",
-    "widgets-web3-react/core": "npm:@web3-react/core@8.0.16-alpha.0",
-    "widgets-web3-react/eip1193": "npm:@web3-react/eip1193@8.0.16-alpha.0",
-    "widgets-web3-react/empty": "npm:@web3-react/empty@8.0.17-alpha.0",
-    "widgets-web3-react/metamask": "npm:@web3-react/metamask@8.0.16-alpha.0",
-    "widgets-web3-react/types": "npm:@web3-react/types@8.0.16-alpha.0",
-    "widgets-web3-react/url": "npm:@web3-react/url@8.0.17-alpha.0"
+    "web3-react-core": "npm:@web3-react/core@^6.0.9",
+    "wicg-inert": "^3.1.1"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.17.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.1.2"
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.6",
+    "encoding": "^0.1.13",
+    "utf-8-validate": "^5.0.8"
   }
 }

rollup.config.ts

@@ -1,63 +0,0 @@
-/**
- * Bundles the widgets library, which is released independently of the interface application.
- * This library lives in src/lib, but shares code with the interface application.
- */
-
-import eslint from '@rollup/plugin-eslint'
-import json from '@rollup/plugin-json'
-import replace from '@rollup/plugin-replace'
-import url from '@rollup/plugin-url'
-import svgr from '@svgr/rollup'
-import dts from 'rollup-plugin-dts'
-import sass from 'rollup-plugin-scss'
-import typescript from 'rollup-plugin-typescript2'
-
-import { dependencies } from './package.json'
-
-const deps = Object.keys(dependencies)
-
-const replacements = {
-  'process.env.REACT_APP_IS_WIDGET': true,
-}
-
-const library = {
-  input: 'src/lib/index.tsx',
-  output: [
-    {
-      file: 'dist/widgets.js',
-      format: 'cjs',
-      inlineDynamicImports: true,
-      sourcemap: true,
-    },
-    {
-      file: 'dist/widgets.esm.js',
-      format: 'esm',
-      inlineDynamicImports: true,
-      sourcemap: true,
-    },
-  ],
-  // necessary because some nested imports (eg jotai/*) would otherwise not resolve.
-  external: (source: string) => Boolean(deps.find((dep) => source === dep || source.startsWith(dep + '/'))),
-  plugins: [
-    eslint({ include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'] }),
-    json(), // imports json
-    replace({ ...replacements, preventAssignment: true }),
-    url(), // imports files (including svgs) as data URIs
-    svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass(), // imports sass styles
-    typescript({ tsconfig: './tsconfig.lib.json', useTsconfigDeclarationDir: true }),
-  ],
-}
-
-const typings = {
-  input: 'dist/dts/lib/index.d.ts',
-  output: {
-    file: 'dist/widgets.d.ts',
-    format: 'es',
-  },
-  external: (source: string) => source.endsWith('.scss'),
-  plugins: [dts({ compilerOptions: { baseUrl: 'dist/dts' } })],
-}
-
-const config = [library, typings]
-export default config

src/assets/svg/auto_router.svg

@@ -1,10 +0,0 @@
-<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/dot_line.svg

@@ -1,3 +1,3 @@
-<svg width="100%" height="35"  viewBox="800 0 300 200" xmlns="http://www.w3.org/2000/svg">
-    <line x1="0" x2="2000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
+<svg width="100%" height="35"  viewBox="850 0 300 200" xmlns="http://www.w3.org/2000/svg">
+    <line x1="0" x2="3000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
 </svg>

src/assets/svg/optimistic_ethereum.svg

@@ -1,16 +1,5 @@
-<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 width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="250" fill="#FF0420"/>
+<path d="M177.133 316.446C162.247 316.446 150.051 312.943 140.544 305.938C131.162 298.808 126.471 288.676 126.471 275.541C126.471 272.789 126.784 269.411 127.409 265.408C129.036 256.402 131.35 245.581 134.352 232.947C142.858 198.547 164.812 181.347 200.213 181.347C209.845 181.347 218.476 182.973 226.107 186.225C233.738 189.352 239.742 194.106 244.12 200.486C248.498 206.74 250.688 214.246 250.688 223.002C250.688 225.629 250.375 228.944 249.749 232.947C247.873 244.08 245.621 254.901 242.994 265.408C238.616 282.546 231.048 295.368 220.29 303.874C209.532 312.255 195.147 316.446 177.133 316.446ZM179.76 289.426C186.766 289.426 192.707 287.362 197.586 283.234C202.59 279.106 206.155 272.789 208.281 264.283C211.158 252.524 213.348 242.266 214.849 233.51C215.349 230.883 215.599 228.194 215.599 225.441C215.599 214.058 209.657 208.366 197.774 208.366C190.768 208.366 184.764 210.43 179.76 214.558C174.882 218.687 171.379 225.004 169.253 233.51C167.001 241.891 164.749 252.149 162.498 264.283C161.997 266.784 161.747 269.411 161.747 272.163C161.747 283.672 167.752 289.426 179.76 289.426Z" fill="white"/>
+<path d="M259.303 314.57C257.927 314.57 256.863 314.132 256.113 313.256C255.487 312.255 255.3 311.13 255.55 309.879L281.444 187.914C281.694 186.538 282.382 185.412 283.508 184.536C284.634 183.661 285.822 183.223 287.073 183.223H336.985C350.87 183.223 362.003 186.1 370.384 191.854C378.891 197.609 383.144 205.927 383.144 216.81C383.144 219.937 382.769 223.19 382.018 226.567C378.891 240.953 372.574 251.586 363.067 258.466C353.685 265.346 340.8 268.786 324.413 268.786H299.082L290.451 309.879C290.2 311.255 289.512 312.38 288.387 313.256C287.261 314.132 286.072 314.57 284.822 314.57H259.303ZM325.727 242.892C330.98 242.892 335.546 241.453 339.424 238.576C343.427 235.699 346.054 231.571 347.305 226.192C347.68 224.065 347.868 222.189 347.868 220.563C347.868 216.935 346.805 214.183 344.678 212.307C342.551 210.305 338.924 209.305 333.795 209.305H311.278L304.148 242.892H325.727Z" fill="white"/>
 </svg>

src/components/AccountDetails/Copy.tsx

@@ -1,49 +1,64 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
+import useCopyClipboard from 'hooks/useCopyClipboard'
+import React, { useCallback } from 'react'
 import { CheckCircle, Copy } from 'react-feather'
 import styled from 'styled-components/macro'
-
-import useCopyClipboard from '../../hooks/useCopyClipboard'
-import { LinkStyledButton } from '../../theme'
+import { LinkStyledButton } from 'theme'
 
 const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ theme }) => theme.text3};
+  color: ${({ color, theme }) => color || theme.text3};
   flex-shrink: 0;
   display: flex;
   text-decoration: none;
-  font-size: 0.825rem;
   :hover,
   :active,
   :focus {
     text-decoration: none;
-    color: ${({ theme }) => theme.text2};
+    color: ${({ color, theme }) => color || theme.text2};
   }
 `
-const TransactionStatusText = styled.span`
+const StyledText = styled.span`
   margin-left: 0.25rem;
-  font-size: 0.825rem;
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
 `
 
-export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode }) {
+const Copied = ({ iconSize }: { iconSize?: number }) => (
+  <StyledText>
+    <CheckCircle size={iconSize ?? '16'} />
+    <StyledText>
+      <Trans>Copied</Trans>
+    </StyledText>
+  </StyledText>
+)
+
+const Icon = ({ iconSize }: { iconSize?: number }) => (
+  <StyledText>
+    <Copy size={iconSize ?? '16'} />
+  </StyledText>
+)
+
+interface BaseProps {
+  toCopy: string
+  color?: string
+  iconSize?: number
+  iconPosition?: 'left' | 'right'
+}
+export type CopyHelperProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
+
+export default function CopyHelper({ color, toCopy, children, iconSize, iconPosition }: CopyHelperProps) {
   const [isCopied, setCopied] = useCopyClipboard()
+  const copy = useCallback(() => {
+    setCopied(toCopy)
+  }, [toCopy, setCopied])
 
   return (
-    <CopyIcon onClick={() => setCopied(props.toCopy)}>
-      {isCopied ? (
-        <TransactionStatusText>
-          <CheckCircle size={'16'} />
-          <TransactionStatusText>
-            <Trans>Copied</Trans>
-          </TransactionStatusText>
-        </TransactionStatusText>
-      ) : (
-        <TransactionStatusText>
-          <Copy size={'16'} />
-        </TransactionStatusText>
-      )}
-      {isCopied ? '' : props.children}
+    <CopyIcon onClick={copy} color={color}>
+      {iconPosition === 'left' ? isCopied ? <Copied iconSize={iconSize} /> : <Icon iconSize={iconSize} /> : null}
+      {iconPosition === 'left' && <>&nbsp;</>}
+      {isCopied ? '' : children}
+      {iconPosition === 'right' && <>&nbsp;</>}
+      {iconPosition === 'right' ? isCopied ? <Copied iconSize={iconSize} /> : <Icon iconSize={iconSize} /> : null}
     </CopyIcon>
   )
 }

src/components/AccountDetails/TransactionSummary.tsx

@@ -25,7 +25,7 @@ import {
   VoteTransactionInfo,
   WithdrawLiquidityStakingTransactionInfo,
   WrapTransactionInfo,
-} from '../../state/transactions/actions'
+} from '../../state/transactions/types'
 
 function formatAmount(amountRaw: string, decimals: number, sigFigs: number): string {
   return new Fraction(amountRaw, JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))).toSignificant(sigFigs)

src/components/AccountDetails/index.tsx

@@ -1,23 +1,23 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
+import { Connector } from '@web3-react/types'
+import CopyHelper from 'components/AccountDetails/Copy'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
-import { Connector } from 'widgets-web3-react/types'
+import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, portis, walletlink } from '../../connectors'
+import { injected, walletlink } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
-import { clearAllTransactions } from '../../state/transactions/actions'
+import { clearAllTransactions } from '../../state/transactions/reducer'
 import { ExternalLink, LinkStyledButton, ThemedText } from '../../theme'
 import { shortenAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonSecondary } from '../Button'
 import StatusIcon from '../Identicon/StatusIcon'
 import { AutoRow } from '../Row'
-import Copy from './Copy'
 import Transaction from './Transaction'
 
 const HeaderRow = styled.div`
@@ -181,15 +181,6 @@ function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Conne
   return (
     <IconWrapper size={16}>
       <StatusIcon connector={connector} />
-      {connector === portis && (
-        <MainWalletAction
-          onClick={() => {
-            portis.portis.showPortis()
-          }}
-        >
-          <Trans>Show Portis</Trans>
-        </MainWalletAction>
-      )}
     </IconWrapper>
   )
 }
@@ -210,10 +201,6 @@ const WalletAction = styled(ButtonSecondary)`
   }
 `
 
-const MainWalletAction = styled(WalletAction)`
-  color: ${({ theme }) => theme.primary1};
-`
-
 function renderTransactions(transactions: string[]) {
   return (
     <TransactionListWrapper>
@@ -323,11 +310,11 @@ export default function AccountDetails({
                     <AccountControl>
                       <div>
                         {account && (
-                          <Copy toCopy={account}>
+                          <CopyHelper toCopy={account} iconPosition="left">
                             <span style={{ marginLeft: '4px' }}>
                               <Trans>Copy Address</Trans>
                             </span>
-                          </Copy>
+                          </CopyHelper>
                         )}
                         {chainId && account && (
                           <AddressLink
@@ -349,11 +336,11 @@ export default function AccountDetails({
                     <AccountControl>
                       <div>
                         {account && (
-                          <Copy toCopy={account}>
+                          <CopyHelper toCopy={account} iconPosition="left">
                             <span style={{ marginLeft: '4px' }}>
                               <Trans>Copy Address</Trans>
                             </span>
-                          </Copy>
+                          </CopyHelper>
                         )}
                         {chainId && account && (
                           <AddressLink

src/components/Blocklist/index.tsx

@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { ReactNode, useMemo } from 'react'
 
-// SDN OFAC addresses
 const BLOCKED_ADDRESSES: string[] = [
   '0x7Db418b5D567A4e0E8c59Ad71BE1FcE48f3E6107',
   '0x72a5843cc08275C8171E582972Aa4fDa8C397B2A',
@@ -24,15 +23,18 @@ const BLOCKED_ADDRESSES: string[] = [
   '0x6acdfba02d390b97ac2b2d42a63e85293bcc1',
   '0x48549a34ae37b12f6a30566245176994e17c6',
   '0x5512d943ed1f7c8a43f3435c85f7ab68b30121',
-  '0xc455f7fd3e0e12afd51fba5c106909934d8a0e',
-  '0x3cbded43efdaf0fc77b9c55f6fc9988fcc9b757d',
+  '0xC455f7fd3e0e12afd51fba5c106909934D8A0e4a',
+  '0x3CBdeD43EFdAf0FC77b9C55F6fC9988fCC9b757d',
   '0x67d40EE1A85bf4a4Bb7Ffae16De985e8427B6b45',
-  '0x6f1ca141a28907f78ebaa64fb83a9088b02a8352',
-  '0x6acdfba02d390b97ac2b2d42a63e85293bcc160e',
+  '0x6F1cA141A28907F78Ebaa64fb83A9088b02A8352',
+  '0x6aCDFBA02D390b97Ac2b2d42A63E85293BCc160e',
   '0x48549a34ae37b12f6a30566245176994e17c6b4a',
   '0x5512d943ed1f7c8a43f3435c85f7ab68b30121b0',
-  '0xc455f7fd3e0e12afd51fba5c106909934d8a0e4a',
+  '0xC455f7fd3e0e12afd51fba5c106909934D8A0e4a',
   '0x629e7Da20197a5429d30da36E77d06CdF796b71A',
+  '0x7FF9cFad3877F21d41Da833E2F775dB0569eE3D9',
+  '0x098B716B8Aaf21512996dC57EB0615e2383E2f96',
+  '0xfEC8A60023265364D066a1212fDE3930F6Ae8da7',
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {

src/components/ConnectedAccountBlocked/index.tsx

@@ -0,0 +1,58 @@
+import { Trans } from '@lingui/macro'
+import CopyHelper from 'components/AccountDetails/Copy'
+import Column from 'components/Column'
+import useTheme from 'hooks/useTheme'
+import { AlertOctagon } from 'react-feather'
+import styled from 'styled-components/macro'
+import { ExternalLink, ThemedText } from 'theme'
+
+import Modal from '../Modal'
+
+const ContentWrapper = styled(Column)`
+  align-items: center;
+  margin: 32px;
+  text-align: center;
+`
+const WarningIcon = styled(AlertOctagon)`
+  min-height: 22px;
+  min-width: 22px;
+  color: ${({ theme }) => theme.warning};
+`
+const Copy = styled(CopyHelper)`
+  font-size: 12px;
+`
+
+interface ConnectedAccountBlockedProps {
+  account: string | null | undefined
+  isOpen: boolean
+}
+
+export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedProps) {
+  const theme = useTheme()
+  return (
+    <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
+      <ContentWrapper>
+        <WarningIcon />
+        <ThemedText.LargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
+          <Trans>Blocked Address</Trans>
+        </ThemedText.LargeHeader>
+        <ThemedText.DarkGray fontSize={12} marginBottom={12}>
+          {props.account}
+        </ThemedText.DarkGray>
+        <ThemedText.Main fontSize={14} marginBottom={12}>
+          <Trans>This address is blocked on the Uniswap Labs interface because it is associated with one or more</Trans>{' '}
+          <ExternalLink href="https://help.uniswap.org/en/articles/6149816">
+            <Trans>blocked activities</Trans>
+          </ExternalLink>
+          .
+        </ThemedText.Main>
+        <ThemedText.Main fontSize={12}>
+          <Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
+        </ThemedText.Main>
+        <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.primary1} iconPosition="right">
+          compliance@uniswap.org
+        </Copy>
+      </ContentWrapper>
+    </Modal>
+  )
+}

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -27,13 +27,16 @@ export function FiatValue({
     return theme.red1
   }, [priceImpact, theme.green1, theme.red1, theme.text3, theme.yellow1])
 
+  const p = Number(fiatValue?.toFixed())
+  const visibleDecimalPlaces = p < 1.05 ? 4 : 2
+
   return (
     <ThemedText.Body fontSize={14} color={fiatValue ? theme.text3 : theme.text4}>
       {fiatValue ? (
         <Trans>
           $
           <HoverInlineText
-            text={fiatValue?.toSignificant(6, { groupSeparator: ',' })}
+            text={fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}
             textColor={fiatValue ? theme.text3 : theme.text4}
           />
         </Trans>

src/components/ErrorBoundary/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import React, { ErrorInfo } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
 
 import store, { AppState } from '../../state'
@@ -49,6 +49,13 @@ type ErrorBoundaryState = {
 
 const IS_UNISWAP = window.location.hostname === 'app.uniswap.org'
 
+async function updateServiceWorker(): Promise<ServiceWorkerRegistration> {
+  const ready = await navigator.serviceWorker.ready
+  // the return type of update is incorrectly typed as Promise<void>. See
+  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update
+  return ready.update() as unknown as Promise<ServiceWorkerRegistration>
+}
+
 export default class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
   constructor(props: unknown) {
     super(props)
@@ -56,15 +63,29 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
   }
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    updateServiceWorker()
+      .then(async (registration) => {
+        // We want to refresh only if we detect a new service worker is waiting to be activated.
+        // See details about it: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
+        if (registration?.waiting) {
+          await registration.unregister()
+
+          // Makes Workbox call skipWaiting(). For more info on skipWaiting see: https://developer.chrome.com/docs/workbox/handling-service-worker-updates/
+          registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+
+          // Once the service worker is unregistered, we can reload the page to let
+          // the browser download a fresh copy of our app (invalidating the cache)
+          window.location.reload()
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to update service worker', error)
+      })
     return { error }
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    ReactGA.exception({
-      ...error,
-      ...errorInfo,
-      fatal: true,
-    })
+    ReactGA.event('exception', { description: error.toString() + errorInfo.toString(), fatal: true })
   }
 
   render() {

src/components/FeeSelector/index.tsx

@@ -11,7 +11,7 @@ import { PoolState, usePools } from 'hooks/usePools'
 import usePrevious from 'hooks/usePrevious'
 import { DynamicSection } from 'pages/AddLiquidity/styled'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components/macro'
 import { ThemedText } from 'theme'

src/components/FeeSelector/shared.tsx

@@ -10,7 +10,7 @@ export const FEE_AMOUNT_DETAIL: Record<
   [FeeAmount.LOWEST]: {
     label: '0.01',
     description: <Trans>Best for very stable pairs.</Trans>,
-    supportedChains: [SupportedChainId.MAINNET],
+    supportedChains: [SupportedChainId.MAINNET, SupportedChainId.POLYGON, SupportedChainId.POLYGON_MUMBAI],
   },
   [FeeAmount.LOW]: {
     label: '0.05',

src/components/Header/NetworkSelector.tsx

@@ -51,6 +51,16 @@ const FlyoutHeader = styled.div`
   font-weight: 400;
 `
 const FlyoutMenu = styled.div`
+  position: absolute;
+  top: 54px;
+  width: 272px;
+  z-index: 99;
+  padding-top: 10px;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    top: 40px;
+  }
+`
+const FlyoutMenuContents = styled.div`
   align-items: flex-start;
   background-color: ${({ theme }) => theme.bg0};
   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),
@@ -61,16 +71,9 @@ const FlyoutMenu = styled.div`
   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;
@@ -90,6 +93,13 @@ const FlyoutRowActiveIndicator = styled.div`
   height: 9px;
   width: 9px;
 `
+
+const CircleContainer = styled.div`
+  width: 20px;
+  display: flex;
+  justify-content: center;
+`
+
 const LinkOutCircle = styled(ArrowDownCircle)`
   transform: rotate(230deg);
   width: 16px;
@@ -143,7 +153,7 @@ const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
       return <Trans>Arbitrum Bridge</Trans>
     case SupportedChainId.OPTIMISM:
     case SupportedChainId.OPTIMISTIC_KOVAN:
-      return <Trans>Optimism Gateway</Trans>
+      return <Trans>Optimism Bridge</Trans>
     case SupportedChainId.POLYGON:
     case SupportedChainId.POLYGON_MUMBAI:
       return <Trans>Polygon Bridge</Trans>
@@ -185,7 +195,11 @@ function Row({
     <FlyoutRow onClick={() => onSelectChain(targetChain)} active={active}>
       <Logo src={logoUrl} />
       <NetworkLabel>{label}</NetworkLabel>
-      {chainId === targetChain && <FlyoutRowActiveIndicator />}
+      {chainId === targetChain && (
+        <CircleContainer>
+          <FlyoutRowActiveIndicator />
+        </CircleContainer>
+      )}
     </FlyoutRow>
   )
 
@@ -194,21 +208,30 @@ function Row({
       <ActiveRowWrapper>
         {rowContent}
         <ActiveRowLinkList>
-          {bridge ? (
+          {bridge && (
             <ExternalLink href={bridge}>
-              <BridgeLabel chainId={chainId} /> <LinkOutCircle />
+              <BridgeLabel chainId={chainId} />
+              <CircleContainer>
+                <LinkOutCircle />
+              </CircleContainer>
             </ExternalLink>
-          ) : null}
-          {explorer ? (
+          )}
+          {explorer && (
             <ExternalLink href={explorer}>
-              <ExplorerLabel chainId={chainId} /> <LinkOutCircle />
+              <ExplorerLabel chainId={chainId} />
+              <CircleContainer>
+                <LinkOutCircle />
+              </CircleContainer>
             </ExternalLink>
-          ) : null}
-          {helpCenterUrl ? (
+          )}
+          {helpCenterUrl && (
             <ExternalLink href={helpCenterUrl}>
-              <Trans>Help Center</Trans> <LinkOutCircle />
+              <Trans>Help Center</Trans>
+              <CircleContainer>
+                <LinkOutCircle />
+              </CircleContainer>
             </ExternalLink>
-          ) : null}
+          )}
         </ActiveRowLinkList>
       </ActiveRowWrapper>
     )
@@ -252,8 +275,8 @@ export default function NetworkSelector() {
 
   const handleChainSwitch = useCallback(
     (targetChain: number, skipToggle?: boolean) => {
-      if (!library) return
-      switchToNetwork({ library, chainId: targetChain })
+      if (!library?.provider) return
+      switchToNetwork({ provider: library.provider, chainId: targetChain })
         .then(() => {
           if (!skipToggle) {
             toggle()
@@ -305,21 +328,23 @@ export default function NetworkSelector() {
   }
 
   return (
-    <SelectorWrapper ref={node as any}>
-      <SelectorControls onClick={toggle} interactive>
+    <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
+      <SelectorControls interactive>
         <SelectorLogo interactive src={info.logoUrl} />
         <SelectorLabel>{info.label}</SelectorLabel>
         <StyledChevronDown />
       </SelectorControls>
       {open && (
-        <FlyoutMenu onMouseLeave={toggle}>
-          <FlyoutHeader>
-            <Trans>Select a network</Trans>
-          </FlyoutHeader>
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} />
+        <FlyoutMenu>
+          <FlyoutMenuContents>
+            <FlyoutHeader>
+              <Trans>Select a network</Trans>
+            </FlyoutHeader>
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} />
+          </FlyoutMenuContents>
         </FlyoutMenu>
       )}
     </SelectorWrapper>

src/components/Header/index.tsx

@@ -264,9 +264,7 @@ export default function Header() {
 
   const {
     infoLink,
-    addNetworkInfo: {
-      nativeCurrency: { symbol: nativeCurrencySymbol },
-    },
+    nativeCurrency: { symbol: nativeCurrencySymbol },
   } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
 
   return (

src/components/Identicon/StatusIcon.tsx

@@ -1,11 +1,10 @@
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { Connector } from 'widgets-web3-react/types'
+import { Connector } from '@web3-react/types'
+import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
-import PortisIcon from '../../assets/images/portisIcon.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
+import { fortmatic, injected, walletconnect, walletlink } from '../../connectors'
 import Identicon from '../Identicon'
 
 export default function StatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
@@ -18,8 +17,6 @@ export default function StatusIcon({ connector }: { connector: AbstractConnector
       return <img src={CoinbaseWalletIcon} alt={'Coinbase Wallet'} />
     case fortmatic:
       return <img src={FortmaticIcon} alt={'Fortmatic'} />
-    case portis:
-      return <img src={PortisIcon} alt={'Portis'} />
     default:
       return null
   }

src/components/LiquidityChartRangeInput/index.tsx

@@ -9,7 +9,7 @@ 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 ReactGA from 'react-ga4'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
@@ -158,11 +158,7 @@ export default function LiquidityChartRangeInput({
   )
 
   if (isError) {
-    ReactGA.exception({
-      ...error,
-      category: 'Liquidity',
-      fatal: false,
-    })
+    ReactGA.event('exception', { description: error.toString(), fatal: false })
   }
 
   return (

src/components/Popups/ClaimPopup.tsx

@@ -3,7 +3,7 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useCallback, useEffect } from 'react'
 import { Heart, X } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import styled, { keyframes } from 'styled-components/macro'
 
 import tokenLogo from '../../assets/images/token-logo.png'

src/components/Popups/SurveyPopup.tsx

@@ -4,7 +4,7 @@ import { RowFixed } from 'components/Row'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { useShowSurveyPopup } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText, Z_INDEX } from 'theme'

src/components/Popups/index.tsx

@@ -14,11 +14,12 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
   max-width: 100%;
   height: ${({ height }) => height};
   margin: ${({ height }) => (height ? '0 auto;' : 0)};
-  margin-bottom: ${({ height }) => (height ? '20px' : 0)}};
+  margin-bottom: ${({ height }) => (height ? '20px' : 0)};
 
   display: none;
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: block;
+    padding-top: 20px;
   `};
 `
 

src/components/PositionList/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { ButtonText } from 'components/Button'
 import PositionListItem from 'components/PositionListItem'
+import Toggle from 'components/Toggle'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
@@ -28,9 +28,37 @@ const MobileHeader = styled.div`
   font-size: 16px;
   font-weight: 500;
   padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     display: none;
   }
+
+  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+`
+
+const ToggleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+const ToggleLabel = styled.div`
+  opacity: 0.6;
+  margin-right: 10px;
+`
+
+const MobileTogglePosition = styled.div`
+  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+    position: absolute;
+    right: 20px;
+  }
 `
 
 type PositionListProps = React.PropsWithChildren<{
@@ -51,12 +79,35 @@ export default function PositionList({
           <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
-        <ButtonText style={{ opacity: 0.6 }} onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
-          <Trans>Hide closed positions</Trans>
-        </ButtonText>
+        <ToggleWrap>
+          <ToggleLabel>
+            <Trans>Show closed positions</Trans>
+          </ToggleLabel>
+          <Toggle
+            id="desktop-hide-closed-positions"
+            isActive={!userHideClosedPositions}
+            toggle={() => {
+              setUserHideClosedPositions(!userHideClosedPositions)
+            }}
+          />
+        </ToggleWrap>
       </DesktopHeader>
       <MobileHeader>
         <Trans>Your positions</Trans>
+        <ToggleWrap>
+          <ToggleLabel>
+            <Trans>Show closed positions</Trans>
+          </ToggleLabel>
+          <MobileTogglePosition>
+            <Toggle
+              id="mobile-hide-closed-positions"
+              isActive={!userHideClosedPositions}
+              toggle={() => {
+                setUserHideClosedPositions(!userHideClosedPositions)
+              }}
+            />
+          </MobileTogglePosition>
+        </ToggleWrap>
       </MobileHeader>
       {positions.map((p) => {
         return <PositionListItem key={p.tokenId.toString()} positionDetails={p} />

src/components/PositionListItem/index.tsx

@@ -19,7 +19,7 @@ import { PositionDetails } from 'types/position'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
 
-import { DAI, USDC, USDT, WBTC, WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
+import { DAI, USDC_MAINNET, USDT, WBTC, WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
 
 const LinkRow = styled(Link)`
   align-items: center;
@@ -145,7 +145,7 @@ export function getPriceOrderingFromPositionForUI(position?: Position): {
   const token1 = position.amount1.currency
 
   // if token0 is a dollar-stable asset, set it as the quote token
-  const stables = [DAI, USDC, USDT]
+  const stables = [DAI, USDC_MAINNET, USDT]
   if (stables.some((stable) => stable.equals(token0))) {
     return {
       priceLower: position.token0PriceUpper.invert(),
@@ -157,7 +157,7 @@ export function getPriceOrderingFromPositionForUI(position?: Position): {
 
   // if token1 is an ETH-/BTC-stable asset, set it as the base token
   const bases = [...Object.values(WRAPPED_NATIVE_CURRENCY), WBTC]
-  if (bases.some((base) => base.equals(token1))) {
+  if (bases.some((base) => base && base.equals(token1))) {
     return {
       priceLower: position.token0PriceUpper.invert(),
       priceUpper: position.token0PriceLower.invert(),

src/components/PrivacyPolicy/index.tsx

@@ -3,7 +3,7 @@ import Card, { DarkGreyCard } from 'components/Card'
 import Row, { AutoRow, RowBetween } from 'components/Row'
 import { useEffect, useRef } from 'react'
 import { ArrowDown, Info, X } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { isMobile } from 'utils/userAgent'
@@ -167,11 +167,13 @@ export function PrivacyPolicy() {
               </AutoColumn>
             </DarkGreyCard>
           ))}
-          <Row justify="center" marginBottom="1rem">
-            <ExternalLink href="https://help.uniswap.org/en/articles/5675203-terms-of-service-faq">
-              <Trans>Learn more</Trans>
-            </ExternalLink>
-          </Row>
+          <ThemedText.Body fontSize={12}>
+            <Row justify="center" marginBottom="1rem">
+              <ExternalLink href="https://help.uniswap.org/en/articles/5675203-terms-of-service-faq">
+                <Trans>Learn more</Trans>
+              </ExternalLink>
+            </Row>
+          </ThemedText.Body>
         </AutoColumn>
       </AutoColumn>
     </Wrapper>

src/components/RangeSelector/PresetsButtons.tsx

@@ -2,7 +2,7 @@ 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 ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 

src/components/RoutingDiagram/RoutingDiagram.test.tsx

@@ -1,7 +1,7 @@
 import { Protocol } from '@uniswap/router-sdk'
 import { Currency, Percent } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { DAI, USDC, WBTC } from 'constants/tokens'
+import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens'
 import { render } from 'test-utils'
 
 import RoutingDiagram, { RoutingDiagramEntry } from './RoutingDiagram'
@@ -10,16 +10,16 @@ const percent = (strings: TemplateStringsArray) => new Percent(parseInt(strings[
 
 const singleRoute: RoutingDiagramEntry = {
   percent: percent`100`,
-  path: [[USDC, DAI, FeeAmount.LOW]],
+  path: [[USDC_MAINNET, DAI, FeeAmount.LOW]],
   protocol: Protocol.V3,
 }
 
 const multiRoute: RoutingDiagramEntry[] = [
-  { percent: percent`75`, path: [[USDC, DAI, FeeAmount.LOWEST]], protocol: Protocol.V2 },
+  { percent: percent`75`, path: [[USDC_MAINNET, DAI, FeeAmount.LOWEST]], protocol: Protocol.V2 },
   {
     percent: percent`25`,
     path: [
-      [USDC, WBTC, FeeAmount.MEDIUM],
+      [USDC_MAINNET, WBTC, FeeAmount.MEDIUM],
       [WBTC, DAI, FeeAmount.HIGH],
     ],
     protocol: Protocol.V3,
@@ -47,16 +47,16 @@ jest.mock('hooks/useTokenInfoFromActiveList', () => ({
 }))
 
 it('renders when no routes are provided', () => {
-  const { asFragment } = render(<RoutingDiagram currencyIn={DAI} currencyOut={USDC} routes={[]} />)
+  const { asFragment } = render(<RoutingDiagram currencyIn={DAI} currencyOut={USDC_MAINNET} routes={[]} />)
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('renders single route', () => {
-  const { asFragment } = render(<RoutingDiagram currencyIn={USDC} currencyOut={DAI} routes={[singleRoute]} />)
+  const { asFragment } = render(<RoutingDiagram currencyIn={USDC_MAINNET} currencyOut={DAI} routes={[singleRoute]} />)
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('renders multi route', () => {
-  const { asFragment } = render(<RoutingDiagram currencyIn={USDC} currencyOut={DAI} routes={multiRoute} />)
+  const { asFragment } = render(<RoutingDiagram currencyIn={USDC_MAINNET} currencyOut={DAI} routes={multiRoute} />)
   expect(asFragment()).toMatchSnapshot()
 })

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -1,11 +1,11 @@
 import { Trans } from '@lingui/macro'
-import { Protocol } from '@uniswap/router-sdk'
-import { Currency, Percent } from '@uniswap/sdk-core'
+import { Currency } 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 { RoutingDiagramEntry } from 'components/swap/SwapRoute'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
@@ -14,12 +14,6 @@ import { ThemedText, Z_INDEX } from 'theme'
 import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
 import { MouseoverTooltip } from '../Tooltip'
 
-export interface RoutingDiagramEntry {
-  percent: Percent
-  path: [Currency, Currency, FeeAmount][]
-  protocol: Protocol
-}
-
 const Wrapper = styled(Box)`
   align-items: center;
   width: 100%;

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

@@ -3,45 +3,45 @@
 exports[`renders multi route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V2
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             75%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -51,42 +51,42 @@ exports[`renders multi route 1`] = `
       CurrencyLogo currency=DAI
     </div>
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             25%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -102,45 +102,45 @@ exports[`renders multi route 1`] = `
 exports[`renders single route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             100%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -156,7 +156,7 @@ exports[`renders single route 1`] = `
 exports[`renders when no routes are provided 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   />
 </DocumentFragment>
 `;

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
+<DocumentFragment>
+  <div
+    style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+  >
+    <div
+      style="height: 168px; width: 100%;"
+    >
+      <div
+        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
+        style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
+      >
+        CurrencyLogo currency=DAI
+        <div
+          class="Column-sc-1r2yyln-0 cYEAJI"
+        >
+          <div
+            class="css-8mokm4"
+            title="Dai Stablecoin"
+          >
+            DAI
+          </div>
+          <div
+            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+          >
+            Dai Stablecoin
+          </div>
+        </div>
+        <span />
+      </div>
+      <div
+        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
+        style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
+      >
+        CurrencyLogo currency=USDC
+        <div
+          class="Column-sc-1r2yyln-0 cYEAJI"
+        >
+          <div
+            class="css-8mokm4"
+            title="USD//C"
+          >
+            USDC
+          </div>
+          <div
+            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+          >
+            USD//C
+          </div>
+        </div>
+        <span />
+      </div>
+      <div
+        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
+        style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
+      >
+        CurrencyLogo currency=WBTC
+        <div
+          class="Column-sc-1r2yyln-0 cYEAJI"
+        >
+          <div
+            class="css-8mokm4"
+            title="Wrapped BTC"
+          >
+            WBTC
+          </div>
+          <div
+            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+          >
+            Wrapped BTC
+          </div>
+        </div>
+        <span />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders loading rows when isLoading is true 1`] = `
+<DocumentFragment>
+  <div
+    style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
+  >
+    <div
+      style="height: 0px; width: 100%;"
+    />
+  </div>
+</DocumentFragment>
+`;

src/components/SearchModal/CurrencyList/index.test.tsx

@@ -0,0 +1,73 @@
+import { Currency, CurrencyAmount as mockCurrencyAmount, Token as mockToken } from '@uniswap/sdk-core'
+import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens'
+import * as mockJSBI from 'jsbi'
+import { render } from 'test-utils'
+
+import CurrencyList from '.'
+
+const noOp = function () {
+  // do nothing
+}
+
+const mockCurrencyAmt = {
+  [DAI.address]: mockCurrencyAmount.fromRawAmount(DAI, mockJSBI.default.BigInt(100)),
+  [USDC_MAINNET.address]: mockCurrencyAmount.fromRawAmount(USDC_MAINNET, mockJSBI.default.BigInt(10)),
+  [WBTC.address]: mockCurrencyAmount.fromRawAmount(WBTC, mockJSBI.default.BigInt(1)),
+}
+
+jest.mock(
+  'components/CurrencyLogo',
+  () =>
+    ({ currency }: { currency: Currency }) =>
+      `CurrencyLogo currency=${currency.symbol}`
+)
+
+jest.mock('hooks/useActiveWeb3React', () => {
+  return {
+    __esModule: true,
+    default: () => ({
+      account: '123',
+      active: true,
+    }),
+  }
+})
+
+jest.mock('../../../state/wallet/hooks', () => {
+  return {
+    useCurrencyBalance: (currency: Currency) => {
+      return mockCurrencyAmt[(currency as mockToken).address]
+    },
+  }
+})
+
+it('renders loading rows when isLoading is true', () => {
+  const { asFragment } = render(
+    <CurrencyList
+      height={10}
+      currencies={[]}
+      otherListTokens={[]}
+      selectedCurrency={null}
+      onCurrencySelect={noOp}
+      showImportView={noOp}
+      setImportToken={noOp}
+      isLoading={true}
+    />
+  )
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('renders currency rows correctly when currencies list is non-empty', () => {
+  const { asFragment } = render(
+    <CurrencyList
+      height={10}
+      currencies={[DAI, USDC_MAINNET, WBTC]}
+      otherListTokens={[]}
+      selectedCurrency={null}
+      onCurrencySelect={noOp}
+      showImportView={noOp}
+      setImportToken={noOp}
+      isLoading={false}
+    />
+  )
+  expect(asFragment()).toMatchSnapshot()
+})

src/components/SearchModal/CurrencyList/index.tsx

@@ -9,20 +9,20 @@ 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 { useCombinedActiveList } from '../../state/lists/hooks'
-import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
-import { useCurrencyBalance } from '../../state/wallet/hooks'
-import { ThemedText } from '../../theme'
-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 { MenuItem } from './styleds'
+import TokenListLogo from '../../../assets/svg/tokenlist.svg'
+import { useIsUserAddedToken } from '../../../hooks/Tokens'
+import { useCombinedActiveList } from '../../../state/lists/hooks'
+import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
+import { useCurrencyBalance } from '../../../state/wallet/hooks'
+import { ThemedText } from '../../../theme'
+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 { LoadingRows, MenuItem } from '../styleds'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
@@ -195,6 +195,7 @@ export default function CurrencyList({
   showImportView,
   setImportToken,
   showCurrencyAmount,
+  isLoading,
 }: {
   height: number
   currencies: Currency[]
@@ -206,6 +207,7 @@ export default function CurrencyList({
   showImportView: () => void
   setImportToken: (token: Token) => void
   showCurrencyAmount?: boolean
+  isLoading: boolean
 }) {
   const itemData: (Currency | BreakLine)[] = useMemo(() => {
     if (otherListTokens && otherListTokens?.length > 0) {
@@ -232,7 +234,15 @@ export default function CurrencyList({
 
       const showImport = index > currencies.length
 
-      if (showImport && token) {
+      if (isLoading) {
+        return (
+          <LoadingRows>
+            <div />
+            <div />
+            <div />
+          </LoadingRows>
+        )
+      } else if (showImport && token) {
         return (
           <ImportRow style={style} token={token} showImportView={showImportView} setImportToken={setImportToken} dim />
         )
@@ -259,6 +269,7 @@ export default function CurrencyList({
       setImportToken,
       showImportView,
       showCurrencyAmount,
+      isLoading,
     ]
   )
 

src/components/SearchModal/CurrencySearch.tsx

@@ -11,7 +11,7 @@ import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
 import { tokenComparator, useSortTokensByQuery } from 'lib/hooks/useTokenList/sorting'
 import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Edit } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
@@ -74,6 +74,8 @@ export function CurrencySearch({
   const { chainId } = useActiveWeb3React()
   const theme = useTheme()
 
+  const [tokenLoaderTimerElapsed, setTokenLoaderTimerElapsed] = useState(false)
+
   // refs for fixed size lists
   const fixedList = useRef<FixedSizeList>()
 
@@ -103,10 +105,11 @@ export function CurrencySearch({
     return Object.values(allTokens).filter(getTokenFilter(debouncedQuery))
   }, [allTokens, debouncedQuery])
 
-  const balances = useAllTokenBalances()
+  const [balances, balancesIsLoading] = useAllTokenBalances()
   const sortedTokens: Token[] = useMemo(() => {
-    return filteredTokens.sort(tokenComparator.bind(null, balances))
-  }, [balances, filteredTokens])
+    void balancesIsLoading // creates a new array once balances load to update hooks
+    return [...filteredTokens].sort(tokenComparator.bind(null, balances))
+  }, [balances, filteredTokens, balancesIsLoading])
 
   const filteredSortedTokens = useSortTokensByQuery(debouncedQuery, sortedTokens)
 
@@ -173,6 +176,14 @@ export function CurrencySearch({
     filteredTokens.length === 0 || (debouncedQuery.length > 2 && !isAddressSearch) ? debouncedQuery : undefined
   )
 
+  // Timeout token loader after 3 seconds to avoid hanging in a loading state.
+  useEffect(() => {
+    const tokenLoaderTimer = setTimeout(() => {
+      setTokenLoaderTimerElapsed(true)
+    }, 3000)
+    return () => clearTimeout(tokenLoaderTimer)
+  }, [])
+
   return (
     <ContentWrapper>
       <PaddedColumn gap="16px">
@@ -218,6 +229,7 @@ export function CurrencySearch({
                 showImportView={showImportView}
                 setImportToken={setImportToken}
                 showCurrencyAmount={showCurrencyAmount}
+                isLoading={balancesIsLoading && !tokenLoaderTimerElapsed}
               />
             )}
           </AutoSizer>

src/components/SearchModal/ImportList.tsx

@@ -11,7 +11,7 @@ import useTheme from 'hooks/useTheme'
 import { transparentize } from 'polished'
 import { useCallback, useState } from 'react'
 import { AlertTriangle, ArrowLeft } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { useAppDispatch } from 'state/hooks'
 import { enableList, removeList } from 'state/lists/actions'
 import { useAllLists } from 'state/lists/hooks'

src/components/SearchModal/ImportToken.tsx

@@ -48,7 +48,7 @@ export function ImportToken(props: ImportProps) {
         <RowBetween>
           {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
           <ThemedText.MediumHeader>
-            <Plural value={tokens.length} one="Import token" other="Import tokens" />
+            <Plural value={tokens.length} _1="Import token" other="Import tokens" />
           </ThemedText.MediumHeader>
           {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
         </RowBetween>

src/components/SearchModal/ManageLists.tsx

@@ -9,7 +9,7 @@ import parseENSAddress from 'lib/utils/parseENSAddress'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { CheckCircle, Settings } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { usePopper } from 'react-popper'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import styled from 'styled-components/macro'
@@ -26,7 +26,7 @@ import { ButtonEmpty, ButtonPrimary } from '../Button'
 import Column, { AutoColumn } from '../Column'
 import ListLogo from '../ListLogo'
 import Row, { RowBetween, RowFixed } from '../Row'
-import ListToggle from '../Toggle/ListToggle'
+import Toggle from '../Toggle'
 import { CurrencyModalView } from './CurrencySearchModal'
 import { PaddedColumn, SearchInput, Separator, SeparatorDark } from './styleds'
 
@@ -215,7 +215,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
           </StyledMenu>
         </RowFixed>
       </Column>
-      <ListToggle
+      <Toggle
         isActive={isActive}
         bgColor={listColor}
         toggle={() => {

src/components/SearchModal/styleds.tsx

@@ -1,3 +1,4 @@
+import { LoadingRows as BaseLoadingRows } from 'components/Loader/styled'
 import styled from 'styled-components/macro'
 
 import { AutoColumn } from '../Column'
@@ -72,3 +73,25 @@ export const SeparatorDark = styled.div`
   height: 1px;
   background-color: ${({ theme }) => theme.bg3};
 `
+
+export const LoadingRows = styled(BaseLoadingRows)`
+  grid-column-gap: 0.5em;
+  grid-template-columns: repeat(12, 1fr);
+  max-width: 960px;
+  padding: 12px 20px;
+
+  & > div:nth-child(4n + 1) {
+    grid-column: 1 / 8;
+    height: 1em;
+    margin-bottom: 0.25em;
+  }
+  & > div:nth-child(4n + 2) {
+    grid-column: 12;
+    height: 1em;
+    margin-top: 0.25em;
+  }
+  & > div:nth-child(4n + 3) {
+    grid-column: 1 / 4;
+    height: 0.75em;
+  }
+`

src/components/Settings/index.tsx

@@ -2,10 +2,10 @@
 import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'lib/hooks/routing/clientSideSmartOrderRouter/constants'
+import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 

src/components/Toggle/ListToggle.tsx

@@ -1,57 +0,0 @@
-import { Trans } from '@lingui/macro'
-import styled from 'styled-components/macro'
-
-import { ThemedText } from '../../theme'
-
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 20px;
-  border: none;
-  background: ${({ theme }) => theme.bg1};
-  display: flex;
-  width: fit-content;
-  cursor: pointer;
-  outline: none;
-  padding: 0.4rem 0.4rem;
-  align-items: center;
-`
-
-const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string }>`
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  background-color: ${({ isActive, bgColor, theme }) => (isActive ? bgColor : theme.bg4)};
-  :hover {
-    opacity: 0.8;
-  }
-`
-
-const StatusText = styled(ThemedText.Main)<{ isActive?: boolean }>`
-  margin: 0 10px;
-  width: 24px;
-  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
-`
-
-interface ToggleProps {
-  id?: string
-  isActive: boolean
-  bgColor: string
-  toggle: () => void
-}
-
-export default function ListToggle({ id, isActive, bgColor, toggle }: ToggleProps) {
-  return (
-    <Wrapper id={id} isActive={isActive} onClick={toggle}>
-      {isActive && (
-        <StatusText fontWeight="600" margin="0 6px" isActive={true}>
-          <Trans>ON</Trans>
-        </StatusText>
-      )}
-      <ToggleElement isActive={isActive} bgColor={bgColor} />
-      {!isActive && (
-        <StatusText fontWeight="600" margin="0 6px" isActive={false}>
-          <Trans>OFF</Trans>
-        </StatusText>
-      )}
-    </Wrapper>
-  )
-}

src/components/Toggle/index.tsx

@@ -1,57 +1,85 @@
-import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
-import { ReactNode } from 'react'
-import styled from 'styled-components/macro'
+import { useState } from 'react'
+import styled, { keyframes } from 'styled-components/macro'
 
-const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
-  padding: 0.25rem 0.6rem;
-  border-radius: 9px;
-  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.bg4) : 'none')};
-  color: ${({ theme, isActive }) => (isActive ? theme.white : theme.text2)};
-  font-size: 14px;
-  font-weight: ${({ isOnSwitch }) => (isOnSwitch ? '500' : '400')};
-  :hover {
-    user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
-    background: ${({ theme, isActive, isOnSwitch }) =>
-      isActive ? (isOnSwitch ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4)) : 'none'};
-    color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.white) : theme.text3)};
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
+  align-items: center;
+  background: ${({ theme }) => theme.bg1};
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  padding: 0.4rem 0.4rem;
+  width: fit-content;
+`
+
+const turnOnToggle = keyframes`
+  from {
+    margin-left: 0em;
+    margin-right: 2.2em;
+  }
+  to {
+    margin-left: 2.2em;
+    margin-right: 0em;
   }
 `
 
-const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 12px;
-  border: none;
-  background: ${({ theme }) => theme.bg0};
-  display: flex;
-  width: fit-content;
-  cursor: pointer;
-  outline: none;
-  padding: 2px;
+const turnOffToggle = keyframes`
+  from {
+    margin-left: 2.2em;
+    margin-right: 0em;
+  }
+  to {
+    margin-left: 0em;
+    margin-right: 2.2em;
+  }
+`
+
+const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boolean) =>
+  hasBgColor
+    ? {
+        opacity: '0.8',
+      }
+    : {
+        background: isActive ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4),
+        color: isActive ? theme.white : theme.text3,
+      }
+
+const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInitialToggleLoad?: boolean }>`
+  animation: 0.1s
+    ${({ isActive, isInitialToggleLoad }) => (isInitialToggleLoad ? 'none' : isActive ? turnOnToggle : turnOffToggle)}
+    ease-in;
+  background: ${({ theme, bgColor, isActive }) =>
+    isActive ? bgColor ?? theme.primary1 : !!bgColor ? theme.bg4 : theme.text3};
+  border-radius: 50%;
+  height: 24px;
+  :hover {
+    ${({ bgColor, theme, isActive }) => ToggleElementHoverStyle(!!bgColor, theme, isActive)}
+  }
+  margin-left: ${({ isActive }) => (isActive ? '2.2em' : '0em')};
+  margin-right: ${({ isActive }) => (!isActive ? '2.2em' : '0em')};
+  width: 24px;
 `
 
 interface ToggleProps {
   id?: string
+  bgColor?: string
   isActive: boolean
   toggle: () => void
-  checked?: ReactNode
-  unchecked?: ReactNode
 }
 
-export default function Toggle({
-  id,
-  isActive,
-  toggle,
-  checked = <Trans>On</Trans>,
-  unchecked = <Trans>Off</Trans>,
-}: ToggleProps) {
+export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
+  const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
+
+  const switchToggle = () => {
+    toggle()
+    if (isInitialToggleLoad) setIsInitialToggleLoad(false)
+  }
+
   return (
-    <StyledToggle id={id} isActive={isActive} onClick={toggle}>
-      <ToggleElement isActive={isActive} isOnSwitch={true}>
-        {checked}
-      </ToggleElement>
-      <ToggleElement isActive={!isActive} isOnSwitch={false}>
-        {unchecked}
-      </ToggleElement>
-    </StyledToggle>
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
+      <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
+    </Wrapper>
   )
 }

src/components/Tooltip/index.tsx

@@ -18,6 +18,7 @@ export const TooltipContainer = styled.div`
 
 interface TooltipProps extends Omit<PopoverProps, 'content'> {
   text: ReactNode
+  disableHover?: boolean // disable the hover and content display
 }
 
 interface TooltipContentProps extends Omit<PopoverProps, 'content'> {
@@ -29,19 +30,20 @@ interface TooltipContentProps extends Omit<PopoverProps, 'content'> {
 }
 
 export default function Tooltip({ text, ...rest }: TooltipProps) {
-  return <Popover content={<TooltipContainer>{text}</TooltipContainer>} {...rest} />
+  return <Popover content={text && <TooltipContainer>{text}</TooltipContainer>} {...rest} />
 }
 
 function TooltipContent({ content, wrap = false, ...rest }: TooltipContentProps) {
   return <Popover content={wrap ? <TooltipContainer>{content}</TooltipContainer> : content} {...rest} />
 }
 
-export function MouseoverTooltip({ children, ...rest }: Omit<TooltipProps, 'show'>) {
+/** Standard text tooltip. */
+export function MouseoverTooltip({ text, disableHover, children, ...rest }: Omit<TooltipProps, 'show'>) {
   const [show, setShow] = useState(false)
   const open = useCallback(() => setShow(true), [setShow])
   const close = useCallback(() => setShow(false), [setShow])
   return (
-    <Tooltip {...rest} show={show}>
+    <Tooltip {...rest} show={show} text={disableHover ? null : text}>
       <div onMouseEnter={open} onMouseLeave={close}>
         {children}
       </div>
@@ -49,6 +51,7 @@ export function MouseoverTooltip({ children, ...rest }: Omit<TooltipProps, 'show
   )
 }
 
+/** Tooltip that displays custom content. */
 export function MouseoverTooltipContent({
   content,
   children,

src/components/TopLevelModals/index.tsx

@@ -0,0 +1,23 @@
+import AddressClaimModal from 'components/claim/AddressClaimModal'
+import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
+import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
+
+export default function TopLevelModals() {
+  const addressClaimOpen = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
+  const addressClaimToggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
+
+  const blockedAccountModalOpen = useModalOpen(ApplicationModal.BLOCKED_ACCOUNT)
+  const { account } = useActiveWeb3React()
+
+  useAccountRiskCheck(account)
+  const open = Boolean(blockedAccountModalOpen && account)
+  return (
+    <>
+      <AddressClaimModal isOpen={addressClaimOpen} onDismiss={addressClaimToggle} />
+      <ConnectedAccountBlocked account={account} isOpen={open} />
+    </>
+  )
+}

src/components/WalletModal/PendingView.tsx

@@ -1,12 +1,10 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { darken } from 'polished'
+import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
+import { AbstractConnector } from 'web3-react-abstract-connector'
 
-import { injected } from '../../connectors'
-import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import Loader from '../Loader'
-import Option from './Option'
 
 const PendingSection = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};
@@ -18,18 +16,18 @@ const PendingSection = styled.div`
   }
 `
 
-const StyledLoader = styled(Loader)`
-  margin-right: 1rem;
-`
-
-const LoadingMessage = styled.div<{ error?: boolean }>`
+const LoaderContainer = styled.div`
+  margin: 16px 0;
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+`
+
+const LoadingMessage = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  justify-content: center;
   border-radius: 12px;
-  margin-bottom: 20px;
-  color: ${({ theme, error }) => (error ? theme.red1 : 'inherit')};
-  border: 1px solid ${({ theme, error }) => (error ? theme.red1 : theme.text4)};
 
   & > * {
     padding: 1rem;
@@ -37,29 +35,13 @@ const LoadingMessage = styled.div<{ error?: boolean }>`
 `
 
 const ErrorGroup = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: flex-start;
 `
 
-const ErrorButton = styled.div`
-  border-radius: 8px;
-  font-size: 12px;
-  color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.bg4};
-  margin-left: 1rem;
-  padding: 0.5rem;
-  font-weight: 600;
-  user-select: none;
-
-  &:hover {
-    cursor: pointer;
-    background-color: ${({ theme }) => darken(0.1, theme.text4)};
-  }
-`
-
 const LoadingWrapper = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
 `
@@ -69,65 +51,56 @@ export default function PendingView({
   error = false,
   setPendingError,
   tryActivation,
+  resetAccountView,
 }: {
   connector?: AbstractConnector
   error?: boolean
   setPendingError: (error: boolean) => void
   tryActivation: (connector: AbstractConnector) => void
+  resetAccountView: () => void
 }) {
-  const isMetamask = window?.ethereum?.isMetaMask
-
   return (
     <PendingSection>
-      <LoadingMessage error={error}>
+      <LoadingMessage>
         <LoadingWrapper>
           {error ? (
             <ErrorGroup>
-              <div>
+              <ThemedText.MediumHeader marginBottom={12}>
                 <Trans>Error connecting</Trans>
-              </div>
-              <ErrorButton
+              </ThemedText.MediumHeader>
+              <ThemedText.Body fontSize={14} marginBottom={36} textAlign="center">
+                <Trans>
+                  The connection attempt failed. Please click try again and follow the steps to connect in your wallet.
+                </Trans>
+              </ThemedText.Body>
+              <ButtonPrimary
+                $borderRadius="12px"
+                padding="12px"
                 onClick={() => {
                   setPendingError(false)
                   connector && tryActivation(connector)
                 }}
               >
                 <Trans>Try Again</Trans>
-              </ErrorButton>
+              </ButtonPrimary>
+              <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
+                <ThemedText.Link fontSize={12} onClick={resetAccountView}>
+                  <Trans>Back to wallet selection</Trans>
+                </ThemedText.Link>
+              </ButtonEmpty>
             </ErrorGroup>
           ) : (
             <>
-              <StyledLoader />
-              <Trans>Initializing...</Trans>
+              <ThemedText.Black fontSize={20} marginY={16}>
+                <LoaderContainer>
+                  <Loader stroke="currentColor" size="32px" />
+                </LoaderContainer>
+                <Trans>Connecting...</Trans>
+              </ThemedText.Black>
             </>
           )}
         </LoadingWrapper>
       </LoadingMessage>
-      {Object.keys(SUPPORTED_WALLETS).map((key) => {
-        const option = SUPPORTED_WALLETS[key]
-        if (option.connector === connector) {
-          if (option.connector === injected) {
-            if (isMetamask && option.name !== 'MetaMask') {
-              return null
-            }
-            if (!isMetamask && option.name === 'MetaMask') {
-              return null
-            }
-          }
-          return (
-            <Option
-              id={`connect-${key}`}
-              key={key}
-              clickable={false}
-              color={option.color}
-              header={option.name}
-              subheader={option.description}
-              icon={option.iconURL}
-            />
-          )
-        }
-        return null
-      })}
     </PendingSection>
   )
 }

src/components/WalletModal/index.tsx

@@ -1,19 +1,19 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { AutoColumn } from 'components/Column'
 import { PrivacyPolicy } from 'components/PrivacyPolicy'
-import Row, { AutoRow, RowBetween } from 'components/Row'
-import { useWalletConnectMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
-import { useEffect, useState } from 'react'
-import { ArrowLeft, ArrowRight, Info } from 'react-feather'
-import ReactGA from 'react-ga'
+import Row, { AutoRow } from 'components/Row'
+import { useCallback, useEffect, useState } from 'react'
+import { ArrowLeft } from 'react-feather'
+import ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
+import { AbstractConnector } from 'web3-react-abstract-connector'
+import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
+import { WalletConnectConnector } from 'web3-react-walletconnect-connector'
 
 import MetamaskIcon from '../../assets/images/metamask.png'
+import TallyIcon from '../../assets/images/tally.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { fortmatic, injected, portis } from '../../connectors'
+import { fortmatic, injected } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import usePrevious from '../../hooks/usePrevious'
@@ -22,7 +22,7 @@ import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink, ThemedText } from '../../theme'
 import { isMobile } from '../../utils/userAgent'
 import AccountDetails from '../AccountDetails'
-import Card, { LightCard } from '../Card'
+import { LightCard } from '../Card'
 import Modal from '../Modal'
 import Option from './Option'
 import PendingView from './PendingView'
@@ -109,16 +109,6 @@ const HoverText = styled.div`
   }
 `
 
-const LinkCard = styled(Card)`
-  background-color: ${({ theme }) => theme.bg1};
-  color: ${({ theme }) => theme.text3};
-
-  :hover {
-    cursor: pointer;
-    filter: brightness(0.9);
-  }
-`
-
 const WALLET_VIEWS = {
   OPTIONS: 'options',
   OPTIONS_SECONDARY: 'options_secondary',
@@ -137,7 +127,7 @@ export default function WalletModal({
   ENSName?: string
 }) {
   // important that these are destructed from the account-specific web3-react context
-  const { active, account, connector, activate, error } = useWeb3React()
+  const { account, connector, activate, error } = useWeb3React()
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
   const previousWalletView = usePrevious(walletView)
@@ -151,7 +141,10 @@ export default function WalletModal({
 
   const previousAccount = usePrevious(account)
 
-  const logMonitoringEvent = useWalletConnectMonitoringEventCallback()
+  const resetAccountView = useCallback(() => {
+    setPendingError(false)
+    setWalletView(WALLET_VIEWS.ACCOUNT)
+  }, [setPendingError, setWalletView])
 
   // close on connection, when logged out before
   useEffect(() => {
@@ -163,19 +156,9 @@ export default function WalletModal({
   // always reset to account view
   useEffect(() => {
     if (walletModalOpen) {
-      setPendingError(false)
-      setWalletView(WALLET_VIEWS.ACCOUNT)
+      resetAccountView()
     }
-  }, [walletModalOpen])
-
-  // close modal when a connection is successful
-  const activePrevious = usePrevious(active)
-  const connectorPrevious = usePrevious(connector)
-  useEffect(() => {
-    if (walletModalOpen && ((active && !activePrevious) || (connector && connector !== connectorPrevious && !error))) {
-      setWalletView(WALLET_VIEWS.ACCOUNT)
-    }
-  }, [setWalletView, active, error, connector, walletModalOpen, activePrevious, connectorPrevious])
+  }, [walletModalOpen, resetAccountView])
 
   const tryActivation = async (connector: AbstractConnector | undefined) => {
     let name = ''
@@ -200,18 +183,13 @@ export default function WalletModal({
     }
 
     connector &&
-      activate(connector, undefined, true)
-        .then(async () => {
-          const walletAddress = await connector.getAccount()
-          logMonitoringEvent({ walletAddress })
-        })
-        .catch((error) => {
-          if (error instanceof UnsupportedChainIdError) {
-            activate(connector) // a little janky...can't use setError because the connector isn't set
-          } else {
-            setPendingError(true)
-          }
-        })
+      activate(connector, undefined, true).catch((error) => {
+        if (error instanceof UnsupportedChainIdError) {
+          activate(connector) // a little janky...can't use setError because the connector isn't set
+        } else {
+          setPendingError(true)
+        }
+      })
   }
 
   // close wallet modal if fortmatic modal is active
@@ -223,16 +201,12 @@ export default function WalletModal({
 
   // get wallets user can switch too, depending on device/browser
   function getOptions() {
-    const isMetamask = window.ethereum && window.ethereum.isMetaMask
+    const isMetamask = !!window.ethereum?.isMetaMask
+    const isTally = !!window.ethereum?.isTally
     return Object.keys(SUPPORTED_WALLETS).map((key) => {
       const option = SUPPORTED_WALLETS[key]
       // check for mobile options
       if (isMobile) {
-        //disable portis on mobile for now
-        if (option.connector === portis) {
-          return null
-        }
-
         if (!window.web3 && !window.ethereum && option.mobile) {
           return (
             <Option
@@ -280,6 +254,24 @@ export default function WalletModal({
         // likewise for generic
         else if (option.name === 'Injected' && isMetamask) {
           return null
+        } else if (option.name === 'Injected' && isTally) {
+          return (
+            <Option
+              id={`connect-${key}`}
+              key={key}
+              onClick={() => {
+                option.connector === connector
+                  ? setWalletView(WALLET_VIEWS.ACCOUNT)
+                  : !option.href && tryActivation(option.connector)
+              }}
+              color={'#E8831D'}
+              header={<Trans>Tally</Trans>}
+              active={option.connector === connector}
+              subheader={null}
+              link={null}
+              icon={TallyIcon}
+            />
+          )
         }
       }
 
@@ -371,12 +363,7 @@ export default function WalletModal({
         </CloseIcon>
         {walletView !== WALLET_VIEWS.ACCOUNT ? (
           <HeaderRow color="blue">
-            <HoverText
-              onClick={() => {
-                setPendingError(false)
-                setWalletView(WALLET_VIEWS.ACCOUNT)
-              }}
-            >
+            <HoverText onClick={resetAccountView}>
               <ArrowLeft />
             </HoverText>
           </HeaderRow>
@@ -390,39 +377,38 @@ export default function WalletModal({
 
         <ContentWrapper>
           <AutoColumn gap="16px">
-            <LightCard>
-              <AutoRow style={{ flexWrap: 'nowrap' }}>
-                <ThemedText.Black fontSize={14}>
-                  <Trans>
-                    By connecting a wallet, you agree to Uniswap Labs’{' '}
-                    <ExternalLink href="https://uniswap.org/terms-of-service/">Terms of Service</ExternalLink> and
-                    acknowledge that you have read and understand the Uniswap{' '}
-                    <ExternalLink href="https://uniswap.org/disclaimer/">Protocol Disclaimer</ExternalLink>.
-                  </Trans>
-                </ThemedText.Black>
-              </AutoRow>
-            </LightCard>
-            {walletView === WALLET_VIEWS.PENDING ? (
+            {walletView === WALLET_VIEWS.PENDING && (
               <PendingView
                 connector={pendingWallet}
                 error={pendingError}
                 setPendingError={setPendingError}
                 tryActivation={tryActivation}
+                resetAccountView={resetAccountView}
               />
-            ) : (
-              <OptionGrid>{getOptions()}</OptionGrid>
             )}
-            <LinkCard padding=".5rem" $borderRadius=".75rem" onClick={() => setWalletView(WALLET_VIEWS.LEGAL)}>
-              <RowBetween>
-                <AutoRow gap="4px">
-                  <Info size={20} />
-                  <ThemedText.Label fontSize={14}>
-                    <Trans>How this app uses APIs</Trans>
-                  </ThemedText.Label>
+            {walletView !== WALLET_VIEWS.PENDING && <OptionGrid>{getOptions()}</OptionGrid>}
+            {!pendingError && (
+              <LightCard>
+                <AutoRow style={{ flexWrap: 'nowrap' }}>
+                  <ThemedText.Body fontSize={12}>
+                    <Trans>
+                      By connecting a wallet, you agree to Uniswap Labs’{' '}
+                      <ExternalLink
+                        style={{ textDecoration: 'underline' }}
+                        href="https://uniswap.org/terms-of-service/"
+                      >
+                        Terms of Service
+                      </ExternalLink>{' '}
+                      and acknowledge that you have read and understand the Uniswap{' '}
+                      <ExternalLink style={{ textDecoration: 'underline' }} href="https://uniswap.org/disclaimer/">
+                        Protocol Disclaimer
+                      </ExternalLink>
+                      .
+                    </Trans>
+                  </ThemedText.Body>
                 </AutoRow>
-                <ArrowRight size={16} />
-              </RowBetween>
-            </LinkCard>
+              </LightCard>
+            )}
           </AutoColumn>
         </ContentWrapper>
       </UpperSection>

src/components/Web3ReactManager/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
 import { useEffect } from 'react'
 import styled from 'styled-components/macro'
+import { useWeb3React } from 'web3-react-core'
 
 import { network } from '../../connectors'
 import { NetworkContextName } from '../../constants/misc'

src/components/Web3Status/index.tsx

@@ -1,19 +1,19 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
+import { Connector } from '@web3-react/types'
 import { darken } from 'polished'
 import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
-import { Connector } from 'widgets-web3-react/types'
+import { AbstractConnector } from 'web3-react-abstract-connector'
+import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
 
 import { NetworkContextName } from '../../constants/misc'
 import useENSName from '../../hooks/useENSName'
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import { useWalletModalToggle } from '../../state/application/hooks'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
-import { TransactionDetails } from '../../state/transactions/reducer'
+import { TransactionDetails } from '../../state/transactions/types'
 import { shortenAddress } from '../../utils'
 import { ButtonSecondary } from '../Button'
 import StatusIcon from '../Identicon/StatusIcon'

src/components/analytics/GoogleAnalyticsReporter.tsx

@@ -1,16 +1,13 @@
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useEffect } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { RouteComponentProps } from 'react-router-dom'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
+import { GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY } from './index'
+
 function reportWebVitals({ name, delta, id }: Metric) {
-  ReactGA.timing({
-    category: 'Web Vitals',
-    variable: name,
-    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
-    label: id,
-  })
+  ReactGA._gaCommandSendTiming('Web Vitals', name, Math.round(name === 'CLS' ? delta * 1000 : delta), id)
 }
 
 // tracks web vitals and pageviews
@@ -31,5 +28,15 @@ export default function GoogleAnalyticsReporter({ location: { pathname, search }
   useEffect(() => {
     ReactGA.pageview(`${pathname}${search}`)
   }, [pathname, search])
+
+  useEffect(() => {
+    // typed as 'any' in react-ga4 -.-
+    ReactGA.ga((tracker: any) => {
+      if (!tracker) return
+
+      const clientId = tracker.get('clientId')
+      window.localStorage.setItem(GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY, clientId)
+    })
+  }, [])
   return null
 }

src/components/analytics/index.ts

@@ -1,12 +1,17 @@
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { isMobile } from 'utils/userAgent'
 
+export const GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY = 'ga_client_id'
 const GOOGLE_ANALYTICS_ID: string | undefined = process.env.REACT_APP_GOOGLE_ANALYTICS_ID
+
+const storedClientId = window.localStorage.getItem(GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY)
+
 if (typeof GOOGLE_ANALYTICS_ID === 'string') {
   ReactGA.initialize(GOOGLE_ANALYTICS_ID, {
     gaOptions: {
       storage: 'none',
       storeGac: false,
+      clientId: storedClientId ?? undefined,
     },
   })
   ReactGA.set({
@@ -18,5 +23,5 @@ if (typeof GOOGLE_ANALYTICS_ID === 'string') {
       : 'mobileRegular',
   })
 } else {
-  ReactGA.initialize('test', { testMode: true, debug: true })
+  ReactGA.initialize('test', { gtagOptions: { debug_mode: true } })
 }

src/components/earn/ClaimRewardModal.tsx

@@ -1,13 +1,14 @@
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
+import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
-import { useStakingContract } from '../../hooks/useContract'
+import { useContract } from '../../hooks/useContract'
 import { StakingInfo } from '../../state/stake/hooks'
-import { TransactionType } from '../../state/transactions/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
+import { TransactionType } from '../../state/transactions/types'
 import { CloseIcon, ThemedText } from '../../theme'
 import { ButtonError } from '../Button'
 import { AutoColumn } from '../Column'
@@ -15,6 +16,12 @@ import Modal from '../Modal'
 import { LoadingView, SubmittedView } from '../ModalViews'
 import { RowBetween } from '../Row'
 
+const { abi: STAKING_REWARDS_ABI } = StakingRewardsJson
+
+function useStakingContract(stakingAddress?: string, withSignerIfPossible?: boolean) {
+  return useContract(stakingAddress, STAKING_REWARDS_ABI, withSignerIfPossible)
+}
+
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
   padding: 1rem;

src/components/earn/StakingModal.tsx

@@ -1,5 +1,6 @@
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
+import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
@@ -8,11 +9,11 @@ import { useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
-import { usePairContract, useStakingContract, useV2RouterContract } from '../../hooks/useContract'
+import { useContract, usePairContract, useV2RouterContract } from '../../hooks/useContract'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { StakingInfo, useDerivedStakeInfo } from '../../state/stake/hooks'
-import { TransactionType } from '../../state/transactions/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
+import { TransactionType } from '../../state/transactions/types'
 import { CloseIcon, ThemedText } from '../../theme'
 import { formatCurrencyAmount } from '../../utils/formatCurrencyAmount'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
@@ -24,6 +25,12 @@ import { LoadingView, SubmittedView } from '../ModalViews'
 import ProgressCircles from '../ProgressSteps'
 import { RowBetween } from '../Row'
 
+const { abi: STAKING_REWARDS_ABI } = StakingRewardsJson
+
+function useStakingContract(stakingAddress?: string, withSignerIfPossible?: boolean) {
+  return useContract(stakingAddress, STAKING_REWARDS_ABI, withSignerIfPossible)
+}
+
 const HypotheticalRewardRate = styled.div<{ dim: boolean }>`
   display: flex;
   justify-content: space-between;

src/components/earn/UnstakingModal.tsx

@@ -1,13 +1,14 @@
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
+import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
-import { useStakingContract } from '../../hooks/useContract'
+import { useContract } from '../../hooks/useContract'
 import { StakingInfo } from '../../state/stake/hooks'
-import { TransactionType } from '../../state/transactions/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
+import { TransactionType } from '../../state/transactions/types'
 import { CloseIcon, ThemedText } from '../../theme'
 import { ButtonError } from '../Button'
 import { AutoColumn } from '../Column'
@@ -16,6 +17,12 @@ import Modal from '../Modal'
 import { LoadingView, SubmittedView } from '../ModalViews'
 import { RowBetween } from '../Row'
 
+const { abi: STAKING_REWARDS_ABI } = StakingRewardsJson
+
+function useStakingContract(stakingAddress?: string, withSignerIfPossible?: boolean) {
+  return useContract(stakingAddress, STAKING_REWARDS_ABI, withSignerIfPossible)
+}
+
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
   padding: 1rem;

src/components/swap/AdvancedSwapDetails.tsx

@@ -4,6 +4,7 @@ import Card from 'components/Card'
 import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useContext, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import styled, { ThemeContext } from 'styled-components/macro'
@@ -12,6 +13,7 @@ import { Separator, ThemedText } from '../../theme'
 import { computeRealizedLPFeePercent } from '../../utils/prices'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
+import { MouseoverTooltip } from '../Tooltip'
 import FormattedPriceImpact from './FormattedPriceImpact'
 
 const StyledCard = styled(Card)`
@@ -23,6 +25,7 @@ interface AdvancedSwapDetailsProps {
   allowedSlippage: Percent
   syncing?: boolean
   hideRouteDiagram?: boolean
+  hideInfoTooltips?: boolean
 }
 
 function TextWithLoadingPlaceholder({
@@ -43,9 +46,15 @@ function TextWithLoadingPlaceholder({
   )
 }
 
-export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }: AdvancedSwapDetailsProps) {
+export function AdvancedSwapDetails({
+  trade,
+  allowedSlippage,
+  syncing = false,
+  hideInfoTooltips = false,
+}: AdvancedSwapDetailsProps) {
   const theme = useContext(ThemeContext)
   const { chainId } = useActiveWeb3React()
+  const nativeCurrency = useNativeCurrency()
 
   const { expectedOutputAmount, priceImpact } = useMemo(() => {
     if (!trade) return { expectedOutputAmount: undefined, priceImpact: undefined }
@@ -60,9 +69,19 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
       <AutoColumn gap="8px">
         <RowBetween>
           <RowFixed>
-            <ThemedText.SubHeader color={theme.text1}>
-              <Trans>Expected Output</Trans>
-            </ThemedText.SubHeader>
+            <MouseoverTooltip
+              text={
+                <Trans>
+                  The amount you expect to receive at the current market price. You may receive less or more if the
+                  market price changes while your transaction is pending.
+                </Trans>
+              }
+              disableHover={hideInfoTooltips}
+            >
+              <ThemedText.SubHeader color={theme.text1}>
+                <Trans>Expected Output</Trans>
+              </ThemedText.SubHeader>
+            </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={65}>
             <ThemedText.Black textAlign="right" fontSize={14}>
@@ -74,9 +93,14 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
         </RowBetween>
         <RowBetween>
           <RowFixed>
-            <ThemedText.SubHeader color={theme.text1}>
-              <Trans>Price Impact</Trans>
-            </ThemedText.SubHeader>
+            <MouseoverTooltip
+              text={<Trans>The impact your trade has on the market price of this pool.</Trans>}
+              disableHover={hideInfoTooltips}
+            >
+              <ThemedText.SubHeader color={theme.text1}>
+                <Trans>Price Impact</Trans>
+              </ThemedText.SubHeader>
+            </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={50}>
             <ThemedText.Black textAlign="right" fontSize={14}>
@@ -87,14 +111,24 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
         <Separator />
         <RowBetween>
           <RowFixed style={{ marginRight: '20px' }}>
-            <ThemedText.SubHeader color={theme.text3}>
-              {trade.tradeType === TradeType.EXACT_INPUT ? (
-                <Trans>Minimum received</Trans>
-              ) : (
-                <Trans>Maximum sent</Trans>
-              )}{' '}
-              <Trans>after slippage</Trans> ({allowedSlippage.toFixed(2)}%)
-            </ThemedText.SubHeader>
+            <MouseoverTooltip
+              text={
+                <Trans>
+                  The minimum amount you are guaranteed to receive. If the price slips any further, your transaction
+                  will revert.
+                </Trans>
+              }
+              disableHover={hideInfoTooltips}
+            >
+              <ThemedText.SubHeader color={theme.text3}>
+                {trade.tradeType === TradeType.EXACT_INPUT ? (
+                  <Trans>Minimum received</Trans>
+                ) : (
+                  <Trans>Maximum sent</Trans>
+                )}{' '}
+                <Trans>after slippage</Trans> ({allowedSlippage.toFixed(2)}%)
+              </ThemedText.SubHeader>
+            </MouseoverTooltip>
           </RowFixed>
           <TextWithLoadingPlaceholder syncing={syncing} width={70}>
             <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
@@ -106,9 +140,18 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
         </RowBetween>
         {!trade?.gasUseEstimateUSD || !chainId || !SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId) ? null : (
           <RowBetween>
-            <ThemedText.SubHeader color={theme.text3}>
-              <Trans>Network Fee</Trans>
-            </ThemedText.SubHeader>
+            <MouseoverTooltip
+              text={
+                <Trans>
+                  The fee paid to miners who process your transaction. This must be paid in {nativeCurrency.symbol}.
+                </Trans>
+              }
+              disableHover={hideInfoTooltips}
+            >
+              <ThemedText.SubHeader color={theme.text3}>
+                <Trans>Network Fee</Trans>
+              </ThemedText.SubHeader>
+            </MouseoverTooltip>
             <TextWithLoadingPlaceholder syncing={syncing} width={50}>
               <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
                 ~${trade.gasUseEstimateUSD.toFixed(2)}

src/components/swap/AutoRouterIcon.tsx

@@ -0,0 +1,35 @@
+import { useRef } from 'react'
+
+let uniqueId = 0
+const getUniqueId = () => uniqueId++
+
+export default function AutoRouterIcon({ className, id }: { className?: string; id?: string }) {
+  const componentIdRef = useRef(id ?? getUniqueId())
+  const componentId = `AutoRouterIconGradient${componentIdRef.current}`
+
+  return (
+    <svg
+      width="23"
+      height="20"
+      viewBox="0 0 23 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id={componentId} x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(95)">
+          <stop id="stop1" offset="0" stopColor="#2274E2" />
+          <stop id="stop1" offset="0.5" stopColor="#2274E2" />
+          <stop id="stop2" offset="1" stopColor="#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"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke={`url(#${componentId})`}
+      />
+    </svg>
+  )
+}

src/components/swap/GasEstimateBadge.tsx

@@ -4,7 +4,7 @@ import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer } from 'components/Loader/styled'
 import { RowFixed } from 'components/Row'
 import { MouseoverTooltipContent } from 'components/Tooltip'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'

src/components/swap/RouterLabel.tsx

@@ -3,8 +3,8 @@ import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import { ReactComponent as AutoRouterIcon } from '../../assets/svg/auto_router.svg'
 import { ReactComponent as StaticRouterIcon } from '../../assets/svg/static_route.svg'
+import AutoRouterIcon from './AutoRouterIcon'
 
 const StyledAutoRouterIcon = styled(AutoRouterIcon)`
   height: 16px;

src/components/swap/SwapDetailsDropdown.tsx

@@ -147,7 +147,12 @@ export default function SwapDetailsDropdown({
                   content={
                     <ResponsiveTooltipContainer origin="top right" style={{ padding: '0' }}>
                       <Card padding="12px">
-                        <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
+                        <AdvancedSwapDetails
+                          trade={trade}
+                          allowedSlippage={allowedSlippage}
+                          syncing={syncing}
+                          hideInfoTooltips={true}
+                        />
                       </Card>
                     </ResponsiveTooltipContainer>
                   }

src/components/swap/SwapRoute.tsx

@@ -1,11 +1,12 @@
 import { Trans } from '@lingui/macro'
-import { Trade } from '@uniswap/router-sdk'
+import { Protocol } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import { FeeAmount } from '@uniswap/v3-sdk'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import { AutoColumn } from 'components/Column'
 import { LoadingRows } from 'components/Loader/styled'
-import RoutingDiagram, { RoutingDiagramEntry } from 'components/RoutingDiagram/RoutingDiagram'
+import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { AutoRow, RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
@@ -39,8 +40,6 @@ const OpenCloseIcon = styled(Plus)<{ open?: boolean }>`
   }
 `
 
-const V2_DEFAULT_FEE_TIER = 3000
-
 interface SwapRouteProps extends React.HTMLAttributes<HTMLDivElement> {
   trade: InterfaceTrade<Currency, Currency, TradeType>
   syncing: boolean
@@ -110,30 +109,36 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
   )
 })
 
-function getTokenPath(trade: Trade<Currency, Currency, TradeType>): RoutingDiagramEntry[] {
+export interface RoutingDiagramEntry {
+  percent: Percent
+  path: [Currency, Currency, FeeAmount][]
+  protocol: Protocol
+}
+
+const V2_DEFAULT_FEE_TIER = 3000
+
+/**
+ * Loops through all routes on a trade and returns an array of diagram entries.
+ */
+export function getTokenPath(trade: InterfaceTrade<Currency, Currency, TradeType>): RoutingDiagramEntry[] {
   return trade.swaps.map(({ route: { path: tokenPath, pools, protocol }, inputAmount, outputAmount }) => {
     const portion =
       trade.tradeType === TradeType.EXACT_INPUT
         ? inputAmount.divide(trade.inputAmount)
         : outputAmount.divide(trade.outputAmount)
-
     const percent = new Percent(portion.numerator, portion.denominator)
-
     const path: RoutingDiagramEntry['path'] = []
     for (let i = 0; i < pools.length; i++) {
       const nextPool = pools[i]
       const tokenIn = tokenPath[i]
       const tokenOut = tokenPath[i + 1]
-
       const entry: RoutingDiagramEntry['path'][0] = [
         tokenIn,
         tokenOut,
         nextPool instanceof Pair ? V2_DEFAULT_FEE_TIER : nextPool.fee,
       ]
-
       path.push(entry)
     }
-
     return {
       percent,
       path,

src/components/swap/TradePrice.tsx

@@ -33,6 +33,11 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
   const theme = useContext(ThemeContext)
 
   const usdcPrice = useUSDCPrice(showInverted ? price.baseCurrency : price.quoteCurrency)
+  /*
+   * calculate needed amount of decimal prices, for prices between 0.95-1.05 use 4 decimal places
+   */
+  const p = Number(usdcPrice?.toFixed())
+  const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
   let formattedPrice: string
   try {
@@ -60,7 +65,7 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
       </Text>{' '}
       {usdcPrice && (
         <ThemedText.DarkGray>
-          <Trans>(${usdcPrice.toSignificant(6, { groupSeparator: ',' })})</Trans>
+          <Trans>(${usdcPrice.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })})</Trans>
         </ThemedText.DarkGray>
       )}
     </StyledPriceContainer>

src/connectors/Fortmatic.ts

@@ -1,4 +1,4 @@
-import { FortmaticConnector as FortmaticConnectorCore } from '@web3-react/fortmatic-connector'
+import { FortmaticConnector as FortmaticConnectorCore } from 'web3-react-fortmatic-connector'
 
 export const OVERLAY_READY = 'OVERLAY_READY'
 

src/connectors/NetworkConnector.ts

@@ -1,6 +1,6 @@
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { ConnectorUpdate } from '@web3-react/types'
 import invariant from 'tiny-invariant'
+import { AbstractConnector } from 'web3-react-abstract-connector'
+import { ConnectorUpdate } from 'web3-react-types'
 
 interface NetworkConnectorArguments {
   urls: { [chainId: number]: string }

src/connectors/index.ts

@@ -1,11 +1,10 @@
 import { Web3Provider } from '@ethersproject/providers'
 import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'
-import { InjectedConnector } from '@web3-react/injected-connector'
-import { PortisConnector } from '@web3-react/portis-connector'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
-import { WalletLinkConnector } from '@web3-react/walletlink-connector'
-import { INFURA_NETWORK_URLS } from 'constants/chainInfo'
 import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from 'constants/chains'
+import { INFURA_NETWORK_URLS } from 'constants/infura'
+import { InjectedConnector } from 'web3-react-injected-connector'
+import { WalletConnectConnector } from 'web3-react-walletconnect-connector'
+import { WalletLinkConnector } from 'web3-react-walletlink-connector'
 
 import UNISWAP_LOGO_URL from '../assets/svg/logo.svg'
 import getLibrary from '../utils/getLibrary'
@@ -13,7 +12,6 @@ import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
 
 const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY
-const PORTIS_ID = process.env.REACT_APP_PORTIS_ID
 
 export const network = new NetworkConnector({
   urls: INFURA_NETWORK_URLS,
@@ -43,12 +41,6 @@ export const fortmatic = new FortmaticConnector({
   chainId: 1,
 })
 
-// mainnet only
-export const portis = new PortisConnector({
-  dAppId: PORTIS_ID ?? '',
-  networks: [1],
-})
-
 export const walletlink = new WalletLinkConnector({
   url: INFURA_NETWORK_URLS[SupportedChainId.MAINNET],
   appName: 'Uniswap',

src/constants/chainInfo.ts

@@ -1,46 +1,12 @@
+import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
+import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
+import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
 import ms from 'ms.macro'
 
-import ethereumLogoUrl from '../assets/images/ethereum-logo.png'
-import arbitrumLogoUrl from '../assets/svg/arbitrum_logo.svg'
-import optimismLogoUrl from '../assets/svg/optimistic_ethereum.svg'
-import polygonMaticLogo from '../assets/svg/polygon-matic-logo.svg'
 import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
 import { ARBITRUM_LIST, OPTIMISM_LIST } from './lists'
 
-const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
-if (typeof INFURA_KEY === 'undefined') {
-  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
-}
-
-/**
- * These are the network URLs used by the interface when there is not another available source of chain data
- */
-export const INFURA_NETWORK_URLS: { [key in SupportedChainId]: string } = {
-  [SupportedChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.RINKEBY]: `https://rinkeby.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.ROPSTEN]: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.GOERLI]: `https://goerli.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.KOVAN]: `https://kovan.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.OPTIMISM]: `https://optimism-mainnet.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.OPTIMISTIC_KOVAN]: `https://optimism-kovan.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.ARBITRUM_ONE]: `https://arbitrum-mainnet.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.ARBITRUM_RINKEBY]: `https://arbitrum-rinkeby.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.POLYGON]: `https://polygon-mainnet.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.POLYGON_MUMBAI]: `https://polygon-mumbai.infura.io/v3/${INFURA_KEY}`,
-}
-
-/**
- * This is used to call the add network RPC
- */
-interface AddNetworkInfo {
-  readonly rpcUrl: string
-  readonly nativeCurrency: {
-    name: string // e.g. 'Goerli ETH',
-    symbol: string // e.g. 'gorETH',
-    decimals: number // e.g. 18,
-  }
-}
-
 export enum NetworkType {
   L1,
   L2,
@@ -56,7 +22,11 @@ interface BaseChainInfo {
   readonly logoUrl: string
   readonly label: string
   readonly helpCenterUrl?: string
-  readonly addNetworkInfo: AddNetworkInfo
+  readonly nativeCurrency: {
+    name: string // e.g. 'Goerli ETH',
+    symbol: string // e.g. 'gorETH',
+    decimals: number // e.g. 18,
+  }
 }
 
 export interface L1ChainInfo extends BaseChainInfo {
@@ -83,10 +53,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/',
     label: 'Ethereum',
     logoUrl: ethereumLogoUrl,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-      rpcUrl: INFURA_NETWORK_URLS[SupportedChainId.MAINNET],
-    },
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   },
   [SupportedChainId.RINKEBY]: {
     networkType: NetworkType.L1,
@@ -95,10 +62,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/',
     label: 'Rinkeby',
     logoUrl: ethereumLogoUrl,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
-      rpcUrl: INFURA_NETWORK_URLS[SupportedChainId.RINKEBY],
-    },
+    nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
   },
   [SupportedChainId.ROPSTEN]: {
     networkType: NetworkType.L1,
@@ -107,10 +71,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/',
     label: 'Ropsten',
     logoUrl: ethereumLogoUrl,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 },
-      rpcUrl: INFURA_NETWORK_URLS[SupportedChainId.ROPSTEN],
-    },
+    nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 },
   },
   [SupportedChainId.KOVAN]: {
     networkType: NetworkType.L1,
@@ -119,10 +80,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/',
     label: 'Kovan',
     logoUrl: ethereumLogoUrl,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 },
-      rpcUrl: INFURA_NETWORK_URLS[SupportedChainId.KOVAN],
-    },
+    nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 },
   },
   [SupportedChainId.GOERLI]: {
     networkType: NetworkType.L1,
@@ -131,15 +89,12 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/',
     label: 'Görli',
     logoUrl: ethereumLogoUrl,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
-      rpcUrl: INFURA_NETWORK_URLS[SupportedChainId.GOERLI],
-    },
+    nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
   },
   [SupportedChainId.OPTIMISM]: {
     networkType: NetworkType.L2,
     blockWaitMsBeforeWarning: ms`25m`,
-    bridge: 'https://gateway.optimism.io/?chainId=1',
+    bridge: 'https://app.optimism.io/bridge',
     defaultListUrl: OPTIMISM_LIST,
     docs: 'https://optimism.io/',
     explorer: 'https://optimistic.etherscan.io/',
@@ -148,15 +103,12 @@ export const CHAIN_INFO: ChainInfoMap = {
     logoUrl: optimismLogoUrl,
     statusPage: 'https://optimism.io/status',
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-      rpcUrl: 'https://mainnet.optimism.io',
-    },
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   },
   [SupportedChainId.OPTIMISTIC_KOVAN]: {
     networkType: NetworkType.L2,
     blockWaitMsBeforeWarning: ms`25m`,
-    bridge: 'https://gateway.optimism.io/',
+    bridge: 'https://app.optimism.io/bridge',
     defaultListUrl: OPTIMISM_LIST,
     docs: 'https://optimism.io/',
     explorer: 'https://optimistic.etherscan.io/',
@@ -165,10 +117,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     logoUrl: optimismLogoUrl,
     statusPage: 'https://optimism.io/status',
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Optimistic Kovan Ether', symbol: 'kovOpETH', decimals: 18 },
-      rpcUrl: 'https://kovan.optimism.io',
-    },
+    nativeCurrency: { name: 'Optimistic Kovan Ether', symbol: 'kovOpETH', decimals: 18 },
   },
   [SupportedChainId.ARBITRUM_ONE]: {
     networkType: NetworkType.L2,
@@ -181,10 +130,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     logoUrl: arbitrumLogoUrl,
     defaultListUrl: ARBITRUM_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-      rpcUrl: 'https://arb1.arbitrum.io/rpc',
-    },
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   },
   [SupportedChainId.ARBITRUM_RINKEBY]: {
     networkType: NetworkType.L2,
@@ -197,10 +143,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     logoUrl: arbitrumLogoUrl,
     defaultListUrl: ARBITRUM_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 },
-      rpcUrl: 'https://rinkeby.arbitrum.io/rpc',
-    },
+    nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 },
   },
   [SupportedChainId.POLYGON]: {
     networkType: NetworkType.L1,
@@ -211,10 +154,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/polygon/',
     label: 'Polygon',
     logoUrl: polygonMaticLogo,
-    addNetworkInfo: {
-      rpcUrl: 'https://polygon-rpc.com/',
-      nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
-    },
+    nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
   },
   [SupportedChainId.POLYGON_MUMBAI]: {
     networkType: NetworkType.L1,
@@ -225,9 +165,6 @@ export const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/polygon/',
     label: 'Polygon Mumbai',
     logoUrl: polygonMaticLogo,
-    addNetworkInfo: {
-      nativeCurrency: { name: 'Polygon Mumbai Matic', symbol: 'mMATIC', decimals: 18 },
-      rpcUrl: 'https://rpc-endpoints.superfluid.dev/mumbai',
-    },
+    nativeCurrency: { name: 'Polygon Mumbai Matic', symbol: 'mMATIC', decimals: 18 },
   },
 }

src/constants/chains.ts

@@ -39,7 +39,12 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
   (id) => typeof id === 'number'
 ) as SupportedChainId[]
 
-export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [SupportedChainId.MAINNET, SupportedChainId.POLYGON]
+export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.POLYGON,
+  SupportedChainId.OPTIMISM,
+  SupportedChainId.ARBITRUM_ONE,
+]
 
 /**
  * All the chain IDs that are running the Ethereum protocol.

src/constants/governance.ts

@@ -1,6 +1,7 @@
 import {
   GOVERNANCE_ALPHA_V0_ADDRESSES,
   GOVERNANCE_ALPHA_V1_ADDRESSES,
+  GOVERNANCE_BRAVO_ADDRESSES,
   TIMELOCK_ADDRESS,
   UNI_ADDRESS,
 } from './addresses'
@@ -11,7 +12,10 @@ export const COMMON_CONTRACT_NAMES: Record<number, { [address: string]: string }
     [UNI_ADDRESS[SupportedChainId.MAINNET]]: 'UNI',
     [TIMELOCK_ADDRESS[SupportedChainId.MAINNET]]: 'Timelock',
     [GOVERNANCE_ALPHA_V0_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance (V0)',
-    [GOVERNANCE_ALPHA_V1_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance',
+    [GOVERNANCE_ALPHA_V1_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance (V1)',
+    [GOVERNANCE_BRAVO_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance',
+    '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e': 'ENS Registry',
+    '0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41': 'ENS Public Resolver',
   },
 }
 
@@ -21,3 +25,5 @@ export const DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS = 13
 export const AVERAGE_BLOCK_TIME_IN_SECS: { [chainId: number]: number } = {
   1: DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS,
 }
+
+export const LATEST_GOVERNOR_INDEX = 2

src/constants/infura.ts

@@ -0,0 +1,23 @@
+import { SupportedChainId } from './chains'
+
+const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
+if (typeof INFURA_KEY === 'undefined') {
+  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
+}
+
+/**
+ * These are the network URLs used by the interface when there is not another available source of chain data
+ */
+export const INFURA_NETWORK_URLS: { [key in SupportedChainId]: string } = {
+  [SupportedChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.RINKEBY]: `https://rinkeby.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.ROPSTEN]: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.GOERLI]: `https://goerli.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.KOVAN]: `https://kovan.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.OPTIMISM]: `https://optimism-mainnet.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.OPTIMISTIC_KOVAN]: `https://optimism-kovan.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.ARBITRUM_ONE]: `https://arbitrum-mainnet.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.ARBITRUM_RINKEBY]: `https://arbitrum-rinkeby.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.POLYGON]: `https://polygon-mainnet.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.POLYGON_MUMBAI]: `https://polygon-mumbai.infura.io/v3/${INFURA_KEY}`,
+}

src/constants/locales.ts

@@ -32,13 +32,10 @@ export const SUPPORTED_LOCALES = [
   'vi-VN',
   'zh-CN',
   'zh-TW',
-] as const
+]
 export type SupportedLocale = typeof SUPPORTED_LOCALES[number] | 'pseudo'
 
-// eslint-disable-next-line import/first
-import * as enUS from '../locales/en-US'
 export const DEFAULT_LOCALE: SupportedLocale = 'en-US'
-export const DEFAULT_CATALOG = enUS
 
 export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
   'af-ZA': 'Afrikaans',

src/constants/proposals/index.ts

@@ -2,3 +2,4 @@ export const UNISWAP_GRANTS_START_BLOCK = 11473815
 export const BRAVO_START_BLOCK = 13059344
 export const ONE_BIP_START_BLOCK = 13551293
 export const POLYGON_START_BLOCK = 13786993
+export const MOONBEAN_START_BLOCK = 14732457

src/constants/routing.ts

@@ -18,8 +18,8 @@ import {
   sETH2,
   SWISE,
   TRIBE,
-  USDC,
   USDC_ARBITRUM,
+  USDC_MAINNET,
   USDC_OPTIMISM,
   USDC_POLYGON,
   USDT,
@@ -44,13 +44,21 @@ type ChainCurrencyList = {
 }
 
 const WRAPPED_NATIVE_CURRENCIES_ONLY: ChainTokenList = Object.fromEntries(
-  Object.entries(WRAPPED_NATIVE_CURRENCY).map(([key, value]) => [key, [value]])
+  Object.entries(WRAPPED_NATIVE_CURRENCY)
+    .map(([key, value]) => [key, [value]])
+    .filter(Boolean)
 )
 
 // used to construct intermediary pairs for trading
 export const BASES_TO_CHECK_TRADES_AGAINST: ChainTokenList = {
   ...WRAPPED_NATIVE_CURRENCIES_ONLY,
-  [SupportedChainId.MAINNET]: [...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.MAINNET], DAI, USDC, USDT, WBTC],
+  [SupportedChainId.MAINNET]: [
+    ...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.MAINNET],
+    DAI,
+    USDC_MAINNET,
+    USDT,
+    WBTC,
+  ],
   [SupportedChainId.OPTIMISM]: [
     ...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.OPTIMISM],
     DAI_OPTIMISM,
@@ -90,7 +98,7 @@ export const ADDITIONAL_BASES: { [chainId: number]: { [tokenAddress: string]: To
  */
 export const CUSTOM_BASES: { [chainId: number]: { [tokenAddress: string]: Token[] } } = {
   [SupportedChainId.MAINNET]: {
-    [AMPL.address]: [DAI, WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET]],
+    [AMPL.address]: [DAI, WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET] as Token],
   },
 }
 
@@ -101,32 +109,38 @@ export const COMMON_BASES: ChainCurrencyList = {
   [SupportedChainId.MAINNET]: [
     nativeOnChain(SupportedChainId.MAINNET),
     DAI,
-    USDC,
+    USDC_MAINNET,
     USDT,
     WBTC,
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET] as Token,
   ],
   [SupportedChainId.ROPSTEN]: [
     nativeOnChain(SupportedChainId.ROPSTEN),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ROPSTEN],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ROPSTEN] as Token,
   ],
   [SupportedChainId.RINKEBY]: [
     nativeOnChain(SupportedChainId.RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.RINKEBY],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.RINKEBY] as Token,
+  ],
+  [SupportedChainId.GOERLI]: [
+    nativeOnChain(SupportedChainId.GOERLI),
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.GOERLI] as Token,
+  ],
+  [SupportedChainId.KOVAN]: [
+    nativeOnChain(SupportedChainId.KOVAN),
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.KOVAN] as Token,
   ],
-  [SupportedChainId.GOERLI]: [nativeOnChain(SupportedChainId.GOERLI), WRAPPED_NATIVE_CURRENCY[SupportedChainId.GOERLI]],
-  [SupportedChainId.KOVAN]: [nativeOnChain(SupportedChainId.KOVAN), WRAPPED_NATIVE_CURRENCY[SupportedChainId.KOVAN]],
   [SupportedChainId.ARBITRUM_ONE]: [
     nativeOnChain(SupportedChainId.ARBITRUM_ONE),
     DAI_ARBITRUM_ONE,
     USDC_ARBITRUM,
     USDT_ARBITRUM_ONE,
     WBTC_ARBITRUM_ONE,
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE] as Token,
   ],
   [SupportedChainId.ARBITRUM_RINKEBY]: [
     nativeOnChain(SupportedChainId.ARBITRUM_RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_RINKEBY],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_RINKEBY] as Token,
   ],
   [SupportedChainId.OPTIMISM]: [
     nativeOnChain(SupportedChainId.OPTIMISM),
@@ -146,7 +160,7 @@ export const COMMON_BASES: ChainCurrencyList = {
   ],
   [SupportedChainId.POLYGON_MUMBAI]: [
     nativeOnChain(SupportedChainId.POLYGON_MUMBAI),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.POLYGON_MUMBAI],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.POLYGON_MUMBAI] as Token,
     WETH_POLYGON_MUMBAI,
   ],
 }
@@ -154,7 +168,13 @@ export const COMMON_BASES: ChainCurrencyList = {
 // used to construct the list of all pairs we consider by default in the frontend
 export const BASES_TO_TRACK_LIQUIDITY_FOR: ChainTokenList = {
   ...WRAPPED_NATIVE_CURRENCIES_ONLY,
-  [SupportedChainId.MAINNET]: [...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.MAINNET], DAI, USDC, USDT, WBTC],
+  [SupportedChainId.MAINNET]: [
+    ...WRAPPED_NATIVE_CURRENCIES_ONLY[SupportedChainId.MAINNET],
+    DAI,
+    USDC_MAINNET,
+    USDT,
+    WBTC,
+  ],
 }
 export const PINNED_PAIRS: { readonly [chainId: number]: [Token, Token][] } = {
   [SupportedChainId.MAINNET]: [
@@ -168,7 +188,7 @@ export const PINNED_PAIRS: { readonly [chainId: number]: [Token, Token][] } = {
         'Compound USD Coin'
       ),
     ],
-    [USDC, USDT],
+    [USDC_MAINNET, USDT],
     [DAI, USDT],
   ],
 }

src/constants/tokenLists/unsupported.tokenlist.json

@@ -1101,6 +1101,20 @@
       "name": "BMEX",
       "symbol": "BMEX",
       "decimals": 18
+    },
+    {
+      "chainId": 1,
+      "address": "0x322A46E88fa3C78F9c9E3DBb0254b61664a06109",
+      "name": "Ukraine DAO",
+      "symbol": "Ukraine",
+      "decimals": 18
+    },
+    {
+      "chainId": 1,
+      "address": "0x8290D7a64F25e6b5002d98367E8367c1b532b534",
+      "name": "oneUNI",
+      "symbol": "oneUNI",
+      "decimals": 18
     }
   ]
 }

src/constants/tokens.ts

@@ -1,8 +1,87 @@
 import { Currency, Ether, NativeCurrency, Token, WETH9 } from '@uniswap/sdk-core'
+import invariant from 'tiny-invariant'
 
 import { UNI_ADDRESS } from './addresses'
 import { SupportedChainId } from './chains'
 
+export const USDC_MAINNET = new Token(
+  SupportedChainId.MAINNET,
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ROPSTEN = new Token(
+  SupportedChainId.ROPSTEN,
+  '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_RINKEBY = new Token(
+  SupportedChainId.RINKEBY,
+  '0x4DBCdF9B62e891a7cec5A2568C3F4FAF9E8Abe2b',
+  6,
+  'tUSDC',
+  'test USD//C'
+)
+export const USDC_GOERLI = new Token(
+  SupportedChainId.GOERLI,
+  '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_KOVAN = new Token(
+  SupportedChainId.KOVAN,
+  '0x31eeb2d0f9b6fd8642914ab10f4dd473677d80df',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_OPTIMISM = new Token(
+  SupportedChainId.OPTIMISM,
+  '0x7F5c764cBc14f9669B88837ca1490cCa17c31607',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_OPTIMISTIC_KOVAN = new Token(
+  SupportedChainId.OPTIMISTIC_KOVAN,
+  '0x3b8e53b3ab8e01fb57d0c9e893bc4d655aa67d84',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ARBITRUM = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ARBITRUM_RINKEBY = new Token(
+  SupportedChainId.ARBITRUM_RINKEBY,
+  '0x09b98f8b2395d076514037ff7d39a091a536206c',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_POLYGON = new Token(
+  SupportedChainId.POLYGON,
+  '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_POLYGON_MUMBAI = new Token(
+  SupportedChainId.POLYGON_MUMBAI,
+  '0xe11a86849d99f524cac3e7a0ec1241828e332c62',
+  6,
+  'USDC',
+  'USD//C'
+)
+
 export const AMPL = new Token(
   SupportedChainId.MAINNET,
   '0xD46bA6D942050d489DBd938a2C909A5d5039A161',
@@ -31,27 +110,19 @@ export const DAI_OPTIMISM = new Token(
   'DAI',
   'Dai stable coin'
 )
-export const USDC = new Token(
-  SupportedChainId.MAINNET,
-  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
-  6,
-  'USDC',
-  'USD//C'
-)
-export const USDC_ARBITRUM = new Token(
-  SupportedChainId.ARBITRUM_ONE,
-  '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
-  6,
-  'USDC',
-  'USD//C'
-)
-export const USDC_POLYGON = new Token(
-  SupportedChainId.POLYGON,
-  '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
-  6,
-  'USDC',
-  'USD//C'
-)
+export const USDC: { [chainId in SupportedChainId]: Token } = {
+  [SupportedChainId.MAINNET]: USDC_MAINNET,
+  [SupportedChainId.ARBITRUM_ONE]: USDC_ARBITRUM,
+  [SupportedChainId.OPTIMISM]: USDC_OPTIMISM,
+  [SupportedChainId.ARBITRUM_RINKEBY]: USDC_ARBITRUM_RINKEBY,
+  [SupportedChainId.OPTIMISTIC_KOVAN]: USDC_OPTIMISTIC_KOVAN,
+  [SupportedChainId.POLYGON]: USDC_POLYGON,
+  [SupportedChainId.POLYGON_MUMBAI]: USDC_POLYGON_MUMBAI,
+  [SupportedChainId.GOERLI]: USDC_GOERLI,
+  [SupportedChainId.RINKEBY]: USDC_RINKEBY,
+  [SupportedChainId.KOVAN]: USDC_KOVAN,
+  [SupportedChainId.ROPSTEN]: USDC_ROPSTEN,
+}
 export const DAI_POLYGON = new Token(
   SupportedChainId.POLYGON,
   '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063',
@@ -73,13 +144,6 @@ export const WBTC_POLYGON = new Token(
   'WBTC',
   'Wrapped BTC'
 )
-export const USDC_OPTIMISM = new Token(
-  SupportedChainId.OPTIMISM,
-  '0x7F5c764cBc14f9669B88837ca1490cCa17c31607',
-  6,
-  'USDC',
-  'USD//C'
-)
 export const USDT = new Token(
   SupportedChainId.MAINNET,
   '0xdAC17F958D2ee523a2206206994597C13D831ec7',
@@ -208,8 +272,8 @@ export const UNI: { [chainId: number]: Token } = {
   [SupportedChainId.KOVAN]: new Token(SupportedChainId.KOVAN, UNI_ADDRESS[42], 18, 'UNI', 'Uniswap'),
 }
 
-export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token } = {
-  ...WETH9,
+export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } = {
+  ...(WETH9 as Record<SupportedChainId, Token>),
   [SupportedChainId.OPTIMISM]: new Token(
     SupportedChainId.OPTIMISM,
     '0x4200000000000000000000000000000000000006',
@@ -265,7 +329,9 @@ class MaticNativeCurrency extends NativeCurrency {
 
   get wrapped(): Token {
     if (!isMatic(this.chainId)) throw new Error('Not matic')
-    return WRAPPED_NATIVE_CURRENCY[this.chainId]
+    const wrapped = WRAPPED_NATIVE_CURRENCY[this.chainId]
+    invariant(wrapped instanceof Token)
+    return wrapped
   }
 
   public constructor(chainId: number) {
@@ -276,7 +342,8 @@ class MaticNativeCurrency extends NativeCurrency {
 
 export class ExtendedEther extends Ether {
   public get wrapped(): Token {
-    if (this.chainId in WRAPPED_NATIVE_CURRENCY) return WRAPPED_NATIVE_CURRENCY[this.chainId]
+    const wrapped = WRAPPED_NATIVE_CURRENCY[this.chainId]
+    if (wrapped) return wrapped
     throw new Error('Unsupported chain ID')
   }
 
@@ -296,3 +363,19 @@ export function nativeOnChain(chainId: number): NativeCurrency {
       : ExtendedEther.onChain(chainId))
   )
 }
+
+export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedChainId]?: string } } = {
+  USDC: {
+    [SupportedChainId.MAINNET]: USDC_MAINNET.address,
+    [SupportedChainId.ARBITRUM_ONE]: USDC_ARBITRUM.address,
+    [SupportedChainId.OPTIMISM]: USDC_OPTIMISM.address,
+    [SupportedChainId.ARBITRUM_RINKEBY]: USDC_ARBITRUM_RINKEBY.address,
+    [SupportedChainId.OPTIMISTIC_KOVAN]: USDC_OPTIMISTIC_KOVAN.address,
+    [SupportedChainId.POLYGON]: USDC_POLYGON.address,
+    [SupportedChainId.POLYGON_MUMBAI]: USDC_POLYGON_MUMBAI.address,
+    [SupportedChainId.GOERLI]: USDC_GOERLI.address,
+    [SupportedChainId.RINKEBY]: USDC_RINKEBY.address,
+    [SupportedChainId.KOVAN]: USDC_KOVAN.address,
+    [SupportedChainId.ROPSTEN]: USDC_ROPSTEN.address,
+  },
+}

src/constants/wallet.ts

@@ -1,12 +1,11 @@
-import { AbstractConnector } from '@web3-react/abstract-connector'
+import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import INJECTED_ICON_URL from '../assets/images/arrow-right.svg'
 import COINBASE_ICON_URL from '../assets/images/coinbaseWalletIcon.svg'
 import FORTMATIC_ICON_URL from '../assets/images/fortmaticIcon.png'
 import METAMASK_ICON_URL from '../assets/images/metamask.png'
-import PORTIS_ICON_URL from '../assets/images/portisIcon.png'
 import WALLETCONNECT_ICON_URL from '../assets/images/walletConnectIcon.svg'
-import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
+import { fortmatic, injected, walletconnect, walletlink } from '../connectors'
 
 interface WalletInfo {
   connector?: AbstractConnector
@@ -73,13 +72,4 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
     color: '#6748FF',
     mobile: true,
   },
-  Portis: {
-    connector: portis,
-    name: 'Portis',
-    iconURL: PORTIS_ICON_URL,
-    description: 'Login using Portis hosted wallet',
-    href: null,
-    color: '#4A6C9B',
-    mobile: true,
-  },
 }

src/hooks/Tokens.ts

@@ -2,7 +2,7 @@ import { Currency, Token } from '@uniswap/sdk-core'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useCurrencyFromMap, useTokenFromMap } from 'lib/hooks/useCurrency'
+import { useCurrencyFromMap, useTokenFromMapOrNetwork } from 'lib/hooks/useCurrency'
 import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
 import { useMemo } from 'react'
 
@@ -159,7 +159,7 @@ export function useIsUserAddedToken(currency: Currency | undefined | null): bool
 // otherwise returns the token
 export function useToken(tokenAddress?: string | null): Token | null | undefined {
   const tokens = useAllTokens()
-  return useTokenFromMap(tokens, tokenAddress)
+  return useTokenFromMapOrNetwork(tokens, tokenAddress)
 }
 
 export function useCurrency(currencyId?: string | null): Currency | null | undefined {

src/hooks/useAccountRiskCheck.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import ReactGA from 'react-ga4'
+import { ApplicationModal, setOpenModal } from 'state/application/reducer'
+import { useAppDispatch } from 'state/hooks'
+
+export default function useAccountRiskCheck(account: string | null | undefined) {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (account) {
+      const headers = new Headers({ 'Content-Type': 'application/json' })
+      fetch('https://screening-worker.uniswap.workers.dev', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ address: account }),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.block) {
+            dispatch(setOpenModal(ApplicationModal.BLOCKED_ACCOUNT))
+            ReactGA.event({
+              category: 'Address Screening',
+              action: 'blocked',
+              label: account,
+            })
+          }
+        })
+        .catch(() => {
+          dispatch(setOpenModal(null))
+        })
+    }
+  }, [account, dispatch])
+}

src/hooks/useActiveWeb3React.ts

@@ -1,15 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Web3Provider } from '@ethersproject/providers'
-import { useWeb3React } from '@web3-react/core'
-import { default as useWidgetsWeb3React } from 'lib/hooks/useActiveWeb3React'
+import { useWeb3React } from 'web3-react-core'
 
 import { NetworkContextName } from '../constants/misc'
 
 export default function useActiveWeb3React() {
-  if (process.env.REACT_APP_IS_WIDGET) {
-    return useWidgetsWeb3React()
-  }
-
   const interfaceContext = useWeb3React<Web3Provider>()
   const interfaceNetworkContext = useWeb3React<Web3Provider>(
     process.env.REACT_APP_IS_WIDGET ? undefined : NetworkContextName

src/hooks/useAddTokenToMetamask.ts

@@ -15,7 +15,7 @@ export default function useAddTokenToMetamask(currencyToAdd: Currency | undefine
   const logoURL = useCurrencyLogoURIs(token)[0]
 
   const addToken = useCallback(() => {
-    if (library && library.provider.isMetaMask && library.provider.request && token) {
+    if (library && library?.provider?.isMetaMask && library.provider.request && token) {
       library.provider
         .request({
           method: 'wallet_watchAsset',

src/hooks/useApeModeQueryParamReader.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useAppDispatch } from 'state/hooks'
 
-import { updateUserExpertMode } from '../state/user/actions'
+import { updateUserExpertMode } from '../state/user/reducer'
 import useParsedQueryString from './useParsedQueryString'
 
 export default function ApeModeQueryParamReader(): null {

src/hooks/useApproveCallback.ts

@@ -6,8 +6,8 @@ import useSwapApproval, { useSwapApprovalOptimizedTrade } from 'lib/hooks/swap/u
 import { ApprovalState, useApproval } from 'lib/hooks/useApproval'
 import { useCallback } from 'react'
 
-import { TransactionType } from '../state/transactions/actions'
 import { useHasPendingApproval, useTransactionAdder } from '../state/transactions/hooks'
+import { TransactionType } from '../state/transactions/types'
 export { ApprovalState } from 'lib/hooks/useApproval'
 
 function useGetAndTrackApproval(getApproval: ReturnType<typeof useApproval>[1]) {

src/hooks/useAutoRouterSupported.tsx

@@ -1,5 +1,5 @@
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'lib/hooks/routing/clientSideSmartOrderRouter/constants'
+import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 
 export default function useAutoRouterSupported(): boolean {
   const { chainId } = useActiveWeb3React()

src/hooks/useAutoSlippageTolerance.ts

@@ -13,6 +13,7 @@ import useUSDCPrice, { useUSDCValue } from './useUSDCPrice'
 
 const V3_SWAP_DEFAULT_SLIPPAGE = new Percent(50, 10_000) // .50%
 const ONE_TENTHS_PERCENT = new Percent(10, 10_000) // .10%
+export const DEFAULT_AUTO_SLIPPAGE = ONE_TENTHS_PERCENT
 
 /**
  * Return a guess of the gas cost used in computing slippage tolerance for a given trade
@@ -41,10 +42,10 @@ export default function useAutoSlippageTolerance(
 
   const gasEstimate = guesstimateGas(trade)
   const nativeCurrency = useNativeCurrency()
-  const nativeCurrencyPrice = useUSDCPrice(nativeCurrency ?? undefined)
+  const nativeCurrencyPrice = useUSDCPrice((trade && nativeCurrency) ?? undefined)
 
   return useMemo(() => {
-    if (!trade || onL2) return ONE_TENTHS_PERCENT
+    if (!trade || onL2) return DEFAULT_AUTO_SLIPPAGE
 
     const nativeGasCost =
       nativeGasPrice && typeof gasEstimate === 'number'

src/hooks/useBestTrade.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks'
 import { CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import { DAI, USDC } from 'constants/tokens'
+import { DAI, USDC_MAINNET } from 'constants/tokens'
 import { TradeState } from 'state/routing/types'
 
 import { useRoutingAPITrade } from '../state/routing/useRoutingAPITrade'
@@ -10,7 +10,7 @@ import { useClientSideV3Trade } from './useClientSideV3Trade'
 import useDebounce from './useDebounce'
 import useIsWindowVisible from './useIsWindowVisible'
 
-const USDCAmount = CurrencyAmount.fromRawAmount(USDC, '10000')
+const USDCAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '10000')
 const DAIAmount = CurrencyAmount.fromRawAmount(DAI, '10000')
 
 jest.mock('./useAutoRouterSupported')
@@ -126,10 +126,10 @@ describe('#useBestV3Trade ExactOut', () => {
     expectRouterMock(TradeState.INVALID)
     expectClientSideMock(TradeState.VALID)
 
-    const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+    const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
-    expect(mockUseRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, USDC)
-    expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC)
+    expect(mockUseRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, USDC_MAINNET)
+    expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET)
     expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
   })
 
@@ -138,17 +138,17 @@ describe('#useBestV3Trade ExactOut', () => {
     expectRouterMock(TradeState.NO_ROUTE_FOUND)
     expectClientSideMock(TradeState.VALID)
 
-    const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+    const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
-    expect(mockUseRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, USDC)
-    expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC)
+    expect(mockUseRoutingAPITrade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, USDC_MAINNET)
+    expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET)
     expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
   })
   describe('when routing api is in non-error state', () => {
     it('does not compute client side v3 trade if routing api is LOADING', () => {
       expectRouterMock(TradeState.LOADING)
 
-      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
       expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, undefined)
       expect(result.current).toEqual({ state: TradeState.LOADING, trade: undefined })
@@ -157,7 +157,7 @@ describe('#useBestV3Trade ExactOut', () => {
     it('does not compute client side v3 trade if routing api is VALID', () => {
       expectRouterMock(TradeState.VALID)
 
-      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
       expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, undefined)
       expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
@@ -166,7 +166,7 @@ describe('#useBestV3Trade ExactOut', () => {
     it('does not compute client side v3 trade if routing api is SYNCING', () => {
       expectRouterMock(TradeState.SYNCING)
 
-      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
       expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, undefined)
       expect(result.current).toEqual({ state: TradeState.SYNCING, trade: undefined })
@@ -178,7 +178,7 @@ describe('#useBestV3Trade ExactOut', () => {
       expectRouterMock(TradeState.INVALID)
       expectClientSideMock(TradeState.VALID)
 
-      renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+      renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
       expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, undefined, undefined)
     })
@@ -187,9 +187,9 @@ describe('#useBestV3Trade ExactOut', () => {
       expectRouterMock(TradeState.NO_ROUTE_FOUND)
       expectClientSideMock(TradeState.VALID)
 
-      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC))
+      const { result } = renderHook(() => useBestTrade(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET))
 
-      expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC)
+      expect(mockUseClientSideV3Trade).toHaveBeenCalledWith(TradeType.EXACT_OUTPUT, DAIAmount, USDC_MAINNET)
       expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
     })
   })

src/hooks/useBestTrade.ts

@@ -36,21 +36,8 @@ export function useBestTrade(
     debouncedOtherCurrency
   )
 
-  const isLoading = amountSpecified !== undefined && debouncedAmount === undefined
-
-  // consider trade debouncing when inputs/outputs do not match
-  const debouncing =
-    routingAPITrade.trade &&
-    amountSpecified &&
-    (tradeType === TradeType.EXACT_INPUT
-      ? !routingAPITrade.trade.inputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.inputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.outputAmount.currency)
-      : !routingAPITrade.trade.outputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.outputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.inputAmount.currency))
-
-  const useFallback = !autoRouterSupported || (!debouncing && routingAPITrade.state === TradeState.NO_ROUTE_FOUND)
+  const isLoading = routingAPITrade.state === TradeState.LOADING
+  const useFallback = !autoRouterSupported || routingAPITrade.state === TradeState.NO_ROUTE_FOUND
 
   // only use client side router if routing api trade failed or is not supported
   const bestV3Trade = useClientSideV3Trade(
@@ -63,9 +50,8 @@ export function useBestTrade(
   return useMemo(
     () => ({
       ...(useFallback ? bestV3Trade : routingAPITrade),
-      ...(debouncing ? { state: TradeState.SYNCING } : {}),
       ...(isLoading ? { state: TradeState.LOADING } : {}),
     }),
-    [bestV3Trade, debouncing, isLoading, routingAPITrade, useFallback]
+    [bestV3Trade, isLoading, routingAPITrade, useFallback]
   )
 }

src/hooks/useClientSideV3Trade.ts

@@ -28,26 +28,24 @@ export function useClientSideV3Trade<TTradeType extends TradeType>(
   amountSpecified?: CurrencyAmount<Currency>,
   otherCurrency?: Currency
 ): { state: TradeState; trade: InterfaceTrade<Currency, Currency, TTradeType> | undefined } {
-  const [currencyIn, currencyOut] = useMemo(
-    () =>
-      tradeType === TradeType.EXACT_INPUT
-        ? [amountSpecified?.currency, otherCurrency]
-        : [otherCurrency, amountSpecified?.currency],
-    [tradeType, amountSpecified, otherCurrency]
-  )
+  const [currencyIn, currencyOut] =
+    tradeType === TradeType.EXACT_INPUT
+      ? [amountSpecified?.currency, otherCurrency]
+      : [otherCurrency, amountSpecified?.currency]
   const { routes, loading: routesLoading } = useAllV3Routes(currencyIn, currencyOut)
 
   const quoter = useV3Quoter()
   const { chainId } = useActiveWeb3React()
-  const quotesResults = useSingleContractWithCallData(
-    quoter,
-    amountSpecified
-      ? routes.map((route) => SwapQuoter.quoteCallParameters(route, amountSpecified, tradeType).calldata)
-      : [],
-    {
-      gasRequired: chainId ? QUOTE_GAS_OVERRIDES[chainId] ?? DEFAULT_GAS_QUOTE : undefined,
-    }
+  const callData = useMemo(
+    () =>
+      amountSpecified
+        ? routes.map((route) => SwapQuoter.quoteCallParameters(route, amountSpecified, tradeType).calldata)
+        : [],
+    [amountSpecified, routes, tradeType]
   )
+  const quotesResults = useSingleContractWithCallData(quoter, callData, {
+    gasRequired: chainId ? QUOTE_GAS_OVERRIDES[chainId] ?? DEFAULT_GAS_QUOTE : undefined,
+  })
 
   return useMemo(() => {
     if (

src/hooks/useColor.ts

@@ -1,9 +1,9 @@
 import { Token } from '@uniswap/sdk-core'
 import { SupportedChainId } from 'constants/chains'
 import uriToHttp from 'lib/utils/uriToHttp'
-import Vibrant from 'node-vibrant/lib/bundle'
+import Vibrant from 'node-vibrant/lib/bundle.js'
 import { shade } from 'polished'
-import { useLayoutEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { hex } from 'wcag-contrast'
 
@@ -64,7 +64,7 @@ async function getColorFromUriPath(uri: string): Promise<string | null> {
 export function useColor(token?: Token) {
   const [color, setColor] = useState('#2172E5')
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     let stale = false
 
     if (token) {
@@ -87,7 +87,7 @@ export function useColor(token?: Token) {
 export function useListColor(listImageUri?: string) {
   const [color, setColor] = useState('#2172E5')
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     let stale = false
 
     if (listImageUri) {

src/hooks/useContract.ts

@@ -1,15 +1,11 @@
 import { Contract } from '@ethersproject/contracts'
-import { abi as GOVERNANCE_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
-import { abi as UNI_ABI } from '@uniswap/governance/build/Uni.json'
-import { abi as STAKING_REWARDS_ABI } from '@uniswap/liquidity-staker/build/StakingRewards.json'
-import { abi as MERKLE_DISTRIBUTOR_ABI } from '@uniswap/merkle-distributor/build/MerkleDistributor.json'
-import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
-import { abi as IUniswapV2Router02ABI } from '@uniswap/v2-periphery/build/IUniswapV2Router02.json'
-import { abi as QuoterABI } from '@uniswap/v3-periphery/artifacts/contracts/lens/Quoter.sol/Quoter.json'
-import { abi as TickLensABI } from '@uniswap/v3-periphery/artifacts/contracts/lens/TickLens.sol/TickLens.json'
-import { abi as MulticallABI } from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
-import { abi as NFTPositionManagerABI } from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
-import { abi as V2MigratorABI } from '@uniswap/v3-periphery/artifacts/contracts/V3Migrator.sol/V3Migrator.json'
+import IUniswapV2PairJson from '@uniswap/v2-core/build/IUniswapV2Pair.json'
+import IUniswapV2Router02Json from '@uniswap/v2-periphery/build/IUniswapV2Router02.json'
+import QuoterJson from '@uniswap/v3-periphery/artifacts/contracts/lens/Quoter.sol/Quoter.json'
+import TickLensJson from '@uniswap/v3-periphery/artifacts/contracts/lens/TickLens.sol/TickLens.json'
+import UniswapInterfaceMulticallJson from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
+import NonfungiblePositionManagerJson from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
+import V3MigratorJson from '@uniswap/v3-periphery/artifacts/contracts/V3Migrator.sol/V3Migrator.json'
 import ARGENT_WALLET_DETECTOR_ABI from 'abis/argent-wallet-detector.json'
 import EIP_2612 from 'abis/eip_2612.json'
 import ENS_PUBLIC_RESOLVER_ABI from 'abis/ens-public-resolver.json'
@@ -18,16 +14,11 @@ import ERC20_ABI from 'abis/erc20.json'
 import ERC20_BYTES32_ABI from 'abis/erc20_bytes32.json'
 import ERC721_ABI from 'abis/erc721.json'
 import ERC1155_ABI from 'abis/erc1155.json'
-import GOVERNOR_BRAVO_ABI from 'abis/governor-bravo.json'
 import { ArgentWalletDetector, EnsPublicResolver, EnsRegistrar, Erc20, Erc721, Erc1155, Weth } from 'abis/types'
 import WETH_ABI from 'abis/weth.json'
 import {
   ARGENT_WALLET_DETECTOR_ADDRESS,
   ENS_REGISTRAR_ADDRESSES,
-  GOVERNANCE_ALPHA_V0_ADDRESSES,
-  GOVERNANCE_ALPHA_V1_ADDRESSES,
-  GOVERNANCE_BRAVO_ADDRESSES,
-  MERKLE_DISTRIBUTOR_ADDRESS,
   MULTICALL_ADDRESS,
   NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
   QUOTER_ADDRESSES,
@@ -35,7 +26,7 @@ import {
   V2_ROUTER_ADDRESS,
   V3_MIGRATOR_ADDRESSES,
 } from 'constants/addresses'
-import { UNI, WRAPPED_NATIVE_CURRENCY } from 'constants/tokens'
+import { WRAPPED_NATIVE_CURRENCY } from 'constants/tokens'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useMemo } from 'react'
 import { NonfungiblePositionManager, Quoter, TickLens, UniswapInterfaceMulticall } from 'types/v3'
@@ -43,6 +34,14 @@ import { V3Migrator } from 'types/v3/V3Migrator'
 
 import { getContract } from '../utils'
 
+const { abi: IUniswapV2PairABI } = IUniswapV2PairJson
+const { abi: IUniswapV2Router02ABI } = IUniswapV2Router02Json
+const { abi: QuoterABI } = QuoterJson
+const { abi: TickLensABI } = TickLensJson
+const { abi: MulticallABI } = UniswapInterfaceMulticallJson
+const { abi: NFTPositionManagerABI } = NonfungiblePositionManagerJson
+const { abi: V2MigratorABI } = V3MigratorJson
+
 // returns null on errors
 export function useContract<T extends Contract = Contract>(
   addressOrAddressMap: string | { [chainId: number]: string } | undefined,
@@ -123,33 +122,6 @@ export function useInterfaceMulticall() {
   return useContract<UniswapInterfaceMulticall>(MULTICALL_ADDRESS, MulticallABI, false) as UniswapInterfaceMulticall
 }
 
-export function useMerkleDistributorContract() {
-  return useContract(MERKLE_DISTRIBUTOR_ADDRESS, MERKLE_DISTRIBUTOR_ABI, true)
-}
-
-export function useGovernanceV0Contract(): Contract | null {
-  return useContract(GOVERNANCE_ALPHA_V0_ADDRESSES, GOVERNANCE_ABI, false)
-}
-
-export function useGovernanceV1Contract(): Contract | null {
-  return useContract(GOVERNANCE_ALPHA_V1_ADDRESSES, GOVERNANCE_ABI, false)
-}
-
-export function useGovernanceBravoContract(): Contract | null {
-  return useContract(GOVERNANCE_BRAVO_ADDRESSES, GOVERNOR_BRAVO_ABI, true)
-}
-
-export const useLatestGovernanceContract = useGovernanceBravoContract
-
-export function useUniContract() {
-  const { chainId } = useActiveWeb3React()
-  return useContract(chainId ? UNI[chainId]?.address : undefined, UNI_ABI, true)
-}
-
-export function useStakingContract(stakingAddress?: string, withSignerIfPossible?: boolean) {
-  return useContract(stakingAddress, STAKING_REWARDS_ABI, withSignerIfPossible)
-}
-
 export function useV3NFTPositionManagerContract(withSignerIfPossible?: boolean): NonfungiblePositionManager | null {
   return useContract<NonfungiblePositionManager>(
     NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,

src/hooks/useCurrentBlockTimestamp.ts

@@ -1,10 +1,15 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useInterfaceMulticall } from './useContract'
 
 // gets the current timestamp from the blockchain
 export default function useCurrentBlockTimestamp(): BigNumber | undefined {
   const multicall = useInterfaceMulticall()
-  return useSingleCallResult(multicall, 'getCurrentBlockTimestamp')?.result?.[0]
+  const resultStr: string | undefined = useSingleCallResult(
+    multicall,
+    'getCurrentBlockTimestamp'
+  )?.result?.[0]?.toString()
+  return useMemo(() => (typeof resultStr === 'string' ? BigNumber.from(resultStr) : undefined), [resultStr])
 }