fix: fail UR transaction if chain IDs don't match (#7151)

* fix: check chainId in findCancelTx

* feat: comment

.env

@@ -4,6 +4,8 @@ REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
 REACT_APP_BNB_RPC_URL="https://rough-sleek-hill.bsc.quiknode.pro/413cc98cbc776cda8fdf1d0f47003583ff73d9bf"
+REACT_APP_BASE_GOERLI_RPC_URL="https://wiser-compatible-mansion.base-goerli.quiknode.pro/5874f36248e17020a1006149e7f68c63967e1f45/"
+REACT_APP_BASE_MAINNET_RPC_URL="https://cool-white-diagram.base-mainnet.quiknode.pro/d8f036f35dfab2c68f32dfa822cd971e7a25a117/"
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"
 REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=staging"
@@ -11,3 +13,5 @@ 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_UNISWAP_API_URL="https://api.uniswap.org/v2"
+REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"

.eslintrc.js

@@ -2,13 +2,18 @@
 
 require('@uniswap/eslint-config/load')
 
+const rulesDirPlugin = require('eslint-plugin-rulesdir')
+rulesDirPlugin.RULES_DIR = 'eslint_rules'
+
 module.exports = {
-  extends: '@uniswap/eslint-config/react',
+  extends: ['@uniswap/eslint-config/react'],
+  plugins: ['rulesdir'],
   overrides: [
     {
       files: ['**/*'],
       rules: {
         'multiline-comment-style': ['error', 'separate-lines'],
+        'rulesdir/no-undefined-or': 'error',
       },
     },
     {
@@ -52,5 +57,22 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      excludedFiles: ['src/analytics/*'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@uniswap/analytics',
+                message: `Do not import from '@uniswap/analytics' directly. Use 'analytics' instead.`,
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 }

.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
@@ -40,27 +40,19 @@ runs:
       run: yarn contracts
       shell: bash
 
-    # GraphQL is generated from schema. The schema is always fetched, but if unchanged, graphql does not need to be re-generated.
-    - run: yarn graphql:fetch
-      shell: bash
-    - uses: actions/cache@v3
-      id: graphql-cache
-      with:
-        path: src/graphql/**/__generated__
-        key: ${{ runner.os }}-graphql-${{ hashFiles('src/graphql/**/schema.graphql') }}
-    - if: steps.graphql-cache.outputs.cache-hit != 'true'
-      run: yarn graphql:generate
+    # GraphQL is generated from schema and client-side graphql queries. The schema is always fetched and changes to
+    # client-side queries are hard to detect, so it is always re-generated.
+    # TODO(WEB-2498): Cache based on both fetched schema and client-side graphql queries.
+    # This will require some processing: cp all literal graphql tags into a separate file and hash it?
+    - run: yarn graphql
       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,17 +10,25 @@ jobs:
     environment:
       name: deploy/staging
     steps:
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+        continue-on-error: true
+        with:
+          payload: |
+            {
+              "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
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -28,6 +36,21 @@ jobs:
           projectName: interface-staging
           directory: build
           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
+
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+        continue-on-error: true
+        if: always()
+        with:
+          payload: |
+            {
+              "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/3-staging-to-prod.yml

@@ -14,6 +14,21 @@ jobs:
     environment:
       name: push/prod
     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 }}

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

@@ -10,13 +10,24 @@ jobs:
     environment:
       name: deploy/prod
     steps:
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+        continue-on-error: true
+        with:
+          payload: |
+            {
+              "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@v6.0
+        uses: mathieudutour/github-tag-action@d745f2e74aaf1ee82e747b181f7a0967978abee0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           release_branches: releases/prod
@@ -37,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 }}
@@ -63,21 +74,30 @@ 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
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
           directory: build
           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
 
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+        continue-on-error: true
+        if: always()
+        with:
+          payload: |
+            {
+              "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
 #
@@ -11,8 +11,10 @@ name: Slack notifications for releases/* merges
 #  | sed 's/"//g' | sed 's/\\t/;/g' | sed 's/\\n/;/g' | sed 's/\\//g' \
 # We then use awk to format the TSV into a Slack message
 #  | awk -F';' '{print "• <"$1"|"$2"> (<https://github.com/"$3"|"$3">, "$4") - "$5}' \
-# Finally, we need to deal with some escaping issues with newlines so that we don't break the Slack message format
+# We need to deal with some escaping issues with newlines so that we don't break the Slack message format
 #  | sed 's/$/\\n/g' | tr -d '\n' \
+# Finally we have to truncate the message to 3,000 characters max, otherwise Slack will reject it
+#  | awk '{print substr($0,0,3000);}' \
 # Then shove the bytes into a file to store them in their exact format
 #  > /tmp/parsed_github_context
 
@@ -23,8 +25,9 @@ on:
 
 jobs:
   notify-slack:
-    name: 'Emit Slack notification(s)'
     runs-on: ubuntu-latest
+    environment:
+      name: notify/releases
     steps:
       - name: Parse event to slug
         id: parse-slug
@@ -38,11 +41,10 @@ jobs:
           | sed 's/"//g' | sed 's/\\t/;/g' | sed 's/\\n/;/g' | sed 's/\\//g' \
           | awk -F';' '{print "• <"$1"|"$2"> (<https://github.com/"$3"|"$3">, "$4") - "$5}' \
           | sed 's/$/\\n/g' | tr -d '\n' \
+          | 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 12 * * 1-4' # every day 12: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,21 +86,37 @@ 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
           if-no-files-found: error
 
+  cypress-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cypress-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cypress-tsc-
+      - run: yarn typecheck:cypress
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cypress typecheck
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+
   # Allows for parallel re-runs of cypress tests without re-building.
   cypress-rerun:
     runs-on: ubuntu-latest
@@ -115,7 +126,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,11 +133,10 @@ 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
+          key: ${{ runner.os }}-cypress-${{ hashFiles('**/node_modules/cypress/package.json') }}
       - run: |
           yarn cypress install
           yarn cypress info
@@ -137,36 +146,119 @@ 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
-          start: yarn serve
-          wait-on: 'http://localhost:3000'
-          browser: chrome
           record: true
           parallel: true
+          start: yarn serve
+          wait-on: 'http://localhost:3000'
+          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 }}
-
+          COMMIT_INFO_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title || github.event.head_commit.message }}
+          COMMIT_INFO_AUTHOR: ${{ github.event.sender.login || github.event.head_commit.author.login }}
+          # Cypress requires an email for filtering by author, but GitHub does not expose one.
+          # GitHub's public profile email can be deterministically produced from user id/login.
+          COMMIT_INFO_EMAIL: ${{ github.event.sender.id || github.event.head_commit.author.id }}+${{ github.event.sender.login || github.event.head_commit.author.login }}@users.noreply.github.com
+          COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.sha }}
+          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 }}
+
+  cloud-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cloud-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cloud-tsc-
+      - run: yarn typecheck:cloud
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cloud typecheck
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+
+  # TODO(WEB-2537): Setup CodeCOV
+  cloud-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cloud-jest-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cloud-jest-
+      - run: yarn test:cloud --coverage --maxWorkers=100%
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cloud 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__
@@ -20,6 +19,7 @@ schema.graphql
 # testing
 /coverage
 /cache
+/functions/coverage
 
 # builds
 /build
@@ -47,7 +47,10 @@ notes.txt
 
 package-lock.json
 
+cypress/downloads
 cypress/videos
 cypress/screenshots
 
 .vercel
+
+.wrangler

.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

@@ -1,9 +1,12 @@
 /* eslint-env node */
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const { execSync } = require('child_process')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
-const { DefinePlugin, IgnorePlugin } = require('webpack')
+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'
@@ -12,6 +15,11 @@ const isProduction = process.env.NODE_ENV === 'production'
 // Omit them from production builds, as they slow down the feedback loop.
 const shouldLintOrTypeCheck = !isProduction
 
