fix: token lists validation (#6932)

* fix: update token-lists schema

* deduplicate

.env

@@ -11,3 +11,4 @@ REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_DycfESRid31UaSxhI5yWKe1r5E5kKSz"
 REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
 REACT_APP_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
 REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
+REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
       files: ['**/*'],
       rules: {
         'multiline-comment-style': ['error', 'separate-lines'],
-        'rulesdir/enforce-retry-on-import': 'error',
+        'rulesdir/no-undefined-or': 'error',
       },
     },
     {

.github/actions/cache-on-main/action.yml

@@ -0,0 +1,32 @@
+name: Cache on main
+description: caches node_modules/.cache, but only saves from main
+inputs:
+  path:
+    description: 'A list of files, directories, and wildcard patterns to cache and store'
+    required: true
+  key:
+    description: 'An explicit key for restoring and saving the cache'
+    required: true
+  restore-keys:
+    description: 'An ordered list of keys to use for restoring stale cache if no cache hit occured for key. Note `cache-hit` returns false in this case.'
+    required: false
+
+# Many build steps have their own caches to improve subsequent build times.
+# Build tools are configured to cache to node_modules/.cache, so they are cached independently of node_modules.
+# Caches are saved every run *on main* (by keying on github.run_id), and the most recent available cache is loaded.
+# Caches are not saved on feature branches because they have limited utility, and extend the runtime of the workflow.
+# See https://jongleberry.medium.com/speed-up-your-ci-and-dx-with-node-modules-cache-ac8df82b7bb0.
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/cache/restore@v3
+      with:
+        path: ${{ inputs.path }}
+        key: ${{ inputs.key }}
+        restore-keys: ${{ inputs.restore-keys }}
+    - if: github.ref_name == 'main'
+      uses: actions/cache/save@v3
+      with:
+        path: ${{ inputs.path }}
+        key: ${{ inputs.key }}

.github/actions/setup/action.yml

@@ -8,9 +8,9 @@ runs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 18
         registry-url: https://registry.npmjs.org
-        cache: 'yarn'
+        # cache is intentionally omitted, as it is faster with yarn v1 to cache node_modules.
 
     - uses: actions/cache@v3
       id: install-cache
@@ -19,7 +19,7 @@ runs:
         path: |
           node_modules
           !node_modules/.cache
-        key: ${{ runner.os }}-install-${{ hashFiles('**/yarn.lock') }}
+        key: ${{ runner.os }}-install-${{ hashFiles('yarn.lock') }}
     - if: steps.install-cache.outputs.cache-hit != 'true'
       run: yarn install --frozen-lockfile --ignore-scripts
       shell: bash
@@ -53,14 +53,11 @@ runs:
       shell: bash
 
     # Messages are extracted from source.
-    # A record of source file content hashes is maintained in node_modules/.cache/lingui by a custom extractor.
-    # Messages are always extracted, but extraction may rely on the custom extractor's loaded cache.
-    - uses: actions/cache@v3
-      id: i18n-extract-cache
+    # A record of source file content hashes and catalogs is maintained in node_modules/.cache/lingui.
+    # Messages are always extracted, but extraction may short-circuit from the custom extractor's cache.
+    - uses: ./.github/actions/cache-on-main
       with:
-        path: |
-          src/locales/en-US.po
-          node_modules/.cache
+        path: node_modules/.cache
         key: ${{ runner.os }}-i18n-extract-${{ github.run_id }}
         restore-keys: ${{ runner.os }}-i18n-extract-
     - run: yarn i18n:extract

.github/pull_request_template.md

@@ -6,7 +6,7 @@
 
 
 <!-- Delete inapplicable lines: -->
-_JIRA ticket:_
+_Linear ticket:_
 _Slack thread:_
 _Relevant docs:_
 
@@ -14,9 +14,16 @@ _Relevant docs:_
 <!-- Delete this section if your change does not affect UI. -->
 ## Screen capture
 
-| Before       | After (Desktop) | After (Mobile) |
-| ------------ |---------------- | -------------- |
-| paste_before | past_after      | paste_after    |
+### Before
+|    Mobile    |   Desktop    |
+| ------------ | ------------ |
+| paste_before | paste_before |
+
+
+### After
+|    Mobile    |   Desktop   |
+| ------------ | ----------- |
+| paste_after  | paste_after |
 
 
 ## Test plan

.github/workflows/1-main-to-staging.yml

@@ -14,19 +14,60 @@ jobs:
     environment:
       name: push/staging
     steps:
+      - name: Check test status
+        uses: actions/github-script@v6.4.1
+        with:
+          script: |
+            const statuses = await github.rest.repos.listCommitStatusesForRef({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: context.sha
+            })
+            const status = statuses.data.find(status => status.context === 'Test / promotion')?.state || 'missing'
+            core.info('Status: ' + status)
+            if (status !== 'success') {
+              core.setFailed('"Test / promotion" must be successful before pushing')
+            }
+
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
         with:
           token: ${{ secrets.RELEASE_SERVICE_ACCESS_TOKEN }}
           ref: main
+
+      # The source file must exist for the corresponding translation messages to be downloaded.
+      - run: touch src/locales/en-US.po
+      - name: Download translations
+        uses: crowdin/github-action@3133cc916c35590475cf6705f482fb653d8e36e9
+        with:
+          upload_sources: false
+          download_translations: true
+          project_id: 458284
+          token: ${{ secrets.CROWDIN_PERSONAL_TOKEN_SECRET }}
+          source: 'src/locales/en-US.po'
+          translation: 'src/locales/%locale%.po'
+          localization_branch_name: main
+          create_pull_request: false
+          push_translations: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Git config
         run: |
-          git config user.name "UL Service Account"
-          git config user.email "hello-happy-puppy@users.noreply.github.com"
-      - name: Add CODEOWNERS file
+          git config user.name 'UL Service Account'
+          git config user.email 'hello-happy-puppy@users.noreply.github.com'
+
+      - name: Add translations
         run: |
-          echo "@uniswap/web-admins" > CODEOWNERS
+          rm src/locales/en-US.po
+          git add -f src/locales/*.po
+          git commit -m 'ci(t9n): download translations from crowdin'
+
+      - name: Add CODEOWNERS
+        run: |
+          echo '@uniswap/web-admins' > CODEOWNERS
           git add CODEOWNERS
-          git commit -m "ci: add global CODEOWNERS"
+          git commit -m 'ci: add global CODEOWNERS'
+
       - name: Git push
         run: |
           git push origin main:releases/staging --force

.github/workflows/2-deploy-to-staging.yml

@@ -10,27 +10,23 @@ jobs:
     environment:
       name: deploy/staging
     steps:
-      - name: Send Slack message that deploy is starting
-        uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
         continue-on-error: true
         with:
           payload: |
             {
-              "text": "Staging deploy started for branch: ${{ github.ref_name }}"
+              "text": "Deploy _started_ for ${{ github.ref_name }}"
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: yarn prepare
       - run: yarn build
         env:
           REACT_APP_STAGING: 1
-      - name: Setup node@16 (required by Cloudflare Pages)
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
+
       - name: Update Cloudflare Pages deployment
         id: pages-deployment
         uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
@@ -42,18 +38,19 @@ jobs:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           # Cloudflare uses `main` as the default production branch, so we push using the `main` branch so that it can be aliased by a custom domain.
           branch: main
-      - name: Send Slack message about deployment outcome
-        uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
         continue-on-error: true
         if: always()
         with:
           payload: |
             {
-              "text": "Staging deploy **${{ steps.pages-deployment.outcome }}** for: ${{ github.ref_name }}"
+              "text": "Deploy *${{ steps.pages-deployment.outcome }}* for ${{ github.ref_name }}"
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - name: Upload source maps to Sentry
         uses: getsentry/action-release@bd5f874fcda966ba48139b0140fb3ec0cb3aabdd
         continue-on-error: true

.github/workflows/4-deploy-to-prod.yml

@@ -10,21 +10,21 @@ jobs:
     environment:
       name: deploy/prod
     steps:
-      - name: Send Slack message that build is starting
-        uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
         continue-on-error: true
         with:
           payload: |
             {
-              "text": "Production deploy started for branch: ${{ github.ref_name }}"
+              "text": "Deploy _started_ for ${{ github.ref_name }}"
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: yarn prepare
       - run: yarn build
+
       - name: Bump and tag
         id: github-tag-action
         uses: mathieudutour/github-tag-action@d745f2e74aaf1ee82e747b181f7a0967978abee0
@@ -48,7 +48,7 @@ jobs:
         with:
           cidv0: ${{ steps.pinata.outputs.hash }}
 
-      - name: Release
+      - name: Publish release
         uses: actions/create-release@v1.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -74,11 +74,6 @@ jobs:
 
             ${{ steps.github-tag-action.outputs.changelog }}
 
-      - name: Setup node@16 (required by Cloudflare Pages)
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
       - name: Update Cloudflare Pages deployment
         uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
         id: pages-deployment
@@ -91,18 +86,18 @@ jobs:
           # Cloudflare uses `main` as the default production branch, so we push using the `main` branch so that it can be aliased by a custom domain.
           branch: main
 
-      - name: Send Slack message about deployment outcome
-        uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
         continue-on-error: true
         if: always()
         with:
           payload: |
             {
-              "text": "Production deploy **${{ steps.pages-deployment.outcome }}** for: ${{ github.ref_name }}"
+              "text": "Deploy *${{ steps.pages-deployment.outcome }}* for ${{ github.ref_name }}"
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - name: Upload source maps to Sentry
         uses: getsentry/action-release@4744f6a65149f441c5f396d5b0877307c0db52c7
         continue-on-error: true

.github/workflows/crowdin-sync.yaml

@@ -1,33 +0,0 @@
-name: Crowdin Download
-
-on:
-  schedule:
-    # 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:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - run: yarn i18n:extract
-
-      - name: Download Crowdin translations
-        uses: crowdin/github-action@1.4.9
-        with:
-          upload_sources: false
-          download_translations: true
-          project_id: 458284
-          token: ${{ secrets.CROWDIN_PERSONAL_TOKEN_SECRET }}
-          source: 'src/locales/en-US.po'
-          translation: 'src/locales/%locale%.po'
-          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

@@ -14,7 +14,7 @@ jobs:
       - run: yarn i18n:extract
 
       - name: Upload Crowdin sources
-        uses: crowdin/github-action@1.1.0
+        uses: crowdin/github-action@3133cc916c35590475cf6705f482fb653d8e36e9
         with:
           upload_sources: true
           download_translations: false

.github/workflows/notify-slack-on-release-merge.yml

@@ -1,4 +1,4 @@
-name: Slack notifications for releases/* merges
+name: Slack notification on pushes to releases/*
 
 # This CI job will push notifications to Slack whenever code is merged into any releases/* branch
 #
@@ -25,7 +25,6 @@ on:
 
 jobs:
   notify-slack:
-    name: 'Emit Slack notification(s)'
     runs-on: ubuntu-latest
     environment:
       name: notify/releases
@@ -45,9 +44,7 @@ jobs:
           | awk '{print substr($0,0,3000);}' \
           > /tmp/parsed_github_context
           echo "SLACK_COMMITS=$(cat /tmp/parsed_github_context)" >> "$GITHUB_OUTPUT"
-      - name: Send custom JSON data to Slack workflow
-        id: slack
-        uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
         with:
           payload: |
             {

.github/workflows/release.yaml

@@ -1,125 +0,0 @@
-name: Release
-on:
-  schedule:
-    - cron: '0 16 * * 1-4' # every day 16:00 UTC Monday-Thursday
-  # manual trigger
-  workflow_dispatch:
-
-jobs:
-  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 }}
-    steps:
-      - 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: patch
-
-  release:
-    needs: tag
-    if: ${{ needs.tag.outputs.new_tag != null }}
-    runs-on: ubuntu-latest
-    environment:
-        name: release
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - run: yarn build
-
-      - name: Pin to IPFS
-        id: pinata
-        uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
-        with:
-          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 }}
-
-      - name: Pin to Crust
-        uses: crustio/ipfs-crust-action@v2.0.3
-        continue-on-error: true
-        timeout-minutes: 2
-        with:
-          cid: ${{ steps.pinata.outputs.hash }}
-          seeds: ${{ secrets.CRUST_SEEDS }}
-
-      - name: Convert CIDv0 to CIDv1
-        id: convert-cidv0
-        uses: uniswap/convert-cidv0-cidv1@v1.0.0
-        with:
-          cidv0: ${{ steps.pinata.outputs.hash }}
-
-      - name: Release
-        uses: actions/create-release@v1.1.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          tag_name: ${{ needs.tag.outputs.new_tag }}
-          release_name: Release ${{ needs.tag.outputs.new_tag }}
-          body: |
-            IPFS hash of the deployment:
-            - 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).
-
-            You can also access the Uniswap Interface directly from an IPFS gateway.
-            **BEWARE**: The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported.
-            **You should always use an IPFS gateway that enforces origin separation**, or our alias to the latest release at [app.uniswap.org](https://app.uniswap.org).
-            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.pinata.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
-
-            ${{ needs.tag.outputs.changelog }}
-
-      - name: Setup node@16 (required by Cloudflare Pages)
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: Update Cloudflare Pages deployment
-        uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
-          directory: build
-          githubToken: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Upload source maps to Sentry
-        uses: getsentry/action-release@4744f6a65149f441c5f396d5b0877307c0db52c7
-        continue-on-error: true
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-        with:
-          environment: production
-          sourcemaps: './build/static/js'
-          url_prefix: '~/static/js'

.github/workflows/test.yml

@@ -1,7 +1,7 @@
 name: Test
 
 # Many build steps have their own caches, so each job has its own cache to improve subsequent build times.
-# Build tools are configured to cache cache to node_modules/.cache, so this is cached independently of node_modules.
+# Build tools are configured to cache to node_modules/.cache, so they are cached independently of node_modules.
 # Caches are saved every run (by keying on github.run_id), and the most recent available cache is loaded.
 # See https://jongleberry.medium.com/speed-up-your-ci-and-dx-with-node-modules-cache-ac8df82b7bb0.
 
@@ -9,9 +9,8 @@ on:
   push:
     branches:
       - main
+      - releases/staging
   pull_request:
-  # manual trigger
-  workflow_dispatch:
 
 jobs:
   lint:
@@ -19,12 +18,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: eslint-cache
+      - uses: ./.github/actions/cache-on-main
         with:
           path: node_modules/.cache
-          key: ${{ runner.os }}-eslint-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
-          restore-keys: ${{ runner.os }}-eslint-${{ hashFiles('**/yarn.lock') }}-
+          key: ${{ runner.os }}-eslint-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-eslint-
       - run: yarn lint
       - if: failure() && github.ref_name == 'main'
         uses: ./.github/actions/report
@@ -37,12 +35,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: tsc-cache
+      - uses: ./.github/actions/cache-on-main
         with:
           path: node_modules/.cache
-          key: ${{ runner.os }}-tsc-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
-          restore-keys: ${{ runner.os }}-tsc-${{ hashFiles('**/yarn.lock') }}-
+          key: ${{ runner.os }}-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-tsc-
       - run: yarn typecheck
       - if: failure() && github.ref_name == 'main'
         uses: ./.github/actions/report
@@ -67,18 +64,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: jest-cache
+      - uses: ./.github/actions/cache-on-main
         with:
           path: node_modules/.cache
-          key: ${{ runner.os }}-jest-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
-          restore-keys: ${{ runner.os }}-jest-${{ hashFiles('**/yarn.lock') }}-
+          key: ${{ runner.os }}-jest-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-jest-
       - run: yarn test --coverage --maxWorkers=100%
       - uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false
-          verbose: true
           flags: unit-tests
       - if: failure() && github.ref_name == 'main'
         uses: ./.github/actions/report
@@ -91,16 +86,15 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: build-e2e-cache
+      - uses: ./.github/actions/cache-on-main
         with:
           path: node_modules/.cache
-          key: ${{ runner.os }}-build-e2e-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
-          restore-keys: ${{ runner.os }}-build-e2e-${{ hashFiles('**/yarn.lock') }}-
+          key: ${{ runner.os }}-build-e2e-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-build-e2e-
       - run: yarn build:e2e
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: build-e2e
           path: build
@@ -115,7 +109,6 @@ jobs:
   cypress-test-matrix:
     needs: [build-e2e, cypress-rerun]
     runs-on: ubuntu-latest
-    container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
     strategy:
       fail-fast: false
       matrix:
@@ -123,8 +116,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: cypress-cache
+      - uses: ./.github/actions/cache-on-main
         with:
           path: /root/.cache/Cypress
           key: ${{ runner.os }}-cypress-${{ hashFiles('**/node_modules/cypress/package.json') }}
@@ -137,6 +129,12 @@ jobs:
           name: build-e2e
           path: build
 
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: cache
+          key: ${{ runner.os }}-hardhat-${{ hashFiles('hardhat.config.js') }}-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-hardhat-${{ hashFiles('hardhat.config.js') }}-
+
       - uses: cypress-io/github-action@v4
         with:
           install: false
@@ -144,8 +142,9 @@ jobs:
           parallel: true
           start: yarn serve
           wait-on: 'http://localhost:3000'
-          browser: chrome
+          browser: electron
           group: e2e
+          spec: ${{ github.ref_name == 'releases/staging' && 'cypress/{e2e,staging}/**/*.test.ts' || 'cypress/e2e/**/*.test.ts' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -159,25 +158,55 @@ jobs:
           COMMIT_INFO_TIMESTAMP: ${{ github.event.pull_request.updated_at || github.event.head_commit.timestamp }}
           CYPRESS_PULL_REQUEST_ID: ${{ github.event.pull_request.number }}
           CYPRESS_PULL_REQUEST_URL: ${{ github.event.pull_request.html_url }}
-
       - uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false
-          verbose: true
           flags: e2e-tests
-
-  # Included as a single job to check for cypress-test-matrix success, as a matrix cannot be checked.
-  cypress-tests:
-    if: always()
-    needs: [cypress-test-matrix]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - if: needs.cypress-test-matrix.result != 'success'
-        run: exit 1
       - if: failure() && github.ref_name == 'main'
         uses: ./.github/actions/report
         with:
           name: Cypress tests
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+
+  pre:
+    if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v6.4.1
+        with:
+          script: |
+            github.rest.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'pending',
+              context: 'Test / promotion',
+              description: 'Running tests...',
+              target_url: 'https://github.com/Uniswap/interface/actions/runs/' + context.runId
+            })
+
+  post:
+    if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }}
+    needs: [pre, lint, typecheck, deps-tests, unit-tests, cypress-test-matrix]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v6.4.1
+        with:
+          script: |
+            github.rest.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: ${{ env.STATUS }} ? 'success' : 'failure',
+              context: 'Test / promotion',
+              description: ${{ env.STATUS }} ? 'All tests passed' : 'One or more tests failed and are blocking promotion',
+              target_url: 'https://github.com/Uniswap/interface/actions/runs/' + context.runId
+            })
+        env:
+          STATUS: |
+            ${{ needs.lint.result == 'success' }} &&
+            ${{ needs.typecheck.result == 'success' }} &&
+            ${{ needs.deps-tests.result == 'success' }} &&
+            ${{ needs.unit-tests.result == 'success' }} &&
+            ${{ needs.cypress-test-matrix.result == 'success' }}

.gitignore

@@ -5,8 +5,7 @@
 /src/types/v3
 /src/abis/types
 /src/locales/**/*.js
-/src/locales/**/en-US.po
-/src/locales/**/pseudo.po
+/src/locales/**/*.po
 
 # generated files
 /src/**/__generated__

.nvmrc

@@ -1 +1 @@
-14.20.0
+v18.16.0

.vscode/settings.json

@@ -12,5 +12,14 @@
   },
   "files.eol": "\n",
   "eslint.enable": true,
-  "eslint.debug": true
+  "eslint.debug": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
 }

CODEOWNERS

@@ -0,0 +1 @@
+@uniswap/web-admins

codecov.yml

@@ -9,17 +9,38 @@ ignore:
   - "**/constants/**/*"
   - "constants/**/*"
 
+coverage:
+  status:
+    # Omit merging unit/e2e reports into the defaults, as it is nonsensical.
+    project: off
+    patch: off
+
 flag_management:
   default_rules:
     statuses:
       - type: project
         target: auto
         threshold: 1%
+        # Adjust the base when removing code to avoid penalizing tech debt payback / dead code removal.
+        removed_code_behavior: adjust_base
         if_ci_failed: error
       - type: patch
         target: 80%
   individual_flags:
+    - name: unit-tests
     - name: e2e-tests
+      # Wait until all machines have reported coverage - e2e tests run across 4 machines.
+      after_n_builds: 4
       statuses:
         - type: patch
           target: 0%
+
+comment:
+  layout: flags
+  # Wait until all machines have reported coverage - e2e tests run across 4 machines + unit tests across 1.
+  after_n_builds: 5
+  hide_comment_details: false
+
+github_checks:
+  # Turn off GitHub Check annotations, as they make it more difficult to review code.
+  annotations: false

craco.config.cjs

@@ -6,6 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 const { DefinePlugin, IgnorePlugin, ProvidePlugin } = require('webpack')
+const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
 
 const commitHash = execSync('git rev-parse HEAD').toString().trim()
 const isProduction = process.env.NODE_ENV === 'production'
