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

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

This reverts commit e36722ccb4.

.env

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

.env.production

@@ -1,3 +1,4 @@
+REACT_APP_AMPLITUDE_KEY="1c694b28cd089acc2c386d518f93a775"
 REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"

.github/actions/setup/action.yml

@@ -0,0 +1,21 @@
+name: Setup
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@v3
+
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 14
+        registry-url: https://registry.npmjs.org
+        cache: yarn
+
+    - uses: actions/cache@v3
+      id: install-cache
+      with:
+        path: node_modules/
+        key: ${{ runner.os }}-install-${{ hashFiles('**/yarn.lock') }}
+
+    - if: steps.install-cache.outputs.cache-hit != 'true'
+      run: yarn install --frozen-lockfile --ignore-scripts
+      shell: bash

.github/workflows/check-pr-title.yaml

@@ -1,4 +1,4 @@
-name: "Check PR Title"
+name: Check PR Title
 
 on:
   pull_request_target:
@@ -8,8 +8,8 @@ on:
       - synchronize
 
 jobs:
-  check-pr-title:
-    name: Check PR Title
+  # Ensures that the PR title adheres to [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).
+  conventional-commit:
     runs-on: ubuntu-latest
     steps:
       - uses: amannn/action-semantic-pull-request@v3.4.0

.github/workflows/crowdin-sync.yaml

@@ -1,47 +1,22 @@
 name: Crowdin Download
 
-# hourly we sync translations from Crowdin
 on:
   schedule:
-    - cron: '0 * * * *' # every hour we download translations and update the pr from crowdin
-
+    # Download translations every hour.
+    # This is not done as part of the build so that builds remain reproducible.
+    - cron: '0 * * * *'
   # manual trigger
   workflow_dispatch:
 
 jobs:
   download-translations:
-    name: Download translations
     runs-on: ubuntu-latest
-
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn i18n:extract
 
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Extract translations
-        run: "yarn i18n:extract"
-
-      - name: Synchronize
+      - name: Download Crowdin translations
         uses: crowdin/github-action@1.4.9
         with:
           upload_sources: false
@@ -50,8 +25,9 @@ jobs:
           token: ${{ secrets.CROWDIN_PERSONAL_TOKEN_SECRET }}
           source: 'src/locales/en-US.po'
           translation: 'src/locales/%locale%.po'
-          create_pull_request: false
-          localization_branch_name: main
+          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]"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/crowdin.yaml

@@ -1,45 +1,19 @@
 name: Crowdin Upload
 
-# on any push to main, we upload the translations to be translated
 on:
   push:
     branches:
       - main
 
 jobs:
-  synchronize-with-crowdin:
-    name: Upload sources to Crowdin
+  upload-sources:
     runs-on: ubuntu-latest
-
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn i18n:extract
 
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Extract translations
-        run: "yarn i18n:extract"
-
-      - name: Synchronize
+      - name: Upload Crowdin sources
         uses: crowdin/github-action@1.1.0
         with:
           upload_sources: true

.github/workflows/integration-tests.yaml

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

.github/workflows/lint.yml

@@ -1,52 +0,0 @@
-name: Lint
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  run-linters:
-    name: Run linters
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Run eslint w/ autofix
-        if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.owner.login == github.repository_owner }}
-        uses: wearerequired/lint-action@36c7e6689e80d785d27a22f71d970f3a3b4fcb70
-        with:
-          github_token: ${{ secrets.github_token }}
-          eslint: true
-          eslint_args: "-c .eslintrc.json"
-          auto_fix: true
-
-      - name: Run eslint
-        if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.owner.login != github.repository_owner }}
-        run: yarn eslint .

.github/workflows/release.yaml

@@ -2,55 +2,57 @@ name: Release
 on:
   schedule:
     - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
-
   # manual trigger
   workflow_dispatch:
 
 jobs:
-  bump_version:
-    name: Bump Version
+  wait-on-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - id: unit-tests
+        uses: fountainhead/action-wait-for-check@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          checkName: unit-tests
+      - id: cypress-tests
+        uses: fountainhead/action-wait-for-check@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          checkName: cypress-tests
+      - if: steps.unit-tests.outputs.conclusion != 'success' || steps.cypress-tests.outputs.conclusion != 'success'
+        run: exit 1
+
+  tag:
+    needs: wait-on-tests
     runs-on: ubuntu-latest
     outputs:
-      new_tag: ${{ steps.github_tag_action.outputs.new_tag }}
-      changelog: ${{ steps.github_tag_action.outputs.changelog }}
+      new_tag: ${{ steps.github-tag-action.outputs.new_tag }}
+      changelog: ${{ steps.github-tag-action.outputs.changelog }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Bump version and push tag
-        id: github_tag_action
-        uses: mathieudutour/github-tag-action@331898d5052eedac9b15fec867b5ba66ebf9b692
+      - uses: actions/checkout@v3
+      - name: Bump and tag
+        id: github-tag-action
+        uses: mathieudutour/github-tag-action@v6.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           release_branches: .*
-          default_bump: false
+          default_bump: patch
 
-  create_release:
-    name: Create Release
+  release:
+    needs: tag
+    if: ${{ needs.tag.outputs.new_tag != null }}
     runs-on: ubuntu-latest
-    needs: bump_version
-    if: ${{ needs.bump_version.outputs.new_tag != null }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build the IPFS bundle
-        run: yarn build
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn prepare
+      - run: yarn build
 
       - name: Pin to IPFS
-        id: upload
+        id: pinata
         uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
         with:
-          pin-name: Uniswap ${{ needs.bump_version.outputs.new_tag }}
+          pin-name: Uniswap ${{ needs.tag.outputs.new_tag }}
           path: './build'
           pinata-api-key: ${{ secrets.PINATA_API_KEY }}
           pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}
@@ -64,10 +66,24 @@ jobs:
           seeds: ${{ secrets.CRUST_SEEDS }}
 
       - name: Convert CIDv0 to CIDv1
-        id: convert_cidv0
+        id: convert-cidv0
         uses: uniswap/convert-cidv0-cidv1@v1.0.0
         with:
-          cidv0: ${{ steps.upload.outputs.hash }}
+          cidv0: ${{ steps.pinata.outputs.hash }}
+      
+      - uses: actions/cache@v3
+        id: cypress-cache
+        with:
+          path: /home/runner/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
+      - if: steps.cypress-cache.outputs.cache-hit != 'true'
+        run: yarn cypress install
+      - uses: cypress-io/github-action@v4
+        with:
+          install: false
+          browser: chrome
+          config-file: cypress.release.config.ts
+          config: baseUrl=https://cloudflare-ipfs.com/ipfs/${{ steps.pinata.outputs.hash }}
 
       - name: Update DNS with new IPFS hash
         env:
@@ -77,20 +93,19 @@ jobs:
           CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
         uses: textileio/cloudflare-update-dnslink@0fe7b7a1ffc865db3a4da9773f0f987447ad5848
         with:
-          cid: ${{ steps.upload.outputs.hash }}
+          cid: ${{ steps.pinata.outputs.hash }}
 
-      - name: Create GitHub Release
-        id: create_release
+      - name: Release
         uses: actions/create-release@v1.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          tag_name: ${{ needs.bump_version.outputs.new_tag }}
-          release_name: Release ${{ needs.bump_version.outputs.new_tag }}
+          tag_name: ${{ needs.tag.outputs.new_tag }}
+          release_name: Release ${{ needs.tag.outputs.new_tag }}
           body: |
             IPFS hash of the deployment:
-            - CIDv0: `${{ steps.upload.outputs.hash }}`
-            - CIDv1: `${{ steps.convert_cidv0.outputs.cidv1 }}`
+            - CIDv0: `${{ steps.pinata.outputs.hash }}`
+            - CIDv1: `${{ steps.convert-cidv0.outputs.cidv1 }}`
 
             The latest release is always accessible via our alias to the Cloudflare IPFS gateway at [app.uniswap.org](https://app.uniswap.org).
 
@@ -100,8 +115,8 @@ jobs:
             Your Uniswap settings are never remembered across different URLs.
 
             IPFS gateways:
-            - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.dweb.link/
-            - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.cf-ipfs.com/
-            - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.upload.outputs.hash }}/)
+            - https://${{ steps.convert-cidv0.outputs.cidv1 }}.ipfs.dweb.link/
+            - https://${{ steps.convert-cidv0.outputs.cidv1 }}.ipfs.cf-ipfs.com/
+            - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
 
-            ${{ needs.bump_version.outputs.changelog }}
+            ${{ needs.tag.outputs.changelog }}

.github/workflows/test.yml

@@ -0,0 +1,92 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  # manual trigger
+  workflow_dispatch:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn lint
+
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn prepare
+      - run: yarn test
+
+  cypress-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn prepare
+
+      - run: yarn build
+      - uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: build
+          if-no-files-found: error
+
+      - uses: actions/cache@v3
+        id: cypress-cache
+        with:
+          path: /home/runner/.cache/Cypress
+          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
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: build
+          path: build
+
+      - uses: actions/cache@v3
+        id: cypress-cache
+        with:
+          path: /home/runner/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
+      - if: steps.cypress-cache.outputs.cache-hit != 'true'
+        run: yarn cypress install
+
+      - uses: cypress-io/github-action@v4
+        with:
+          install: false
+          start: yarn serve
+          wait-on: 'http://localhost:3000'
+          browser: chrome
+          record: true
+          parallel: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  # Included as a single job to check against for cypress test success, as cypress runs in a matrix.
+  cypress-tests:
+    needs: cypress-test-matrix
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo 'Finished cypress tests https\://dashboard.cypress.io/projects/yp82ef'

.github/workflows/unit-tests.yaml

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

.gitignore

@@ -3,9 +3,6 @@
 # generated contract types
 /src/types/v3
 /src/abis/types
-/src/lib/locales/**/*.js
-/src/lib/locales/**/en-US.po
-/src/lib/locales/**/pseudo.po
 /src/locales/**/*.js
 /src/locales/**/en-US.po
 /src/locales/**/pseudo.po
@@ -37,10 +34,8 @@ yarn-error.log*
 notes.txt
 .idea/
 
-.vscode/
-
 package-lock.json
 
 cypress/videos
 cypress/screenshots
-cypress/fixtures/example.json
+

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "npm.packageManager": "yarn",
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "editor.formatOnSaveMode": "file",
+  "editor.tabCompletion": "on",
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.inlineSuggest.enabled": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "files.eol": "\n",
+  "eslint.enable": true,
+  "eslint.debug": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

CONTRIBUTING.md

@@ -1,24 +1,73 @@
-
 # Contributing
 
 Thank you for your interest in contributing to the Uniswap interface! 🦄
 
 # Development
 
+Before running anything, you'll need to install the dependencies:
+
+```
+yarn install
+```
+
 ## Running the interface locally
 