+function getCacheDirectory(cacheName) {
+  // Include the trailing slash to denote that this is a directory.
+  return `${path.join(__dirname, 'node_modules/.cache/', cacheName)}/`
+}
+
 module.exports = {
   babel: {
     plugins: [
@@ -44,8 +52,13 @@ module.exports = {
     pluginOptions(eslintConfig) {
       return Object.assign(eslintConfig, {
         cache: true,
-        cacheLocation: 'node_modules/.cache/eslint/',
+        cacheLocation: getCacheDirectory('eslint'),
         ignorePath: '.gitignore',
+        // Use our own eslint/plugins/config, as overrides interfere with caching.
+        // This ensures that `yarn start` and `yarn lint` share one cache.
+        eslintPath: require.resolve('eslint'),
+        resolvePluginsRelativeTo: null,
+        baseConfig: null,
       })
     },
   },
@@ -55,11 +68,13 @@ module.exports = {
   jest: {
     configure(jestConfig) {
       return Object.assign(jestConfig, {
-        transform: {
-          '\\.css\\.ts$': './vanilla.transform.cjs',
-          ...jestConfig.transform,
-        },
-        cacheDirectory: 'node_modules/.cache/jest',
+        cacheDirectory: getCacheDirectory('jest'),
+        transform: Object.assign(jestConfig.transform, {
+          // Transform vanilla-extract using its own transformer.
+          // See https://sandroroth.com/blog/vanilla-extract-cra#jest-transform.
+          '\\.css\\.ts$': '@vanilla-extract/jest-transform',
+        }),
+        // Use @uniswap/conedison's build directly, as jest does not support its exports.
         transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
         moduleNameMapper: {
           '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
@@ -69,8 +84,29 @@ module.exports = {
     },
   },
   webpack: {
-    plugins: [new VanillaExtractPlugin({ identifiers: 'short' })],
+    plugins: [
+      // Webpack 5 does not polyfill node globals, so we do so for those necessary:
+      new ProvidePlugin({
+        // - react-markdown requires process.cwd
+        process: 'process/browser',
+      }),
+      // vanilla-extract has poor performance on M1 machines with 'debug' identifiers, so we use 'short' instead.
+      // 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:
       webpackConfig.plugins = webpackConfig.plugins
         .map((plugin) => {
           // Extend process.env with dynamic values (eg commit hash).
@@ -87,10 +123,16 @@ module.exports = {
             plugin.options.ignoreOrder = true
           }
 
+          // Disable TypeScript's config overwrite, as it interferes with incremental build caching.
+          // This ensures that `yarn start` and `yarn typecheck` share one cache.
+          if (plugin.constructor.name == 'ForkTsCheckerWebpackPlugin') {
+            delete plugin.options.typescript.configOverwrite
+          }
+
           return plugin
         })
         .filter((plugin) => {
-          // Case sensitive paths are enforced by TypeScript.
+          // Case sensitive paths are already enforced by TypeScript.
           // See https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames.
           if (plugin instanceof CaseSensitivePathsPlugin) return false
 
@@ -100,20 +142,67 @@ module.exports = {
           return true
         })
 
-      // We're currently on Webpack 4.x which doesn't support the `exports` field in package.json.
-      // Instead, we need to manually map the import path to the correct exports path (eg dist or build folder).
-      // See https://github.com/webpack/webpack/issues/9509.
-      webpackConfig.resolve.alias['@uniswap/conedison'] = '@uniswap/conedison/dist'
+      // Configure webpack resolution:
+      webpackConfig.resolve = Object.assign(webpackConfig.resolve, {
+        plugins: webpackConfig.resolve.plugins.map((plugin) => {
+          // Allow vanilla-extract in production builds.
+          // This is necessary because create-react-app guards against external imports.
+          // See https://sandroroth.com/blog/vanilla-extract-cra#production-build.
+          if (plugin instanceof ModuleScopePlugin) {
+            plugin.allowedPaths.push(path.join(__dirname, 'node_modules/@vanilla-extract/webpack-plugin'))
+          }
+
+          return plugin
+        }),
+        // Webpack 5 does not resolve node modules, so we do so for those necessary:
+        fallback: {
+          // - react-markdown requires path
+          path: require.resolve('path-browserify'),
+        },
+      })
+
+      // Configure webpack transpilation (create-react-app specifies transpilation rules in a oneOf):
+      webpackConfig.module.rules[1].oneOf = webpackConfig.module.rules[1].oneOf.map((rule) => {
+        // The fallback rule (eg for dependencies).
+        if (rule.loader && rule.loader.match(/babel-loader/) && !rule.include) {
+          // Allow not-fully-specified modules so that legacy packages are still able to build.
+          rule.resolve = { fullySpecified: false }
+
+          // The class properties transform is required for @uniswap/analytics to build.
+          rule.options.plugins.push('@babel/plugin-proposal-class-properties')
+        }
+        return rule
+      })
 
       // Configure webpack optimization:
-      webpackConfig.optimization.splitChunks = Object.assign(webpackConfig.optimization.splitChunks, {
-        // Cap the chunk size to 5MB.
-        // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip.
-        // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there.
-        // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716.
-        maxSize: 5 * 1024 * 1024,
+      webpackConfig.optimization = Object.assign(
+        webpackConfig.optimization,
+        isProduction
+          ? {
+              splitChunks: {
+                // Cap the chunk size to 5MB.
+                // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip.
+                // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there.
+                // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716.
+                maxSize: 5 * 1024 * 1024,
+                // Optimize over all chunks, instead of async chunks (the default), so that initial chunks are also optimized.
+                chunks: 'all',
+              },
+            }
+          : {}
+      )
+
+      // Configure webpack caching:
+      webpackConfig.cache = Object.assign(webpackConfig.cache, {
+        cacheDirectory: getCacheDirectory('webpack'),
       })
 
+      // Ignore failed source mappings to avoid spamming the console.
+      // Source mappings for a package will fail if the package does not provide them, but the build will still succeed,
+      // so it is unnecessary (and bothersome) to log it. This should be turned off when debugging missing sourcemaps.
+      // See https://webpack.js.org/loaders/source-map-loader#ignoring-warnings.
+      webpackConfig.ignoreWarnings = [/Failed to parse source map/]
+
       return webpackConfig
     },
   },

cypress.config.ts

@@ -4,22 +4,18 @@ import { setupHardhatEvents } from 'cypress-hardhat'
 
 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 },
+  video: false, // GH provides 2 CPUs, and cypress video eats one up, see https://github.com/cypress-io/cypress/issues/20468#issuecomment-1307608025
   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'),
-      }
+      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,201 @@
+# 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}`)
+  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}`)
+  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) => ...)`.
+
+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/add-liquidity.test.ts

@@ -9,36 +9,29 @@ describe('Add Liquidity', () => {
     })
   })
 
-  it('loads the two correct tokens', () => {
-    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/500')
+  it('loads the token pair', () => {
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH/500')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
+    cy.contains('0.05% fee tier')
   })
 
-  it('does not crash if ETH is duplicated', () => {
-    cy.visit('/add/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'ETH')
-    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('not.contain.text', 'ETH')
+  it('does not crash if token is duplicated', () => {
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
+    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('not.contain.text', 'UNI')
   })
 
-  it.skip('token not in storage is loaded', () => {
-    cy.visit('/add/0x07865c6e87b9f70255377e024ace6630c1eaa37f/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'USDC')
-    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'UNI')
-  })
-
-  it.skip('single token can be selected', () => {
-    cy.visit('/add/0x07865c6e87b9f70255377e024ace6630c1eaa37f')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'USDC')
+  it('single token can be selected', () => {
     cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
   })
 
-  it.skip('loads fee tier distribution', () => {
+  it('loads fee tier distribution', () => {
     cy.fixture('feeTierDistribution.json').then((feeTierDistribution) => {
       cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req: CyHttpMessages.IncomingHttpRequest) => {
-        if (hasQuery(req, 'FeeTierDistributionQuery')) {
-          req.alias = 'FeeTierDistributionQuery'
+        if (hasQuery(req, 'FeeTierDistribution')) {
+          req.alias = 'FeeTierDistribution'
 
           req.reply({
             body: {
@@ -53,12 +46,57 @@ describe('Add Liquidity', () => {
         }
       })
 
-      cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
-
-      cy.wait('@FeeTierDistributionQuery')
-
+      cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH')
+      cy.wait('@FeeTierDistribution')
       cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
-      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40%')
+      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40% select')
+    })
+  })
+
+  it('disables increment and decrement until initial prices are inputted', () => {
+    // ETH / BITCOIN pool (0.05% tier not created)
+    cy.visit('/add/ETH/0x72e4f9F808C49A2a61dE9C5896298920Dc4EEEa9/500')
+    // Set starting price in order to enable price range step counters
+    cy.get('.start-price-input').type('1000')
+
+    // Min Price increment / decrement buttons should be disabled
+    cy.get('[data-testid="increment-price-range"]').eq(0).should('be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(0).should('be.disabled')
+    // Enter min price, which should enable the buttons
+    cy.get('.rate-input-0').eq(0).type('900').blur()
+    cy.get('[data-testid="increment-price-range"]').eq(0).should('not.be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(0).should('not.be.disabled')
+
+    // Repeat for Max Price step counter
+    cy.get('[data-testid="increment-price-range"]').eq(1).should('be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(1).should('be.disabled')
+    // Enter max price, which should enable the buttons
+    cy.get('.rate-input-0').eq(1).type('1100').blur()
+    cy.get('[data-testid="increment-price-range"]').eq(1).should('not.be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(1).should('not.be.disabled')
+  })
+
+  it('allows full range selection on new pool creation', () => {
+    // ETH / BITCOIN pool (0.05% tier not created)
+    cy.visit('/add/ETH/0x72e4f9F808C49A2a61dE9C5896298920Dc4EEEa9/500')
+    // Set starting price in order to enable price range step counters
+    cy.get('.start-price-input').type('1000')
+    cy.get('[data-testid="set-full-range"]').click()
+    // Check that the min price is 0 and the max price is infinity
+    cy.get('.rate-input-0').eq(0).should('have.value', '0')
+    cy.get('.rate-input-0').eq(1).should('have.value', '∞')
+    // Increment and decrement buttons are disabled when full range is selected
+    cy.get('[data-testid="increment-price-range"]').eq(0).should('be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(0).should('be.disabled')
+    cy.get('[data-testid="increment-price-range"]').eq(1).should('be.disabled')
+    cy.get('[data-testid="decrement-price-range"]').eq(1).should('be.disabled')
+    // Check that url params were added
+    cy.url().then((url) => {
+      const params = new URLSearchParams(url)
+      const minPrice = params.get('minPrice')
+      const maxPrice = params.get('maxPrice')
+      // Note: although 0 and ∞ displayed, actual values in query are ticks at limit
+      return minPrice && maxPrice && parseFloat(minPrice) < parseFloat(maxPrice)
     })
   })
 })

cypress/e2e/buy-crypto-modal.test.ts

@@ -1,8 +1,9 @@
+import { FeatureFlag } from '../../src/featureFlags'
 import { getTestSelector } from '../utils'
 
 describe('Buy Crypto Modal', () => {
   it('should open and close', () => {
-    cy.visit('/')
+    cy.visit('/', { featureFlags: [FeatureFlag.fiatOnRampButtonOnSwap] })
 
     // Open the fiat onramp modal
     cy.get(getTestSelector('buy-fiat-button')).click()
@@ -15,7 +16,7 @@ describe('Buy Crypto Modal', () => {
 
   it('should open and close, mobile viewport', () => {
     cy.viewport('iphone-6')
-    cy.visit('/')
+    cy.visit('/', { featureFlags: [FeatureFlag.fiatOnRampButtonOnSwap] })
 
     // Open the fiat onramp modal
     cy.get(getTestSelector('buy-fiat-button')).click()

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()
   })
@@ -21,6 +21,7 @@ describe('Landing Page', () => {
   })
 
   it('shows landing page when the unicorn icon in nav is selected', () => {
+    cy.visit('/swap')
     cy.get(getTestSelector('uniswap-logo')).click()
     cy.get(getTestSelector('landing-page'))
   })

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

@@ -0,0 +1,112 @@
+import { getTestSelector } from '../../utils'
+
+describe('Mini Portfolio account drawer', () => {
+  beforeEach(() => {
+    cy.intercept(/api.uniswap.org\/v1\/graphql/, cy.spy().as('gqlSpy'))
+    cy.visit('/swap')
+  })
+
+  it('fetches balances when account button is first hovered', () => {
+    // The balances should not be fetched before the account button is hovered
+    cy.get('@gqlSpy').should('not.have.been.called')
+
+    // Balances should have been fetched once after hover
+    cy.get(getTestSelector('web3-status-connected')).trigger('mouseover')
+    cy.get('@gqlSpy').should('have.been.calledOnce')
+
+    // Balances should not be refetched upon second hover
+    cy.get(getTestSelector('web3-status-connected')).trigger('mouseover')
+    cy.get('@gqlSpy').should('have.been.calledOnce')
+
+    // Balances should not be refetched upon opening drawer
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get('@gqlSpy').should('have.been.calledOnce')
+
+    // Balances should not be refetched upon closing & reopening drawer
+    cy.get(getTestSelector('close-account-drawer')).click()
+    cy.get(getTestSelector('web3-status-connected')).click()
+    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.intercept(/graphql/, { fixture: 'mini-portfolio/pools.json' })
+    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
+      const accountB = hardhat.wallets[1].address
+
+      // Opens the account drawer
+      cy.get(getTestSelector('web3-status-connected')).click()
+
+      // A shortened version of the first account's address should be shown
+      cy.contains(accountA.slice(0, 6)).should('exist')
+
+      // Stores the current portfolio balance to later compare to next account's balance
+      cy.get(getTestSelector('portfolio-total-balance'))
+        .invoke('text')
+        .then((originalBalance) => {
+          // TODO(INFRA-3) Replace window.ethereum access below with cypress-hardhat utility
+          // Simulates the wallet changing accounts via eip-1193 event
+          cy.window().then((win) => win.ethereum.emit('accountsChanged', [accountB]))
+
+          // The second account's address should now be shown
+          cy.contains(accountB.slice(0, 6)).should('exist')
+
+          // The second account's portfolio balance should differ from the original balance
+          cy.get(getTestSelector('portfolio-total-balance')).should('not.have.text', originalBalance)
+        })
+    })
+  })
+
+  it('fetches ENS name', () => {
+    cy.hardhat().then(() => {
+      const haydenAccount = '0x50EC05ADe8280758E2077fcBC08D878D4aef79C3'
+      const haydenENS = 'hayden.eth'
+
+      // Opens the account drawer
+      cy.get(getTestSelector('web3-status-connected')).click()
+
+      // Simulate wallet changing to Hayden's account
+      cy.window().then((win) => win.ethereum.emit('accountsChanged', [haydenAccount]))
+
+      // Hayden's ENS name should be shown
+      cy.contains(haydenENS).should('exist')
+
+      // Close account drawer
+      cy.get(getTestSelector('close-account-drawer')).click()
+
+      // Switch chain to Polygon
+      cy.get(getTestSelector('chain-selector')).eq(1).click()
+      cy.contains('Polygon').click()
+
+      //Reopen account drawer
+      cy.get(getTestSelector('web3-status-connected')).click()
+
+      // Simulate wallet changing to Hayden's account
+      cy.window().then((win) => win.ethereum.emit('accountsChanged', [haydenAccount]))
+
+      // Hayden's ENS name should be shown
+      cy.contains(haydenENS).should('exist')
+    })
+  })
+})

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

@@ -1,24 +1,12 @@
+import { USDC_MAINNET } from '../../../src/constants/tokens'
 import { getTestSelector } from '../../utils'
 
 describe('mini-portfolio activity history', () => {
-  afterEach(() => {
-    cy.intercept(
-      {
-        method: 'POST',
-        url: 'https://beta.api.uniswap.org/v1/graphql',
-      },
-      // Pass an empty object to allow the original behavior
-      {}
-    ).as('restoreOriginalBehavior')
-  })
-
-  it('should deduplicate activity history by nonce', () => {
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat({ automine: false })
+  beforeEach(() => {
+    cy.hardhat()
       .then((hardhat) => hardhat.wallet.getTransactionCount())
-      .then((currentNonce) => {
-        const nextNonce = currentNonce + 1
-        // Mock graphql response to include a specific nonce.
+      .then((nonce) => {
+        // Mock graphql response to include specific nonces.
         cy.intercept(
           {
             method: 'POST',
@@ -43,7 +31,7 @@ describe('mini-portfolio activity history', () => {
                           status: 'CONFIRMED',
                           to: '0x034a40764485f7e08ca16366e503491a6af7850d',
                           from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-                          nonce: currentNonce,
+                          nonce,
                           __typename: 'Transaction',
                         },
                         assetChanges: [],
@@ -61,7 +49,7 @@ describe('mini-portfolio activity history', () => {
                           status: 'CONFIRMED',
                           to: '0x1b5154aa4b8f027b9fd19341132fc9dae10f7359',
                           from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-                          nonce: nextNonce,
+                          nonce: nonce + 1,
                           __typename: 'Transaction',
                         },
                         assetChanges: [
@@ -101,33 +89,26 @@ describe('mini-portfolio activity history', () => {
               },
             },
           }
-        ).as('graphqlMock')
-
-        // 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', '')
-
-        // 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('#confirm-swap-or-send').click()
-        cy.get(getTestSelector('dismiss-tx-confirmation')).click()
-
-        // Check activity history tab.
-        cy.get(getTestSelector('web3-status-connected')).click()
-        cy.get(getTestSelector('mini-portfolio-nav-activity')).click()
-
-        // Assert that the local pending transaction is replaced by a remote transaction with the same nonce.
-        cy.contains('Swapping').should('not.exist')
+        ).as('graphql')
       })
   })
+
+  it('should deduplicate activity history by nonce', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`).hardhat({ automine: false })
+
+    // Input swap info.
+    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', '')
+
+    cy.get('#swap-button').click()
+    cy.get('#confirm-swap-or-send').click()
+    cy.get(getTestSelector('confirmation-close-icon')).click()
+
+    // Check activity history tab.
+    cy.get(getTestSelector('web3-status-connected')).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

@@ -1,14 +1,10 @@
 import { getTestSelector } from '../utils'
 
 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()
@@ -41,7 +37,10 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
-    cy.visit(`#/nfts/asset/${BONSAI_COLLECTION_ADDRESS}/7580`)
+    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
+    cy.get(getTestSelector('nft-collection-asset')).first().click()
     cy.get(getTestSelector('nft-details-description-text')).should('exist')
     cy.get(getTestSelector('nft-details-description')).click()
     cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
@@ -49,15 +48,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-navbar')).contains('NFTs').click()
     cy.get(getTestSelector('mini-portfolio-nft')).first().click()
-    cy.contains('Buy crypto').should('not.be.visible')
+    cy.get(getTestSelector('mini-portfolio-navbar')).should('not.be.visible')
   })
 })

cypress/e2e/permit2.test.ts

@@ -1,223 +1,257 @@
+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}`, {
-      ethereum: 'hardhat',
-    })
-    cy.get('#swap-currency-input .token-amount-input').clear().type(TEST_BALANCE_INCREMENT.toString())
-  })
+  function setupInputs(inputToken: Token, outputToken: Token) {
+    // Sets up a swap between inputToken and outputToken.
+    cy.visit(`/swap/?inputCurrency=${inputToken.address}&outputCurrency=${outputToken.address}`)
+    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 }))
-      .should('deep.equal', MaxUint256)
+    cy.hardhat()
+      .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: inputToken }))
+      .then((allowance) => {
+        Cypress.log({ name: `Token allowance: ${allowance.toString()}` })
+        cy.wrap(allowance).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(({ approval, wallet }) => approval.getPermit2Allowance({ owner: 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 20 seconds.
-        const expected = Math.floor((approvalTime + 2_592_000_000) / 1000)
-        cy.wrap(allowance.expiration).should('be.closeTo', expected, 20)
+        Cypress.log({ name: `Permit2 allowance: ${allowance.amount.toString()}` })
+        cy.wrap(allowance.amount).should('deep.equal', MaxUint160)
+        // Asserts that the on-chain expiration is in 30 days, within a tolerance of 40 seconds.
+        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 })
+  beforeEach(() =>
+    cy.hardhat().then(async (hardhat) => {
+      await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(DAI, 1e18))
+      await hardhat.mine()
+    })
+  )
+
+  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.contains('Swap submitted')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Swap 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('Swap 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('Swap 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('Swap 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('Swap 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('Swap 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('Swap success!')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })
 })

cypress/e2e/remove-liquidity.test.ts

@@ -1,25 +1,7 @@
 describe('Remove Liquidity', () => {
-  it('eth remove', () => {
+  it('loads the token pair', () => {
     cy.visit('/remove/v2/ETH/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
-
-  it('eth remove swap order', () => {
-    cy.visit('/remove/v2/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'UNI')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'ETH')
-  })
-
-  it('loads the two correct tokens', () => {
-    cy.visit('/remove/v2/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
-  })
-
-  it('does not crash if ETH is duplicated', () => {
-    cy.visit('/remove/v2/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'WETH')
-  })
 })

cypress/e2e/service-worker.test.ts

@@ -9,7 +9,7 @@ describe('Service Worker', () => {
         throw new Error(
           '\n' +
             'Service Worker tests must be run on a production-like build\n' +
-            'To test, build with `yarn build:e2e` and serve with `yarn serve`'
+            'To test, build with `yarn build` and serve with `yarn serve`'
         )
       }
     })
@@ -20,66 +20,78 @@ describe('Service Worker', () => {
     }
   })
 
-  function unregister() {
-    return cy.log('unregister service worker').then(async () => {
-      const cacheKeys = await window.caches.keys()
-      const cacheKey = cacheKeys.find((key) => key.match(/precache/))
-      if (cacheKey) {
-        await window.caches.delete(cacheKey)
-      }
-
+  function unregisterServiceWorker() {
+    return cy.log('unregisters service worker').then(async () => {
       const sw = await window.navigator.serviceWorker.getRegistration(Cypress.config().baseUrl ?? undefined)
       await sw?.unregister()
     })
   }
-  before(unregister)
-  after(unregister)
+  before(unregisterServiceWorker)
+  after(unregisterServiceWorker)
 
   beforeEach(() => {
-    cy.intercept({ hostname: 'www.google-analytics.com' }, (req) => {
-      const body = req.body.toString()
-      if (req.query['ep.event_category'] === 'Service Worker' || body.includes('Service%20Worker')) {
-        if (req.query['en'] === 'Not Installed' || body.includes('Not%20Installed')) {
-          req.alias = 'NotInstalled'
-        } else if (req.query['en'] === 'Cache Hit' || body.includes('Cache%20Hit')) {
-          req.alias = 'CacheHit'
-        } else if (req.query['en'] === 'Cache Miss' || body.includes('Cache%20Miss')) {
-          req.alias = 'CacheMiss'
-        }
+    cy.intercept('https://api.uniswap.org/v1/amplitude-proxy', (req) => {
+      const body = JSON.stringify(req.body)
+      const serviceWorkerStatus = body.match(/"service_worker":"(\w+)"/)?.[1]
+      if (serviceWorkerStatus) {
+        req.alias = `ServiceWorker:${serviceWorkerStatus}`
       }
     })
   })
 
-  it('installs a ServiceWorker', () => {
+  it('installs a ServiceWorker and reports the uninstalled status to analytics', () => {
     cy.visit('/', { serviceWorker: true })
-      .get('#swap-page')
-      // This is emitted after caching the entry file, which takes some time to load.
-      .wait('@NotInstalled', { timeout: 60000 })
-      .window()
-      .and((win) => {
-        expect(win.navigator.serviceWorker.controller?.state).to.equal('activated')
-      })
+    cy.wait('@ServiceWorker:uninstalled')
+    cy.window().should(
+      'have.nested.property',
+      // The parent is checked instead of the AUT because it is on the same origin,
+      // and the AUT will not be considered "activated" until the parent is idle.
+      'parent.navigator.serviceWorker.controller.state',
+      'activated'
+    )
   })
 
-  it('records a cache hit', () => {
-    cy.visit('/', { serviceWorker: true }).get('#swap-page').wait('@CacheHit', { timeout: 20000 })
-  })
-
-  it('records a cache miss', () => {
-    cy.then(async () => {
-      const cacheKeys = await window.caches.keys()
-      const cacheKey = cacheKeys.find((key) => key.match(/precache/))
-      assert(cacheKey)
-
-      const cache = await window.caches.open(cacheKey)
-      const keys = await cache.keys()
-      const key = keys.find((key) => key.url.match(/index/))
-      assert(key)
-
-      await cache.put(key, new Response())
+  describe('cache hit', () => {
+    it('reports the hit to analytics', () => {
+      cy.visit('/', { serviceWorker: true })
+      cy.wait('@ServiceWorker:hit')
+    })
+  })
+
+  describe('cache miss', () => {
+    let cache: Cache | undefined
+    let request: Request | undefined
+    let response: Response | undefined
+    before(() => {
+      // Mocks the index.html in the cache to force a cache miss.
+      cy.visit('/', { serviceWorker: true }).then(async () => {
+        const cacheKeys = await window.caches.keys()
+        const cacheKey = cacheKeys.find((key) => key.match(/precache/))
+        assert(cacheKey)
+
+        cache = await window.caches.open(cacheKey)
+        const keys = await cache.keys()
+        request = keys.find((key) => key.url.match(/index/))
+        assert(request)
+
+        response = await cache.match(request)
+        assert(response)
+
+        await cache.put(request, new Response())
+      })
+    })
+    after(() => {
+      // Restores the index.html in the cache so that re-runs behave as expected.
+      // This is necessary because the Service Worker will not re-populate the cache.
+      cy.then(async () => {
+        if (cache && request && response) {
+          await cache.put(request, response)
+        }
+      })
+    })
+    it('reports the miss to analytics', () => {
+      cy.visit('/', { serviceWorker: true })
+      cy.wait('@ServiceWorker:miss')
     })
-      .visit('/', { serviceWorker: true })
-      .get('#swap-page')
-      .wait('@CacheMiss', { timeout: 20000 })
   })
 })

cypress/e2e/swap.test.ts

@@ -1,358 +0,0 @@
-import { BigNumber } from '@ethersproject/bignumber'
-import { parseEther } from '@ethersproject/units'
-import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
-
-import { UNI, USDC_MAINNET } from '../../src/constants/tokens'
-import { getTestSelector } from '../utils'
-
-const UNI_MAINNET = UNI[SupportedChainId.MAINNET]
-
-describe('Swap', () => {
-  describe('Swap on main page', () => {
-    before(() => {
-      cy.visit('/swap', { ethereum: 'hardhat' })
-    })
-
-    it('starts with ETH selected by default', () => {
-      cy.get(`#swap-currency-input .token-amount-input`).should('have.value', '')
-      cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'ETH')
-      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
-      cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'Select 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.visit('/swap', { ethereum: 'hardhat' })
-        .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.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.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.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.visit('/swap')
-      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.visit('/swap')
-      cy.contains('Settings').should('not.exist')
-      cy.get(getTestSelector('swap-settings-button')).click()
-      cy.contains('Max slippage').should('exist')
-      cy.contains('Transaction deadline').should('exist')
-      cy.contains('Auto Router API').should('exist')
-      cy.get(getTestSelector('swap-settings-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', '')
-    })
-
-    it('can swap ETH for USDC', () => {
-      cy.visit('/swap', { ethereum: 'hardhat' })
-      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()
-
-            // ui check
-            cy.get('#swap-currency-output [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialBalance + BALANCE_INCREMENT}`
-            )
-
-            // chain state check
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, USDC_MAINNET))
-              .then((balance) => Number(balance.toFixed(1)))
-              .should('eq', initialBalance + BALANCE_INCREMENT)
-          })
-      })
-    })
-  })
-
-  it('should be able to wrap ETH', () => {
-    const BALANCE_INCREMENT = 1
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat()
-      .then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-          .then((balance) => Number(balance.toFixed(1)))
-          .then((initialWethBalance) => {
-            // Select WETH for the token output.
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.contains('WETH').click()
-
-            // Enter the amount to wrap.
-            cy.get('#swap-currency-output .token-amount-input').clear().type(BALANCE_INCREMENT.toString())
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-
-            // Click the wrap button.
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // The pending transaction indicator should be visible.
-            cy.get(getTestSelector('web3-status-connected')).should('have.descendants', ':contains("1 Pending")')
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be gone.
-            cy.get(getTestSelector('web3-status-connected')).should('not.have.descendants', ':contains("1 Pending")')
-
-            // The UI balance should have increased.
-            cy.get('#swap-currency-output [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialWethBalance + BALANCE_INCREMENT}`
-            )
-
-            // There should be a successful wrap notification.
-            cy.contains('Wrapped').should('exist')
-
-            // The user's WETH account balance should have increased
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-              .then((balance) => Number(balance.toFixed(1)))
-              .should('eq', initialWethBalance + BALANCE_INCREMENT)
-          })
-      })
-  })
-
-  it('should be able to unwrap WETH', () => {
-    const BALANCE_INCREMENT = 1
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat()
-      .then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET])).then(
-          (initialBalance) => {
-            // Select WETH for the token output.
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.contains('WETH').click()
-
-            // Enter the amount to wrap.
-            cy.get('#swap-currency-output .token-amount-input').clear().type(BALANCE_INCREMENT.toString())
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-
-            // Click the wrap button.
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be visible.
-            cy.contains('1 Pending').should('exist')
-            // The user should see a notification telling them they successfully wrapped their ETH.
-            cy.contains('Wrapped').should('exist')
-
-            // Switch to unwrapping the ETH we just wrapped.
-            cy.get(getTestSelector('swap-currency-button')).click()
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-
-            // Click the Unwrap button.
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // The pending transaction indicator should be visible.
-            cy.contains('1 Pending').should('exist')
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be gone.
-            cy.contains('1 Pending').should('not.exist')
-            // The user should see a notification telling them they successfully unwrapped their ETH.
-            cy.contains('Unwrapped').should('exist')
-
-            // The UI balance should have decreased.
-            cy.get('#swap-currency-input [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialBalance.toFixed(0)}`
-            )
-
-            // There should be a successful unwrap notification.
-            cy.contains('Unwrapped').should('exist')
-
-            // The user's WETH account balance should not have changed from the initial balance
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-              .then((balance) => balance.toFixed(0))
-              .should('eq', initialBalance.toFixed(0))
-          }
-        )
-      })
-  })
-
-  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'))
-
-        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')
-      })
-  })
-
-  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()
-
-          // 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')
-
-          // 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
-            })
-          })
-        })
-      })
-  })
-})