@@ -93,6 +94,16 @@ module.exports = {
       // See https://vanilla-extract.style/documentation/integrations/webpack/#identifiers for docs.
       // See https://github.com/vanilla-extract-css/vanilla-extract/issues/771#issuecomment-1249524366.
       new VanillaExtractPlugin({ identifiers: 'short' }),
+      new RetryChunkLoadPlugin({
+        cacheBust: `function() {
+          return 'cache-bust=' + Date.now();
+        }`,
+        // Retries with exponential backoff (500ms, 1000ms, 2000ms).
+        retryDelay: `function(retryAttempt) {
+          return 2 ** (retryAttempt - 1) * 500;
+        }`,
+        maxRetries: 3,
+      }),
     ],
     configure: (webpackConfig) => {
       // Configure webpack plugins:

cypress.config.ts

@@ -1,25 +1,33 @@
 import codeCoverageTask from '@cypress/code-coverage/task'
 import { defineConfig } from 'cypress'
 import { setupHardhatEvents } from 'cypress-hardhat'
+import { unlinkSync } from 'fs'
 
 export default defineConfig({
   projectId: 'yp82ef',
-  videoUploadOnPasses: false,
   defaultCommandTimeout: 24000, // 2x average block time
   chromeWebSecurity: false,
+  experimentalMemoryManagement: true, // better memory management, see https://github.com/cypress-io/cypress/pull/25462
   retries: { runMode: 2 },
+  videoCompression: false,
   e2e: {
     async setupNodeEvents(on, config) {
       await setupHardhatEvents(on, config)
       codeCoverageTask(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'),
-      }
+
+      // Delete recorded videos for specs that passed without flakes.
+      on('after:spec', async (spec, results) => {
+        if (results && results.video) {
+          // If there were no failures (including flakes), delete the recorded video.
+          if (!results.tests?.some((test) => test.attempts.some((attempt) => attempt?.state === 'failed'))) {
+            unlinkSync(results.video)
+          }
+        }
+      })
+
+      return config
     },
     baseUrl: 'http://localhost:3000',
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/{e2e,staging}/**/*.test.ts',
   },
 })

cypress/README.md

@@ -0,0 +1,202 @@
+# e2e testing with Cypress
+
+End-to-end tests are run through [Cypress](https://docs.cypress.io/api/table-of-contents/), which runs tests in a real browser. Cypress is a little different than other testing frameworks, and e2e tests are a little different than unit tests, so this directory has its own set of patterns, idioms, and best practices. Not only that, but we're testing against a forked blockchain, not just against typical Web APIs, so we have unique flows that you may not have seen elsewhere.
+
+## Running your first e2e tests
+
+Cypress tests run against a local server, so you'll need to run the application locally at the same time. The fastest way to run e2e tests is to use your dev server: `yarn start`.
+
+Open cypress at the same time with `yarn cypress:open`. You should do this from another window or tab, so that you can continue to see any typechecking/linting warnings from `yarn start`.
+
+Cypress opens its own instance of Chrome, with a list of "E2E specs" for you to select. When you're developing locally, you usually only want to run one spec file at a time. Select your spec by clicking on the filename and it will run.
+
+## Glossary
+
+#### spec
+Cypress considers each file a separate spec, or collection of tests.
+Specs are always run as a whole through `yarn cypress:open` or on the same machine through CI.
+
+#### Thenable
+Cypress queues commands to run in the browser using [Thenables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables), not Promises.
+For this reason, you should not use `async/await` syntax in Cypress unless it is wholly-contained in a `cy.then` function argument.
+
+## Writing your first e2e test
+
+_For an excellent treatment on tests, check out the [Cypress Fundamentals](https://learn.cypress.io/cypress-fundamentals/how-to-write-a-test) course._
+_While some of that will be paraphrased here, this should be sufficient to get you started:_
+
+### What is a test?
+
+Cypress tests are just like any other test: you should set up an initial state, execute an action, and verify the action's consequence. This is codified in the AAA (Arrange-Act-Assert) pattern, and you'll see this in most of our tests. In _our_ case, it plays out as:
+
+1. Arrange: Visit a page, eg `cy.visit('/swap')`, and set up the state, on the blockchain and the page.
+2. Act: Initiate your action under test, eg `initiateSwap()`
+3. Assert: Verify that the action has occured, eg `// Verify swap has occured`
+
+You'll usually see the setup, followed by a newline, followed by assertions with comments stating what they are asserting.
+Because Cypress tests are translated into user actions, it may be hard to follow the action being described. You should use comments liberally to describe what you are doing and what you intend to test, to make tests easier to read and maintain in the future.
+
+### Thinking about tests: queuing up a sequence of commands
+
+Cypress uses `Thenable`s to achieve "command chaining". A test is described as a series of commands, which are only executed once the previous command in the chain has executed.
+
+```
+cy.visit('/swap')
+cy.contains('Select token').click()
+cy.contains('DAI').click()
+```
+
+In this example, `cy.contains('Select token').click()` is queued up right away (all the code is synchronous), but it will not execute until `/swap` has loaded (all the commands are chained); and `click()` will not execute until `Select token` has been found.
+
+This becomes more relevant as you work with data on the blockchain, as you'll need to load it at the correct time, _after_ it's been modified by the application:
+
+```
+cy.hardhat().then(async (hardhat) => {
+  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+  cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+  cy.get('#swap-button').click()
+  cy.contains('Confirm swap').click()
+
+  // wait for the transaction to be executed
+  cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+  cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+
+  // BAD: This will get the balance _before_ the other queued actions have executed.
+  const balance = await hardhat.getBalance(hardhat.wallet, USDC_MAINNET)
+  cy.wrap(balance).should('deep.equal', expectedBalance)
+})
+```
+
+```
+  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+  cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+  cy.get('#swap-button').click()
+  cy.contains('Confirm swap').click()
+
+  // wait for the transaction to be executed
+  cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+  cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+
+  // GOOD: cy.then chains the command so that it runs _after_ executing the swap
+  cy.hardhat()
+    .then((hardhat) => hardhat.getBalance(hardhat.wallet, USDC_MAINNET))
+    .should('deep.equal', expectedBalance)
+})
+```
+
+### Working with the blockchain (ie hardhat)
+
+Our tests use a local hardhat node to simulate blockchain transactions. This can be accessed with `cy.hardhat().then((hardhat) => ...)`.
+Currently, tests using hardhat must opt-in in when they load the page: `cy.visit('/swap', { ethereum: 'hardhat' })`. This will not be necessary once we've totally migrated to hardhat.
+
+By default, automining is turned on, so that any transaction that you send to the blockchain is mined immediately. If you want to assert on intermediate states (between sending a transaction and mining it), you can turn off automining: `cy.hardhat({ automine: false })`.
+
+The hardhat integration has built-in utilities to let you modify and assert on balances, approvals, and permits, and should be fully typed. Check it out at [Uniswap/cypress-hardhat](https://github.com/Uniswap/cypress-hardhat).
+
+### Asserting on wallet methods
+
+Wallet methods to hardhat are all aliased. If you'd like to assert that a method was sent to the wallet, you can do so using the method name, prefixed with `@`:
+
+```
+// Asserts that `eth_sendRawTransaction` was sent to the wallet.
+cy.wait('@eth_sendRawTransaction')
+```
+
+Sometimes, you may want a method to _fail_. In this case, you can stub it, but you should disable logging to avoid spamming the test:
+
+```
+// Stub calls to eth_signTypedData_v4 and fail them
+cy.hardhat().then((hardhat) => {
+  // Note the closure to keep signTypedDataStub in scope. Using closures instead of variables (eg let) helps prevent misuse of chaining.
+  const signTypedDataStub = cy.stub(hardhat.provider, 'send').log(false)
+  signTypedDataStub.withArgs('eth_signTypedData_v4).rejects(USER_REJECTION)
+  signTypedDataStub.callThrough() // allws other methods to call through to hardhat
+
+  cy.contains('Confirm swap').click()
+
+  // Verify the call occured
+  // Note the call to cy.wrap to correctly queue the chained command. Without this, the test would occur before the stub is called.
+  cy.wrap(permitApprovalStub).should('be.calledWith', 'eth_signTypedData_v4')
+
+  // Restore the stub
+  // note the call to cy.then to correctly queue the chained command. Without this, the stub would be restored immediately.
+  cy.then(() => permitApprovalStub.restore())
+})
+```
+
+## Best practices
+
+<!-- Best practices should all be labeled using H3, with the rationale italicized at the end of the section. -->
+<!-- Best practice 🤣 is to also include an example before your rationale. -->
+
+### Spec / test grouping
+
+Each spec should be specific to one route, _not_ one functional behavior.
+For example, `token-details.test.ts` is separated from `swap.test.ts`.
+
+If a route has different functional behaviors, that route should become a directory name, and its spec should be split.
+For example, `swap.test.ts` may be split into `swap/swap.test.ts`, `swap/wrap.test.ts`, `swap/permit2.test.ts`.
+
+_This prevents specs from growing too large, which is important because they are always run as a whole locally and on the same machine through CI. If a spec grows too large, it will have a longer local feedback loop, and it will become the bottleneck for CI test runtime._
+
+_Similarly, avoid actions outside the scope of your spec, as it will cause total testing time to increase._
+
+### Use closures instead of variables
+
+Avoid usage of `let`, instead assigning a constant. In practice, this means using closures for your variables:
+
+```javascript
+let badVariable
+
+cy.hardhat({ automine: false })
+  .then((hardhat) => cy.then(() => hardhat.provider.getBalance(hardhat.wallet.address)))
+  .then((initialBalance) => {
+    // Do not assign to a variable outside of your closure!
+    badVariable = initialBalance // <-- bad!
+
+    // Use initial balance here, within the closure.
+  })
+
+cy.get('.class-name').then((el) => {
+  // Do not use badVariable here! It may have changed value due to the queued async nature of Cypress.
+  expect(el).should('contain', badVariable) // <-- bad!
+})
+```
+
+_This prevents misuse of a not-yet-initialized variable, or a variable that has changed as the test progresses._
+
+### Prefer selecting elements using on-screen text over data-testid attributes
+
+When selecting components (eg with `cy.get`), prefer defining your selector with visible UI. Sometimes this is not possible (eg if the text is duplicated on-screen), and you'll need to add a `data-testid` property.
+
+_Defining tests using visual fields helps ensure that we don't break them. `data-testid` may select an element that is only selectable programmatically, and should be used only when necessary, as its use may cover up UI breakages._
+
+_You'll still want to use `data-testid` in cases where the text is rendered in multiple containers and you need to select the correct one, or where the component doesn't render predictable text output._
+
+### Avoid branching logic
+
+Do not write tests that rely on if-statements or conditionals. Do not create helper methods which do more than one thing, and rely on branching logic to apply to different but similar situations.
+
+_Tests should be readable and simple. Branching logic makes it harder to reason about tests, and may hide otherwise flaky or ill-defined behaviors._
+
+_Similarly, you should avoid complicated for-loops. Sometimes, for simple repetition, for-loops are ok._
+
+### Avoid spamming the console
+
+It is ok to include logging while you are developing a test, but that logging should be removed if it is not needed to debug (potential) errors.
+
+For example, stubbing a wallet method will result in dumping a hex string (the calldata) to the log. Instead, suppress logging from methods which you know will flood the log.
+
+```javascript
+cy.stub(hardhat.wallet, 'sendTransaction')
+  .log(false) // <-- suppresses logs from this stub
+  .rejects(new Error('user cancelled'))
+```
+
+_Unnecessary logs it makes it harder to reason about a test overall._
+
+### Name helper methods using transitive verbs
+
+Name helper methods using "action verbs": `expectsThisToHappen`, not `expectThisToHappen`; `selectsToken(token: string)`, not `selectAToken(token: string)`.
+
+_This makes your tests read more naturally, and makes it easier to follow given existing `should` syntax._

cypress/e2e/landing.test.ts

@@ -1,9 +1,9 @@
 import { getTestSelector } from '../utils'
-import { CONNECTED_WALLET_USER_STATE } from '../utils/user-state'
+import { CONNECTED_WALLET_USER_STATE, DISCONNECTED_WALLET_USER_STATE } from '../utils/user-state'
 
 describe('Landing Page', () => {
   it('shows landing page when no user state exists', () => {
-    cy.visit('/', { userState: {} })
+    cy.visit('/', { userState: DISCONNECTED_WALLET_USER_STATE })
     cy.get(getTestSelector('landing-page'))
     cy.screenshot()
   })

cypress/e2e/link.test.ts

@@ -2,7 +2,7 @@
 describe('Link', () => {
   it('should update route', () => {
     cy.viewport(2000, 1600)
-    cy.visit('/')
+    cy.visit('/swap')
     cy.contains('Pool').click()
     cy.get('[data-cy="join-pool-button"]').should('exist')
   })

cypress/e2e/mini-portfolio/accounts.test.ts

@@ -28,6 +28,27 @@ describe('Mini Portfolio account drawer', () => {
     cy.get('@gqlSpy').should('have.been.calledOnce')
   })
 
+  it('fetches account information', () => {
+    // Open the mini portfolio
+    cy.intercept(/graphql/, { fixture: 'mini-portfolio/tokens.json' })
+    cy.get(getTestSelector('web3-status-connected')).click()
+
+    // Verify that wallet state loads correctly
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('Tokens')
+    cy.get(getTestSelector('mini-portfolio-page')).contains('Hidden (201)')
+
+    cy.intercept(/graphql/, { fixture: 'mini-portfolio/nfts.json' })
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()
+    cy.get(getTestSelector('mini-portfolio-page')).contains('I Got Plenty')
+
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('Pools').click()
+    cy.get(getTestSelector('mini-portfolio-page')).contains('No pools yet')
+
+    cy.intercept(/graphql/, { fixture: 'mini-portfolio/activity.json' })
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('Activity').click()
+    cy.get(getTestSelector('mini-portfolio-page')).contains('Contract Interaction')
+  })
+
   it('refetches balances when account changes', () => {
     cy.hardhat().then((hardhat) => {
       const accountA = hardhat.wallets[0].address

cypress/e2e/mini-portfolio/activity-history.test.ts

@@ -1,3 +1,4 @@
+import { USDC_MAINNET } from '../../../src/constants/tokens'
 import { getTestSelector } from '../../utils'
 
 describe('mini-portfolio activity history', () => {
@@ -93,30 +94,21 @@ describe('mini-portfolio activity history', () => {
   })
 
   it('should deduplicate activity history by nonce', () => {
-    cy.visit('/swap', { ethereum: 'hardhat' }).hardhat({ automine: false })
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' }).hardhat({
+      automine: false,
+    })
 
     // Input swap info.
-    cy.get('#swap-currency-input .token-amount-input').clear().type('1')
-    cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.contains('USDC').click()
-    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+    cy.get('#swap-currency-input .token-amount-input').clear().type('1').should('have.value', '1')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
 
-    // Set slippage to a high value.
-    cy.get(getTestSelector('open-settings-dialog-button')).click()
-    cy.get(getTestSelector('max-slippage-settings')).click()
-    cy.get(getTestSelector('slippage-input')).clear().type('5')
-    cy.get('body').click('topRight')
-    cy.get(getTestSelector('slippage-input')).should('not.exist')
-
-    // Click swap button.
-    cy.contains('1 USDC = ').should('exist')
-    cy.get('#swap-button').should('not.be', 'disabled').click()
+    cy.get('#swap-button').click()
     cy.get('#confirm-swap-or-send').click()
-    cy.get(getTestSelector('dismiss-tx-confirmation')).click()
+    cy.get(getTestSelector('confirmation-close-icon')).click()
 
     // Check activity history tab.
     cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('mini-portfolio-nav-activity')).click()
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('Activity').click()
 
     // Assert that the local pending transaction is replaced by a remote transaction with the same nonce.
     cy.contains('Swapping').should('not.exist')

cypress/e2e/nfts.test.ts

@@ -4,11 +4,8 @@ const PUDGY_COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
 const BONSAI_COLLECTION_ADDRESS = '0xec9c519d49856fd2f8133a0741b4dbe002ce211b'
 
 describe('Testing nfts', () => {
-  beforeEach(() => {
-    cy.visit('/')
-  })
-
   it('should load nft leaderboard', () => {
+    cy.visit('/')
     cy.get(getTestSelector('nft-nav')).first().click()
     cy.get(getTestSelector('nft-nav')).first().should('exist')
     cy.get(getTestSelector('nft-nav')).first().click()
@@ -49,15 +46,11 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('nft-bag')).should('exist')
   })
 
-  it('should navigate to the owned nfts page', () => {
+  it('should navigate to and from the owned nfts page', () => {
+    cy.visit('/')
     cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('nft-view-self-nfts')).click()
-  })
-
-  it('should close the sidebar when navigating to NFT details', () => {
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('mini-portfolio-nav-nfts')).click()
-    cy.get(getTestSelector('mini-portfolio-nft')).first().click()
-    cy.contains('Buy crypto').should('not.be.visible')
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()
+    cy.get(getTestSelector('mini-portfolio-nft')).click()
+    cy.get(getTestSelector('mini-portfolio-navbar')).should('not.be.visible')
   })
 })

cypress/e2e/permit2.test.ts

@@ -1,223 +1,247 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { MaxUint160, MaxUint256 } from '@uniswap/permit2-sdk'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 
-import { DAI, USDC_MAINNET } from '../../src/constants/tokens'
+import { DAI, USDC_MAINNET, USDT } from '../../src/constants/tokens'
 import { getTestSelector } from '../utils'
 
-const APPROVE_BUTTON = '[data-testid="swap-approve-button"]'
-
-/** Initiates a swap and confirms its success. */
-function swaps() {
-  // The swap-button can be temporarily disabled following approval, & Cypress will retry clicking the disabled version.
-  // This ensures that we don't click until the button is enabled.
-  cy.get('#swap-button').should('not.have.attr', 'disabled')
-
+/** Initiates a swap. */
+function initiateSwap() {
+  // The swap button is re-rendered once enabled, so we must wait until the original button is not disabled to re-select the appropriate button.
+  cy.get('#swap-button').should('not.be.disabled')
   // Completes the swap.
   cy.get('#swap-button').click()
-  cy.get('#confirm-swap-or-send').click()
-  cy.get(getTestSelector('dismiss-tx-confirmation')).click()
-
-  // Verifies that there is a successful swap notification.
-  cy.contains('Swapped').should('exist')
+  cy.contains('Confirm swap').click()
 }
 
-// TODO(WEB-3299): Update tests to differentiate between permit2 vs token approval button text once UI is updated to indicate approval step.
 describe('Permit2', () => {
-  // The same tokens & swap-amount combination is used for all permit2 tests.
-  const INPUT_TOKEN = DAI
-  const OUTPUT_TOKEN = USDC_MAINNET
-  const TEST_BALANCE_INCREMENT = 0.01
-
-  beforeEach(() => {
-    // Sets up a swap between INPUT_TOKEN and OUTPUT_TOKEN.
-    cy.visit(`/swap/?inputCurrency=${INPUT_TOKEN.address}&outputCurrency=${OUTPUT_TOKEN.address}`, {
+  function setupInputs(inputToken: Token, outputToken: Token) {
+    // Sets up a swap between inputToken and outputToken.
+    cy.visit(`/swap/?inputCurrency=${inputToken.address}&outputCurrency=${outputToken.address}`, {
       ethereum: 'hardhat',
     })
-    cy.get('#swap-currency-input .token-amount-input').clear().type(TEST_BALANCE_INCREMENT.toString())
-  })
+    cy.get('#swap-currency-input .token-amount-input').type('0.01')
+  }
 
   /** Asserts permit2 has a max approval for spend of the input token on-chain. */
-  function expectTokenAllowanceForPermit2ToBeMax() {
+  function expectTokenAllowanceForPermit2ToBeMax(inputToken: Token) {
     // check token approval
-    return cy
-      .hardhat()
-      .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN }))
+    cy.hardhat()
+      .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: inputToken }))
       .should('deep.equal', MaxUint256)
   }
 
   /** Asserts the universal router has a max permit2 approval for spend of the input token on-chain. */
-  function expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime: number) {
-    return cy
-      .hardhat()
-      .then((hardhat) => hardhat.approval.getPermit2Allowance({ owner: hardhat.wallet, token: INPUT_TOKEN }))
+  function expectPermit2AllowanceForUniversalRouterToBeMax(inputToken: Token) {
+    cy.hardhat()
+      .then((hardhat) => hardhat.approval.getPermit2Allowance({ owner: hardhat.wallet, token: inputToken }))
       .then((allowance) => {
         cy.wrap(MaxUint160.eq(allowance.amount)).should('eq', true)
         // Asserts that the on-chain expiration is in 30 days, within a tolerance of 40 seconds.
-        const expected = Math.floor((approvalTime + 2_592_000_000) / 1000)
+        const THIRTY_DAYS_SECONDS = 2_592_000
+        const expected = Math.floor(Date.now() / 1000 + THIRTY_DAYS_SECONDS)
         cy.wrap(allowance.expiration).should('be.closeTo', expected, 40)
       })
   }
 
-  it('swaps when user has already approved token and permit2', () => {
-    cy.hardhat()
-      .then(({ approval, wallet }) => {
-        approval.setTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN })
-        approval.setPermit2Allowance({ owner: wallet, token: INPUT_TOKEN })
+  describe('approval process (with intermediate screens)', () => {
+    // Turn off automine so that intermediate screens are available to assert on.
+    beforeEach(() => cy.hardhat({ automine: false }))
+
+    it('swaps after completing full permit2 approval process', () => {
+      setupInputs(DAI, USDC_MAINNET)
+      initiateSwap()
+
+      // verify that the modal retains its state when the window loses focus
+      cy.window().trigger('blur')
+
+      // Verify token approval
+      cy.contains('Enable spending DAI on Uniswap')
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.get(getTestSelector('popups')).contains('Approved')
+      expectTokenAllowanceForPermit2ToBeMax(DAI)
+
+      // Verify permit2 approval
+      cy.contains('Allow DAI to be used for swapping')
+      cy.wait('@eth_signTypedData_v4')
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+      expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+    })
+
+    it('swaps with existing permit approval and missing token approval', () => {
+      setupInputs(DAI, USDC_MAINNET)
+      cy.hardhat().then(async (hardhat) => {
+        await hardhat.approval.setPermit2Allowance({ owner: hardhat.wallet, token: DAI })
+        await hardhat.mine()
       })
-      .then(swaps)
-  })
+      initiateSwap()
 
-  it('swaps after completing full permit2 approval process', () => {
-    cy.get(APPROVE_BUTTON)
-      .click()
-      .then(() => {
-        const approvalTime = Date.now()
-        cy.get(APPROVE_BUTTON).should('have.text', 'Approval pending')
+      // Verify token approval
+      cy.contains('Enable spending DAI on Uniswap')
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.get(getTestSelector('popups')).contains('Approved')
+      expectTokenAllowanceForPermit2ToBeMax(DAI)
 
-        // There should be a successful Approved notification.
-        cy.contains('Approved').should('exist')
+      // Verify transaction
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+    })
 
-        swaps()
-
-        expectTokenAllowanceForPermit2ToBeMax()
-        expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime)
+    /**
+     * On mainnet, you have to revoke USDT approval before increasing it.
+     * From the token contract:
+     *   To change the approve amount you first have to reduce the addresses`
+     *   allowance to zero by calling `approve(_spender, 0)` if it is not
+     *   already 0 to mitigate the race condition described here:
+     *   https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729
+     */
+    it('swaps USDT with existing permit, and existing but insufficient token approval', () => {
+      cy.hardhat().then(async (hardhat) => {
+        await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(USDT, 2e6))
+        await hardhat.mine()
+        await hardhat.approval.setTokenAllowanceForPermit2({ owner: hardhat.wallet, token: USDT }, 1e6)
+        await hardhat.mine()
+        await hardhat.approval.setPermit2Allowance({ owner: hardhat.wallet, token: USDT })
+        await hardhat.mine()
       })
-  })
+      setupInputs(USDT, USDC_MAINNET)
+      cy.get('#swap-currency-input .token-amount-input').clear().type('2')
+      initiateSwap()
 
-  it('swaps after handling user rejection of approvals and signatures', () => {
-    const USER_REJECTION = { code: 4001 }
-    cy.hardhat().then((hardhat) => {
-      const tokenApprovalStub = cy.stub(hardhat.wallet, 'sendTransaction')
-      tokenApprovalStub.rejects(USER_REJECTION) // reject token approval
+      // Verify allowance revocation
+      cy.contains('Reset USDT')
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.hardhat()
+        .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: USDT }))
+        .should('deep.equal', BigNumber.from(0))
 
-      const permitApprovalStub = cy.stub(hardhat.provider, 'send')
-      permitApprovalStub.withArgs('eth_signTypedData_v4').rejects(USER_REJECTION) // reject permit approval
-      permitApprovalStub.callThrough() // allows non-eth_signTypedData_v4 send calls to return non-stubbed values
+      // Verify token approval
+      cy.contains('Enable spending USDT on Uniswap')
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.get(getTestSelector('popups')).contains('Approved')
+      expectTokenAllowanceForPermit2ToBeMax(USDT)
 
-      // Clicking the approve button should trigger a token approval that will be rejected by the user (tokenApprovalStub).
-      cy.get(APPROVE_BUTTON).click()
-
-      // The swap component should prompt approval again.
-      cy.get(APPROVE_BUTTON)
-        .should('have.text', `Approve use of ${INPUT_TOKEN.symbol}`)
-        .then(() => {
-          tokenApprovalStub.restore() // allow token approval
-
-          // The user is now allowing approval, but the permit2 signature will be rejected by the user (permitApprovalStub).
-          cy.get(APPROVE_BUTTON).click()
-          cy.get(APPROVE_BUTTON)
-            .should('have.text', `Approve use of ${INPUT_TOKEN.symbol}`)
-            .then(() => {
-              permitApprovalStub.restore() // allow permit approval
-
-              // The swap should now be able to proceed, as the permit2 signature will be accepted by the user.
-              cy.get(APPROVE_BUTTON)
-                .click()
-                .then(() => {
-                  const approvalTime = Date.now()
-                  cy.get(APPROVE_BUTTON).should('have.text', 'Approval pending')
-
-                  // There should be a successful Approved notification.
-                  cy.contains('Approved').should('exist')
-
-                  swaps()
-
-                  expectTokenAllowanceForPermit2ToBeMax()
-                  expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime)
-                })
-            })
-        })
+      // Verify transaction
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
     })
   })
 
-  it('swaps with existing token approval and missing permit approval', () => {
-    cy.hardhat()
-      .then(({ approval, wallet }) => approval.setTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN }))
-      .then(() => {
-        cy.get(APPROVE_BUTTON)
-          .click()
-          .then(() => {
-            const approvalTime = Date.now()
+  it('swaps when user has already approved token and permit2', () => {
+    cy.hardhat().then(({ approval, wallet }) =>
+      Promise.all([
+        approval.setTokenAllowanceForPermit2({ owner: wallet, token: DAI }),
+        approval.setPermit2Allowance({ owner: wallet, token: DAI }),
+      ])
+    )
+    setupInputs(DAI, USDC_MAINNET)
+    initiateSwap()
 
-            swaps()
-
-            expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime)
-          })
-      })
+    // Verify transaction
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
   })
 
-  it('swaps with existing permit approval and missing token approval', () => {
-    cy.hardhat()
-      .then(({ approval, wallet }) => approval.setPermit2Allowance({ owner: wallet, token: INPUT_TOKEN }))
-      .then(() => {
-        cy.get(APPROVE_BUTTON).click()
-        cy.get(APPROVE_BUTTON).should('have.text', 'Approval pending')
+  it('swaps after handling user rejection of both approval and signature', () => {
+    setupInputs(DAI, USDC_MAINNET)
+    const USER_REJECTION = { code: 4001 }
+    cy.hardhat().then((hardhat) => {
+      // Reject token approval
+      const tokenApprovalStub = cy.stub(hardhat.wallet, 'sendTransaction').log(false)
+      tokenApprovalStub.rejects(USER_REJECTION) // rejects token approval
+      initiateSwap()
 
-        // There should be a successful Approved notification.
-        cy.contains('Approved').should('exist')
+      // Verify token approval rejection
+      cy.wrap(tokenApprovalStub).should('be.calledOnce')
+      cy.contains('Review swap')
 
-        swaps()
+      // Allow token approval
+      cy.then(() => tokenApprovalStub.restore())
 
-        expectTokenAllowanceForPermit2ToBeMax()
-      })
-  })
+      // Reject permit2 approval
+      const permitApprovalStub = cy.stub(hardhat.provider, 'send').log(false)
+      permitApprovalStub.withArgs('eth_signTypedData_v4').rejects(USER_REJECTION) // rejects permit approval
+      permitApprovalStub.callThrough() // allows non-eth_signTypedData_v4 send calls to return non-stubbed values
+      cy.contains('Confirm swap').click()
 
-  it('prompts signature when existing permit approval is expired', () => {
-    const expiredAllowance = { expiration: Math.floor((Date.now() - 1) / 1000) }
+      // Verify token approval
+      cy.get(getTestSelector('popups')).contains('Approved')
+      expectTokenAllowanceForPermit2ToBeMax(DAI)
 
-    cy.hardhat()
-      .then(({ approval, wallet }) => {
-        approval.setTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN })
-        approval.setPermit2Allowance({ owner: wallet, token: INPUT_TOKEN }, expiredAllowance)
-      })
-      .then(() => {
-        cy.get(APPROVE_BUTTON)
-          .click()
-          .then(() => {
-            const approvalTime = Date.now()
+      // Verify permit2 approval rejection
+      cy.wrap(permitApprovalStub).should('be.calledWith', 'eth_signTypedData_v4')
+      cy.contains('Review swap')
 
-            swaps()
+      // Allow permit2 approval
+      cy.then(() => permitApprovalStub.restore())
+      cy.contains('Confirm swap').click()
 
-            expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime)
-          })
-      })
-  })
-
-  it('prompts signature when existing permit approval amount is too low', () => {
-    const smallAllowance = { amount: 1 }
-
-    cy.hardhat()
-      .then(({ approval, wallet }) => {
-        approval.setTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN })
-        approval.setPermit2Allowance({ owner: wallet, token: INPUT_TOKEN }, smallAllowance)
-      })
-      .then(() => {
-        cy.get(APPROVE_BUTTON)
-          .click()
-          .then(() => {
-            const approvalTime = Date.now()
-
-            swaps()
-
-            expectPermit2AllowanceForUniversalRouterToBeMax(approvalTime)
-          })
-      })
+      // Verify permit2 approval
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+      expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+    })
   })
 
   it('prompts token approval when existing approval amount is too low', () => {
-    cy.hardhat()
-      .then(({ approval, wallet }) => {
-        approval.setPermit2Allowance({ owner: wallet, token: INPUT_TOKEN })
-        approval.setTokenAllowanceForPermit2({ owner: wallet, token: INPUT_TOKEN }, 1)
-      })
-      .then(() => {
-        cy.get(APPROVE_BUTTON).click()
+    setupInputs(DAI, USDC_MAINNET)
+    cy.hardhat().then(({ approval, wallet }) =>
+      Promise.all([
+        approval.setPermit2Allowance({ owner: wallet, token: DAI }),
+        approval.setTokenAllowanceForPermit2({ owner: wallet, token: DAI }, 1),
+      ])
+    )
+    initiateSwap()
 
-        // There should be a successful Approved notification.
-        cy.contains('Approved').should('exist')
+    // Verify token approval
+    cy.get(getTestSelector('popups')).contains('Approved')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+  })
 
-        swaps()
+  it('prompts signature when existing permit approval is expired', () => {
+    setupInputs(DAI, USDC_MAINNET)
+    const expiredAllowance = { expiration: Math.floor((Date.now() - 1) / 1000) }
+    cy.hardhat().then(({ approval, wallet }) =>
+      Promise.all([
+        approval.setTokenAllowanceForPermit2({ owner: wallet, token: DAI }),
+        approval.setPermit2Allowance({ owner: wallet, token: DAI }, expiredAllowance),
+      ])
+    )
+    initiateSwap()
 
-        expectTokenAllowanceForPermit2ToBeMax()
-      })
+    // Verify permit2 approval
+    cy.wait('@eth_signTypedData_v4')
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+  })
+
+  it('prompts signature when existing permit approval amount is too low', () => {
+    setupInputs(DAI, USDC_MAINNET)
+    const smallAllowance = { amount: 1 }
+    cy.hardhat().then(({ approval, wallet }) =>
+      Promise.all([
+        approval.setTokenAllowanceForPermit2({ owner: wallet, token: DAI }),
+        approval.setPermit2Allowance({ owner: wallet, token: DAI }, smallAllowance),
+      ])
+    )
+    initiateSwap()
+
+    // Verify permit2 approval
+    cy.wait('@eth_signTypedData_v4')
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })
 })

cypress/e2e/swap/errors.test.ts

@@ -1,89 +1,107 @@
 import { BigNumber } from '@ethersproject/bignumber'
-import { parseEther } from '@ethersproject/units'
+import { ChainId } from '@uniswap/sdk-core'
 
-import { USDC_MAINNET } from '../../../src/constants/tokens'
-import { getTestSelector } from '../../utils'
+import { DEFAULT_DEADLINE_FROM_NOW } from '../../../src/constants/misc'
+import { UNI, USDC_MAINNET } from '../../../src/constants/tokens'
+import { getBalance, getTestSelector } from '../../utils'
 
-describe('Swap', () => {
-  it('should render and dismiss the wallet rejection modal', () => {
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat()
-      .then((hardhat) => {
-        cy.stub(hardhat.wallet, 'sendTransaction').log(false).rejects(new Error('user cancelled'))
+const UNI_MAINNET = UNI[ChainId.MAINNET]
 
-        cy.get('#swap-currency-output .open-currency-select-button').click()
-        cy.get(getTestSelector('token-search-input')).clear().type(USDC_MAINNET.address)
-        cy.contains('USDC').click()
-        cy.get('#swap-currency-output .token-amount-input').clear().type('1')
-        cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-        cy.get('#swap-button').click()
-        cy.get('#confirm-swap-or-send').click()
-        cy.contains('Transaction rejected').should('exist')
-        cy.contains('Dismiss').click()
-        cy.contains('Transaction rejected').should('not.exist')
-      })
+describe('Swap errors', () => {
+  it('wallet rejection', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat().then((hardhat) => {
+      // Stub the wallet to reject any transaction.
+      cy.stub(hardhat.wallet, 'sendTransaction').log(false).rejects(new Error('user cancelled'))
+
+      // Enter amount to swap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+      cy.get('#swap-currency-input .token-amount-input').should('not.have.value', '')
+
+      // Submit transaction
+      cy.get('#swap-button').click()
+      cy.contains('Confirm swap').click()
+      cy.wait('@eth_estimateGas')
+
+      // Verify rejection
+      cy.contains('Review swap')
+      cy.contains('Confirm swap')
+    })
   })
 
-  it.skip('should render an error for slippage failure', () => {
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat({ automine: false })
-      .then((hardhat) => {
-        cy.then(() => hardhat.provider.getBalance(hardhat.wallet.address)).then((initialBalance) => {
-          // Gas estimation fails for this transaction (that would normally fail), so we stub it.
-          const send = cy.stub(hardhat.provider, 'send').log(false)
-          send.withArgs('eth_estimateGas').resolves(BigNumber.from(2_000_000))
-          send.callThrough()
+  it('transaction past deadline', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat({ automine: false })
+    getBalance(USDC_MAINNET).then((initialBalance) => {
+      // Enter amount to swap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+      cy.get('#swap-currency-input .token-amount-input').should('not.have.value', '')
 
-          // Set slippage to a very low value.
-          cy.get(getTestSelector('open-settings-dialog-button')).click()
-          cy.get(getTestSelector('max-slippage-settings')).click()
-          cy.get(getTestSelector('slippage-input')).clear().type('0.01')
-          cy.get('body').click('topRight')
-          cy.get(getTestSelector('slippage-input')).should('not.exist')
+      // Submit transaction
+      cy.get('#swap-button').click()
+      cy.contains('Confirm swap').click()
+      cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
+      cy.contains('Transaction submitted')
+      cy.get(getTestSelector('confirmation-close-icon')).click()
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
 
-          // Open the currency select modal.
-          cy.get('#swap-currency-output .open-currency-select-button').click()
-
-          // Select UNI as output token
-          cy.get(getTestSelector('token-search-input')).clear().type('Uniswap')
-          cy.get(getTestSelector('currency-list-wrapper'))
-            .contains(/^Uniswap$/)
-            .first()
-            // Our scrolling library (react-window) seems to freeze when acted on by cypress, with this element set to
-            // `pointer-events: none`. This can be ignored using `{force: true}`.
-            .click({ force: true })
-
-          // Swap 2 times.
-          const AMOUNT_TO_SWAP = 400
-          const NUMBER_OF_SWAPS = 2
-          const INDIVIDUAL_SWAP_INPUT = AMOUNT_TO_SWAP / NUMBER_OF_SWAPS
-          cy.get('#swap-currency-input .token-amount-input').clear().type(INDIVIDUAL_SWAP_INPUT.toString())
-          cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-          cy.get('#swap-button').click()
-          cy.get('#confirm-swap-or-send').click()
-          cy.get(getTestSelector('dismiss-tx-confirmation')).click()
-          cy.get('#swap-currency-input .token-amount-input').clear().type(INDIVIDUAL_SWAP_INPUT.toString())
-          cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-          cy.get('#swap-button').click()
-          cy.get('#confirm-swap-or-send').click()
-          cy.get(getTestSelector('dismiss-tx-confirmation')).click()
-
-          // The pending transaction indicator should be visible.
-          cy.contains('Pending').should('exist')
-
-          cy.then(() => hardhat.mine()).then(() => {
-            // The pending transaction indicator should not be visible.
-            cy.contains('Pending').should('not.exist')
-
-            // Check for a failed transaction notification.
-            cy.contains('Swap failed').should('exist')
-
-            // Assert that at least one of the swaps failed due to slippage.
-            cy.then(() => hardhat.provider.getBalance(hardhat.wallet.address)).then((finalBalance) => {
-              expect(finalBalance.gt(initialBalance.sub(parseEther(AMOUNT_TO_SWAP.toString())))).to.be.true
-            })
-          })
-        })
+      // Mine transaction
+      cy.hardhat().then(async (hardhat) => {
+        // Remove the transaction from the mempool, so that it doesn't fail but it is past the deadline.
+        // This should result in it being removed from pending transactions, without a failure notificiation.
+        const transactions = await hardhat.send('eth_pendingTransactions', [])
+        await hardhat.send('hardhat_dropTransaction', [transactions[0].hash])
+        // Mine past the deadline
+        await hardhat.mine(1, DEFAULT_DEADLINE_FROM_NOW + 1)
       })
+      cy.wait('@eth_getTransactionReceipt')
+
+      // Verify transaction did not occur
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+      cy.get(getTestSelector('popups')).should('not.contain', 'Swap failed')
+      cy.get('#swap-currency-output').contains(`Balance: ${initialBalance}`)
+      getBalance(USDC_MAINNET).should('eq', initialBalance)
+    })
+  })
+
+  it.skip('slippage failure', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat({ automine: false })
+    getBalance(USDC_MAINNET).then((initialBalance) => {
+      // Gas estimation fails for this transaction (that would normally fail), so we stub it.
+      cy.hardhat().then((hardhat) => {
+        const send = cy.stub(hardhat.provider, 'send').log(false)
+        send.withArgs('eth_estimateGas').resolves(BigNumber.from(2_000_000))
+        send.callThrough()
+      })
+
+      // Set slippage to a very low value.
+      cy.get(getTestSelector('open-settings-dialog-button')).click()
+      cy.get(getTestSelector('max-slippage-settings')).click()
+      cy.get(getTestSelector('slippage-input')).clear().type('0.01')
+      cy.get('body').click('topRight') // close modal
+      cy.get(getTestSelector('slippage-input')).should('not.exist')
+
+      // Submit 2 transactions
+      for (let i = 0; i < 2; i++) {
+        cy.get('#swap-currency-input .token-amount-input').type('200').should('have.value', '200')
+        cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
+        cy.get('#swap-button').click()
+        cy.contains('Confirm swap').click()
+        cy.wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
+        cy.contains('Transaction submitted')
+        cy.get(getTestSelector('confirmation-close-icon')).click()
+      }
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '2 Pending')
+
+      // Mine transactions
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.wait('@eth_getTransactionReceipt')
+
+      // Verify transaction did not occur
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+      cy.get(getTestSelector('popups')).contains('Swap failed')
+      getBalance(UNI_MAINNET).should('eq', initialBalance)
+    })
   })
 })

cypress/e2e/swap/settings.test.ts

@@ -0,0 +1,14 @@
+import { getTestSelector } from '../../utils'
+
+describe('Swap settings', () => {
+  it('Opens and closes the settings menu', () => {
+    cy.visit('/swap')
+    cy.contains('Settings').should('not.exist')
+    cy.get(getTestSelector('open-settings-dialog-button')).click()
+    cy.contains('Max slippage').should('exist')
+    cy.contains('Transaction deadline').should('exist')
+    cy.contains('Auto Router API').should('exist')
+    cy.get(getTestSelector('open-settings-dialog-button')).click()
+    cy.contains('Settings').should('not.exist')
+  })
+})

cypress/e2e/swap/swap.test.ts

@@ -1,162 +1,89 @@
-import { SupportedChainId } from '@uniswap/sdk-core'
+import { ChainId } from '@uniswap/sdk-core'
 
 import { UNI, USDC_MAINNET } from '../../../src/constants/tokens'
-import { getTestSelector } from '../../utils'
+import { getBalance, getTestSelector } from '../../utils'
 
-const UNI_MAINNET = UNI[SupportedChainId.MAINNET]
+const UNI_MAINNET = UNI[ChainId.MAINNET]
 
 describe('Swap', () => {
   describe('Swap on main page', () => {
-    beforeEach(() => {
-      cy.visit('/swap', { ethereum: 'hardhat' })
-    })
-
     it('starts with ETH selected by default', () => {
+      cy.visit('/swap')
       cy.get(`#swap-currency-input .token-amount-input`).should('have.value', '')
       cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'ETH')
       cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'Select token')
     })
 
-    it('can enter an amount into input', () => {
-      cy.get('#swap-currency-input .token-amount-input').clear().type('0.001').should('have.value', '0.001')
-    })
-
-    it('zero swap amount', () => {
-      cy.get('#swap-currency-input .token-amount-input').clear().type('0.0').should('have.value', '0.0')
-    })
-
-    it('invalid swap amount', () => {
-      cy.get('#swap-currency-input .token-amount-input').clear().type('\\').should('have.value', '')
-    })
-
-    it('can enter an amount into output', () => {
-      cy.get('#swap-currency-output .token-amount-input').clear().type('0.001').should('have.value', '0.001')
-    })
-
-    it('zero output amount', () => {
-      cy.get('#swap-currency-output .token-amount-input').clear().type('0.0').should('have.value', '0.0')
-    })
-
-    it('should render an error when a transaction fails due to a passed deadline', () => {
-      const DEADLINE_MINUTES = 1
-      const TEN_MINUTES_MS = 1000 * 60 * DEADLINE_MINUTES * 10
-      cy.hardhat({ automine: false }).then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, USDC_MAINNET))
-          .then((balance) => Number(balance.toFixed(1)))
-          .then((initialBalance) => {
-            // Input swap info.
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.contains('USDC').click()
-            cy.get('#swap-currency-output .token-amount-input').clear().type('1')
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-
-            // Set deadline to minimum. (1 minute)
-            cy.get(getTestSelector('open-settings-dialog-button')).click()
-            cy.get(getTestSelector('transaction-deadline-settings')).click()
-            cy.get(getTestSelector('deadline-input')).clear().type(DEADLINE_MINUTES.toString())
-            cy.get('body').click('topRight')
-            cy.get(getTestSelector('deadline-input')).should('not.exist')
-
-            cy.get('#swap-button').click()
-            cy.get('#confirm-swap-or-send').click()
-
-            // Dismiss the modal that appears when a transaction is broadcast to the network.
-            cy.get(getTestSelector('dismiss-tx-confirmation')).click()
-
-            // The UI should show the transaction as pending.
-            cy.contains('1 Pending').should('exist')
-
-            // Mine a block past the deadline.
-            cy.then(() => hardhat.mine(1, TEN_MINUTES_MS)).then(() => {
-              // The UI should no longer show the transaction as pending.
-              cy.contains('1 Pending').should('not.exist')
-
-              // Check that the user is informed of the failure
-              cy.contains('Swap failed').should('exist')
-
-              // Check that the balance is unchanged in the UI
-              cy.get('#swap-currency-output [data-testid="balance-text"]').should(
-                'have.text',
-                `Balance: ${initialBalance}`
-              )
-
-              // Check that the balance is unchanged on chain
-              cy.then(() => hardhat.getBalance(hardhat.wallet.address, USDC_MAINNET))
-                .then((balance) => Number(balance.toFixed(1)))
-                .should('eq', initialBalance)
-            })
-          })
-      })
-    })
-
     it('should default inputs from URL params ', () => {
-      cy.visit(`/swap?inputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
+      cy.visit(`/swap?inputCurrency=${UNI_MAINNET.address}`)
       cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'UNI')
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'Select token')
 
-      cy.visit(`/swap?outputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
+      cy.visit(`/swap?outputCurrency=${UNI_MAINNET.address}`)
       cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'Select token')
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'UNI')
 
-      cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
+      cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`)
       cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'ETH')
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'UNI')
     })
 
-    it('ETH to wETH is same value (wrapped swaps have no price impact)', () => {
-      cy.get(`#swap-currency-output .open-currency-select-button`).click()
-      cy.contains('WETH').click()
-      cy.get('#swap-currency-input .token-amount-input').clear().type('0.01')
-      cy.get('#swap-currency-output .token-amount-input').should('have.value', '0.01')
-    })
-
-    it('Opens and closes the settings menu', () => {
-      cy.contains('Settings').should('not.exist')
-      cy.get(getTestSelector('open-settings-dialog-button')).click()
-      cy.contains('Max slippage').should('exist')
-      cy.contains('Transaction deadline').should('exist')
-      cy.contains('Auto Router API').should('exist')
-      cy.get(getTestSelector('open-settings-dialog-button')).click()
-      cy.contains('Settings').should('not.exist')
-    })
-
     it('inputs reset when navigating between pages', () => {
-      cy.get('#swap-currency-input .token-amount-input').clear().type('0.01')
-      cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-      cy.visit('/pool')
       cy.visit('/swap')
       cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
-      cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+      cy.get('#swap-currency-input .token-amount-input').type('0.01').should('have.value', '0.01')
+      cy.visit('/pool').visit('/swap')
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
     })
 
-    it('can swap ETH for USDC', () => {
-      const TOKEN_ADDRESS = USDC_MAINNET.address
-      const BALANCE_INCREMENT = 1
-      cy.hardhat().then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, USDC_MAINNET))
-          .then((balance) => Number(balance.toFixed(1)))
-          .then((initialBalance) => {
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.get(getTestSelector('token-search-input')).clear().type(TOKEN_ADDRESS)
-            cy.contains('USDC').click()
-            cy.get('#swap-currency-output .token-amount-input').clear().type(BALANCE_INCREMENT.toString())
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-            cy.get('#swap-button').click()
-            cy.get('#confirm-swap-or-send').click()
-            cy.get(getTestSelector('dismiss-tx-confirmation')).click()
+    it('resets the dependent input when the independent input is cleared', () => {
+      cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`)
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+      cy.get(`#swap-currency-output .token-amount-input`).should('have.value', '')
 
-            // ui check
-            cy.get('#swap-currency-output [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialBalance + BALANCE_INCREMENT}`
-            )
+      cy.get('#swap-currency-input .token-amount-input').type('0.01').should('have.value', '0.01')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value', '')
+      cy.get('#swap-currency-input .token-amount-input').clear()
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
 
-            // chain state check
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, USDC_MAINNET))
-              .then((balance) => Number(balance.toFixed(1)))
-              .should('eq', initialBalance + BALANCE_INCREMENT)
-          })
+      cy.window().trigger('blur')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+    })
+
+    it('swaps ETH for USDC', () => {
+      cy.visit('/swap', { ethereum: 'hardhat' })
+      cy.hardhat({ automine: false })
+      getBalance(USDC_MAINNET).then((initialBalance) => {
+        // Select USDC
+        cy.get('#swap-currency-output .open-currency-select-button').click()
+        cy.get(getTestSelector('token-search-input')).type(USDC_MAINNET.address)
+        cy.contains('USDC').click()
+
+        // Enter amount to swap
+        cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+        cy.get('#swap-currency-input .token-amount-input').should('not.have.value', '')
+
+        // Submit transaction
+        cy.get('#swap-button').click()
+        cy.contains('Review swap')
+        cy.contains('Confirm swap').click()
+        cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
+        cy.contains('Transaction submitted')
+        cy.get(getTestSelector('confirmation-close-icon')).click()
+        cy.contains('Transaction submitted').should('not.exist')
+        cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+
+        // Mine transaction
+        cy.hardhat().then((hardhat) => hardhat.mine())
+        cy.wait('@eth_getTransactionReceipt')
+
+        // Verify transaction
+        cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+        cy.get(getTestSelector('popups')).contains('Swapped')
+        const finalBalance = initialBalance + 1
+        cy.get('#swap-currency-output').contains(`Balance: ${finalBalance}`)
+        getBalance(USDC_MAINNET).should('eq', finalBalance)
       })
     })
   })

cypress/e2e/swap/wrap.test.ts

@@ -1,49 +1,47 @@
-import { CurrencyAmount, SupportedChainId, WETH9 } from '@uniswap/sdk-core'
+import { ChainId, CurrencyAmount, WETH9 } from '@uniswap/sdk-core'
 
-import { getTestSelector } from '../../utils'
+import { getBalance, getTestSelector } from '../../utils'
 
-const WETH = WETH9[SupportedChainId.MAINNET]
+const WETH = WETH9[ChainId.MAINNET]
 
-function getWethBalance() {
-  return cy
-    .hardhat()
-    .then((hardhat) => hardhat.getBalance(hardhat.wallet, WETH))
-    .then((balance) => Number(balance.toFixed(1)))
-}
-
-describe('Swap', () => {
+describe('Swap wrap', () => {
   beforeEach(() => {
-    cy.visit('/swap', { ethereum: 'hardhat' }).hardhat({ automine: false })
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${WETH.address}`, { ethereum: 'hardhat' }).hardhat({
+      automine: false,
+    })
+  })
+
+  it('ETH to wETH is same value (wrapped swaps have no price impact)', () => {
+    cy.get('#swap-currency-input .token-amount-input').type('0.01').should('have.value', '0.01')
+    cy.get('#swap-currency-output .token-amount-input').should('have.value', '0.01')
+
+    cy.get('#swap-currency-output .token-amount-input').clear().type('0.02').should('have.value', '0.02')
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '0.02')
   })
 
   it('should be able to wrap ETH', () => {
-    getWethBalance().then((initialWethBalance) => {
-      // Select WETH for the token output.
-      cy.get('#swap-currency-output').contains('Select token').click()
-      cy.contains('WETH').click()
+    getBalance(WETH).then((initialBalance) => {
       cy.contains('Enter ETH amount')
 
-      // Enter the amount to wrap.
-      cy.get('#swap-currency-output .token-amount-input').click().type('1')
+      // Enter amount to wrap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', 1)
       cy.get('#swap-currency-input .token-amount-input').should('have.value', 1)
 
-      // Click the wrap button.
+      // Submit transaction
       cy.contains('Wrap').click()
-
-      // The pending transaction indicator should reflect the state.
+      cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
       cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+
+      // Mine transaction
       cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.wait('@eth_getTransactionReceipt')
+
+      // Verify transaction
       cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
-
-      // There should be a successful wrap notification.
-      cy.get(getTestSelector('transaction-popup')).contains('Wrapped')
-      cy.get(getTestSelector('transaction-popup')).contains('1.00 ETH for 1.00 WETH')
-
-      // The UI balance should have increased.
-      cy.get('#swap-currency-output').should('contain', `Balance: ${initialWethBalance + 1}`)
-
-      // The user's WETH account balance should have increased
-      getWethBalance().should('equal', initialWethBalance + 1)
+      cy.get(getTestSelector('popups')).contains('Wrapped')
+      const finalBalance = initialBalance + 1
+      cy.get('#swap-currency-output').contains(`Balance: ${finalBalance}`)
+      getBalance(WETH).should('equal', finalBalance)
     })
   })
 
@@ -53,36 +51,30 @@ describe('Swap', () => {
       await hardhat.mine()
     })
 
-    getWethBalance().then((initialWethBalance) => {
-      // Select WETH for the token output.
-      cy.get('#swap-currency-output').contains('Select token').click()
-      cy.contains('WETH').click()
-
-      // Swap input/output to unwrap WETH.
+    getBalance(WETH).then((initialBalance) => {
+      // Swap input/output to unwrap WETH
       cy.get(getTestSelector('swap-currency-button')).click()
       cy.contains('Enter WETH amount')
 
-      // Enter the amount to unwrap.
-      cy.get('#swap-currency-output .token-amount-input').click().type('1')
+      // Enter the amount to unwrap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', 1)
       cy.get('#swap-currency-input .token-amount-input').should('have.value', 1)
 
-      // Click the unwrap button.
+      // Submit transaction
       cy.contains('Unwrap').click()
-
-      // The pending transaction indicator should reflect the state.
+      cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
       cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+
+      // Mine transaction
       cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.wait('@eth_getTransactionReceipt')
+
+      // Verify transaction
       cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
-
-      // There should be a successful wrap notification.
-      cy.get(getTestSelector('transaction-popup')).contains('Unwrapped')
-      cy.get(getTestSelector('transaction-popup')).contains('1.00 WETH for 1.00 ETH')
-
-      // The UI balance should have increased.
-      cy.get('#swap-currency-input').should('contain', `Balance: ${initialWethBalance - 1}`)
-
-      // The user's WETH account balance should have increased
-      getWethBalance().should('equal', initialWethBalance - 1)
+      cy.get(getTestSelector('popups')).contains('Unwrapped')
+      const finalBalance = initialBalance - 1
+      cy.get('#swap-currency-input').contains(`Balance: ${finalBalance}`)
+      getBalance(WETH).should('equal', finalBalance)
     })
   })
 })

cypress/e2e/token-details.test.ts

@@ -1,9 +1,9 @@
-import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
+import { ChainId, WETH9 } from '@uniswap/sdk-core'
 
-import { UNI } from '../../src/constants/tokens'
+import { ARB, UNI } from '../../src/constants/tokens'
 import { getTestSelector } from '../utils'
 
-const UNI_MAINNET = UNI[SupportedChainId.MAINNET]
+const UNI_MAINNET = UNI[ChainId.MAINNET]
 
 const UNI_ADDRESS = '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984'
 
@@ -115,7 +115,7 @@ describe('Token details', () => {
       cy.url().should('not.include', `${UNI_MAINNET.address}`)
     })
 
-    it.only('should not share swap state with the main swap page', () => {
+    it('should not share swap state with the main swap page', () => {
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'UNI')
       cy.get(`#swap-currency-input .open-currency-select-button`).click()
       cy.contains('WETH').click()
@@ -149,8 +149,9 @@ describe('Token details', () => {
       cy.get(getTestSelector('tokens-network-filter-selected')).click()
       cy.get(getTestSelector('tokens-network-filter-option-arbitrum')).click()
       cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Arbitrum')
-      cy.get(getTestSelector('token-table-row-ARB')).click()
+      cy.get(getTestSelector(`token-table-row-${ARB.address.toLowerCase()}`)).click()
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'ARB')
+      cy.get(getTestSelector('open-settings-dialog-button')).should('be.disabled')
       cy.contains('Connect to Arbitrum').should('exist')
     })
   })

cypress/e2e/token-explore-filter.test.ts

@@ -1,83 +1,24 @@
-describe.skip('Token explore filter', () => {
-  before(() => {
-    cy.visit('/')
-  })
-
-  it('should filter correctly by uni search term', () => {
+describe('Token explore filter', () => {
+  beforeEach(() => {
     cy.visit('/tokens')
-    cy.get('[data-cy="token-name"]').then(($els) => {
-      const tokenNames = Array.from($els, (el) => el.innerText)
-      const filteredByUni = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('uni'))
-      cy.wrap(filteredByUni).as('filteredByUni')
-    })
-
-    cy.get('[data-cy="explore-tokens-search-input"]')
-      .clear()
-      .type('uni')
-      .type('{enter}')
-      .then(() => {
-        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
-        cy.get('@filteredByUni').then((filteredByUni) => {
-          cy.get('[data-cy="token-name"]').then(($els) => {
-            const tokenNames = Array.from($els, (el) => el.innerText)
-            expect(tokenNames.length).to.equal(filteredByUni.length)
-            tokenNames.forEach((tokenName) => {
-              expect(filteredByUni).to.include(tokenName)
-            })
-          })
-        })
-      })
   })
 
+  function aliasFilteredTokens(filter: string) {
+    cy.get('[data-cy="token-name"]').then((tokens) => {
+      cy.wrap(Array.from(tokens).filter((token) => token.innerText.toLowerCase().includes(filter))).as('filteredTokens')
+    })
+  }
+
+  function searchFor(filter: string) {
+    cy.get('[data-cy="explore-tokens-search-input"]').clear().type(filter).type('{enter}')
+  }
+
   it('should filter correctly by dao search term', () => {
-    cy.visit('/tokens')
-    cy.get('[data-cy="token-name"]').then(($els) => {
-      const tokenNames = Array.from($els, (el) => el.innerText)
-      const filteredByDao = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('dao'))
-      cy.wrap(filteredByDao).as('filteredByDao')
+    aliasFilteredTokens('dao')
+    searchFor('dao')
+
+    cy.get('@filteredTokens').then((filteredTokens) => {
+      cy.get('[data-cy="token-name"]').should('deep.equal', filteredTokens)
     })
-
-    cy.get('[data-cy="explore-tokens-search-input"]')
-      .clear()
-      .type('dao')
-      .type('{enter}')
-      .then(() => {
-        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
-        cy.get('@filteredByDao').then((filteredByDao) => {
-          cy.get('[data-cy="token-name"]').then(($els) => {
-            const tokenNames = Array.from($els, (el) => el.innerText)
-            expect(tokenNames.length).to.equal(filteredByDao.length)
-            tokenNames.forEach((tokenName) => {
-              expect(filteredByDao).to.include(tokenName)
-            })
-          })
-        })
-      })
-  })
-
-  it('should filter correctly by ax search term', () => {
-    cy.visit('/tokens')
-    cy.get('[data-cy="token-name"]').then(($els) => {
-      const tokenNames = Array.from($els, (el) => el.innerText)
-      const filteredByAx = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('ax'))
-      cy.wrap(filteredByAx).as('filteredByAx')
-    })
-
-    cy.get('[data-cy="explore-tokens-search-input"]')
-      .clear()
-      .type('ax')
-      .type('{enter}')
-      .then(() => {
-        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
-        cy.get('@filteredByAx').then((filteredByAx) => {
-          cy.get('[data-cy="token-name"]').then(($els) => {
-            const tokenNames = Array.from($els, (el) => el.innerText)
-            expect(tokenNames.length).to.equal(filteredByAx.length)
-            tokenNames.forEach((tokenName) => {
-              expect(filteredByAx).to.include(tokenName)
-            })
-          })
-        })
-      })
   })
 })

cypress/e2e/token-explore.test.ts

@@ -10,11 +10,11 @@ describe('Token explore', () => {
     cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.greaterThan', 0)
     // check sorted svg icon is present in volume cell, since tokens are sorted by volume by default
     cy.get(getTestSelector('header-row')).find(getTestSelector('volume-cell')).find('svg').should('exist')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('volume-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('price-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('tvl-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('volume-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('price-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('tvl-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('percent-change-cell'))
       .should('include.text', '%')
     cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).click()
@@ -24,14 +24,14 @@ describe('Token explore', () => {
   it('should update when time window toggled', () => {
     cy.visit('/tokens/ethereum')
     cy.get(getTestSelector('time-selector')).should('contain', '1D')
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('volume-cell'))
       .then(function ($elem) {
         cy.wrap($elem.text()).as('dailyEthVol')
       })
     cy.get(getTestSelector('time-selector')).click()
     cy.get(getTestSelector('1Y')).click()
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('volume-cell'))
       .then(function ($elem) {
         cy.wrap($elem.text()).as('yearlyEthVol')
@@ -41,7 +41,7 @@ describe('Token explore', () => {
 
   it('should navigate to token detail page when row clicked', () => {
     cy.visit('/tokens/ethereum')
-    cy.get(getTestSelector('token-table-row-ETH')).click()
+    cy.get(getTestSelector('token-table-row-NATIVE')).click()
     cy.get(getTestSelector('token-details-about-section')).should('exist')
     cy.get(getTestSelector('token-details-stats')).should('exist')
     cy.get(getTestSelector('token-info-container')).should('exist')
@@ -53,13 +53,15 @@ describe('Token explore', () => {
   it('should update when global network changed', () => {
     cy.visit('/tokens/ethereum')
     cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Ethereum')
-    cy.get(getTestSelector('token-table-row-ETH')).should('exist')
+    cy.get(getTestSelector('token-table-row-NATIVE')).should('exist')
 
     // note: cannot switch global chain via UI because we cannot approve the network switch
     // in metamask modal using plain cypress. this is a workaround.
     cy.visit('/tokens/polygon')
     cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Polygon')
-    cy.get(getTestSelector('token-table-row-MATIC')).should('exist')
+    cy.get(getTestSelector('token-table-row-NATIVE'))
+      .find(getTestSelector('name-cell'))
+      .should('include.text', 'Polygon Matic')
   })
 
   it('should update when token explore table network changed', () => {

cypress/e2e/universal-search.test.ts

@@ -1,13 +1,7 @@
-import { getTestSelector } from '../utils'
-
 describe('Universal search bar', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/')
-    cy.get('[data-cy="magnifying-icon"]')
-      .parent()
-      .then(($navIcon) => {
-        $navIcon.click()
-      })
+    cy.get('[data-cy="magnifying-icon"]').parent().eq(1).click()
   })
 
   it('should yield clickable result for regular token or nft collection search term', () => {
@@ -19,20 +13,7 @@ describe('Universal search bar', () => {
       .and('contain.text', '$')
       .and('contain.text', '%')
     cy.get('[data-cy="searchbar-token-row-UNI"]').first().click()
-
-    cy.get('div').contains('Uniswap').should('exist')
-    // Stats should have: TVL, 24H Volume, 52W low, 52W high.
-    cy.get(getTestSelector('token-details-stats')).should('exist')
-    cy.get(getTestSelector('token-details-stats')).within(() => {
-      cy.get('[data-cy="tvl"]').should('include.text', '$')
-      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
-      cy.get('[data-cy="52w-low"]').should('include.text', '$')
-      cy.get('[data-cy="52w-high"]').should('include.text', '$')
-    })
-
-    // About section should have description of token.
-    cy.get(getTestSelector('token-details-about-section')).should('exist')
-    cy.contains('UNI is the governance token for Uniswap').should('exist')
+    cy.location('hash').should('equal', '#/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
   })
 
   it.skip('should show recent tokens and popular tokens with empty search term', () => {

cypress/e2e/wallet-connection/connect.test.ts

@@ -0,0 +1,41 @@
+import { getTestSelector } from '../../utils'
+import { DISCONNECTED_WALLET_USER_STATE } from '../../utils/user-state'
+
+describe('disconnect wallet', () => {
+  it('should clear state', () => {
+    cy.visit('/swap', { ethereum: 'hardhat' })
+    cy.get('#swap-currency-input .token-amount-input').clear().type('1')
+
+    // Verify wallet is connected
+    cy.hardhat().then((hardhat) => cy.contains(hardhat.wallet.address.substring(0, 6)))
+    cy.contains('Balance:')
+
+    // Disconnect the wallet
+    cy.hardhat().then((hardhat) => cy.contains(hardhat.wallet.address.substring(0, 6)).click())
+    cy.get(getTestSelector('wallet-disconnect')).click()
+    cy.get(getTestSelector('wallet-disconnect')).contains('Disconnect')
+    cy.get(getTestSelector('wallet-disconnect')).click()
+
+    // Verify wallet has disconnected
+    cy.contains('Connect a wallet').should('exist')
+    cy.get(getTestSelector('navbar-connect-wallet')).contains('Connect')
+    cy.contains('Connect Wallet')
+
+    // Verify swap input is cleared
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+  })
+})
+
+describe('connect wallet', () => {
+  it('should load state', () => {
+    cy.visit('/swap', { ethereum: 'hardhat', userState: DISCONNECTED_WALLET_USER_STATE })
+
+    // Connect the wallet
+    cy.get(getTestSelector('navbar-connect-wallet')).contains('Connect').click()
+    cy.contains('MetaMask').click()
+
+    // Verify wallet is connected
+    cy.hardhat().then((hardhat) => cy.contains(hardhat.wallet.address.substring(0, 6)))
+    cy.contains('Balance:')
+  })
+})

cypress/e2e/wallet-connection/switch-network.test.ts

@@ -0,0 +1,130 @@
+import { createDeferredPromise } from '../../../src/test-utils/promise'
+import { getTestSelector } from '../../utils'
+
+function waitsForActiveChain(chain: string) {
+  cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', chain)
+}
+
+function switchChain(chain: string) {
+  cy.get(getTestSelector('chain-selector')).eq(1).click()
+  cy.contains(chain).click()
+}
+
+describe('network switching', () => {
+  beforeEach(() => {
+    cy.visit('/swap', { ethereum: 'hardhat' })
+    cy.get(getTestSelector('web3-status-connected'))
+  })
+
+  function rejectsNetworkSwitchWith(rejection: unknown) {
+    cy.hardhat().then((hardhat) => {
+      // Reject network switch
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      sendStub.withArgs('wallet_switchEthereumChain').rejects(rejection)
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify rejected network switch
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    waitsForActiveChain('Ethereum')
+    cy.get(getTestSelector('web3-status-connected'))
+  }
+
+  it('should not display message on user rejection', () => {
+    const USER_REJECTION = { code: 4001 }
+    rejectsNetworkSwitchWith(USER_REJECTION)
+    cy.get(getTestSelector('popups')).should('not.contain', 'Failed to switch networks')
+  })
+
+  it('should display message on unknown error', () => {
+    rejectsNetworkSwitchWith(new Error('Unknown error'))
+    cy.get(getTestSelector('popups')).contains('Failed to switch networks')
+  })
+
+  it('should add missing chain', () => {
+    cy.hardhat().then((hardhat) => {
+      // https://docs.metamask.io/guide/rpc-api.html#unrestricted-methods
+      const CHAIN_NOT_ADDED = { code: 4902 } // missing message in useSelectChain
+
+      // Reject network switch with CHAIN_NOT_ADDED
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      let added = false
+      sendStub
+        .withArgs('wallet_switchEthereumChain')
+        .callsFake(() => (added ? Promise.resolve(null) : Promise.reject(CHAIN_NOT_ADDED)))
+      sendStub.withArgs('wallet_addEthereumChain').callsFake(() => {
+        added = true
+        return Promise.resolve(null)
+      })
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify the network was added
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    cy.get('@switch').should('have.been.calledWith', 'wallet_addEthereumChain', [
+      {
+        blockExplorerUrls: ['https://polygonscan.com/'],
+        chainId: '0x89',
+        chainName: 'Polygon',
+        nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
+        rpcUrls: ['https://polygon-rpc.com/'],
+      },
+    ])
+  })
+
+  it('should not disconnect while switching', () => {
+    const promise = createDeferredPromise()
+
+    cy.hardhat().then((hardhat) => {
+      // Reject network switch with CHAIN_NOT_ADDED
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      sendStub.withArgs('wallet_switchEthereumChain').returns(promise)
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify there is no disconnection
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    cy.contains('Connecting to Polygon')
+    cy.get(getTestSelector('web3-status-connected')).should('be.disabled')
+    promise.resolve()
+  })
+
+  it('should switch networks', () => {
+    // Select an output currency
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.contains('USDC').click()
+
+    // Populate input/output fields
+    cy.get('#swap-currency-input .token-amount-input').clear().type('1')
+    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+
+    // Switch network
+    switchChain('Polygon')
+
+    // Verify network switch
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+    cy.get(getTestSelector('web3-status-connected'))
+
+    // Verify that the input/output fields were reset
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+    cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'MATIC')
+    cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+    cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'Select token')
+  })
+})
+
+describe('network switching from URL param', () => {
+  it('should switch network from URL param', () => {
+    cy.visit('/swap?chain=polygon', { ethereum: 'hardhat' })
+    cy.get(getTestSelector('web3-status-connected'))
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+  })
+})

cypress/e2e/wallet-dropdown.test.ts

@@ -1,8 +1,8 @@
 import { getTestSelector } from '../utils'
 
 describe('Wallet Dropdown', () => {
-  function itShouldChangeTheTheme() {
-    it('should change the theme', () => {
+  function itChangesTheme() {
+    it('should change theme', () => {
       cy.get(getTestSelector('theme-lightmode')).click()
 
       cy.get(getTestSelector('theme-lightmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
@@ -21,13 +21,17 @@ describe('Wallet Dropdown', () => {
     })
   }
 
-  function itShouldChangeTheLanguage() {
-    it('should select a language', () => {
-      cy.get(getTestSelector('wallet-language-item')).contains('Deutsch').click({ force: true })
-      cy.get(getTestSelector('wallet-header')).should('contain', 'Sprache')
+  function itChangesLocale() {
+    it('should change locale', () => {
+      cy.contains('Uniswap available in: English').should('not.exist')
+
+      cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
+      cy.location('hash').should('match', /\?lng=af-ZA$/)
+      cy.contains('Uniswap available in: English')
+
       cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
-      cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
-      cy.get(getTestSelector('wallet-back')).click()
+      cy.location('hash').should('match', /\?lng=en-US$/)
+      cy.contains('Uniswap available in: English').should('not.exist')
     })
   }
 
@@ -37,19 +41,39 @@ describe('Wallet Dropdown', () => {
       cy.get(getTestSelector('web3-status-connected')).click()
       cy.get(getTestSelector('wallet-settings')).click()
     })
-    itShouldChangeTheTheme()
-    itShouldChangeTheLanguage()
+    itChangesTheme()
+    itChangesLocale()
+  })
+
+  describe('testnet toggle', () => {
+    beforeEach(() => {
+      cy.visit('/swap')
+    })
+    it('should toggle testnet visibility', () => {
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('not.contain.text', 'Sepolia')
+
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+      cy.get('#testnets-toggle').click()
+      cy.get(getTestSelector('close-account-drawer')).click()
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('contain.text', 'Sepolia')
+    })
   })
 
   describe('disconnected', () => {
     beforeEach(() => {
       cy.visit('/')
       cy.get(getTestSelector('web3-status-connected')).click()
+      // click twice, first time to show confirmation, second to confirm
+      cy.get(getTestSelector('wallet-disconnect')).click()
+      cy.get(getTestSelector('wallet-disconnect')).should('contain', 'Disconnect')
       cy.get(getTestSelector('wallet-disconnect')).click()
       cy.get(getTestSelector('wallet-settings')).click()
     })
-    itShouldChangeTheTheme()
-    itShouldChangeTheLanguage()
+    itChangesTheme()
+    itChangesLocale()
   })
 
   describe('with color theme', () => {

cypress/staging/t9n.test.ts

@@ -0,0 +1,19 @@
+import { getTestSelector } from '../utils'
+
+describe('translations', () => {
+  it('loads locale from the query param', () => {
+    cy.visit('/?lng=fr-FR')
+    cy.contains('Échanger')
+    cy.contains('Uniswap disponible en : English')
+  })
+
+  it('loads locale from menu', () => {
+    cy.visit('/')
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-settings')).click()
+    cy.get(getTestSelector('wallet-language-item')).contains('français').click({ force: true })
+    cy.location('hash').should('match', /\?lng=fr-FR$/)
+    cy.contains('Échanger')
+    cy.contains('Uniswap disponible en : English')
+  })
+})

cypress/support/commands.ts

@@ -2,7 +2,7 @@ import 'cypress-hardhat/lib/browser'
 
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 
-import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+import { FeatureFlag } from '../../src/featureFlags'
 import { UserState } from '../../src/state/user/reducer'
 import { CONNECTED_WALLET_USER_STATE } from '../utils/user-state'
 import { injected } from './ethereum'
@@ -58,7 +58,7 @@ Cypress.Commands.overwrite(
             // Set initial user state.
             win.localStorage.setItem(
               'redux_localstorage_simple_user', // storage key for the user reducer using 'redux-localstorage-simple'
-              JSON.stringify(options?.userState ?? CONNECTED_WALLET_USER_STATE)
+              JSON.stringify({ ...CONNECTED_WALLET_USER_STATE, ...(options?.userState ?? {}) })
             )
 
             // Set feature flags, if configured.

cypress/support/ethereum.ts

@@ -3,11 +3,9 @@
  */
 
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
-
-import { SupportedChainId } from '../../src/constants/chains'
+import { ChainId } from '@uniswap/sdk-core'
 
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
@@ -15,7 +13,7 @@ const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e77
 
 // address of the above key
 const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
-const CHAIN_ID = SupportedChainId.GOERLI
+const CHAIN_ID = ChainId.GOERLI
 const HEXLIFIED_CHAIN_ID = `0x${CHAIN_ID.toString(16)}`
 
 const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 5)

cypress/support/setupTests.ts

@@ -1,5 +1,6 @@
 // @ts-ignore
 import TokenListJSON from '@uniswap/default-token-list'
+import { CyHttpMessages } from 'cypress/types/net-stubbing'
 
 beforeEach(() => {
   // Many API calls enforce that requests come from our app, so we must mock Origin and Referer.
@@ -16,6 +17,9 @@ beforeEach(() => {
     req.continue()
   })
 
+  // Log requests to hardhat.
+  cy.intercept(/:8545/, logJsonRpc)
+
   // Mock analytics responses to avoid analytics in tests.
   cy.intercept('https://api.uniswap.org/v1/amplitude-proxy', (req) => {
     const requestBody = JSON.stringify(req.body)
@@ -39,3 +43,21 @@ beforeEach(() => {
   // This resets the fork, as well as options like automine.
   cy.hardhat().then((hardhat) => hardhat.reset())
 })
+
+function logJsonRpc(req: CyHttpMessages.IncomingHttpRequest) {
+  req.alias = req.body.method
+  const log = Cypress.log({
+    autoEnd: false,
+    name: req.body.method,
+    message: req.body.params?.map((param: unknown) =>
+      typeof param === 'object' ? '{...}' : param?.toString().substring(0, 10)
+    ),
+  })
+  req.on('after:response', (res) => {
+    if (res.statusCode === 200) {
+      log.end()
+    } else {
+      log.error(new Error(`${res.statusCode}: ${res.statusMessage}`))
+    }
+  })
+}

cypress/tsconfig.json

@@ -7,7 +7,8 @@
     "strict": true,
     "target": "ES5",
     "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/cypress", // avoid clobbering the build tsbuildinfo
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
+    "jsx": "react"
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts"],

cypress/utils/index.ts

@@ -1,3 +1,13 @@
+import { Currency } from '@uniswap/sdk-core'
+
 export const getTestSelector = (selectorId: string) => `[data-testid=${selectorId}]`
 
 export const getTestSelectorStartsWith = (selectorId: string) => `[data-testid^=${selectorId}]`
+
+/** Gets the balance of a token as a Chainable. */
+export function getBalance(token: Currency) {
+  return cy
+    .hardhat()
+    .then((hardhat) => hardhat.getBalance(hardhat.wallet, token))
+    .then((balance) => Number(balance.toFixed(1)))
+}

cypress/utils/user-state.ts

@@ -1,3 +1,5 @@
 import { UserState } from '../../src/state/user/reducer'
 
 export const CONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWallet: 'INJECTED' }
+
+export const DISCONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWallet: undefined }

eslint_rules/enforce-retry-on-import.js

@@ -1,36 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'enforce use of retry() for dynamic imports',
-      category: 'Best Practices',
-      recommended: false,
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      ImportExpression(node) {
-        const grandParent = node.parent.parent
-        if (
-          !(
-            grandParent &&
-            grandParent.type === 'CallExpression' &&
-            // Technically, we are only checking that a function named `retry` wraps the dynamic import.
-            // We do not go as far as enforcing that it is import('utils/retry').retry
-            grandParent.callee.name === 'retry' &&
-            grandParent.arguments.length === 1 &&
-            grandParent.arguments[0].type === 'ArrowFunctionExpression'
-          )
-        ) {
-          context.report({
-            node,
-            message: 'Dynamic import should be wrapped in retry (see `utils/retry.ts`): `retry(() => import(...))`',
-          })
-        }
-      },
-    }
-  },
-}

eslint_rules/no-undefined-or.js

@@ -0,0 +1,44 @@
+/* eslint-env node */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Enforce the use of optional object fields',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  create(context) {
+    return {
+      'TSPropertySignature > TSTypeAnnotation > TSUnionType': (node) => {
+        const types = node.types
+        const hasUndefined = types.some((typeNode) => typeNode.type === 'TSUndefinedKeyword')
+
+        if (hasUndefined) {
+          const typesWithoutUndefined = types.filter((typeNode) => typeNode.type !== 'TSUndefinedKeyword')
+
+          // If there is more than one type left after removing 'undefined',
+          // join them together with ' | ' to create a new union type.
+          const newTypeSource =
+            typesWithoutUndefined.length > 1
+              ? typesWithoutUndefined.map((typeNode) => context.getSourceCode().getText(typeNode)).join(' | ')
+              : context.getSourceCode().getText(typesWithoutUndefined[0])
+
+          context.report({
+            node,
+            message: `Prefer optional properties to "Type | undefined".`,
+            fix(fixer) {
+              const propertySignature = node.parent.parent
+              const isAlreadyOptional = propertySignature.optional
+              const newTypeAnnotation = isAlreadyOptional ? `: ${newTypeSource}` : `?: ${newTypeSource}`
+              return fixer.replaceText(node.parent, newTypeAnnotation)
+            },
+          })
+        }
+      },
+    }
+  },
+}

functions/babel.config.js

@@ -0,0 +1 @@
+export const presets = ['@babel/preset-env']

functions/global-setup.ts

@@ -0,0 +1,9 @@
+import { setup } from 'jest-dev-server'
+
+module.exports = async function globalSetup() {
+  globalThis.servers = await setup({
+    command: `yarn start:cloud`,
+    port: 3000,
+    launchTimeout: 50000,
+  })
+}

functions/global-teardown.ts

@@ -0,0 +1,5 @@
+import { teardown } from 'jest-dev-server'
+
+module.exports = async function globalTeardown() {
+  await teardown(globalThis.servers)
+}

functions/global.d.ts

@@ -0,0 +1,6 @@
+import { setup } from 'jest-dev-server'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var servers: Awaited<ReturnType<typeof setup>>
+}

functions/jest.config.json

@@ -0,0 +1,9 @@
+{
+  "globalSetup": "<rootDir>/global-setup.ts",
+  "globalTeardown": "<rootDir>/global-teardown.ts",
+  "preset": "ts-jest",
+  "transform": {
+    "'^.+\\.(ts|tsx)?$'": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest"
+  }
+}

functions/nft.test.ts

@@ -0,0 +1,3 @@
+test('example', async () => {
+  expect(true).toBe(true)
+})

functions/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "incremental": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "noEmit": true,
+    "strict": true,
+    "target": "ES6",
+    "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/functions", // avoid clobbering the build tsbuildinfo
+    "types": ["jest", "node"],
+    "jsx": "react",
+    "moduleResolution": "NodeNext",
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts"],
+  "watchOptions": {
+    "excludeDirectories": ["node_modules"]
+  }
+}

graphql.data.codegen.config.ts

@@ -15,6 +15,7 @@ const config: CodegenConfig = {
         withHooks: true,
         // This avoid all generated schemas being wrapped in Maybe https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#maybevalue-string-default-value-t--null
         maybeValue: 'T',
+        immutableTypes: true,
       },
     },
   },

hardhat.config.js

@@ -1,23 +1,39 @@
+import { ChainId } from '@uniswap/sdk-core'
+
 /* eslint-env node */
 require('dotenv').config()
 
 // Block selection is arbitrary, as e2e tests will build up their own state.
 // The only requirement is that all infrastructure under test (eg Permit2 contracts) are already deployed.
-const BLOCK_NUMBER = 17023328
+// TODO(WEB-2187): Make more dynamic to avoid manually updating
+const BLOCK_NUMBER = 17388567
+const POLYGON_BLOCK_NUMBER = 43600000
 
-const mainnetFork = {
-  url: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
-  blockNumber: BLOCK_NUMBER,
+const forkingConfig = {
   httpHeaders: {
     Origin: 'localhost:3000', // infura allowlists requests by origin
   },
 }
 
+const forks = {
+  [ChainId.MAINNET]: {
+    url: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
+    blockNumber: BLOCK_NUMBER,
+    ...forkingConfig,
+  },
+  [ChainId.POLYGON]: {
+    url: `https://polygon-mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
+    blockNumber: POLYGON_BLOCK_NUMBER,
+    ...forkingConfig,
+  },
+}
+
 module.exports = {
+  forks,
   networks: {
     hardhat: {
-      chainId: 1,
-      forking: mainnetFork,
+      chainId: ChainId.MAINNET,
+      forking: forks[ChainId.MAINNET],
       accounts: {
         count: 2,
       },

lingui.config.ts

@@ -1,48 +1,62 @@
+/* eslint-env node */
 import { default as babelExtractor } from '@lingui/cli/api/extractors/babel'
 import { createHash } from 'crypto'
 import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { existsSync } from 'fs'
 import * as path from 'path'
-import * as pkgUp from 'pkg-up' // pkg-up is used by lingui, and is used here to match lingui's own extractors
 
-/**
- * A custom caching extractor for CI.
- * Falls back to the babelExtractor in a non-CI (ie local) environment.
- * Caches a file's latest extracted content's hash, and skips re-extracting if it is already present in the cache.
- * In CI, re-extracting files takes over one minute, so this is a significant savings.
- */
+/** A custom caching extractor built on top of babelExtractor. */
 const cachingExtractor: typeof babelExtractor = {
+  /** Delegates to babelExtractor.match. */
   match(filename: string) {
     return babelExtractor.match(filename)
   },
-  extract(filename: string, code: string, ...options: unknown[]) {
-    if (!process.env.CI) return babelExtractor.extract(filename, code, ...options)
-
+  /**
+   * Checks a cache before extraction, only delegating to babelExtractor.extract if the file has changed.
+   *
+   * The lingui extractor works by extracting JSON (the catalog) from `filename` to `buildDir/filename.json`.
+   * Caching works by man-in-the-middling this:
+   * - File freshness is computed as a hash of `filename` contents.
+   * - Before extracting, we check the cache to see if we already have a fresh catalog for the file.
+   *   If we do, we copy it to `localeDir/filename.json`. Copying is significantly faster than extracting.
+   * - After extracting, we copy the catalog to the cache.
+   */
+  extract(filename: string, localeDir: string, ...options: unknown[]) {
     // This runs from node_modules/@lingui/conf, so we need to back out to the root.
-    const pkg = pkgUp.sync()
-    if (!pkg) throw new Error('No root found')
-    const root = path.dirname(pkg)
+    const root = __dirname.split('/node_modules')[0]
+
+    // This logic mimics catalogFilename in @lingui/babel-plugin-extract-messages.
+    const buildDir = path.join(localeDir, '_build')
+    const localePath = path.join(buildDir, filename + '.json')
 
     const filePath = path.join(root, filename)
-    const file = readFileSync(filePath)
-    const hash = createHash('sha256').update(file).digest('hex')
+    const fileHash = createHash('sha256').update(readFileSync(filePath)).digest('hex')
 
     const cacheRoot = path.join(root, 'node_modules/.cache/lingui')
-    mkdirSync(cacheRoot, { recursive: true })
-    const cachePath = path.join(cacheRoot, filename.replace(/\//g, '-'))
+    const cachePath = path.join(cacheRoot, filename + '.json')
 
-    // Only read from the cache if we're not performing a "clean" run, as a clean run must re-extract from all
-    // files to ensure that obsolete messages are removed.
-    if (!process.argv.includes('--clean')) {
-      try {
-        const cache = readFileSync(cachePath, 'utf8')
-        if (cache === hash) return
-      } catch (e) {
-        // It should not be considered an error if there is no cache file.
+    // If we have a matching cached copy of the catalog, we can copy it to localePath and return early.
+    if (existsSync(cachePath)) {
+      const { hash, catalog } = JSON.parse(readFileSync(cachePath, 'utf8'))
+      if (hash === fileHash) {
+        if (catalog) {
+          mkdirSync(path.dirname(localePath), { recursive: true })
+          writeFileSync(localePath, JSON.stringify(catalog, null, 2))
+        }
+        return
       }
     }
-    writeFileSync(cachePath, hash)
 
-    return babelExtractor.extract(filename, code, ...options)
+    babelExtractor.extract(filename, localeDir, ...options)
+
+    // Cache the extracted catalog.
+    mkdirSync(path.dirname(cachePath), { recursive: true })
+    if (existsSync(localePath)) {
+      const catalog = JSON.parse(readFileSync(localePath, 'utf8'))
+      writeFileSync(cachePath, JSON.stringify({ hash: fileHash, catalog }))
+    } else {
+      writeFileSync(cachePath, JSON.stringify({ hash: fileHash }))
+    }
   },
 }
 
@@ -101,13 +115,11 @@ const linguiConfig = {
     'vi-VN',
     'zh-CN',
     'zh-TW',
-    'pseudo',
   ],
   orderBy: 'messageId',
   rootDir: '.',
   runtimeConfigModule: ['@lingui/core', 'i18n'],
   sourceLocale: 'en-US',
-  pseudoLocale: 'pseudo',
   extractors: [cachingExtractor],
 }
 

package.json

@@ -15,11 +15,11 @@
     "graphql:generate": "yarn graphql:generate:data && yarn graphql:generate:thegraph",
     "graphql": "yarn graphql:fetch && yarn graphql:generate",
     "i18n:extract": "lingui extract --locale en-US",
-    "i18n:pseudo": "lingui extract --locale pseudo",
     "i18n:compile": "lingui compile",
     "i18n": "yarn i18n:extract --clean && yarn i18n:compile",
-    "prepare": "yarn ajv && yarn contracts && yarn graphql && yarn i18n",
+    "prepare": "concurrently \"npm:ajv\" \"npm:contracts\" \"npm:graphql\" \"npm:i18n\"",
     "start": "craco start",
+    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --proxy=3001 --port=3000 -- yarn start",
     "build": "craco build",
     "build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
@@ -27,6 +27,7 @@
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc",
     "test": "craco test",
+    "test:cloud": "NODE_OPTIONS=--experimental-vm-modules yarn jest functions  --watch --config=functions/jest.config.json",
     "cypress:open": "cypress open --browser chrome --e2e",
     "cypress:run": "cypress run --browser chrome --e2e",
     "deduplicate": "yarn-deduplicate --strategy=highest"
@@ -67,6 +68,8 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.7",
+    "@cloudflare/workers-types": "^4.20230518.0",
     "@craco/craco": "^7.1.0",
     "@ethersproject/experimental": "^5.4.0",
     "@lingui/cli": "^3.9.0",
@@ -95,37 +98,45 @@
     "@types/rebass": "^4.0.7",
     "@types/styled-components": "^5.1.25",
     "@types/testing-library__cypress": "^5.0.5",
-    "@types/ua-parser-js": "^0.7.35",
+    "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^8.3.4",
     "@types/wcag-contrast": "^3.0.0",
-    "@uniswap/default-token-list": "^9.4.0",
+    "@uniswap/default-token-list": "^11.3.0",
     "@uniswap/eslint-config": "^1.2.0",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/jest-transform": "^1.1.1",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
+    "@walletconnect/types": "^2.8.6",
+    "babel-jest": "^29.6.1",
     "babel-plugin-istanbul": "^6.1.1",
     "buffer": "^6.0.3",
+    "concurrently": "^8.0.1",
     "cypress": "12.12.0",
-    "cypress-hardhat": "^2.3.0",
+    "cypress-hardhat": "^2.4.2",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "eslint-plugin-import": "^2.27",
     "eslint-plugin-rulesdir": "^0.2.2",
     "hardhat": "^2.14.0",
+    "jest": "^29.6.1",
+    "jest-dev-server": "^9.0.0",
     "jest-fail-on-console": "^3.1.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
     "process": "^0.11.10",
     "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.3",
+    "ts-jest": "^29.1.1",
     "ts-transform-graphql-tag": "^0.2.1",
     "typechain": "^5.0.0",
     "typescript": "^4.4.3",
+    "wrangler": "https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/4925945367/npm-package-wrangler-3048",
+    "webpack-retry-chunk-load-plugin": "^3.1.1",
     "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
@@ -156,18 +167,18 @@
     "@sentry/types": "^7.45.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "^1.3.1",
-    "@uniswap/analytics-events": "^2.10.0",
-    "@uniswap/conedison": "^1.4.0",
+    "@uniswap/analytics-events": "^2.13.0",
+    "@uniswap/conedison": "^1.8.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/permit2-sdk": "1.2.0",
     "@uniswap/redux-multicall": "^1.1.8",
     "@uniswap/router-sdk": "^1.3.0",
-    "@uniswap/sdk-core": "^3.2.2",
-    "@uniswap/smart-order-router": "^3.6.1",
-    "@uniswap/token-lists": "^1.0.0-beta.31",
-    "@uniswap/universal-router-sdk": "^1.3.8",
+    "@uniswap/sdk-core": "^3.2.6",
+    "@uniswap/smart-order-router": "3.13.5",
+    "@uniswap/token-lists": "^1.0.0-beta.33",
+    "@uniswap/universal-router-sdk": "^1.5.3",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^3.0.1",
@@ -185,17 +196,16 @@
     "@visx/react-spring": "^2.12.2",
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.11.1",
-    "@walletconnect/ethereum-provider": "^1.8.0",
     "@web3-react/coinbase-wallet": "^8.2.0",
     "@web3-react/core": "^8.2.0",
     "@web3-react/eip1193": "^8.2.0",
     "@web3-react/empty": "^8.2.0",
-    "@web3-react/gnosis-safe": "^8.2.0",
+    "@web3-react/gnosis-safe": "^8.2.1",
     "@web3-react/metamask": "^8.2.0",
     "@web3-react/network": "^8.2.0",
     "@web3-react/types": "^8.2.0",
     "@web3-react/url": "^8.2.0",
-    "@web3-react/walletconnect": "^8.2.0",
+    "@web3-react/walletconnect-v2": "^8.3.7",
     "ajv": "^8.11.0",
     "ajv-formats": "^2.1.1",
     "array.prototype.flat": "^1.2.4",
@@ -246,8 +256,8 @@
     "statsig-react": "^1.22.0",
     "styled-components": "^5.3.5",
     "tiny-invariant": "^1.2.0",
-    "ua-parser-js": "^0.7.28",
-    "use-resize-observer": "^9.0.2",
+    "ua-parser-js": "^1.0.35",
+    "use-resize-observer": "^9.1.0",
     "uuid": "^8.3.2",
     "video-extensions": "^1.2.0",
     "wcag-contrast": "^3.0.0",
@@ -260,7 +270,7 @@
   },
   "engines": {
     "npm": "please-use-yarn",
-    "node": "14",
+    "node": "18.x",
     "yarn": ">=1.22"
   }
 }

public/CODEOWNERS

@@ -0,0 +1 @@
+@uniswap/web-admins

public/index.html

@@ -19,9 +19,9 @@
     <meta
       http-equiv="Content-Security-Policy"
       <% if (process.env.REACT_APP_CSP_ALLOW_UNSAFE_EVAL) { %>
-        content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline' 'unsafe-eval'"
+        content="script-src 'self' 'unsafe-inline' 'unsafe-eval'"
       <% } else { %>
-        content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
+        content="script-src 'self' 'unsafe-inline'"
       <% } %>
     />
 
@@ -37,8 +37,6 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <link rel="preconnect" href="https://www.google-analytics.com/" />
-
     <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
 
     <style>

scripts/fetch-schema.js

@@ -10,7 +10,7 @@ const thegraphConfig = require('../graphql.thegraph.config')
 const exec = promisify(child_process.exec)
 
 function fetchSchema(url, outputFile) {
-  exec(`npx get-graphql-schema --h Origin=https://app.uniswap.org ${url}`)
+  exec(`yarn --silent get-graphql-schema --h Origin=https://app.uniswap.org ${url}`)
     .then(({ stderr, stdout }) => {
       if (stderr) {
         throw new Error(stderr)

src/assets/images/coinbaseWalletIcon.svg

@@ -1,12 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_12510_20348)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99872 0H19.0003C21.7622 0 24 2.40768 24 5.37792V18.6221C24 21.5923 21.7622 24 19.0013 24H4.99872C2.23776 24 0 21.5923 0 18.6221V5.37792C0 2.40768 2.23776 0 4.99872 0Z" fill="#0052FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9994 3.47656C16.7073 3.47656 20.5233 7.29256 20.5233 12.0004C20.5233 16.7082 16.7073 20.5242 11.9994 20.5242C7.29159 20.5242 3.47559 16.7082 3.47559 12.0004C3.47559 7.29256 7.29159 3.47656 11.9994 3.47656Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.90035 9.27539H14.0984C14.444 9.27539 14.7234 9.57683 14.7234 9.94739V14.0514C14.7234 14.4229 14.4431 14.7234 14.0984 14.7234H9.90035C9.55475 14.7234 9.27539 14.422 9.27539 14.0514V9.94739C9.27539 9.57683 9.55571 9.27539 9.90035 9.27539Z" fill="#0052FF"/>
-</g>
-<defs>
-<clipPath id="clip0_12510_20348">
-<rect width="24" height="24" rx="8" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/images/metamask.svg

@@ -1,15 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="8" fill="#F7F9FB"/>
-<path d="M19.6128 4L13.2335 8.73803L14.4132 5.94266L19.6128 4Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.88603 4L11.2141 8.78291L10.0921 5.94266L4.88603 4ZM17.3177 14.9827L15.6187 17.5858L19.254 18.586L20.2991 15.0404L17.3177 14.9827ZM4.21283 15.0404L5.25148 18.586L8.88675 17.5858L7.18772 14.9827L4.21283 15.0404Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.68189 10.5847L7.66888 12.117L11.2785 12.2773L11.1503 8.3984L8.68189 10.5847ZM15.8178 10.5847L13.3173 8.35352L13.234 12.2773L16.8372 12.117L15.8178 10.5847ZM8.88705 17.5859L11.0541 16.5281L9.18198 15.0663L8.88705 17.5859ZM13.4456 16.5281L15.619 17.5859L15.3177 15.0663L13.4456 16.5281Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.6191 17.5857L13.4456 16.5278L13.6187 17.9448L13.5995 18.541L15.6191 17.5857ZM8.88708 17.5857L10.9067 18.541L10.8939 17.9448L11.0541 16.5278L8.88708 17.5857Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.9392 14.1297L9.13123 13.5976L10.4071 13.0142L10.9392 14.1297ZM13.5615 14.1297L14.0937 13.0142L15.3759 13.5976L13.5615 14.1297Z" fill="#233447" stroke="#233447" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.88652 17.5856L9.19427 14.9826L7.1875 15.0403L8.88652 17.5856ZM15.3108 14.9826L15.6185 17.5856L17.3175 15.0403L15.3108 14.9826ZM16.8367 12.1167L13.2335 12.277L13.5669 14.1299L14.099 13.0143L15.3813 13.5977L16.8367 12.1167ZM9.13016 13.5977L10.4124 13.0143L10.9382 14.1299L11.278 12.277L7.66836 12.1167L9.13016 13.5977Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.66888 12.1167L9.18198 15.0659L9.13069 13.5977L7.66888 12.1167ZM15.3818 13.5977L15.3177 15.0659L16.8372 12.1167L15.3818 13.5977ZM11.2785 12.277L10.9387 14.1299L11.3619 16.3162L11.458 13.4374L11.2785 12.277ZM13.234 12.277L13.0609 13.431L13.1378 16.3162L13.5674 14.1299L13.234 12.277Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.5679 14.1298L13.1384 16.3161L13.4461 16.5277L15.3182 15.0659L15.3824 13.5977L13.5679 14.1298ZM9.13123 13.5977L9.18252 15.0659L11.0546 16.5277L11.3624 16.3161L10.9392 14.1298L9.13123 13.5977Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.5995 18.5412L13.6187 17.945L13.4584 17.8039H11.0413L10.8939 17.945L10.9067 18.5412L8.88708 17.5859L9.59234 18.163L11.0221 19.1567H13.4777L14.9138 18.163L15.6191 17.5859L13.5995 18.5412Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.4455 16.528L13.1377 16.3164H11.3618L11.054 16.528L10.8937 17.9449L11.0412 17.8039H13.4583L13.6186 17.9449L13.4455 16.528Z" fill="#161616" stroke="#161616" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.8824 9.04578L20.4273 6.42992L19.6131 4L13.4453 8.57775L15.8175 10.5845L19.1707 11.5655L19.9144 10.6999L19.5939 10.4691L20.1068 10.0011L19.7093 9.69333L20.2222 9.30224L19.8824 9.04578ZM4.07825 6.42992L4.62322 9.04578L4.277 9.30224L4.78991 9.69333L4.39882 10.0011L4.91173 10.4691L4.59116 10.6999L5.32847 11.5655L8.68164 10.5845L11.0539 8.57775L4.88608 4L4.07825 6.42992Z" fill="#763D16" stroke="#763D16" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.1706 11.5657L15.8175 10.5847L16.8369 12.1171L15.3174 15.0663L17.3177 15.0407H20.2991L19.1706 11.5657ZM8.68158 10.5847L5.32841 11.5657L4.21283 15.0407H7.18772L9.18167 15.0663L7.66858 12.1171L8.68158 10.5847ZM13.2337 12.2773L13.4453 8.57796L14.4198 5.94287H10.0921L11.0538 8.57796L11.2782 12.2773L11.3551 13.4442L11.3616 16.3165H13.1375L13.1503 13.4442L13.2337 12.2773Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/images/walletConnectIcon.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="8" fill="#3396FF"/>
-<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#3396FF"/>
-<path d="M7.33957 8.93036C9.91346 6.42035 14.0867 6.42035 16.6606 8.93036L16.9704 9.23244C17.0991 9.35791 17.0991 9.5614 16.9704 9.68687L15.9107 10.7203C15.8463 10.783 15.742 10.783 15.6777 10.7203L15.2514 10.3046C13.4557 8.55352 10.5444 8.55352 8.74877 10.3046L8.29223 10.7497C8.22787 10.8125 8.12357 10.8125 8.05921 10.7497L6.99954 9.71635C6.87082 9.59087 6.87082 9.38739 6.99954 9.26191L7.33957 8.93036ZM18.8522 11.0674L19.7953 11.9871C19.924 12.1126 19.924 12.3161 19.7953 12.4416L15.5426 16.5886C15.414 16.7141 15.2053 16.7141 15.0766 16.5886L12.0584 13.6454C12.0262 13.614 11.974 13.614 11.9419 13.6454L8.92363 16.5886C8.79497 16.7141 8.5863 16.7141 8.45758 16.5886L4.20486 12.4415C4.07616 12.316 4.07616 12.1126 4.20486 11.9871L5.14799 11.0674C5.27669 10.9419 5.48534 10.9419 5.61404 11.0674L8.63232 14.0107C8.6645 14.0421 8.71665 14.0421 8.74883 14.0107L11.767 11.0674C11.8957 10.9419 12.1043 10.9419 12.233 11.0674L15.2513 14.0107C15.2835 14.0421 15.3357 14.0421 15.3678 14.0107L18.3861 11.0674C18.5148 10.9419 18.7234 10.9419 18.8522 11.0674Z" fill="white"/>
-</svg>

src/assets/svg/avax_logo.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13871_12533)">
+<path d="M12.9341 2.74118H3.05524V11.7259H12.9341V2.74118Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9947 8C15.9947 12.4154 12.4154 15.9947 7.99999 15.9947C3.58465 15.9947 0.00531006 12.4154 0.00531006 8C0.00531006 3.58466 3.58465 0.00532532 7.99999 0.00532532C12.4154 0.00532532 15.9947 3.58466 15.9947 8ZM5.73452 11.1815H4.18298C3.85696 11.1815 3.69591 11.1815 3.59772 11.1187C3.49166 11.0499 3.42685 10.936 3.41899 10.8103C3.4131 10.6945 3.49363 10.553 3.65467 10.2702L7.48562 3.51761C7.64864 3.23086 7.73112 3.08749 7.83521 3.03447C7.94715 2.97751 8.08071 2.97751 8.19266 3.03447C8.29675 3.08749 8.37924 3.23086 8.54224 3.51761L9.32981 4.89239L9.33382 4.89941C9.50989 5.20703 9.59917 5.36303 9.63815 5.52675C9.68135 5.70548 9.68135 5.89402 9.63815 6.07274C9.59887 6.23771 9.51049 6.39484 9.33177 6.70711L7.31946 10.2643L7.31426 10.2734C7.13703 10.5836 7.04722 10.7408 6.92274 10.8594C6.78722 10.989 6.62421 11.0832 6.44549 11.1363C6.28247 11.1815 6.09983 11.1815 5.73452 11.1815ZM9.65268 11.1815H11.8759C12.2038 11.1815 12.3689 11.1815 12.4671 11.1168C12.5731 11.048 12.6399 10.9321 12.6458 10.8064C12.6515 10.6943 12.5727 10.5584 12.4184 10.292C12.413 10.283 12.4077 10.2737 12.4023 10.2643L11.2887 8.35928L11.276 8.33783C11.1195 8.07321 11.0405 7.93958 10.9391 7.88793C10.8272 7.83096 10.6955 7.83096 10.5836 7.88793C10.4815 7.94095 10.399 8.0804 10.236 8.36124L9.12633 10.2663L9.12253 10.2729C8.96009 10.5533 8.87891 10.6934 8.88477 10.8084C8.89262 10.9341 8.95743 11.0499 9.06348 11.1187C9.15973 11.1815 9.3247 11.1815 9.65268 11.1815Z" fill="#E84142"/>
+</g>
+<defs>
+<clipPath id="clip0_13871_12533">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/avax_square_logo.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_298_130193)">
+<path d="M12.9346 2.74121H3.05566V11.7259H12.9346V2.74121Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9998 0C15.9998 4.41538 15.9998 15.9947 15.9998 15.9947C11.5844 15.9947 0.00590861 15.9947 0.00590861 15.9947L0.00488281 5.43594e-05C4.42027 5.43594e-05 15.9998 0 15.9998 0ZM5.73493 11.1815H4.18339C3.85736 11.1815 3.69632 11.1815 3.59813 11.1187C3.49207 11.0499 3.42726 10.936 3.4194 10.8103C3.41351 10.6945 3.49404 10.553 3.65508 10.2702L7.48603 3.51765C7.64905 3.2309 7.73153 3.08753 7.83562 3.03451C7.94756 2.97755 8.08112 2.97755 8.19307 3.03451C8.29716 3.08753 8.37965 3.2309 8.54265 3.51765L9.33022 4.89243L9.33423 4.89945C9.51029 5.20707 9.59958 5.36307 9.63856 5.52679C9.68176 5.70552 9.68176 5.89406 9.63856 6.07278C9.59928 6.23775 9.5109 6.39488 9.33218 6.70715L7.31987 10.2643L7.31466 10.2734C7.13744 10.5836 7.04762 10.7408 6.92315 10.8594C6.78763 10.9891 6.62462 11.0833 6.44589 11.1364C6.28288 11.1815 6.10024 11.1815 5.73493 11.1815ZM9.65309 11.1815H11.8763C12.2043 11.1815 12.3693 11.1815 12.4675 11.1168C12.5735 11.048 12.6403 10.9321 12.6463 10.8065C12.6519 10.6944 12.5731 10.5584 12.4188 10.2921C12.4134 10.283 12.4081 10.2738 12.4027 10.2644L11.2891 8.35932L11.2764 8.33787C11.1199 8.07325 11.0409 7.93962 10.9395 7.88797C10.8276 7.831 10.6959 7.831 10.584 7.88797C10.4819 7.94099 10.3994 8.08044 10.2364 8.36128L9.12674 10.2663L9.12294 10.2729C8.9605 10.5533 8.87932 10.6934 8.88518 10.8084C8.89303 10.9341 8.95784 11.0499 9.06389 11.1187C9.16014 11.1815 9.32511 11.1815 9.65309 11.1815Z" fill="#E84142"/>
+</g>
+<defs>
+<clipPath id="clip0_298_130193">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/browser-wallet-dark.svg

@@ -1,77 +0,0 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" fill="#293249" />
-  <g clip-path="url(#clip0_304_15139)">
-    <rect x="3" y="3" width="17" height="17" rx="6" fill="#3375BB" />
-    <g clip-path="url(#clip1_304_15139)">
-      <mask id="mask0_304_15139" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="2"
-        width="17" height="18">
-        <path d="M19.843 2.99976H3.10449V19.7382H19.843V2.99976Z" fill="white" />
-      </mask>
-      <g mask="url(#mask0_304_15139)">
-        <path
-          d="M11.4737 19.7382C16.0959 19.7382 19.843 15.9912 19.843 11.369C19.843 6.74679 16.0959 2.99976 11.4737 2.99976C6.85153 2.99976 3.10449 6.74679 3.10449 11.369C3.10449 15.9912 6.85153 19.7382 11.4737 19.7382Z"
-          fill="#3375BB" />
-        <path
-          d="M11.533 6.66125C13.187 8.0426 15.0837 7.95741 15.6257 7.95741C15.5071 15.8135 14.6039 14.2556 11.533 16.4585C8.46215 14.2556 7.5646 15.8135 7.44604 7.95741C7.98233 7.95741 9.87903 8.0426 11.533 6.66125Z"
-          stroke="white" stroke-width="1.04615" stroke-miterlimit="10" stroke-linecap="round"
-          stroke-linejoin="round" />
-      </g>
-    </g>
-  </g>
-  <rect x="3" y="22" width="17" height="17" rx="6" fill="white" />
-  <path
-    d="M17.9393 30.9431C18.4082 29.8912 16.0762 26.938 13.8455 25.7213C12.4386 24.7707 10.981 24.8975 10.6769 25.3157C10.0305 26.2283 12.8315 27.0141 14.7073 27.914C14.3017 28.0914 13.9215 28.4083 13.706 28.8012C13.0089 28.0407 11.4753 27.3816 9.67558 27.914C8.45883 28.2688 7.45756 29.118 7.06465 30.3855C6.97593 30.3474 6.86186 30.3221 6.76046 30.3221C6.34221 30.3221 6 30.6643 6 31.0826C6 31.5008 6.34221 31.843 6.76046 31.843C6.83651 31.843 7.07732 31.7923 7.07732 31.7923L10.981 31.8177C9.42209 34.3019 8.18 34.6567 8.18 35.0877C8.18 35.5186 9.35872 35.4045 9.80232 35.2398C11.9316 34.4793 14.213 32.0838 14.6059 31.3994C16.2536 31.6149 17.6351 31.6276 17.9393 30.9431Z"
-    fill="url(#paint0_linear_304_15139)" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M14.7201 27.9138C14.8088 27.8758 14.7961 27.7491 14.7708 27.6477C14.7201 27.4195 13.7695 26.4816 12.8823 26.0634C11.6656 25.493 10.7784 25.5184 10.6516 25.7845C10.8924 26.2915 12.0458 26.7605 13.2372 27.2674C13.7315 27.4702 14.2511 27.6857 14.7201 27.9138Z"
-    fill="url(#paint1_linear_304_15139)" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M13.1737 33.0091C12.9328 32.9204 12.654 32.8317 12.3371 32.7556C12.6667 32.1599 12.7427 31.26 12.4259 30.7024C11.9823 29.9165 11.4246 29.4983 10.1191 29.4983C9.40936 29.4983 7.48285 29.7391 7.44482 31.3488C7.44482 31.5135 7.44482 31.6656 7.4575 31.8177H10.981C10.512 32.5655 10.0684 33.1232 9.67552 33.5414C10.1445 33.6555 10.5247 33.7569 10.8796 33.8583C11.2091 33.947 11.526 34.023 11.8428 34.1118C12.3245 33.7569 12.7808 33.3767 13.1737 33.0091Z"
-    fill="url(#paint2_linear_304_15139)" />
-  <path
-    d="M7.01397 31.6276C7.15338 32.8443 7.85048 33.326 9.27001 33.4654C10.6895 33.6048 11.5007 33.5161 12.578 33.6048C13.4779 33.6809 14.2891 34.1498 14.5806 33.985C14.8468 33.8456 14.6947 33.326 14.3398 32.9964C13.8708 32.5655 13.2244 32.274 12.0964 32.1599C12.3245 31.5389 12.2612 30.6644 11.9063 30.1954C11.3993 29.511 10.4614 29.2068 9.27001 29.3335C8.02792 29.4856 6.83652 30.1067 7.01397 31.6276Z"
-    fill="url(#paint3_linear_304_15139)" />
-  <rect x="22" y="3" width="17" height="36" rx="6" fill="#4C82FB" fill-opacity="0.24" />
-  <g clip-path="url(#clip2_304_15139)">
-    <path
-      d="M30.5001 25.0833C33.0314 25.0833 35.0834 23.0313 35.0834 20.5C35.0834 17.9687 33.0314 15.9166 30.5001 15.9166C27.9688 15.9166 25.9167 17.9687 25.9167 20.5C25.9167 23.0313 27.9688 25.0833 30.5001 25.0833Z"
-      stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M25.9167 20.5H35.0834" stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round"
-      stroke-linejoin="round" />
-    <path
-      d="M30.5001 15.9166C31.6465 17.1717 32.298 18.8005 32.3334 20.5C32.298 22.1994 31.6465 23.8282 30.5001 25.0833C29.3537 23.8282 28.7022 22.1994 28.6667 20.5C28.7022 18.8005 29.3537 17.1717 30.5001 15.9166V15.9166Z"
-      stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
-  </g>
-  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" stroke="#1B2236" stroke-width="0.5" />
-  <defs>
-    <linearGradient id="paint0_linear_304_15139" x1="9.54664" y1="29.9616" x2="17.8542" y2="32.3175"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#8797FF" />
-      <stop offset="1" stop-color="#AAA8FF" />
-    </linearGradient>
-    <linearGradient id="paint1_linear_304_15139" x1="16.147" y1="30.1475" x2="10.1527" y2="24.1385"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#3B22A0" />
-      <stop offset="1" stop-color="#5156D8" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint2_linear_304_15139" x1="13.3391" y1="33.2263" x2="7.58086" y2="29.9157"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#3B1E8F" />
-      <stop offset="1" stop-color="#6A6FFB" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint3_linear_304_15139" x1="9.14535" y1="30.6449" x2="13.0375" y2="35.5903"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#8898FF" />
-      <stop offset="0.9839" stop-color="#5F47F1" />
-    </linearGradient>
-    <clipPath id="clip0_304_15139">
-      <rect x="3" y="3" width="17" height="17" rx="6" fill="white" />
-    </clipPath>
-    <clipPath id="clip1_304_15139">
-      <rect width="17" height="16.7385" fill="white" transform="translate(3 2.99988)" />
-    </clipPath>
-    <clipPath id="clip2_304_15139">
-      <rect width="11" height="11" fill="white" transform="translate(25 15)" />
-    </clipPath>
-  </defs>
-</svg>

src/assets/svg/browser-wallet-light.svg

@@ -1,78 +0,0 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="1" y="1" width="40" height="40" rx="8" fill="#E8ECFB" />
-  <g clip-path="url(#clip0_304_15192)">
-    <rect x="3" y="3" width="17" height="17" rx="6" fill="#3375BB" />
-    <g clip-path="url(#clip1_304_15192)">
-      <mask id="mask0_304_15192" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="2"
-        width="17" height="18">
-        <path d="M19.843 2.99976H3.10449V19.7382H19.843V2.99976Z" fill="white" />
-      </mask>
-      <g mask="url(#mask0_304_15192)">
-        <path
-          d="M11.4737 19.7382C16.0959 19.7382 19.843 15.9912 19.843 11.369C19.843 6.74679 16.0959 2.99976 11.4737 2.99976C6.85153 2.99976 3.10449 6.74679 3.10449 11.369C3.10449 15.9912 6.85153 19.7382 11.4737 19.7382Z"
-          fill="#3375BB" />
-        <path
-          d="M11.533 6.66125C13.187 8.0426 15.0837 7.95741 15.6257 7.95741C15.5071 15.8135 14.6039 14.2556 11.533 16.4585C8.46215 14.2556 7.5646 15.8135 7.44604 7.95741C7.98233 7.95741 9.87903 8.0426 11.533 6.66125Z"
-          stroke="white" stroke-width="1.04615" stroke-miterlimit="10" stroke-linecap="round"
-          stroke-linejoin="round" />
-      </g>
-    </g>
-  </g>
-  <rect x="3" y="22" width="17" height="17" rx="6" fill="white" />
-  <path
-    d="M17.9393 30.9431C18.4082 29.8912 16.0762 26.938 13.8455 25.7213C12.4386 24.7707 10.981 24.8975 10.6769 25.3157C10.0305 26.2283 12.8315 27.0141 14.7073 27.914C14.3017 28.0914 13.9215 28.4083 13.706 28.8012C13.0089 28.0407 11.4753 27.3816 9.67558 27.914C8.45883 28.2688 7.45756 29.118 7.06465 30.3855C6.97593 30.3474 6.86186 30.3221 6.76046 30.3221C6.34221 30.3221 6 30.6643 6 31.0826C6 31.5008 6.34221 31.843 6.76046 31.843C6.83651 31.843 7.07732 31.7923 7.07732 31.7923L10.981 31.8177C9.42209 34.3019 8.18 34.6567 8.18 35.0877C8.18 35.5186 9.35872 35.4045 9.80232 35.2398C11.9316 34.4793 14.213 32.0838 14.6059 31.3994C16.2536 31.6149 17.6351 31.6276 17.9393 30.9431Z"
-    fill="url(#paint0_linear_304_15192)" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M14.7201 27.9138C14.8088 27.8758 14.7961 27.7491 14.7708 27.6477C14.7201 27.4195 13.7695 26.4816 12.8823 26.0634C11.6656 25.493 10.7784 25.5184 10.6516 25.7845C10.8924 26.2915 12.0458 26.7605 13.2372 27.2674C13.7315 27.4702 14.2511 27.6857 14.7201 27.9138Z"
-    fill="url(#paint1_linear_304_15192)" />
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M13.1737 33.0091C12.9328 32.9204 12.654 32.8317 12.3371 32.7556C12.6667 32.1599 12.7427 31.26 12.4259 30.7024C11.9823 29.9165 11.4246 29.4983 10.1191 29.4983C9.40936 29.4983 7.48285 29.7391 7.44482 31.3488C7.44482 31.5135 7.44482 31.6656 7.4575 31.8177H10.981C10.512 32.5655 10.0684 33.1232 9.67552 33.5414C10.1445 33.6555 10.5247 33.7569 10.8796 33.8583C11.2091 33.947 11.526 34.023 11.8428 34.1118C12.3245 33.7569 12.7808 33.3767 13.1737 33.0091Z"
-    fill="url(#paint2_linear_304_15192)" />
-  <path
-    d="M7.01397 31.6276C7.15338 32.8443 7.85048 33.326 9.27001 33.4654C10.6895 33.6048 11.5007 33.5161 12.578 33.6048C13.4779 33.6809 14.2891 34.1498 14.5806 33.985C14.8468 33.8456 14.6947 33.326 14.3398 32.9964C13.8708 32.5655 13.2244 32.274 12.0964 32.1599C12.3245 31.5389 12.2612 30.6644 11.9063 30.1954C11.3993 29.511 10.4614 29.2068 9.27001 29.3335C8.02792 29.4856 6.83652 30.1067 7.01397 31.6276Z"
-    fill="url(#paint3_linear_304_15192)" />
-  <rect x="22" y="3" width="17" height="36" rx="6" fill="#FB118E" fill-opacity="0.12" />
-  <g clip-path="url(#clip2_304_15192)">
-    <path
-      d="M30.5001 25.0833C33.0314 25.0833 35.0834 23.0313 35.0834 20.5C35.0834 17.9687 33.0314 15.9166 30.5001 15.9166C27.9688 15.9166 25.9167 17.9687 25.9167 20.5C25.9167 23.0313 27.9688 25.0833 30.5001 25.0833Z"
-      stroke="#FB118E" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M25.9167 20.5H35.0834" stroke="#FB118E" stroke-width="0.825" stroke-linecap="round"
-      stroke-linejoin="round" />
-    <path
-      d="M30.5001 15.9166C31.6465 17.1717 32.298 18.8005 32.3334 20.5C32.298 22.1994 31.6465 23.8282 30.5001 25.0833C29.3537 23.8282 28.7022 22.1994 28.6667 20.5C28.7022 18.8005 29.3537 17.1717 30.5001 15.9166V15.9166Z"
-      stroke="#FB118E" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
-  </g>
-  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" stroke="#5D6785"
-    stroke-opacity="0.24" stroke-width="0.5" />
-  <defs>
-    <linearGradient id="paint0_linear_304_15192" x1="9.54664" y1="29.9616" x2="17.8542" y2="32.3175"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#8797FF" />
-      <stop offset="1" stop-color="#AAA8FF" />
-    </linearGradient>
-    <linearGradient id="paint1_linear_304_15192" x1="16.147" y1="30.1475" x2="10.1527" y2="24.1385"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#3B22A0" />
-      <stop offset="1" stop-color="#5156D8" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint2_linear_304_15192" x1="13.3391" y1="33.2263" x2="7.58086" y2="29.9157"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#3B1E8F" />
-      <stop offset="1" stop-color="#6A6FFB" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint3_linear_304_15192" x1="9.14535" y1="30.6449" x2="13.0375" y2="35.5903"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#8898FF" />
-      <stop offset="0.9839" stop-color="#5F47F1" />
-    </linearGradient>
-    <clipPath id="clip0_304_15192">
-      <rect x="3" y="3" width="17" height="17" rx="6" fill="white" />
-    </clipPath>
-    <clipPath id="clip1_304_15192">
-      <rect width="17" height="16.7385" fill="white" transform="translate(3 2.99988)" />
-    </clipPath>
-    <clipPath id="clip2_304_15192">
-      <rect width="11" height="11" fill="white" transform="translate(25 15)" />
-    </clipPath>
-  </defs>
-</svg>

src/assets/svg/moonpay.svg

@@ -0,0 +1 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="36" height="36" rx="18" fill="#7D00FF"/><path d="M24.933 14.14a3.07 3.07 0 0 0 0-6.14 3.07 3.07 0 0 0 0 6.14ZM15.5 28A7.495 7.495 0 0 1 8 20.493a7.495 7.495 0 0 1 7.5-7.506c4.149 0 7.5 3.354 7.5 7.506A7.495 7.495 0 0 1 15.5 28Z" fill="#fff"/></svg>

src/assets/svg/papers-text.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M13.2601 18.3918C12.9161 18.5558 12.5141 18.6779 12.0591 18.7599L5.48907 19.9099C3.29907 20.2999 2.00896 19.3999 1.62896 17.2099L0.0891657 8.45987C-0.300834 6.26987 0.599117 4.97988 2.78912 4.58988L4.58697 4.27384C4.79197 4.23784 4.97114 4.41686 4.93414 4.62186L3.75811 11.2799C3.22811 14.3099 4.65803 16.3499 7.67803 16.8799C7.67803 16.8799 12.8971 17.7969 13.1661 17.8489C13.4981 17.9088 13.5511 18.2628 13.2601 18.3918ZM19.9131 5.10587L18.3689 13.8598C17.997 15.9678 16.7811 16.8688 14.7361 16.5888C14.6581 16.5778 14.5881 16.5779 14.5071 16.5639L7.94195 15.4059C5.75295 15.0199 4.85209 13.7329 5.23809 11.5439L6.58111 3.92783L6.78204 2.78983C7.16804 0.600828 8.4551 -0.300151 10.6441 0.0858488L17.21 1.24387C19.398 1.62987 20.2991 2.91787 19.9131 5.10587ZM13.554 11.8958C13.626 11.4878 13.3541 11.0988 12.9461 11.0268L8.8421 10.3028C8.4361 10.2298 8.04518 10.5039 7.97418 10.9109C7.90218 11.3189 8.17409 11.7079 8.58209 11.7799L12.6861 12.5039C12.7301 12.5119 12.7739 12.5149 12.8169 12.5149C13.1739 12.5159 13.49 12.2598 13.554 11.8958ZM16.597 9.03482C16.669 8.62682 16.3971 8.23787 15.9891 8.16587L9.42413 7.00785C9.02013 6.93685 8.62696 7.20888 8.55596 7.61588C8.48396 8.02388 8.75612 8.41284 9.16412 8.48484L15.7291 9.64286C15.7731 9.65086 15.8172 9.65384 15.8602 9.65384C16.2172 9.65384 16.533 9.39782 16.597 9.03482ZM17.2972 5.77286C17.3692 5.36486 17.097 4.97584 16.689 4.90384L10.1241 3.74582C9.72008 3.67382 9.32716 3.94685 9.25616 4.35385C9.18416 4.76185 9.45607 5.15087 9.86407 5.22287L16.429 6.38083C16.473 6.38883 16.5171 6.39188 16.5601 6.39188C16.9171 6.39288 17.2332 6.13686 17.2972 5.77286Z" fill="#F5F6FC" />
+</svg>

src/assets/svg/phantom-icon.svg

@@ -0,0 +1,24 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13559_129580)">
+<rect width="40" height="40" rx="8" fill="url(#paint0_linear_13559_129580)"/>
+<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="url(#paint1_linear_13559_129580)"/>
+<path d="M34.5576 20.2857H30.982C30.982 13.0516 25.0542 7.1875 17.7415 7.1875C10.5192 7.1875 4.64749 12.908 4.5038 20.0182C4.35511 27.3678 11.3254 33.75 18.7559 33.75H19.6906C26.2415 33.75 35.0217 28.6771 36.3936 22.4961C36.647 21.3567 35.737 20.2857 34.5576 20.2857ZM12.4279 20.6079C12.4279 21.5753 11.6281 22.3665 10.6502 22.3665C9.67227 22.3665 8.87249 21.575 8.87249 20.6079V17.7629C8.87249 16.7955 9.67227 16.0043 10.6502 16.0043C11.6281 16.0043 12.4279 16.7955 12.4279 17.7629V20.6079ZM18.6009 20.6079C18.6009 21.5753 17.8011 22.3665 16.8232 22.3665C15.8453 22.3665 15.0455 21.575 15.0455 20.6079V17.7629C15.0455 16.7955 15.8456 16.0043 16.8232 16.0043C17.8011 16.0043 18.6009 16.7955 18.6009 17.7629V20.6079Z" fill="url(#paint2_linear_13559_129580)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_13559_129580" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#534BB1"/>
+<stop offset="1" stop-color="#551BF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_13559_129580" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#534BB1"/>
+<stop offset="1" stop-color="#551BF9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_13559_129580" x1="20.4688" y1="7.1875" x2="20.4688" y2="33.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.82"/>
+</linearGradient>
+<clipPath id="clip0_13559_129580">
+<rect width="40" height="40" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/wallets/brave-icon.svg

@@ -0,0 +1,18 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3668 12.5808L33.0988 10.7617C33.0988 10.7617 32.1671 9.75101 31.0359 8.60559C29.9046 7.46023 27.509 8.13398 27.509 8.13398L24.7807 5H19.9895H15.1984L12.47 8.13398C12.47 8.13398 10.0744 7.46023 8.94319 8.60559C7.81191 9.75101 6.8803 10.7617 6.8803 10.7617L7.61228 12.5808L6.68066 15.2758C6.68066 15.2758 9.42061 25.7834 9.74169 27.0666C10.3739 29.5932 10.8064 30.5701 12.6031 31.8503C14.3998 33.1304 17.6604 35.3538 18.1929 35.6907C18.7252 36.0276 19.3906 36.6014 19.9895 36.6014C20.5884 36.6014 21.2539 36.0276 21.7862 35.6907C22.3185 35.3538 25.5793 33.1304 27.3759 31.8503C29.1726 30.5701 29.6052 29.5932 30.2374 27.0666C30.5584 25.7834 33.2984 15.2758 33.2984 15.2758L32.3668 12.5808Z" fill="url(#paint0_linear_13571_129901)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.7438 10.1216C26.7438 10.1216 30.253 14.4167 30.253 15.3347C30.253 16.2527 29.8116 16.4951 29.3678 16.9722C28.9238 17.4495 26.9853 19.5337 26.7364 19.8013C26.4875 20.069 25.9693 20.4748 26.2741 21.2052C26.5789 21.9357 27.0286 22.8651 26.5286 23.8078C26.0284 24.7506 25.1717 25.3797 24.6227 25.2757C24.0737 25.1717 22.7843 24.4895 22.3103 24.1778C21.8361 23.8662 20.3334 22.6114 20.3334 22.1313C20.3334 21.6512 21.8868 20.7892 22.1737 20.5934C22.4608 20.3976 23.7697 19.6396 23.7965 19.342C23.8233 19.0444 23.8131 18.9572 23.4268 18.222C23.0405 17.4867 22.3448 16.5056 22.4607 15.8527C22.5764 15.2 23.6983 14.8606 24.499 14.5544C25.2995 14.2483 26.841 13.6702 27.0336 13.5803C27.2262 13.4903 27.1764 13.4047 26.593 13.3487C26.0098 13.2927 24.3544 13.0702 23.6081 13.2809C22.8618 13.4915 21.5868 13.8119 21.4836 13.9819C21.3803 14.1518 21.2892 14.1575 21.3953 14.7437C21.5013 15.3298 22.0473 18.1425 22.1003 18.6421C22.1533 19.1417 22.257 19.472 21.725 19.5952C21.1929 19.7183 20.2973 19.9322 19.9895 19.9322C19.6818 19.9322 18.7861 19.7183 18.254 19.5952C17.7219 19.472 17.8256 19.1417 17.8787 18.6421C17.9317 18.1425 18.4777 15.3298 18.5838 14.7437C18.6898 14.1575 18.5987 14.1518 18.4954 13.9819C18.3922 13.8119 17.1171 13.4915 16.3708 13.2809C15.6245 13.0702 13.9693 13.2927 13.3859 13.3487C12.8026 13.4047 12.7528 13.4903 12.9454 13.5803C13.138 13.6702 14.6795 14.2483 15.48 14.5544C16.2806 14.8606 17.4026 15.2 17.5184 15.8527C17.6342 16.5056 16.9384 17.4867 16.5523 18.222C16.1659 18.9572 16.1557 19.0444 16.1825 19.342C16.2093 19.6396 17.5183 20.3976 17.8053 20.5934C18.0923 20.7892 19.6455 21.6512 19.6455 22.1313C19.6455 22.6114 18.1429 23.8662 17.6688 24.1778C17.1947 24.4895 15.9053 25.1717 15.3563 25.2757C14.8073 25.3797 13.9506 24.7506 13.4505 23.8078C12.9504 22.8651 13.4001 21.9357 13.7048 21.2052C14.0097 20.4748 13.4915 20.069 13.2425 19.8013C12.9937 19.5337 11.0551 17.4495 10.6113 16.9722C10.1673 16.4951 9.72601 16.2527 9.72601 15.3347C9.72601 14.4167 13.2353 10.1216 13.2353 10.1216C13.2353 10.1216 16.1965 10.6942 16.5958 10.6942C16.995 10.6942 17.8601 10.3574 18.6586 10.0879C19.4572 9.81841 19.9895 9.81641 19.9895 9.81641C19.9895 9.81641 20.5218 9.81841 21.3204 10.0879C22.1189 10.3574 22.984 10.6942 23.3833 10.6942C23.7825 10.6942 26.7438 10.1216 26.7438 10.1216ZM24.113 26.5516C24.3302 26.6893 24.1977 26.9489 23.9998 27.0905C23.8019 27.2322 21.1428 29.317 20.8848 29.5475C20.6266 29.778 20.2473 30.1586 19.9895 30.1586C19.7317 30.1586 19.3523 29.778 19.0943 29.5475C18.8362 29.317 16.177 27.2322 15.9792 27.0905C15.7813 26.9489 15.6488 26.6893 15.866 26.5516C16.0833 26.4139 16.7629 26.0665 17.7007 25.5751C18.6384 25.0838 19.8071 24.6661 19.9895 24.6661C20.1719 24.6661 21.3405 25.0838 22.2783 25.5751C23.2161 26.0665 23.8957 26.4139 24.113 26.5516Z" fill="white"/>
+<path d="M27.509 8.13398L24.7807 5H19.9895H15.1983L12.47 8.13398C12.47 8.13398 10.0744 7.46023 8.94318 8.60558C8.94318 8.60558 12.1373 8.31367 13.2353 10.1216C13.2353 10.1216 16.1965 10.6942 16.5958 10.6942C16.995 10.6942 17.8601 10.3574 18.6586 10.0879C19.4572 9.81841 19.9895 9.81641 19.9895 9.81641C19.9895 9.81641 20.5218 9.81841 21.3204 10.0879C22.1189 10.3574 22.984 10.6942 23.3833 10.6942C23.7825 10.6942 26.7438 10.1216 26.7438 10.1216C27.8418 8.31367 31.0358 8.60558 31.0358 8.60558C29.9046 7.46023 27.509 8.13398 27.509 8.13398Z" fill="url(#paint1_linear_13571_129901)"/>
+<defs>
+<linearGradient id="paint0_linear_13571_129901" x1="6.68066" y1="1607.37" x2="2668.45" y2="1607.37" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5500"/>
+<stop offset="0.409877" stop-color="#FF5500"/>
+<stop offset="0.581981" stop-color="#FF2000"/>
+<stop offset="1" stop-color="#FF2000"/>
+</linearGradient>
+<linearGradient id="paint1_linear_13571_129901" x1="56.4079" y1="293.731" x2="2218.22" y2="293.731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF452A"/>
+<stop offset="1" stop-color="#FF2000"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/wallets/browser-wallet-dark.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#4C82FB" fill-opacity="0.24"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.454 11.6305C14.6973 12.4936 11.8284 15.6822 11.4439 19.5998H15.6425C15.8586 16.7339 16.8329 13.9847 18.454 11.6305ZM22.546 11.6305C24.1671 13.9847 25.1413 16.7339 25.3574 19.5998H29.5561C29.1715 15.6822 26.3027 12.4936 22.546 11.6305ZM23.5517 19.5998C23.3127 16.7852 22.2508 14.103 20.5 11.8882C18.7491 14.103 17.6872 16.7852 17.4483 19.5998H23.5517ZM17.4483 21.3998H23.5516C23.3126 24.2143 22.2507 26.8963 20.5 29.111C18.7492 26.8963 17.6873 24.2143 17.4483 21.3998ZM15.6426 21.3998H11.4439C11.8286 25.3172 14.6974 28.5056 18.454 29.3687C16.833 27.0146 15.8587 24.2656 15.6426 21.3998ZM22.546 29.3687C24.167 27.0146 25.1412 24.2656 25.3574 21.3998H29.556C29.1713 25.3172 26.3026 28.5056 22.546 29.3687ZM20.5 31.3996C14.4801 31.3996 9.59998 26.5195 9.59998 20.4996C9.59998 14.4797 14.4801 9.59961 20.5 9.59961C26.5199 9.59961 31.4 14.4797 31.4 20.4996V20.4998C31.3999 26.5196 26.5198 31.3996 20.5 31.3996Z" fill="#4C82FB"/>
+</svg>

src/assets/wallets/browser-wallet-light.svg

@@ -0,0 +1,5 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="40" height="40" fill="#FB118E" fill-opacity="0.12"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.454 12.6305C15.6973 13.4936 12.8284 16.6822 12.4439 20.5998H16.6425C16.8586 17.7339 17.8329 14.9847 19.454 12.6305ZM23.546 12.6305C25.1671 14.9847 26.1413 17.7339 26.3574 20.5998H30.5561C30.1715 16.6822 27.3027 13.4936 23.546 12.6305ZM24.5517 20.5998C24.3127 17.7852 23.2508 15.103 21.5 12.8882C19.7491 15.103 18.6872 17.7852 18.4483 20.5998H24.5517ZM18.4483 22.3998H24.5516C24.3126 25.2143 23.2507 27.8963 21.5 30.111C19.7492 27.8963 18.6873 25.2143 18.4483 22.3998ZM16.6426 22.3998H12.4439C12.8286 26.3172 15.6974 29.5056 19.454 30.3687C17.833 28.0146 16.8587 25.2656 16.6426 22.3998ZM23.546 30.3687C25.167 28.0146 26.1412 25.2656 26.3574 22.3998H30.556C30.1713 26.3172 27.3026 29.5056 23.546 30.3687ZM21.5 32.3996C15.4801 32.3996 10.6 27.5195 10.6 21.4996C10.6 15.4797 15.4801 10.5996 21.5 10.5996C27.5199 10.5996 32.4 15.4797 32.4 21.4996V21.4998C32.3999 27.5196 27.5198 32.3996 21.5 32.3996Z" fill="#FB118E"/>
+<rect x="0.75" y="0.75" width="40.5" height="40.5" stroke="#5D6785" stroke-opacity="0.24" stroke-width="0.5"/>
+</svg>

src/assets/wallets/coinbase-icon.svg

@@ -0,0 +1,13 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13571_129878)">
+<rect width="40" height="40" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3312 0H31.6672C36.2704 0 40 4.0128 40 8.9632V31.0368C40 35.9872 36.2704 40 31.6688 40H8.3312C3.7296 40 0 35.9872 0 31.0368V8.9632C0 4.0128 3.7296 0 8.3312 0Z" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9989 5.79443C27.8453 5.79443 34.2053 12.1544 34.2053 20.0008C34.2053 27.8472 27.8453 34.2072 19.9989 34.2072C12.1525 34.2072 5.79254 27.8472 5.79254 20.0008C5.79254 12.1544 12.1525 5.79443 19.9989 5.79443Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 15.459H23.4973C24.0733 15.459 24.5389 15.9614 24.5389 16.579V23.419C24.5389 24.0382 24.0717 24.539 23.4973 24.539H16.5005C15.9245 24.539 15.4589 24.0366 15.4589 23.419V16.579C15.4589 15.9614 15.9261 15.459 16.5005 15.459Z" fill="#0052FF"/>
+</g>
+<defs>
+<clipPath id="clip0_13571_129878">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/wallets/ledger-icon.svg

@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="black"/>
+<g clip-path="url(#clip0_13605_128411)">
+<path d="M8 24.9635V30.8974H17.0274V29.5815H9.31532V24.9635H8ZM30.6847 24.9635V29.5815H22.9726V30.8971H32V24.9635H30.6847ZM17.0405 15.9334V24.9632H22.9726V23.7765H18.3559V15.9334H17.0405ZM8 9.99951V15.9334H9.31532V11.3152H17.0274V9.99951H8ZM22.9726 9.99951V11.3152H30.6847V15.9334H32V9.99951H22.9726Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13605_128411">
+<rect width="24" height="20.8979" fill="white" transform="translate(8 10)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/wallets/metamask-icon.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#F7F9FB"/>
+<path d="M32.6877 6.6665L22.0555 14.5632L24.0216 9.90427L32.6877 6.6665Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.1433 6.6665L18.6901 14.638L16.8201 9.90427L8.1433 6.6665ZM28.8628 24.9711L26.0311 29.3095L32.0899 30.9764L33.8317 25.0672L28.8628 24.9711ZM7.0213 25.0672L8.75238 30.9764L14.8112 29.3095L11.9795 24.9711L7.0213 25.0672Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.4697 17.641L12.7814 20.1949L18.7974 20.462L18.5837 13.9972L14.4697 17.641ZM26.3629 17.641L22.1955 13.9224L22.0565 20.462L28.0619 20.1949L26.3629 17.641ZM14.8117 29.3097L18.4234 27.5466L15.3032 25.1103L14.8117 29.3097ZM22.4092 27.5466L26.0316 29.3097L25.5294 25.1103L22.4092 27.5466Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.0316 29.3095L22.4091 27.5464L22.6976 29.9079L22.6656 30.9017L26.0316 29.3095ZM14.8116 29.3095L18.1776 30.9017L18.1562 29.9079L18.4233 27.5464L14.8116 29.3095Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.2319 23.5497L15.2185 22.6628L17.345 21.6904L18.2319 23.5497ZM22.6023 23.5497L23.4892 21.6904L25.6264 22.6628L22.6023 23.5497Z" fill="#233447" stroke="#233447" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8106 29.3092L15.3236 24.9708L11.9789 25.067L14.8106 29.3092ZM25.5177 24.9708L26.0306 29.3092L28.8623 25.067L25.5177 24.9708ZM28.0609 20.1943L22.0555 20.4615L22.6112 23.5496L23.4981 21.6903L25.6352 22.6627L28.0609 20.1943ZM15.2167 22.6627L17.3538 21.6903L18.2301 23.5496L18.7964 20.4615L12.7804 20.1943L15.2167 22.6627Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7814 20.1943L15.3032 25.1097L15.2177 22.6627L12.7814 20.1943ZM25.6362 22.6627L25.5294 25.1097L28.0619 20.1943L25.6362 22.6627ZM18.7974 20.4615L18.2311 23.5496L18.9363 27.1935L19.0966 22.3956L18.7974 20.4615ZM22.0565 20.4615L21.768 22.3849L21.8963 27.1935L22.6122 23.5496L22.0565 20.4615Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.613 23.5495L21.8971 27.1933L22.41 27.546L25.5302 25.1096L25.637 22.6626L22.613 23.5495ZM15.2185 22.6626L15.304 25.1096L18.4242 27.546L18.9371 27.1933L18.2319 23.5495L15.2185 22.6626Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6656 30.9022L22.6976 29.9085L22.4305 29.6734H18.402L18.1562 29.9085L18.1776 30.9022L14.8116 29.3101L15.987 30.2718L18.3699 31.9281H22.4625L24.8561 30.2718L26.0316 29.3101L22.6656 30.9022Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.409 27.5465L21.8961 27.1938H18.9362L18.4233 27.5465L18.1561 29.908L18.4019 29.6729H22.4304L22.6975 29.908L22.409 27.5465Z" fill="#161616" stroke="#161616" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.1371 15.0761L34.0454 10.7164L32.6883 6.6665L22.4087 14.2961L26.3624 17.6407L31.951 19.2756L33.1905 17.833L32.6562 17.4484L33.5111 16.6683L32.8486 16.1554L33.7034 15.5036L33.1371 15.0761ZM6.79688 10.7164L7.70516 15.0761L7.12813 15.5036L7.98299 16.1554L7.33116 16.6683L8.18601 17.4484L7.65173 17.833L8.88058 19.2756L14.4692 17.6407L18.4229 14.2961L8.14327 6.6665L6.79688 10.7164Z" fill="#763D16" stroke="#763D16" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.951 19.2761L26.3624 17.6412L28.0614 20.1951L25.5289 25.1105L28.8628 25.0678H33.8317L31.951 19.2761ZM14.4692 17.6412L8.88061 19.2761L7.0213 25.0678H11.9795L15.3027 25.1105L12.7809 20.1951L14.4692 17.6412ZM22.0561 20.4622L22.4087 14.2966L24.0329 9.90479H16.8201L18.4229 14.2966L18.7969 20.4622L18.9252 22.407L18.9358 27.1942H21.8958L21.9171 22.407L22.0561 20.4622Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/wallets/rabby-icon.svg

@@ -0,0 +1,25 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="white"/>
+<path d="M35.1513 21.043C36.2547 18.5678 30.7674 11.6192 25.5187 8.75633C22.2085 6.51967 18.7789 6.81789 18.0632 7.80202C16.5423 9.94921 23.133 11.7982 27.5466 13.9155C26.5923 14.3331 25.6977 15.0786 25.1907 16.0031C23.5505 14.2138 19.942 12.663 15.7073 13.9155C12.8443 14.7506 10.4884 16.7486 9.5639 19.7309C9.35514 19.6414 9.08674 19.5817 8.84817 19.5817C7.86404 19.5817 7.05884 20.3869 7.05884 21.3711C7.05884 22.3552 7.86404 23.1604 8.84817 23.1604C9.0271 23.1604 9.59372 23.0411 9.59372 23.0411L18.7789 23.1008C15.1108 28.9459 12.1882 29.7809 12.1882 30.7949C12.1882 31.8088 14.9617 31.5404 16.0055 31.1527C21.0156 29.3634 26.3836 23.727 27.3081 22.1166C31.1849 22.6236 34.4356 22.6534 35.1513 21.043Z" fill="url(#paint0_linear_13571_129896)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5765 13.915C27.7853 13.8256 27.7554 13.5273 27.6958 13.2888C27.5765 12.752 25.3398 10.5451 23.2523 9.56101C20.3894 8.21901 18.3018 8.27865 18.0036 8.90492C18.5702 10.0978 21.284 11.2012 24.0873 12.3941C25.2504 12.8713 26.4731 13.3782 27.5765 13.915Z" fill="url(#paint1_linear_13571_129896)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9382 25.9043C23.3715 25.6955 22.7155 25.4868 21.9699 25.3078C22.7453 23.9062 22.9242 21.7888 22.1787 20.4767C21.1349 18.6277 19.8227 17.6436 16.751 17.6436C15.081 17.6436 10.548 18.2102 10.4586 21.9976C10.4586 22.3853 10.4586 22.7431 10.4884 23.101H18.7789C17.6755 24.8605 16.6317 26.1727 15.7073 27.1568C16.8107 27.4252 17.7053 27.6638 18.5404 27.9024C19.3157 28.1111 20.0613 28.29 20.8068 28.4988C21.9401 27.6638 23.0137 26.7691 23.9382 25.9043Z" fill="url(#paint2_linear_13571_129896)"/>
+<path d="M9.44462 22.6539C9.77266 25.5168 11.4129 26.6501 14.753 26.9781C18.093 27.3062 20.0017 27.0974 22.5365 27.3062C24.6539 27.4851 26.5625 28.5885 27.2484 28.2008C27.8747 27.8728 27.5168 26.6501 26.6818 25.8747C25.5784 24.8607 24.0575 24.1748 21.4033 23.9064C21.9401 22.4452 21.791 20.3874 20.956 19.284C19.7631 17.6736 17.5562 16.9579 14.753 17.2561C11.8304 17.614 9.02711 19.0753 9.44462 22.6539Z" fill="url(#paint3_linear_13571_129896)"/>
+<defs>
+<linearGradient id="paint0_linear_13571_129896" x1="15.4039" y1="18.7336" x2="34.9512" y2="24.2768" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8797FF"/>
+<stop offset="1" stop-color="#AAA8FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_13571_129896" x1="30.9339" y1="19.1707" x2="16.8297" y2="5.03193" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B22A0"/>
+<stop offset="1" stop-color="#5156D8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_13571_129896" x1="24.3273" y1="26.4153" x2="10.7786" y2="18.6257" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B1E8F"/>
+<stop offset="1" stop-color="#6A6FFB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_13571_129896" x1="14.4596" y1="20.3417" x2="23.6175" y2="31.9778" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8898FF"/>
+<stop offset="0.9839" stop-color="#5F47F1"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/wallets/trustwallet-icon.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13571_129905)">
+<rect width="40" height="40" fill="#3375BB"/>
+<mask id="mask0_13571_129905" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="-1" width="40" height="41">
+<path d="M39.6306 -0.000488281H0.246033V39.3841H39.6306V-0.000488281Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_13571_129905)">
+<path d="M19.9383 39.3841C30.8141 39.3841 39.6306 30.5676 39.6306 19.6918C39.6306 8.81607 30.8141 -0.000488281 19.9383 -0.000488281C9.06258 -0.000488281 0.246033 8.81607 0.246033 19.6918C0.246033 30.5676 9.06258 39.3841 19.9383 39.3841Z" fill="#3375BB"/>
+<path d="M20.0783 8.61572C23.97 11.8659 28.4329 11.6655 29.708 11.6655C29.4291 30.1503 27.3039 26.4848 20.0783 31.668C12.8527 26.4848 10.7408 30.1503 10.4619 11.6655C11.7237 11.6655 16.1865 11.8659 20.0783 8.61572Z" stroke="white" stroke-width="2.46154" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_13571_129905">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/wallets/walletconnect-icon.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#3396FF"/>
+<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3396FF"/>
+<path d="M12.2327 14.8836C16.5225 10.7003 23.4779 10.7003 27.7677 14.8836L28.284 15.3871C28.4985 15.5962 28.4985 15.9353 28.284 16.1445L26.5179 17.8668C26.4106 17.9713 26.2368 17.9713 26.1295 17.8668L25.419 17.1739C22.4263 14.2555 17.5741 14.2555 14.5813 17.1739L13.8204 17.9159C13.7132 18.0205 13.5393 18.0205 13.4321 17.9159L11.666 16.1936C11.4514 15.9845 11.4514 15.6453 11.666 15.4362L12.2327 14.8836ZM31.4203 18.4454L32.9922 19.9782C33.2067 20.1874 33.2067 20.5265 32.9922 20.7356L25.9045 27.6473C25.69 27.8565 25.3422 27.8565 25.1277 27.6473L20.0973 22.742C20.0437 22.6896 19.9568 22.6896 19.9031 22.742L14.8728 27.6473C14.6583 27.8565 14.3106 27.8565 14.096 27.6473L7.00816 20.7355C6.79367 20.5264 6.79367 20.1873 7.00816 19.9782L8.58004 18.4453C8.79454 18.2362 9.1423 18.2362 9.35679 18.4453L14.3873 23.3508C14.4409 23.4031 14.5278 23.4031 14.5814 23.3508L19.6117 18.4453C19.8262 18.2361 20.1739 18.2361 20.3885 18.4453L25.4189 23.3508C25.4726 23.4031 25.5595 23.4031 25.6131 23.3508L30.6436 18.4454C30.858 18.2362 31.2058 18.2362 31.4203 18.4454Z" fill="white"/>
+</svg>

src/components/About/AboutFooter.tsx

@@ -1,5 +1,6 @@
 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
@@ -137,6 +138,7 @@ const LogoSectionContent = () => {
 }
 
 export const AboutFooter = () => {
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
   return (
     <Footer>
       <LogoSectionLeft>
@@ -148,7 +150,7 @@ export const AboutFooter = () => {
           <LinkGroupTitle>App</LinkGroupTitle>
           <TextLink to="/swap">Swap</TextLink>
           <TextLink to="/tokens">Tokens</TextLink>
-          <TextLink to="/nfts">NFTs</TextLink>
+          {!shouldDisableNFTRoutes && <TextLink to="/nfts">NFTs</TextLink>}
           <TextLink to="/pools">Pools</TextLink>
         </LinkGroup>
         <LinkGroup>

src/components/About/Card.tsx

@@ -10,14 +10,14 @@ export enum CardType {
   Secondary = 'Secondary',
 }
 
-const StyledCard = styled.div<{ isDarkMode: boolean; backgroundImgSrc?: string; type: CardType }>`
+const StyledCard = styled.div<{ $isDarkMode: boolean; $backgroundImgSrc?: string; $type: CardType }>`
   display: flex;
-  background: ${({ isDarkMode, backgroundImgSrc, type, theme }) =>
-    isDarkMode
-      ? `${type === CardType.Primary ? theme.backgroundModule : theme.backgroundSurface} ${
-          backgroundImgSrc ? ` url(${backgroundImgSrc})` : ''
+  background: ${({ $isDarkMode, $backgroundImgSrc, $type, theme }) =>
+    $isDarkMode
+      ? `${$type === CardType.Primary ? theme.backgroundModule : theme.backgroundSurface} ${
+          $backgroundImgSrc ? ` url(${$backgroundImgSrc})` : ''
         }`
-      : `${type === CardType.Primary ? 'white' : theme.backgroundModule} url(${backgroundImgSrc})`};
+      : `${$type === CardType.Primary ? 'white' : theme.backgroundModule} url(${$backgroundImgSrc})`};
   background-size: auto 100%;
   background-position: right;
   background-repeat: no-repeat;
@@ -30,15 +30,15 @@ const StyledCard = styled.div<{ isDarkMode: boolean; backgroundImgSrc?: string;
   padding: 24px;
   height: 212px;
   border-radius: 24px;
-  border: 1px solid ${({ theme, type }) => (type === CardType.Primary ? 'transparent' : theme.backgroundOutline)};
+  border: 1px solid ${({ theme, $type }) => ($type === CardType.Primary ? 'transparent' : theme.backgroundOutline)};
   box-shadow: 0px 10px 24px 0px rgba(51, 53, 72, 0.04);
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} border`};
 
   &:hover {
-    border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? theme.backgroundInteractive : theme.textTertiary)};
+    border: 1px solid ${({ theme, $isDarkMode }) => ($isDarkMode ? theme.backgroundInteractive : theme.textTertiary)};
   }
   @media screen and (min-width: ${BREAKPOINTS.sm}px) {
-    height: ${({ backgroundImgSrc }) => (backgroundImgSrc ? 360 : 260)}px;
+    height: ${({ $backgroundImgSrc }) => ($backgroundImgSrc ? 360 : 260)}px;
   }
   @media screen and (min-width: ${BREAKPOINTS.xl}px) {
     padding: 32px;
@@ -125,14 +125,14 @@ const Card = ({
   return (
     <TraceEvent events={[BrowserEvent.onClick]} name={SharedEventName.ELEMENT_CLICKED} element={elementName}>
       <StyledCard
-        type={type}
         as={external ? 'a' : Link}
         to={external ? undefined : to}
         href={external ? to : undefined}
         target={external ? '_blank' : undefined}
         rel={external ? 'noopenener noreferrer' : undefined}
-        isDarkMode={isDarkMode}
-        backgroundImgSrc={backgroundImgSrc}
+        $backgroundImgSrc={backgroundImgSrc}
+        $isDarkMode={isDarkMode}
+        $type={type}
       >
         <TitleRow>
           <CardTitle>{title}</CardTitle>

src/components/AccountDetails/TransactionSummary.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Fraction, TradeType } from '@uniswap/sdk-core'
+import { BigNumber } from 'ethers/lib/ethers'
 import JSBI from 'jsbi'
 
 import { nativeOnChain } from '../../constants/tokens'
@@ -87,7 +88,11 @@ function SubmitProposalTransactionSummary() {
 function ApprovalSummary({ info }: { info: ApproveTransactionInfo }) {
   const token = useToken(info.tokenAddress)
 
-  return <Trans>Approve {token?.symbol}</Trans>
+  return BigNumber.from(info.amount)?.eq(0) ? (
+    <Trans>Revoke {token?.symbol}</Trans>
+  ) : (
+    <Trans>Approve {token?.symbol}</Trans>
+  )
 }
 
 function VoteSummary({ info }: { info: VoteTransactionInfo }) {

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -10,28 +10,28 @@ import { AutoRow } from 'components/Row'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
 import Tooltip from 'components/Tooltip'
-import { useGetConnection } from 'connection'
+import { getConnection } from 'connection'
 import { usePortfolioBalancesQuery } from 'graphql/data/__generated__/types-and-hooks'
-import { useAtomValue } from 'jotai/utils'
+import { GQL_MAINNET_CHAINS } from 'graphql/data/util'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useState } from 'react'
-import { ArrowDownRight, ArrowUpRight, Copy, CreditCard, IconProps, Info, Power, Settings } from 'react-feather'
+import { ArrowDownRight, ArrowUpRight, CreditCard, IconProps, Info, LogOut, Settings } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import styled, { useTheme } from 'styled-components/macro'
 import { CopyHelper, ExternalLink, ThemedText } from 'theme'
+import { shortenAddress } from 'utils'
 
-import { shortenAddress } from '../../nft/utils/address'
 import { useCloseModal, useFiatOnrampAvailability, useOpenModal, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import StatusIcon from '../Identicon/StatusIcon'
 import { useToggleAccountDrawer } from '.'
-import IconButton, { IconHoverText } from './IconButton'
+import IconButton, { IconHoverText, IconWithConfirmTextButton } from './IconButton'
 import MiniPortfolio from './MiniPortfolio'
 import { portfolioFadeInAnimation } from './MiniPortfolio/PortfolioRow'
 
@@ -40,6 +40,7 @@ const AuthenticatedHeaderWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
+  overflow: auto;
 `
 
 const HeaderButton = styled(ThemeButton)`
@@ -103,7 +104,8 @@ const FiatOnrampAvailabilityExternalLink = styled(ExternalLink)`
 const StatusWrapper = styled.div`
   display: inline-block;
   width: 70%;
-  padding-right: 4px;
+  max-width: 70%;
+  padding-right: 14px;
   display: inline-flex;
 `
 
@@ -134,9 +136,6 @@ const HeaderWrapper = styled.div`
 `
 
 const CopyText = styled(CopyHelper).attrs({
-  InitialIcon: Copy,
-  CopiedIcon: Copy,
-  gap: 4,
   iconSize: 14,
   iconPosition: 'right',
 })``
@@ -158,6 +157,10 @@ export function PortfolioArrow({ change, ...rest }: { change: number } & IconPro
   )
 }
 
+const LogOutCentered = styled(LogOut)`
+  transform: translateX(2px);
+`
+
 export default function AuthenticatedHeader({ account, openSettings }: { account: string; openSettings: () => void }) {
   const { connector, ENSName } = useWeb3React()
   const dispatch = useAppDispatch()
@@ -168,11 +171,10 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
-  const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
 
   const unclaimedAmount: CurrencyAmount<Token> | undefined = useUserUnclaimedAmount(account)
   const isUnclaimed = useUserHasAvailableClaim(account)
-  const getConnection = useGetConnection()
   const connection = getConnection(connector)
   const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
   const openNftModal = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
@@ -225,41 +227,51 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
   const closeFiatOnrampUnavailableTooltip = useCallback(() => setShow(false), [setShow])
 
   const { data: portfolioBalances } = usePortfolioBalancesQuery({
-    variables: { ownerAddress: account ?? '' },
+    variables: { ownerAddress: account ?? '', chains: GQL_MAINNET_CHAINS },
     fetchPolicy: 'cache-only', // PrefetchBalancesWrapper handles balance fetching/staleness; this component only reads from cache
   })
+
   const portfolio = portfolioBalances?.portfolios?.[0]
   const totalBalance = portfolio?.tokensTotalDenominatedValue?.value
   const absoluteChange = portfolio?.tokensTotalDenominatedValueChange?.absolute?.value
   const percentChange = portfolio?.tokensTotalDenominatedValueChange?.percentage?.value
+  const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false)
 
   return (
     <AuthenticatedHeaderWrapper>
       <HeaderWrapper>
         <StatusWrapper>
-          <StatusIcon connection={connection} size={40} />
+          <StatusIcon account={account} connection={connection} size={40} />
           {account && (
             <AccountNamesWrapper>
               <ThemedText.SubHeader>
-                <CopyText toCopy={ENSName ?? account}>{ENSName ?? shortenAddress(account, 4, 4)}</CopyText>
+                <CopyText toCopy={ENSName ?? account}>{ENSName ?? shortenAddress(account)}</CopyText>
               </ThemedText.SubHeader>
               {/* Displays smaller view of account if ENS name was rendered above */}
               {ENSName && (
                 <ThemedText.BodySmall color="textTertiary">
-                  <CopyText toCopy={account}>{shortenAddress(account, 4, 4)}</CopyText>
+                  <CopyText toCopy={account}>{shortenAddress(account)}</CopyText>
                 </ThemedText.BodySmall>
               )}
             </AccountNamesWrapper>
           )}
         </StatusWrapper>
         <IconContainer>
-          <IconButton data-testid="wallet-settings" onClick={openSettings} Icon={Settings} />
+          {!showDisconnectConfirm && (
+            <IconButton data-testid="wallet-settings" onClick={openSettings} Icon={Settings} />
+          )}
           <TraceEvent
             events={[BrowserEvent.onClick]}
             name={SharedEventName.ELEMENT_CLICKED}
             element={InterfaceElementName.DISCONNECT_WALLET_BUTTON}
           >
-            <IconButton data-testid="wallet-disconnect" onClick={disconnect} Icon={Power} />
+            <IconWithConfirmTextButton
+              data-testid="wallet-disconnect"
+              onConfirm={disconnect}
+              onShowConfirm={setShowDisconnectConfirm}
+              Icon={LogOutCentered}
+              text="Disconnect"
+            />
           </TraceEvent>
         </IconContainer>
       </HeaderWrapper>

src/components/AccountDrawer/IconButton.tsx

@@ -1,5 +1,9 @@
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import { Icon } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
+import useResizeObserver from 'use-resize-observer'
+
+import Row from '../Row'
 
 export const IconHoverText = styled.span`
   color: ${({ theme }) => theme.textPrimary};
@@ -13,12 +17,17 @@ export const IconHoverText = styled.span`
   left: 10px;
 `
 
+const widthTransition = `width ease-in 80ms`
+
 const IconStyles = css`
   background-color: ${({ theme }) => theme.backgroundInteractive};
+  transition: ${widthTransition};
   border-radius: 12px;
-  display: inline-block;
+  display: flex;
+  padding: 0;
   cursor: pointer;
   position: relative;
+  overflow: hidden;
   height: 32px;
   width: 32px;
   color: ${({ theme }) => theme.textPrimary};
@@ -28,7 +37,7 @@ const IconStyles = css`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast} background-color ${timing.in}`};
+    }) => `${duration.fast} background-color ${timing.in}, ${widthTransition}`};
 
     ${IconHoverText} {
       opacity: 1;
@@ -36,7 +45,7 @@ const IconStyles = css`
   }
   :active {
     background-color: ${({ theme }) => theme.backgroundSurface};
-    transition: background-color 50ms linear;
+    transition: background-color 50ms linear, ${widthTransition};
   }
 `
 
@@ -51,27 +60,29 @@ const IconBlockButton = styled.button`
 `
 
 const IconWrapper = styled.span`
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
+  margin: auto;
+  display: flex;
 `
 interface BaseProps {
   Icon: Icon
+  children?: React.ReactNode
 }
+
 interface IconLinkProps extends React.ComponentPropsWithoutRef<'a'>, BaseProps {}
 interface IconButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseProps {}
 
-const IconBlock = (props: React.ComponentPropsWithoutRef<'a' | 'button'>) => {
+type IconBlockProps = React.ComponentPropsWithoutRef<'a' | 'button'>
+
+const IconBlock = forwardRef<HTMLAnchorElement | HTMLDivElement, IconBlockProps>(function IconBlock(props, ref) {
   if ('href' in props) {
-    return <IconBlockLink {...props} />
+    return <IconBlockLink ref={ref as React.ForwardedRef<HTMLAnchorElement>} {...props} />
   }
   // ignoring 'button' 'type' conflict between React and styled-components
   // @ts-ignore
-  return <IconBlockButton {...props} />
-}
+  return <IconBlockButton ref={ref} {...props} />
+})
 
 const IconButton = ({ Icon, ...rest }: IconButtonProps | IconLinkProps) => (
   <IconBlock {...rest}>
@@ -81,4 +92,119 @@ const IconButton = ({ Icon, ...rest }: IconButtonProps | IconLinkProps) => (
   </IconBlock>
 )
 
+type IconWithTextProps = (IconButtonProps | IconLinkProps) & {
+  text: string
+  onConfirm?: () => void
+  onShowConfirm?: (on: boolean) => void
+}
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: min-content;
+`
+
+const TextHide = styled.div`
+  overflow: hidden;
+`
+
+/**
+ * Allows for hiding and showing some text next to an IconButton
+ * Note that for width transitions to animate in CSS we need to always specify the width (no auto)
+ * so there's resize observing and measuring going on here.
+ */
+export const IconWithConfirmTextButton = ({
+  Icon,
+  text,
+  onConfirm,
+  onShowConfirm,
+  onClick,
+  ...rest
+}: IconWithTextProps) => {
+  const [showText, setShowTextWithoutCallback] = useState(false)
+  const frameObserver = useResizeObserver<HTMLElement>()
+  const hiddenObserver = useResizeObserver<HTMLElement>()
+
+  const setShowText = useCallback(
+    (val: boolean) => {
+      setShowTextWithoutCallback(val)
+      onShowConfirm?.(val)
+    },
+    [onShowConfirm]
+  )
+
+  const dimensionsRef = useRef({
+    frame: 0,
+    hidden: 0,
+  })
+  const dimensions = (() => {
+    // once opened, we avoid updating it to prevent constant resize loop
+    if (!showText) {
+      dimensionsRef.current = { frame: frameObserver.width || 0, hidden: hiddenObserver.width || 0 }
+    }
+    return dimensionsRef.current
+  })()
+
+  // keyboard action to cancel
+  useEffect(() => {
+    if (!showText) return
+    const isClient = typeof window !== 'undefined'
+    if (!isClient) return
+    if (!showText) return
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setShowText(false)
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    window.addEventListener('keydown', keyHandler, { capture: true })
+    return () => {
+      window.removeEventListener('keydown', keyHandler, { capture: true })
+    }
+  }, [setShowText, showText])
+
+  const xPad = showText ? 12 : 0
+  const width = showText ? dimensions.frame + dimensions.hidden + xPad : 32
+
+  return (
+    <IconBlock
+      ref={frameObserver.ref}
+      {...rest}
+      style={{
+        width,
+        paddingLeft: xPad,
+        paddingRight: xPad,
+      }}
+      // @ts-ignore MouseEvent is valid, its a subset of the two mouse events,
+      // even manually typing this all out more specifically it still gets mad about any casting for some reason
+      onClick={(e: MouseEvent<HTMLAnchorElement>) => {
+        if (showText) {
+          onConfirm?.()
+        } else {
+          onClick?.(e)
+          setShowText(!showText)
+        }
+      }}
+    >
+      <Row height="100%" gap="xs">
+        <IconWrapper>
+          <Icon strokeWidth={1.5} size={16} />
+        </IconWrapper>
+
+        {/* this outer div is so we can cut it off but keep the inner text width full-width so we can measure it */}
+        <TextHide
+          style={{
+            maxWidth: showText ? dimensions.hidden : 0,
+            minWidth: showText ? dimensions.hidden : 0,
+          }}
+        >
+          <TextWrapper ref={hiddenObserver.ref}>{text}</TextWrapper>
+        </TextHide>
+      </Row>
+    </IconBlock>
+  )
+}
+
 export default IconButton

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -7,6 +7,7 @@ import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 import useENSName from 'hooks/useENSName'
 import styled from 'styled-components/macro'
 import { EllipsisStyle, ThemedText } from 'theme'
+import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import { PortfolioLogo } from '../PortfolioLogo'
@@ -52,7 +53,7 @@ export function ActivityRow({
         descriptor={
           <ActivityRowDescriptor color="textSecondary">
             {descriptor}
-            {ENSName ?? otherAccount}
+            {ENSName ?? shortenAddress(otherAccount)}
           </ActivityRowDescriptor>
         }
         right={

src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.test.ts

@@ -1,6 +1,6 @@
-import { SupportedChainId, Token, TradeType as MockTradeType } from '@uniswap/sdk-core'
+import { ChainId, Token, TradeType as MockTradeType } from '@uniswap/sdk-core'
 import { PERMIT2_ADDRESS } from '@uniswap/universal-router-sdk'
-import { DAI as MockDAI, nativeOnChain, USDC_MAINNET as MockUSDC_MAINNET } from 'constants/tokens'
+import { DAI as MockDAI, nativeOnChain, USDC_MAINNET as MockUSDC_MAINNET, USDT as MockUSDT } from 'constants/tokens'
 import { TransactionStatus as MockTxStatus } from 'graphql/data/__generated__/types-and-hooks'
 import { ChainTokenMap } from 'hooks/Tokens'
 import {
@@ -46,10 +46,11 @@ function mockSwapInfo(
 
 const mockAccount1 = '0x000000000000000000000000000000000000000001'
 const mockAccount2 = '0x000000000000000000000000000000000000000002'
-const mockChainId = SupportedChainId.MAINNET
+const mockChainId = ChainId.MAINNET
 const mockSpenderAddress = PERMIT2_ADDRESS[mockChainId]
 const mockCurrencyAmountRaw = '1000000000000000000'
 const mockCurrencyAmountRawUSDC = '1000000'
+const mockApprovalAmountRaw = '10000000'
 
 function mockHash(id: string, status: MockTxStatus = MockTxStatus.Confirmed) {
   return id + status
@@ -93,6 +94,7 @@ const mockTokenAddressMap: ChainTokenMap = {
   [mockChainId]: {
     [MockDAI.address]: MockDAI,
     [MockUSDC_MAINNET.address]: MockUSDC_MAINNET,
+    [MockUSDT.address]: MockUSDT,
   },
 }
 
@@ -142,9 +144,19 @@ jest.mock('../../../../state/transactions/hooks', () => {
             type: MockTxType.APPROVAL,
             tokenAddress: MockDAI.address,
             spender: mockSpenderAddress,
+            amount: mockApprovalAmountRaw,
           },
           '0xapproval'
         ),
+        ...mockMultiStatus(
+          {
+            type: MockTxType.APPROVAL,
+            tokenAddress: MockUSDT.address,
+            spender: mockSpenderAddress,
+            amount: '0',
+          },
+          '0xrevoke_approval'
+        ),
         ...mockMultiStatus(
           {
             type: MockTxType.WRAP,
@@ -234,7 +246,7 @@ describe('parseLocalActivity', () => {
         status: 1,
       },
     } as TransactionDetails
-    const chainId = SupportedChainId.MAINNET
+    const chainId = ChainId.MAINNET
     expect(parseLocalActivity(details, chainId, mockTokenAddressMap)).toEqual({
       chainId: 1,
       currencies: [MockUSDC_MAINNET, MockDAI],
@@ -275,7 +287,7 @@ describe('parseLocalActivity', () => {
         status: 1,
       },
     } as TransactionDetails
-    const chainId = SupportedChainId.MAINNET
+    const chainId = ChainId.MAINNET
     expect(parseLocalActivity(details, chainId, mockTokenAddressMap)).toMatchObject({
       chainId: 1,
       currencies: [MockUSDC_MAINNET, MockDAI],
@@ -299,7 +311,7 @@ describe('parseLocalActivity', () => {
         status: 1,
       },
     } as TransactionDetails
-    const chainId = SupportedChainId.MAINNET
+    const chainId = ChainId.MAINNET
     const tokens = {} as ChainTokenMap
     expect(parseLocalActivity(details, chainId, tokens)).toMatchObject({
       chainId: 1,
@@ -315,7 +327,7 @@ describe('parseLocalActivity', () => {
     const account2Activites = renderHook(() => useLocalActivities(mockAccount2)).result.current
 
     expect(Object.values(account1Activites)).toHaveLength(1)
-    expect(Object.values(account2Activites)).toHaveLength(30)
+    expect(Object.values(account2Activites)).toHaveLength(33)
   })
 
   it('Properly uses correct tense of activity title based on tx status', () => {
@@ -380,6 +392,23 @@ describe('parseLocalActivity', () => {
     })
   })
 
+  it('Adapts Revoke Approval to Activity type', () => {
+    const hash = mockHash('0xrevoke_approval')
+    const activity = renderHook(() => useLocalActivities(mockAccount2)).result.current[hash]
+    expect(activity).toMatchObject({
+      chainId: mockChainId,
+      currencies: [MockUSDT],
+      title: 'Revoked approval',
+      descriptor: MockUSDT.symbol,
+      hash,
+      status: MockTxStatus.Confirmed,
+      receipt: {
+        id: hash,
+        status: MockTxStatus.Confirmed,
+      },
+    })
+  })
+
   it('Adapts Wrap to Activity type', () => {
     const hash = mockHash('0xwrap')
     const activity = renderHook(() => useLocalActivities(mockAccount2)).result.current[hash]

src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts

@@ -1,8 +1,8 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { t } from '@lingui/macro'
 import { formatCurrencyAmount } from '@uniswap/conedison/format'
-import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
+import { ChainId, Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { nativeOnChain } from '@uniswap/smart-order-router'
-import { SupportedChainId } from 'constants/chains'
 import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 import { ChainTokenMap, useAllTokensMultichain } from 'hooks/Tokens'
 import { useMemo } from 'react'
@@ -25,7 +25,7 @@ import {
 import { getActivityTitle } from '../constants'
 import { Activity, ActivityMap } from './types'
 
-function getCurrency(currencyId: string, chainId: SupportedChainId, tokens: ChainTokenMap): Currency | undefined {
+function getCurrency(currencyId: string, chainId: ChainId, tokens: ChainTokenMap): Currency | undefined {
   return currencyId === 'ETH' ? nativeOnChain(chainId) : tokens[chainId]?.[currencyId]
 }
 
@@ -45,7 +45,7 @@ function buildCurrencyDescriptor(
 
 function parseSwap(
   swap: ExactInputSwapTransactionInfo | ExactOutputSwapTransactionInfo,
-  chainId: SupportedChainId,
+  chainId: ChainId,
   tokens: ChainTokenMap
 ): Partial<Activity> {
   const tokenIn = getCurrency(swap.inputCurrencyId, chainId, tokens)
@@ -61,7 +61,7 @@ function parseSwap(
   }
 }
 
-function parseWrap(wrap: WrapTransactionInfo, chainId: SupportedChainId, status: TransactionStatus): Partial<Activity> {
+function parseWrap(wrap: WrapTransactionInfo, chainId: ChainId, status: TransactionStatus): Partial<Activity> {
   const native = nativeOnChain(chainId)
   const wrapped = native.wrapped
   const [input, output] = wrap.unwrapped ? [wrapped, native] : [native, wrapped]
@@ -75,13 +75,18 @@ function parseWrap(wrap: WrapTransactionInfo, chainId: SupportedChainId, status:
 
 function parseApproval(
   approval: ApproveTransactionInfo,
-  chainId: SupportedChainId,
-  tokens: ChainTokenMap
+  chainId: ChainId,
+  tokens: ChainTokenMap,
+  status: TransactionStatus
 ): Partial<Activity> {
-  // TODO: Add 'amount' approved to ApproveTransactionInfo so we can distinguish between revoke and approve
   const currency = getCurrency(approval.tokenAddress, chainId, tokens)
   const descriptor = currency?.symbol ?? currency?.name ?? t`Unknown`
   return {
+    title: getActivityTitle(
+      TransactionType.APPROVAL,
+      status,
+      BigNumber.from(approval.amount).eq(0) /* use alternate if it's a revoke */
+    ),
     descriptor,
     currencies: [currency],
   }
@@ -91,7 +96,7 @@ type GenericLPInfo = Omit<
   AddLiquidityV3PoolTransactionInfo | RemoveLiquidityV3TransactionInfo | AddLiquidityV2PoolTransactionInfo,
   'type'
 >
-function parseLP(lp: GenericLPInfo, chainId: SupportedChainId, tokens: ChainTokenMap): Partial<Activity> {
+function parseLP(lp: GenericLPInfo, chainId: ChainId, tokens: ChainTokenMap): Partial<Activity> {
   const baseCurrency = getCurrency(lp.baseCurrencyId, chainId, tokens)
   const quoteCurrency = getCurrency(lp.quoteCurrencyId, chainId, tokens)
   const [baseRaw, quoteRaw] = [lp.expectedAmountBaseRaw, lp.expectedAmountQuoteRaw]
@@ -102,7 +107,7 @@ function parseLP(lp: GenericLPInfo, chainId: SupportedChainId, tokens: ChainToke
 
 function parseCollectFees(
   collect: CollectFeesTransactionInfo,
-  chainId: SupportedChainId,
+  chainId: ChainId,
   tokens: ChainTokenMap
 ): Partial<Activity> {
   // Adapts CollectFeesTransactionInfo to generic LP type
@@ -117,7 +122,7 @@ function parseCollectFees(
 
 function parseMigrateCreateV3(
   lp: MigrateV2LiquidityToV3TransactionInfo | CreateV3PoolTransactionInfo,
-  chainId: SupportedChainId,
+  chainId: ChainId,
   tokens: ChainTokenMap
 ): Partial<Activity> {
   const baseCurrency = getCurrency(lp.baseCurrencyId, chainId, tokens)
@@ -131,7 +136,7 @@ function parseMigrateCreateV3(
 
 export function parseLocalActivity(
   details: TransactionDetails,
-  chainId: SupportedChainId,
+  chainId: ChainId,
   tokens: ChainTokenMap
 ): Activity | undefined {
   try {
@@ -165,7 +170,7 @@ export function parseLocalActivity(
     if (info.type === TransactionType.SWAP) {
       additionalFields = parseSwap(info, chainId, tokens)
     } else if (info.type === TransactionType.APPROVAL) {
-      additionalFields = parseApproval(info, chainId, tokens)
+      additionalFields = parseApproval(info, chainId, tokens, status)
     } else if (info.type === TransactionType.WRAP) {
       additionalFields = parseWrap(info, chainId, status)
     } else if (

src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx

@@ -1,22 +1,24 @@
 import { t } from '@lingui/macro'
-import { formatNumberOrString, NumberType } from '@uniswap/conedison/format'
-import { SupportedChainId } from '@uniswap/sdk-core'
-import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, UNI_ADDRESS } from 'constants/addresses'
+import { formatFiatPrice, formatNumberOrString, NumberType } from '@uniswap/conedison/format'
+import { ChainId, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, UNI_ADDRESSES } from '@uniswap/sdk-core'
+import moonpayLogoSrc from 'assets/svg/moonpay.svg'
 import { nativeOnChain } from 'constants/tokens'
 import {
   ActivityType,
   AssetActivityPartsFragment,
+  Currency,
   NftApprovalPartsFragment,
   NftApproveForAllPartsFragment,
   NftTransferPartsFragment,
   TokenApprovalPartsFragment,
   TokenTransferPartsFragment,
 } from 'graphql/data/__generated__/types-and-hooks'
-import { fromGraphQLChain } from 'graphql/data/util'
+import { logSentryErrorForUnsupportedChain, supportedChainIdFromGQLChain } from 'graphql/data/util'
 import ms from 'ms.macro'
 import { useEffect, useState } from 'react'
 import { isAddress } from 'utils'
 
+import { MOONPAY_SENDER_ADDRESSES } from '../constants'
 import { Activity } from './types'
 
 type TransactionChanges = {
@@ -35,7 +37,7 @@ const ENS_IMG =
   'https://464911102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/collections%2F2TjMAeHSzwlQgcOdL48E%2Ficon%2FKWP0gk2C6bdRPliWIA6o%2Fens%20transparent%20background.png?alt=media&token=bd28b063-5a75-4971-890c-97becea09076'
 
 const COMMON_CONTRACTS: { [key: string]: Partial<Activity> | undefined } = {
-  [UNI_ADDRESS[SupportedChainId.MAINNET].toLowerCase()]: {
+  [UNI_ADDRESSES[ChainId.MAINNET].toLowerCase()]: {
     title: t`UNI Governance`,
     descriptor: t`Contract Interaction`,
     logos: [UNI_IMG],
@@ -73,10 +75,9 @@ function isSameAddress(a?: string, b?: string) {
 }
 
 function callsPositionManagerContract(assetActivity: AssetActivityPartsFragment) {
-  return isSameAddress(
-    assetActivity.transaction.to,
-    NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[fromGraphQLChain(assetActivity.chain)]
-  )
+  const supportedChain = supportedChainIdFromGQLChain(assetActivity.chain)
+  if (!supportedChain) return false
+  return isSameAddress(assetActivity.transaction.to, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[supportedChain])
 }
 
 // Gets counts for number of NFTs in each collection present
@@ -90,15 +91,24 @@ function getCollectionCounts(nftTransfers: NftTransferPartsFragment[]): { [key:
   }, {} as { [key: string]: number | undefined })
 }
 
-function getSwapTitle(sent: TokenTransferPartsFragment, received: TokenTransferPartsFragment) {
+function getSwapTitle(sent: TokenTransferPartsFragment, received: TokenTransferPartsFragment): string | undefined {
+  const supportedSentChain = supportedChainIdFromGQLChain(sent.asset.chain)
+  const supportedReceivedChain = supportedChainIdFromGQLChain(received.asset.chain)
+  if (!supportedSentChain || !supportedReceivedChain) {
+    logSentryErrorForUnsupportedChain({
+      extras: { sentAsset: sent.asset, receivedAsset: received.asset },
+      errorMessage: 'Invalid activity from unsupported chain received from GQL',
+    })
+    return undefined
+  }
   if (
     sent.tokenStandard === 'NATIVE' &&
-    isSameAddress(nativeOnChain(fromGraphQLChain(sent.asset.chain)).wrapped.address, received.asset.address)
+    isSameAddress(nativeOnChain(supportedSentChain).wrapped.address, received.asset.address)
   )
     return t`Wrapped`
   else if (
     received.tokenStandard === 'NATIVE' &&
-    isSameAddress(nativeOnChain(fromGraphQLChain(received.asset.chain)).wrapped.address, received.asset.address)
+    isSameAddress(nativeOnChain(supportedReceivedChain).wrapped.address, received.asset.address)
   ) {
     return t`Unwrapped`
   } else {
@@ -106,6 +116,17 @@ function getSwapTitle(sent: TokenTransferPartsFragment, received: TokenTransferP
   }
 }
 
+/**
+ *
+ * @param transactedValue Transacted value amount from TokenTransfer API response
+ * @returns parsed & formatted USD value as a string if currency is of type USD
+ */
+function formatTransactedValue(transactedValue: TokenTransferPartsFragment['transactedValue']): string {
+  if (!transactedValue) return '-'
+  const price = transactedValue?.currency === Currency.Usd ? transactedValue.value ?? undefined : undefined
+  return formatFiatPrice(price)
+}
+
 function parseSwap(changes: TransactionChanges) {
   if (changes.NftTransfer.length > 0 && changes.TokenTransfer.length === 1) {
     const collectionCounts = getCollectionCounts(changes.NftTransfer)
@@ -175,17 +196,27 @@ function parseSendReceive(changes: TransactionChanges, assetActivity: AssetActiv
   }
 
   if (transfer && assetName && amount) {
-    return transfer.direction === 'IN'
-      ? {
-          title: t`Received`,
-          descriptor: `${amount} ${assetName} ${t`from`} `,
-          otherAccount: isAddress(transfer.sender) || undefined,
-        }
-      : {
-          title: t`Sent`,
-          descriptor: `${amount} ${assetName} ${t`to`} `,
-          otherAccount: isAddress(transfer.recipient) || undefined,
-        }
+    const isMoonpayPurchase = MOONPAY_SENDER_ADDRESSES.some((address) => isSameAddress(address, transfer?.sender))
+
+    if (transfer.direction === 'IN') {
+      return isMoonpayPurchase && transfer.__typename === 'TokenTransfer'
+        ? {
+            title: t`Purchased`,
+            descriptor: `${amount} ${assetName} ${t`for`} ${formatTransactedValue(transfer.transactedValue)}`,
+            logos: [moonpayLogoSrc],
+          }
+        : {
+            title: t`Received`,
+            descriptor: `${amount} ${assetName} ${t`from`} `,
+            otherAccount: isAddress(transfer.sender) || undefined,
+          }
+    } else {
+      return {
+        title: t`Sent`,
+        descriptor: `${amount} ${assetName} ${t`to`} `,
+        otherAccount: isAddress(transfer.recipient) || undefined,
+      }
+    }
   }
   return { title: t`Unknown Send` }
 }
@@ -245,9 +276,17 @@ function parseRemoteActivity(assetActivity: AssetActivityPartsFragment): Activit
       },
       { NftTransfer: [], TokenTransfer: [], TokenApproval: [], NftApproval: [], NftApproveForAll: [] }
     )
+    const supportedChain = supportedChainIdFromGQLChain(assetActivity.chain)
+    if (!supportedChain) {
+      logSentryErrorForUnsupportedChain({
+        extras: { assetActivity },
+        errorMessage: 'Invalid activity from unsupported chain received from GQL',
+      })
+      return undefined
+    }
     const defaultFields = {
       hash: assetActivity.transaction.hash,
-      chainId: fromGraphQLChain(assetActivity.chain),
+      chainId: supportedChain,
       status: assetActivity.transaction.status,
       timestamp: assetActivity.timestamp,
       logos: getLogoSrcs(changes),
@@ -265,7 +304,7 @@ function parseRemoteActivity(assetActivity: AssetActivityPartsFragment): Activit
   }
 }
 
-export function parseRemoteActivities(assetActivities?: AssetActivityPartsFragment[]) {
+export function parseRemoteActivities(assetActivities?: readonly AssetActivityPartsFragment[]) {
   return assetActivities?.reduce((acc: { [hash: string]: Activity }, assetActivity) => {
     const activity = parseRemoteActivity(assetActivity)
     if (activity) acc[activity.hash] = activity

src/components/AccountDrawer/MiniPortfolio/Activity/types.ts

@@ -1,12 +1,11 @@
-import { Currency } from '@uniswap/sdk-core'
-import { SupportedChainId } from 'constants/chains'
+import { ChainId, Currency } from '@uniswap/sdk-core'
 import { AssetActivityPartsFragment, TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 
 type Receipt = AssetActivityPartsFragment['transaction']
 
 export type Activity = {
   hash: string
-  chainId: SupportedChainId
+  chainId: ChainId
   status: TransactionStatus
   timestamp: number
   title: string

src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx

@@ -30,7 +30,7 @@ const Wrapper = styled(Column)<{ numItems: number; isExpanded: boolean }>`
   overflow: hidden;
 `
 
-// TODO(WEB-3288): Replace this component to use `components/Expand` under the hood
+// TODO(WEB-1982): Replace this component to use `components/Expand` under the hood
 type ExpandoRowProps = PropsWithChildren<{ title?: string; numItems: number; isExpanded: boolean; toggle: () => void }>
 export function ExpandoRow({ title = t`Hidden`, numItems, isExpanded, toggle, children }: ExpandoRowProps) {
   if (numItems === 0) return null

src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts

@@ -1,6 +1,5 @@
-import { Token } from '@uniswap/sdk-core'
+import { ChainId, Token } from '@uniswap/sdk-core'
 import { Pool, Position } from '@uniswap/v3-sdk'
-import { SupportedChainId } from 'constants/chains'
 import { useAllTokensMultichain } from 'hooks/Tokens'
 import { atom, useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
@@ -16,7 +15,7 @@ import { useInterfaceMulticallContracts } from './hooks'
 
 export type PositionInfo = {
   owner: string
-  chainId: SupportedChainId
+  chainId: ChainId
   position: Position
   pool: Pool
   details: PositionDetails
@@ -59,7 +58,7 @@ export function useCachedPositions(account: string): UseCachedPositionsReturnTyp
   return [cachedPositions[account], setPositionsAndStaleTimeout]
 }
 
-const poolAddressKey = (details: PositionDetails, chainId: SupportedChainId) =>
+const poolAddressKey = (details: PositionDetails, chainId: ChainId) =>
   `${chainId}-${details.token0}-${details.token1}-${details.fee}`
 
 type PoolAddressMap = { [key: string]: string | undefined }
@@ -71,11 +70,11 @@ const poolAddressCacheAtom = atomWithStorage<PoolAddressMap>('poolCache', {})
 export function usePoolAddressCache() {
   const [cache, updateCache] = useAtom(poolAddressCacheAtom)
   const get = useCallback(
-    (details: PositionDetails, chainId: SupportedChainId) => cache[poolAddressKey(details, chainId)],
+    (details: PositionDetails, chainId: ChainId) => cache[poolAddressKey(details, chainId)],
     [cache]
   )
   const set = useCallback(
-    (details: PositionDetails, chainId: SupportedChainId, address: string) =>
+    (details: PositionDetails, chainId: ChainId, address: string) =>
       updateCache((c) => ({ ...c, [poolAddressKey(details, chainId)]: address })),
     [updateCache]
   )
@@ -104,8 +103,8 @@ function useTokenCache() {
   return { get, set }
 }
 
-type TokenGetterFn = (addresses: string[], chainId: SupportedChainId) => Promise<{ [key: string]: Token | undefined }>
-export function useGetCachedTokens(chains: SupportedChainId[]): TokenGetterFn {
+type TokenGetterFn = (addresses: string[], chainId: ChainId) => Promise<{ [key: string]: Token | undefined }>
+export function useGetCachedTokens(chains: ChainId[]): TokenGetterFn {
   const allTokens = useAllTokensMultichain()
   const multicallContracts = useInterfaceMulticallContracts(chains)
   const tokenCache = useTokenCache()

src/components/AccountDrawer/MiniPortfolio/Pools/getTokensAsync.ts

@@ -1,8 +1,7 @@
-import { Token } from '@uniswap/sdk-core'
+import { ChainId, Token } from '@uniswap/sdk-core'
 import ERC20_ABI from 'abis/erc20.json'
 import { Erc20Interface } from 'abis/types/Erc20'
 import { Erc20Bytes32Interface } from 'abis/types/Erc20Bytes32'
-import { SupportedChainId } from 'constants/chains'
 import { DEFAULT_ERC20_DECIMALS } from 'constants/tokens'
 import { Interface } from 'ethers/lib/utils'
 import { UniswapInterfaceMulticall } from 'types/v3'
@@ -18,7 +17,7 @@ export const DEFAULT_GAS_LIMIT = 1_000_000
 const Erc20 = new Interface(ERC20_ABI) as Erc20Interface
 const Erc20Bytes32 = new Interface(ERC20_ABI) as Erc20Bytes32Interface // Used for tokens that return bytes32 for name/symbol rather than string
 
-// TODO(WEB-3060): cartcrom - adapt support for multi-function multi-interface multicalls into redux-multicall to remove than this custom cache/chunking logic
+// TODO(WEB-1760): cartcrom - adapt support for multi-function multi-interface multicalls into redux-multicall to remove than this custom cache/chunking logic
 // Infura rejects calls with gas costs > 10x the current block gas limit; in such case we split the call into 2 chunks
 async function fetchChunk(multicall: UniswapInterfaceMulticall, chunk: Call[]): Promise<CallResult[]> {
   try {
@@ -38,7 +37,7 @@ async function fetchChunk(multicall: UniswapInterfaceMulticall, chunk: Call[]):
   }
 }
 
-function tryParseToken(address: string, chainId: SupportedChainId, data: CallResult[]) {
+function tryParseToken(address: string, chainId: ChainId, data: CallResult[]) {
   try {
     const [nameData, symbolData, decimalsData, nameDataBytes32, symbolDataBytes32] = data
 
@@ -61,7 +60,7 @@ function tryParseToken(address: string, chainId: SupportedChainId, data: CallRes
   }
 }
 
-function parseTokens(addresses: string[], chainId: SupportedChainId, returnData: CallResult[]) {
+function parseTokens(addresses: string[], chainId: ChainId, returnData: CallResult[]) {
   const tokenDataSlices = arrayToSlices(returnData, 5)
 
   return tokenDataSlices.reduce((acc: TokenMap, slice, index) => {
@@ -90,7 +89,7 @@ const TokenPromiseCache: { [key: CurrencyKey]: Promise<Token | undefined> | unde
 // Returns tokens using a single RPC call to the multicall contract
 export async function getTokensAsync(
   addresses: string[],
-  chainId: SupportedChainId,
+  chainId: ChainId,
   multicall: UniswapInterfaceMulticall
 ): Promise<TokenMap> {
   if (addresses.length === 0) return {}

src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts

@@ -1,10 +1,14 @@
-import { Token } from '@uniswap/sdk-core'
+import {
+  ChainId,
+  MULTICALL_ADDRESSES,
+  NONFUNGIBLE_POSITION_MANAGER_ADDRESSES as V3NFT_ADDRESSES,
+  Token,
+} from '@uniswap/sdk-core'
 import { AddressMap } from '@uniswap/smart-order-router'
 import MulticallJSON from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
 import NFTPositionManagerJSON from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
 import { useWeb3React } from '@web3-react/core'
-import { MULTICALL_ADDRESS, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES as V3NFT_ADDRESSES } from 'constants/addresses'
-import { isSupportedChain, SupportedChainId } from 'constants/chains'
+import { isSupportedChain } from 'constants/chains'
 import { RPC_PROVIDERS } from 'constants/providers'
 import { BaseContract } from 'ethers/lib/ethers'
 import { ContractInput, useUniswapPricesQuery } from 'graphql/data/__generated__/types-and-hooks'
@@ -23,7 +27,7 @@ type ContractMap<T extends BaseContract> = { [key: number]: T }
 function useContractMultichain<T extends BaseContract>(
   addressMap: AddressMap,
   ABI: any,
-  chainIds?: SupportedChainId[]
+  chainIds?: ChainId[]
 ): ContractMap<T> {
   const { chainId: walletChainId, provider: walletProvider } = useWeb3React()
 
@@ -35,19 +39,26 @@ function useContractMultichain<T extends BaseContract>(
         .filter(isSupportedChain)
 
     return relevantChains.reduce((acc: ContractMap<T>, chainId) => {
-      const provider = walletProvider && walletChainId === chainId ? walletProvider : RPC_PROVIDERS[chainId]
-      acc[chainId] = getContract(addressMap[chainId], ABI, provider) as T
+      const provider =
+        walletProvider && walletChainId === chainId
+          ? walletProvider
+          : isSupportedChain(chainId)
+          ? RPC_PROVIDERS[chainId]
+          : undefined
+      if (provider) {
+        acc[chainId] = getContract(addressMap[chainId] ?? '', ABI, provider) as T
+      }
       return acc
     }, {})
   }, [ABI, addressMap, chainIds, walletChainId, walletProvider])
 }
 
-export function useV3ManagerContracts(chainIds: SupportedChainId[]): ContractMap<NonfungiblePositionManager> {
+export function useV3ManagerContracts(chainIds: ChainId[]): ContractMap<NonfungiblePositionManager> {
   return useContractMultichain<NonfungiblePositionManager>(V3NFT_ADDRESSES, NFTPositionManagerJSON.abi, chainIds)
 }
 
-export function useInterfaceMulticallContracts(chainIds: SupportedChainId[]): ContractMap<UniswapInterfaceMulticall> {
-  return useContractMultichain<UniswapInterfaceMulticall>(MULTICALL_ADDRESS, MulticallJSON.abi, chainIds)
+export function useInterfaceMulticallContracts(chainIds: ChainId[]): ContractMap<UniswapInterfaceMulticall> {
+  return useContractMultichain<UniswapInterfaceMulticall>(MULTICALL_ADDRESSES, MulticallJSON.abi, chainIds)
 }
 
 type PriceMap = { [key: CurrencyKey]: number | undefined }