fix crash (#3634)

* chore: upgrade web3-react

* feat: use a JsonRpcConnector

* chore: rm @ethersproject/experimental

* fix: assert Web3Provider in app

* fix: type providers more loosely

* chore: reinstall experimental for testing

.env

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

.env.production

@@ -1,5 +1,5 @@
 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/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,11 @@
 # testing
 /coverage
 
-# production
+# builds
 /build
-
-# widgets
+/cosmos-export
 /dist
+/dts
 
 # misc
 .DS_Store

INTERFACE_README.md

@@ -0,0 +1,45 @@
+# Uniswap Interface
+
+An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
+
+- Website: [uniswap.org](https://uniswap.org/)
+- Interface: [app.uniswap.org](https://app.uniswap.org)
+- Docs: [uniswap.org/docs/](https://docs.uniswap.org/)
+- Twitter: [@Uniswap](https://twitter.com/Uniswap)
+- Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
+- Email: [contact@uniswap.org](mailto:contact@uniswap.org)
+- Discord: [Uniswap](https://discord.gg/FCfyBSbCU5)
+- Whitepapers:
+  - [V1](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
+  - [V2](https://uniswap.org/whitepaper.pdf)
+  - [V3](https://uniswap.org/whitepaper-v3.pdf)
+
+## Accessing the Uniswap Interface
+
+To access the Uniswap Interface, use an IPFS gateway link from the
+[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
+or visit [app.uniswap.org](https://app.uniswap.org).
+
+## Unsupported tokens
+
+Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
+
+You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
+
+## Contributions
+
+For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
+
+## Accessing Uniswap V2
+
+The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
+
+- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
+- View V2 liquidity: https://app.uniswap.org/#/pool/v2
+- Add V2 liquidity: https://app.uniswap.org/#/add/v2
+- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
+
+## Accessing Uniswap V1
+
+The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

README.md

@@ -1,51 +1,21 @@
-# Uniswap Interface
+This repo is home to the Uniswap Widgets package and the web app interface [app.uniswap.org](https://app.uniswap.org).
 
-[![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)
+# Uniswap Labs Interface
+
+[![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.
+The web application hosted at https://app.uniswap.org is a convenient way to access the core functionality of the Uniswap Protocol. 
 
-- Website: [uniswap.org](https://uniswap.org/)
-- Interface: [app.uniswap.org](https://app.uniswap.org)
-- Docs: [uniswap.org/docs/](https://docs.uniswap.org/)
-- Twitter: [@Uniswap](https://twitter.com/Uniswap)
-- Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
-- Email: [contact@uniswap.org](mailto:contact@uniswap.org)
-- Discord: [Uniswap](https://discord.gg/FCfyBSbCU5)
-- Whitepapers:
-  - [V1](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
-  - [V2](https://uniswap.org/whitepaper.pdf)
-  - [V3](https://uniswap.org/whitepaper-v3.pdf)
+For documentation of the interface including how to contribute or access prior builds, please view the README here: [INTERFACE_README.md](./INTERFACE_README.md)
 
-## Accessing the Uniswap Interface
+# Uniswap Labs Widgets
 
-To access the Uniswap Interface, use an IPFS gateway link from the
-[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
-or visit [app.uniswap.org](https://app.uniswap.org).
+The `@uniswap/widgets` package is an npm package of React components used to provide subsets of the Uniswap Protocol functionality in a small and configurable user interface element.
 
-## Unsupported tokens
+The npm package can be found here. [@uniswap/widgets](https://www.npmjs.com/package/@uniswap/widgets)
 
-Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
-
-You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
-
-## Contributions
-
-For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
-
-## Accessing Uniswap V2
-
-The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
-
-- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
-- View V2 liquidity: https://app.uniswap.org/#/pool/v2
-- Add V2 liquidity: https://app.uniswap.org/#/add/v2
-- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
-
-## Accessing Uniswap V1
-
-The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
-linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).
+For documentation of the widgets package, please view the README here: [WIDGETS_README.md](./WIDGETS_README.md).

WIDGETS_README.md

@@ -0,0 +1,40 @@
+# Uniswap Labs Swap Widget
+
+The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with one line of code. 
+
+![swap widget screenshot](https://raw.githubusercontent.com/Uniswap/interface/main/src/assets/images/widget-screenshot.png)
+
+You can customize the theme (colors, font, border radius, and more) to match the style of your application. You can also configure your own default token list and optionally set a convenience fee on swaps executed through the widget on your site.
+
+## Installation
+
+Install the widgets library via `npm` or `yarn`. If you do not already use the widget's peerDependencies `redux` and `react-redux`, then you'll need to add them as well. 
+
+```js
+yarn add @uniswap/widgets redux react-redux
+```
+```js
+npm i --save @uniswap/widgets redux react-redux
+```
+
+## Documentation
+
+- [overview](https://docs.uniswap.org/sdk/widgets/swap-widget)
+- [api reference](https://docs.uniswap.org/sdk/widgets/swap-widget/api)
+
+## Example Apps
+
+Uniswap Labs maintains two demo apps in branches of the [widgets-demo](https://github.com/Uniswap/widgets-demo) repo:
+
+- [NextJS](https://github.com/Uniswap/widgets-demo/tree/nextjs)
+- [Create React App](https://github.com/Uniswap/widgets-demo/tree/cra)
+
+Others have also also released the widget in production to their userbase:
+
+- [OpenSea](https://opensea.io/)
+- [Friends With Benefits](https://www.fwb.help/)
+- [Oasis](https://oasis.app/)
+
+## Legal notice
+
+Uniswap Labs encourages integrators to evaluate their own regulatory obligations when integrating this widget into their products, including, but not limited to, those related to economic or trade sanctions compliance.

cosmos.config.json

@@ -4,6 +4,7 @@
   ],
   "webpack": {
     "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.js"
-  }
-}
+    "overridePath": "cosmos.override.cjs"
+  },
+  "port": 5001
+}

cosmos.override.cjs

@@ -0,0 +1,26 @@
+/* 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,
+          REACT_APP_LOCALES: '"../locales"',
+        },
+      })
+    }
+    return plugin
+  }),
+})

cosmos.override.js

@@ -1,14 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-// Renders the cosmos fixtures in isolation, instead of using public/index.html.
-module.exports = (webpackConfig) => ({
-  ...webpackConfig,
-  plugins: webpackConfig.plugins.map((plugin) =>
-    plugin instanceof HtmlWebpackPlugin
-      ? new HtmlWebpackPlugin({
-          templateContent: '<body></body>',
-        })
-      : 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": "0.0.26-beta",
   "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,14 +37,21 @@
     "@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-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-eslint": "^8.0.1",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@rollup/plugin-url": "^6.1.0",
     "@svgr/rollup": "^6.2.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -56,22 +82,19 @@
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
+    "@uniswap/default-token-list": "^3.0.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/router-sdk": "^1.0.3",
-    "@uniswap/smart-order-router": "^2.5.10",
     "@uniswap/v2-core": "1.0.0",
     "@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.8",
+    "@web3-react/metamask": "^8.0.18-beta.0",
+    "@web3-react/walletconnect": "^8.0.25-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",
@@ -89,34 +112,48 @@
     "graphql-request": "^3.4.0",
     "inter-ui": "^3.13.1",
     "jest-styled-components": "^7.0.5",
-    "ms.macro": "^2.0.0",
     "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.3",
-    "react-ga": "^2.5.7",
+    "react-cosmos": "^5.6.6",
+    "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-copy": "^3.4.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.1.0",
+    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-node-externals": "^3.1.2",
     "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-portis-connector": "npm:@web3-react/portis-connector@^6.0.9",
+    "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"
@@ -133,12 +170,13 @@
     "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",
+    "prepublishOnly": "yarn widgets:build",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=./custom-test-env.js",
+    "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'",
-    "widgets:start": "cross-env FAST_REFRESH=false REACT_APP_IS_WIDGET=true cosmos",
+    "widgets:start": "cosmos",
     "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
   },
   "browserslist": {
@@ -155,60 +193,58 @@
   },
   "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.5",
-    "@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.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.22-beta.0",
+    "@web3-react/eip1193": "^8.0.17-beta.0",
+    "@web3-react/empty": "^8.0.11-beta.0",
+    "@web3-react/types": "^8.0.11-beta.0",
+    "@web3-react/url": "^8.0.16-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",
     "make-plural": "^7.0.0",
+    "ms.macro": "^2.0.0",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
     "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

@@ -3,61 +3,180 @@
  * This library lives in src/lib, but shares code with the interface application.
  */
 
-import eslint from '@rollup/plugin-eslint'
+import alias from '@rollup/plugin-alias'
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
+import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
+import typescript from '@rollup/plugin-typescript'
 import url from '@rollup/plugin-url'
 import svgr from '@svgr/rollup'
+import path from 'path'
+import { RollupWarning } from 'rollup'
+import copy from 'rollup-plugin-copy'
+import del from 'rollup-plugin-delete'
 import dts from 'rollup-plugin-dts'
+// @ts-ignore // missing types
+import multi from 'rollup-plugin-multi-input'
+import externals from 'rollup-plugin-node-externals'
 import sass from 'rollup-plugin-scss'
-import typescript from 'rollup-plugin-typescript2'
+import { CompilerOptions } from 'typescript'
 
-import { dependencies } from './package.json'
-
-const deps = Object.keys(dependencies)
-
-const replacements = {
+const REPLACEMENTS = {
   'process.env.REACT_APP_IS_WIDGET': true,
+  'process.env.REACT_APP_LOCALES': '"./locales"',
+  // esm requires fully-specified paths:
+  'react/jsx-runtime': 'react/jsx-runtime.js',
 }
 
-const library = {
+const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
+const ASSET_EXTENSIONS = ['.png', '.svg']
+function isAsset(source: string) {
+  const extname = path.extname(source)
+  return extname && [...ASSET_EXTENSIONS, '.css', '.scss'].includes(extname)
+}
+
+function isEthers(source: string) {
+  // @ethersproject/* modules are provided by ethers, with the exception of experimental.
+  return source.startsWith('@ethersproject/') && !source.endsWith('experimental')
+}
+
+const TS_CONFIG = './tsconfig.lib.json'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { baseUrl, paths }: CompilerOptions = require(TS_CONFIG).compilerOptions
+const aliases = Object.entries({ ...paths }).flatMap(([find, replacements]) => {
+  return replacements.map((replacement) => ({
+    find: path.dirname(find),
+    replacement: path.join(__dirname, baseUrl || '.', path.dirname(replacement)),
+  }))
+})
+
+const plugins = [
+  // Dependency resolution
+  resolve({ extensions: EXTENSIONS }), // resolves third-party modules within node_modules/
+  alias({ entries: aliases }), // resolves paths aliased through the tsconfig (babel does not use tsconfig path resolution)
+
+  // Source code transformation
+  replace({ ...REPLACEMENTS, preventAssignment: true }),
+  json(), // imports json as ES6; doing so enables type-checking and module resolution
+]
+
+const check = {
+  input: 'src/lib/index.tsx',
+  output: { file: 'dist/widgets.tsc', inlineDynamicImports: true },
+  external: (source: string) => isAsset(source) || isEthers(source),
+  plugins: [
+    externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
+    ...plugins,
+    typescript({ tsconfig: TS_CONFIG }),
+  ],
+  onwarn: squelchTranspilationWarnings, // this pipeline is only for typechecking and generating definitions
+}
+
+const type = {
+  input: 'dist/dts/lib/index.d.ts',
+  output: { file: 'dist/index.d.ts' },
+  external: (source: string) => isAsset(source) || isEthers(source),
+  plugins: [
+    externals({ exclude: ['constants'], deps: true, peerDeps: true }),
+    dts({ compilerOptions: { baseUrl: 'dist/dts' } }),
+    process.env.ROLLUP_WATCH ? undefined : del({ hook: 'buildEnd', targets: ['dist/widgets.tsc', 'dist/dts'] }),
+  ],
+}
+
+/**
+ * This exports scheme works for nextjs and for CRA5.
+ *
+ * It will also work for CRA4 if you use direct imports:
+ *   instead of `import { SwapWidget } from '@uniswap/widgets'`,
+ *              `import { SwapWidget } from '@uniswap/widgets/dist/index.js'`.
+ * I do not know why CRA4 does not seem to use exports for resolution.
+ *
+ * Note that chunks are enabled. This is so the tokenlist spec can be loaded async,
+ * to improve first load time (due to ajv). Locales are also in separate chunks.
+ *
+ * Lastly, note that JSON and lingui are bundled into the library, as neither are fully
+ * supported/compatible with ES Modules. Both _could_ be bundled only with esm, but this
+ * yields a less complex pipeline.
+ */
+
+const transpile = {
   input: 'src/lib/index.tsx',
   output: [
     {
-      file: 'dist/widgets.js',
-      format: 'cjs',
-      inlineDynamicImports: true,
-      sourcemap: true,
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: false,
     },
     {
-      file: 'dist/widgets.esm.js',
-      format: 'esm',
-      inlineDynamicImports: true,
-      sourcemap: true,
+      dir: 'dist/cjs',
+      entryFileNames: '[name].cjs',
+      chunkFileNames: '[name]-[hash].cjs',
+      format: 'cjs',
+      sourcemap: false,
     },
   ],
-  // necessary because some nested imports (eg jotai/*) would otherwise not resolve.
-  external: (source: string) => Boolean(deps.find((dep) => source === dep || source.startsWith(dep + '/'))),
+  external: isEthers,
   plugins: [
-    eslint({ include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'] }),
-    json(), // imports json
-    replace({ ...replacements, preventAssignment: true }),
-    url(), // imports files (including svgs) as data URIs
+    externals({
+      exclude: [
+        'constants',
+        /@lingui\/(core|react)/, // @lingui incorrectly exports esm, so it must be bundled in
+        /\.json$/, // esm does not support JSON loading, so it must be bundled in
+      ],
+      deps: true,
+      peerDeps: true,
+    }),
+    ...plugins,
+
+    // Source code transformation
+    url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname), limit: Infinity }), // imports assets as data URIs
     svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass(), // imports sass styles
-    typescript({ tsconfig: './tsconfig.lib.json', useTsconfigDeclarationDir: true }),
+    sass({ output: 'dist/fonts.css' }), // generates fonts.css
+    commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
+
+    babel({
+      babelHelpers: 'runtime',
+      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
+      extensions: EXTENSIONS,
+      plugins: [
+        'macros', // enables @lingui and styled-components macros
+        '@babel/plugin-transform-runtime', // embeds the babel runtime for library distribution
+      ],
+    }),
+  ],
+  onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
+}
+
+const locales = {
+  input: 'src/locales/*.js',
+  output: [
+    {
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: false,
+    },
+  ],
+  plugins: [
+    copy({
+      copyOnce: true,
+      targets: [{ src: 'src/locales/*.js', dest: 'dist/cjs/locales', rename: (name) => `${name}.cjs` }],
+    }),
+    commonjs(),
+    multi(),
   ],
 }
 
-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 = [check, type, transpile, locales]
+export default config
+
+function squelchTranspilationWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
+  if (warning.pluginCode === 'TS5055') return
+  warn(warning)
 }
 
-const config = [library, typings]
-export default config
+function squelchTypeWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
+  if (warning.code === 'UNUSED_EXTERNAL_IMPORT') return
+  warn(warning)
+}

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/index.tsx

@@ -1,11 +1,11 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
+import { Connector } from '@web3-react/types'
 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'

src/components/Blocklist/index.tsx

@@ -31,6 +31,8 @@ const BLOCKED_ADDRESSES: string[] = [
   '0x6acdfba02d390b97ac2b2d42a63e85293bcc160e',
   '0x48549a34ae37b12f6a30566245176994e17c6b4a',
   '0x5512d943ed1f7c8a43f3435c85f7ab68b30121b0',
+  '0xc455f7fd3e0e12afd51fba5c106909934d8a0e4a',
+  '0x629e7Da20197a5429d30da36E77d06CdF796b71A',
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {

src/components/CurrencyLogo/index.tsx

@@ -1,60 +1,18 @@
 import { Currency } from '@uniswap/sdk-core'
-import EthereumLogo from 'assets/images/ethereum-logo.png'
-import MaticLogo from 'assets/svg/matic-token-icon.svg'
-import { SupportedChainId } from 'constants/chains'
-import useHttpLocations from 'hooks/useHttpLocations'
-import React, { useMemo } from 'react'
-import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
+import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
+import React from 'react'
 import styled from 'styled-components/macro'
 
 import Logo from '../Logo'
 
-type Network = 'ethereum' | 'arbitrum' | 'optimism'
-
-function chainIdToNetworkName(networkId: SupportedChainId): Network {
-  switch (networkId) {
-    case SupportedChainId.MAINNET:
-      return 'ethereum'
-    case SupportedChainId.ARBITRUM_ONE:
-      return 'arbitrum'
-    case SupportedChainId.OPTIMISM:
-      return 'optimism'
-    default:
-      return 'ethereum'
-  }
-}
-
-export const getTokenLogoURL = (
-  address: string,
-  chainId: SupportedChainId = SupportedChainId.MAINNET
-): string | void => {
-  const networkName = chainIdToNetworkName(chainId)
-  const networksWithUrls = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.MAINNET, SupportedChainId.OPTIMISM]
-  if (networksWithUrls.includes(chainId)) {
-    return `https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/${networkName}/assets/${address}/logo.png`
-  }
-}
-
-const StyledNativeLogo = styled.img<{ size: string }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
-
-  border-radius: 50%;
-  -mox-box-shadow: 0 0 1px white;
-  -webkit-box-shadow: 0 0 1px white;
-  box-shadow: 0 0 1px white;
-  border: 0px solid rgba(255, 255, 255, 0);
-`
-
-const StyledLogo = styled(Logo)<{ size: string }>`
+const StyledLogo = styled(Logo)<{ size: string; native: boolean }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
   border-radius: 50%;
-  -mox-box-shadow: 0 0 1px black;
-  -webkit-box-shadow: 0 0 1px black;
-  box-shadow: 0 0 1px black;
+  -mox-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
+  -webkit-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
+  box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
   border: 0px solid rgba(255, 255, 255, 0);
 `
 
@@ -68,38 +26,16 @@ export default function CurrencyLogo({
   size?: string
   style?: React.CSSProperties
 }) {
-  const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined)
+  const logoURIs = useCurrencyLogoURIs(currency)
 
-  const srcs: string[] = useMemo(() => {
-    if (!currency || currency.isNative) return []
-
-    if (currency.isToken) {
-      const defaultUrls = []
-      const url = getTokenLogoURL(currency.address, currency.chainId)
-      if (url) {
-        defaultUrls.push(url)
-      }
-      if (currency instanceof WrappedTokenInfo) {
-        return [...uriLocations, ...defaultUrls]
-      }
-      return defaultUrls
-    }
-    return []
-  }, [currency, uriLocations])
-
-  if (currency?.isNative) {
-    let nativeLogoUrl: string
-    switch (currency.chainId) {
-      case SupportedChainId.POLYGON_MUMBAI:
-      case SupportedChainId.POLYGON:
-        nativeLogoUrl = MaticLogo
-        break
-      default:
-        nativeLogoUrl = EthereumLogo
-        break
-    }
-    return <StyledNativeLogo src={nativeLogoUrl} alt="ethereum logo" size={size} style={style} {...rest} />
-  }
-
-  return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} {...rest} />
+  return (
+    <StyledLogo
+      size={size}
+      native={currency?.isNative ?? false}
+      srcs={logoURIs}
+      alt={`${currency?.symbol ?? 'token'} logo`}
+      style={style}
+      {...rest}
+    />
+  )
 }

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,11 @@ type ErrorBoundaryState = {
 
 const IS_UNISWAP = window.location.hostname === 'app.uniswap.org'
 
+async function updateServiceWorker(): Promise<void> {
+  const ready = await navigator.serviceWorker.ready
+  await ready.update()
+}
+
 export default class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
   constructor(props: unknown) {
     super(props)
@@ -56,15 +61,18 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
   }
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    updateServiceWorker()
+      .then(() => {
+        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/Header/NetworkSelector.tsx

@@ -1,14 +1,19 @@
 import { Trans } from '@lingui/macro'
 import { CHAIN_INFO } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
+import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { useCallback, useRef } from 'react'
+import useParsedQueryString from 'hooks/useParsedQueryString'
+import usePrevious from 'hooks/usePrevious'
+import { ParsedQs } from 'qs'
+import { useCallback, useEffect, useRef } from 'react'
 import { ArrowDownCircle, ChevronDown } from 'react-feather'
+import { useHistory } from 'react-router-dom'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
 import { addPopup, ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { replaceURLParam } from 'utils/routes'
 
 import { useAppDispatch } from '../../state/hooks'
 import { switchToNetwork } from '../../utils/switchToNetwork'
@@ -46,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),
@@ -56,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;
@@ -211,51 +219,112 @@ function Row({
   return rowContent
 }
 
+const getParsedChainId = (parsedQs?: ParsedQs) => {
+  const chain = parsedQs?.chain
+  if (!chain || typeof chain !== 'string') return { urlChain: undefined, urlChainId: undefined }
+
+  return { urlChain: chain.toLowerCase(), urlChainId: getChainIdFromName(chain) }
+}
+
+const getChainIdFromName = (name: string) => {
+  const entry = Object.entries(CHAIN_IDS_TO_NAMES).find(([_, n]) => n === name)
+  const chainId = entry?.[0]
+  return chainId ? parseInt(chainId) : undefined
+}
+
+const getChainNameFromId = (id: string | number) => {
+  // casting here may not be right but fine to return undefined if it's not a supported chain ID
+  return CHAIN_IDS_TO_NAMES[id as SupportedChainId] || ''
+}
+
 export default function NetworkSelector() {
   const { chainId, library } = useActiveWeb3React()
+  const parsedQs = useParsedQueryString()
+  const { urlChain, urlChainId } = getParsedChainId(parsedQs)
+  const prevChainId = usePrevious(chainId)
   const node = useRef<HTMLDivElement>()
   const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
   const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
   useOnClickOutside(node, open ? toggle : undefined)
 
+  const history = useHistory()
+
   const info = chainId ? CHAIN_INFO[chainId] : undefined
 
   const dispatch = useAppDispatch()
 
-  const handleRowClick = useCallback(
-    (targetChain: number) => {
-      if (!library) return
-      switchToNetwork({ library, chainId: targetChain })
-        .then(() => toggle())
+  const handleChainSwitch = useCallback(
+    (targetChain: number, skipToggle?: boolean) => {
+      if (!library?.provider) return
+      switchToNetwork({ provider: library.provider, chainId: targetChain })
+        .then(() => {
+          if (!skipToggle) {
+            toggle()
+          }
+          history.replace({
+            search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(targetChain)),
+          })
+        })
         .catch((error) => {
           console.error('Failed to switch networks', error)
-          toggle()
+
+          // we want app network <-> chainId param to be in sync, so if user changes the network by changing the URL
+          // but the request fails, revert the URL back to current chainId
+          if (chainId) {
+            history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
+          }
+
+          if (!skipToggle) {
+            toggle()
+          }
+
           dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
         })
     },
-    [dispatch, library, toggle]
+    [dispatch, library, toggle, history, chainId]
   )
 
+  useEffect(() => {
+    if (!chainId || !prevChainId) return
+
+    // when network change originates from wallet or dropdown selector, just update URL
+    if (chainId !== prevChainId) {
+      history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
+      // otherwise assume network change originates from URL
+    } else if (urlChainId && urlChainId !== chainId) {
+      handleChainSwitch(urlChainId, true)
+    }
+  }, [chainId, urlChainId, prevChainId, handleChainSwitch, history])
+
+  // set chain parameter on initial load if not there
+  useEffect(() => {
+    if (chainId && !urlChainId) {
+      history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
+    }
+  }, [chainId, history, urlChainId, urlChain])
+
   if (!chainId || !info || !library) {
     return null
   }
 
   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={handleRowClick} targetChain={SupportedChainId.MAINNET} />
-          <Row onSelectChain={handleRowClick} targetChain={SupportedChainId.POLYGON} />
-          <Row onSelectChain={handleRowClick} targetChain={SupportedChainId.OPTIMISM} />
-          <Row onSelectChain={handleRowClick} 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,5 +1,5 @@
-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'

src/components/LiquidityChartRangeInput/hooks.ts

@@ -1,16 +1,10 @@
 import { Currency } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { usePoolActiveLiquidity } from 'hooks/usePoolTickData'
-import JSBI from 'jsbi'
+import { TickProcessed, usePoolActiveLiquidity } from 'hooks/usePoolTickData'
 import { useCallback, useMemo } from 'react'
 
 import { ChartEntry } from './types'
 
-export interface TickProcessed {
-  liquidityActive: JSBI
-  price0: string
-}
-
 export function useDensityChartData({
   currencyA,
   currencyB,

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

@@ -4,22 +4,22 @@ import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 
 import { useActivePopups } from '../../state/application/hooks'
-import { useShowSurveyPopup, useURLWarningVisible } from '../../state/user/hooks'
+import { useURLWarningVisible } from '../../state/user/hooks'
 import { AutoColumn } from '../Column'
 import ClaimPopup from './ClaimPopup'
 import PopupItem from './PopupItem'
-import SurveyPopup from './SurveyPopup'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;
   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;
   `};
 `
 
@@ -60,9 +60,6 @@ export default function Popups() {
   // get all popups
   const activePopups = useActivePopups()
 
-  // show survey popup if user has not closed
-  const [showSurveyPopup] = useShowSurveyPopup()
-
   const urlWarningActive = useURLWarningVisible()
 
   // need extra padding if network is not L1 Ethereum
@@ -73,14 +70,12 @@ export default function Popups() {
     <>
       <FixedPopupColumn gap="20px" extraPadding={urlWarningActive} xlPadding={isNotOnMainnet}>
         <ClaimPopup />
-        <SurveyPopup />
         {activePopups.map((item) => (
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
         ))}
       </FixedPopupColumn>
-      <MobilePopupWrapper height={activePopups?.length > 0 || showSurveyPopup ? 'fit-content' : 0}>
+      <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
         <MobilePopupInner>
-          <SurveyPopup />
           {activePopups // reverse so new items up front
             .slice(0)
             .reverse()

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'

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,12 +1,12 @@
 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 { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
+import { RoutingDiagramEntry } from 'lib/components/Swap/RoutingDiagram/utils'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
 import { ThemedText, Z_INDEX } from 'theme'
@@ -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/CurrencySearch.tsx

@@ -6,24 +6,19 @@ import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import useToggle from 'hooks/useToggle'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 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'
 import { useAllTokenBalances } from 'state/wallet/hooks'
 import styled from 'styled-components/macro'
 
-import {
-  useAllTokens,
-  useIsUserAddedToken,
-  useNativeCurrency,
-  useSearchInactiveTokenLists,
-  useToken,
-} from '../../hooks/Tokens'
+import { useAllTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
 import { ButtonText, CloseIcon, IconWrapper, ThemedText } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'

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'

src/components/Settings/index.tsx

@@ -2,11 +2,11 @@
 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'
 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 { AUTO_ROUTER_SUPPORTED_CHAINS } from 'state/routing/clientSideSmartOrderRouter/constants'
 import styled, { ThemeContext } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'

src/components/WalletModal/PendingView.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
 import { darken } from 'polished'
 import styled from 'styled-components/macro'
+import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import { injected } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'

src/components/WalletModal/index.tsx

@@ -1,15 +1,15 @@
 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 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 { ReactComponent as Close } from '../../assets/images/x.svg'

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,12 +1,12 @@
 // 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'

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,10 +1,11 @@
 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'
@@ -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,14 +1,15 @@
 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'
+import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit'
 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 { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
+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'
@@ -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,10 +1,11 @@
 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'
@@ -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/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/ConfirmSwapModal.tsx

@@ -3,6 +3,7 @@ import { Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
 import TransactionConfirmationModal, {
   ConfirmationModalContent,
@@ -11,23 +12,6 @@ import TransactionConfirmationModal, {
 import SwapModalFooter from './SwapModalFooter'
 import SwapModalHeader from './SwapModalHeader'
 
-/**
- * Returns true if the trade requires a confirmation of details before we can submit it
- * @param args either a pair of V2 trades or a pair of V3 trades
- */
-function tradeMeaningfullyDiffers(
-  ...args: [Trade<Currency, Currency, TradeType>, Trade<Currency, Currency, TradeType>]
-): boolean {
-  const [tradeA, tradeB] = args
-  return (
-    tradeA.tradeType !== tradeB.tradeType ||
-    !tradeA.inputAmount.currency.equals(tradeB.inputAmount.currency) ||
-    !tradeA.inputAmount.equalTo(tradeB.inputAmount) ||
-    !tradeA.outputAmount.currency.equals(tradeB.outputAmount.currency) ||
-    !tradeA.outputAmount.equalTo(tradeB.outputAmount)
-  )
-}
-
 export default function ConfirmSwapModal({
   trade,
   originalTrade,

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/SwapRoute.tsx

@@ -1,15 +1,14 @@
 import { Trans } from '@lingui/macro'
-import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import { Pair } from '@uniswap/v2-sdk'
+import { Currency, TradeType } from '@uniswap/sdk-core'
 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'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
+import { getTokenPath } from 'lib/components/Swap/RoutingDiagram/utils'
 import { memo, useState } from 'react'
 import { Plus } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -39,8 +38,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
@@ -109,35 +106,3 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     </Wrapper>
   )
 })
-
-function getTokenPath(trade: Trade<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,
-      protocol,
-    }
-  })
-}

src/components/swap/TradePrice.tsx

@@ -16,7 +16,7 @@ const StyledPriceContainer = styled.button`
   background-color: transparent;
   border: none;
   cursor: pointer;
-  align-items: center
+  align-items: center;
   justify-content: flex-start;
   padding: 0;
   grid-template-columns: 1fr auto;

src/components/vote/ProposalEmptyState.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { L2_CHAIN_IDS } from 'constants/chains'
+import { SupportedChainId } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
@@ -38,7 +38,7 @@ const EmptyState = ({ HeaderContent, SubHeaderContent }: EmptyStateProps) => (
 
 export default function ProposalEmptyState() {
   const { chainId } = useActiveWeb3React()
-  if (chainId && L2_CHAIN_IDS.includes(chainId)) {
+  if (chainId && chainId !== SupportedChainId.MAINNET) {
     return (
       <EmptyState
         HeaderContent={() => <Trans>Please connect to Layer 1 Ethereum</Trans>}

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,11 @@
 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 { PortisConnector } from 'web3-react-portis-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'
@@ -53,5 +53,5 @@ export const walletlink = new WalletLinkConnector({
   url: INFURA_NETWORK_URLS[SupportedChainId.MAINNET],
   appName: 'Uniswap',
   appLogoUrl: UNISWAP_LOGO_URL,
-  supportedChainIds: [SupportedChainId.MAINNET, SupportedChainId.POLYGON],
+  supportedChainIds: ALL_SUPPORTED_CHAIN_IDS,
 })

src/constants/addresses.ts

@@ -107,3 +107,8 @@ export const V3_MIGRATOR_ADDRESSES: AddressMap = constructSameAddressMap('0xA564
   SupportedChainId.POLYGON_MUMBAI,
   SupportedChainId.POLYGON,
 ])
+
+export const TICK_LENS_ADDRESSES: AddressMap = {
+  [SupportedChainId.ARBITRUM_ONE]: '0xbfd8137f7d1516D3ea5cA83523914859ec47F573',
+  [SupportedChainId.ARBITRUM_RINKEBY]: '0xbfd8137f7d1516D3ea5cA83523914859ec47F573',
+}

src/constants/chainInfo.ts

@@ -7,40 +7,6 @@ import ms from 'ms.macro'
 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,10 +89,7 @@ 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,
@@ -148,10 +103,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: 'Ether', symbol: 'ETH', decimals: 18 },
-      rpcUrl: 'https://mainnet.optimism.io',
-    },
+    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   },
   [SupportedChainId.OPTIMISTIC_KOVAN]: {
     networkType: NetworkType.L2,
@@ -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

@@ -18,6 +18,20 @@ export enum SupportedChainId {
   POLYGON_MUMBAI = 80001,
 }
 
+export const CHAIN_IDS_TO_NAMES = {
+  [SupportedChainId.MAINNET]: 'mainnet',
+  [SupportedChainId.ROPSTEN]: 'ropsten',
+  [SupportedChainId.RINKEBY]: 'rinkeby',
+  [SupportedChainId.GOERLI]: 'goerli',
+  [SupportedChainId.KOVAN]: 'kovan',
+  [SupportedChainId.POLYGON]: 'polygon',
+  [SupportedChainId.POLYGON_MUMBAI]: 'polygon_mumbai',
+  [SupportedChainId.ARBITRUM_ONE]: 'arbitrum',
+  [SupportedChainId.ARBITRUM_RINKEBY]: 'arbitrum_rinkeby',
+  [SupportedChainId.OPTIMISM]: 'optimism',
+  [SupportedChainId.OPTIMISTIC_KOVAN]: 'optimistic_kovan',
+}
+
 /**
  * Array of all the supported chain IDs
  */
@@ -25,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

@@ -12,6 +12,8 @@ export const COMMON_CONTRACT_NAMES: Record<number, { [address: string]: string }
     [TIMELOCK_ADDRESS[SupportedChainId.MAINNET]]: 'Timelock',
     [GOVERNANCE_ALPHA_V0_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance (V0)',
     [GOVERNANCE_ALPHA_V1_ADDRESSES[SupportedChainId.MAINNET]]: 'Governance',
+    '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e': 'ENS Registry',
+    '0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41': 'ENS Public Resolver',
   },
 }
 
@@ -21,3 +23,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/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,4 +1,4 @@
-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'

src/hooks/Tokens.ts

@@ -1,20 +1,15 @@
-import { arrayify } from '@ethersproject/bytes'
-import { parseBytes32String } from '@ethersproject/strings'
 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 { NEVER_RELOAD, useSingleCallResult } from 'lib/hooks/multicall'
+import { useCurrencyFromMap, useTokenFromMapOrNetwork } from 'lib/hooks/useCurrency'
 import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
 import { useMemo } from 'react'
 
-import { nativeOnChain } from '../constants/tokens'
 import { useAllLists, useCombinedActiveList, useInactiveListUrls } from '../state/lists/hooks'
 import { WrappedTokenInfo } from '../state/lists/wrappedTokenInfo'
 import { useUserAddedTokens } from '../state/user/hooks'
-import { isAddress } from '../utils'
 import { TokenAddressMap, useUnsupportedTokenList } from './../state/lists/hooks'
-import { useBytes32TokenContract, useTokenContract } from './useContract'
 
 // reduce token map into standard address <-> Token mapping, optionally include user added tokens
 function useTokensFromMap(tokenMap: TokenAddressMap, includeUserAdded: boolean): { [address: string]: Token } {
@@ -159,95 +154,15 @@ export function useIsUserAddedToken(currency: Currency | undefined | null): bool
   return !!userAddedTokens.find((token) => currency.equals(token))
 }
 
-// parse a name or symbol from a token response
-const BYTES32_REGEX = /^0x[a-fA-F0-9]{64}$/
-
-function parseStringOrBytes32(str: string | undefined, bytes32: string | undefined, defaultValue: string): string {
-  return str && str.length > 0
-    ? str
-    : // need to check for proper bytes string and valid terminator
-    bytes32 && BYTES32_REGEX.test(bytes32) && arrayify(bytes32)[31] === 0
-    ? parseBytes32String(bytes32)
-    : defaultValue
-}
-
 // undefined if invalid or does not exist
 // null if loading or null was passed
 // otherwise returns the token
-export function useToken(tokenAddress?: string | null): Token | undefined | null {
-  const { chainId } = useActiveWeb3React()
+export function useToken(tokenAddress?: string | null): Token | null | undefined {
   const tokens = useAllTokens()
-
-  const address = isAddress(tokenAddress)
-
-  const tokenContract = useTokenContract(address ? address : undefined, false)
-  const tokenContractBytes32 = useBytes32TokenContract(address ? address : undefined, false)
-  const token: Token | undefined = address ? tokens[address] : undefined
-
-  const tokenName = useSingleCallResult(token ? undefined : tokenContract, 'name', undefined, NEVER_RELOAD)
-  const tokenNameBytes32 = useSingleCallResult(
-    token ? undefined : tokenContractBytes32,
-    'name',
-    undefined,
-    NEVER_RELOAD
-  )
-  const symbol = useSingleCallResult(token ? undefined : tokenContract, 'symbol', undefined, NEVER_RELOAD)
-  const symbolBytes32 = useSingleCallResult(token ? undefined : tokenContractBytes32, 'symbol', undefined, NEVER_RELOAD)
-  const decimals = useSingleCallResult(token ? undefined : tokenContract, 'decimals', undefined, NEVER_RELOAD)
-
-  return useMemo(() => {
-    if (token) return token
-    if (tokenAddress === null) return null
-    if (!chainId || !address) return undefined
-    if (decimals.loading || symbol.loading || tokenName.loading) return null
-    if (decimals.result) {
-      return new Token(
-        chainId,
-        address,
-        decimals.result[0],
-        parseStringOrBytes32(symbol.result?.[0], symbolBytes32.result?.[0], 'UNKNOWN'),
-        parseStringOrBytes32(tokenName.result?.[0], tokenNameBytes32.result?.[0], 'Unknown Token')
-      )
-    }
-    return undefined
-  }, [
-    address,
-    chainId,
-    decimals.loading,
-    decimals.result,
-    symbol.loading,
-    symbol.result,
-    symbolBytes32.result,
-    token,
-    tokenAddress,
-    tokenName.loading,
-    tokenName.result,
-    tokenNameBytes32.result,
-  ])
+  return useTokenFromMapOrNetwork(tokens, tokenAddress)
 }
 
-export function useNativeCurrency(): Currency {
-  const { chainId } = useActiveWeb3React()
-  return useMemo(
-    () =>
-      chainId
-        ? nativeOnChain(chainId)
-        : // display mainnet when not connected
-          nativeOnChain(SupportedChainId.MAINNET),
-    [chainId]
-  )
-}
-
-export function useCurrency(currencyId: string | null | undefined): Currency | null | undefined {
-  const nativeCurrency = useNativeCurrency()
-  const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH')
-  const token = useToken(isNative ? undefined : currencyId)
-
-  if (currencyId === null || currencyId === undefined) return currencyId
-
-  // this case so we use our builtin wrapped token instead of wrapped tokens on token lists
-  const wrappedNative = nativeCurrency?.wrapped
-  if (wrappedNative?.address?.toUpperCase() === currencyId?.toUpperCase()) return wrappedNative
-
-  return isNative ? nativeCurrency : token
+export function useCurrency(currencyId?: string | null): Currency | null | undefined {
+  const tokens = useAllTokens()
+  return useCurrencyFromMap(tokens, currencyId)
 }

src/hooks/useActiveWeb3React.ts

@@ -1,19 +1,20 @@
+/* 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() {
-  const widgetsContext = useWidgetsWeb3React()
+  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
   )
 
-  if (process.env.REACT_APP_IS_WIDGET) {
-    return widgetsContext
-  }
   if (interfaceContext.active) {
     return interfaceContext
   }

src/hooks/useAddTokenToMetamask.ts

@@ -1,9 +1,8 @@
 import { Currency, Token } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
 import { useCallback, useState } from 'react'
 
-import { getTokenLogoURL } from './../components/CurrencyLogo/index'
-
 export default function useAddTokenToMetamask(currencyToAdd: Currency | undefined): {
   addToken: () => void
   success: boolean | undefined
@@ -13,9 +12,10 @@ export default function useAddTokenToMetamask(currencyToAdd: Currency | undefine
   const token: Token | undefined = currencyToAdd?.wrapped
 
   const [success, setSuccess] = useState<boolean | undefined>()
+  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',
@@ -26,7 +26,7 @@ export default function useAddTokenToMetamask(currencyToAdd: Currency | undefine
               address: token.address,
               symbol: token.symbol,
               decimals: token.decimals,
-              image: getTokenLogoURL(token.address),
+              image: logoURL,
             },
           },
         })
@@ -37,7 +37,7 @@ export default function useAddTokenToMetamask(currencyToAdd: Currency | undefine
     } else {
       setSuccess(false)
     }
-  }, [library, token])
+  }, [library, logoURL, token])
 
   return { addToken, success }
 }

src/hooks/useApproveCallback.ts

@@ -1,69 +1,25 @@
-import { MaxUint256 } from '@ethersproject/constants'
-import { TransactionResponse } from '@ethersproject/providers'
-import { Protocol, Trade } from '@uniswap/router-sdk'
+import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
-import { Pair, Route as V2Route, Trade as V2Trade } from '@uniswap/v2-sdk'
-import { Pool, Route as V3Route, Trade as V3Trade } from '@uniswap/v3-sdk'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useCallback, useMemo } from 'react'
-import { getTxOptimizedSwapRouter, SwapRouterVersion } from 'utils/getTxOptimizedSwapRouter'
+import { Trade as V2Trade } from '@uniswap/v2-sdk'
+import { Trade as V3Trade } from '@uniswap/v3-sdk'
+import useSwapApproval, { useSwapApprovalOptimizedTrade } from 'lib/hooks/swap/useSwapApproval'
+import { ApprovalState, useApproval } from 'lib/hooks/useApproval'
+import { useCallback } from 'react'
 
-import { SWAP_ROUTER_ADDRESSES, V2_ROUTER_ADDRESS, V3_ROUTER_ADDRESS } from '../constants/addresses'
 import { TransactionType } from '../state/transactions/actions'
 import { useHasPendingApproval, useTransactionAdder } from '../state/transactions/hooks'
-import { calculateGasMargin } from '../utils/calculateGasMargin'
-import { useTokenContract } from './useContract'
-import { useTokenAllowance } from './useTokenAllowance'
+export { ApprovalState } from 'lib/hooks/useApproval'
 
-export enum ApprovalState {
-  UNKNOWN = 'UNKNOWN',
-  NOT_APPROVED = 'NOT_APPROVED',
-  PENDING = 'PENDING',
-  APPROVED = 'APPROVED',
-}
-
-export function useApprovalState(amountToApprove?: CurrencyAmount<Currency>, spender?: string) {
-  const { account } = useActiveWeb3React()
-  const token = amountToApprove?.currency?.isToken ? amountToApprove.currency : undefined
-
-  const currentAllowance = useTokenAllowance(token, account ?? undefined, spender)
-  const pendingApproval = useHasPendingApproval(token?.address, spender)
-
-  return useMemo(() => {
-    if (!amountToApprove || !spender) return ApprovalState.UNKNOWN
-    if (amountToApprove.currency.isNative) return ApprovalState.APPROVED
-    // we might not have enough data to know whether or not we need to approve
-    if (!currentAllowance) return ApprovalState.UNKNOWN
-
-    // amountToApprove will be defined if currentAllowance is
-    return currentAllowance.lessThan(amountToApprove)
-      ? pendingApproval
-        ? ApprovalState.PENDING
-        : ApprovalState.NOT_APPROVED
-      : ApprovalState.APPROVED
-  }, [amountToApprove, currentAllowance, pendingApproval, spender])
-}
-
-/** Returns approval state for all known swap routers */
-export function useAllApprovalStates(
-  trade: Trade<Currency, Currency, TradeType> | undefined,
-  allowedSlippage: Percent
-) {
-  const { chainId } = useActiveWeb3React()
-
-  const amountToApprove = useMemo(
-    () => (trade && trade.inputAmount.currency.isToken ? trade.maximumAmountIn(allowedSlippage) : undefined),
-    [trade, allowedSlippage]
-  )
-
-  const v2ApprovalState = useApprovalState(amountToApprove, chainId ? V2_ROUTER_ADDRESS[chainId] : undefined)
-  const v3ApprovalState = useApprovalState(amountToApprove, chainId ? V3_ROUTER_ADDRESS[chainId] : undefined)
-  const v2V3ApprovalState = useApprovalState(amountToApprove, chainId ? SWAP_ROUTER_ADDRESSES[chainId] : undefined)
-
-  return useMemo(
-    () => ({ v2: v2ApprovalState, v3: v3ApprovalState, v2V3: v2V3ApprovalState }),
-    [v2ApprovalState, v2V3ApprovalState, v3ApprovalState]
-  )
+function useGetAndTrackApproval(getApproval: ReturnType<typeof useApproval>[1]) {
+  const addTransaction = useTransactionAdder()
+  return useCallback(() => {
+    return getApproval().then((pending) => {
+      if (pending) {
+        const { response, tokenAddress, spenderAddress: spender } = pending
+        addTransaction(response, { type: TransactionType.APPROVAL, tokenAddress, spender })
+      }
+    })
+  }, [addTransaction, getApproval])
 }
 
 // returns a variable indicating the state of the approval and a function which approves if necessary or early returns
@@ -71,69 +27,17 @@ export function useApproveCallback(
   amountToApprove?: CurrencyAmount<Currency>,
   spender?: string
 ): [ApprovalState, () => Promise<void>] {
-  const { chainId } = useActiveWeb3React()
-  const token = amountToApprove?.currency?.isToken ? amountToApprove.currency : undefined
-
-  // check the current approval status
-  const approvalState = useApprovalState(amountToApprove, spender)
-
-  const tokenContract = useTokenContract(token?.address)
-  const addTransaction = useTransactionAdder()
-
-  const approve = useCallback(async (): Promise<void> => {
-    if (approvalState !== ApprovalState.NOT_APPROVED) {
-      console.error('approve was called unnecessarily')
-      return
-    }
-    if (!chainId) {
-      console.error('no chainId')
-      return
-    }
-
-    if (!token) {
-      console.error('no token')
-      return
-    }
-
-    if (!tokenContract) {
-      console.error('tokenContract is null')
-      return
-    }
-
-    if (!amountToApprove) {
-      console.error('missing amount to approve')
-      return
-    }
-
-    if (!spender) {
-      console.error('no spender')
-      return
-    }
-
-    let useExact = false
-    const estimatedGas = await tokenContract.estimateGas.approve(spender, MaxUint256).catch(() => {
-      // general fallback for tokens who restrict approval amounts
-      useExact = true
-      return tokenContract.estimateGas.approve(spender, amountToApprove.quotient.toString())
-    })
-
-    return tokenContract
-      .approve(spender, useExact ? amountToApprove.quotient.toString() : MaxUint256, {
-        gasLimit: calculateGasMargin(estimatedGas),
-      })
-      .then((response: TransactionResponse) => {
-        addTransaction(response, { type: TransactionType.APPROVAL, tokenAddress: token.address, spender })
-      })
-      .catch((error: Error) => {
-        console.debug('Failed to approve token', error)
-        throw error
-      })
-  }, [approvalState, token, tokenContract, amountToApprove, spender, addTransaction, chainId])
-
-  return [approvalState, approve]
+  const [approval, getApproval] = useApproval(amountToApprove, spender, useHasPendingApproval)
+  return [approval, useGetAndTrackApproval(getApproval)]
+}
+
+export function useApprovalOptimizedTrade(
+  trade: Trade<Currency, Currency, TradeType> | undefined,
+  allowedSlippage: Percent
+) {
+  return useSwapApprovalOptimizedTrade(trade, allowedSlippage, useHasPendingApproval)
 }
 
-// wraps useApproveCallback in the context of a swap
 export function useApproveCallbackFromTrade(
   trade:
     | V2Trade<Currency, Currency, TradeType>
@@ -141,85 +45,7 @@ export function useApproveCallbackFromTrade(
     | Trade<Currency, Currency, TradeType>
     | undefined,
   allowedSlippage: Percent
-) {
-  const { chainId } = useActiveWeb3React()
-  const amountToApprove = useMemo(
-    () => (trade && trade.inputAmount.currency.isToken ? trade.maximumAmountIn(allowedSlippage) : undefined),
-    [trade, allowedSlippage]
-  )
-
-  const approveCallback = useApproveCallback(
-    amountToApprove,
-    chainId
-      ? trade instanceof V2Trade
-        ? V2_ROUTER_ADDRESS[chainId]
-        : trade instanceof V3Trade
-        ? V3_ROUTER_ADDRESS[chainId]
-        : SWAP_ROUTER_ADDRESSES[chainId]
-      : undefined
-  )
-
-  // TODO: remove L162-168 after testing is done. This error will help detect mistakes in the logic.
-  if (
-    (Trade instanceof V2Trade && approveCallback[0] !== ApprovalState.APPROVED) ||
-    (trade instanceof V3Trade && approveCallback[0] !== ApprovalState.APPROVED)
-  ) {
-    throw new Error('Trying to approve legacy router')
-  }
-
-  return approveCallback
-}
-
-export function useApprovalOptimizedTrade(
-  trade: Trade<Currency, Currency, TradeType> | undefined,
-  allowedSlippage: Percent
-):
-  | V2Trade<Currency, Currency, TradeType>
-  | V3Trade<Currency, Currency, TradeType>
-  | Trade<Currency, Currency, TradeType>
-  | undefined {
-  const onlyV2Routes = trade?.routes.every((route) => route.protocol === Protocol.V2)
-  const onlyV3Routes = trade?.routes.every((route) => route.protocol === Protocol.V3)
-  const tradeHasSplits = (trade?.routes.length ?? 0) > 1
-
-  const approvalStates = useAllApprovalStates(trade, allowedSlippage)
-
-  const optimizedSwapRouter = useMemo(
-    () => getTxOptimizedSwapRouter({ onlyV2Routes, onlyV3Routes, tradeHasSplits, approvalStates }),
-    [approvalStates, tradeHasSplits, onlyV2Routes, onlyV3Routes]
-  )
-
-  return useMemo(() => {
-    if (!trade) return undefined
-
-    try {
-      switch (optimizedSwapRouter) {
-        case SwapRouterVersion.V2V3:
-          return trade
-        case SwapRouterVersion.V2:
-          const pairs = trade.swaps[0].route.pools.filter((pool) => pool instanceof Pair) as Pair[]
-          const v2Route = new V2Route(pairs, trade.inputAmount.currency, trade.outputAmount.currency)
-          return new V2Trade(v2Route, trade.inputAmount, trade.tradeType)
-        case SwapRouterVersion.V3:
-          return V3Trade.createUncheckedTradeWithMultipleRoutes({
-            routes: trade.swaps.map(({ route, inputAmount, outputAmount }) => ({
-              route: new V3Route(
-                route.pools.filter((p) => p instanceof Pool) as Pool[],
-                inputAmount.currency,
-                outputAmount.currency
-              ),
-              inputAmount,
-              outputAmount,
-            })),
-            tradeType: trade.tradeType,
-          })
-        default:
-          return undefined
-      }
-    } catch (e) {
-      // TODO(#2989): remove try-catch
-      console.debug(e)
-      return undefined
-    }
-  }, [trade, optimizedSwapRouter])
+): [ApprovalState, () => Promise<void>] {
+  const [approval, getApproval] = useSwapApproval(trade, allowedSlippage, useHasPendingApproval)
+  return [approval, useGetAndTrackApproval(getApproval)]
 }

src/hooks/useAutoRouterSupported.tsx

@@ -1,5 +1,5 @@
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'state/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

@@ -4,11 +4,10 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import JSBI from 'jsbi'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 
-import { useUserSlippageToleranceWithDefault } from '../state/user/hooks'
-import { useNativeCurrency } from './Tokens'
 import useGasPrice from './useGasPrice'
 import useUSDCPrice, { useUSDCValue } from './useUSDCPrice'
 
@@ -29,7 +28,10 @@ function guesstimateGas(trade: Trade<Currency, Currency, TradeType> | undefined)
 const MIN_AUTO_SLIPPAGE_TOLERANCE = new Percent(5, 1000) // 0.5%
 const MAX_AUTO_SLIPPAGE_TOLERANCE = new Percent(25, 100) // 25%
 
-export default function useSwapSlippageTolerance(
+/**
+ * Returns slippage tolerance based on values from current trade, gas estimates from api, and active network.
+ */
+export default function useAutoSlippageTolerance(
   trade: InterfaceTrade<Currency, Currency, TradeType> | undefined
 ): Percent {
   const { chainId } = useActiveWeb3React()
@@ -41,7 +43,7 @@ export default function useSwapSlippageTolerance(
   const nativeCurrency = useNativeCurrency()
   const nativeCurrencyPrice = useUSDCPrice(nativeCurrency ?? undefined)
 
-  const defaultSlippageTolerance = useMemo(() => {
+  return useMemo(() => {
     if (!trade || onL2) return ONE_TENTHS_PERCENT
 
     const nativeGasCost =
@@ -73,6 +75,4 @@ export default function useSwapSlippageTolerance(
 
     return V3_SWAP_DEFAULT_SLIPPAGE
   }, [trade, onL2, nativeGasPrice, gasEstimate, nativeCurrency, nativeCurrencyPrice, chainId, outputDollarValue])
-
-  return useUserSlippageToleranceWithDefault(defaultSlippageTolerance)
 }

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

@@ -1,4 +1,5 @@
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
+import { useMemo } from 'react'
 import { InterfaceTrade, TradeState } from 'state/routing/types'
 import { useRoutingAPITrade } from 'state/routing/useRoutingAPITrade'
 
@@ -24,7 +25,10 @@ export function useBestTrade(
   const autoRouterSupported = useAutoRouterSupported()
   const isWindowVisible = useIsWindowVisible()
 
-  const [debouncedAmount, debouncedOtherCurrency] = useDebounce([amountSpecified, otherCurrency], 200)
+  const [debouncedAmount, debouncedOtherCurrency] = useDebounce(
+    useMemo(() => [amountSpecified, otherCurrency], [amountSpecified, otherCurrency]),
+    200
+  )
 
   const routingAPITrade = useRoutingAPITrade(
     tradeType,
@@ -32,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(
@@ -56,9 +47,11 @@ export function useBestTrade(
   )
 
   // only return gas estimate from api if routing api trade is used
-  return {
-    ...(useFallback ? bestV3Trade : routingAPITrade),
-    ...(debouncing ? { state: TradeState.SYNCING } : {}),
-    ...(isLoading ? { state: TradeState.LOADING } : {}),
-  }
+  return useMemo(
+    () => ({
+      ...(useFallback ? bestV3Trade : routingAPITrade),
+      ...(isLoading ? { state: TradeState.LOADING } : {}),
+    }),
+    [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,7 +1,7 @@
 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 { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'

src/hooks/useContract.ts

@@ -1,14 +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 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'
@@ -17,30 +14,34 @@ 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,
+  TICK_LENS_ADDRESSES,
   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, UniswapInterfaceMulticall } from 'types/v3'
+import { NonfungiblePositionManager, Quoter, TickLens, UniswapInterfaceMulticall } from 'types/v3'
 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,
@@ -121,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,
@@ -159,3 +133,9 @@ export function useV3NFTPositionManagerContract(withSignerIfPossible?: boolean):
 export function useV3Quoter() {
   return useContract<Quoter>(QUOTER_ADDRESSES, QuoterABI)
 }
+
+export function useTickLens(): TickLens | null {
+  const { chainId } = useActiveWeb3React()
+  const address = chainId ? TICK_LENS_ADDRESSES[chainId] : undefined
+  return useContract(address, TickLensABI) as TickLens | null
+}

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])
 }

src/hooks/useDebounce.ts

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react'
 
+/**
+ * Debounces updates to a value.
+ * Non-primitives *must* wrap the value in useMemo, or the value will be updated due to referential inequality.
+ */
 // modified from https://usehooks.com/useDebounce/
 export default function useDebounce<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)

src/hooks/useERC20Permit.ts

@@ -1,6 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { splitSignature } from '@ethersproject/bytes'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
@@ -9,12 +10,11 @@ import { useSingleCallResult } from 'lib/hooks/multicall'
 import { useMemo, useState } from 'react'
 
 import { SWAP_ROUTER_ADDRESSES, V3_ROUTER_ADDRESS } from '../constants/addresses'
-import { DAI, UNI, USDC } from '../constants/tokens'
+import { DAI, UNI, USDC_MAINNET } from '../constants/tokens'
 import { useEIP2612Contract } from './useContract'
 import useIsArgentWallet from './useIsArgentWallet'
-import useTransactionDeadline from './useTransactionDeadline'
 
-enum PermitType {
+export enum PermitType {
   AMOUNT = 1,
   ALLOWED = 2,
 }
@@ -22,7 +22,7 @@ enum PermitType {
 // 20 minutes to submit after signing
 const PERMIT_VALIDITY_BUFFER = 20 * 60
 
-interface PermitInfo {
+export interface PermitInfo {
   type: PermitType
   name: string
   // version is optional, and if omitted, will not be included in the domain
@@ -36,7 +36,7 @@ const PERMITTABLE_TOKENS: {
   }
 } = {
   1: {
-    [USDC.address]: { type: PermitType.AMOUNT, name: 'USD Coin', version: '2' },
+    [USDC_MAINNET.address]: { type: PermitType.AMOUNT, name: 'USD Coin', version: '2' },
     [DAI.address]: { type: PermitType.ALLOWED, name: 'Dai Stablecoin', version: '1' },
     [UNI[1].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
   },
@@ -116,9 +116,10 @@ const PERMIT_ALLOWED_TYPE = [
   { name: 'allowed', type: 'bool' },
 ]
 
-function useERC20Permit(
+export function useERC20Permit(
   currencyAmount: CurrencyAmount<Currency> | null | undefined,
   spender: string | null | undefined,
+  transactionDeadline: BigNumber | undefined,
   overridePermitInfo: PermitInfo | undefined | null
 ): {
   signatureData: SignatureData | null
@@ -126,7 +127,6 @@ function useERC20Permit(
   gatherPermitSignature: null | (() => Promise<void>)
 } {
   const { account, chainId, library } = useActiveWeb3React()
-  const transactionDeadline = useTransactionDeadline()
   const tokenAddress = currencyAmount?.currency?.isToken ? currencyAmount.currency.address : undefined
   const eip2612Contract = useEIP2612Contract(tokenAddress)
   const isArgentWallet = useIsArgentWallet()
@@ -259,26 +259,14 @@ function useERC20Permit(
   ])
 }
 
-const REMOVE_V2_LIQUIDITY_PERMIT_INFO: PermitInfo = {
-  version: '1',
-  name: 'Uniswap V2',
-  type: PermitType.AMOUNT,
-}
-
-export function useV2LiquidityTokenPermit(
-  liquidityAmount: CurrencyAmount<Token> | null | undefined,
-  spender: string | null | undefined
-) {
-  return useERC20Permit(liquidityAmount, spender, REMOVE_V2_LIQUIDITY_PERMIT_INFO)
-}
-
 export function useERC20PermitFromTrade(
   trade:
     | V2Trade<Currency, Currency, TradeType>
     | V3Trade<Currency, Currency, TradeType>
     | Trade<Currency, Currency, TradeType>
     | undefined,
-  allowedSlippage: Percent
+  allowedSlippage: Percent,
+  transactionDeadline: BigNumber | undefined
 ) {
   const { chainId } = useActiveWeb3React()
   const swapRouterAddress = chainId
@@ -294,5 +282,5 @@ export function useERC20PermitFromTrade(
     [trade, allowedSlippage]
   )
 
-  return useERC20Permit(amountToApprove, swapRouterAddress, null)
+  return useERC20Permit(amountToApprove, swapRouterAddress, transactionDeadline, null)
 }

src/hooks/useFeeTierDistribution.ts

@@ -4,7 +4,7 @@ import { FeeAmount } from '@uniswap/v3-sdk'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
 import { useMemo } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { useFeeTierDistributionQuery } from 'state/data/enhanced'
 import { FeeTierDistributionQuery } from 'state/data/generated'
 
@@ -112,9 +112,7 @@ function usePoolTVL(token0: Token | undefined, token1: Token | undefined) {
     }
 
     if (latestBlock - (_meta?.block?.number ?? 0) > MAX_DATA_BLOCK_AGE) {
-      ReactGA.exception({
-        description: `Graph stale (latest block: ${latestBlock})`,
-      })
+      ReactGA.event('exception', { description: `Graph stale (latest block: ${latestBlock})` })
 
       return {
         isLoading,

src/hooks/useGasPrice.ts

@@ -1,5 +1,6 @@
 import JSBI from 'jsbi'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useContract } from './useContract'
 import useENSAddress from './useENSAddress'
@@ -22,5 +23,5 @@ export default function useGasPrice(): JSBI | undefined {
   const contract = useContract(address ?? undefined, CHAIN_DATA_ABI, false)
 
   const resultStr = useSingleCallResult(contract, 'latestAnswer').result?.[0]?.toString()
-  return typeof resultStr === 'string' ? JSBI.BigInt(resultStr) : undefined
+  return useMemo(() => (typeof resultStr === 'string' ? JSBI.BigInt(resultStr) : undefined), [resultStr])
 }

src/hooks/useIsArgentWallet.ts

@@ -9,5 +9,5 @@ export default function useIsArgentWallet(): boolean {
   const argentWalletDetector = useArgentWalletDetectorContract()
   const inputs = useMemo(() => [account ?? undefined], [account])
   const call = useSingleCallResult(argentWalletDetector, 'isArgentWallet', inputs, NEVER_RELOAD)
-  return call?.result?.[0] ?? false
+  return Boolean(call?.result?.[0])
 }

src/hooks/useIsWindowVisible.ts

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 
-const VISIBILITY_STATE_SUPPORTED = 'visibilityState' in document
+function isVisibilityStateSupported() {
+  return 'visibilityState' in document
+}
 
 function isWindowVisible() {
-  return !VISIBILITY_STATE_SUPPORTED || document.visibilityState !== 'hidden'
+  return !isVisibilityStateSupported() || document.visibilityState !== 'hidden'
 }
 
 /**
@@ -16,7 +18,7 @@ export default function useIsWindowVisible(): boolean {
   }, [setFocused])
 
   useEffect(() => {
-    if (!VISIBILITY_STATE_SUPPORTED) return undefined
+    if (!isVisibilityStateSupported()) return undefined
 
     document.addEventListener('visibilitychange', listener)
     return () => {

src/hooks/useLocationLinkProps.ts

@@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { stringify } from 'qs'
 import { useMemo } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { useLocation } from 'react-router-dom'
 
 import { useActiveLocale } from './useActiveLocale'

src/hooks/usePoolTickData.ts

@@ -1,30 +1,141 @@
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency } from '@uniswap/sdk-core'
-import { FeeAmount, Pool, TICK_SPACINGS, tickToPrice } from '@uniswap/v3-sdk'
+import { FeeAmount, nearestUsableTick, Pool, TICK_SPACINGS, tickToPrice } from '@uniswap/v3-sdk'
+import { SupportedChainId } from 'constants/chains'
+import { ZERO_ADDRESS } from 'constants/misc'
 import JSBI from 'jsbi'
+import { useSingleContractMultipleData } from 'lib/hooks/multicall'
 import ms from 'ms.macro'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useAllV3TicksQuery } from 'state/data/enhanced'
-import { AllV3TicksQuery } from 'state/data/generated'
 import computeSurroundingTicks from 'utils/computeSurroundingTicks'
 
+import { useTickLens } from './useContract'
 import { PoolState, usePool } from './usePools'
 
 const PRICE_FIXED_DIGITS = 8
+const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_RINKEBY]
+
+export interface TickData {
+  tick: number
+  liquidityNet: JSBI
+  liquidityGross: JSBI
+}
 
 // Tick with fields parsed to JSBIs, and active liquidity computed.
 export interface TickProcessed {
-  tickIdx: number
+  tick: number
   liquidityActive: JSBI
   liquidityNet: JSBI
   price0: string
 }
 
+const REFRESH_FREQUENCY = { blocksPerFetch: 2 }
+
 const getActiveTick = (tickCurrent: number | undefined, feeAmount: FeeAmount | undefined) =>
   tickCurrent && feeAmount ? Math.floor(tickCurrent / TICK_SPACINGS[feeAmount]) * TICK_SPACINGS[feeAmount] : undefined
 
-// Fetches all ticks for a given pool
-export function useAllV3Ticks(
+const bitmapIndex = (tick: number, tickSpacing: number) => {
+  return Math.floor(tick / tickSpacing / 256)
+}
+
+function useTicksFromTickLens(
+  currencyA: Currency | undefined,
+  currencyB: Currency | undefined,
+  feeAmount: FeeAmount | undefined,
+  numSurroundingTicks: number | undefined = 125
+) {
+  const [tickDataLatestSynced, setTickDataLatestSynced] = useState<TickData[]>([])
+
+  const [poolState, pool] = usePool(currencyA, currencyB, feeAmount)
+
+  const tickSpacing = feeAmount && TICK_SPACINGS[feeAmount]
+
+  // Find nearest valid tick for pool in case tick is not initialized.
+  const activeTick = pool?.tickCurrent && tickSpacing ? nearestUsableTick(pool?.tickCurrent, tickSpacing) : undefined
+
+  const poolAddress =
+    currencyA && currencyB && feeAmount && poolState === PoolState.EXISTS
+      ? Pool.getAddress(currencyA?.wrapped, currencyB?.wrapped, feeAmount)
+      : undefined
+
+  // it is also possible to grab all tick data but it is extremely slow
+  // bitmapIndex(nearestUsableTick(TickMath.MIN_TICK, tickSpacing), tickSpacing)
+  const minIndex = useMemo(
+    () =>
+      tickSpacing && activeTick ? bitmapIndex(activeTick - numSurroundingTicks * tickSpacing, tickSpacing) : undefined,
+    [tickSpacing, activeTick, numSurroundingTicks]
+  )
+
+  const maxIndex = useMemo(
+    () =>
+      tickSpacing && activeTick ? bitmapIndex(activeTick + numSurroundingTicks * tickSpacing, tickSpacing) : undefined,
+    [tickSpacing, activeTick, numSurroundingTicks]
+  )
+
+  const tickLensArgs: [string, number][] = useMemo(
+    () =>
+      maxIndex && minIndex && poolAddress && poolAddress !== ZERO_ADDRESS
+        ? new Array(maxIndex - minIndex + 1)
+            .fill(0)
+            .map((_, i) => i + minIndex)
+            .map((wordIndex) => [poolAddress, wordIndex])
+        : [],
+    [minIndex, maxIndex, poolAddress]
+  )
+
+  const tickLens = useTickLens()
+  const callStates = useSingleContractMultipleData(
+    tickLensArgs.length > 0 ? tickLens : undefined,
+    'getPopulatedTicksInWord',
+    tickLensArgs,
+    REFRESH_FREQUENCY
+  )
+
+  const isError = useMemo(() => callStates.some(({ error }) => error), [callStates])
+  const isLoading = useMemo(() => callStates.some(({ loading }) => loading), [callStates])
+  const IsSyncing = useMemo(() => callStates.some(({ syncing }) => syncing), [callStates])
+  const isValid = useMemo(() => callStates.some(({ valid }) => valid), [callStates])
+
+  const tickData: TickData[] = useMemo(
+    () =>
+      callStates
+        .map(({ result }) => result?.populatedTicks)
+        .reduce(
+          (accumulator, current) => [
+            ...accumulator,
+            ...(current?.map((tickData: TickData) => {
+              return {
+                tick: tickData.tick,
+                liquidityNet: JSBI.BigInt(tickData.liquidityNet),
+                liquidityGross: JSBI.BigInt(tickData.liquidityGross),
+              }
+            }) ?? []),
+          ],
+          []
+        ),
+    [callStates]
+  )
+
+  // reset on input change
+  useEffect(() => {
+    setTickDataLatestSynced([])
+  }, [currencyA, currencyB, feeAmount])
+
+  // return the latest synced tickData even if we are still loading the newest data
+  useEffect(() => {
+    if (!IsSyncing && !isLoading && !isError && isValid) {
+      setTickDataLatestSynced(tickData.sort((a, b) => a.tick - b.tick))
+    }
+  }, [isError, isLoading, IsSyncing, tickData, isValid])
+
+  return useMemo(
+    () => ({ isLoading, IsSyncing, isError, isValid, tickData: tickDataLatestSynced }),
+    [isLoading, IsSyncing, isError, isValid, tickDataLatestSynced]
+  )
+}
+
+function useTicksFromSubgraph(
   currencyA: Currency | undefined,
   currencyB: Currency | undefined,
   feeAmount: FeeAmount | undefined
@@ -32,19 +143,34 @@ export function useAllV3Ticks(
   const poolAddress =
     currencyA && currencyB && feeAmount ? Pool.getAddress(currencyA?.wrapped, currencyB?.wrapped, feeAmount) : undefined
 
-  const { isLoading, isError, error, isUninitialized, data } = useAllV3TicksQuery(
-    poolAddress ? { poolAddress: poolAddress?.toLowerCase(), skip: 0 } : skipToken,
-    {
-      pollingInterval: ms`30s`,
-    }
-  )
+  return useAllV3TicksQuery(poolAddress ? { poolAddress: poolAddress?.toLowerCase(), skip: 0 } : skipToken, {
+    pollingInterval: ms`30s`,
+  })
+}
+
+// Fetches all ticks for a given pool
+function useAllV3Ticks(
+  currencyA: Currency | undefined,
+  currencyB: Currency | undefined,
+  feeAmount: FeeAmount | undefined
+): {
+  isLoading: boolean
+  isUninitialized: boolean
+  isError: boolean
+  error: unknown
+  ticks: TickData[] | undefined
+} {
+  const useSubgraph = currencyA ? !CHAIN_IDS_MISSING_SUBGRAPH_DATA.includes(currencyA.chainId) : true
+
+  const tickLensTickData = useTicksFromTickLens(!useSubgraph ? currencyA : undefined, currencyB, feeAmount)
+  const subgraphTickData = useTicksFromSubgraph(useSubgraph ? currencyA : undefined, currencyB, feeAmount)
 
   return {
-    isLoading,
-    isUninitialized,
-    isError,
-    error,
-    ticks: data?.ticks as AllV3TicksQuery['ticks'],
+    isLoading: useSubgraph ? subgraphTickData.isLoading : tickLensTickData.isLoading,
+    isUninitialized: useSubgraph ? subgraphTickData.isUninitialized : false,
+    isError: useSubgraph ? subgraphTickData.isError : tickLensTickData.isError,
+    error: useSubgraph ? subgraphTickData.error : tickLensTickData.isError,
+    ticks: useSubgraph ? subgraphTickData.data?.ticks : tickLensTickData.tickData,
   }
 }
 
@@ -94,7 +220,7 @@ export function usePoolActiveLiquidity(
     // find where the active tick would be to partition the array
     // if the active tick is initialized, the pivot will be an element
     // if not, take the previous tick as pivot
-    const pivot = ticks.findIndex(({ tickIdx }) => tickIdx > activeTick) - 1
+    const pivot = ticks.findIndex(({ tick }) => tick > activeTick) - 1
 
     if (pivot < 0) {
       // consider setting a local error
@@ -111,9 +237,8 @@ export function usePoolActiveLiquidity(
 
     const activeTickProcessed: TickProcessed = {
       liquidityActive: JSBI.BigInt(pool[1]?.liquidity ?? 0),
-      tickIdx: activeTick,
-      liquidityNet:
-        Number(ticks[pivot].tickIdx) === activeTick ? JSBI.BigInt(ticks[pivot].liquidityNet) : JSBI.BigInt(0),
+      tick: activeTick,
+      liquidityNet: Number(ticks[pivot].tick) === activeTick ? JSBI.BigInt(ticks[pivot].liquidityNet) : JSBI.BigInt(0),
       price0: tickToPrice(token0, token1, activeTick).toFixed(PRICE_FIXED_DIGITS),
     }
 

src/hooks/usePools.ts

@@ -1,9 +1,10 @@
 import { Interface } from '@ethersproject/abi'
-import { Currency, Token } from '@uniswap/sdk-core'
+import { BigintIsh, Currency, Token } from '@uniswap/sdk-core'
 import { abi as IUniswapV3PoolStateABI } from '@uniswap/v3-core/artifacts/contracts/interfaces/pool/IUniswapV3PoolState.sol/IUniswapV3PoolState.json'
 import { computePoolAddress } from '@uniswap/v3-sdk'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import JSBI from 'jsbi'
 import { useMultipleContractSingleData } from 'lib/hooks/multicall'
 import { useMemo } from 'react'
 
@@ -12,6 +13,69 @@ import { IUniswapV3PoolStateInterface } from '../types/v3/IUniswapV3PoolState'
 
 const POOL_STATE_INTERFACE = new Interface(IUniswapV3PoolStateABI) as IUniswapV3PoolStateInterface
 
+// Classes are expensive to instantiate, so this caches the recently instantiated pools.
+// This avoids re-instantiating pools as the other pools in the same request are loaded.
+class PoolCache {
+  // Evict after 128 entries. Empirically, a swap uses 64 entries.
+  private static MAX_ENTRIES = 128
+
+  // These are FIFOs, using unshift/pop. This makes recent entries faster to find.
+  private static pools: Pool[] = []
+  private static addresses: { key: string; address: string }[] = []
+
+  static getPoolAddress(factoryAddress: string, tokenA: Token, tokenB: Token, fee: FeeAmount): string {
+    if (this.addresses.length > this.MAX_ENTRIES) {
+      this.addresses = this.addresses.slice(0, this.MAX_ENTRIES / 2)
+    }
+
+    const { address: addressA } = tokenA
+    const { address: addressB } = tokenB
+    const key = `${factoryAddress}:${addressA}:${addressB}:${fee.toString()}`
+    const found = this.addresses.find((address) => address.key === key)
+    if (found) return found.address
+
+    const address = {
+      key,
+      address: computePoolAddress({
+        factoryAddress,
+        tokenA,
+        tokenB,
+        fee,
+      }),
+    }
+    this.addresses.unshift(address)
+    return address.address
+  }
+
+  static getPool(
+    tokenA: Token,
+    tokenB: Token,
+    fee: FeeAmount,
+    sqrtPriceX96: BigintIsh,
+    liquidity: BigintIsh,
+    tick: number
+  ): Pool {
+    if (this.pools.length > this.MAX_ENTRIES) {
+      this.pools = this.pools.slice(0, this.MAX_ENTRIES / 2)
+    }
+
+    const found = this.pools.find(
+      (pool) =>
+        pool.token0 === tokenA &&
+        pool.token1 === tokenB &&
+        pool.fee === fee &&
+        JSBI.EQ(pool.sqrtRatioX96, sqrtPriceX96) &&
+        JSBI.EQ(pool.liquidity, liquidity) &&
+        pool.tickCurrent === tick
+    )
+    if (found) return found
+
+    const pool = new Pool(tokenA, tokenB, fee, sqrtPriceX96, liquidity, tick)
+    this.pools.unshift(pool)
+    return pool
+  }
+}
+
 export enum PoolState {
   LOADING,
   NOT_EXISTS,
@@ -24,58 +88,57 @@ export function usePools(
 ): [PoolState, Pool | null][] {
   const { chainId } = useActiveWeb3React()
 
-  const transformed: ([Token, Token, FeeAmount] | null)[] = useMemo(() => {
-    return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
-      if (!chainId || !currencyA || !currencyB || !feeAmount) return null
+  const poolTokens: ([Token, Token, FeeAmount] | undefined)[] = useMemo(() => {
+    if (!chainId) return new Array(poolKeys.length)
 
-      const tokenA = currencyA?.wrapped
-      const tokenB = currencyB?.wrapped
-      if (!tokenA || !tokenB || tokenA.equals(tokenB)) return null
-      const [token0, token1] = tokenA.sortsBefore(tokenB) ? [tokenA, tokenB] : [tokenB, tokenA]
-      return [token0, token1, feeAmount]
+    return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
+      if (currencyA && currencyB && feeAmount) {
+        const tokenA = currencyA.wrapped
+        const tokenB = currencyB.wrapped
+        if (tokenA.equals(tokenB)) return undefined
+
+        return tokenA.sortsBefore(tokenB) ? [tokenA, tokenB, feeAmount] : [tokenB, tokenA, feeAmount]
+      }
+      return undefined
     })
   }, [chainId, poolKeys])
 
   const poolAddresses: (string | undefined)[] = useMemo(() => {
     const v3CoreFactoryAddress = chainId && V3_CORE_FACTORY_ADDRESSES[chainId]
+    if (!v3CoreFactoryAddress) return new Array(poolTokens.length)
 
-    return transformed.map((value) => {
-      if (!v3CoreFactoryAddress || !value) return undefined
-      return computePoolAddress({
-        factoryAddress: v3CoreFactoryAddress,
-        tokenA: value[0],
-        tokenB: value[1],
-        fee: value[2],
-      })
-    })
-  }, [chainId, transformed])
+    return poolTokens.map((value) => value && PoolCache.getPoolAddress(v3CoreFactoryAddress, ...value))
+  }, [chainId, poolTokens])
 
   const slot0s = useMultipleContractSingleData(poolAddresses, POOL_STATE_INTERFACE, 'slot0')
   const liquidities = useMultipleContractSingleData(poolAddresses, POOL_STATE_INTERFACE, 'liquidity')
 
   return useMemo(() => {
     return poolKeys.map((_key, index) => {
-      const [token0, token1, fee] = transformed[index] ?? []
-      if (!token0 || !token1 || !fee) return [PoolState.INVALID, null]
+      const tokens = poolTokens[index]
+      if (!tokens) return [PoolState.INVALID, null]
+      const [token0, token1, fee] = tokens
 
+      if (!slot0s[index]) return [PoolState.INVALID, null]
       const { result: slot0, loading: slot0Loading, valid: slot0Valid } = slot0s[index]
+
+      if (!liquidities[index]) return [PoolState.INVALID, null]
       const { result: liquidity, loading: liquidityLoading, valid: liquidityValid } = liquidities[index]
 
-      if (!slot0Valid || !liquidityValid) return [PoolState.INVALID, null]
+      if (!tokens || !slot0Valid || !liquidityValid) return [PoolState.INVALID, null]
       if (slot0Loading || liquidityLoading) return [PoolState.LOADING, null]
-
       if (!slot0 || !liquidity) return [PoolState.NOT_EXISTS, null]
-
       if (!slot0.sqrtPriceX96 || slot0.sqrtPriceX96.eq(0)) return [PoolState.NOT_EXISTS, null]
 
       try {
-        return [PoolState.EXISTS, new Pool(token0, token1, fee, slot0.sqrtPriceX96, liquidity[0], slot0.tick)]
+        const pool = PoolCache.getPool(token0, token1, fee, slot0.sqrtPriceX96, liquidity[0], slot0.tick)
+        return [PoolState.EXISTS, pool]
       } catch (error) {
         console.error('Error when constructing the pool', error)
         return [PoolState.NOT_EXISTS, null]
       }
     })
-  }, [liquidities, poolKeys, slot0s, transformed])
+  }, [liquidities, poolKeys, slot0s, poolTokens])
 }
 
 export function usePool(

src/hooks/useSwapCallArguments.tsx

@@ -0,0 +1,184 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { SwapRouter, Trade } from '@uniswap/router-sdk'
+import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Router as V2SwapRouter, Trade as V2Trade } from '@uniswap/v2-sdk'
+import { FeeOptions, SwapRouter as V3SwapRouter, Trade as V3Trade } from '@uniswap/v3-sdk'
+import { SWAP_ROUTER_ADDRESSES, V3_ROUTER_ADDRESS } from 'constants/addresses'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useMemo } from 'react'
+import approveAmountCalldata from 'utils/approveAmountCalldata'
+
+import { useArgentWalletContract } from './useArgentWalletContract'
+import { useV2RouterContract } from './useContract'
+import useENS from './useENS'
+import { SignatureData } from './useERC20Permit'
+
+export type AnyTrade =
+  | V2Trade<Currency, Currency, TradeType>
+  | V3Trade<Currency, Currency, TradeType>
+  | Trade<Currency, Currency, TradeType>
+
+interface SwapCall {
+  address: string
+  calldata: string
+  value: string
+}
+
+/**
+ * Returns the swap calls that can be used to make the trade
+ * @param trade trade to execute
+ * @param allowedSlippage user allowed slippage
+ * @param recipientAddressOrName the ENS name or address of the recipient of the swap output
+ * @param signatureData the signature data of the permit of the input token amount, if available
+ */
+export function useSwapCallArguments(
+  trade: AnyTrade | undefined,
+  allowedSlippage: Percent,
+  recipientAddressOrName: string | null | undefined,
+  signatureData: SignatureData | null | undefined,
+  deadline: BigNumber | undefined,
+  feeOptions: FeeOptions | undefined
+): SwapCall[] {
+  const { account, chainId, library } = useActiveWeb3React()
+
+  const { address: recipientAddress } = useENS(recipientAddressOrName)
+  const recipient = recipientAddressOrName === null ? account : recipientAddress
+  const routerContract = useV2RouterContract()
+  const argentWalletContract = useArgentWalletContract()
+
+  return useMemo(() => {
+    if (!trade || !recipient || !library || !account || !chainId || !deadline) return []
+
+    if (trade instanceof V2Trade) {
+      if (!routerContract) return []
+      const swapMethods = []
+
+      swapMethods.push(
+        V2SwapRouter.swapCallParameters(trade, {
+          feeOnTransfer: false,
+          allowedSlippage,
+          recipient,
+          deadline: deadline.toNumber(),
+        })
+      )
+
+      if (trade.tradeType === TradeType.EXACT_INPUT) {
+        swapMethods.push(
+          V2SwapRouter.swapCallParameters(trade, {
+            feeOnTransfer: true,
+            allowedSlippage,
+            recipient,
+            deadline: deadline.toNumber(),
+          })
+        )
+      }
+      return swapMethods.map(({ methodName, args, value }) => {
+        if (argentWalletContract && trade.inputAmount.currency.isToken) {
+          return {
+            address: argentWalletContract.address,
+            calldata: argentWalletContract.interface.encodeFunctionData('wc_multiCall', [
+              [
+                approveAmountCalldata(trade.maximumAmountIn(allowedSlippage), routerContract.address),
+                {
+                  to: routerContract.address,
+                  value,
+                  data: routerContract.interface.encodeFunctionData(methodName, args),
+                },
+              ],
+            ]),
+            value: '0x0',
+          }
+        } else {
+          return {
+            address: routerContract.address,
+            calldata: routerContract.interface.encodeFunctionData(methodName, args),
+            value,
+          }
+        }
+      })
+    } else {
+      // swap options shared by v3 and v2+v3 swap routers
+      const sharedSwapOptions = {
+        fee: feeOptions,
+        recipient,
+        slippageTolerance: allowedSlippage,
+        ...(signatureData
+          ? {
+              inputTokenPermit:
+                'allowed' in signatureData
+                  ? {
+                      expiry: signatureData.deadline,
+                      nonce: signatureData.nonce,
+                      s: signatureData.s,
+                      r: signatureData.r,
+                      v: signatureData.v as any,
+                    }
+                  : {
+                      deadline: signatureData.deadline,
+                      amount: signatureData.amount,
+                      s: signatureData.s,
+                      r: signatureData.r,
+                      v: signatureData.v as any,
+                    },
+            }
+          : {}),
+      }
+
+      const swapRouterAddress = chainId
+        ? trade instanceof V3Trade
+          ? V3_ROUTER_ADDRESS[chainId]
+          : SWAP_ROUTER_ADDRESSES[chainId]
+        : undefined
+      if (!swapRouterAddress) return []
+
+      const { value, calldata } =
+        trade instanceof V3Trade
+          ? V3SwapRouter.swapCallParameters(trade, {
+              ...sharedSwapOptions,
+              deadline: deadline.toString(),
+            })
+          : SwapRouter.swapCallParameters(trade, {
+              ...sharedSwapOptions,
+              deadlineOrPreviousBlockhash: deadline.toString(),
+            })
+
+      if (argentWalletContract && trade.inputAmount.currency.isToken) {
+        return [
+          {
+            address: argentWalletContract.address,
+            calldata: argentWalletContract.interface.encodeFunctionData('wc_multiCall', [
+              [
+                approveAmountCalldata(trade.maximumAmountIn(allowedSlippage), swapRouterAddress),
+                {
+                  to: swapRouterAddress,
+                  value,
+                  data: calldata,
+                },
+              ],
+            ]),
+            value: '0x0',
+          },
+        ]
+      }
+      return [
+        {
+          address: swapRouterAddress,
+          calldata,
+          value,
+        },
+      ]
+    }
+  }, [
+    account,
+    allowedSlippage,
+    argentWalletContract,
+    chainId,
+    deadline,
+    feeOptions,
+    library,
+    recipient,
+    routerContract,
+    signatureData,
+    trade,
+  ])
+}

src/hooks/useSwapCallback.tsx

@@ -1,289 +1,17 @@
-import { BigNumber } from '@ethersproject/bignumber'
 // eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
-import { SwapRouter, Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import { Router as V2SwapRouter, Trade as V2Trade } from '@uniswap/v2-sdk'
-import { SwapRouter as V3SwapRouter, Trade as V3Trade } from '@uniswap/v3-sdk'
+import { Percent, TradeType } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { SwapCallbackState, useSwapCallback as useLibSwapCallBack } from 'lib/hooks/swap/useSwapCallback'
 import { ReactNode, useMemo } from 'react'
 
-import { SWAP_ROUTER_ADDRESSES, V3_ROUTER_ADDRESS } from '../constants/addresses'
 import { TransactionType } from '../state/transactions/actions'
 import { useTransactionAdder } from '../state/transactions/hooks'
-import approveAmountCalldata from '../utils/approveAmountCalldata'
-import { calculateGasMargin } from '../utils/calculateGasMargin'
 import { currencyId } from '../utils/currencyId'
-import isZero from '../utils/isZero'
-import { useArgentWalletContract } from './useArgentWalletContract'
-import { useV2RouterContract } from './useContract'
 import useENS from './useENS'
 import { SignatureData } from './useERC20Permit'
+import { AnyTrade } from './useSwapCallArguments'
 import useTransactionDeadline from './useTransactionDeadline'
 
-type AnyTrade =
-  | V2Trade<Currency, Currency, TradeType>
-  | V3Trade<Currency, Currency, TradeType>
-  | Trade<Currency, Currency, TradeType>
-
-enum SwapCallbackState {
-  INVALID,
-  LOADING,
-  VALID,
-}
-
-interface SwapCall {
-  address: string
-  calldata: string
-  value: string
-}
-
-interface SwapCallEstimate {
-  call: SwapCall
-}
-
-interface SuccessfulCall extends SwapCallEstimate {
-  call: SwapCall
-  gasEstimate: BigNumber
-}
-
-interface FailedCall extends SwapCallEstimate {
-  call: SwapCall
-  error: Error
-}
-/**
- * Returns the swap calls that can be used to make the trade
- * @param trade trade to execute
- * @param allowedSlippage user allowed slippage
- * @param recipientAddressOrName the ENS name or address of the recipient of the swap output
- * @param signatureData the signature data of the permit of the input token amount, if available
- */
-function useSwapCallArguments(
-  trade: AnyTrade | undefined, // trade to execute, required
-  allowedSlippage: Percent, // in bips
-  recipientAddressOrName: string | null, // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
-  signatureData: SignatureData | null | undefined
-): SwapCall[] {
-  const { account, chainId, library } = useActiveWeb3React()
-
-  const { address: recipientAddress } = useENS(recipientAddressOrName)
-  const recipient = recipientAddressOrName === null ? account : recipientAddress
-  const deadline = useTransactionDeadline()
-  const routerContract = useV2RouterContract()
-  const argentWalletContract = useArgentWalletContract()
-
-  return useMemo(() => {
-    if (!trade || !recipient || !library || !account || !chainId || !deadline) return []
-
-    if (trade instanceof V2Trade) {
-      if (!routerContract) return []
-      const swapMethods = []
-
-      swapMethods.push(
-        V2SwapRouter.swapCallParameters(trade, {
-          feeOnTransfer: false,
-          allowedSlippage,
-          recipient,
-          deadline: deadline.toNumber(),
-        })
-      )
-
-      if (trade.tradeType === TradeType.EXACT_INPUT) {
-        swapMethods.push(
-          V2SwapRouter.swapCallParameters(trade, {
-            feeOnTransfer: true,
-            allowedSlippage,
-            recipient,
-            deadline: deadline.toNumber(),
-          })
-        )
-      }
-      return swapMethods.map(({ methodName, args, value }) => {
-        if (argentWalletContract && trade.inputAmount.currency.isToken) {
-          return {
-            address: argentWalletContract.address,
-            calldata: argentWalletContract.interface.encodeFunctionData('wc_multiCall', [
-              [
-                approveAmountCalldata(trade.maximumAmountIn(allowedSlippage), routerContract.address),
-                {
-                  to: routerContract.address,
-                  value,
-                  data: routerContract.interface.encodeFunctionData(methodName, args),
-                },
-              ],
-            ]),
-            value: '0x0',
-          }
-        } else {
-          return {
-            address: routerContract.address,
-            calldata: routerContract.interface.encodeFunctionData(methodName, args),
-            value,
-          }
-        }
-      })
-    } else {
-      // swap options shared by v3 and v2+v3 swap routers
-      const sharedSwapOptions = {
-        recipient,
-        slippageTolerance: allowedSlippage,
-        ...(signatureData
-          ? {
-              inputTokenPermit:
-                'allowed' in signatureData
-                  ? {
-                      expiry: signatureData.deadline,
-                      nonce: signatureData.nonce,
-                      s: signatureData.s,
-                      r: signatureData.r,
-                      v: signatureData.v as any,
-                    }
-                  : {
-                      deadline: signatureData.deadline,
-                      amount: signatureData.amount,
-                      s: signatureData.s,
-                      r: signatureData.r,
-                      v: signatureData.v as any,
-                    },
-            }
-          : {}),
-      }
-
-      const swapRouterAddress = chainId
-        ? trade instanceof V3Trade
-          ? V3_ROUTER_ADDRESS[chainId]
-          : SWAP_ROUTER_ADDRESSES[chainId]
-        : undefined
-      if (!swapRouterAddress) return []
-
-      const { value, calldata } =
-        trade instanceof V3Trade
-          ? V3SwapRouter.swapCallParameters(trade, {
-              ...sharedSwapOptions,
-              deadline: deadline.toString(),
-            })
-          : SwapRouter.swapCallParameters(trade, {
-              ...sharedSwapOptions,
-              deadlineOrPreviousBlockhash: deadline.toString(),
-            })
-
-      if (argentWalletContract && trade.inputAmount.currency.isToken) {
-        return [
-          {
-            address: argentWalletContract.address,
-            calldata: argentWalletContract.interface.encodeFunctionData('wc_multiCall', [
-              [
-                approveAmountCalldata(trade.maximumAmountIn(allowedSlippage), swapRouterAddress),
-                {
-                  to: swapRouterAddress,
-                  value,
-                  data: calldata,
-                },
-              ],
-            ]),
-            value: '0x0',
-          },
-        ]
-      }
-      return [
-        {
-          address: swapRouterAddress,
-          calldata,
-          value,
-        },
-      ]
-    }
-  }, [
-    trade,
-    recipient,
-    library,
-    account,
-    chainId,
-    deadline,
-    routerContract,
-    allowedSlippage,
-    argentWalletContract,
-    signatureData,
-  ])
-}
-
-/**
- * This is hacking out the revert reason from the ethers provider thrown error however it can.
- * This object seems to be undocumented by ethers.
- * @param error an error from the ethers provider
- */
-function swapErrorToUserReadableMessage(error: any): ReactNode {
-  let reason: string | undefined
-  while (Boolean(error)) {
-    reason = error.reason ?? error.message ?? reason
-    error = error.error ?? error.data?.originalError
-  }
-
-  if (reason?.indexOf('execution reverted: ') === 0) reason = reason.substr('execution reverted: '.length)
-
-  switch (reason) {
-    case 'UniswapV2Router: EXPIRED':
-      return (
-        <Trans>
-          The transaction could not be sent because the deadline has passed. Please check that your transaction deadline
-          is not too low.
-        </Trans>
-      )
-    case 'UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT':
-    case 'UniswapV2Router: EXCESSIVE_INPUT_AMOUNT':
-      return (
-        <Trans>
-          This transaction will not succeed either due to price movement or fee on transfer. Try increasing your
-          slippage tolerance.
-        </Trans>
-      )
-    case 'TransferHelper: TRANSFER_FROM_FAILED':
-      return <Trans>The input token cannot be transferred. There may be an issue with the input token.</Trans>
-    case 'UniswapV2: TRANSFER_FAILED':
-      return <Trans>The output token cannot be transferred. There may be an issue with the output token.</Trans>
-    case 'UniswapV2: K':
-      return (
-        <Trans>
-          The Uniswap invariant x*y=k was not satisfied by the swap. This usually means one of the tokens you are
-          swapping incorporates custom behavior on transfer.
-        </Trans>
-      )
-    case 'Too little received':
-    case 'Too much requested':
-    case 'STF':
-      return (
-        <Trans>
-          This transaction will not succeed due to price movement. Try increasing your slippage tolerance. Note: fee on
-          transfer and rebase tokens are incompatible with Uniswap V3.
-        </Trans>
-      )
-    case 'TF':
-      return (
-        <Trans>
-          The output token cannot be transferred. There may be an issue with the output token. Note: fee on transfer and
-          rebase tokens are incompatible with Uniswap V3.
-        </Trans>
-      )
-    default:
-      if (reason?.indexOf('undefined is not an object') !== -1) {
-        console.error(error, reason)
-        return (
-          <Trans>
-            An error occurred when trying to execute this swap. You may need to increase your slippage tolerance. If
-            that does not work, there may be an incompatibility with the token you are trading. Note: fee on transfer
-            and rebase tokens are incompatible with Uniswap V3.
-          </Trans>
-        )
-      }
-      return (
-        <Trans>
-          Unknown error{reason ? `: "${reason}"` : ''}. Try increasing your slippage tolerance. Note: fee on transfer
-          and rebase tokens are incompatible with Uniswap V3.
-        </Trans>
-      )
-  }
-}
-
 // returns a function that will execute a swap, if the parameters are all valid
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
@@ -292,139 +20,56 @@ export function useSwapCallback(
   recipientAddressOrName: string | null, // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
   signatureData: SignatureData | undefined | null
 ): { state: SwapCallbackState; callback: null | (() => Promise<string>); error: ReactNode | null } {
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
 
-  const swapCalls = useSwapCallArguments(trade, allowedSlippage, recipientAddressOrName, signatureData)
+  const deadline = useTransactionDeadline()
 
   const addTransaction = useTransactionAdder()
 
   const { address: recipientAddress } = useENS(recipientAddressOrName)
   const recipient = recipientAddressOrName === null ? account : recipientAddress
 
-  return useMemo(() => {
-    if (!trade || !library || !account || !chainId) {
-      return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Missing dependencies</Trans> }
+  const {
+    state,
+    callback: libCallback,
+    error,
+  } = useLibSwapCallBack({ trade, allowedSlippage, recipientAddressOrName: recipient, signatureData, deadline })
+
+  const callback = useMemo(() => {
+    if (!libCallback || !trade) {
+      return null
     }
-    if (!recipient) {
-      if (recipientAddressOrName !== null) {
-        return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Invalid recipient</Trans> }
-      } else {
-        return { state: SwapCallbackState.LOADING, callback: null, error: null }
-      }
-    }
-
-    return {
-      state: SwapCallbackState.VALID,
-      callback: async function onSwap(): Promise<string> {
-        const estimatedCalls: SwapCallEstimate[] = await Promise.all(
-          swapCalls.map((call) => {
-            const { address, calldata, value } = call
-
-            const tx =
-              !value || isZero(value)
-                ? { from: account, to: address, data: calldata }
-                : {
-                    from: account,
-                    to: address,
-                    data: calldata,
-                    value,
-                  }
-
-            return library
-              .estimateGas(tx)
-              .then((gasEstimate) => {
-                return {
-                  call,
-                  gasEstimate,
-                }
-              })
-              .catch((gasError) => {
-                console.debug('Gas estimate failed, trying eth_call to extract error', call)
-
-                return library
-                  .call(tx)
-                  .then((result) => {
-                    console.debug('Unexpected successful call after failed estimate gas', call, gasError, result)
-                    return { call, error: <Trans>Unexpected issue with estimating the gas. Please try again.</Trans> }
-                  })
-                  .catch((callError) => {
-                    console.debug('Call threw error', call, callError)
-                    return { call, error: swapErrorToUserReadableMessage(callError) }
-                  })
-              })
-          })
+    return () =>
+      libCallback().then((response) => {
+        addTransaction(
+          response,
+          trade.tradeType === TradeType.EXACT_INPUT
+            ? {
+                type: TransactionType.SWAP,
+                tradeType: TradeType.EXACT_INPUT,
+                inputCurrencyId: currencyId(trade.inputAmount.currency),
+                inputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+                expectedOutputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+                outputCurrencyId: currencyId(trade.outputAmount.currency),
+                minimumOutputCurrencyAmountRaw: trade.minimumAmountOut(allowedSlippage).quotient.toString(),
+              }
+            : {
+                type: TransactionType.SWAP,
+                tradeType: TradeType.EXACT_OUTPUT,
+                inputCurrencyId: currencyId(trade.inputAmount.currency),
+                maximumInputCurrencyAmountRaw: trade.maximumAmountIn(allowedSlippage).quotient.toString(),
+                outputCurrencyId: currencyId(trade.outputAmount.currency),
+                outputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+                expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+              }
         )
+        return response.hash
+      })
+  }, [addTransaction, allowedSlippage, libCallback, trade])
 
-        // a successful estimation is a bignumber gas estimate and the next call is also a bignumber gas estimate
-        let bestCallOption: SuccessfulCall | SwapCallEstimate | undefined = estimatedCalls.find(
-          (el, ix, list): el is SuccessfulCall =>
-            'gasEstimate' in el && (ix === list.length - 1 || 'gasEstimate' in list[ix + 1])
-        )
-
-        // check if any calls errored with a recognizable error
-        if (!bestCallOption) {
-          const errorCalls = estimatedCalls.filter((call): call is FailedCall => 'error' in call)
-          if (errorCalls.length > 0) throw errorCalls[errorCalls.length - 1].error
-          const firstNoErrorCall = estimatedCalls.find<SwapCallEstimate>(
-            (call): call is SwapCallEstimate => !('error' in call)
-          )
-          if (!firstNoErrorCall) throw new Error(t`Unexpected error. Could not estimate gas for the swap.`)
-          bestCallOption = firstNoErrorCall
-        }
-
-        const {
-          call: { address, calldata, value },
-        } = bestCallOption
-
-        return library
-          .getSigner()
-          .sendTransaction({
-            from: account,
-            to: address,
-            data: calldata,
-            // let the wallet try if we can't estimate the gas
-            ...('gasEstimate' in bestCallOption ? { gasLimit: calculateGasMargin(bestCallOption.gasEstimate) } : {}),
-            ...(value && !isZero(value) ? { value } : {}),
-          })
-          .then((response) => {
-            addTransaction(
-              response,
-              trade.tradeType === TradeType.EXACT_INPUT
-                ? {
-                    type: TransactionType.SWAP,
-                    tradeType: TradeType.EXACT_INPUT,
-                    inputCurrencyId: currencyId(trade.inputAmount.currency),
-                    inputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
-                    expectedOutputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
-                    outputCurrencyId: currencyId(trade.outputAmount.currency),
-                    minimumOutputCurrencyAmountRaw: trade.minimumAmountOut(allowedSlippage).quotient.toString(),
-                  }
-                : {
-                    type: TransactionType.SWAP,
-                    tradeType: TradeType.EXACT_OUTPUT,
-                    inputCurrencyId: currencyId(trade.inputAmount.currency),
-                    maximumInputCurrencyAmountRaw: trade.maximumAmountIn(allowedSlippage).quotient.toString(),
-                    outputCurrencyId: currencyId(trade.outputAmount.currency),
-                    outputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
-                    expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
-                  }
-            )
-
-            return response.hash
-          })
-          .catch((error) => {
-            // if the user rejected the tx, pass this along
-            if (error?.code === 4001) {
-              throw new Error(t`Transaction rejected.`)
-            } else {
-              // otherwise, the error was unexpected and we need to convey that
-              console.error(`Swap failed`, error, address, calldata, value)
-
-              throw new Error(t`Swap failed: ${swapErrorToUserReadableMessage(error)}`)
-            }
-          })
-      },
-      error: null,
-    }
-  }, [trade, library, account, chainId, recipient, recipientAddressOrName, swapCalls, addTransaction, allowedSlippage])
+  return {
+    state,
+    callback,
+    error,
+  }
 }

src/hooks/useTotalSupply.ts

@@ -1,6 +1,6 @@
-import { BigNumber } from '@ethersproject/bignumber'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useTokenContract } from './useContract'
 
@@ -9,7 +9,10 @@ import { useTokenContract } from './useContract'
 export function useTotalSupply(token?: Currency): CurrencyAmount<Token> | undefined {
   const contract = useTokenContract(token?.isToken ? token.address : undefined, false)
 
-  const totalSupply: BigNumber = useSingleCallResult(contract, 'totalSupply')?.result?.[0]
+  const totalSupplyStr: string | undefined = useSingleCallResult(contract, 'totalSupply')?.result?.[0]?.toString()
 
-  return token?.isToken && totalSupply ? CurrencyAmount.fromRawAmount(token, totalSupply.toString()) : undefined
+  return useMemo(
+    () => (token?.isToken && totalSupplyStr ? CurrencyAmount.fromRawAmount(token, totalSupplyStr) : undefined),
+    [token, totalSupplyStr]
+  )
 }

src/hooks/useUSDCPrice.ts

@@ -1,17 +1,17 @@
 import { Currency, CurrencyAmount, Price, Token, TradeType } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useMemo } from 'react'
-import { tryParseAmount } from 'state/swap/hooks'
 
 import { SupportedChainId } from '../constants/chains'
-import { DAI_OPTIMISM, USDC, USDC_ARBITRUM, USDC_POLYGON } from '../constants/tokens'
+import { DAI_OPTIMISM, USDC_ARBITRUM, USDC_MAINNET, USDC_POLYGON } from '../constants/tokens'
 import { useBestV2Trade } from './useBestV2Trade'
 import { useClientSideV3Trade } from './useClientSideV3Trade'
 
 // Stablecoin amounts used when calculating spot price for a given currency.
 // The amount is large enough to filter low liquidity pairs.
 export const STABLECOIN_AMOUNT_OUT: { [chainId: number]: CurrencyAmount<Token> } = {
-  [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(USDC, 100_000e6),
+  [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(USDC_MAINNET, 100_000e6),
   [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(USDC_ARBITRUM, 10_000e6),
   [SupportedChainId.OPTIMISM]: CurrencyAmount.fromRawAmount(DAI_OPTIMISM, 10_000e18),
   [SupportedChainId.POLYGON]: CurrencyAmount.fromRawAmount(USDC_POLYGON, 10_000e6),
@@ -78,17 +78,18 @@ export function useStablecoinAmountFromFiatValue(fiatValue: string | null | unde
   const { chainId } = useActiveWeb3React()
   const stablecoin = chainId ? STABLECOIN_AMOUNT_OUT[chainId]?.currency : undefined
 
-  if (fiatValue === null || fiatValue === undefined || !chainId || !stablecoin) {
-    return undefined
-  }
+  return useMemo(() => {
+    if (fiatValue === null || fiatValue === undefined || !chainId || !stablecoin) {
+      return undefined
+    }
 
-  // trim for decimal precision when parsing
-  const parsedForDecimals = parseFloat(fiatValue).toFixed(stablecoin.decimals).toString()
-
-  try {
-    // parse USD string into CurrencyAmount based on stablecoin decimals
-    return tryParseAmount(parsedForDecimals, stablecoin)
-  } catch (error) {
-    return undefined
-  }
+    // trim for decimal precision when parsing
+    const parsedForDecimals = parseFloat(fiatValue).toFixed(stablecoin.decimals).toString()
+    try {
+      // parse USD string into CurrencyAmount based on stablecoin decimals
+      return tryParseCurrencyAmount(parsedForDecimals, stablecoin)
+    } catch (error) {
+      return undefined
+    }
+  }, [chainId, fiatValue, stablecoin])
 }

src/hooks/useV2LiquidityTokenPermit.ts

@@ -0,0 +1,18 @@
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+
+import { PermitInfo, PermitType, useERC20Permit } from './useERC20Permit'
+import useTransactionDeadline from './useTransactionDeadline'
+
+const REMOVE_V2_LIQUIDITY_PERMIT_INFO: PermitInfo = {
+  version: '1',
+  name: 'Uniswap V2',
+  type: PermitType.AMOUNT,
+}
+
+export function useV2LiquidityTokenPermit(
+  liquidityAmount: CurrencyAmount<Token> | null | undefined,
+  spender: string | null | undefined
+) {
+  const transactionDeadline = useTransactionDeadline()
+  return useERC20Permit(liquidityAmount, spender, transactionDeadline, REMOVE_V2_LIQUIDITY_PERMIT_INFO)
+}

src/hooks/useWrapCallback.tsx

@@ -1,14 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useMemo } from 'react'
 
 import { WRAPPED_NATIVE_CURRENCY } from '../constants/tokens'
-import { tryParseAmount } from '../state/swap/hooks'
 import { TransactionType } from '../state/transactions/actions'
 import { useTransactionAdder } from '../state/transactions/hooks'
 import { useCurrencyBalance } from '../state/wallet/hooks'
-import { useNativeCurrency } from './Tokens'
 import { useWETHContract } from './useContract'
 
 export enum WrapType {
@@ -61,7 +61,10 @@ export default function useWrapCallback(
   const wethContract = useWETHContract()
   const balance = useCurrencyBalance(account ?? undefined, inputCurrency ?? undefined)
   // we can always parse the amount typed as the input currency, since wrapping is 1:1
-  const inputAmount = useMemo(() => tryParseAmount(typedValue, inputCurrency ?? undefined), [inputCurrency, typedValue])
+  const inputAmount = useMemo(
+    () => tryParseCurrencyAmount(typedValue, inputCurrency ?? undefined),
+    [inputCurrency, typedValue]
+  )
   const addTransaction = useTransactionAdder()
 
   return useMemo(() => {

src/hooks/web3.ts

@@ -1,6 +1,6 @@
-import { useWeb3React } from '@web3-react/core'
 import type { EthereumProvider } from 'lib/ethereum'
 import { useEffect, useState } from 'react'
+import { useWeb3React } from 'web3-react-core'
 
 import { gnosisSafe, injected } from '../connectors'
 import { IS_IN_IFRAME } from '../constants/misc'