-1. `yarn install`
-1. `yarn start`
+```
+yarn start
+```
+
+The interface should automatically open. If it does not, navigate to [http://localhost:3000].
 
 ## Creating a production build
 
-1. `yarn install`
-1. `yarn build`
+```
+yarn build
+```
+
+To serve the production build:
+
+```
+yarn serve
+```
+
+Then, navigate to [http://localhost:3000] to see it.
+
+## Running unit tests
+
+```
+yarn test
+```
+
+By default, this runs only unit tests that have been affected since the last commit. To run _all_ unit tests:
+
+```
+yarn test --watchAll
+```
+
+## Running integration tests (cypress)
+
+Integration tests require a server to be running. In order to see your changes quickly, run `start` in its own tab/window:
+
+```
+yarn start
+```
+
+Integration tests are run using `cypress`. When developing locally, use `cypress:open` for an interactive UI, and to inspect the rendered page:
+
+```
+yarn cypress:open
+```
+
+To run _all_ cypress integration tests _from the command line_:
+
+```
+yarn cypress:run
+```
 
 ## Engineering standards
 
-Code merged into the `main` branch of this repository should adhere to high standards of correctness and maintainability. 
-Use your best judgment when applying these standards.  If code is in the critical path, will be frequently visited, or 
+Code merged into the `main` branch of this repository should adhere to high standards of correctness and maintainability.
+Use your best judgment when applying these standards. If code is in the critical path, will be frequently visited, or
 makes large architectural changes, consider following all the standards.
 
 - Have at least one engineer approve of large code refactorings
@@ -39,7 +88,7 @@ The following points should help guide your development:
   - Avoid adding steps to the development/build processes
   - The build must be deterministic, i.e. a particular commit hash always produces the same build
 - Decentralization: anyone can run the interface
-  - An Ethereum node should be the only critical dependency 
+  - An Ethereum node should be the only critical dependency
   - All other external dependencies should only enhance the UX ([graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation))
 - Accessibility: anyone can use the interface
   - The interface should be responsive, small and also run well on low performance devices (majority of swaps on mobile!)
@@ -48,14 +97,14 @@ The following points should help guide your development:
 
 Releases are cut automatically from the `main` branch Monday-Thursday in the morning according to the [release workflow](./.github/workflows/release.yaml).
 
-Fix pull requests should be merged whenever ready and tested. 
+Fix pull requests should be merged whenever ready and tested.
 If a fix is urgently needed in production, releases can be manually triggered on [GitHub](https://github.com/Uniswap/uniswap-interface/actions/workflows/release.yaml)
 after the fix is merged into `main`.
 
 Features should not be merged into `main` until they are ready for users.
 When building larger features or collaborating with other developers, create a new branch from `main` to track its development.
 Use the automatic Vercel preview for sharing the feature to collect feedback.  
-When the feature is ready for review, create a new pull request from the feature branch into `main` and request reviews from 
+When the feature is ready for review, create a new pull request from the feature branch into `main` and request reviews from
 the appropriate UX reviewers (PMs or designers).
 
 ## Finding a first issue
@@ -65,7 +114,7 @@ Start with issues with the label
 
 # Translations
 
-Uniswap uses [Crowdin](https://crowdin.com/project/uniswap-interface) for managing translations. 
+Uniswap uses [Crowdin](https://crowdin.com/project/uniswap-interface) for managing translations.
 [This workflow](./.github/workflows/crowdin.yaml) uploads new strings for translation to the Crowdin project whenever code using the [lingui translation macros](https://lingui.js.org/ref/macro.html) is merged into `main`.
 
 Every hour, translations are synced back down from Crowdin to the repository in [this other workflow](./.github/workflows/crowdin-sync.yaml).

custom-test-env.cjs

@@ -1,16 +0,0 @@
-// Custom test environment to provide `TextEncoder`/`TextDecoder`
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Environment = require('jest-environment-jsdom')
-
-module.exports = class CustomTestEnvironment extends Environment {
-  async setup() {
-    await super.setup()
-    if (typeof this.global.TextEncoder === 'undefined') {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { TextEncoder, TextDecoder } = require('util')
-      this.global.TextEncoder = TextEncoder
-      this.global.TextDecoder = TextDecoder
-    }
-  }
-}

cypress.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'yp82ef',
+  videoUploadOnPasses: false,
+  defaultCommandTimeout: 10000,
+  chromeWebSecurity: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      return {
+        ...config,
+        // Only enable Chrome.
+        // Electron (the default) has issues injecting window.ethereum before pageload, so it is not viable.
+        browsers: config.browsers.filter(({ name }) => name === 'chrome'),
+      }
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress.json

@@ -1,8 +0,0 @@
-{
-  "projectId": "yp82ef",
-  "baseUrl": "http://localhost:3000",
-  "pluginsFile": false,
-  "supportFile": "cypress/support/index.js",
-  "video": false,
-  "defaultCommandTimeout": 10000
-}

cypress.release.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'yp82ef',
+  e2e: {
+    specPattern: 'cypress/release.ts',
+  },
+})

cypress/e2e/landing.test.ts

@@ -1,5 +1,3 @@
-import { TEST_ADDRESS_NEVER_USE_SHORTENED } from '../support/commands'
-
 describe('Landing Page', () => {
   beforeEach(() => cy.visit('/'))
   it('loads swap page', () => {
@@ -15,9 +13,4 @@ describe('Landing Page', () => {
     cy.get('#pool-nav-link').click()
     cy.url().should('include', '/pool')
   })
-
-  it('is connected', () => {
-    cy.get('#web3-status-connected').click()
-    cy.get('#web3-account-identifier-row').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
-  })
 })

cypress/e2e/pool.test.ts

@@ -1,5 +1,6 @@
 describe('Pool', () => {
   beforeEach(() => cy.visit('/pool'))
+
   it('add liquidity links to /add/ETH', () => {
     cy.get('#join-pool-button').click()
     cy.url().should('contain', '/add/ETH')

cypress/e2e/service-worker.test.ts

@@ -0,0 +1,84 @@
+import assert = require('assert')
+
+describe('Service Worker', () => {
+  before(() => {
+    // Fail fast if there is no Service Worker on this build.
+    cy.request({ url: '/service-worker.js', headers: { 'Service-Worker': 'script' } }).then((response) => {
+      const isValid = isValidServiceWorker(response)
+      if (!isValid) {
+        throw new Error(
+          '\n' +
+            'Service Worker tests must be run on a production-like build\n' +
+            'To test, build with `yarn build:e2e` and serve with `yarn serve`'
+        )
+      }
+    })
+
+    function isValidServiceWorker(response: Cypress.Response<any>) {
+      const contentType = response.headers['content-type']
+      return !(response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1))
+    }
+  })
+
+  function unregister() {
+    return cy.log('unregister service worker').then(async () => {
+      const cacheKeys = await window.caches.keys()
+      const cacheKey = cacheKeys.find((key) => key.match(/precache/))
+      if (cacheKey) {
+        await window.caches.delete(cacheKey)
+      }
+
+      const sw = await window.navigator.serviceWorker.getRegistration(Cypress.config().baseUrl ?? undefined)
+      await sw?.unregister()
+    })
+  }
+  before(unregister)
+  after(unregister)
+
+  beforeEach(() => {
+    cy.intercept({ hostname: 'www.google-analytics.com' }, (req) => {
+      const body = req.body.toString()
+      if (req.query['ep.event_category'] === 'Service Worker' || body.includes('Service%20Worker')) {
+        if (req.query['en'] === 'Not Installed' || body.includes('Not%20Installed')) {
+          req.alias = 'NotInstalled'
+        } else if (req.query['en'] === 'Cache Hit' || body.includes('Cache%20Hit')) {
+          req.alias = 'CacheHit'
+        } else if (req.query['en'] === 'Cache Miss' || body.includes('Cache%20Miss')) {
+          req.alias = 'CacheMiss'
+        }
+      }
+    })
+  })
+
+  it('installs a ServiceWorker', () => {
+    cy.visit('/', { serviceWorker: true })
+      .get('#swap-page')
+      .wait('@NotInstalled', { timeout: 20000 })
+      .window({ timeout: 20000 })
+      .and((win) => {
+        expect(win.navigator.serviceWorker.controller?.state).to.equal('activated')
+      })
+  })
+
+  it('records a cache hit', () => {
+    cy.visit('/', { serviceWorker: true }).get('#swap-page').wait('@CacheHit', { timeout: 20000 })
+  })
+
+  it('records a cache miss', () => {
+    cy.then(async () => {
+      const cacheKeys = await window.caches.keys()
+      const cacheKey = cacheKeys.find((key) => key.match(/precache/))
+      assert(cacheKey)
+
+      const cache = await window.caches.open(cacheKey)
+      const keys = await cache.keys()
+      const key = keys.find((key) => key.url.match(/index/))
+      assert(key)
+
+      await cache.put(key, new Response())
+    })
+      .visit('/', { serviceWorker: true })
+      .get('#swap-page')
+      .wait('@CacheMiss', { timeout: 20000 })
+  })
+})

cypress/e2e/swap.test.ts

@@ -1,6 +1,6 @@
 describe('Swap', () => {
   beforeEach(() => {
-    cy.visit('/swap')
+    cy.visit('/swap').get('#swap-currency-input .token-amount-input')
   })
 
   it('starts with ETH selected by default', () => {
@@ -48,6 +48,13 @@ describe('Swap', () => {
     cy.get('#add-recipient-button').should('not.exist')
   })
 
+  it('ETH to wETH is same value (wrapped swaps have no price impact)', () => {
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.get('.token-item-0xc778417E063141139Fce010982780140Aa0cD5Ab').click({ force: true })
+    cy.get('#swap-currency-input .token-amount-input').type('0.01', { force: true, delay: 100 })
+    cy.get('#swap-currency-output .token-amount-input').should('have.value', '0.01')
+  })
+
   describe('expert mode', () => {
     beforeEach(() => {
       cy.window().then((win) => {

cypress/e2e/wallet.test.ts

@@ -0,0 +1,30 @@
+import { TEST_ADDRESS_NEVER_USE_SHORTENED } from '../support/ethereum'
+
+describe('Wallet', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('displays account details', () => {
+    cy.get('[data-testid=web3-status-connected]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED).click()
+  })
+
+  it('displays account view in wallet modal', () => {
+    cy.get('[data-testid=web3-account-identifier-row]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
+  })
+
+  it('changes back to the options grid', () => {
+    cy.contains('Change').click()
+    cy.get('[data-testid=option-grid]').should('exist')
+  })
+
+  it('selects injected wallet option', () => {
+    cy.contains('Injected').click()
+    cy.get('[data-testid=web3-account-identifier-row]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
+  })
+
+  it('shows connect buttons after disconnect', () => {
+    cy.contains('Disconnect').click()
+    cy.get('[data-testid=option-grid]').should('exist')
+  })
+})

cypress/release.ts

@@ -0,0 +1,20 @@
+const ONE_MINUTE = 60_000
+
+describe(
+  'Release',
+  {
+    pageLoadTimeout: ONE_MINUTE,
+    retries: 30,
+  },
+  () => {
+    it('loads swap page', () => {
+      // We *must* wait in order to space out the retry attempts.
+      cy.wait(ONE_MINUTE)
+        .visit('/', {
+          retryOnStatusCodeFailure: true,
+          retryOnNetworkFailure: true,
+        })
+        .get('#swap-page')
+    })
+  }
+)

cypress/support/commands.d.ts

@@ -1,10 +0,0 @@
-export const TEST_ADDRESS_NEVER_USE: string
-
-export const TEST_ADDRESS_NEVER_USE_SHORTENED: string
-
-// declare namespace Cypress {
-//   // eslint-disable-next-line @typescript-eslint/class-name-casing
-//   interface cy {
-//     additionalCommands(): void
-//   }
-// }

cypress/support/e2e.ts

@@ -0,0 +1,52 @@
+// ***********************************************************
+// This file is processed and loaded automatically before your test files.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import { injected } from './ethereum'
+import assert = require('assert')
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface ApplicationWindow {
+      ethereum: typeof injected
+    }
+    interface VisitOptions {
+      serviceWorker?: true
+    }
+  }
+}
+
+// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
+// eslint-disable-next-line no-undef
+Cypress.Commands.overwrite(
+  'visit',
+  (original, url: string | Partial<Cypress.VisitOptions>, options?: Partial<Cypress.VisitOptions>) => {
+    assert(typeof url === 'string')
+
+    cy.intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 }).then(() => {
+      original({
+        ...options,
+        url: (url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url) + '?chain=rinkeby',
+        onBeforeLoad(win) {
+          options?.onBeforeLoad?.(win)
+          win.localStorage.clear()
+          win.ethereum = injected
+        },
+      })
+    })
+  }
+)
+
+beforeEach(() => {
+  // Infura security policies are based on Origin headers.
+  // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
+  cy.intercept(/infura.io/, (res) => {
+    res.headers['origin'] = 'http://localhost:3000'
+    res.continue()
+  })
+})

cypress/support/ethereum.ts

@@ -1,8 +1,6 @@
-// ***********************************************
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
+/**
+ * Updates cy.visit() to include an injected window.ethereum provider.
+ */
 
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 import { JsonRpcProvider } from '@ethersproject/providers'
@@ -20,14 +18,16 @@ export const TEST_ADDRESS_NEVER_USE_SHORTENED = `${TEST_ADDRESS_NEVER_USE.substr
   6
 )}...${TEST_ADDRESS_NEVER_USE.substr(-4, 4)}`
 
-class CustomizedBridge extends Eip1193Bridge {
+const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
+const signer = new Wallet(TEST_PRIVATE_KEY, provider)
+export const injected = new (class extends Eip1193Bridge {
   chainId = 4
 
-  async sendAsync(...args) {
+  async sendAsync(...args: any[]) {
     console.debug('sendAsync called', ...args)
     return this.send(...args)
   }
-  async send(...args) {
+  async send(...args: any[]) {
     console.debug('send called', ...args)
     const isCallbackForm = typeof args[0] === 'object' && typeof args[1] === 'function'
     let callback
@@ -71,19 +71,4 @@ class CustomizedBridge extends Eip1193Bridge {
       }
     }
   }
-}
-
-// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
-// eslint-disable-next-line no-undef
-Cypress.Commands.overwrite('visit', (original, url, options) => {
-  return original(url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url, {
-    ...options,
-    onBeforeLoad(win) {
-      options && options.onBeforeLoad && options.onBeforeLoad(win)
-      win.localStorage.clear()
-      const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
-      const signer = new Wallet(TEST_PRIVATE_KEY, provider)
-      win.ethereum = new CustomizedBridge(signer, provider)
-    },
-  })
-})
+})(signer, provider)

cypress/support/index.js

@@ -1,9 +0,0 @@
-// ***********************************************************
-// This file is processed and loaded automatically before your test files.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.ts using ES2015 syntax:
-import './commands'

cypress/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "strict": true,
-    "baseUrl": "../node_modules",
     "target": "es5",
     "lib": ["es5", "dom"],
     "types": ["cypress"]

package.json

@@ -3,47 +3,64 @@
   "version": "1.0.7",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "files": [
-    "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"
+  "license": "GPL-3.0-or-later",
+  "scripts": {
+    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
+    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
+    "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
+    "graphql:generate": "graphql-codegen --config codegen.yml",
+    "prei18n:extract": "touch src/locales/en-US.po",
+    "i18n:extract": "lingui extract --locale en-US",
+    "i18n:compile": "yarn i18n:extract && lingui compile",
+    "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
+    "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "serve": "serve build -l 3000",
+    "lint": "yarn eslint .",
+    "test": "react-scripts test --coverage",
+    "cypress:open": "cypress open --browser chrome --e2e",
+    "cypress:run": "cypress run --browser chrome --e2e"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/components/**/*.ts*",
+      "src/hooks/**/*.ts*",
+      "src/lib/hooks/**/*.ts*",
+      "src/lib/state/**/*.ts*",
+      "src/lib/utils/**/*.ts*",
+      "src/pages/**/*.ts*",
+      "src/state/**/*.ts*",
+      "src/utils/**/*.ts*"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 4,
+        "functions": 6,
+        "lines": 9,
+        "statements": 9
+      }
     }
   },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
     "@ethersproject/experimental": "^5.4.0",
-    "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
     "@graphql-codegen/typescript": "1.22.3",
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
-    "@lingui/core": "^3.9.0",
-    "@lingui/macro": "^3.9.0",
-    "@lingui/react": "^3.9.0",
-    "@metamask/jazzicon": "^2.0.0",
-    "@reach/dialog": "^0.10.3",
-    "@reach/portal": "^0.10.3",
-    "@react-hook/window-scroll": "^1.3.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -72,23 +89,8 @@
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
-    "@uniswap/default-token-list": "^3.0.0",
-    "@uniswap/governance": "^1.0.2",
-    "@uniswap/liquidity-staker": "^1.0.2",
-    "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/v2-core": "1.0.0",
-    "@uniswap/v2-periphery": "^1.1.0-beta.0",
-    "@uniswap/v3-core": "1.0.0",
-    "@uniswap/v3-periphery": "^1.1.1",
-    "@web3-react/metamask": "^8.0.19-beta.0",
-    "@web3-react/walletconnect": "^8.0.26-beta.0",
-    "array.prototype.flat": "^1.2.4",
-    "array.prototype.flatmap": "^1.2.4",
-    "babel-plugin-macros": "^3.1.0",
-    "copy-to-clipboard": "^3.2.0",
-    "cross-env": "^7.0.3",
-    "cypress": "^7.7.0",
-    "d3": "^7.0.0",
+    "cypress": "^10.1.0",
+    "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-better-styled-components": "^1.1.2",
@@ -97,131 +99,104 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "ms.macro": "^2.0.0",
+    "react-scripts": "^4.0.3",
+    "serve": "^11.3.2",
+    "typechain": "^5.0.0",
+    "typescript": "^4.4.3"
+  },
+  "dependencies": {
+    "@amplitude/analytics-browser": "^0.5.1",
+    "@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",
+    "@metamask/jazzicon": "^2.0.0",
+    "@popperjs/core": "^2.4.4",
+    "@reach/dialog": "^0.10.3",
+    "@reach/portal": "^0.10.3",
+    "@react-hook/window-scroll": "^1.3.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@uniswap/governance": "^1.0.2",
+    "@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/sdk-core": "^3.0.1",
+    "@uniswap/smart-order-router": "^2.5.26",
+    "@uniswap/token-lists": "^1.0.0-beta.30",
+    "@uniswap/v2-core": "1.0.0",
+    "@uniswap/v2-periphery": "^1.1.0-beta.0",
+    "@uniswap/v2-sdk": "^3.0.1",
+    "@uniswap/v3-core": "1.0.0",
+    "@uniswap/v3-periphery": "^1.1.1",
+    "@uniswap/v3-sdk": "^3.8.2",
+    "@walletconnect/ethereum-provider": "1.7.1",
+    "@web3-react/coinbase-wallet": "^8.0.33-beta.0",
+    "@web3-react/core": "^8.0.33-beta.0",
+    "@web3-react/eip1193": "^8.0.25-beta.0",
+    "@web3-react/empty": "^8.0.19-beta.0",
+    "@web3-react/gnosis-safe": "^8.0.5-beta.0",
+    "@web3-react/metamask": "^8.0.26-beta.0",
+    "@web3-react/network": "^8.0.26-beta.0",
+    "@web3-react/types": "^8.0.19-beta.0",
+    "@web3-react/url": "^8.0.24-beta.0",
+    "@web3-react/walletconnect": "^8.0.34-beta.0",
+    "ajv": "^6.12.3",
+    "array.prototype.flat": "^1.2.4",
+    "array.prototype.flatmap": "^1.2.4",
+    "cids": "^1.0.0",
+    "copy-to-clipboard": "^3.2.0",
+    "d3": "^7.0.0",
+    "ethers": "^5.1.4",
     "firebase": "^9.1.3",
+    "fortmatic": "^2.4.0",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
+    "immer": "^9.0.6",
     "inter-ui": "^3.13.1",
     "jest-styled-components": "^7.0.5",
+    "jotai": "^1.3.7",
+    "jsbi": "^3.1.4",
+    "make-plural": "^7.0.0",
+    "multicodec": "^3.0.1",
+    "multihashes": "^4.0.2",
+    "node-vibrant": "^3.2.1-alpha.1",
+    "polished": "^3.3.2",
     "polyfill-object.fromentries": "^1.0.1",
+    "popper-max-size-modifier": "^0.2.0",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
     "react-dom": "^17.0.1",
+    "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-router-dom": "^5.0.0",
-    "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.5",
+    "rebass": "^4.0.7",
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
-    "sass": "^1.45.1",
-    "serve": "^11.3.2",
-    "start-server-and-test": "^1.11.0",
-    "typechain": "^5.0.0",
-    "typescript": "^4.4.3",
+    "setimmediate": "^1.0.5",
+    "styled-components": "^5.3.0",
+    "tiny-invariant": "^1.2.0",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "use-resize-observer": "^8.0.0",
     "wcag-contrast": "^3.0.0",
     "web-vitals": "^2.1.0",
-    "web3-react-abstract-connector": "npm:@web3-react/abstract-connector@^6.0.7",
-    "web3-react-fortmatic-connector": "npm:@web3-react/fortmatic-connector@^6.0.9",
-    "web3-react-injected-connector": "npm:@web3-react/injected-connector@^6.0.7",
-    "web3-react-types": "npm:@web3-react/types@^6.0.7",
-    "web3-react-walletconnect-connector": "npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0",
-    "web3-react-walletlink-connector": "npm:@web3-react/walletlink-connector@^6.2.13",
     "workbox-core": "^6.1.0",
+    "workbox-navigation-preload": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0"
-  },
-  "resolutions": {
-    "@walletconnect/ethereum-provider": "1.7.1"
-  },
-  "scripts": {
-    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
-    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
-    "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
-    "graphql:generate": "graphql-codegen --config codegen.yml",
-    "prei18n:extract": "touch src/locales/en-US.po",
-    "i18n:extract": "lingui extract --locale en-US",
-    "i18n:compile": "yarn i18n:extract && lingui compile",
-    "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
-    "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=./custom-test-env.cjs",
-    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "license": "GPL-3.0-or-later",
-  "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "@fontsource/ibm-plex-mono": "^4.5.1",
-    "@fontsource/inter": "^4.5.1",
-    "@popperjs/core": "^2.4.4",
-    "@reduxjs/toolkit": "^1.6.1",
-    "@uniswap/redux-multicall": "^1.1.1",
-    "@uniswap/router-sdk": "^1.0.3",
-    "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.5.26",
-    "@uniswap/token-lists": "^1.0.0-beta.27",
-    "@uniswap/v2-sdk": "^3.0.1",
-    "@uniswap/v3-sdk": "^3.8.2",
-    "@web3-react/core": "^8.0.23-beta.0",
-    "@web3-react/eip1193": "^8.0.18-beta.0",
-    "@web3-react/empty": "^8.0.12-beta.0",
-    "@web3-react/types": "^8.0.12-beta.0",
-    "@web3-react/url": "^8.0.17-beta.0",
-    "ajv": "^6.12.3",
-    "cids": "^1.0.0",
-    "ethers": "^5.1.4",
-    "immer": "^9.0.6",
-    "jotai": "^1.3.7",
-    "jsbi": "^3.1.4",
-    "make-plural": "^7.0.0",
-    "ms.macro": "^2.0.0",
-    "multicodec": "^3.0.1",
-    "multihashes": "^4.0.2",
-    "node-vibrant": "^3.2.1-alpha.1",
-    "polished": "^3.3.2",
-    "popper-max-size-modifier": "^0.2.0",
-    "react-feather": "^2.0.8",
-    "react-popper": "^2.2.3",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5",
-    "rebass": "^4.0.7",
-    "setimmediate": "^1.0.5",
-    "styled-components": "^5.3.0",
-    "tiny-invariant": "^1.2.0",
-    "wcag-contrast": "^3.0.0",
-    "web3-react-core": "npm:@web3-react/core@^6.0.9",
-    "wicg-inert": "^3.1.1"
-  },
-  "peerDependencies": {
-    "@babel/runtime": "^7.17.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.2",
-    "redux": "^4.1.2"
-  },
-  "optionalDependencies": {
-    "bufferutil": "^4.0.6",
-    "encoding": "^0.1.13",
-    "utf-8-validate": "^5.0.8"
   }
 }

src/components/AccountDetails/Transaction.tsx

@@ -1,4 +1,4 @@
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { CheckCircle, Triangle } from 'react-feather'
 import styled from 'styled-components/macro'
 
@@ -35,7 +35,7 @@ const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
 `
 
 export default function Transaction({ hash }: { hash: string }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const allTransactions = useAllTransactions()
 
   const tx = allTransactions?.[hash]

src/components/AccountDetails/TransactionSummary.tsx

@@ -17,7 +17,9 @@ import {
   DepositLiquidityStakingTransactionInfo,
   ExactInputSwapTransactionInfo,
   ExactOutputSwapTransactionInfo,
+  ExecuteTransactionInfo,
   MigrateV2LiquidityToV3TransactionInfo,
+  QueueTransactionInfo,
   RemoveLiquidityV3TransactionInfo,
   SubmitProposalTransactionInfo,
   TransactionInfo,
@@ -126,6 +128,16 @@ function VoteSummary({ info }: { info: VoteTransactionInfo }) {
   }
 }
 
+function QueueSummary({ info }: { info: QueueTransactionInfo }) {
+  const proposalKey = `${info.governorAddress}/${info.proposalId}`
+  return <Trans>Queue proposal {proposalKey}.</Trans>
+}
+
+function ExecuteSummary({ info }: { info: ExecuteTransactionInfo }) {
+  const proposalKey = `${info.governorAddress}/${info.proposalId}`
+  return <Trans>Execute proposal {proposalKey}.</Trans>
+}
+
 function DelegateSummary({ info: { delegatee } }: { info: DelegateTransactionInfo }) {
   const { ENSName } = useENSName(delegatee)
   return <Trans>Delegate voting power to {ENSName ?? delegatee}</Trans>
@@ -339,6 +351,12 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
     case TransactionType.REMOVE_LIQUIDITY_V3:
       return <RemoveLiquidityV3Summary info={info} />
 
+    case TransactionType.QUEUE:
+      return <QueueSummary info={info} />
+
+    case TransactionType.EXECUTE:
+      return <ExecuteSummary info={info} />
+
     case TransactionType.SUBMIT_PROPOSAL:
       return <SubmitProposalTransactionSummary info={info} />
   }

src/components/AccountDetails/index.tsx

@@ -1,15 +1,16 @@
 import { Trans } from '@lingui/macro'
-import { Connector } from '@web3-react/types'
+import { useWeb3React } from '@web3-react/core'
 import CopyHelper from 'components/AccountDetails/Copy'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { coinbaseWalletConnection, injectedConnection } from 'connection'
+import { getConnection } from 'connection/utils'
 import { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
+import { updateSelectedWallet } from 'state/user/reducer'
 import styled, { ThemeContext } from 'styled-components/macro'
-import { AbstractConnector } from 'web3-react-abstract-connector'
+import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, walletlink } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { clearAllTransactions } from '../../state/transactions/reducer'
 import { ExternalLink, LinkStyledButton, ThemedText } from '../../theme'
@@ -162,29 +163,6 @@ const WalletName = styled.div`
   color: ${({ theme }) => theme.text3};
 `
 
-const IconWrapper = styled.div<{ size?: number }>`
-  ${({ theme }) => theme.flexColumnNoWrap};
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  & > img,
-  span {
-    height: ${({ size }) => (size ? size + 'px' : '32px')};
-    width: ${({ size }) => (size ? size + 'px' : '32px')};
-  }
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    align-items: flex-end;
-  `};
-`
-
-function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
-  return (
-    <IconWrapper size={16}>
-      <StatusIcon connector={connector} />
-    </IconWrapper>
-  )
-}
-
 const TransactionListWrapper = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};
 `
@@ -226,17 +204,24 @@ export default function AccountDetails({
   ENSName,
   openOptions,
 }: AccountDetailsProps) {
-  const { chainId, account, connector } = useActiveWeb3React()
+  const { chainId, account, connector } = useWeb3React()
+  const connectionType = getConnection(connector).type
+
   const theme = useContext(ThemeContext)
   const dispatch = useAppDispatch()
 
+  const isMetaMask = !!window.ethereum?.isMetaMask
+  const isCoinbaseWallet = !!window.ethereum?.isCoinbaseWallet
+  const isInjectedMobileBrowser = (isMetaMask || isCoinbaseWallet) && isMobile
+
   function formatConnectorName() {
     const { ethereum } = window
     const isMetaMask = !!(ethereum && ethereum.isMetaMask)
     const name = Object.keys(SUPPORTED_WALLETS)
       .filter(
         (k) =>
-          SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
+          SUPPORTED_WALLETS[k].connector === connector &&
+          (connector !== injectedConnection.connector || isMetaMask === (k === 'METAMASK'))
       )
       .map((k) => SUPPORTED_WALLETS[k].name)[0]
     return (
@@ -265,43 +250,48 @@ export default function AccountDetails({
               <AccountGroupingRow>
                 {formatConnectorName()}
                 <div>
-                  {connector !== injected && connector !== walletlink && (
-                    <WalletAction
-                      style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
-                      onClick={() => {
-                        ;(connector as any).close()
-                      }}
-                    >
-                      <Trans>Disconnect</Trans>
-                    </WalletAction>
+                  {!isInjectedMobileBrowser && (
+                    <>
+                      <WalletAction
+                        style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
+                        onClick={() => {
+                          if (connector.deactivate) {
+                            connector.deactivate()
+
+                            // Coinbase Wallet SDK does not emit a disconnect event to the provider,
+                            // which is what web3-react uses to reset state. As a workaround we manually
+                            // reset state.
+                            if (connector === coinbaseWalletConnection.connector) {
+                              connector.resetState()
+                            }
+                          } else {
+                            connector.resetState()
+                          }
+
+                          dispatch(updateSelectedWallet({ wallet: undefined }))
+                          openOptions()
+                        }}
+                      >
+                        <Trans>Disconnect</Trans>
+                      </WalletAction>
+                      <WalletAction
+                        style={{ fontSize: '.825rem', fontWeight: 400 }}
+                        onClick={() => {
+                          openOptions()
+                        }}
+                      >
+                        <Trans>Change</Trans>
+                      </WalletAction>
+                    </>
                   )}
-                  <WalletAction
-                    style={{ fontSize: '.825rem', fontWeight: 400 }}
-                    onClick={() => {
-                      openOptions()
-                    }}
-                  >
-                    <Trans>Change</Trans>
-                  </WalletAction>
                 </div>
               </AccountGroupingRow>
-              <AccountGroupingRow id="web3-account-identifier-row">
+              <AccountGroupingRow data-testid="web3-account-identifier-row">
                 <AccountControl>
-                  {ENSName ? (
-                    <>
-                      <div>
-                        {connector && <WrappedStatusIcon connector={connector} />}
-                        <p> {ENSName}</p>
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      <div>
-                        {connector && <WrappedStatusIcon connector={connector} />}
-                        <p> {account && shortenAddress(account)}</p>
-                      </div>
-                    </>
-                  )}
+                  <div>
+                    <StatusIcon connectionType={connectionType} />
+                    <p>{ENSName ? ENSName : account && shortenAddress(account)}</p>
+                  </div>
                 </AccountControl>
               </AccountGroupingRow>
               <AccountGroupingRow>

src/components/AddressInputPanel/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { ReactNode, useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components/macro'
 
@@ -86,7 +86,7 @@ export default function AddressInputPanel({
   // triggers whenever the typed value changes
   onChange: (value: string) => void
 }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
 
   const { address, loading, name } = useENS(value)

src/components/AmplitudeAnalytics/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * Event names that can occur in this application.
+ *
+ * Subject to change as new features are added and new events are defined
+ * and logged.
+ */
+export enum EventName {
+  SWAP_SUBMITTED = 'Swap Submitted',
+  PAGE_VIEWED = 'Page Viewed',
+}

src/components/AmplitudeAnalytics/index.ts

@@ -0,0 +1,88 @@
+import { Identify, identify, init, track } from '@amplitude/analytics-browser'
+
+/**
+ * Initializes Amplitude with API key for project.
+ *
+ * Uniswap has two Amplitude projects: test and production. You must be a
+ * member of the organization on Amplitude to view details.
+ */
+export function initializeAnalytics(isDevEnvironment = process.env.NODE_ENV === 'development') {
+  if (isDevEnvironment) return
+
+  const API_KEY = process.env.REACT_APP_AMPLITUDE_KEY
+  if (typeof API_KEY === 'undefined') {
+    throw new Error(`REACT_APP_AMPLITUDE_KEY must be a defined environment variable`)
+  }
+
+  init(
+    API_KEY,
+    /* userId= */ undefined, // User ID should be undefined to let Amplitude default to Device ID
+    /* options= */ {
+      // Disable tracking of private user information by Amplitude
+      trackingOptions: {
+        ipAddress: false,
+        carrier: false,
+        city: false,
+        region: false,
+        country: false,
+        dma: false, // designated market area
+      },
+    }
+  )
+}
+
+/** Sends an event to Amplitude. */
+export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
+  if (process.env.NODE_ENV === 'development') {
+    console.debug(`[amplitude(${eventName})]: ${JSON.stringify(eventProperties)}`)
+    return
+  }
+
+  track(eventName, eventProperties)
+}
+
+/**
+ * Class that exposes methods to mutate the User Model's properties in
+ * Amplitude that represents the current session's user.
+ *
+ * See https://help.amplitude.com/hc/en-us/articles/115002380567-User-properties-and-event-properties
+ * for details.
+ */
+class UserModel {
+  constructor(private isDevEnvironment = process.env.NODE_ENV === 'development') {}
+
+  private log(method: string, ...parameters: unknown[]) {
+    console.debug(`[amplitude(Identify)]: ${method}(${parameters})`)
+  }
+
+  private call(mutate: (event: Identify) => Identify) {
+    if (this.isDevEnvironment) {
+      const log = (_: Identify, method: string) => this.log.bind(this, method)
+      mutate(new Proxy(new Identify(), { get: log }))
+      return
+    }
+    identify(mutate(new Identify()))
+  }
+
+  set(key: string, value: string | number) {
+    this.call((event) => event.set(key, value))
+  }
+
+  setOnce(key: string, value: string | number) {
+    this.call((event) => event.setOnce(key, value))
+  }
+
+  add(key: string, value: string | number) {
+    this.call((event) => event.add(key, typeof value === 'number' ? value : 0))
+  }
+
+  postInsert(key: string, value: string | number) {
+    this.call((event) => event.postInsert(key, value))
+  }
+
+  remove(key: string, value: string | number) {
+    this.call((event) => event.remove(key, value))
+  }
+}
+
+export const user = new UserModel()

src/components/Blocklist/index.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { ReactNode, useMemo } from 'react'
 
 const BLOCKED_ADDRESSES: string[] = [
@@ -38,7 +38,7 @@ const BLOCKED_ADDRESSES: string[] = [
 ]
 
 export default function Blocklist({ children }: { children: ReactNode }) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
   const blocked: boolean = useMemo(() => Boolean(account && BLOCKED_ADDRESSES.indexOf(account) !== -1), [account])
   if (blocked) {
     return (

src/components/CurrencyInputPanel/index.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
@@ -12,7 +12,7 @@ import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import useTheme from '../../hooks/useTheme'
-import { useCurrencyBalance } from '../../state/wallet/hooks'
+import { useCurrencyBalance } from '../../state/connection/hooks'
 import { ThemedText } from '../../theme'
 import { ButtonGray } from '../Button'
 import CurrencyLogo from '../CurrencyLogo'
@@ -103,6 +103,7 @@ const LabelRow = styled.div`
 
 const FiatRow = styled(LabelRow)`
   justify-content: flex-end;
+  height: 16px;
 `
 
 const Aligner = styled.span`
@@ -201,7 +202,7 @@ export default function CurrencyInputPanel({
   ...rest
 }: CurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
 
@@ -270,14 +271,15 @@ export default function CurrencyInputPanel({
             </Aligner>
           </CurrencySelect>
         </InputRow>
-        {!hideInput && !hideBalance && currency && (
-          <FiatRow>
+
+        <FiatRow>
+          {!hideInput && !hideBalance && currency && (
             <RowBetween>
               <LoadingOpacityContainer $loading={loading}>
                 <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
               </LoadingOpacityContainer>
               {account ? (
-                <RowFixed style={{ height: '17px' }}>
+                <RowFixed>
                   <ThemedText.Body
                     onClick={onMax}
                     color={theme.text3}
@@ -303,8 +305,8 @@ export default function CurrencyInputPanel({
                 <span />
               )}
             </RowBetween>
-          </FiatRow>
-        )}
+          )}
+        </FiatRow>
       </Container>
       {onCurrencySelect && (
         <CurrencySearchModal

src/components/CurrencyLogo/index.tsx

@@ -5,17 +5,23 @@ import styled from 'styled-components/macro'
 
 import Logo from '../Logo'
 
-const StyledLogo = styled(Logo)<{ size: string; native: boolean }>`
+const StyledLogo = styled(Logo)<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   background: radial-gradient(white 50%, #ffffff00 calc(75% + 1px), #ffffff00 100%);
   border-radius: 50%;
-  -mox-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
-  -webkit-box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
-  box-shadow: 0 0 1px ${({ native }) => (native ? 'white' : 'black')};
+  -mox-box-shadow: 0 0 1px black;
+  -webkit-box-shadow: 0 0 1px black;
+  box-shadow: 0 0 1px black;
   border: 0px solid rgba(255, 255, 255, 0);
 `
 
+const StyledNativeLogo = styled(StyledLogo)`
+  -mox-box-shadow: 0 0 1px white;
+  -webkit-box-shadow: 0 0 1px white;
+  box-shadow: 0 0 1px white;
+`
+
 export default function CurrencyLogo({
   currency,
   size = '24px',
@@ -26,16 +32,13 @@ export default function CurrencyLogo({
   size?: string
   style?: React.CSSProperties
 }) {
-  const logoURIs = useCurrencyLogoURIs(currency)
+  const props = {
+    alt: `${currency?.symbol ?? 'token'} logo`,
+    size,
+    srcs: useCurrencyLogoURIs(currency),
+    style,
+    ...rest,
+  }
 
-  return (
-    <StyledLogo
-      size={size}
-      native={currency?.isNative ?? false}
-      srcs={logoURIs}
-      alt={`${currency?.symbol ?? 'token'} logo`}
-      style={style}
-      {...rest}
-    />
-  )
+  return currency?.isNative ? <StyledNativeLogo {...props} /> : <StyledLogo {...props} />
 }

src/components/DowntimeWarning/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { AlertOctagon } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
@@ -42,7 +42,7 @@ function Wrapper({ children }: { children: React.ReactNode }) {
  * Shows a downtime warning for the network if it's relevant
  */
 export default function DowntimeWarning() {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   if (!isL2ChainId(chainId)) {
     return null
   }

src/components/ErrorBoundary/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
+import { sendEvent } from 'components/analytics'
 import React, { ErrorInfo } from 'react'
-import ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
 
 import store, { AppState } from '../../state'
@@ -85,7 +85,10 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    ReactGA.event('exception', { description: error.toString() + errorInfo.toString(), fatal: true })
+    sendEvent('exception', {
+      description: error.toString() + errorInfo.toString(),
+      fatal: true,
+    })
   }
 
   render() {

src/components/FeeSelector/index.tsx

@@ -1,17 +1,17 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
+import { useWeb3React } from '@web3-react/core'
+import { sendEvent } from 'components/analytics'
 import { ButtonGray } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import { RowBetween } from 'components/Row'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 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-ga4'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components/macro'
 import { ThemedText } from 'theme'
@@ -59,7 +59,7 @@ export default function FeeSelector({
   currencyA?: Currency | undefined
   currencyB?: Currency | undefined
 }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
 
@@ -101,7 +101,7 @@ export default function FeeSelector({
 
   const handleFeePoolSelectWithEvent = useCallback(
     (fee: FeeAmount) => {
-      ReactGA.event({
+      sendEvent({
         category: 'FeePoolSelect',
         action: 'Manual',
       })
@@ -122,7 +122,7 @@ export default function FeeSelector({
       setShowOptions(false)
 
       recommended.current = true
-      ReactGA.event({
+      sendEvent({
         category: 'FeePoolSelect',
         action: ' Recommended',
       })

src/components/Header/ChainConnectivityWarning.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { CHAIN_INFO, L2ChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { AlertOctagon } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
@@ -45,7 +45,7 @@ const Wrapper = styled.div`
 `
 
 export function ChainConnectivityWarning() {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const info = CHAIN_INFO[chainId ?? SupportedChainId.MAINNET]
   const label = info?.label
 

src/components/Header/NetworkSelector.tsx

@@ -1,22 +1,22 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
+import { getConnection } from 'connection/utils'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import usePrevious from 'hooks/usePrevious'
 import { ParsedQs } from 'qs'
 import { useCallback, useEffect, useRef } from 'react'
 import { ArrowDownCircle, ChevronDown } from 'react-feather'
 import { useHistory } from 'react-router-dom'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
 import { addPopup, ApplicationModal } from 'state/application/reducer'
+import { updateConnectionError } from 'state/connection/reducer'
+import { useAppDispatch } from 'state/hooks'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 import { replaceURLParam } from 'utils/routes'
-
-import { useAppDispatch } from '../../state/hooks'
-import { switchToNetwork } from '../../utils/switchToNetwork'
+import { isChainAllowed, switchChain } from 'utils/switchChain'
 
 const ActiveRowLinkList = styled.div`
   display: flex;
@@ -184,8 +184,8 @@ function Row({
   targetChain: SupportedChainId
   onSelectChain: (targetChain: number) => void
 }) {
-  const { library, chainId } = useActiveWeb3React()
-  if (!library || !chainId) {
+  const { provider, chainId } = useWeb3React()
+  if (!provider || !chainId) {
     return null
   }
   const active = chainId === targetChain
@@ -257,64 +257,67 @@ const getChainNameFromId = (id: string | number) => {
   return CHAIN_IDS_TO_NAMES[id as SupportedChainId] || ''
 }
 
+const NETWORK_SELECTOR_CHAINS = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.POLYGON,
+  SupportedChainId.OPTIMISM,
+  SupportedChainId.ARBITRUM_ONE,
+]
+
 export default function NetworkSelector() {
-  const { chainId, library } = useActiveWeb3React()
+  const dispatch = useAppDispatch()
+  const { chainId, provider, connector } = useWeb3React()
+  const previousChainId = usePrevious(chainId)
   const parsedQs = useParsedQueryString()
   const { urlChain, urlChainId } = getParsedChainId(parsedQs)
-  const prevChainId = usePrevious(chainId)
-  const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
-  const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
-  useOnClickOutside(node, open ? toggle : undefined)
-
+  const previousUrlChainId = usePrevious(urlChainId)
+  const node = useRef<HTMLDivElement>(null)
+  const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
+  const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
+  const closeModal = useCloseModal(ApplicationModal.NETWORK_SELECTOR)
+  const toggleModal = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
   const history = useHistory()
 
   const info = chainId ? CHAIN_INFO[chainId] : undefined
 
-  const dispatch = useAppDispatch()
+  const onSelectChain = useCallback(
+    async (targetChain: number, skipClose?: boolean) => {
+      if (!connector) return
 
-  const handleChainSwitch = useCallback(
-    (targetChain: number, skipToggle?: boolean) => {
-      if (!library?.provider) return
-      switchToNetwork({ provider: library.provider, chainId: targetChain })
-        .then(() => {
-          if (!skipToggle) {
-            toggle()
-          }
-          history.replace({
-            search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(targetChain)),
-          })
-        })
-        .catch((error) => {
-          console.error('Failed to switch networks', error)
+      const connectionType = getConnection(connector).type
 
-          // we want app network <-> chainId param to be in sync, so if user changes the network by changing the URL
-          // but the request fails, revert the URL back to current chainId
-          if (chainId) {
-            history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
-          }
+      try {
+        dispatch(updateConnectionError({ connectionType, error: undefined }))
+        await switchChain(connector, targetChain)
+      } catch (error) {
+        console.error('Failed to switch networks', error)
 
-          if (!skipToggle) {
-            toggle()
-          }
+        dispatch(updateConnectionError({ connectionType, error: error.message }))
+        dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
+      }
 
-          dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
-        })
+      if (!skipClose) {
+        closeModal()
+      }
     },
-    [dispatch, library, toggle, history, chainId]
+    [connector, closeModal, dispatch]
   )
 
   useEffect(() => {
-    if (!chainId || !prevChainId) return
+    if (!chainId || !previousChainId) return
 
     // when network change originates from wallet or dropdown selector, just update URL
-    if (chainId !== prevChainId) {
+    if (chainId !== previousChainId && chainId !== urlChainId) {
       history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
       // otherwise assume network change originates from URL
-    } else if (urlChainId && urlChainId !== chainId) {
-      handleChainSwitch(urlChainId, true)
+    } else if (urlChainId && urlChainId !== previousUrlChainId && urlChainId !== chainId) {
+      onSelectChain(urlChainId, true).catch(() => {
+        // we want app network <-> chainId param to be in sync, so if user changes the network by changing the URL
+        // but the request fails, revert the URL back to current chainId
+        history.replace({ search: replaceURLParam(history.location.search, 'chain', getChainNameFromId(chainId)) })
+      })
     }
-  }, [chainId, urlChainId, prevChainId, handleChainSwitch, history])
+  }, [chainId, urlChainId, previousChainId, previousUrlChainId, onSelectChain, history])
 
   // set chain parameter on initial load if not there
   useEffect(() => {
@@ -323,27 +326,28 @@ export default function NetworkSelector() {
     }
   }, [chainId, history, urlChainId, urlChain])
 
-  if (!chainId || !info || !library) {
+  if (!chainId || !info || !provider) {
     return null
   }
 
   return (
-    <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
+    <SelectorWrapper ref={node} onMouseEnter={openModal} onMouseLeave={closeModal} onClick={toggleModal}>
       <SelectorControls interactive>
         <SelectorLogo interactive src={info.logoUrl} />
         <SelectorLabel>{info.label}</SelectorLabel>
         <StyledChevronDown />
       </SelectorControls>
-      {open && (
+      {isOpen && (
         <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} />
+            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
+              isChainAllowed(connector, chainId) ? (
+                <Row onSelectChain={onSelectChain} targetChain={chainId} key={chainId} />
+              ) : null
+            )}
           </FlyoutMenuContents>
         </FlyoutMenu>
       )}

src/components/Header/Polling.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { RowFixed } from 'components/Row'
 import { CHAIN_INFO } from 'constants/chainInfo'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import useGasPrice from 'hooks/useGasPrice'
 import useMachineTimeMs from 'hooks/useMachineTime'
@@ -100,7 +100,7 @@ const DEFAULT_MS_BEFORE_WARNING = ms`10m`
 const NETWORK_HEALTH_CHECK_MS = ms`10s`
 
 export default function Polling() {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const blockNumber = useBlockNumber()
   const [isMounting, setIsMounting] = useState(false)
   const [isHover, setIsHover] = useState(false)

src/components/Header/index.tsx

@@ -1,18 +1,19 @@
 import { Trans } from '@lingui/macro'
 import useScrollPosition from '@react-hook/window-scroll'
+import { useWeb3React } from '@web3-react/core'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
 import { NavLink } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useShowClaimPopup, useToggleSelfClaimModal } from 'state/application/hooks'
 import { useUserHasAvailableClaim } from 'state/claim/hooks'
+import { useNativeCurrencyBalances } from 'state/connection/hooks'
 import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
-import { useNativeCurrencyBalances } from 'state/wallet/hooks'
 import styled from 'styled-components/macro'
+import { isChainAllowed } from 'utils/switchChain'
 
 import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
 import { ExternalLink, ThemedText } from '../../theme'
@@ -76,7 +77,7 @@ const HeaderElement = styled.div`
     margin-left: 0.5em;
   }
 
-  /* addresses safari's lack of support for "gap" */
+  /* addresses safaris lack of support for "gap" */
   & > *:not(:first-child) {
     margin-left: 8px;
   }
@@ -246,7 +247,9 @@ const StyledExternalLink = styled(ExternalLink).attrs({
 `
 
 export default function Header() {
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId, connector } = useWeb3React()
+
+  const chainAllowed = chainId && isChainAllowed(connector, chainId)
 
   const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
   const [darkMode] = useDarkModeManager()
@@ -265,7 +268,7 @@ export default function Header() {
   const {
     infoLink,
     nativeCurrency: { symbol: nativeCurrencySymbol },
-  } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
+  } = CHAIN_INFO[!chainId || !chainAllowed ? SupportedChainId.MAINNET : chainId]
 
   return (
     <HeaderFrame showBackground={scrollY > 45}>

src/components/Identicon/StatusIcon.tsx

@@ -1,23 +1,42 @@
-import { Connector } from '@web3-react/types'
-import { AbstractConnector } from 'web3-react-abstract-connector'
+import { ConnectionType } from 'connection'
+import styled from 'styled-components/macro'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import { fortmatic, injected, walletconnect, walletlink } from '../../connectors'
 import Identicon from '../Identicon'
 
-export default function StatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
-  switch (connector) {
-    case injected:
-      return <Identicon />
-    case walletconnect:
-      return <img src={WalletConnectIcon} alt={'WalletConnect'} />
-    case walletlink:
-      return <img src={CoinbaseWalletIcon} alt={'Coinbase Wallet'} />
-    case fortmatic:
-      return <img src={FortmaticIcon} alt={'Fortmatic'} />
-    default:
-      return null
+const IconWrapper = styled.div<{ size?: number }>`
+  ${({ theme }) => theme.flexColumnNoWrap};
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  & > img,
+  span {
+    height: ${({ size }) => (size ? size + 'px' : '32px')};
+    width: ${({ size }) => (size ? size + 'px' : '32px')};
   }
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    align-items: flex-end;
+  `};
+`
+
+export default function StatusIcon({ connectionType }: { connectionType: ConnectionType }) {
+  let image
+  switch (connectionType) {
+    case ConnectionType.INJECTED:
+      image = <Identicon />
+      break
+    case ConnectionType.WALLET_CONNECT:
+      image = <img src={WalletConnectIcon} alt="WalletConnect" />
+      break
+    case ConnectionType.COINBASE_WALLET:
+      image = <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
+      break
+    case ConnectionType.FORTMATIC:
+      image = <img src={FortmaticIcon} alt="Fortmatic" />
+      break
+  }
+
+  return <IconWrapper size={16}>{image}</IconWrapper>
 }

src/components/Identicon/index.tsx

@@ -1,5 +1,5 @@
 import jazzicon from '@metamask/jazzicon'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import useENSAvatar from 'hooks/useENSAvatar'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
@@ -19,7 +19,7 @@ const StyledAvatar = styled.img`
 `
 
 export default function Identicon() {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
   const [fetchable, setFetchable] = useState(true)
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
+import { sendEvent } from 'components/analytics'
 import { AutoColumn, ColumnCenter } from 'components/Column'
 import Loader from 'components/Loader'
 import { format } from 'd3'
@@ -9,7 +10,6 @@ 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-ga4'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
@@ -158,7 +158,7 @@ export default function LiquidityChartRangeInput({
   )
 
   if (isError) {
-    ReactGA.event('exception', { description: error.toString(), fatal: false })
+    sendEvent('exception', { description: error.toString(), fatal: false })
   }
 
   return (

src/components/Menu/index.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
 import { useActiveLocale } from 'hooks/useActiveLocale'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import React, { useEffect, useRef, useState } from 'react'
 import {
@@ -26,7 +26,7 @@ import styled, { css } from 'styled-components/macro'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useModalOpen, useToggleModal } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink } from '../../theme'
 import { ButtonPrimary } from '../Button'
@@ -207,10 +207,10 @@ function LanguageMenu({ close }: { close: () => void }) {
 }
 
 export default function Menu() {
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId } = useWeb3React()
 
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.MENU)
+  const open = useModalIsOpen(ApplicationModal.MENU)
   const toggleMenu = useToggleModal(ApplicationModal.MENU)
   useOnClickOutside(node, open ? toggleMenu : undefined)
   const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
@@ -334,7 +334,7 @@ const ExternalMenuItem = styled(MenuItem)`
 
 export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => {
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
+  const open = useModalIsOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   useOnClickOutside(node, open ? toggle : undefined)
   const ToggleElement = ToggleUI || StyledMenuIcon

src/components/ModalViews/index.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { useContext } from 'react'
 import { ArrowUpCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components/macro'
@@ -50,7 +50,7 @@ export function SubmittedView({
   hash: string | undefined
 }) {
   const theme = useContext(ThemeContext)
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   return (
     <ConfirmOrLoadingWrapper>

src/components/NetworkAlert/NetworkAlert.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { ArrowUpRight } from 'react-feather'
 import { useDarkModeManager } from 'state/user/hooks'
 import styled from 'styled-components/macro'
@@ -140,7 +140,7 @@ function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertCh
 }
 
 export function NetworkAlert() {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const [darkMode] = useDarkModeManager()
 
   if (!shouldShowAlert(chainId)) {

src/components/Popups/ClaimPopup.tsx

@@ -1,14 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
+import { sendEvent } from 'components/analytics'
 import { useCallback, useEffect } from 'react'
 import { Heart, X } from 'react-feather'
-import ReactGA from 'react-ga4'
 import styled, { keyframes } from 'styled-components/macro'
 
 import tokenLogo from '../../assets/images/token-logo.png'
 import {
-  useModalOpen,
+  useModalIsOpen,
   useShowClaimPopup,
   useToggleSelfClaimModal,
   useToggleShowClaimPopup,
@@ -55,17 +55,17 @@ const UniToken = styled.img`
 `
 
 export default function ClaimPopup() {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   // dont store these in persisted state yet
   const showClaimPopup: boolean = useShowClaimPopup()
   const toggleShowClaimPopup = useToggleShowClaimPopup()
 
   // toggle for showing this modal
-  const showClaimModal = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const showClaimModal = useModalIsOpen(ApplicationModal.SELF_CLAIM)
   const toggleSelfClaimModal = useToggleSelfClaimModal()
   const handleToggleSelfClaimModal = useCallback(() => {
-    ReactGA.event({
+    sendEvent({
       category: 'MerkleDrop',
       action: 'Toggle self claim modal',
     })
@@ -79,7 +79,7 @@ export default function ClaimPopup() {
   // listen for available claim and show popup if needed
   useEffect(() => {
     if (userHasAvailableclaim) {
-      ReactGA.event({
+      sendEvent({
         category: 'MerkleDrop',
         action: 'Show claim popup',
       })

src/components/Popups/SurveyPopup.tsx

@@ -1,10 +1,10 @@
 import { Trans } from '@lingui/macro'
+import { sendEvent } from 'components/analytics'
 import { AutoColumn } from 'components/Column'
 import { RowFixed } from 'components/Row'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
-import ReactGA from 'react-ga4'
 import { useShowSurveyPopup } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
@@ -62,7 +62,7 @@ export default function SurveyPopup() {
       if (Math.random() < 0.01) {
         setShowSurveyPopup(true)
         // log a case of succesful view
-        ReactGA.event({
+        sendEvent({
           category: 'Survey',
           action: 'Saw Survey',
         })
@@ -80,7 +80,7 @@ export default function SurveyPopup() {
         <Wrapper gap="10px">
           <WrappedCloseIcon
             onClick={() => {
-              ReactGA.event({
+              sendEvent({
                 category: 'Survey',
                 action: 'Clicked Survey Link',
               })

src/components/Popups/TransactionPopup.tsx

@@ -1,4 +1,4 @@
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components/macro'
@@ -16,7 +16,7 @@ const RowNoFlex = styled(AutoRow)`
 `
 
 export default function TransactionPopup({ hash }: { hash: string }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const tx = useTransaction(hash)
   const theme = useContext(ThemeContext)

src/components/Popups/index.tsx

@@ -1,5 +1,5 @@
+import { useWeb3React } from '@web3-react/core'
 import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 
@@ -63,7 +63,7 @@ export default function Popups() {
   const urlWarningActive = useURLWarningVisible()
 
   // need extra padding if network is not L1 Ethereum
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const isNotOnMainnet = Boolean(chainId && chainId !== SupportedChainId.MAINNET)
 
   return (

src/components/PositionCard/V2.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import JSBI from 'jsbi'
 import { transparentize } from 'polished'
 import { useState } from 'react'
@@ -13,7 +13,7 @@ import styled from 'styled-components/macro'
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { useColor } from '../../hooks/useColor'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { useTokenBalance } from '../../state/wallet/hooks'
+import { useTokenBalance } from '../../state/connection/hooks'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
@@ -42,7 +42,7 @@ interface PositionCardProps {
 }
 
 export default function V2PositionCard({ pair, border, stakedBalance }: PositionCardProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   const currency0 = unwrappedToken(pair.token0)
   const currency1 = unwrappedToken(pair.token1)

src/components/PositionCard/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import JSBI from 'jsbi'
 import { transparentize } from 'polished'
 import { useState } from 'react'
@@ -13,7 +13,7 @@ import styled from 'styled-components/macro'
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { useColor } from '../../hooks/useColor'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { useTokenBalance } from '../../state/wallet/hooks'
+import { useTokenBalance } from '../../state/connection/hooks'
 import { ExternalLink, ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
@@ -46,7 +46,7 @@ interface PositionCardProps {
 }
 
 export function MinimalPositionCard({ pair, showUnwrapped = false, border }: PositionCardProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   const currency0 = showUnwrapped ? pair.token0 : unwrappedToken(pair.token0)
   const currency1 = showUnwrapped ? pair.token1 : unwrappedToken(pair.token1)
@@ -158,7 +158,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
 }
 
 export default function FullPositionCard({ pair, border, stakedBalance }: PositionCardProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   const currency0 = unwrappedToken(pair.token0)
   const currency1 = unwrappedToken(pair.token1)

src/components/PrivacyPolicy/index.tsx

@@ -1,14 +1,14 @@
 import { Trans } from '@lingui/macro'
+import { sendEvent } from 'components/analytics'
 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-ga4'
 import styled from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { isMobile } from 'utils/userAgent'
 
-import { useModalOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'
+import { useModalIsOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { AutoColumn } from '../Column'
 import Modal from '../Modal'
@@ -70,7 +70,7 @@ const EXTERNAL_APIS = [
     ),
   },
   {
-    name: 'Google Analytics',
+    name: 'Google Analytics & Amplitude',
     description: <Trans>The app logs anonymized usage statistics in order to improve over time.</Trans>,
   },
   {
@@ -81,13 +81,13 @@ const EXTERNAL_APIS = [
 
 export function PrivacyPolicyModal() {
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.PRIVACY_POLICY)
+  const open = useModalIsOpen(ApplicationModal.PRIVACY_POLICY)
   const toggle = useTogglePrivacyPolicy()
 
   useEffect(() => {
     if (!open) return
 
-    ReactGA.event({
+    sendEvent({
       category: 'Modal',
       action: 'Show Legal',
     })

src/components/RangeSelector/PresetsButtons.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
+import { sendEvent } from 'components/analytics'
 import { ButtonOutlined } from 'components/Button'
 import { AutoRow } from 'components/Row'
 import React from 'react'
-import ReactGA from 'react-ga4'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -20,7 +20,7 @@ export default function PresetsButtons({ setFullRange }: { setFullRange: () => v
       <Button
         onClick={() => {
           setFullRange()
-          ReactGA.event({
+          sendEvent({
             category: 'Liquidity',
             action: 'Full Range Clicked',
           })

src/components/SearchModal/CommonBases.tsx

@@ -49,6 +49,8 @@ export default function CommonBases({
           const isSelected = selectedCurrency?.equals(currency)
           return (
             <BaseWrapper
+              tabIndex={0}
+              onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
               onClick={() => !isSelected && onSelect(currency)}
               disable={isSelected}
               key={currencyId(currency)}

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

@@ -11,6 +11,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
       <div
         class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
         style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
+        tabindex="0"
       >
         CurrencyLogo currency=DAI
         <div
@@ -33,6 +34,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
       <div
         class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
+        tabindex="0"
       >
         CurrencyLogo currency=USDC
         <div
@@ -55,6 +57,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
       <div
         class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
         style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
+        tabindex="0"
       >
         CurrencyLogo currency=WBTC
         <div

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

@@ -22,20 +22,21 @@ jest.mock(
       `CurrencyLogo currency=${currency.symbol}`
 )
 
-jest.mock('hooks/useActiveWeb3React', () => {
+jest.mock('@web3-react/core', () => {
+  const web3React = jest.requireActual('@web3-react/core')
   return {
-    __esModule: true,
-    default: () => ({
+    useWeb3React: () => ({
       account: '123',
-      active: true,
+      isActive: true,
     }),
+    ...web3React,
   }
 })
 
-jest.mock('../../../state/wallet/hooks', () => {
+jest.mock('../../../state/connection/hooks', () => {
   return {
     useCurrencyBalance: (currency: Currency) => {
-      return mockCurrencyAmt[(currency as mockToken).address]
+      return mockCurrencyAmt[(currency as mockToken)?.address]
     },
   }
 })

src/components/SearchModal/CurrencyList/index.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import { LightGreyCard } from 'components/Card'
 import QuestionHelper from 'components/QuestionHelper'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useTheme from 'hooks/useTheme'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
@@ -11,9 +11,9 @@ import styled from 'styled-components/macro'
 
 import TokenListLogo from '../../../assets/svg/tokenlist.svg'
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
+import { useCurrencyBalance } from '../../../state/connection/hooks'
 import { useCombinedActiveList } from '../../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
-import { useCurrencyBalance } from '../../../state/wallet/hooks'
 import { ThemedText } from '../../../theme'
 import { isTokenOnList } from '../../../utils'
 import Column from '../../Column'
@@ -114,7 +114,7 @@ function CurrencyRow({
   style: CSSProperties
   showCurrencyAmount?: boolean
 }) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
   const key = currencyKey(currency)
   const selectedTokenList = useCombinedActiveList()
   const isOnSelectedList = isTokenOnList(selectedTokenList, currency.isToken ? currency : undefined)
@@ -124,8 +124,10 @@ function CurrencyRow({
   // only show add or remove buttons if not on selected list
   return (
     <MenuItem
+      tabIndex={0}
       style={style}
       className={`token-item-${key}`}
+      onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect() : null)}
       onClick={() => (isSelected ? null : onSelect())}
       disabled={isSelected}
       selected={otherSelected}

src/components/SearchModal/CurrencySearch.tsx

@@ -1,7 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
+import { sendEvent } from 'components/analytics'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
@@ -11,11 +12,10 @@ 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-ga4'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import { useAllTokenBalances } from 'state/wallet/hooks'
+import { useAllTokenBalances } from 'state/connection/hooks'
 import styled from 'styled-components/macro'
 
 import { useAllTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
@@ -71,7 +71,7 @@ export function CurrencySearch({
   showImportView,
   setImportToken,
 }: CurrencySearchProps) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const theme = useTheme()
 
   const [tokenLoaderTimerElapsed, setTokenLoaderTimerElapsed] = useState(false)
@@ -93,7 +93,7 @@ export function CurrencySearch({
 
   useEffect(() => {
     if (isAddressSearch) {
-      ReactGA.event({
+      sendEvent({
         category: 'Currency Select',
         action: 'Search by address',
         label: isAddressSearch,

src/components/SearchModal/ImportList.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { TokenList } from '@uniswap/token-lists'
+import { sendEvent } from 'components/analytics'
 import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -11,7 +12,6 @@ import useTheme from 'hooks/useTheme'
 import { transparentize } from 'polished'
 import { useCallback, useState } from 'react'
 import { AlertTriangle, ArrowLeft } from 'react-feather'
-import ReactGA from 'react-ga4'
 import { useAppDispatch } from 'state/hooks'
 import { enableList, removeList } from 'state/lists/actions'
 import { useAllLists } from 'state/lists/hooks'
@@ -54,7 +54,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
     setAddError(null)
     fetchList(listURL)
       .then(() => {
-        ReactGA.event({
+        sendEvent({
           category: 'Lists',
           action: 'Add List',
           label: listURL,
@@ -66,7 +66,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
         setModalView(CurrencyModalView.manage)
       })
       .catch((error) => {
-        ReactGA.event({
+        sendEvent({
           category: 'Lists',
           action: 'Add List Failed',
           label: listURL,

src/components/SearchModal/ImportRow.tsx

@@ -63,7 +63,7 @@ export default function ImportRow({
   const list = token instanceof WrappedTokenInfo ? token.list : undefined
 
   return (
-    <TokenSection style={style}>
+    <TokenSection tabIndex={0} style={style}>
       <CurrencyLogo currency={token} size={'24px'} style={{ opacity: dim ? '0.6' : '1' }} />
       <AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
         <AutoRow>

src/components/SearchModal/ManageLists.tsx

@@ -1,15 +1,15 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { TokenList } from '@uniswap/token-lists'
+import { useWeb3React } from '@web3-react/core'
+import { sendEvent } from 'components/analytics'
 import Card from 'components/Card'
 import { UNSUPPORTED_LIST_URLS } from 'constants/lists'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useListColor } from 'hooks/useColor'
 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-ga4'
 import { usePopper } from 'react-popper'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import styled from 'styled-components/macro'
@@ -95,7 +95,7 @@ function listUrlRowHTMLId(listUrl: string) {
 }
 
 const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const listsByUrl = useAppSelector((state) => state.lists.byUrl)
   const dispatch = useAppDispatch()
   const { current: list, pendingUpdate: pending } = listsByUrl[listUrl]
@@ -126,7 +126,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
 
   const handleAcceptListUpdate = useCallback(() => {
     if (!pending) return
-    ReactGA.event({
+    sendEvent({
       category: 'Lists',
       action: 'Update List from List Select',
       label: listUrl,
@@ -135,13 +135,13 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
   }, [dispatch, listUrl, pending])
 
   const handleRemoveList = useCallback(() => {
-    ReactGA.event({
+    sendEvent({
       category: 'Lists',
       action: 'Start Remove List',
       label: listUrl,
     })
     if (window.prompt(t`Please confirm you would like to remove this list by typing REMOVE`) === `REMOVE`) {
-      ReactGA.event({
+      sendEvent({
         category: 'Lists',
         action: 'Confirm Remove List',
         label: listUrl,
@@ -151,7 +151,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
   }, [dispatch, listUrl])
 
   const handleEnableList = useCallback(() => {
-    ReactGA.event({
+    sendEvent({
       category: 'Lists',
       action: 'Enable List',
       label: listUrl,
@@ -160,7 +160,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
   }, [dispatch, listUrl])
 
   const handleDisableList = useCallback(() => {
-    ReactGA.event({
+    sendEvent({
       category: 'Lists',
       action: 'Disable List',
       label: listUrl,
@@ -242,7 +242,7 @@ export function ManageLists({
   setImportList: (list: TokenList) => void
   setListUrl: (url: string) => void
 }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const theme = useTheme()
 
   const [listUrlInput, setListUrlInput] = useState<string>('')

src/components/SearchModal/ManageTokens.tsx

@@ -1,11 +1,11 @@
 import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import Column from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { useToken } from 'hooks/Tokens'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { RefObject, useCallback, useMemo, useRef, useState } from 'react'
 import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
 import styled from 'styled-components/macro'
@@ -44,7 +44,7 @@ export default function ManageTokens({
   setModalView: (view: CurrencyModalView) => void
   setImportToken: (token: Token) => void
 }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const [searchQuery, setSearchQuery] = useState<string>('')
   const theme = useTheme()

src/components/SearchModal/TokenImportCard.tsx

@@ -1,12 +1,12 @@
 import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
 import { TokenList } from '@uniswap/token-lists'
+import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import ListLogo from 'components/ListLogo'
 import { RowFixed } from 'components/Row'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { transparentize } from 'polished'
 import { AlertCircle } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
@@ -33,7 +33,7 @@ interface TokenImportCardProps {
 }
 const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
   const theme = useTheme()
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   return (
     <Card backgroundColor={theme.bg2} padding="2rem">
       <AutoColumn gap="10px" justify="center">

src/components/Settings/index.tsx

@@ -1,16 +1,16 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
+import { sendEvent } from 'components/analytics'
 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-ga4'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useModalOpen, useToggleSettingsMenu } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleSettingsMenu } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useClientSideRouter, useExpertModeManager } from '../../state/user/hooks'
 import { ThemedText } from '../../theme'
@@ -119,10 +119,10 @@ const ModalContentWrapper = styled.div`
 `
 
 export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.SETTINGS)
+  const open = useModalIsOpen(ApplicationModal.SETTINGS)
   const toggle = useToggleSettingsMenu()
 
   const theme = useContext(ThemeContext)
@@ -211,7 +211,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
                   id="toggle-optimized-router-button"
                   isActive={!clientSideRouter}
                   toggle={() => {
-                    ReactGA.event({
+                    sendEvent({
                       category: 'Routing',
                       action: clientSideRouter ? 'enable routing API' : 'disable routing API',
                     })

src/components/Toggle/index.tsx

@@ -1,4 +1,5 @@
 import { darken } from 'polished'
+import { useState } from 'react'
 import styled, { keyframes } from 'styled-components/macro'
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
@@ -45,8 +46,10 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boo
         color: isActive ? theme.white : theme.text3,
       }
 
-const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string }>`
-  animation: 0.1s ${({ isActive }) => (isActive ? turnOnToggle : turnOffToggle)} ease-in;
+const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInitialToggleLoad?: boolean }>`
+  animation: 0.1s
+    ${({ isActive, isInitialToggleLoad }) => (isInitialToggleLoad ? 'none' : isActive ? turnOnToggle : turnOffToggle)}
+    ease-in;
   background: ${({ theme, bgColor, isActive }) =>
     isActive ? bgColor ?? theme.primary1 : !!bgColor ? theme.bg4 : theme.text3};
   border-radius: 50%;
@@ -67,9 +70,16 @@ interface ToggleProps {
 }
 
 export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
+  const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
+
+  const switchToggle = () => {
+    toggle()
+    if (isInitialToggleLoad) setIsInitialToggleLoad(false)
+  }
+
   return (
-    <Wrapper id={id} isActive={isActive} onClick={toggle}>
-      <ToggleElement isActive={isActive} bgColor={bgColor} />
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
+      <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
     </Wrapper>
   )
 }

src/components/TopLevelModals/index.tsx

@@ -1,16 +1,16 @@
+import { useWeb3React } from '@web3-react/core'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 
 export default function TopLevelModals() {
-  const addressClaimOpen = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
+  const addressClaimOpen = useModalIsOpen(ApplicationModal.ADDRESS_CLAIM)
   const addressClaimToggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
 
-  const blockedAccountModalOpen = useModalOpen(ApplicationModal.BLOCKED_ACCOUNT)
-  const { account } = useActiveWeb3React()
+  const blockedAccountModalOpen = useModalIsOpen(ApplicationModal.BLOCKED_ACCOUNT)
+  const { account } = useWeb3React()
 
   useAccountRiskCheck(account)
   const open = Boolean(blockedAccountModalOpen && account)

src/components/TransactionConfirmationModal/index.tsx

@@ -1,18 +1,17 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import Badge from 'components/Badge'
 import { CHAIN_INFO } from 'constants/chainInfo'
 import { L2_CHAIN_IDS, SupportedL2ChainId } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
-import { ReactNode, useContext } from 'react'
+import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
+import { ReactNode, useCallback, useContext, useState } from 'react'
 import { AlertCircle, AlertTriangle, ArrowUpCircle, CheckCircle } from 'react-feather'
 import { Text } from 'rebass'
 import { useIsTransactionConfirmed, useTransaction } from 'state/transactions/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import MetaMaskLogo from '../../assets/images/metamask.png'
 import { ExternalLink } from '../../theme'
 import { CloseIcon, CustomLightSpinner } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
@@ -97,9 +96,25 @@ function TransactionSubmittedContent({
 }) {
   const theme = useContext(ThemeContext)
 
-  const { library } = useActiveWeb3React()
+  const { connector } = useWeb3React()
 
-  const { addToken, success } = useAddTokenToMetamask(currencyToAdd)
+  const token = currencyToAdd?.wrapped
+  const logoURL = useCurrencyLogoURIs(token)[0]
+
+  const [success, setSuccess] = useState<boolean | undefined>()
+
+  const addToken = useCallback(() => {
+    if (!token?.symbol || !connector.watchAsset) return
+    connector
+      .watchAsset({
+        address: token.address,
+        symbol: token.symbol,
+        decimals: token.decimals,
+        image: logoURL,
+      })
+      .then(() => setSuccess(true))
+      .catch(() => setSuccess(false))
+  }, [connector, logoURL, token])
 
   return (
     <Wrapper>
@@ -124,13 +139,11 @@ function TransactionSubmittedContent({
               </Text>
             </ExternalLink>
           )}
-          {currencyToAdd && library?.provider?.isMetaMask && (
+          {currencyToAdd && connector.watchAsset && (
             <ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={addToken}>
               {!success ? (
                 <RowFixed>
-                  <Trans>
-                    Add {currencyToAdd.symbol} to Metamask <StyledLogo src={MetaMaskLogo} />
-                  </Trans>
+                  <Trans>Add {currencyToAdd.symbol}</Trans>
                 </RowFixed>
               ) : (
                 <RowFixed>
@@ -329,7 +342,7 @@ export default function TransactionConfirmationModal({
   content,
   currencyToAdd,
 }: ConfirmationModalProps) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const isL2 = Boolean(chainId && L2_CHAIN_IDS.includes(chainId))
 

src/components/TransactionSettings/index.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import ms from 'ms.macro'
 import { darken } from 'polished'
 import { useContext, useState } from 'react'
@@ -97,7 +97,7 @@ interface TransactionSettingsProps {
 const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
 
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
 
   const userSlippageTolerance = useUserSlippageTolerance()

src/components/WalletModal/Option.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components/macro'
 
 import { ExternalLink } from '../../theme'
 
-const InfoCard = styled.button<{ active?: boolean }>`
-  background-color: ${({ theme, active }) => (active ? theme.bg3 : theme.bg2)};
+const InfoCard = styled.button<{ isActive?: boolean }>`
+  background-color: ${({ theme, isActive }) => (isActive ? theme.bg3 : theme.bg2)};
   padding: 1rem;
   outline: none;
   border: 1px solid;
@@ -13,7 +13,7 @@ const InfoCard = styled.button<{ active?: boolean }>`
   &:focus {
     box-shadow: 0 0 0 1px ${({ theme }) => theme.primary1};
   }
-  border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg3)};
+  border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.bg3)};
 `
 
 const OptionCard = styled(InfoCard as any)`
@@ -97,7 +97,7 @@ export default function Option({
   header,
   subheader = null,
   icon,
-  active = false,
+  isActive = false,
   id,
 }: {
   link?: string | null
@@ -108,14 +108,20 @@ export default function Option({
   header: React.ReactNode
   subheader: React.ReactNode | null
   icon: string
-  active?: boolean
+  isActive?: boolean
   id: string
 }) {
   const content = (
-    <OptionCardClickable id={id} onClick={onClick} clickable={clickable && !active} active={active}>
+    <OptionCardClickable
+      id={id}
+      onClick={onClick}
+      clickable={clickable && !isActive}
+      active={isActive}
+      data-testid="wallet-modal-option"
+    >
       <OptionCardLeft>
         <HeaderText color={color}>
-          {active ? (
+          {isActive ? (
             <CircleWrapper>
               <GreenCircle>
                 <div />

src/components/WalletModal/PendingView.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
+import { Connector } from '@web3-react/types'
 import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { AbstractConnector } from 'web3-react-abstract-connector'
 
 import Loader from '../Loader'
 
@@ -49,15 +49,13 @@ const LoadingWrapper = styled.div`
 export default function PendingView({
   connector,
   error = false,
-  setPendingError,
   tryActivation,
-  resetAccountView,
+  openOptions,
 }: {
-  connector?: AbstractConnector
+  connector: Connector
   error?: boolean
-  setPendingError: (error: boolean) => void
-  tryActivation: (connector: AbstractConnector) => void
-  resetAccountView: () => void
+  tryActivation: (connector: Connector) => void
+  openOptions: () => void
 }) {
   return (
     <PendingSection>
@@ -77,14 +75,13 @@ export default function PendingView({
                 $borderRadius="12px"
                 padding="12px"
                 onClick={() => {
-                  setPendingError(false)
-                  connector && tryActivation(connector)
+                  tryActivation(connector)
                 }}
               >
                 <Trans>Try Again</Trans>
               </ButtonPrimary>
               <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
-                <ThemedText.Link fontSize={12} onClick={resetAccountView}>
+                <ThemedText.Link fontSize={12} onClick={openOptions}>
                   <Trans>Back to wallet selection</Trans>
                 </ThemedText.Link>
               </ButtonEmpty>

src/components/WalletModal/index.test.tsx

@@ -0,0 +1,87 @@
+import { ApplicationModal } from 'state/application/reducer'
+
+import { render, screen } from '../../test-utils'
+import WalletModal from './index'
+
+beforeEach(() => {
+  delete global.window.ethereum
+})
+
+afterAll(() => {
+  delete global.window.ethereum
+})
+
+const UserAgentMock = jest.requireMock('utils/userAgent')
+jest.mock('utils/userAgent', () => ({
+  isMobile: false,
+}))
+
+jest.mock('.../../state/application/hooks', () => {
+  return {
+    useModalIsOpen: (_modal: ApplicationModal) => true,
+    useToggleWalletModal: () => {
+      return
+    },
+  }
+})
+
+jest.mock('@web3-react/core', () => {
+  const web3React = jest.requireActual('@web3-react/core')
+  return {
+    useWeb3React: () => ({
+      account: undefined,
+      isActive: false,
+      isActivating: false,
+      connector: undefined,
+    }),
+    ...web3React,
+  }
+})
+
+it('loads Wallet Modal on desktop', async () => {
+  render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
+  expect(screen.getByText('Install MetaMask')).toBeInTheDocument()
+  expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
+  expect(screen.getByText('WalletConnect')).toBeInTheDocument()
+  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(4)
+})
+
+it('loads Wallet Modal on desktop with MetaMask installed', async () => {
+  global.window.ethereum = { isMetaMask: true }
+
+  render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
+  expect(screen.getByText('MetaMask')).toBeInTheDocument()
+  expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
+  expect(screen.getByText('WalletConnect')).toBeInTheDocument()
+  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(4)
+})
+
+it('loads Wallet Modal on mobile', async () => {
+  UserAgentMock.isMobile = true
+
+  render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
+  expect(screen.getByText('Open in Coinbase Wallet')).toBeInTheDocument()
+  expect(screen.getByText('WalletConnect')).toBeInTheDocument()
+  expect(screen.getByText('Fortmatic')).toBeInTheDocument()
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(3)
+})
+
+it('loads Wallet Modal on MetaMask browser', async () => {
+  UserAgentMock.isMobile = true
+  global.window.ethereum = { isMetaMask: true }
+
+  render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
+  expect(screen.getByText('MetaMask')).toBeInTheDocument()
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(1)
+})
+
+it('loads Wallet Modal on Coinbase Wallet browser', async () => {
+  UserAgentMock.isMobile = true
+  global.window.ethereum = { isCoinbaseWallet: true }
+
+  render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
+  expect(screen.getByText('Coinbase Wallet')).toBeInTheDocument()
+  expect(screen.getAllByTestId('wallet-modal-option')).toHaveLength(1)
+})

src/components/WalletModal/index.tsx

@@ -1,23 +1,22 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
+import { Connector } from '@web3-react/types'
+import { sendEvent } from 'components/analytics'
 import { AutoColumn } from 'components/Column'
-import { PrivacyPolicy } from 'components/PrivacyPolicy'
-import Row, { AutoRow } from 'components/Row'
+import { AutoRow } from 'components/Row'
+import { ConnectionType, injectedConnection } from 'connection'
+import { getConnection } from 'connection/utils'
 import { useCallback, useEffect, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
-import ReactGA from 'react-ga4'
+import { updateConnectionError } from 'state/connection/reducer'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { updateSelectedWallet } from 'state/user/reducer'
 import styled from 'styled-components/macro'
-import { AbstractConnector } from 'web3-react-abstract-connector'
-import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
-import { WalletConnectConnector } from 'web3-react-walletconnect-connector'
 
 import MetamaskIcon from '../../assets/images/metamask.png'
-import TallyIcon from '../../assets/images/tally.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { fortmatic, injected } from '../../connectors'
-import { OVERLAY_READY } from '../../connectors/Fortmatic'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
-import usePrevious from '../../hooks/usePrevious'
-import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleWalletModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink, ThemedText } from '../../theme'
 import { isMobile } from '../../utils/userAgent'
@@ -65,24 +64,20 @@ const ContentWrapper = styled.div`
   padding: 0 1rem 1rem 1rem;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
-
   ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0 1rem 1rem 1rem`};
 `
 
 const UpperSection = styled.div`
   position: relative;
-
   h5 {
     margin: 0;
     margin-bottom: 0.5rem;
     font-size: 1rem;
     font-weight: 400;
   }
-
   h5:last-child {
     margin-bottom: 0px;
   }
-
   h4 {
     margin-top: 0;
     font-weight: 500;
@@ -111,10 +106,8 @@ const HoverText = styled.div`
 
 const WALLET_VIEWS = {
   OPTIONS: 'options',
-  OPTIONS_SECONDARY: 'options_secondary',
   ACCOUNT: 'account',
   PENDING: 'pending',
-  LEGAL: 'legal',
 }
 
 export default function WalletModal({
@@ -126,101 +119,102 @@ export default function WalletModal({
   confirmedTransactions: string[] // hashes of confirmed
   ENSName?: string
 }) {
-  // important that these are destructed from the account-specific web3-react context
-  const { account, connector, activate, error } = useWeb3React()
+  const dispatch = useAppDispatch()
+  const { connector, account } = useWeb3React()
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
-  const previousWalletView = usePrevious(walletView)
 
-  const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
+  const [pendingConnector, setPendingConnector] = useState<Connector | undefined>()
+  const pendingError = useAppSelector((state) =>
+    pendingConnector ? state.connection.errorByConnectionType[getConnection(pendingConnector).type] : undefined
+  )
 
-  const [pendingError, setPendingError] = useState<boolean>()
+  const walletModalOpen = useModalIsOpen(ApplicationModal.WALLET)
+  const toggleWalletModal = useToggleWalletModal()
 
-  const walletModalOpen = useModalOpen(ApplicationModal.WALLET)
-  const toggleWalletModal = useWalletModalToggle()
+  const openOptions = useCallback(() => {
+    setWalletView(WALLET_VIEWS.OPTIONS)
+  }, [setWalletView])
 
-  const previousAccount = usePrevious(account)
-
-  const resetAccountView = useCallback(() => {
-    setPendingError(false)
-    setWalletView(WALLET_VIEWS.ACCOUNT)
-  }, [setPendingError, setWalletView])
-
-  // close on connection, when logged out before
-  useEffect(() => {
-    if (account && !previousAccount && walletModalOpen) {
-      toggleWalletModal()
-    }
-  }, [account, previousAccount, toggleWalletModal, walletModalOpen])
-
-  // always reset to account view
   useEffect(() => {
     if (walletModalOpen) {
-      resetAccountView()
+      setWalletView(account ? WALLET_VIEWS.ACCOUNT : WALLET_VIEWS.OPTIONS)
     }
-  }, [walletModalOpen, resetAccountView])
+  }, [walletModalOpen, setWalletView, account])
 
-  const tryActivation = async (connector: AbstractConnector | undefined) => {
-    let name = ''
-    Object.keys(SUPPORTED_WALLETS).map((key) => {
-      if (connector === SUPPORTED_WALLETS[key].connector) {
-        return (name = SUPPORTED_WALLETS[key].name)
-      }
-      return true
-    })
-    // log selected wallet
-    ReactGA.event({
-      category: 'Wallet',
-      action: 'Change Wallet',
-      label: name,
-    })
-    setPendingWallet(connector) // set wallet for pending view
-    setWalletView(WALLET_VIEWS.PENDING)
-
-    // if the connector is walletconnect and the user has already tried to connect, manually reset the connector
-    if (connector instanceof WalletConnectConnector) {
-      connector.walletConnectProvider = undefined
-    }
-
-    connector &&
-      activate(connector, undefined, true).catch((error) => {
-        if (error instanceof UnsupportedChainIdError) {
-          activate(connector) // a little janky...can't use setError because the connector isn't set
-        } else {
-          setPendingError(true)
-        }
-      })
-  }
-
-  // close wallet modal if fortmatic modal is active
   useEffect(() => {
-    fortmatic.on(OVERLAY_READY, () => {
-      toggleWalletModal()
-    })
-  }, [toggleWalletModal])
+    if (pendingConnector && walletView !== WALLET_VIEWS.PENDING) {
+      updateConnectionError({ connectionType: getConnection(pendingConnector).type, error: undefined })
+      setPendingConnector(undefined)
+    }
+  }, [pendingConnector, walletView])
+
+  const tryActivation = useCallback(
+    async (connector: Connector) => {
+      const connectionType = getConnection(connector).type
+
+      // log selected wallet
+      sendEvent({
+        category: 'Wallet',
+        action: 'Change Wallet',
+        label: connectionType,
+      })
+
+      try {
+        // Fortmatic opens it's own modal on activation to log in. This modal has a tabIndex
+        // collision into the WalletModal, so we special case by closing the modal.
+        if (connectionType === ConnectionType.FORTMATIC) {
+          toggleWalletModal()
+        }
+
+        setPendingConnector(connector)
+        setWalletView(WALLET_VIEWS.PENDING)
+        dispatch(updateConnectionError({ connectionType, error: undefined }))
+
+        await connector.activate()
+
+        dispatch(updateSelectedWallet({ wallet: connectionType }))
+      } catch (error) {
+        console.debug(`web3-react connection error: ${error}`)
+        dispatch(updateConnectionError({ connectionType, error: error.message }))
+      }
+    },
+    [dispatch, toggleWalletModal]
+  )
 
   // get wallets user can switch too, depending on device/browser
   function getOptions() {
-    const isMetamask = !!window.ethereum?.isMetaMask
-    const isTally = !!window.ethereum?.isTally
+    const isMetaMask = !!window.ethereum?.isMetaMask
+    const isCoinbaseWallet = !!window.ethereum?.isCoinbaseWallet
     return Object.keys(SUPPORTED_WALLETS).map((key) => {
       const option = SUPPORTED_WALLETS[key]
+
+      const optionProps = {
+        isActive: option.connector === connector,
+        id: `connect-${key}`,
+        link: option.href,
+        header: option.name,
+        color: option.color,
+        key,
+        icon: option.iconURL,
+      }
+
       // check for mobile options
       if (isMobile) {
-        if (!window.web3 && !window.ethereum && option.mobile) {
+        if (
+          (!window.web3 && !window.ethereum && option.mobile) ||
+          (isMetaMask && option.name === 'MetaMask') ||
+          (isCoinbaseWallet && option.name === 'Coinbase Wallet')
+        ) {
           return (
             <Option
+              {...optionProps}
               onClick={() => {
-                option.connector !== connector && !option.href && tryActivation(option.connector)
+                if (!option.href && !!option.connector) {
+                  tryActivation(option.connector)
+                }
               }}
-              id={`connect-${key}`}
-              key={key}
-              active={option.connector && option.connector === connector}
-              color={option.color}
-              link={option.href}
-              header={option.name}
               subheader={null}
-              icon={option.iconURL}
             />
           )
         }
@@ -228,7 +222,7 @@ export default function WalletModal({
       }
 
       // overwrite injected when needed
-      if (option.connector === injected) {
+      if (option.connector === injectedConnection.connector) {
         // don't show injected if there's no injected provider
         if (!(window.web3 || window.ethereum)) {
           if (option.name === 'MetaMask') {
@@ -237,7 +231,7 @@ export default function WalletModal({
                 id={`connect-${key}`}
                 key={key}
                 color={'#E8831D'}
-                header={<Trans>Install Metamask</Trans>}
+                header={<Trans>Install MetaMask</Trans>}
                 subheader={null}
                 link={'https://metamask.io/'}
                 icon={MetamaskIcon}
@@ -248,30 +242,12 @@ export default function WalletModal({
           }
         }
         // don't return metamask if injected provider isn't metamask
-        else if (option.name === 'MetaMask' && !isMetamask) {
+        else if (option.name === 'MetaMask' && !isMetaMask) {
           return null
         }
         // likewise for generic
-        else if (option.name === 'Injected' && isMetamask) {
+        else if (option.name === 'Injected' && isMetaMask) {
           return null
-        } else if (option.name === 'Injected' && isTally) {
-          return (
-            <Option
-              id={`connect-${key}`}
-              key={key}
-              onClick={() => {
-                option.connector === connector
-                  ? setWalletView(WALLET_VIEWS.ACCOUNT)
-                  : !option.href && tryActivation(option.connector)
-              }}
-              color={'#E8831D'}
-              header={<Trans>Tally</Trans>}
-              active={option.connector === connector}
-              subheader={null}
-              link={null}
-              icon={TallyIcon}
-            />
-          )
         }
       }
 
@@ -280,19 +256,13 @@ export default function WalletModal({
         !isMobile &&
         !option.mobileOnly && (
           <Option
-            id={`connect-${key}`}
+            {...optionProps}
             onClick={() => {
               option.connector === connector
                 ? setWalletView(WALLET_VIEWS.ACCOUNT)
-                : !option.href && tryActivation(option.connector)
+                : !option.href && option.connector && tryActivation(option.connector)
             }}
-            key={key}
-            active={option.connector === connector}
-            color={option.color}
-            link={option.href}
-            header={option.name}
             subheader={null} //use option.descriptio to bring back multi-line
-            icon={option.iconURL}
           />
         )
       )
@@ -300,93 +270,56 @@ export default function WalletModal({
   }
 
   function getModalContent() {
-    if (error) {
-      return (
-        <UpperSection>
-          <CloseIcon onClick={toggleWalletModal}>
-            <CloseColor />
-          </CloseIcon>
-          <HeaderRow>
-            {error instanceof UnsupportedChainIdError ? <Trans>Wrong Network</Trans> : <Trans>Error connecting</Trans>}
-          </HeaderRow>
-          <ContentWrapper>
-            {error instanceof UnsupportedChainIdError ? (
-              <h5>
-                <Trans>Please connect to a supported network in the dropdown menu or in your wallet.</Trans>
-              </h5>
-            ) : (
-              <Trans>Error connecting. Try refreshing the page.</Trans>
-            )}
-          </ContentWrapper>
-        </UpperSection>
-      )
-    }
-    if (walletView === WALLET_VIEWS.LEGAL) {
-      return (
-        <UpperSection>
-          <HeaderRow>
-            <HoverText
-              onClick={() => {
-                setWalletView(
-                  (previousWalletView === WALLET_VIEWS.LEGAL ? WALLET_VIEWS.ACCOUNT : previousWalletView) ??
-                    WALLET_VIEWS.ACCOUNT
-                )
-              }}
-            >
-              <ArrowLeft />
-            </HoverText>
-            <Row justify="center">
-              <ThemedText.MediumHeader>
-                <Trans>Legal & Privacy</Trans>
-              </ThemedText.MediumHeader>
-            </Row>
-          </HeaderRow>
-          <PrivacyPolicy />
-        </UpperSection>
-      )
-    }
-    if (account && walletView === WALLET_VIEWS.ACCOUNT) {
+    if (walletView === WALLET_VIEWS.ACCOUNT) {
       return (
         <AccountDetails
           toggleWalletModal={toggleWalletModal}
           pendingTransactions={pendingTransactions}
           confirmedTransactions={confirmedTransactions}
           ENSName={ENSName}
-          openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
+          openOptions={openOptions}
         />
       )
     }
+
+    let headerRow
+    if (walletView === WALLET_VIEWS.PENDING) {
+      headerRow = null
+    } else if (walletView === WALLET_VIEWS.ACCOUNT || !!account) {
+      headerRow = (
+        <HeaderRow color="blue">
+          <HoverText onClick={() => setWalletView(account ? WALLET_VIEWS.ACCOUNT : WALLET_VIEWS.OPTIONS)}>
+            <ArrowLeft />
+          </HoverText>
+        </HeaderRow>
+      )
+    } else {
+      headerRow = (
+        <HeaderRow>
+          <HoverText>
+            <Trans>Connect a wallet</Trans>
+          </HoverText>
+        </HeaderRow>
+      )
+    }
+
     return (
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
           <CloseColor />
         </CloseIcon>
-        {walletView !== WALLET_VIEWS.ACCOUNT ? (
-          <HeaderRow color="blue">
-            <HoverText onClick={resetAccountView}>
-              <ArrowLeft />
-            </HoverText>
-          </HeaderRow>
-        ) : (
-          <HeaderRow>
-            <HoverText>
-              <Trans>Connect a wallet</Trans>
-            </HoverText>
-          </HeaderRow>
-        )}
-
+        {headerRow}
         <ContentWrapper>
           <AutoColumn gap="16px">
-            {walletView === WALLET_VIEWS.PENDING && (
+            {walletView === WALLET_VIEWS.PENDING && pendingConnector && (
               <PendingView
-                connector={pendingWallet}
-                error={pendingError}
-                setPendingError={setPendingError}
+                openOptions={openOptions}
+                connector={pendingConnector}
+                error={!!pendingError}
                 tryActivation={tryActivation}
-                resetAccountView={resetAccountView}
               />
             )}
-            {walletView !== WALLET_VIEWS.PENDING && <OptionGrid>{getOptions()}</OptionGrid>}
+            {walletView !== WALLET_VIEWS.PENDING && <OptionGrid data-testid="option-grid">{getOptions()}</OptionGrid>}
             {!pendingError && (
               <LightCard>
                 <AutoRow style={{ flexWrap: 'nowrap' }}>

src/components/Web3Provider/index.tsx

@@ -0,0 +1,11 @@
+import { Web3ReactProvider } from '@web3-react/core'
+import useConnectors from 'hooks/useConnectors'
+import useEagerlyConnect from 'hooks/useEagerlyConnect'
+import { ReactNode } from 'react'
+
+export default function Web3Provider({ children }: { children: ReactNode }) {
+  useEagerlyConnect()
+  const connectors = useConnectors()
+
+  return <Web3ReactProvider connectors={connectors}>{children}</Web3ReactProvider>
+}

src/components/Web3ReactManager/index.tsx

@@ -1,52 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useEffect } from 'react'
-import styled from 'styled-components/macro'
-import { useWeb3React } from 'web3-react-core'
-
-import { network } from '../../connectors'
-import { NetworkContextName } from '../../constants/misc'
-import { useEagerConnect, useInactiveListener } from '../../hooks/web3'
-
-const MessageWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 20rem;
-`
-
-const Message = styled.h2`
-  color: ${({ theme }) => theme.secondary1};
-`
-
-export default function Web3ReactManager({ children }: { children: JSX.Element }) {
-  const { active } = useWeb3React()
-  const { active: networkActive, error: networkError, activate: activateNetwork } = useWeb3React(NetworkContextName)
-
-  // try to eagerly connect to an injected provider, if it exists and has granted access already
-  const triedEager = useEagerConnect()
-
-  // after eagerly trying injected, if the network connect ever isn't active or in an error state, activate itd
-  useEffect(() => {
-    if (triedEager && !networkActive && !networkError && !active) {
-      activateNetwork(network)
-    }
-  }, [triedEager, networkActive, networkError, activateNetwork, active])
-
-  // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
-  useInactiveListener(!triedEager)
-
-  // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error
-  if (triedEager && !active && networkError) {
-    return (
-      <MessageWrapper>
-        <Message>
-          <Trans>
-            Oops! An unknown error occurred. Please refresh the page, or visit from another browser or device.
-          </Trans>
-        </Message>
-      </MessageWrapper>
-    )
-  }
-
-  return children
-}

src/components/Web3Status/index.tsx

@@ -1,17 +1,16 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
-import { Connector } from '@web3-react/types'
+import { useWeb3React } from '@web3-react/core'
+import { getConnection } from 'connection/utils'
 import { darken } from 'polished'
 import { useMemo } from 'react'
 import { Activity } from 'react-feather'
+import { useAppSelector } from 'state/hooks'
 import styled, { css } from 'styled-components/macro'
-import { AbstractConnector } from 'web3-react-abstract-connector'
-import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
+import { isChainAllowed } from 'utils/switchChain'
 
-import { NetworkContextName } from '../../constants/misc'
-import useENSName from '../../hooks/useENSName'
 import { useHasSocks } from '../../hooks/useSocksBalance'
-import { useWalletModalToggle } from '../../state/application/hooks'
+import { useToggleWalletModal } from '../../state/application/hooks'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
 import { TransactionDetails } from '../../state/transactions/types'
 import { shortenAddress } from '../../utils'
@@ -21,16 +20,6 @@ import Loader from '../Loader'
 import { RowBetween } from '../Row'
 import WalletModal from '../WalletModal'
 
-const IconWrapper = styled.div<{ size?: number }>`
-  ${({ theme }) => theme.flexColumnNoWrap};
-  align-items: center;
-  justify-content: center;
-  & > * {
-    height: ${({ size }) => (size ? size + 'px' : '32px')};
-    width: ${({ size }) => (size ? size + 'px' : '32px')};
-  }
-`
-
 const Web3StatusGeneric = styled(ButtonSecondary)`
   ${({ theme }) => theme.flexRowNoWrap}
   width: 100%;
@@ -131,18 +120,13 @@ function Sock() {
   )
 }
 
-function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
-  return (
-    <IconWrapper size={16}>
-      <StatusIcon connector={connector} />
-    </IconWrapper>
-  )
-}
-
 function Web3StatusInner() {
-  const { account, connector, error } = useWeb3React()
+  const { account, connector, chainId, ENSName } = useWeb3React()
+  const connectionType = getConnection(connector).type
 
-  const { ENSName } = useENSName(account ?? undefined)
+  const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
+
+  const chainAllowed = chainId && isChainAllowed(connector, chainId)
 
   const allTransactions = useAllTransactions()
 
@@ -155,11 +139,35 @@ function Web3StatusInner() {
 
   const hasPendingTransactions = !!pending.length
   const hasSocks = useHasSocks()
-  const toggleWalletModal = useWalletModalToggle()
+  const toggleWalletModal = useToggleWalletModal()
 
-  if (account) {
+  if (!chainId) {
+    return null
+  } else if (!chainAllowed) {
     return (
-      <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
+      <Web3StatusError onClick={toggleWalletModal}>
+        <NetworkIcon />
+        <Text>
+          <Trans>Wrong Network</Trans>
+        </Text>
+      </Web3StatusError>
+    )
+  } else if (error) {
+    return (
+      <Web3StatusError onClick={toggleWalletModal}>
+        <NetworkIcon />
+        <Text>
+          <Trans>Error</Trans>
+        </Text>
+      </Web3StatusError>
+    )
+  } else if (account) {
+    return (
+      <Web3StatusConnected
+        data-testid="web3-status-connected"
+        onClick={toggleWalletModal}
+        pending={hasPendingTransactions}
+      >
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
@@ -173,19 +181,12 @@ function Web3StatusInner() {
             <Text>{ENSName || shortenAddress(account)}</Text>
           </>
         )}
-        {!hasPendingTransactions && connector && <WrappedStatusIcon connector={connector} />}
+        {!hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
       </Web3StatusConnected>
     )
-  } else if (error) {
-    return (
-      <Web3StatusError onClick={toggleWalletModal}>
-        <NetworkIcon />
-        <Text>{error instanceof UnsupportedChainIdError ? <Trans>Wrong Network</Trans> : <Trans>Error</Trans>}</Text>
-      </Web3StatusError>
-    )
   } else {
     return (
-      <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
+      <Web3StatusConnect onClick={toggleWalletModal} faded={!account}>
         <Text>
           <Trans>Connect Wallet</Trans>
         </Text>
@@ -195,10 +196,7 @@ function Web3StatusInner() {
 }
 
 export default function Web3Status() {
-  const { active, account } = useWeb3React()
-  const contextNetwork = useWeb3React(NetworkContextName)
-
-  const { ENSName } = useENSName(account ?? undefined)
+  const { ENSName } = useWeb3React()
 
   const allTransactions = useAllTransactions()
 
@@ -213,9 +211,7 @@ export default function Web3Status() {
   return (
     <>
       <Web3StatusInner />
-      {(contextNetwork.active || active) && (
-        <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
-      )}
+      <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
     </>
   )
 }

src/components/analytics/GoogleAnalyticsProvider.tsx

@@ -0,0 +1,51 @@
+import ReactGA from 'react-ga4'
+import { GaOptions, InitOptions, UaEventOptions } from 'react-ga4/types/ga4'
+
+/**
+ * Google Analytics Provider containing all methods used throughout app to log events to Google Analytics.
+ */
+export default class GoogleAnalyticsProvider {
+  public sendEvent(event: string | UaEventOptions, params?: any) {
+    ReactGA.event(event, params)
+  }
+
+  public initialize(
+    GA_MEASUREMENT_ID: InitOptions[] | string,
+    options?: {
+      legacyDimensionMetric?: boolean
+      nonce?: string
+      testMode?: boolean
+      gaOptions?: GaOptions | any
+      gtagOptions?: any
+    }
+  ) {
+    ReactGA.initialize(GA_MEASUREMENT_ID, options)
+  }
+
+  public set(fieldsObject: any) {
+    ReactGA.set(fieldsObject)
+  }
+
+  public outboundLink(
+    {
+      label,
+    }: {
+      label: string
+    },
+    hitCallback: () => unknown
+  ) {
+    ReactGA.outboundLink({ label }, hitCallback)
+  }
+
+  public pageview(path?: string, _?: string[], title?: string) {
+    ReactGA.pageview(path, _, title)
+  }
+
+  public ga(...args: any[]) {
+    ReactGA.ga(...args)
+  }
+
+  public gaCommandSendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
+    ReactGA._gaCommandSendTiming(timingCategory, timingVar, timingValue, timingLabel)
+  }
+}

src/components/analytics/GoogleAnalyticsReporter.tsx

@@ -1,42 +0,0 @@
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useEffect } from 'react'
-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._gaCommandSendTiming('Web Vitals', name, Math.round(name === 'CLS' ? delta * 1000 : delta), id)
-}
-
-// tracks web vitals and pageviews
-export default function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps): null {
-  useEffect(() => {
-    getFCP(reportWebVitals)
-    getFID(reportWebVitals)
-    getLCP(reportWebVitals)
-    getCLS(reportWebVitals)
-  }, [])
-
-  const { chainId } = useActiveWeb3React()
-  useEffect(() => {
-    // cd1 - custom dimension 1 - chainId
-    ReactGA.set({ cd1: chainId ?? 0 })
-  }, [chainId])
-
-  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,20 +1,47 @@
-import ReactGA from 'react-ga4'
+import { useWeb3React } from '@web3-react/core'
+import { useEffect } from 'react'
+import { UaEventOptions } from 'react-ga4/types/ga4'
+import { RouteComponentProps } from 'react-router-dom'
 import { isMobile } from 'utils/userAgent'
+import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
+
+import GoogleAnalyticsProvider from './GoogleAnalyticsProvider'
 
 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)
 
+const googleAnalytics = new GoogleAnalyticsProvider()
+
+export function sendEvent(event: string | UaEventOptions, params?: any) {
+  return googleAnalytics.sendEvent(event, params)
+}
+
+export function outboundLink(
+  {
+    label,
+  }: {
+    label: string
+  },
+  hitCallback: () => unknown
+) {
+  return googleAnalytics.outboundLink({ label }, hitCallback)
+}
+
+export function sendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
+  return googleAnalytics.gaCommandSendTiming(timingCategory, timingVar, timingValue, timingLabel)
+}
+
 if (typeof GOOGLE_ANALYTICS_ID === 'string') {
-  ReactGA.initialize(GOOGLE_ANALYTICS_ID, {
+  googleAnalytics.initialize(GOOGLE_ANALYTICS_ID, {
     gaOptions: {
       storage: 'none',
       storeGac: false,
       clientId: storedClientId ?? undefined,
     },
   })
-  ReactGA.set({
+  googleAnalytics.set({
     anonymizeIp: true,
     customBrowserType: !isMobile
       ? 'desktop'
@@ -23,5 +50,44 @@ if (typeof GOOGLE_ANALYTICS_ID === 'string') {
       : 'mobileRegular',
   })
 } else {
-  ReactGA.initialize('test', { gtagOptions: { debug_mode: true } })
+  googleAnalytics.initialize('test', { gtagOptions: { debug_mode: true } })
+}
+
+const installed = Boolean(window.navigator.serviceWorker?.controller)
+const hit = Boolean((window as any).__isDocumentCached)
+const action = installed ? (hit ? 'Cache hit' : 'Cache miss') : 'Not installed'
+sendEvent({ category: 'Service Worker', action, nonInteraction: true })
+
+function reportWebVitals({ name, delta, id }: Metric) {
+  sendTiming('Web Vitals', name, Math.round(name === 'CLS' ? delta * 1000 : delta), id)
+}
+
+// tracks web vitals and pageviews
+export function useAnalyticsReporter({ pathname, search }: RouteComponentProps['location']) {
+  useEffect(() => {
+    getFCP(reportWebVitals)
+    getFID(reportWebVitals)
+    getLCP(reportWebVitals)
+    getCLS(reportWebVitals)
+  }, [])
+
+  const { chainId } = useWeb3React()
+  useEffect(() => {
+    // cd1 - custom dimension 1 - chainId
+    googleAnalytics.set({ cd1: chainId ?? 0 })
+  }, [chainId])
+
+  useEffect(() => {
+    googleAnalytics.pageview(`${pathname}${search}`)
+  }, [pathname, search])
+
+  useEffect(() => {
+    // typed as 'any' in react-ga4 -.-
+    googleAnalytics.ga((tracker: any) => {
+      if (!tracker) return
+
+      const clientId = tracker.get('clientId')
+      window.localStorage.setItem(GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY, clientId)
+    })
+  }, [])
 }

src/components/claim/AddressClaimModal.tsx

@@ -1,7 +1,7 @@
 import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
@@ -46,7 +46,7 @@ const ConfirmedIcon = styled(ColumnCenter)`
 `
 
 export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boolean; onDismiss: () => void }) {
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   // state for smart contract input
   const [typed, setTyped] = useState('')

src/components/claim/ClaimModal.tsx

@@ -1,7 +1,7 @@
 import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import JSBI from 'jsbi'
 import { useEffect, useState } from 'react'
 import { Text } from 'rebass'
@@ -9,7 +9,7 @@ import styled from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import tokenLogo from '../../assets/images/token-logo.png'
-import { useModalOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
+import { useModalIsOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
@@ -48,10 +48,10 @@ const SOCKS_AMOUNT = 1000
 const USER_AMOUNT = 400
 
 export default function ClaimModal() {
-  const isOpen = useModalOpen(ApplicationModal.SELF_CLAIM)
+  const isOpen = useModalIsOpen(ApplicationModal.SELF_CLAIM)
   const toggleClaimModal = useToggleSelfClaimModal()
 
-  const { account, chainId } = useActiveWeb3React()
+  const { account, chainId } = useWeb3React()
 
   // used for UI loading states
   const [attempting, setAttempting] = useState<boolean>(false)

src/components/earn/ClaimRewardModal.tsx

@@ -1,7 +1,7 @@
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -34,7 +34,7 @@ interface StakingModalProps {
 }
 
 export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: StakingModalProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   // monitor call to help UI loading state
   const addTransaction = useTransactionAdder()

src/components/earn/StakingModal.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/macro'
 import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
@@ -53,7 +53,7 @@ interface StakingModalProps {
 }
 
 export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiquidityUnstaked }: StakingModalProps) {
-  const { library } = useActiveWeb3React()
+  const { provider } = useWeb3React()
 
   // track and parse user input
   const [typedValue, setTypedValue] = useState('')
@@ -144,7 +144,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
   }, [maxAmountInput, onUserInput])
 
   async function onAttemptToApprove() {
-    if (!pairContract || !library || !deadline) throw new Error('missing dependencies')
+    if (!pairContract || !provider || !deadline) throw new Error('missing dependencies')
     if (!parsedAmount) throw new Error('missing liquidity amount')
 
     if (gatherPermitSignature) {

src/components/earn/UnstakingModal.tsx

@@ -1,7 +1,7 @@
 import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import StakingRewardsJson from '@uniswap/liquidity-staker/build/StakingRewards.json'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useWeb3React } from '@web3-react/core'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -35,14 +35,14 @@ interface StakingModalProps {
 }
 
 export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: StakingModalProps) {
-  const { account } = useActiveWeb3React()
+  const { account } = useWeb3React()
 
   // monitor call to help UI loading state
   const addTransaction = useTransactionAdder()
   const [hash, setHash] = useState<string | undefined>()
   const [attempting, setAttempting] = useState(false)
 
-  function wrappedOndismiss() {
+  function wrappedOnDismiss() {
     setHash(undefined)
     setAttempting(false)
     onDismiss()
@@ -79,14 +79,14 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
   }
 
   return (
-    <Modal isOpen={isOpen} onDismiss={wrappedOndismiss} maxHeight={90}>
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight={90}>
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
             <ThemedText.MediumHeader>
               <Trans>Withdraw</Trans>
             </ThemedText.MediumHeader>
-            <CloseIcon onClick={wrappedOndismiss} />
+            <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           {stakingInfo?.stakedAmount && (
             <AutoColumn justify="center" gap="md">
@@ -117,7 +117,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
         </ContentWrapper>
       )}
       {attempting && !hash && (
-        <LoadingView onDismiss={wrappedOndismiss}>
+        <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
             <ThemedText.Body fontSize={20}>
               <Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans>
@@ -129,7 +129,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
         </LoadingView>
       )}
       {hash && (
-        <SubmittedView onDismiss={wrappedOndismiss} hash={hash}>
+        <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
             <ThemedText.LargeHeader>
               <Trans>Transaction Submitted</Trans>

src/components/swap/AdvancedSwapDetails.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useContext, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
@@ -24,7 +24,6 @@ interface AdvancedSwapDetailsProps {
   trade?: InterfaceTrade<Currency, Currency, TradeType>
   allowedSlippage: Percent
   syncing?: boolean
-  hideRouteDiagram?: boolean
   hideInfoTooltips?: boolean
 }
 
@@ -53,7 +52,7 @@ export function AdvancedSwapDetails({
   hideInfoTooltips = false,
 }: AdvancedSwapDetailsProps) {
   const theme = useContext(ThemeContext)
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const nativeCurrency = useNativeCurrency()
 
   const { expectedOutputAmount, priceImpact } = useMemo(() => {

src/components/swap/GasEstimateBadge.tsx

@@ -1,10 +1,10 @@
 import { Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
+import { sendEvent } from 'components/analytics'
 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-ga4'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
@@ -85,7 +85,7 @@ export default function GasEstimateBadge({
       }
       placement="bottom"
       onOpen={() =>
-        ReactGA.event({
+        sendEvent({
           category: 'Gas',
           action: 'Gas Details Tooltip Open',
         })

src/components/swap/SwapDetailsDropdown.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import Card, { OutlineCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -7,7 +8,6 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { MouseoverTooltipContent } from 'components/Tooltip'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { darken } from 'polished'
 import { useState } from 'react'
 import { ChevronDown, Info } from 'react-feather'
@@ -126,7 +126,7 @@ export default function SwapDetailsDropdown({
   allowedSlippage,
 }: SwapDetailsInlineProps) {
   const theme = useTheme()
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
   const [showDetails, setShowDetails] = useState(false)
 
   return (

src/components/swap/SwapRoute.tsx

@@ -3,13 +3,13 @@ import { Protocol } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { FeeAmount } from '@uniswap/v3-sdk'
+import { useWeb3React } from '@web3-react/core'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import { AutoColumn } from 'components/Column'
 import { LoadingRows } from 'components/Loader/styled'
 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 { memo, useState } from 'react'
 import { Plus } from 'react-feather'
@@ -50,7 +50,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
   const autoRouterSupported = useAutoRouterSupported()
   const routes = getTokenPath(trade)
   const [open, setOpen] = useState(false)
-  const { chainId } = useActiveWeb3React()
+  const { chainId } = useWeb3React()
 
   const [darkMode] = useDarkModeManager()