chore: merge in latest changes from main

.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>