fix: remove unused var (#3736)

* Removed portis

* Removed portis

* Removed portis

* Update src/components/WalletModal/index.tsx

Co-authored-by: Bruno Crosier <bruno.crosier@gmail.com>

* regenerate yarn.lock

* revert translation changes

Co-authored-by: Bruno Crosier <bruno.crosier@gmail.com>
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

.env

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

.env.production

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

.github/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, fonts, 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

@@ -17,7 +17,7 @@ module.exports = (webpackConfig) => ({
         'process.env': {
           ...plugin.definitions['process.env'],
           REACT_APP_IS_WIDGET: true,
-          REACT_APP_LOCALES: "'../locales'",
+          REACT_APP_LOCALES: '"../locales"',
         },
       })
     }

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,15 +1,30 @@
 {
   "name": "@uniswap/widgets",
-  "version": "0.0.10-beta",
+  "version": "1.0.6",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "main": "dist/widgets.js",
-  "module": "dist/widgets.esm.js",
-  "types": "dist/widgets.d.ts",
   "files": [
-    "lib",
     "dist"
   ],
+  "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",
@@ -22,6 +37,9 @@
     "@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",
@@ -72,13 +90,8 @@
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "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.11",
+    "@web3-react/metamask": "^8.0.19-beta.0",
+    "@web3-react/walletconnect": "^8.0.26-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "babel-plugin-macros": "^3.1.0",
@@ -106,18 +119,21 @@
     "react-confetti": "^6.0.0",
     "react-cosmos": "^5.6.6",
     "react-dom": "^17.0.1",
-    "react-ga": "^2.5.7",
+    "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",
@@ -131,6 +147,12 @@
     "use-resize-observer": "^8.0.0",
     "wcag-contrast": "^3.0.0",
     "web-vitals": "^2.1.0",
+    "web3-react-abstract-connector": "npm:@web3-react/abstract-connector@^6.0.7",
+    "web3-react-fortmatic-connector": "npm:@web3-react/fortmatic-connector@^6.0.9",
+    "web3-react-injected-connector": "npm:@web3-react/injected-connector@^6.0.7",
+    "web3-react-types": "npm:@web3-react/types@^6.0.7",
+    "web3-react-walletconnect-connector": "npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0",
+    "web3-react-walletlink-connector": "npm:@web3-react/walletlink-connector@^6.2.13",
     "workbox-core": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0"
@@ -151,7 +173,7 @@
     "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": "cosmos",
     "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
@@ -171,36 +193,25 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@ethersproject/abi": "^5.4.1",
-    "@ethersproject/abstract-provider": "^5.4.1",
-    "@ethersproject/address": "^5.4.0",
-    "@ethersproject/bignumber": "^5.4.2",
-    "@ethersproject/bytes": "^5.4.0",
-    "@ethersproject/constants": "^5.4.0",
-    "@ethersproject/contracts": "^5.4.1",
-    "@ethersproject/hash": "^5.4.0",
-    "@ethersproject/providers": "5.4.0",
-    "@ethersproject/solidity": "^5.4.0",
-    "@ethersproject/strings": "^5.4.0",
-    "@ethersproject/units": "^5.4.0",
-    "@ethersproject/wallet": "^5.4.0",
     "@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",
     "@reduxjs/toolkit": "^1.6.1",
-    "@uniswap/redux-multicall": "^1.0.0",
+    "@uniswap/redux-multicall": "^1.1.1",
     "@uniswap/router-sdk": "^1.0.3",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.5.10",
+    "@uniswap/smart-order-router": "^2.5.26",
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
-    "web3-react-core": "npm:@web3-react/core@^6.0.9",
+    "@web3-react/core": "^8.0.23-beta.0",
+    "@web3-react/eip1193": "^8.0.18-beta.0",
+    "@web3-react/empty": "^8.0.12-beta.0",
+    "@web3-react/types": "^8.0.12-beta.0",
+    "@web3-react/url": "^8.0.17-beta.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
+    "ethers": "^5.1.4",
     "immer": "^9.0.6",
     "jotai": "^1.3.7",
     "jsbi": "^3.1.4",
@@ -213,25 +224,26 @@
     "popper-max-size-modifier": "^0.2.0",
     "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",
-    "@web3-react/core": "8.0.16-alpha.0",
-    "@web3-react/eip1193": "8.0.16-alpha.0",
-    "@web3-react/empty": "8.0.17-alpha.0",
-    "@web3-react/metamask": "8.0.16-alpha.0",
-    "@web3-react/types": "8.0.16-alpha.0",
-    "@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-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

@@ -17,13 +17,17 @@ 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 { CompilerOptions } from 'typescript'
 
 const REPLACEMENTS = {
   'process.env.REACT_APP_IS_WIDGET': true,
-  'process.env.REACT_APP_LOCALES': "'./locales'",
+  'process.env.REACT_APP_LOCALES': '"./locales"',
+  // esm requires fully-specified paths:
+  'react/jsx-runtime': 'react/jsx-runtime.js',
 }
 
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
@@ -33,6 +37,11 @@ function isAsset(source: string) {
   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
@@ -45,54 +54,86 @@ const aliases = Object.entries({ ...paths }).flatMap(([find, replacements]) => {
 
 const plugins = [
   // Dependency resolution
-  externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
   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; doing so type-checking allows the json to be type-checked
+  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' },
-  external: isAsset,
-  plugins: [...plugins, typescript({ tsconfig: TS_CONFIG })],
+  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/widgets.d.ts' },
-  external: isAsset,
+  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' } }),
-    del({ hook: 'buildEnd', targets: ['dist/widgets.tsc', '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',
-      sourcemap: false,
-    },
-    {
-      file: 'dist/widgets.esm.js',
+      dir: 'dist',
       format: 'esm',
       sourcemap: false,
     },
+    {
+      dir: 'dist/cjs',
+      entryFileNames: '[name].cjs',
+      chunkFileNames: '[name]-[hash].cjs',
+      format: 'cjs',
+      sourcemap: false,
+    },
   ],
+  external: isEthers,
   plugins: [
+    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) }), // imports assets as data URIs
+    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({ insert: true }), // imports inlined sass styles
+    sass({ output: 'dist/fonts.css' }), // generates fonts.css
     commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
 
     babel({
@@ -104,16 +145,30 @@ const transpile = {
         '@babel/plugin-transform-runtime', // embeds the babel runtime for library distribution
       ],
     }),
-
-    copy({
-      copyOnce: true,
-      targets: [{ src: 'src/locales/*.js', dest: 'dist/locales' }],
-    }),
   ],
   onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
 }
 
-const config = [check, type, transpile]
+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 config = [check, type, transpile, locales]
 export default config
 
 function squelchTranspilationWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {

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

@@ -8,7 +8,7 @@ import styled, { ThemeContext } from 'styled-components/macro'
 import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, portis, walletlink } from '../../connectors'
+import { injected, walletlink } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { clearAllTransactions } from '../../state/transactions/actions'
 import { ExternalLink, LinkStyledButton, ThemedText } from '../../theme'
@@ -181,15 +181,6 @@ function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Conne
   return (
     <IconWrapper size={16}>
       <StatusIcon connector={connector} />
-      {connector === portis && (
-        <MainWalletAction
-          onClick={() => {
-            portis.portis.showPortis()
-          }}
-        >
-          <Trans>Show Portis</Trans>
-        </MainWalletAction>
-      )}
     </IconWrapper>
   )
 }
@@ -210,10 +201,6 @@ const WalletAction = styled(ButtonSecondary)`
   }
 `
 
-const MainWalletAction = styled(WalletAction)`
-  color: ${({ theme }) => theme.primary1};
-`
-
 function renderTransactions(transactions: string[]) {
   return (
     <TransactionListWrapper>

src/components/Blocklist/index.tsx

@@ -33,6 +33,7 @@ const BLOCKED_ADDRESSES: string[] = [
   '0x5512d943ed1f7c8a43f3435c85f7ab68b30121b0',
   '0xc455f7fd3e0e12afd51fba5c106909934d8a0e4a',
   '0x629e7Da20197a5429d30da36E77d06CdF796b71A',
+  '0x7FF9cFad3877F21d41Da833E2F775dB0569eE3D9',
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {

src/components/ErrorBoundary/index.tsx

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

src/components/FeeSelector/index.tsx

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

src/components/FeeSelector/shared.tsx

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

src/components/Header/NetworkSelector.tsx

@@ -51,6 +51,16 @@ const FlyoutHeader = styled.div`
   font-weight: 400;
 `
 const FlyoutMenu = styled.div`
+  position: absolute;
+  top: 54px;
+  width: 272px;
+  z-index: 99;
+  padding-top: 10px;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    top: 40px;
+  }
+`
+const FlyoutMenuContents = styled.div`
   align-items: flex-start;
   background-color: ${({ theme }) => theme.bg0};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
@@ -61,16 +71,9 @@ const FlyoutMenu = styled.div`
   font-size: 16px;
   overflow: auto;
   padding: 16px;
-  position: absolute;
-  top: 64px;
-  width: 272px;
-  z-index: 99;
   & > *:not(:last-child) {
     margin-bottom: 12px;
   }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    top: 50px;
-  }
 `
 const FlyoutRow = styled.div<{ active: boolean }>`
   align-items: center;
@@ -252,8 +255,8 @@ export default function NetworkSelector() {
 
   const handleChainSwitch = useCallback(
     (targetChain: number, skipToggle?: boolean) => {
-      if (!library) return
-      switchToNetwork({ library, chainId: targetChain })
+      if (!library?.provider) return
+      switchToNetwork({ provider: library.provider, chainId: targetChain })
         .then(() => {
           if (!skipToggle) {
             toggle()
@@ -305,21 +308,23 @@ export default function NetworkSelector() {
   }
 
   return (
-    <SelectorWrapper ref={node as any}>
-      <SelectorControls onClick={toggle} interactive>
+    <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
+      <SelectorControls interactive>
         <SelectorLogo interactive src={info.logoUrl} />
         <SelectorLabel>{info.label}</SelectorLabel>
         <StyledChevronDown />
       </SelectorControls>
       {open && (
-        <FlyoutMenu onMouseLeave={toggle}>
-          <FlyoutHeader>
-            <Trans>Select a network</Trans>
-          </FlyoutHeader>
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} />
-          <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} />
+        <FlyoutMenu>
+          <FlyoutMenuContents>
+            <FlyoutHeader>
+              <Trans>Select a network</Trans>
+            </FlyoutHeader>
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} />
+            <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} />
+          </FlyoutMenuContents>
         </FlyoutMenu>
       )}
     </SelectorWrapper>

src/components/Identicon/StatusIcon.tsx

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

src/components/LiquidityChartRangeInput/index.tsx

@@ -9,7 +9,7 @@ import useTheme from 'hooks/useTheme'
 import { saturate } from 'polished'
 import React, { ReactNode, useCallback, useMemo } from 'react'
 import { BarChart2, CloudOff, Inbox } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
@@ -158,11 +158,7 @@ export default function LiquidityChartRangeInput({
   )
 
   if (isError) {
-    ReactGA.exception({
-      ...error,
-      category: 'Liquidity',
-      fatal: false,
-    })
+    ReactGA.event('exception', { description: error.toString(), fatal: false })
   }
 
   return (

src/components/Popups/ClaimPopup.tsx

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

src/components/Popups/SurveyPopup.tsx

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

src/components/Popups/index.tsx

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

src/components/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/SearchModal/CurrencySearch.tsx

@@ -11,7 +11,7 @@ import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
 import { tokenComparator, useSortTokensByQuery } from 'lib/hooks/useTokenList/sorting'
 import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Edit } from 'react-feather'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'

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

@@ -5,7 +5,7 @@ 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 styled, { ThemeContext } from 'styled-components/macro'
 

src/components/WalletModal/index.tsx

@@ -5,7 +5,7 @@ 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'
@@ -13,7 +13,7 @@ import { WalletConnectConnector } from 'web3-react-walletconnect-connector'
 
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { fortmatic, injected, portis } from '../../connectors'
+import { fortmatic, injected } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import usePrevious from '../../hooks/usePrevious'
@@ -228,11 +228,6 @@ export default function WalletModal({
       const option = SUPPORTED_WALLETS[key]
       // check for mobile options
       if (isMobile) {
-        //disable portis on mobile for now
-        if (option.connector === portis) {
-          return null
-        }
-
         if (!window.web3 && !window.ethereum && option.mobile) {
           return (
             <Option

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/swap/AutoRouterIcon.tsx

@@ -0,0 +1,35 @@
+import { useRef } from 'react'
+
+let uniqueId = 0
+const getUniqueId = () => uniqueId++
+
+export default function AutoRouterIcon({ className, id }: { className?: string; id?: string }) {
+  const componentIdRef = useRef(id ?? getUniqueId())
+  const componentId = `AutoRouterIconGradient${componentIdRef.current}`
+
+  return (
+    <svg
+      width="23"
+      height="20"
+      viewBox="0 0 23 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id={componentId} x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(95)">
+          <stop id="stop1" offset="0" stopColor="#2274E2" />
+          <stop id="stop1" offset="0.5" stopColor="#2274E2" />
+          <stop id="stop2" offset="1" stopColor="#3FB672" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M16 16C10 16 9 10 5 10M16 16C16 17.6569 17.3431 19 19 19C20.6569 19 22 17.6569 22 16C22 14.3431 20.6569 13 19 13C17.3431 13 16 14.3431 16 16ZM5 10C9 10 10 4 16 4M5 10H1.5M16 4C16 5.65685 17.3431 7 19 7C20.6569 7 22 5.65685 22 4C22 2.34315 20.6569 1 19 1C17.3431 1 16 2.34315 16 4Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke={`url(#${componentId})`}
+      />
+    </svg>
+  )
+}

src/components/swap/GasEstimateBadge.tsx

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

src/components/swap/RouterLabel.tsx

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

src/components/swap/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/connectors/index.ts

@@ -3,7 +3,6 @@ import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'
 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'
 
@@ -13,7 +12,6 @@ import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
 
 const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY
-const PORTIS_ID = process.env.REACT_APP_PORTIS_ID
 
 export const network = new NetworkConnector({
   urls: INFURA_NETWORK_URLS,
@@ -43,12 +41,6 @@ export const fortmatic = new FortmaticConnector({
   chainId: 1,
 })
 
-// mainnet only
-export const portis = new PortisConnector({
-  dAppId: PORTIS_ID ?? '',
-  networks: [1],
-})
-
 export const walletlink = new WalletLinkConnector({
   url: INFURA_NETWORK_URLS[SupportedChainId.MAINNET],
   appName: 'Uniswap',

src/constants/chains.ts

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

src/constants/governance.ts

@@ -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/locales.ts

@@ -35,10 +35,7 @@ export const SUPPORTED_LOCALES = [
 ]
 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

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

src/hooks/Tokens.ts

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

src/hooks/useAddTokenToMetamask.ts

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

src/hooks/useAutoSlippageTolerance.ts

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

src/hooks/useBestTrade.test.ts

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

src/hooks/useBestTrade.ts

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

src/hooks/useClientSideV3Trade.ts

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

src/hooks/useColor.ts

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

src/hooks/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/useERC20Permit.ts

@@ -10,7 +10,7 @@ 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'
 
@@ -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' },
   },

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,22 +1,25 @@
 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'
 }
 
 /**
  * Returns whether the window is currently visible to the user.
  */
 export default function useIsWindowVisible(): boolean {
-  const [focused, setFocused] = useState<boolean>(isWindowVisible())
+  const [focused, setFocused] = useState<boolean>(false)
   const listener = useCallback(() => {
     setFocused(isWindowVisible())
   }, [setFocused])
 
   useEffect(() => {
-    if (!VISIBILITY_STATE_SUPPORTED) return undefined
+    if (!isVisibilityStateSupported()) return undefined
+    setFocused((focused) => isWindowVisible())
 
     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,7 +1,7 @@
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency } from '@uniswap/sdk-core'
-import { ChainId } from '@uniswap/smart-order-router'
 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'
@@ -14,7 +14,7 @@ import { useTickLens } from './useContract'
 import { PoolState, usePool } from './usePools'
 
 const PRICE_FIXED_DIGITS = 8
-const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [ChainId.ARBITRUM_ONE, ChainId.ARBITRUM_RINKEBY]
+const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_RINKEBY]
 
 export interface TickData {
   tick: number

src/hooks/usePools.ts

@@ -1,19 +1,81 @@
 import { Interface } from '@ethersproject/abi'
-import { Currency, Token } from '@uniswap/sdk-core'
-import IUniswapV3PoolStateJson from '@uniswap/v3-core/artifacts/contracts/interfaces/pool/IUniswapV3PoolState.sol/IUniswapV3PoolState.json'
+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'
 
 import { V3_CORE_FACTORY_ADDRESSES } from '../constants/addresses'
 import { IUniswapV3PoolStateInterface } from '../types/v3/IUniswapV3PoolState'
 
-const { abi: IUniswapV3PoolStateABI } = IUniswapV3PoolStateJson
-
 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,
@@ -26,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/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 { useMemo, useRef } from 'react'
 
 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),
@@ -32,8 +32,7 @@ export default function useUSDCPrice(currency?: Currency): Price<Currency, Token
     maxHops: 2,
   })
   const v3USDCTrade = useClientSideV3Trade(TradeType.EXACT_OUTPUT, amountOut, currency)
-
-  return useMemo(() => {
+  const price = useMemo(() => {
     if (!currency || !stablecoin) {
       return undefined
     }
@@ -54,6 +53,12 @@ export default function useUSDCPrice(currency?: Currency): Price<Currency, Token
 
     return undefined
   }, [currency, stablecoin, v2USDCTrade, v3USDCTrade.trade])
+
+  const lastPrice = useRef(price)
+  if (!price || !lastPrice.current || !price.equalTo(lastPrice.current)) {
+    lastPrice.current = price
+  }
+  return lastPrice.current
 }
 
 export function useUSDCValue(currencyAmount: CurrencyAmount<Currency> | undefined | null) {
@@ -78,17 +83,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 tryParseCurrencyAmount(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/useV2Pairs.ts

@@ -1,14 +1,12 @@
 import { Interface } from '@ethersproject/abi'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
-import IUniswapV2PairJson from '@uniswap/v2-core/build/IUniswapV2Pair.json'
+import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { computePairAddress, Pair } from '@uniswap/v2-sdk'
 import { useMultipleContractSingleData } from 'lib/hooks/multicall'
 import { useMemo } from 'react'
 
 import { V2_FACTORY_ADDRESSES } from '../constants/addresses'
 
-const { abi: IUniswapV2PairABI } = IUniswapV2PairJson
-
 const PAIR_INTERFACE = new Interface(IUniswapV2PairABI)
 
 export enum PairState {

src/hooks/useV3PositionFees.ts

@@ -23,13 +23,11 @@ export function useV3PositionFees(
   const tokenIdHexString = tokenId?.toHexString()
   const latestBlockNumber = useBlockNumber()
 
-  // TODO find a way to get this into multicall
+  // we can't use multicall for this because we need to simulate the call from a specific address
   // latestBlockNumber is included to ensure data stays up-to-date every block
-  const [amounts, setAmounts] = useState<[BigNumber, BigNumber]>()
+  const [amounts, setAmounts] = useState<[BigNumber, BigNumber] | undefined>()
   useEffect(() => {
-    let stale = false
-
-    if (positionManager && tokenIdHexString && owner && typeof latestBlockNumber === 'number') {
+    if (positionManager && tokenIdHexString && owner) {
       positionManager.callStatic
         .collect(
           {
@@ -41,19 +39,15 @@ export function useV3PositionFees(
           { from: owner } // need to simulate the call as the owner
         )
         .then((results) => {
-          if (!stale) setAmounts([results.amount0, results.amount1])
+          setAmounts([results.amount0, results.amount1])
         })
     }
-
-    return () => {
-      stale = true
-    }
   }, [positionManager, tokenIdHexString, owner, latestBlockNumber])
 
   if (pool && amounts) {
     return [
-      CurrencyAmount.fromRawAmount(!asWETH ? unwrappedToken(pool.token0) : pool.token0, amounts[0].toString()),
-      CurrencyAmount.fromRawAmount(!asWETH ? unwrappedToken(pool.token1) : pool.token1, amounts[1].toString()),
+      CurrencyAmount.fromRawAmount(asWETH ? pool.token0 : unwrappedToken(pool.token0), amounts[0].toString()),
+      CurrencyAmount.fromRawAmount(asWETH ? pool.token1 : unwrappedToken(pool.token1), amounts[1].toString()),
     ]
   } else {
     return [undefined, undefined]

src/index.tsx

@@ -3,7 +3,7 @@ import 'inter-ui'
 import 'polyfills'
 import 'components/analytics'
 
-import { BlockUpdater } from 'lib/hooks/useBlockNumber'
+import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
 import { MulticallUpdater } from 'lib/state/multicall'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
@@ -40,7 +40,6 @@ function Updaters() {
       <UserUpdater />
       <ApplicationUpdater />
       <TransactionUpdater />
-      <BlockUpdater />
       <MulticallUpdater />
       <LogsUpdater />
     </>
@@ -55,11 +54,13 @@ ReactDOM.render(
           <Web3ReactProvider getLibrary={getLibrary}>
             <Web3ProviderNetwork getLibrary={getLibrary}>
               <Blocklist>
-                <Updaters />
-                <ThemeProvider>
-                  <ThemedGlobalStyle />
-                  <App />
-                </ThemeProvider>
+                <BlockNumberProvider>
+                  <Updaters />
+                  <ThemeProvider>
+                    <ThemedGlobalStyle />
+                    <App />
+                  </ThemeProvider>
+                </BlockNumberProvider>
               </Blocklist>
             </Web3ProviderNetwork>
           </Web3ReactProvider>
@@ -73,4 +74,3 @@ ReactDOM.render(
 if (process.env.REACT_APP_SERVICE_WORKER !== 'false') {
   serviceWorkerRegistration.register()
 }
-export { INFURA_NETWORK_URLS } from 'constants/infura'

src/lib/.eslintrc.json

@@ -10,6 +10,10 @@
           {
             "name": "react-feather",
             "message": "Please import from lib/icons to ensure performant usage."
+          },
+          {
+            "name": "@uniswap/smart-order-router",
+            "message": "Forbidden import; smart-order-router is lazy-loaded."
           }
         ],
         "patterns": [

src/lib/assets/fonts/index.css

@@ -1,225 +0,0 @@
-@import "~@fontsource/ibm-plex-mono/400.css";
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-cyrillic-ext-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-cyrillic-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-greek-ext-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+1F00-1FFF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-greek-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0370-03FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-vietnamese-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-latin-ext-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url("~@fontsource/inter/files/inter-latin-400-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-400-normal.woff") format("woff");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-cyrillic-ext-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-cyrillic-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-greek-ext-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+1F00-1FFF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-greek-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0370-03FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-vietnamese-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-latin-ext-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 500;
-  src: url("~@fontsource/inter/files/inter-latin-500-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-500-normal.woff") format("woff");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-cyrillic-ext-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-cyrillic-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-greek-ext-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+1F00-1FFF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-greek-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0370-03FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-vietnamese-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-latin-ext-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url("~@fontsource/inter/files/inter-latin-600-normal.woff2") format("woff2"), url("~@fontsource/inter/files/inter-all-600-normal.woff") format("woff");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-cyrillic-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-cyrillic-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-greek-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+1F00-1FFF;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-greek-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0370-03FF;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "InterVariable";
-  font-style: normal;
-  font-display: block;
-  font-weight: 100 900;
-  src: url("~@fontsource/inter/files/inter-latin-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

src/lib/assets/svg/Check.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-function SvgCheck(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <circle cx={10} cy={10} r={10} />
-      <path d="M14 7l-5.5 5.5L6 10" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export default SvgCheck

src/lib/assets/svg/Expando.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-function SvgExpando(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth={2}
-      strokeLinecap="round"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path className="expando_svg__left" d="M18 15l-6-6" />
-      <path className="expando_svg__right" d="M12 9l-6 6" />
-    </svg>
-  )
-}
-
-export default SvgExpando

src/lib/assets/svg/Logo.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react'
-
-function SvgLogo(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M4.152 1.551c-.188-.029-.196-.032-.107-.045.17-.026.57.009.846.074.644.152 1.23.542 1.856 1.235l.166.184.238-.038c1.002-.16 2.02-.033 2.873.358.235.108.605.322.65.377.016.018.043.13.06.251.064.418.033.737-.096.976-.07.13-.074.171-.027.283a.274.274 0 00.246.154c.212 0 .44-.34.545-.814l.042-.189.083.094c.457.514.815 1.214.876 1.712l.016.13-.076-.118a1.462 1.462 0 00-.435-.453c-.306-.201-.63-.27-1.486-.315-.774-.04-1.212-.106-1.646-.247-.739-.24-1.111-.558-1.989-1.702-.39-.509-.63-.79-.87-1.016-.545-.515-1.08-.785-1.765-.89z" />
-      <path d="M10.85 2.686c.019-.34.065-.565.159-.77a.825.825 0 01.077-.148c.005 0-.011.06-.036.133-.068.2-.08.472-.032.789.06.402.093.46.52.894.201.204.434.46.519.571l.154.2-.154-.143c-.188-.175-.62-.517-.716-.566-.064-.032-.074-.032-.113.007-.037.036-.044.09-.05.346-.007.399-.062.655-.194.91-.071.14-.082.11-.018-.047.048-.116.053-.168.053-.554 0-.775-.094-.962-.637-1.28a5.971 5.971 0 00-.504-.26 1.912 1.912 0 01-.246-.12c.015-.015.545.139.758.22.318.122.37.137.409.123.025-.01.038-.085.05-.305zM4.517 4.013c-.381-.522-.618-1.323-.566-1.922l.015-.185.087.015c.164.03.445.134.577.214.361.218.518.505.677 1.243.047.216.108.46.136.544.045.133.217.444.356.646.1.146.034.215-.188.195-.339-.03-.798-.345-1.094-.75zM10.386 7.9c-1.784-.713-2.412-1.333-2.412-2.378 0-.154.005-.28.012-.28.006 0 .075.05.153.113.362.288.767.411 1.889.574.66.096 1.03.173 1.373.286 1.09.359 1.763 1.087 1.924 2.08.046.288.02.828-.057 1.113-.06.225-.242.63-.29.646-.014.005-.027-.046-.03-.116-.018-.372-.208-.735-.526-1.007-.362-.309-.848-.555-2.036-1.03zM9.134 8.197a3.133 3.133 0 00-.086-.375l-.046-.135.085.095c.117.13.21.297.288.52.06.17.066.22.066.496 0 .271-.008.328-.064.48a1.518 1.518 0 01-.376.596c-.326.33-.745.512-1.35.588-.105.013-.411.035-.68.049-.679.035-1.126.108-1.527.248a.324.324 0 01-.115.027c-.016-.016.258-.178.483-.286.318-.153.635-.236 1.345-.353.35-.058.713-.129.805-.157.868-.264 1.315-.947 1.172-1.793z" />
-      <path d="M9.952 9.641c-.237-.506-.292-.995-.162-1.451.014-.05.036-.089.05-.089.013 0 .07.03.124.067.11.073.328.196.912.512.728.395 1.144.7 1.426 1.05.247.305.4.654.474 1.078.042.24.017.82-.045 1.062-.196.764-.65 1.364-1.3 1.714-.095.051-.18.093-.19.093-.009 0 .026-.087.077-.194.219-.454.244-.895.079-1.386-.102-.301-.308-.668-.724-1.289-.484-.72-.602-.913-.721-1.167zM3.25 12.374c.663-.556 1.486-.95 2.237-1.072a3.51 3.51 0 011.161.045c.48.122.91.396 1.133.721.218.319.312.596.41 1.214.038.243.08.488.092.543.073.32.216.576.392.704.28.204.764.217 1.239.033a.618.618 0 01.155-.048c.017.017-.222.176-.39.26a1.334 1.334 0 01-.648.156c-.435 0-.796-.22-1.098-.668a5.3 5.3 0 01-.296-.588c-.318-.721-.475-.94-.844-1.181-.322-.21-.737-.247-1.049-.095-.41.2-.524.72-.23 1.05a.911.911 0 00.512.266.545.545 0 00.619-.544c0-.217-.084-.34-.295-.436-.289-.129-.598.022-.597.291 0 .115.051.187.167.24.074.033.076.035.015.023-.264-.055-.326-.372-.114-.582.256-.252.784-.141.965.204.076.145.085.433.019.607-.15.39-.582.595-1.022.483-.3-.076-.421-.158-.782-.527-.627-.642-.87-.767-1.774-.907l-.174-.027.197-.165z" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.308.884C2.402 3.41 3.845 4.452 4.005 4.672c.132.182.082.346-.144.474a1.381 1.381 0 01-.515.143c-.147 0-.198-.056-.198-.056-.085-.08-.133-.066-.57-.837A132.96 132.96 0 001.45 2.67c-.032-.03-.031-.03 1.067 1.923.177.407.035.556.035.614 0 .118-.033.18-.179.343-.244.27-.353.574-.432 1.203-.088.705-.336 1.203-1.024 2.056-.402.499-.468.59-.57.792-.128.253-.163.395-.177.714-.015.339.014.557.118.88.09.284.186.47.429.844.21.323.33.563.33.657 0 .074.014.074.34.001.776-.174 1.407-.48 1.762-.857.22-.233.271-.361.273-.68.001-.208-.006-.252-.063-.372-.092-.195-.26-.358-.63-.61-.486-.33-.694-.595-.75-.96-.048-.3.007-.511.275-1.07.278-.58.347-.827.394-1.41.03-.377.071-.526.18-.646.114-.124.216-.166.498-.204.459-.063.75-.18.99-.4a.853.853 0 00.31-.652l.01-.21-.117-.134C4.098 4.004.026.5 0 .5-.005.5.133.673.308.884zm.976 9.815a.37.37 0 00-.115-.489c-.15-.1-.385-.052-.385.077 0 .04.022.069.072.094.084.043.09.091.024.19-.067.099-.061.186.015.246.123.095.297.043.389-.118zM4.925 5.999c-.215.065-.424.292-.49.53-.039.145-.016.4.043.478.096.127.188.16.439.159.49-.003.916-.212.966-.474.04-.214-.147-.51-.405-.641a.965.965 0 00-.553-.052zm.574.445c.075-.107.042-.222-.087-.3-.244-.149-.615-.026-.615.204 0 .115.193.24.37.24.118 0 .28-.07.332-.144z"
-      />
-    </svg>
-  )
-}
-
-export default SvgLogo

src/lib/assets/svg/Spinner.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react'
-
-function SvgSpinner(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <mask id="spinner_svg__a">
-        <path fill="#fff" strokeWidth={0} d="M0 0h24v24H0z" />
-        <path fill="#000" strokeWidth={0} d="M0 0h12v12H0z" />
-        <circle cx={2} cy={12} r={1} fill="#fff" strokeWidth={0} />
-        <circle cx={12} cy={2} r={1} fill="#fff" strokeWidth={0} />
-      </mask>
-      <circle cx={12} cy={12} r={10} mask="url(#spinner_svg__a)" />
-    </svg>
-  )
-}
-
-export default SvgSpinner

src/lib/assets/svg/auto_router.svg

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

src/lib/assets/svg/inline_spinner.svg

@@ -0,0 +1,35 @@
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <mask id="mask">
+        <circle cx="12" cy="12" r="10" fill="black" stroke="black" stroke-width="2" />
+        <rect width="12" height="12" fill="white" stroke-width="0" />
+        <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
+        <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
+      </mask>
+      <circle
+        cx="12"
+        cy="12"
+        r="6"
+        stroke="none"
+      />
+      <circle
+        id="track"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"
+        mask="url(#mask)"
+      />
+    </svg>

src/lib/assets/svg/spinner.svg

@@ -1,12 +1,11 @@
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask id="mask">
-        <rect width="24" height="24" fill="white" stroke-width="0" />
+        <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" />
         <rect width="12" height="12" fill="black" stroke-width="0" />
         <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
         <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
       </mask>
       <circle
-        id="circle"
         cx="12"
         cy="12"
         r="10"

src/lib/assets/svg/wallet.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V7Z" stroke="currentColor" stroke-width="2"/>
+<path d="M4 19H20C21.1046 19 22 18.1046 22 17V14C22 12.8954 21.1046 12 20 12H16C15.4477 12 14.9935 12.4624 14.7645 12.965C14.4438 13.6688 13.789 14.5 12 14.5C10.29 14.5 9.48213 13.7406 9.1936 13.0589C8.96576 12.5206 8.49905 12 7.91447 12H4C2.89543 12 2 12.8954 2 14V17C2 18.1046 2.89543 19 4 19Z" fill="currentColor"/>
+<path d="M22 13V11C22 9.89543 21.1034 9 19.9989 9C14.0294 9 9.97062 9 4.00115 9C2.89658 9 2 9.89543 2 11V13" stroke="currentColor" stroke-width="2"/>
+</svg>

src/lib/components/ActionButton.tsx

@@ -6,16 +6,16 @@ import Button from './Button'
 import Row from './Row'
 
 const StyledButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius}em;
+  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
   flex-grow: 1;
-  transition: background-color 0.25s ease-out, flex-grow 0.25s ease-out, padding 0.25s ease-out;
+  transition: background-color 0.25s ease-out, border-radius 0.25s ease-out, flex-grow 0.25s ease-out;
 
   :disabled {
     margin: -1px;
   }
 `
 
-const UpdateRow = styled(Row)``
+const ActionRow = styled(Row)``
 
 const grow = keyframes`
   from {
@@ -28,62 +28,64 @@ const grow = keyframes`
   }
 `
 
-const updateCss = css`
+const actionCss = css`
   border: 1px solid ${({ theme }) => theme.outline};
   padding: calc(0.25em - 1px);
   padding-left: calc(0.75em - 1px);
 
-  ${UpdateRow} {
+  ${ActionRow} {
     animation: ${grow} 0.25s ease-in;
+    flex-grow: 1;
+    justify-content: flex-start;
     white-space: nowrap;
   }
 
   ${StyledButton} {
-    border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
+    border-radius: ${({ theme }) => theme.borderRadius}em;
     flex-grow: 0;
     padding: 1em;
   }
 `
 
-export const Overlay = styled(Row)<{ update?: boolean }>`
+export const Overlay = styled(Row)<{ hasAction: boolean }>`
   border-radius: ${({ theme }) => theme.borderRadius}em;
   flex-direction: row-reverse;
   min-height: 3.5em;
   transition: padding 0.25s ease-out;
 
-  ${({ update }) => update && updateCss}
+  ${({ hasAction }) => hasAction && actionCss}
 `
 
-export interface ActionButtonProps {
-  color?: Color
-  disabled?: boolean
-  update?: { message: ReactNode; action: ReactNode; icon?: Icon }
-  onClick: () => void
-  onUpdate?: () => void
-  children: ReactNode
+export interface Action {
+  message: ReactNode
+  icon?: Icon
+  onClick?: () => void
+  children?: ReactNode
 }
 
-export default function ActionButton({
-  color = 'accent',
-  disabled,
-  update,
-  onClick,
-  onUpdate,
-  children,
-}: ActionButtonProps) {
+export interface BaseProps {
+  color?: Color
+  action?: Action
+}
+
+export type ActionButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
+
+export default function ActionButton({ color = 'accent', disabled, action, onClick, children }: ActionButtonProps) {
   const textColor = useMemo(() => (color === 'accent' && !disabled ? 'onAccent' : 'currentColor'), [color, disabled])
   return (
-    <Overlay update={Boolean(update)} flex align="stretch">
-      <StyledButton color={color} disabled={disabled} onClick={update ? onUpdate : onClick}>
-        <ThemedText.TransitionButton buttonSize={update ? 'medium' : 'large'} color={textColor}>
-          {update ? update.action : children}
-        </ThemedText.TransitionButton>
-      </StyledButton>
-      {update && (
-        <UpdateRow gap={0.5}>
-          <LargeIcon color="currentColor" icon={update.icon || AlertTriangle} />
-          <ThemedText.Subhead2>{update?.message}</ThemedText.Subhead2>
-        </UpdateRow>
+    <Overlay hasAction={Boolean(action)} flex align="stretch">
+      {(action ? action.onClick : true) && (
+        <StyledButton color={color} disabled={disabled} onClick={action?.onClick || onClick}>
+          <ThemedText.TransitionButton buttonSize={action ? 'medium' : 'large'} color={textColor}>
+            {action?.children || children}
+          </ThemedText.TransitionButton>
+        </StyledButton>
+      )}
+      {action && (
+        <ActionRow gap={0.5}>
+          <LargeIcon color="currentColor" icon={action.icon || AlertTriangle} />
+          <ThemedText.Subhead2>{action?.message}</ThemedText.Subhead2>
+        </ActionRow>
       )}
     </Overlay>
   )

src/lib/components/BrandedFooter.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import Row from 'lib/components/Row'
 import { Logo } from 'lib/icons'
 import styled, { brand, ThemedText } from 'lib/theme'
+import { memo } from 'react'
 
 import ExternalLink from './ExternalLink'
 
@@ -24,10 +25,10 @@ const UniswapA = styled(ExternalLink)`
   }
 `
 
-export default function BrandedFooter() {
+export default memo(function BrandedFooter() {
   return (
     <Row justify="center">
-      <UniswapA href={`https://app.uniswap.org/`}>
+      <UniswapA href={`https://uniswap.org/`}>
         <Row gap={0.25}>
           <Logo />
           <ThemedText.Caption>
@@ -37,4 +38,4 @@ export default function BrandedFooter() {
       </UniswapA>
     </Row>
   )
-}
+})

src/lib/components/Button.tsx

@@ -1,6 +1,6 @@
 import { Icon } from 'lib/icons'
-import styled, { Color } from 'lib/theme'
-import { ComponentProps } from 'react'
+import styled, { Color, css } from 'lib/theme'
+import { ComponentProps, forwardRef } from 'react'
 
 export const BaseButton = styled.button`
   background-color: transparent;
@@ -10,21 +10,31 @@ export const BaseButton = styled.button`
   cursor: pointer;
   font-size: inherit;
   font-weight: inherit;
+  height: inherit;
   line-height: inherit;
   margin: 0;
   padding: 0;
 
+  :enabled {
+    transition: filter 0.125s linear;
+  }
+
   :disabled {
     cursor: initial;
     filter: saturate(0) opacity(0.4);
   }
 `
+const transitionCss = css`
+  transition: background-color 0.125s linear, border-color 0.125s linear, filter 0.125s linear;
+`
 
-export default styled(BaseButton)<{ color?: Color }>`
+export default styled(BaseButton)<{ color?: Color; transition?: boolean }>`
+  border: 1px solid transparent;
   color: ${({ color = 'interactive', theme }) => color === 'interactive' && theme.onInteractive};
 
   :enabled {
     background-color: ${({ color = 'interactive', theme }) => theme[color]};
+    ${({ transition = true }) => transition && transitionCss};
   }
 
   :enabled:hover {
@@ -32,9 +42,8 @@ export default styled(BaseButton)<{ color?: Color }>`
   }
 
   :disabled {
-    border: 1px solid ${({ theme }) => theme.outline};
+    border-color: ${({ theme }) => theme.outline};
     color: ${({ theme }) => theme.secondary};
-    cursor: initial;
   }
 `
 
@@ -55,10 +64,12 @@ interface IconButtonProps {
   iconProps?: ComponentProps<Icon>
 }
 
-export function IconButton({ icon: Icon, iconProps, ...props }: IconButtonProps & ComponentProps<typeof BaseButton>) {
-  return (
-    <SecondaryButton {...props}>
-      <Icon {...iconProps} />
-    </SecondaryButton>
-  )
-}
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps & ComponentProps<typeof BaseButton>>(
+  function IconButton({ icon: Icon, iconProps, ...props }: IconButtonProps & ComponentProps<typeof BaseButton>, ref) {
+    return (
+      <SecondaryButton {...props} ref={ref}>
+        <Icon {...iconProps} />
+      </SecondaryButton>
+    )
+  }
+)

src/lib/components/Dialog.tsx

@@ -1,8 +1,8 @@
 import 'wicg-inert'
 
-import useUnmount from 'lib/hooks/useUnmount'
 import { X } from 'lib/icons'
 import styled, { Color, Layer, ThemeProvider } from 'lib/theme'
+import { delayUnmountForAnimation } from 'lib/utils/animations'
 import { createContext, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
@@ -40,7 +40,10 @@ export function Provider({ value, children }: ProviderProps) {
     }
   }, [active])
   return (
-    <div ref={ref}>
+    <div
+      ref={ref}
+      style={{ isolation: 'isolate' }} // creates a new stacking context, preventing the dialog from intercepting non-dialog clicks
+    >
       <Context.Provider value={context}>{children}</Context.Provider>
     </div>
   )
@@ -73,13 +76,12 @@ export const Modal = styled.div<{ color: Color }>`
   border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0.5em);
+  height: 100%;
   left: 0;
-  margin: 0.25em;
   overflow: hidden;
   position: absolute;
   top: 0;
-  width: calc(100% - 0.5em);
+  width: 100%;
   z-index: ${Layer.DIALOG};
 `
 
@@ -95,8 +97,10 @@ export default function Dialog({ color, children, onClose = () => void 0 }: Dial
     context.setActive(true)
     return () => context.setActive(false)
   }, [context])
-  const dialog = useRef<HTMLDivElement>(null)
-  useUnmount(dialog)
+
+  const modal = useRef<HTMLDivElement>(null)
+  useEffect(() => delayUnmountForAnimation(modal), [])
+
   useEffect(() => {
     const close = (e: KeyboardEvent) => e.key === 'Escape' && onClose?.()
     document.addEventListener('keydown', close, true)
@@ -106,9 +110,11 @@ export default function Dialog({ color, children, onClose = () => void 0 }: Dial
     context.element &&
     createPortal(
       <ThemeProvider>
-        <Modal className="dialog" color={color} ref={dialog}>
-          <OnCloseContext.Provider value={onClose}>{children}</OnCloseContext.Provider>
-        </Modal>
+        <OnCloseContext.Provider value={onClose}>
+          <Modal color={color} ref={modal}>
+            {children}
+          </Modal>
+        </OnCloseContext.Provider>
       </ThemeProvider>,
       context.element
     )

src/lib/components/Error/ErrorBoundary.tsx

@@ -36,7 +36,7 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
             error={this.state.error}
             header={<Trans>Something went wrong.</Trans>}
             action={<Trans>Reload the page</Trans>}
-            onAction={() => window.location.reload()}
+            onClick={() => window.location.reload()}
           />
         </Dialog>
       )

src/lib/components/Error/ErrorDialog.tsx

@@ -1,17 +1,14 @@
 import { Trans } from '@lingui/macro'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import { AlertTriangle, Expando, Icon, Info, LargeIcon } from 'lib/icons'
+import ActionButton from 'lib/components/ActionButton'
+import Column from 'lib/components/Column'
+import Expando from 'lib/components/Expando'
+import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
 import styled, { Color, ThemedText } from 'lib/theme'
-import { ReactNode, useState } from 'react'
-
-import ActionButton from '../ActionButton'
-import { IconButton } from '../Button'
-import Column from '../Column'
-import Row from '../Row'
-import Rule from '../Rule'
+import { ReactNode, useCallback, useState } from 'react'
 
 const HeaderIcon = styled(LargeIcon)`
   flex-grow: 1;
+  transition: height 0.25s, width 0.25s;
 
   svg {
     transition: height 0.25s, width 0.25s;
@@ -34,7 +31,6 @@ export function StatusHeader({ icon: Icon, iconColor, iconSize = 4, children }:
           {children}
         </Column>
       </Column>
-      <Rule />
     </>
   )
 }
@@ -48,52 +44,18 @@ const ErrorHeader = styled(Column)<{ open: boolean }>`
     transition: max-height 0.25s;
   }
 `
-const ErrorColumn = styled(Column)``
-const ExpandoColumn = styled(Column)<{ open: boolean }>`
-  flex-grow: ${({ open }) => (open ? 2 : 0)};
-  transition: flex-grow 0.25s, gap 0.25s;
-
-  ${Rule} {
-    margin-bottom: ${({ open }) => (open ? 0 : 0.75)}em;
-    transition: margin-bottom 0.25s;
-  }
-
-  ${ErrorColumn} {
-    flex-basis: 0;
-    flex-grow: ${({ open }) => (open ? 1 : 0)};
-    overflow-y: hidden;
-    position: relative;
-    transition: flex-grow 0.25s;
-
-    ${Column} {
-      height: 100%;
-      padding: ${({ open }) => (open ? '0.5em 0' : 0)};
-      transition: padding 0.25s;
-
-      :after {
-        background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
-        bottom: 0;
-        content: '';
-        height: 0.75em;
-        pointer-events: none;
-        position: absolute;
-        width: calc(100% - 1em);
-      }
-    }
-  }
-`
 
 interface ErrorDialogProps {
   header?: ReactNode
   error: Error
   action: ReactNode
-  onAction: () => void
+  onClick: () => void
 }
 
-export default function ErrorDialog({ header, error, action, onAction }: ErrorDialogProps) {
+export default function ErrorDialog({ header, error, action, onClick }: ErrorDialogProps) {
   const [open, setOpen] = useState(false)
-  const [details, setDetails] = useState<HTMLDivElement | null>(null)
-  const scrollbar = useScrollbar(details)
+  const onExpand = useCallback(() => setOpen((open) => !open), [])
+
   return (
     <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
       <StatusHeader icon={AlertTriangle} iconColor="error" iconSize={open ? 3 : 4}>
@@ -104,27 +66,15 @@ export default function ErrorDialog({ header, error, action, onAction }: ErrorDi
           <ThemedText.Body2>{header}</ThemedText.Body2>
         </ErrorHeader>
       </StatusHeader>
-      <Row>
-        <Row gap={0.5}>
-          <Info color="secondary" />
-          <ThemedText.Subhead2 color="secondary">
-            <Trans>Error details</Trans>
-          </ThemedText.Subhead2>
-        </Row>
-        <IconButton color="secondary" onClick={() => setOpen(!open)} icon={Expando} iconProps={{ open }} />
-      </Row>
-      <ExpandoColumn flex align="stretch" open={open}>
-        <Rule />
-        <ErrorColumn>
-          <Column gap={0.5} ref={setDetails} css={scrollbar}>
-            <ThemedText.Code>
-              {error.name}
-              {error.message ? `: ${error.message}` : ''}
-            </ThemedText.Code>
-          </Column>
-        </ErrorColumn>
-        <ActionButton onClick={onAction}>{action}</ActionButton>
-      </ExpandoColumn>
+      <Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
+        <Expando title={<Trans>Error details</Trans>} open={open} onExpand={onExpand} height={7.5}>
+          <ThemedText.Code userSelect>
+            {error.name}
+            {error.message ? `: ${error.message}` : ''}
+          </ThemedText.Code>
+        </Expando>
+        <ActionButton onClick={onClick}>{action}</ActionButton>
+      </Column>
     </Column>
   )
 }

src/lib/components/Error/WidgetsPropsValidator.tsx

@@ -1,30 +0,0 @@
-import { SUPPORTED_LOCALES } from 'constants/locales'
-import { WidgetProps } from 'lib/components/Widget'
-import { IntegrationError } from 'lib/errors'
-import { PropsWithChildren, useEffect } from 'react'
-
-export default function WidgetsPropsValidator(props: PropsWithChildren<WidgetProps>) {
-  const { jsonRpcEndpoint, provider } = props
-
-  useEffect(() => {
-    if (!provider && !jsonRpcEndpoint) {
-      throw new IntegrationError('This widget requires a provider or jsonRpcEndpoint.')
-    }
-  }, [provider, jsonRpcEndpoint])
-
-  const { width } = props
-  useEffect(() => {
-    if (width && width < 300) {
-      throw new IntegrationError(`Set widget width to at least 300px. (You set it to ${width}.)`)
-    }
-  }, [width])
-
-  const { locale } = props
-  useEffect(() => {
-    if (locale && locale !== 'pseudo' && !SUPPORTED_LOCALES.includes(locale)) {
-      console.warn('Unsupported locale: ', locale)
-    }
-  }, [locale])
-
-  return <>{props.children}</>
-}

src/lib/components/EtherscanLink.tsx

@@ -0,0 +1,38 @@
+import { SupportedChainId } from 'constants/chains'
+import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
+import { Link } from 'lib/icons'
+import styled, { Color } from 'lib/theme'
+import { ReactNode, useMemo } from 'react'
+import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
+
+import ExternalLink from './ExternalLink'
+import Row from './Row'
+
+const StyledExternalLink = styled(ExternalLink)<{ color: Color }>`
+  color: ${({ theme, color }) => theme[color]};
+  text-decoration: none;
+`
+
+interface EtherscanLinkProps {
+  type: ExplorerDataType
+  data?: string
+  color?: Color
+  children: ReactNode
+}
+
+export default function EtherscanLink({ data, type, color = 'currentColor', children }: EtherscanLinkProps) {
+  const { chainId } = useActiveWeb3React()
+  const url = useMemo(
+    () => data && getExplorerLink(chainId || SupportedChainId.MAINNET, data, type),
+    [chainId, data, type]
+  )
+
+  return (
+    <StyledExternalLink href={url} color={color} target="_blank">
+      <Row gap={0.25}>
+        {children}
+        {url && <Link />}
+      </Row>
+    </StyledExternalLink>
+  )
+}

src/lib/components/Expando.tsx

@@ -0,0 +1,66 @@
+import { IconButton } from 'lib/components/Button'
+import Column from 'lib/components/Column'
+import Row from 'lib/components/Row'
+import Rule from 'lib/components/Rule'
+import useScrollbar from 'lib/hooks/useScrollbar'
+import { Expando as ExpandoIcon } from 'lib/icons'
+import styled from 'lib/theme'
+import { PropsWithChildren, ReactNode, useState } from 'react'
+
+const HeaderColumn = styled(Column)`
+  transition: gap 0.25s;
+`
+
+const ExpandoColumn = styled(Column)<{ height: number; open: boolean }>`
+  height: ${({ height, open }) => (open ? height : 0)}em;
+  overflow: hidden;
+  position: relative;
+  transition: height 0.25s, padding 0.25s;
+
+  :after {
+    background: linear-gradient(transparent, ${({ theme }) => theme.dialog});
+    bottom: 0;
+    content: '';
+    height: 0.75em;
+    pointer-events: none;
+    position: absolute;
+    width: calc(100% - 1em);
+  }
+`
+
+const InnerColumn = styled(Column)<{ height: number }>`
+  height: ${({ height }) => height}em;
+  padding: 0.5em 0;
+`
+
+interface ExpandoProps {
+  title: ReactNode
+  open: boolean
+  onExpand: () => void
+  // The absolute height of the expanded container, in em.
+  height: number
+}
+
+/** A scrollable Expando with an absolute height. */
+export default function Expando({ title, open, onExpand, height, children }: PropsWithChildren<ExpandoProps>) {
+  const [scrollingEl, setScrollingEl] = useState<HTMLDivElement | null>(null)
+  const scrollbar = useScrollbar(scrollingEl)
+  return (
+    <Column>
+      <HeaderColumn gap={open ? 0.5 : 0.75}>
+        <Rule />
+        <Row>
+          {title}
+          <IconButton color="secondary" onClick={onExpand} icon={ExpandoIcon} iconProps={{ open }} />
+        </Row>
+        <Rule />
+      </HeaderColumn>
+      <ExpandoColumn open={open} height={height}>
+        <InnerColumn flex align="stretch" height={height} ref={setScrollingEl} css={scrollbar}>
+          {children}
+        </InnerColumn>
+      </ExpandoColumn>
+    </Column>
+  )
+  return null
+}

src/lib/components/ExternalLink.tsx

@@ -8,7 +8,7 @@ export default function ExternalLink({
   href,
   rel = 'noopener noreferrer',
   ...rest
-}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
+}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href?: string }) {
   return (
     <a target={target} rel={rel} href={href} {...rest}>
       {rest.children}

src/lib/components/Input.tsx

@@ -1,6 +1,7 @@
-import JSBI from 'jsbi'
+import { loadingOpacity } from 'lib/css/loading'
 import styled, { css } from 'lib/theme'
-import { forwardRef, HTMLProps, useCallback, useEffect, useState } from 'react'
+import { transparentize } from 'polished'
+import { ChangeEvent, forwardRef, HTMLProps, useCallback } from 'react'
 
 const Input = styled.input`
   -webkit-appearance: textfield;
@@ -35,6 +36,16 @@ const Input = styled.input`
   ::placeholder {
     color: ${({ theme }) => theme.secondary};
   }
+
+  :enabled {
+    transition: color 0.125s linear;
+  }
+
+  :disabled {
+    // Overrides WebKit's override of input:disabled color.
+    -webkit-text-fill-color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
+    color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
+  }
 `
 
 export default Input
@@ -77,42 +88,23 @@ interface EnforcedNumericInputProps extends NumericInputProps {
   enforcer: (nextUserInput: string) => string | null
 }
 
-function isNumericallyEqual(a: string, b: string) {
-  const [aInteger, aDecimal] = a.split('.')
-  const [bInteger, bDecimal] = b.split('.')
-  return (
-    JSBI.equal(JSBI.BigInt(aInteger ?? 0), JSBI.BigInt(bInteger ?? 0)) &&
-    JSBI.equal(JSBI.BigInt(aDecimal ?? 0), JSBI.BigInt(bDecimal ?? 0))
-  )
-}
-
 const NumericInput = forwardRef<HTMLInputElement, EnforcedNumericInputProps>(function NumericInput(
   { value, onChange, enforcer, pattern, ...props }: EnforcedNumericInputProps,
   ref
 ) {
-  const [state, setState] = useState(value ?? '')
-  useEffect(() => {
-    if (!isNumericallyEqual(state, value)) {
-      setState(value ?? '')
-    }
-  }, [value, state, setState])
-
   const validateChange = useCallback(
-    (event) => {
-      const nextInput = enforcer(event.target.value.replace(/,/g, '.'))
-      if (nextInput !== null) {
-        setState(nextInput ?? '')
-        if (!isNumericallyEqual(nextInput, value)) {
-          onChange(nextInput)
-        }
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const nextInput = enforcer(event.target.value.replace(/,/g, '.'))?.replace(/^0+$/, '0')
+      if (nextInput !== undefined) {
+        onChange(nextInput)
       }
     },
-    [value, onChange, enforcer]
+    [enforcer, onChange]
   )
 
   return (
     <Input
-      value={state}
+      value={value}
       onChange={validateChange}
       // universal input options
       inputMode="decimal"

src/lib/components/Popover.tsx

@@ -14,14 +14,16 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   border: 1px solid ${({ theme }) => theme.outline};
   border-radius: 0.5em;
   opacity: ${(props) => (props.show ? 1 : 0)};
-  padding: 8px;
+  padding: 10px 12px;
   transition: visibility 0.25s linear, opacity 0.25s linear;
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   z-index: ${Layer.TOOLTIP};
 `
 
 const Reference = styled.div`
+  align-self: flex-start;
   display: inline-block;
+  height: 1em;
 `
 
 const Arrow = styled.div`

src/lib/components/Rule.tsx

@@ -6,6 +6,10 @@ const Rule = styled.hr<{ padded?: true; scrollingEdge?: 'top' | 'bottom' }>`
   margin: 0 ${({ padded }) => (padded ? '0.75em' : 0)};
   margin-bottom: ${({ scrollingEdge }) => (scrollingEdge === 'bottom' ? -1 : 0)}px;
   margin-top: ${({ scrollingEdge }) => (scrollingEdge !== 'bottom' ? -1 : 0)}px;
+
+  // Integrators will commonly modify hr width - this overrides any modifications within the widget.
+  max-width: auto;
+  width: auto;
 `
 
 export default Rule

src/lib/components/Swap/Input.tsx

@@ -1,23 +1,33 @@
-import { Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { useUSDCValue } from 'hooks/useUSDCPrice'
-import { useAtomValue } from 'jotai/utils'
-import { loadingOpacityCss } from 'lib/css/loading'
-import { useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { loadingTransitionCss } from 'lib/css/loading'
+import {
+  useIsSwapFieldIndependent,
+  useSwapAmount,
+  useSwapCurrency,
+  useSwapCurrencyAmount,
+  useSwapInfo,
+} from 'lib/hooks/swap'
 import { usePrefetchCurrencyColor } from 'lib/hooks/useCurrencyColor'
-import { Field, independentFieldAtom } from 'lib/state/swap'
+import { Field } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
 import { useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { maxAmountSpend } from 'utils/maxAmountSpend'
 
 import Column from '../Column'
 import Row from '../Row'
 import TokenImg from '../TokenImg'
 import TokenInput from './TokenInput'
 
-const LoadingSpan = styled.span<{ $loading: boolean }>`
-  ${loadingOpacityCss};
+export const USDC = styled(Row)`
+  ${loadingTransitionCss};
+`
+
+export const Balance = styled(ThemedText.Body2)<{ focused: boolean }>`
+  opacity: ${({ focused }) => (focused ? 1 : 0)};
+  transition: opacity 0.25s ${({ focused }) => (focused ? 'ease-in' : 'ease-out')};
 `
 
 const InputColumn = styled(Column)<{ approved?: boolean }>`
@@ -30,65 +40,90 @@ const InputColumn = styled(Column)<{ approved?: boolean }>`
   }
 `
 
-interface InputProps {
-  disabled?: boolean
+export interface InputProps {
+  disabled: boolean
+  focused: boolean
 }
 
-export default function Input({ disabled }: InputProps) {
+interface UseFormattedFieldAmountArguments {
+  disabled: boolean
+  currencyAmount?: CurrencyAmount<Currency>
+  fieldAmount?: string
+}
+
+export function useFormattedFieldAmount({ disabled, currencyAmount, fieldAmount }: UseFormattedFieldAmountArguments) {
+  return useMemo(() => {
+    if (disabled) {
+      return ''
+    }
+    if (fieldAmount !== undefined) {
+      return fieldAmount
+    }
+    if (currencyAmount) {
+      return currencyAmount.toSignificant(6)
+    }
+    return ''
+  }, [disabled, currencyAmount, fieldAmount])
+}
+
+export default function Input({ disabled, focused }: InputProps) {
   const { i18n } = useLingui()
   const {
+    [Field.INPUT]: { balance, amount: tradeCurrencyAmount, usdc },
     trade: { state: tradeState },
-    currencyBalances: { [Field.INPUT]: balance },
-    currencyAmounts: { [Field.INPUT]: inputCurrencyAmount },
   } = useSwapInfo()
-  const inputUSDC = useUSDCValue(inputCurrencyAmount)
 
-  const [swapInputAmount, updateSwapInputAmount] = useSwapAmount(Field.INPUT)
-  const [swapInputCurrency, updateSwapInputCurrency] = useSwapCurrency(Field.INPUT)
+  const [inputAmount, updateInputAmount] = useSwapAmount(Field.INPUT)
+  const [inputCurrency, updateInputCurrency] = useSwapCurrency(Field.INPUT)
+  const inputCurrencyAmount = useSwapCurrencyAmount(Field.INPUT)
 
   // extract eagerly in case of reversal
-  usePrefetchCurrencyColor(swapInputCurrency)
+  usePrefetchCurrencyColor(inputCurrency)
 
-  const isTradeLoading = useMemo(
-    () => TradeState.LOADING === tradeState || TradeState.SYNCING === tradeState,
-    [tradeState]
-  )
-  const isDependentField = useAtomValue(independentFieldAtom) !== Field.INPUT
-  const isLoading = isDependentField && isTradeLoading
+  const isRouteLoading = disabled || tradeState === TradeState.SYNCING || tradeState === TradeState.LOADING
+  const isDependentField = !useIsSwapFieldIndependent(Field.INPUT)
+  const isLoading = isRouteLoading && isDependentField
 
   //TODO(ianlapham): mimic logic from app swap page
   const mockApproved = true
 
-  const onMax = useMemo(() => {
-    if (balance?.greaterThan(0)) {
-      return () => updateSwapInputAmount(balance.toExact())
-    }
-    return
-  }, [balance, updateSwapInputAmount])
+  // account for gas needed if using max on native token
+  const max = useMemo(() => {
+    const maxAmount = maxAmountSpend(balance)
+    return maxAmount?.greaterThan(0) ? maxAmount.toExact() : undefined
+  }, [balance])
+
+  const balanceColor = useMemo(() => {
+    const insufficientBalance =
+      balance &&
+      (inputCurrencyAmount ? inputCurrencyAmount.greaterThan(balance) : tradeCurrencyAmount?.greaterThan(balance))
+    return insufficientBalance ? 'error' : undefined
+  }, [balance, inputCurrencyAmount, tradeCurrencyAmount])
+
+  const amount = useFormattedFieldAmount({
+    disabled,
+    currencyAmount: tradeCurrencyAmount,
+    fieldAmount: inputAmount,
+  })
 
   return (
     <InputColumn gap={0.5} approved={mockApproved}>
-      <Row>
-        <ThemedText.Subhead2 color="secondary">
-          <Trans>Trading</Trans>
-        </ThemedText.Subhead2>
-      </Row>
       <TokenInput
-        currency={swapInputCurrency}
-        amount={(swapInputAmount !== undefined ? swapInputAmount : inputCurrencyAmount?.toSignificant(6)) ?? ''}
+        currency={inputCurrency}
+        amount={amount}
+        max={max}
         disabled={disabled}
-        onMax={onMax}
-        onChangeInput={updateSwapInputAmount}
-        onChangeCurrency={updateSwapInputCurrency}
+        onChangeInput={updateInputAmount}
+        onChangeCurrency={updateInputCurrency}
         loading={isLoading}
       >
-        <ThemedText.Body2 color="secondary">
+        <ThemedText.Body2 color="secondary" userSelect>
           <Row>
-            <LoadingSpan $loading={isLoading}>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</LoadingSpan>
+            <USDC isLoading={isRouteLoading}>{usdc ? `$${formatCurrencyAmount(usdc, 6, 'en', 2)}` : '-'}</USDC>
             {balance && (
-              <ThemedText.Body2 color={inputCurrencyAmount?.greaterThan(balance) ? 'error' : undefined}>
-                Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
-              </ThemedText.Body2>
+              <Balance color={balanceColor} focused={focused}>
+                Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
+              </Balance>
             )}
           </Row>
         </ThemedText.Body2>