chore: merge in latest changes from main (#4108)

* refactor: remove hideRouteDiagram prop (#3763)

* fix: Revert "refactor: remove coinbase wallet resetState" (#4081)

Revert "refactor: remove coinbase wallet resetState (#4024)"

This reverts commit e36722c.

* feat: add support for Celo (#3915)

* feat: Support for Celo

* fix: wrong condition

* combine celo and alfajores lists

* use celo erc20 representation

* fix: refactor infura.ts to networks.ts & add celo to rpc urls

* feature: add celo contract addresses
fix: remove celo from supported gas estimate chains until feature is available

* refactor: useUSDCPrice to useStablecoinPrice
fix: add celo to supported gas estimate chains

* fix: use unique factory address for getting pool address

* fix: darkmode background graident

* fix: removing a comment left behind

* fix: remove bad import

* fix: remove dead link until the Celo is live on info.uniswap.org

* fix: add asset to common bases & minor refactoring

* fix: celo info links point to root info.uniswap.org

* fix: change celo token bridge to portal

* fix: update redux-multicall to latest version

* refactor: for code readability

* fix: celo banner colors & remove unused alternative logo

* fix: change celo token list to hosted version

* fix: update celo banner colors

* fix: move celo to the bottom of the network selector list

* fix: dedup dependencies @uniswap/router-sdk @uniswap/v3-sdk

* fix: refactoring + move Celo above L2s

* fix: update celo contract addresses

* fix: update celo subgraph

* fix: update v3-sdk and smart-order-router versions

* fix: move Celo to the bottom of the network selector list

* fix: downgrade smart-order-router and add casting fix

* fix: downgrade smart-order-router and add casting fix

* fix: resolve Pool dependency

* fix: bridge chain id types

* fix: explorer link test

* fix: use quoter v2 ABI in useClientSideV3Trade fro Celo

* fix: update connection "infura_rpc" to networks

* fix: revert yarn.lock and force install

* fix: dedup router and v3 sdk

* refactor: mv quoter v2 to client side v3 trade

* build: dedup lockfile

* feature: add portal ether to common bases

* fix: add comment for chains that use QuoterV2

* fix: use token as native asset

* fix: supply correct factory address to getPoolAddress call & refactor nativeOnChain method

* feature: adjust celo tokens presetned

* fix: update celo explorer to celoscan

* fix: celo token casting

* fix: celo celo explorer it

* fix: celo chain info should be consistent with block explorer used.

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* fix: revert "fix button jump on currency panel" (#4083)

fix padding

* fix: unsupported chain displays message instead of crash (#4054)

* made initial changes for pools page displaying w/ unsupported chains
* condensed styling
* added chain validation to CTACards and wrote tests for both CTAcards and Pools page
* linted changes
* switched from snapshot to text matching tests
* switched test to use check for text instead of testid

* fix: add crossplatform `prei18n-extract` script (#3728)

* fix: 🐛 add crossplatform `prei18n-extract` script

* fix: 🚨 add newline

* Revert "fix: 🐛 add crossplatform `prei18n-extract` script"

This reverts commit 201bd23.

* build: 📦 add `shx` as dev dep, use it in `prei18n:extract` script

* fix: 🐛 use platform-specific commands for prei18n-extract

* chore(i18n): new Crowdin translations (#4084)

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

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

* feat: implement trace framework for analytics (#4060)

* init commit

* add amplitude ts sdk to package.json

* add more comments and documentation

* respond to vm comments

* respond to cmcewen comments

* fix: remove unused constants

* init commit

* adapt to web

* add optional event properties to trace

* correct telemetry to analytics

* change telemetry to analytics in doc

* fix: respond to cmcewen comments + initialize analytics in app.tsx + add missing return statement

* respond to zzmp comments

* fixes

* eliminate unnecessary state

* respond to part of zzmp comments

* respond to zzmp comments round 2

* fixes

* respond to zzmp comments

* refactor: wallet specific Option components (#4065)

* refactor: wallet specific Option components

* fix

* fix

* fix coinbase wallet logic

* injected logic

* remove wallet.ts

* install metamask

* move all into InjectedOption

* fix mobile metamask

* wip

* more mocking

* more test fixes

* refactor

* more special casing

* isMetaMask

* simplify components

* fix imports

* fix coinbase wallet

* test fix

* fix connectors changing

* Revert "fix connectors changing"

This reverts commit 2acfe64.

* more to typescript logic instead of jsx

* chore(i18n): new Crowdin translations (#4090)

* build: upgrade @typescript-eslint (#4095)

build: update @typescript-eslint

* build: update caniuse-lite (#4093)

* test: enforce deps deduplication (#4097)

* build: use fewer babel versions

* build: dedup

* test: test deps dedups

* fix: test.yml

* fix: typo

* test: failing

* fix: dedup

* fix: dedup

* test: comment dedup tests

* chore: whitespace

* feat: implement token selector events (#4067)

* init commit

* add amplitude ts sdk to package.json

* add more comments and documentation

* respond to vm comments

* respond to cmcewen comments

* fix: remove unused constants

* init commit

* adapt to web

* add optional event properties to trace

* correct telemetry to analytics

* change telemetry to analytics in doc

* fix: respond to cmcewen comments + initialize analytics in app.tsx + add missing return statement

* init commit

* respond to zzmp comments

* add token selected event

* fixes

* eliminate unnecessary state

* respond to part of zzmp comments

* respond to zzmp comments round 2

* fixes

* respond to zzmp comments

* add imported token event and other fixes

* also log onKeyPress for suggested tokens

* respond to cmcewen comments

* chore: updates web3-react, adds key for changing connector order (#4085)

* fix connectors changing

* update package

* add connection name

* rename file

* de-dupe

* cb wallet fix

* fix

* yarn change

* log the key

* re-order connections

* memoize the key

* some updates

* rm console

* prevent memory leak

Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

* feat: implement-page-viewed-event-for-all-main-pages-of-app (#4089)

* init commit: initial constants for pages, implement vote page viewed

* implement swap

* implement pool

* remove charts

* simplify shouldLogImpression

* chore: upgrade to react 18 (#3992)

* chore: upgrade to react 18

* fix: update tests

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* fix: revert to prev commmit

* rebase

* rebase

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* rebase

* fix: rebase

* fix

* eslint fix

* fix: package.json changes

* fix: package.json changes

* fix yarn lock

* fix version package.json

* fix: downgrade react-router-dom to original

* fix: undo modification of .github/workflows/release.yaml

* fix: revert cypress testing version update

* rebase

* rebase

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* rebase

* chore: upgrade to react 18

* fix: update tests

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* fix

* eslint fix

* fix: package.json changes

* fix: package.json changes

* fix yarn lock

* fix version package.json

* fix: downgrade react-router-dom to original

* fix: undo modification of .github/workflows/release.yaml

* fix: revert cypress testing version update

* fix

* fix: error boundary change

* yarn.lock change

* fix: cypress tests finally passing due to zzmp redux multicall fix HOORAY

* undo service worker changes

* build: dedup lockfile

* yarn.lock + lint

* update snapshot tests

* checkpoint

* yarn.lock

* fix: fix type errors during build

* fixes

* fix yarn.lock

* dedup yarn

* fix: import react components explicitly instead of all of react

* dedup

* yarn.lock

* yarn.lock

* dedup

* yarn

* dedup

* dedupe use-sync-external-store

* fix build issues

* dedup use-sync-external-store

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* chore(web3-react): fix connectEagerly for MetaMask mobile (#4101)

* chore(web3-react): fix connectEagerly for MetaMask mobile

* fix

* build: pause deploy (#4102)

* fix: update styled-components in package.json to latest to remove react invalid hook call warnings (#4103)

* fix warning vig found by updating styled-components

* revert unnecessary yarn.lock changes

* reduce unnecessary changes

* dedup

* manual fix and dedup of yarn.lock

* manually dedup @emotion/is-prop-valid

* update snapshot tests

* build: upgrade prettier to v2.7.1 (#4109)

* style: prettier based on v2.2

* 2.7.1 instead?

* npx

* ^

* add celo chain text colors

Co-authored-by: Anas Yousef <anas.y0807@gmail.com>
Co-authored-by: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>
Co-authored-by: Jesse <31524583+Jesse-Sawa@users.noreply.github.com>
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
Co-authored-by: Kaylee George <62825936+kayleegeorge@users.noreply.github.com>
Co-authored-by: cartcrom <39385577+cartcrom@users.noreply.github.com>
Co-authored-by: Bruno Crosier <bruno.crosier@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
Co-authored-by: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

Author: 13 people

.github/dependabot.yml

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

.github/workflows/crowdin-sync.yaml

@@ -28,6 +28,6 @@ jobs:
           create_pull_request: true
           pull_request_title: 'chore(i18n): new Crowdin translations'
           localization_branch_name: l10n_crowdin
-          commit_message: "chore(i18n): synchronize translations from crowdin [skip ci]"
+          commit_message: 'chore(i18n): synchronize translations from crowdin [skip ci]'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -1,7 +1,8 @@
 name: Release
 on:
-  schedule:
-    - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
+  # Auto-deploy is disabled while react 18 upgrade is tested further.
+  # schedule:
+  #   - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
   # manual trigger
   workflow_dispatch:
 
@@ -70,7 +71,7 @@ jobs:
         uses: uniswap/convert-cidv0-cidv1@v1.0.0
         with:
           cidv0: ${{ steps.pinata.outputs.hash }}
-      
+
       - uses: actions/cache@v3
         id: cypress-cache
         with:

.github/workflows/test.yml

@@ -18,6 +18,17 @@ jobs:
       - uses: ./.github/actions/setup
       - run: yarn lint
 
+  deps-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      # Test that deps satisfy both "fewer" and "highest" strategies. This is to ensure we are
+      # up-to-date ("highest") while avoiding increasing package size ("fewer").
+      # These are readonly (--list) and explicitly exclude packages which only satisfy one strategy.
+      - run: npx yarn-deduplicate --strategy=fewer --list --fail --exclude commander safe-buffer
+      - run: npx yarn-deduplicate --strategy=highest --list --fail --exclude commander safe-buffer
+
   unit-tests:
     runs-on: ubuntu-latest
     steps:
@@ -47,7 +58,7 @@ jobs:
           key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
       - if: steps.cypress-cache.outputs.cache-hit != 'true'
         run: yarn cypress install
-  
+
   cypress-test-matrix:
     needs: cypress-build
     runs-on: ubuntu-latest

README.md

@@ -48,4 +48,4 @@ The Uniswap Interface supports swapping, adding liquidity, removing liquidity an
 ## Accessing Uniswap V1
 
 The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
-linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

cypress/e2e/swap.test.ts

@@ -1,4 +1,4 @@
-describe('Swap', () => {
+describe.skip('Swap', () => {
   beforeEach(() => {
     cy.visit('/swap').get('#swap-currency-input .token-amount-input')
   })

package.json

@@ -9,7 +9,7 @@
     "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
     "graphql:generate": "graphql-codegen --config codegen.yml",
-    "prei18n:extract": "touch src/locales/en-US.po",
+    "prei18n:extract": "node prei18n-extract.js",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
@@ -61,9 +61,8 @@
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1",
     "@typechain/ethers-v5": "^7.0.0",
     "@types/array.prototype.flat": "^1.2.1",
     "@types/array.prototype.flatmap": "^1.2.2",
@@ -76,19 +75,19 @@
     "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.5",
     "@types/qs": "^6.9.2",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.0.0",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.7",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.1.25",
     "@types/testing-library__cypress": "^5.0.5",
     "@types/ua-parser-js": "^0.7.35",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^4",
+    "@typescript-eslint/parser": "^4",
     "cypress": "^10.1.0",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
@@ -110,9 +109,9 @@
     "@coinbase/wallet-sdk": "^3.3.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",
+    "@lingui/core": "^3.14.0",
+    "@lingui/macro": "^3.14.0",
+    "@lingui/react": "^3.14.0",
     "@metamask/jazzicon": "^2.0.0",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
@@ -123,7 +122,7 @@
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/redux-multicall": "^1.1.5",
-    "@uniswap/router-sdk": "^1.0.3",
+    "@uniswap/router-sdk": "^1.0.6",
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/smart-order-router": "^2.5.26",
     "@uniswap/token-lists": "^1.0.0-beta.30",
@@ -132,14 +131,14 @@
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@uniswap/v3-sdk": "^3.8.2",
+    "@uniswap/v3-sdk": "^3.9.0",
     "@walletconnect/ethereum-provider": "1.7.1",
     "@web3-react/coinbase-wallet": "^8.0.34-beta.0",
-    "@web3-react/core": "^8.0.34-beta.0",
+    "@web3-react/core": "^8.0.35-beta.0",
     "@web3-react/eip1193": "^8.0.26-beta.0",
     "@web3-react/empty": "^8.0.20-beta.0",
     "@web3-react/gnosis-safe": "^8.0.6-beta.0",
-    "@web3-react/metamask": "^8.0.27-beta.0",
+    "@web3-react/metamask": "^8.0.28-beta.0",
     "@web3-react/network": "^8.0.27-beta.0",
     "@web3-react/types": "^8.0.20-beta.0",
     "@web3-react/url": "^8.0.25-beta.0",
@@ -168,17 +167,17 @@
     "polished": "^3.3.2",
     "polyfill-object.fromentries": "^1.0.1",
     "popper-max-size-modifier": "^0.2.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.1",
     "qs": "^6.9.4",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-confetti": "^6.0.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-ga4": "^1.4.1",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
-    "react-redux": "^7.2.2",
+    "react-redux": "^8.0.2",
     "react-router-dom": "^5.0.0",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
@@ -188,7 +187,7 @@
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
     "setimmediate": "^1.0.5",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "tiny-invariant": "^1.2.0",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",

prei18n-extract.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const exec = require('child_process').exec
+const isWindows = process.platform === 'win32' || /^(msys|cygwin)$/.test(process.env.OSTYPE)
+
+if (isWindows) {
+  exec(`type nul > src/locales/en-US.po`)
+} else {
+  exec(`touch src/locales/en-US.po`)
+}

public/index.html

@@ -24,83 +24,83 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <link rel="preconnect" href="https://www.google-analytics.com/">
+    <link rel="preconnect" href="https://www.google-analytics.com/" />
 
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
 
     <style>
-        * {
-            font-family: 'Inter', sans-serif;
-            box-sizing: border-box;
-        }
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
 
-        /**
+      /**
           Explicitly load Inter var from public/ so it does not block LCP's critical path.
         */
-        @font-face {
-            font-family: 'Inter custom';
-            font-weight: 100 900;
-            font-style: normal;
-            font-display: block;
-            font-named-instance: 'Regular';
-            src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2 supports variations(gvar)"),
-                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2-variations"),
-                url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2");
-        }
-
-        @supports (font-variation-settings: normal) {
-            * {
-                font-family: 'Inter custom', sans-serif;
-            }
-        }
-
-        html,
-        body {
-            margin: 0;
-            padding: 0;
-        }
-
-        button {
-            user-select: none;
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
         }
-
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
+      }
+
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
         html {
-            font-size: 16px;
-            font-variant: none;
-            font-smooth: always;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-            font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
-        }
-
-        #background-radial-gradient {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            pointer-events: none;
-            width: 200vw;
-            height: 200vh;
-            background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
-            transform: translate(-50vw, -100vh);
-            z-index: -1;
+          background-color: #212429;
         }
-
+      }
+      @media (prefers-color-scheme: light) {
         html {
-            min-height: 100%;
-        }
-
-        @media (prefers-color-scheme: dark) {
-            html {
-                background-color: #212429;
-            }
-        }
-        @media (prefers-color-scheme: light) {
-            html {
-                background-color: #F7F8FA;
-            }
+          background-color: #f7f8fa;
         }
+      }
     </style>
   </head>
   <body>