cypress/e2e/swap/errors.test.ts

@@ -0,0 +1,119 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { CurrencyAmount } from '@uniswap/sdk-core'
+
+import { DEFAULT_DEADLINE_FROM_NOW } from '../../../src/constants/misc'
+import { DAI, USDC_MAINNET } from '../../../src/constants/tokens'
+import { getBalance, getTestSelector } from '../../utils'
+
+describe('Swap errors', () => {
+  it('wallet rejection', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
+    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('transaction past deadline', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
+    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', '')
+
+      // Submit transaction
+      cy.get('#swap-button').click()
+      cy.contains('Confirm swap').click()
+      cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
+      cy.contains('Swap submitted')
+      cy.get(getTestSelector('confirmation-close-icon')).click()
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+
+      // 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('slippage failure', () => {
+    cy.visit(`/swap?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`)
+    cy.hardhat({ automine: false }).then(async (hardhat) => {
+      await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(USDC_MAINNET, 500e6))
+      await hardhat.mine()
+      await Promise.all([
+        hardhat.approval.setTokenAllowanceForPermit2({ owner: hardhat.wallet, token: USDC_MAINNET }),
+        hardhat.approval.setPermit2Allowance({ owner: hardhat.wallet, token: USDC_MAINNET }),
+      ])
+      await hardhat.mine()
+    })
+
+    getBalance(DAI).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('Swap submitted')
+        if (i === 0) {
+          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')
+
+      cy.contains('Swap failed')
+
+      // Verify only 1 transaction occurred
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+      cy.get(getTestSelector('popups')).contains('Swap failed')
+      getBalance(DAI).should('be.closeTo', initialBalance + 200, 1)
+    })
+  })
+})

cypress/e2e/swap/settings.test.ts

@@ -0,0 +1,16 @@
+import { FeatureFlag } from '../../../src/featureFlags'
+import { getTestSelector } from '../../utils'
+
+describe('Swap settings', () => {
+  it('Opens and closes the settings menu', () => {
+    cy.visit('/swap', { featureFlags: [FeatureFlag.uniswapXEnabled] })
+    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('UniswapX').should('exist')
+    cy.contains('Local routing').should('exist')
+    cy.get(getTestSelector('open-settings-dialog-button')).click()
+    cy.contains('Settings').should('not.exist')
+  })
+})

cypress/e2e/swap/swap.test.ts

@@ -0,0 +1,90 @@
+import { ChainId } from '@uniswap/sdk-core'
+
+import { UNI, USDC_MAINNET } from '../../../src/constants/tokens'
+import { getBalance, getTestSelector } from '../../utils'
+
+const UNI_MAINNET = UNI[ChainId.MAINNET]
+
+describe('Swap', () => {
+  describe('Swap on main page', () => {
+    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('should default inputs from URL params ', () => {
+      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}`)
+      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}`)
+      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('inputs reset when navigating between pages', () => {
+      cy.visit('/swap')
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+      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('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', '')
+
+      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')
+
+      cy.window().trigger('blur')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+    })
+
+    it('swaps ETH for USDC', () => {
+      cy.visit('/swap')
+      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.get(getTestSelector('common-base-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('Swap submitted')
+        cy.get(getTestSelector('confirmation-close-icon')).click()
+        cy.contains('Swap 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/timeToSwap.test.ts

@@ -0,0 +1,45 @@
+import { SwapEventName } from '@uniswap/analytics-events'
+
+import { USDC_MAINNET } from '../../../src/constants/tokens'
+import { getTestSelector } from '../../utils'
+
+describe('time-to-swap logging', () => {
+  it('completes two swaps and verifies the TTS logging for the first', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
+    cy.hardhat()
+
+    // First swap in the session:
+    // 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.get(getTestSelector('confirmation-close-icon')).click()
+
+    cy.get(getTestSelector('popups')).contains('Swapped')
+
+    // Verify logging
+    cy.waitForAmplitudeEvent(SwapEventName.SWAP_TRANSACTION_COMPLETED).then((event: any) => {
+      cy.wrap(event.event_properties).should('have.property', 'time_to_swap')
+      cy.wrap(event.event_properties.time_to_swap).should('be.a', 'number')
+      cy.wrap(event.event_properties.time_to_swap).should('be.gte', 0)
+    })
+
+    // Second swap in the session:
+    // Enter amount to swap
+    cy.get('#swap-currency-output .token-amount-input').clear().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.get(getTestSelector('confirmation-close-icon')).click()
+
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    cy.waitForAmplitudeEvent(SwapEventName.SWAP_TRANSACTION_COMPLETED).then((event: any) => {
+      cy.wrap(event.event_properties).should('not.have.property', 'time_to_swap')
+    })
+  })
+})

cypress/e2e/swap/wrap.test.ts

@@ -0,0 +1,78 @@
+import { ChainId, CurrencyAmount, WETH9 } from '@uniswap/sdk-core'
+
+import { getBalance, getTestSelector } from '../../utils'
+
+const WETH = WETH9[ChainId.MAINNET]
+
+describe('Swap wrap', () => {
+  beforeEach(() => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${WETH.address}`).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', () => {
+    getBalance(WETH).then((initialBalance) => {
+      cy.contains('Enter ETH amount')
+
+      // 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)
+
+      // Submit transaction
+      cy.contains('Wrap').click()
+      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')
+      cy.get(getTestSelector('popups')).contains('Wrapped')
+      const finalBalance = initialBalance + 1
+      cy.get('#swap-currency-output').contains(`Balance: ${finalBalance}`)
+      getBalance(WETH).should('equal', finalBalance)
+    })
+  })
+
+  it('should be able to unwrap WETH', () => {
+    cy.hardhat().then(async (hardhat) => {
+      await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(WETH, 1e18))
+      await hardhat.mine()
+    })
+
+    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').type('1').should('have.value', 1)
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', 1)
+
+      // Submit transaction
+      cy.contains('Unwrap').click()
+      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')
+      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'
 
@@ -93,9 +93,7 @@ describe('Token details', () => {
     beforeEach(() => {
       // On mobile widths, we just link back to /swap instead of rendering the swap component.
       cy.viewport(1200, 800)
-      cy.visit(`/tokens/ethereum/${UNI_MAINNET.address}`, {
-        ethereum: 'hardhat',
-      }).then(() => {
+      cy.visit(`/tokens/ethereum/${UNI_MAINNET.address}`).then(() => {
         cy.wait('@eth_blockNumber')
         cy.scrollTo('top')
       })
@@ -115,7 +113,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()
@@ -145,12 +143,13 @@ describe('Token details', () => {
     })
 
     it('should show a L2 token even if the user is connected to a different network', () => {
-      cy.visit('/tokens', { ethereum: 'hardhat' })
+      cy.visit('/tokens')
       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,24 +24,24 @@ 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')
       })
-    expect(cy.get('@dailyEthVol')).to.not.equal(cy.get('@yearlyEthVol'))
+    cy.get('@dailyEthVol').should('not.equal', cy.get('@yearlyEthVol'))
   })
 
   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,64 +1,53 @@
 import { getTestSelector } from '../utils'
 
 describe('Universal search bar', () => {
-  before(() => {
+  function openSearch() {
+    // can't just type "/" because on mobile it doesn't respond to that
+    cy.get('[data-cy="magnifying-icon"]').parent().eq(1).click()
+  }
+
+  beforeEach(() => {
     cy.visit('/')
-    cy.get('[data-cy="magnifying-icon"]')
-      .parent()
-      .then(($navIcon) => {
-        $navIcon.click()
-      })
   })
 
-  it('should yield clickable result for regular token or nft collection search term', () => {
-    // Search for uni token by name.
-    cy.get('[data-cy="search-bar-input"]').last().clear().type('uni')
-    cy.get('[data-cy="searchbar-token-row-UNI"]')
+  function getSearchBar() {
+    return cy.get('[data-cy="search-bar-input"]').last()
+  }
+
+  it('should yield clickable result that is then added to recent searches', () => {
+    // Search for UNI token by name.
+    openSearch()
+    getSearchBar().clear().type('uni')
+
+    cy.get(getTestSelector('searchbar-token-row-UNI'))
       .should('contain.text', 'Uniswap')
       .and('contain.text', 'UNI')
       .and('contain.text', '$')
       .and('contain.text', '%')
-    cy.get('[data-cy="searchbar-token-row-UNI"]').first().click()
+      .click()
+    cy.location('hash').should('equal', '#/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
 
-    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')
-  })
-
-  it.skip('should show recent tokens and popular tokens with empty search term', () => {
-    cy.get('[data-cy="magnifying-icon"]')
-      .parent()
-      .then(($navIcon) => {
-        $navIcon.click()
-      })
-    // Recently searched UNI token should exist.
-    cy.get('[data-cy="search-bar-input"]').last().clear()
-    cy.get('[data-cy="searchbar-dropdown"]')
-      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
-      .find('[data-cy="searchbar-token-row-UNI"]')
+    openSearch()
+    cy.get(getTestSelector('searchbar-dropdown'))
+      .contains(getTestSelector('searchbar-dropdown'), 'Recent searches')
+      .find(getTestSelector('searchbar-token-row-UNI'))
       .should('exist')
-
-    // Most popular 3 tokens should be shown.
-    cy.get('[data-cy="searchbar-dropdown"]')
-      .contains('[data-cy="searchbar-dropdown"]', 'Popular tokens')
-      .find('[data-cy^="searchbar-token-row"]')
-      .its('length')
-      .should('be.eq', 3)
   })
 
-  it.skip('should show blocked badge when blocked token is searched for', () => {
-    // Search for mTSLA, which is a blocked token.
-    cy.get('[data-cy="search-bar-input"]').last().clear().type('mtsla')
-    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
+  it('should go to the selected result when recent results are shown', () => {
+    // Seed recent results with UNI.
+    openSearch()
+    getSearchBar().type('uni')
+    cy.get(getTestSelector('searchbar-token-row-UNI'))
+    getSearchBar().clear().type('{esc}')
+
+    // Search a different token by name.
+    openSearch()
+    getSearchBar().type('eth')
+    cy.get(getTestSelector('searchbar-token-row-ETH'))
+
+    // Validate that we go to the searched/selected result.
+    getSearchBar().type('{enter}')
+    cy.url().should('contain', 'tokens/ethereum/NATIVE')
   })
 })

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')
+    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', { 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,144 @@
+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')
+    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'))
+    cy.url().should('contain', 'chain=polygon')
+
+    // 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')
+    cy.get(getTestSelector('web3-status-connected'))
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+  })
+
+  it('should be able to switch network after loading from URL param', () => {
+    cy.visit('/swap?chain=polygon')
+    cy.get(getTestSelector('web3-status-connected'))
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+
+    // switching to another chain clears query param
+    switchChain('Ethereum')
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Ethereum')
+    cy.url().should('not.contain', 'chain=polygon')
+  })
+})

cypress/e2e/wallet-dropdown.test.ts

@@ -1,96 +1,132 @@
 import { getTestSelector } from '../utils'
 
-function visit(darkMode: boolean) {
-  cy.visit('/swap', {
-    onBeforeLoad(win) {
-      cy.stub(win, 'matchMedia')
-        .withArgs('(prefers-color-scheme: dark)')
-        .returns({
-          matches: darkMode,
-          addEventListener() {
-            // do nothing
-          },
-        })
-    },
-  })
-}
-
 describe('Wallet Dropdown', () => {
-  before(() => {
-    cy.visit('/pools')
+  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)')
+      cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+
+      cy.get(getTestSelector('theme-darkmode')).click()
+      cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      cy.get(getTestSelector('theme-darkmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+
+      cy.get(getTestSelector('theme-auto')).click()
+      cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      cy.get(getTestSelector('theme-auto')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    })
+  }
+
+  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.location('hash').should('match', /\?lng=en-US$/)
+      cy.contains('Uniswap available in: English').should('not.exist')
+    })
+  }
+
+  describe('connected', () => {
+    beforeEach(() => {
+      cy.visit('/')
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+    })
+    itChangesTheme()
+    itChangesLocale()
   })
 
-  it('should change the theme', () => {
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('wallet-settings')).click()
-    cy.get(getTestSelector('theme-lightmode')).click()
+  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('theme-lightmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-
-    cy.get(getTestSelector('theme-darkmode')).click()
-    cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-darkmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-
-    cy.get(getTestSelector('theme-auto')).click()
-    cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
-    cy.get(getTestSelector('theme-auto')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+      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')
+    })
   })
 
-  it('should select a language', () => {
-    cy.get(getTestSelector('wallet-language-item')).contains('Deutsch').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Sprache')
-    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()
+  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()
+    })
+    itChangesTheme()
+    itChangesLocale()
   })
 
-  it('should change the theme when not connected', () => {
-    cy.get(getTestSelector('wallet-disconnect')).click()
-    cy.get(getTestSelector('wallet-settings')).click()
-    cy.get(getTestSelector('theme-lightmode')).should('exist')
+  describe('with color theme', () => {
+    function visitSwapWithColorTheme({ dark }: { dark: boolean }) {
+      cy.visit('/swap', {
+        onBeforeLoad(win) {
+          cy.stub(win, 'matchMedia')
+            .withArgs('(prefers-color-scheme: dark)')
+            .returns({
+              matches: dark,
+              addEventListener() {
+                /* noop */
+              },
+              removeEventListener() {
+                /* noop */
+              },
+            })
+        },
+      })
+    }
+
+    it('should properly use dark system theme when auto theme setting is selected', () => {
+      visitSwapWithColorTheme({ dark: true })
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+      cy.get(getTestSelector('theme-auto')).click()
+      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(152, 161, 192)')
+    })
+
+    it('should properly use light system theme when auto theme setting is selected', () => {
+      visitSwapWithColorTheme({ dark: false })
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+      cy.get(getTestSelector('theme-auto')).click()
+      cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(119, 128, 160)')
+    })
   })
 
-  it('should select a language when not connected', () => {
-    cy.get(getTestSelector('wallet-language-item')).contains('Deutsch').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Sprache')
-    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()
-  })
+  describe('mobile', () => {
+    beforeEach(() => {
+      cy.viewport('iphone-6').visit('/')
+    })
 
-  it('should properly use dark system theme when auto theme setting is selected', () => {
-    visit(true)
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('wallet-settings')).click()
-    cy.get(getTestSelector('theme-auto')).click()
-    cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(152, 161, 192)')
-  })
+    it('should dismiss the wallet bottom sheet when clicking buy crypto', () => {
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-buy-crypto')).click()
+      cy.contains('Buy crypto').should('not.be.visible')
+    })
 
-  it('should properly use light system theme when auto theme setting is selected', () => {
-    visit(false)
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('wallet-settings')).click()
-    cy.get(getTestSelector('theme-auto')).click()
-    cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(119, 128, 160)')
-  })
-
-  it('should dismiss the wallet bottom sheet when clicking buy crypto', () => {
-    visit(false)
-    cy.viewport('iphone-6')
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('wallet-buy-crypto')).click()
-    cy.contains('Buy crypto').should('not.be.visible')
-  })
-
-  it('should use a bottom sheet and dismiss when on a mobile screen size', () => {
-    visit(true)
-    cy.viewport('iphone-6')
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.root().click(15, 40)
-    cy.get(getTestSelector('wallet-settings')).should('not.be.visible')
+    it('should use a bottom sheet and dismiss when on a mobile screen size', () => {
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.root().click(15, 40)
+      cy.get(getTestSelector('wallet-settings')).should('not.be.visible')
+    })
   })
 })

cypress/fixtures/mini-portfolio/pools.json

@@ -0,0 +1 @@
+{}

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,10 +2,9 @@ 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'
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -13,15 +12,19 @@ declare global {
     interface ApplicationWindow {
       ethereum: Eip1193Bridge
     }
+    interface Chainable<Subject> {
+      /**
+       * Wait for a specific event to be sent to amplitude. If the event is found, the subject will be the event.
+       *
+       * @param {string} eventName - The type of the event to search for e.g. SwapEventName.SWAP_TRANSACTION_COMPLETED
+       * @param {number} timeout - The maximum amount of time (in ms) to wait for the event.
+       * @returns {Chainable<Subject>}
+       */
+      waitForAmplitudeEvent(eventName: string, timeout?: number): Chainable<Subject>
+    }
     interface VisitOptions {
       serviceWorker?: true
       featureFlags?: Array<FeatureFlag>
-      /**
-       * The mock ethereum provider to inject into the page.
-       * @default 'goerli'
-       */
-      // TODO(INFRA-175): Migrate all usage of 'goerli' to 'hardhat'.
-      ethereum?: 'goerli' | 'hardhat'
       /**
        * Initial user state.
        * @default {@type import('../utils/user-state').CONNECTED_WALLET_USER_STATE}
@@ -39,8 +42,7 @@ Cypress.Commands.overwrite(
     if (typeof url !== 'string') throw new Error('Invalid arguments. The first argument to cy.visit must be the path.')
 
     // Add a hash in the URL if it is not present (to use hash-based routing correctly with queryParams).
-    let hashUrl = url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url
-    if (options?.ethereum === 'goerli') hashUrl += `${url.includes('?') ? '&' : '?'}chain=goerli`
+    const hashUrl = url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url
 
     return cy
       .intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 })
@@ -58,7 +60,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.
@@ -68,13 +70,29 @@ Cypress.Commands.overwrite(
             }
 
             // Inject the mock ethereum provider.
-            if (options?.ethereum === 'hardhat') {
-              win.ethereum = provider
-            } else {
-              win.ethereum = injected
-            }
+            win.ethereum = provider
           },
         })
       )
   }
 )
+
+Cypress.Commands.add('waitForAmplitudeEvent', (eventName, timeout = 5000 /* 5s */) => {
+  const startTime = new Date().getTime()
+
+  function checkRequest() {
+    return cy.wait('@amplitude', { timeout }).then((interception) => {
+      const events = interception.request.body.events
+      const event = events.find((event: any) => event.event_type === eventName)
+
+      if (event) {
+        return cy.wrap(event)
+      } else if (new Date().getTime() - startTime > timeout) {
+        throw new Error(`Event ${eventName} not found within the specified timeout`)
+      } else {
+        return checkRequest()
+      }
+    })
+  }
+  return checkRequest()
+})

cypress/support/ethereum.ts

@@ -1,74 +0,0 @@
-/**
- * Updates cy.visit() to include an injected window.ethereum provider.
- */
-
-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'
-
-// todo: figure out how env vars actually work in CI
-// const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
-const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19'
-
-// address of the above key
-const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
-const CHAIN_ID = SupportedChainId.GOERLI
-const HEXLIFIED_CHAIN_ID = `0x${CHAIN_ID.toString(16)}`
-
-const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 5)
-const signer = new Wallet(TEST_PRIVATE_KEY, provider)
-export const injected = new (class extends Eip1193Bridge {
-  chainId = CHAIN_ID
-
-  async sendAsync(...args: any[]) {
-    console.debug('sendAsync called', ...args)
-    return this.send(...args)
-  }
-  async send(...args: any[]) {
-    console.debug('send called', ...args)
-    const isCallbackForm = typeof args[0] === 'object' && typeof args[1] === 'function'
-    let callback
-    let method
-    let params
-    if (isCallbackForm) {
-      callback = args[1]
-      method = args[0].method
-      params = args[0].params
-    } else {
-      method = args[0]
-      params = args[1]
-    }
-    if (method === 'eth_requestAccounts' || method === 'eth_accounts') {
-      if (isCallbackForm) {
-        callback({ result: [TEST_ADDRESS_NEVER_USE] })
-      } else {
-        return Promise.resolve([TEST_ADDRESS_NEVER_USE])
-      }
-    }
-    if (method === 'eth_chainId') {
-      if (isCallbackForm) {
-        callback(null, { result: HEXLIFIED_CHAIN_ID })
-      } else {
-        return Promise.resolve(HEXLIFIED_CHAIN_ID)
-      }
-    }
-    try {
-      const result = await super.send(method, params)
-      console.debug('result received', method, params, result)
-      if (isCallbackForm) {
-        callback(null, { result })
-      } else {
-        return result
-      }
-    } catch (error) {
-      if (isCallbackForm) {
-        callback(error, null)
-      } else {
-        throw error
-      }
-    }
-  }
-})(signer, provider)

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.
@@ -8,18 +9,17 @@ beforeEach(() => {
     req.headers['origin'] = 'https://app.uniswap.org'
   })
 
-  // Infura uses a test endpoint, which allow-lists http://localhost:3000 instead.
-  cy.intercept(/infura.io/, (req) => {
-    req.headers['referer'] = 'http://localhost:3000'
-    req.headers['origin'] = 'http://localhost:3000'
-    req.alias = req.body.method
-    req.continue()
-  })
+  // Infura is disabled for cypress tests - calls should be routed through the connected wallet instead.
+  cy.intercept(/infura.io/, { statusCode: 404 })
+
+  // 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)
     const byteSize = new Blob([requestBody]).size
+    req.alias = 'amplitude'
     req.reply(
       JSON.stringify({
         code: 200,
@@ -39,3 +39,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: any) =>
+      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

@@ -1,17 +1,13 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "esModuleInterop": true,
+    "composite": false,
     "incremental": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "noEmit": true,
-    "strict": true,
+    "isolatedModules": false,
+    "noImplicitAny": false,
     "target": "ES5",
     "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/cypress", // avoid clobbering the build tsbuildinfo
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
   },
-  "exclude": ["node_modules"],
   "include": ["**/*.ts"],
-  "watchOptions": {
-    "excludeDirectories": ["node_modules"]
-  }
 }

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,6 @@
+import { ConnectionType } from '../../src/connection/types'
 import { UserState } from '../../src/state/user/reducer'
 
-export const CONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWallet: 'INJECTED' }
+export const CONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWallet: ConnectionType.INJECTED }
+
+export const DISCONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWallet: undefined }

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/README.md

@@ -0,0 +1,50 @@
+# Cloudflare Cloud Functions
+
+## Purpose
+
+These functions utilize Cloudflare Functions to dynamically inject meta tags server side for richer link sharing capabilities.
+
+## Functions
+
+Currently, there are 2 types of cloudflare functions developed
+
+- Meta Data Injectors - Workers that inject [Open Graph](https://ogp.me/) standardized meta tags into the `header` of specific webpages.
+  - Currently we support this functionaltiy for three separate webpages: NFT Assets, NFT Collections, and Token Detail Pages
+  - These functions query data from GraphQL and then formats them into HTML `meta` tags to be injected
+- Dynamically Generated Images - Utilizes Vercel's [Open Graph Image Generation Library](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) to create custom thumbnails for specific webpages
+  - Currently supports NFT Assets, NFT Collections, and Token Detail Pages
+  - These functions query data from GraphQL, and utilize `Satori` to convert HTML into a png image response which is then returned when the api is called.
+  - Can be found in the `api/image` folder. 
+
+## Testing
+
+Testing is done utilizing a custom jest environment as well as Cloudflare's local tester: `wrangler`. Wrangler enables testing locally by running a proxy to wrap `localhost`. Testing can be done the following ways.
+- Manually by running `yarn start:cloud` to setup wrangler on `localhost:3000`
+- Automated tests by running `yarn test:cloud` to setup both a jest and wrangler environment and automatically test features
+
+## Deployment
+
+Functions will be deployed to Cloudlfare where they will be ran automatically when the appropriate route is hit. 
+
+## Miscellaneous
+- Caching: In order to speed up webpage requests, repeated GraphQL queries will be saved and pulled using Cloudflare's Cache API.
+
+## Scripts
+
+- `yarn start:cloud` (NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --node-compat --proxy=3001 --port=3000 -- yarn start), script to start local wrangler environment
+  - `npx wrangler pages dev`: this basis of this command which starts a local instance of wrangler to test cloud functions
+  - `--node-compat`: wrangler option that enables compatibility with Node.js modules
+  - `--proxy:3001`: telling the proxy to listen on port 3001
+  - `--port=3000`: telling wrangler to run our proxy on port 3000
+  - `NODE_OPTIONS=--dns-result-order=ipv4first`: wrangler still serves to IPv4 which isn't compatible with Node 18 which default resolves to IPv6 so we need to specify to serve to IPv4
+  - `PORT-3001 --yarn start`: runs default yarn start on port 3001
+- `yarn test:cloud` (NODE_OPTIONS=--experimental-vm-modules yarn jest functions  --watch --config=functions/jest.config.json), script to test cloud functions with jest
+  - `NODE_OPTIONS=--experimental-vm-modules`: support for ES Modules and Web Assembly
+  - `--config=functions/jest.config.json`: specifying which config file to use
+
+  ## Additional Documents
+  - [Open Graph Protocol](https://ogp.me/)
+  - [Open Graph Image Generation](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
+  - [Cloudflare Workers](https://developers.cloudflare.com/workers/)
+  - [HTML Rewriter](https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/)
+  - [Cache API](https://developers.cloudflare.com/workers/runtime-apis/cache/)

functions/babel.config.js

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

functions/client.ts

@@ -0,0 +1,20 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+const GRAPHQL_ENDPOINT = 'https://api.uniswap.org/v1/graphql'
+
+//TODO: Figure out how to make ApolloClient global variable
+export default new ApolloClient({
+  connectToDevTools: true,
+  uri: GRAPHQL_ENDPOINT,
+  headers: {
+    'Content-Type': 'application/json',
+    Origin: 'https://app.uniswap.org',
+    'User-Agent':
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.110 Safari/537.36',
+  },
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'cache-first',
+    },
+  },
+})

functions/components/metaTagInjector.ts

@@ -0,0 +1,38 @@
+type MetaTagInjectorInput = {
+  title: string
+  image?: string
+  url: string
+}
+
+/**
+ * Listener class for Cloudflare's HTMLRewriter {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter}
+ * to inject meta tags into the <head> of an HTML document.
+ */
+export class MetaTagInjector implements HTMLRewriterElementContentHandlers {
+  constructor(private input: MetaTagInjectorInput) {}
+
+  append(element: Element, property: string, content: string) {
+    element.append(`<meta property="${property}" content="${content}"/>`, { html: true })
+  }
+
+  element(element: Element) {
+    //Open Graph Tags
+    this.append(element, 'og:title', this.input.title)
+    if (this.input.image) {
+      this.append(element, 'og:image', this.input.image)
+      this.append(element, 'og:image:width', '1200')
+      this.append(element, 'og:image:height', '630')
+      this.append(element, 'og:image:alt', this.input.title)
+    }
+    this.append(element, 'og:type', 'website')
+    this.append(element, 'og:url', this.input.url)
+
+    //Twitter Tags
+    this.append(element, 'twitter:card', 'summary_large_image')
+    this.append(element, 'twitter:title', this.input.title)
+    if (this.input.image) {
+      this.append(element, 'twitter:image', this.input.image)
+      this.append(element, 'twitter:image:alt', this.input.title)
+    }
+  }
+}

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,11 @@
+{
+  "globalSetup": "<rootDir>/global-setup.ts",
+  "globalTeardown": "<rootDir>/global-teardown.ts",
+  "preset": "ts-jest",
+  "transform": {
+    "'^.+\\.(ts|tsx)?$'": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest"
+  },
+  "testTimeout": 360000,
+  "cacheDirectory": "../node_modules/.cache/cloud-jest"
+}

functions/nfts/asset/[[index]].ts

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-unused-modules */
+import getAsset from '../../utils/getAsset'
+import getRequest from '../../utils/getRequest'
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const res = next()
+  try {
+    const { index } = params
+    const collectionAddress = index[0]?.toString()
+    const tokenId = index[1]?.toString()
+    return getRequest(res, request.url, () => getAsset(collectionAddress, tokenId, request.url))
+  } catch (e) {
+    return res
+  }
+}

functions/nfts/asset/__snapshots__/nft.test.ts.snap

@@ -0,0 +1,397 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should inject metadata for valid assets 1`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Azuki #2550"/><meta property="og:image" content="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Azuki #2550"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/2550"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Azuki #2550"/><meta property="twitter:image" content="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png"/><meta property="twitter:image:alt" content="Azuki #2550"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid assets 2`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Bored Ape Yacht Club #3735"/><meta property="og:image" content="https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Bored Ape Yacht Club #3735"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3735"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Bored Ape Yacht Club #3735"/><meta property="twitter:image" content="https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png"/><meta property="twitter:image:alt" content="Bored Ape Yacht Club #3735"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid assets 3`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="CryptoPunk #3947"/><meta property="og:image" content="https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="CryptoPunk #3947"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/3947"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="CryptoPunk #3947"/><meta property="twitter:image" content="https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png"/><meta property="twitter:image:alt" content="CryptoPunk #3947"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;

functions/nfts/asset/nft.test.ts

@@ -0,0 +1,64 @@
+const assets = [
+  {
+    address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
+    assetId: '2550',
+    collectionName: 'Azuki',
+    image:
+      'https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png',
+  },
+  {
+    address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+    assetId: '3735',
+    collectionName: 'Bored Ape Yacht Club',
+    image:
+      'https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png',
+  },
+  {
+    address: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb',
+    assetId: '3947',
+    collectionName: 'CryptoPunk',
+    image:
+      'https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png',
+  },
+]
+
+test.each(assets)('should inject metadata for valid assets', async (nft) => {
+  const url = 'http://127.0.0.1:3000/nfts/asset/' + nft.address + '/' + nft.assetId
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).toMatchSnapshot()
+  expect(body).toContain(`<meta property="og:title" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${nft.image}"/>`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
+  expect(body).toContain(`<meta property="og:type" content="website"/>`)
+  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
+  expect(body).toContain(`<meta property="og:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="twitter:image" content="${nft.image}"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
+})
+
+const invalidAssets = [
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/100000',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c545',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/-1',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//2550',
+]
+
+test.each(invalidAssets)('should not inject metadata for invalid asset calls', async (url) => {
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).not.toContain('og:title')
+  expect(body).not.toContain('og:image')
+  expect(body).not.toContain('og:image:width')
+  expect(body).not.toContain('og:image:height')
+  expect(body).not.toContain('og:type')
+  expect(body).not.toContain('og:url')
+  expect(body).not.toContain('og:image:alt')
+  expect(body).not.toContain('twitter:card')
+  expect(body).not.toContain('twitter:title')
+  expect(body).not.toContain('twitter:image')
+  expect(body).not.toContain('twitter:image:alt')
+})

functions/nfts/collection/[index].ts

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-unused-modules */
+import getCollection from '../../utils/getCollection'
+import getRequest from '../../utils/getRequest'
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const res = next()
+  try {
+    const { index } = params
+    const collectionAddress = index?.toString()
+    return getRequest(res, request.url, () => getCollection(collectionAddress, request.url))
+  } catch (e) {
+    return res
+  }
+}

functions/nfts/collection/__snapshots__/collection.test.ts.snap

@@ -0,0 +1,397 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should inject metadata for valid collections 1`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Azuki on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Azuki on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Azuki on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format"/><meta property="twitter:image:alt" content="Azuki on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid collections 2`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Bored Ape Yacht Club on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Bored Ape Yacht Club on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Bored Ape Yacht Club on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format"/><meta property="twitter:image:alt" content="Bored Ape Yacht Club on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid collections 3`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format"/><meta property="twitter:image:alt" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;

functions/nfts/collection/collection.test.ts

@@ -0,0 +1,63 @@
+const collections = [
+  {
+    address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
+    collectionName: 'Azuki',
+    image:
+      'https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format',
+  },
+  {
+    address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+    collectionName: 'Bored Ape Yacht Club',
+    image:
+      'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format',
+  },
+  {
+    address: '0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
+    collectionName: 'CLONE X - X TAKASHI MURAKAMI',
+    image:
+      'https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format',
+  },
+]
+
+test.each(collections)('should inject metadata for valid collections', async (collection) => {
+  const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).toMatchSnapshot()
+  expect(body).toContain(`<meta property="og:title" content="${collection.collectionName} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${collection.image}"/>`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
+  expect(body).toContain(`<meta property="og:type" content="website"/>`)
+  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
+  expect(body).toContain(`<meta property="og:image:alt" content="${collection.collectionName} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="${collection.collectionName} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:image" content="${collection.image}"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="${collection.collectionName} on Uniswap"/>`)
+})
+
+const invalidCollections = [
+  'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
+  'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545/10',
+  'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545//',
+  'http://127.0.0.1:3000/nfts/collection',
+]
+
+test.each(invalidCollections)(
+  'should not inject metadata for invalid collection urls',
+  async (url) => {
+    const body = await fetch(new Request(url)).then((res) => res.text())
+    expect(body).not.toContain('og:title')
+    expect(body).not.toContain('og:image')
+    expect(body).not.toContain('og:image:width')
+    expect(body).not.toContain('og:image:height')
+    expect(body).not.toContain('og:type')
+    expect(body).not.toContain('og:url')
+    expect(body).not.toContain('og:image:alt')
+    expect(body).not.toContain('twitter:card')
+    expect(body).not.toContain('twitter:title')
+    expect(body).not.toContain('twitter:image')
+    expect(body).not.toContain('twitter:image:alt')
+  },
+  50000
+)

functions/tokens/[[index]].ts

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-unused-modules */
+import { Chain } from '../../src/graphql/data/__generated__/types-and-hooks'
+import getRequest from '../utils/getRequest'
+import getToken from '../utils/getToken'
+
+const convertTokenAddress = (tokenAddress: string, networkName: string) => {
+  if (tokenAddress === 'NATIVE') {
+    switch (networkName) {
+      case Chain.Celo:
+        return '0x471EcE3750Da237f93B8E339c536989b8978a438'
+      case Chain.Polygon:
+        return '0x0000000000000000000000000000000000001010'
+      default:
+        return undefined
+    }
+  }
+  return tokenAddress
+}
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const res = next()
+  try {
+    const { index } = params
+    const networkName = index[0]?.toString().toUpperCase()
+    const tokenString = index[1]?.toString()
+    if (!tokenString) {
+      return res
+    }
+    const tokenAddress = convertTokenAddress(tokenString, networkName)
+    return getRequest(res, request.url, () => getToken(networkName, tokenAddress, request.url))
+  } catch (e) {
+    return res
+  }
+}

functions/tokens/__snapshots__/token.test.ts.snap

@@ -0,0 +1,529 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should inject metadata for valid tokens 1`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Get USDC on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get USDC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get USDC on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"/><meta property="twitter:image:alt" content="Get USDC on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid tokens 2`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Get ETH on Uniswap"/><meta property="og:image" content="https://token-icons.s3.amazonaws.com/eth.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get ETH on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/NATIVE"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get ETH on Uniswap"/><meta property="twitter:image" content="https://token-icons.s3.amazonaws.com/eth.png"/><meta property="twitter:image:alt" content="Get ETH on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid tokens 3`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Get MATIC on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get MATIC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/polygon/NATIVE"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get MATIC on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png"/><meta property="twitter:image:alt" content="Get MATIC on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;
+
+exports[`should inject metadata for valid tokens 4`] = `
+"<!DOCTYPE html>
+<html translate="no">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
+
+    <!--
+      . will be replaced with the URL of the \`public\` folder during build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+    -->
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      
+        content="script-src 'self' 'unsafe-inline'"
+      
+    />
+
+    <!-- 
+      Apple Smart App Banner for Safari on iOS
+      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
+     -->
+    <meta name="apple-itunes-app" content="app-id=6443944476">
+
+    <!--
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
+
+      /**
+          Explicitly load Inter var from public/ so it does not block LCP's critical path.
+        */
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(./fonts/Inter-roman.var.woff2) format('woff2');
+      }
+
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      button {
+        user-select: none;
+      }
+
+      html {
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
+      #background-radial-gradient {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
+      }
+
+      html,
+      body,
+      #root {
+        min-height: 100%;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html {
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        html {
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
+        }
+      }
+    </style>
+  <script defer src="./static/js/bundle.js"></script><meta property="og:title" content="Get PEPE on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get PEPE on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/0x6982508145454ce325ddbe47a25d4ec3d2311933"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get PEPE on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png"/><meta property="twitter:image:alt" content="Get PEPE on Uniswap"/></head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>
+"
+`;

functions/tokens/token.test.ts

@@ -0,0 +1,70 @@
+const tokens = [
+  {
+    address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+    network: 'ethereum',
+    symbol: 'USDC',
+    image:
+      'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
+  },
+  {
+    address: 'NATIVE',
+    network: 'ethereum',
+    symbol: 'ETH',
+    image: 'https://token-icons.s3.amazonaws.com/eth.png',
+  },
+  {
+    address: 'NATIVE',
+    network: 'polygon',
+    symbol: 'MATIC',
+    image:
+      'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png',
+  },
+  {
+    address: '0x6982508145454ce325ddbe47a25d4ec3d2311933',
+    network: 'ethereum',
+    symbol: 'PEPE',
+    image:
+      'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png',
+  },
+]
+
+test.each(tokens)('should inject metadata for valid tokens', async (token) => {
+  const url = 'http://127.0.0.1:3000/tokens/' + token.network + '/' + token.address
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).toMatchSnapshot()
+  expect(body).toContain(`<meta property="og:title" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${token.image}"/>`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
+  expect(body).toContain(`<meta property="og:type" content="website"/>`)
+  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
+  expect(body).toContain(`<meta property="og:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:image" content="${token.image}"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
+})
+
+const invalidTokens = [
+  'http://127.0.0.1:3000/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb49',
+  'http://127.0.0.1:3000/tokens/ethereum',
+  'http://127.0.0.1:3000/tokens/ethereun',
+  'http://127.0.0.1:3000/tokens/ethereum/0x0',
+  'http://127.0.0.1:3000/tokens/ethereum//',
+  'http://127.0.0.1:3000/tokens/potato/?potato=1',
+]
+
+test.each(invalidTokens)('should not inject metadata for invalid tokens', async (url) => {
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).not.toContain('og:title')
+  expect(body).not.toContain('og:image')
+  expect(body).not.toContain('og:image:width')
+  expect(body).not.toContain('og:image:height')
+  expect(body).not.toContain('og:type')
+  expect(body).not.toContain('og:url')
+  expect(body).not.toContain('og:image:alt')
+  expect(body).not.toContain('twitter:card')
+  expect(body).not.toContain('twitter:title')
+  expect(body).not.toContain('twitter:image')
+  expect(body).not.toContain('twitter:image:alt')
+})

functions/tsconfig.json

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

functions/utils/cache.test.ts

@@ -0,0 +1,43 @@
+import CacheMock from 'browser-cache-mock'
+
+import { mocked } from '../../src/test-utils/mocked'
+import Cache from './cache'
+
+const cacheMock = new CacheMock()
+
+const data = {
+  title: 'test',
+  image: 'testImage',
+  url: 'testUrl',
+}
+
+beforeAll(() => {
+  const globalAny: any = global
+  globalAny.caches = {
+    open: async () => cacheMock,
+    ...cacheMock,
+  }
+})
+
+test('Should put cache properly', async () => {
+  jest.spyOn(cacheMock, 'put')
+  await Cache.put(data, 'https://example.com')
+  expect(cacheMock.put).toHaveBeenCalledWith('https://example.com', expect.anything())
+  const call = mocked(cacheMock.put).mock.calls[0]
+  const response = JSON.parse(await (call[1] as Response).clone().text())
+  expect(response).toStrictEqual(data)
+
+  await expect(Cache.match('https://example.com')).resolves.toStrictEqual(data)
+})
+
+test('Should match cache properly', async () => {
+  jest.spyOn(cacheMock, 'match').mockResolvedValueOnce(new Response(JSON.stringify(data)))
+  const response = await Cache.match('https://example.com')
+  expect(response).toStrictEqual(data)
+})
+
+test('Should return undefined if not all data is present', async () => {
+  jest.spyOn(cacheMock, 'match').mockResolvedValueOnce(new Response(JSON.stringify({ ...data, title: undefined })))
+  const response = await Cache.match('https://example.com')
+  expect(response).toBeUndefined()
+})

functions/utils/cache.ts

@@ -0,0 +1,28 @@
+interface Data {
+  title: string
+  image: string
+  url: string
+}
+
+const CACHE_NAME = 'functions-cache' as const
+
+class Cache {
+  async match(request: string): Promise<Data | undefined> {
+    const cache = await caches.open(CACHE_NAME)
+    const response = await cache.match(request)
+    if (!response) return undefined
+    const data: Data = JSON.parse(await response.text())
+    if (!data.title || !data.image || !data.url) return undefined
+    return data
+  }
+
+  async put(data: Data, request: string) {
+    // Set max age to 1 week
+    const response = new Response(JSON.stringify(data))
+    response.headers.set('Cache-Control', 'max-age=604800')
+    const cache = await caches.open(CACHE_NAME)
+    await cache.put(request, response)
+  }
+}
+
+export default new Cache()

functions/utils/getAsset.ts

@@ -0,0 +1,38 @@
+import { AssetDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+function formatTitleName(name: string, collectionName: string, tokenId: string) {
+  if (name) {
+    return name
+  }
+  if (collectionName && tokenId) {
+    return collectionName + ' #' + tokenId
+  }
+  if (tokenId) {
+    return 'Asset #' + tokenId
+  }
+  return 'View NFT on Uniswap'
+}
+
+export default async function getAsset(collectionAddress: string, tokenId: string, url: string) {
+  const { data } = await client.query({
+    query: AssetDocument,
+    variables: {
+      address: collectionAddress,
+      filter: {
+        tokenIds: [tokenId],
+      },
+    },
+  })
+  const asset = data?.nftAssets?.edges[0]?.node
+  if (!asset) {
+    return undefined
+  }
+  const title = formatTitleName(asset.name, asset.collection?.name, asset.tokenId)
+  const formattedAsset = {
+    title,
+    image: asset.image?.url,
+    url,
+  }
+  return formattedAsset
+}

functions/utils/getCollection.ts

@@ -0,0 +1,21 @@
+import { CollectionDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+export default async function getCollection(collectionAddress: string, url: string) {
+  const { data } = await client.query({
+    query: CollectionDocument,
+    variables: {
+      addresses: collectionAddress,
+    },
+  })
+  const collection = data?.nftCollections?.edges[0]?.node
+  if (!collection || !collection.name) {
+    return undefined
+  }
+  const formattedAsset = {
+    title: collection.name + ' on Uniswap',
+    image: collection.image?.url,
+    url,
+  }
+  return formattedAsset
+}

functions/utils/getRequest.test.ts

@@ -0,0 +1,38 @@
+import * as matchers from 'jest-extended'
+expect.extend(matchers)
+
+import { mocked } from '../../src/test-utils/mocked'
+import Cache from './cache'
+import getRequest from './getRequest'
+
+jest.mock('./cache', () => ({
+  match: jest.fn(),
+  put: jest.fn(),
+}))
+
+test('should call Cache.match before calling getData when request is not cached', async () => {
+  const url = 'https://example.com'
+  const getData = jest.fn().mockResolvedValueOnce({
+    title: 'test',
+    image: 'testImage',
+    url: 'testUrl',
+  })
+  await getRequest(Promise.resolve(new Response()), url, getData)
+  expect(Cache.match).toHaveBeenCalledWith(url)
+  expect(getData).toHaveBeenCalled()
+  expect(Cache.match).toHaveBeenCalledBefore(getData)
+  expect(Cache.put).toHaveBeenCalledAfter(getData)
+})
+
+test('getData should not be called when request is cached', async () => {
+  const url = 'https://example.com'
+  mocked(Cache.match).mockResolvedValueOnce({
+    title: 'test',
+    image: 'testImage',
+    url: 'testUrl',
+  })
+  const getData = jest.fn()
+  await getRequest(Promise.resolve(new Response()), url, getData)
+  expect(Cache.match).toHaveBeenCalledWith(url)
+  expect(getData).not.toHaveBeenCalled()
+})

functions/utils/getRequest.ts

@@ -0,0 +1,31 @@
+import { MetaTagInjector } from '../components/metaTagInjector'
+import Cache from './cache'
+
+export default async function getRequest(
+  res: Promise<Response>,
+  url: string,
+  getData: () => Promise<
+    | {
+        title: string
+        image: string
+        url: string
+      }
+    | undefined
+  >
+) {
+  try {
+    const cachedData = await Cache.match(url)
+    if (cachedData) {
+      return new HTMLRewriter().on('head', new MetaTagInjector(cachedData)).transform(await res)
+    } else {
+      const data = await getData()
+      if (!data) {
+        return res
+      }
+      await Cache.put(data, url)
+      return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(await res)
+    }
+  } catch (e) {
+    return res
+  }
+}

functions/utils/getToken.ts

@@ -0,0 +1,33 @@
+import { TokenDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+function formatTitleName(symbol: string, name: string) {
+  if (symbol) {
+    return 'Get ' + symbol + ' on Uniswap'
+  }
+  if (name) {
+    return 'Get ' + name + ' on Uniswap'
+  }
+  return 'View Token on Uniswap'
+}
+
+export default async function getToken(networkName: string, tokenAddress: string | undefined, url: string) {
+  const { data } = await client.query({
+    query: TokenDocument,
+    variables: {
+      chain: networkName,
+      address: tokenAddress,
+    },
+  })
+  const asset = data?.token
+  if (!asset) {
+    return undefined
+  }
+  const title = formatTitleName(asset.symbol, asset.name)
+  const formattedAsset = {
+    title,
+    image: asset.project?.logoUrl,
+    url,
+  }
+  return formattedAsset
+}

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,25 +1,36 @@
+import { ChainId } from '@uniswap/sdk-core'
+import { UNIVERSAL_ROUTER_CREATION_BLOCK } from '@uniswap/universal-router-sdk'
+
 /* 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
-
-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: UNIVERSAL_ROUTER_CREATION_BLOCK(ChainId.MAINNET),
+    ...forkingConfig,
+  },
+  [ChainId.POLYGON]: {
+    url: `https://polygon-mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
+    blockNumber: UNIVERSAL_ROUTER_CREATION_BLOCK(ChainId.POLYGON),
+    ...forkingConfig,
+  },
+}
+
 module.exports = {
+  forks,
   networks: {
     hardhat: {
-      chainId: 1,
-      forking: mainnetFork,
+      chainId: ChainId.MAINNET,
+      forking: forks[ChainId.MAINNET],
       accounts: {
-        count: 1,
+        count: 2,
       },
       mining: {
         auto: true, // automine to make tests easier to write.

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,18 +15,21 @@
     "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 --node-compat --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",
     "serve": "serve build -l 3000",
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc",
+    "typecheck:cloud": "tsc -p functions/tsconfig.json",
+    "typecheck:cypress": "tsc -p cypress/tsconfig.json",
     "test": "craco test",
+    "test:cloud": "NODE_OPTIONS=--experimental-vm-modules yarn jest functions --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,7 +70,10 @@
     ]
   },
   "devDependencies": {
-    "@craco/craco": "6.4.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.22.7",
+    "@cloudflare/workers-types": "^4.20230710.1",
+    "@craco/craco": "^7.1.0",
     "@ethersproject/experimental": "^5.4.0",
     "@lingui/cli": "^3.9.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -95,33 +101,47 @@
     "@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.2.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",
-    "cypress": "10.3.1",
-    "cypress-hardhat": "^2.3.0",
+    "browser-cache-mock": "^0.1.7",
+    "buffer": "^6.0.3",
+    "concurrently": "^8.0.1",
+    "cypress": "12.12.0",
+    "cypress-hardhat": "^2.5.0",
     "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-extended": "^4.0.1",
     "jest-fail-on-console": "^3.1.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
-    "prettier": "^2.7.1",
-    "react-scripts": "^4.0.3",
+    "path-browserify": "^1.0.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",
+    "webpack-retry-chunk-load-plugin": "^3.1.1",
+    "wrangler": "^3.4.0",
     "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
@@ -136,6 +156,7 @@
     "@graphql-codegen/typescript-operations": "^2.5.8",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@graphql-codegen/typescript-resolvers": "^2.7.8",
+    "@juggle/resize-observer": "^3.4.0",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
@@ -150,25 +171,26 @@
     "@sentry/tracing": "^7.45.0",
     "@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": "^1.4.0",
+    "@uniswap/analytics-events": "^2.14.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/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/v2-core": "1.0.0",
+    "@uniswap/router-sdk": "^1.6.0",
+    "@uniswap/sdk-core": "^4.0.3",
+    "@uniswap/smart-order-router": "^3.15.0",
+    "@uniswap/token-lists": "^1.0.0-beta.33",
+    "@uniswap/uniswapx-sdk": "^1.1.0",
+    "@uniswap/universal-router-sdk": "^1.5.6",
+    "@uniswap/v2-core": "^1.0.1",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
-    "@uniswap/v2-sdk": "^3.0.1",
-    "@uniswap/v3-core": "1.0.0",
+    "@uniswap/v2-sdk": "^3.2.0",
+    "@uniswap/v3-core": "^1.0.1",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@uniswap/v3-sdk": "^3.9.0",
+    "@uniswap/v3-sdk": "^3.10.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -180,17 +202,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",
@@ -241,8 +262,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",
@@ -255,7 +276,7 @@
   },
   "engines": {
     "npm": "please-use-yarn",
-    "node": "14",
+    "node": "18.x",
     "yarn": ">=1.22"
   }
 }

public/.well-known/assetlinks.json

@@ -0,0 +1,33 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.uniswap",
+      "sha256_cert_fingerprints":
+        ["97:A5:81:51:DA:AF:8F:6E:65:3A:90:1E:82:12:6C:FB:61:2D:36:C7:CF:20:61:6B:A3:4C:52:CA:BC:58:43:8E"]
+    }
+  },
+  [
+    {
+      "relation": ["delegate_permission/common.handle_all_urls"],
+      "target": {
+        "namespace": "android_app",
+        "package_name": "com.uniswap.beta",
+        "sha256_cert_fingerprints":
+          ["E5:39:87:DC:4D:FD:4C:1B:A6:74:36:7D:3A:3B:6B:ED:9E:B3:66:89:92:8A:1B:B8:FC:1B:22:56:56:B4:46:A3"]
+      }
+    }
+  ],
+  [
+    {
+      "relation": ["delegate_permission/common.handle_all_urls"],
+      "target": {
+        "namespace": "android_app",
+        "package_name": "com.uniswap.dev",
+        "sha256_cert_fingerprints":
+          ["A8:A7:D4:DE:46:8E:BE:F6:DE:3B:62:2B:A7:26:60:F2:9A:4C:CD:AF:A6:96:C9:E5:7C:91:68:A1:29:2A:48:D3"]
+      }
+    }
+  ]
+]

public/CODEOWNERS

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

public/apple-app-site-association

@@ -0,0 +1,30 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "JH3UHGZD75.com.uniswap.mobile",
+          "JH3UHGZD75.com.uniswap.mobile.dev"
+        ],
+        "components": [
+          {
+            "#": "/nfts/asset/*",
+            "comment": "NFT Item"
+          },
+          {
+            "#": "/nfts/collection/*",
+            "comment": "NFT Collection"
+          },
+          {
+            "#": "/tokens/*",
+            "comment": "Token address"
+          },
+          {
+            "#": "/address/*",
+            "comment": "Wallet address"
+          }
+        ]
+      }
+    ]
+  }
+}

public/images/54x54_Verified_Check.svg

@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48223 46.7073C7.39664 45.6264 6.85526 43.9605 6.85814 41.7096V36.8327C6.8693 36.41 6.71466 35.9999 6.42734 35.69L2.981 32.2403C1.37846 30.6564 0.577148 29.0983 0.577148 27.5661C0.577148 26.0338 1.36838 24.4786 2.95082 22.9004L6.39716 19.4508C6.68527 19.1414 6.84004 18.7309 6.82795 18.3081L6.82795 13.4182C6.82795 11.1501 7.36932 9.47985 8.45205 8.40759C9.53477 7.33532 11.1876 6.79776 13.4105 6.79488L18.3128 6.79488C18.5176 6.80189 18.7217 6.7673 18.9128 6.69319C19.1038 6.61908 19.2778 6.50698 19.4243 6.36368L22.9138 2.91403C24.4991 1.34732 26.0527 0.559659 27.5749 0.551034C29.097 0.54241 30.6508 1.33007 32.2361 2.91403L35.6824 6.36368C35.834 6.50867 36.0132 6.6216 36.2093 6.69569C36.4055 6.76978 36.6145 6.80351 36.824 6.79488H41.6963C43.9421 6.79488 45.605 7.33677 46.6849 8.42054C47.7647 9.5043 48.3061 11.1702 48.309 13.4182V18.2951C48.2969 18.7179 48.4517 19.1285 48.7398 19.4378L52.1861 22.8875C53.7686 24.4686 54.5655 26.0238 54.577 27.5531C54.5885 29.0825 53.7915 30.6362 52.1861 32.2145L48.7398 35.6641C48.4525 35.974 48.2978 36.3842 48.309 36.8068V41.6837C48.309 43.9289 47.7633 45.5948 46.6719 46.6814C45.5806 47.768 43.922 48.3099 41.6963 48.3071H36.824C36.6144 48.2977 36.4052 48.3311 36.2089 48.4052C36.0127 48.4793 35.8336 48.5927 35.6824 48.7383L32.2361 52.1879C30.6508 53.7546 29.097 54.5423 27.5749 54.5509C26.0527 54.5595 24.4991 53.7719 22.9138 52.1879L19.4243 48.7383C19.2782 48.5943 19.1042 48.4818 18.9131 48.4077C18.7219 48.3335 18.5177 48.2993 18.3128 48.3071H13.4105C11.2077 48.3243 9.56496 47.791 8.48223 46.7073ZM25.225 37.9942C26.0971 37.9942 26.848 37.5581 27.3567 36.783L38.1848 19.8505C38.4997 19.3418 38.7904 18.7604 38.7904 18.2033C38.7904 17.0163 37.7245 16.2169 36.586 16.2169C35.8593 16.2169 35.2052 16.6045 34.6965 17.4281L25.1281 32.786L20.6225 27.045C20.0411 26.294 19.4597 26.0276 18.733 26.0276C17.5461 26.0276 16.6255 26.9723 16.6255 28.1835C16.6255 28.7649 16.8436 29.2978 17.2554 29.8065L22.9722 36.783C23.6262 37.6308 24.3287 37.9942 25.225 37.9942Z" fill="white"/>
+</svg>

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/analytics/index.tsx

@@ -0,0 +1,47 @@
+import {
+  sendAnalyticsEvent as sendAnalyticsTraceEvent,
+  Trace as AnalyticsTrace,
+  TraceEvent as AnalyticsEvent,
+} from '@uniswap/analytics'
+import { atomWithStorage, useAtomValue } from 'jotai/utils'
+import { memo } from 'react'
+
+export { getDeviceId, initializeAnalytics, OriginApplication, user, useTrace } from '@uniswap/analytics'
+
+const allowAnalyticsAtomKey = 'allow_analytics'
+export const allowAnalyticsAtom = atomWithStorage<boolean>(allowAnalyticsAtomKey, true)
+
+export const Trace = memo((props: React.ComponentProps<typeof AnalyticsTrace>) => {
+  const allowAnalytics = useAtomValue(allowAnalyticsAtom)
+  const shouldLogImpression = allowAnalytics ? props.shouldLogImpression : false
+
+  return <AnalyticsTrace {...props} shouldLogImpression={shouldLogImpression} />
+})
+
+Trace.displayName = 'Trace'
+
+export const TraceEvent = memo((props: React.ComponentProps<typeof AnalyticsEvent>) => {
+  const allowAnalytics = useAtomValue(allowAnalyticsAtom)
+  const shouldLogImpression = allowAnalytics ? props.shouldLogImpression : false
+
+  return <AnalyticsEvent {...props} shouldLogImpression={shouldLogImpression} />
+})
+
+TraceEvent.displayName = 'TraceEvent'
+
+export const sendAnalyticsEvent: typeof sendAnalyticsTraceEvent = (event, properties) => {
+  let allowAnalytics = true
+
+  try {
+    const value = localStorage.getItem(allowAnalyticsAtomKey)
+
+    if (typeof value === 'string') {
+      allowAnalytics = JSON.parse(value)
+    }
+    // eslint-disable-next-line no-empty
+  } catch {}
+
+  if (allowAnalytics) {
+    sendAnalyticsTraceEvent(event, properties)
+  }
+}

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>