build: fix promotion sha (#7021)

* ci: add global CODEOWNERS

* fix: improve v2 network support

* add an unsupported message to all v2 pages

* add guard on transaction callbacks

* fix: dep array

---------

Co-authored-by: UL Service Account <hello-happy-puppy@users.noreply.github.com>
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

.env

@@ -1,10 +1,15 @@
 # These API keys are intentionally public. Please do not report them - thank you for your concern.
-REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
+ESLINT_NO_DEV_ERRORS=true
 REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
-REACT_APP_AWS_API_ACCESS_KEY="AKIAYJJWW6AQ47ODATHN"
-REACT_APP_AWS_API_ACCESS_SECRET="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"
-REACT_APP_AWS_X_API_KEY="z9dReS5UtHu7iTrUsTuWRozLthi3AxOZlvobrIdr14"
 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_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"
+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"
-ESLINT_NO_DEV_ERRORS=true
+REACT_APP_UNISWAP_API_URL="https://api.uniswap.org/v2"
+REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"

.env.production

@@ -1,6 +1,15 @@
+# These API keys are intentionally public. Please do not report them - thank you for your concern.
 REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
-REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"
+REACT_APP_BNB_RPC_URL="https://old-wispy-arrow.bsc.quiknode.pro/f5c060177236065c1058531a0615ab4f7a34a2fd"
+REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
-REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
-REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"
+REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_MOONPAY_API="https://api.moonpay.com"
+REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=production"
+REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_live_uQG4BJC4w3cxnqpcSqAfohdBFDTsY6E"
+REACT_APP_SENTRY_ENABLED=true
+REACT_APP_SENTRY_TRACES_SAMPLE_RATE=0.00003
+REACT_APP_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
+THE_GRAPH_SCHEMA_ENDPOINT="https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3"

.eslintrc.js

@@ -0,0 +1,78 @@
+/* eslint-env node */
+
+require('@uniswap/eslint-config/load')
+
+const rulesDirPlugin = require('eslint-plugin-rulesdir')
+rulesDirPlugin.RULES_DIR = 'eslint_rules'
+
+module.exports = {
+  extends: ['@uniswap/eslint-config/react'],
+  plugins: ['rulesdir'],
+  overrides: [
+    {
+      files: ['**/*'],
+      rules: {
+        'multiline-comment-style': ['error', 'separate-lines'],
+        'rulesdir/no-undefined-or': 'error',
+      },
+    },
+    {
+      // Configuration/typings typically export objects/definitions that are used outside of the transpiled package
+      // (eg not captured by the tsconfig). Because it's typical and not exceptional, this is turned off entirely.
+      files: ['**/*.config.*', '**/*.d.ts'],
+      rules: {
+        'import/no-unused-modules': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        'import/no-restricted-paths': [
+          'error',
+          {
+            zones: [
+              {
+                target: ['src/**/*[!.test].ts', 'src/**/*[!.test].tsx'],
+                from: 'src/test-utils',
+              },
+            ],
+          },
+        ],
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: 'moment',
+                // tree-shaking for moment is not configured because it degrades performance - see craco.config.cjs.
+                message: 'moment is not configured for tree-shaking. If you use it, update the Webpack configuration.',
+              },
+              {
+                name: 'zustand',
+                importNames: ['default'],
+                message: 'Default import from zustand is deprecated. Import `{ create }` instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      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.`,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+}

.eslintrc.json

@@ -1,99 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      // Allows for the parsing of JSX
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "ignorePatterns": [
-    "src/types/v3",
-    "src/abis/types",
-    "src/locales/**/*.js",
-    "src/locales/**/en-US.po",
-    "node_modules",
-    "coverage",
-    "build",
-    "dist",
-    ".DS_Store",
-    ".env.local",
-    ".env.development.local",
-    ".env.test.local",
-    ".env.production.local",
-    ".idea/",
-    ".vscode/",
-    "package-lock.json",
-    "yarn.lock"
-  ],
-  "extends": [
-    "react-app",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["simple-import-sort", "unused-imports"],
-  "rules": {
-    "unused-imports/no-unused-imports": "error",
-    "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "prettier/prettier": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
-    "object-shorthand": ["error", "always"],
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "ethers",
-            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
-          },
-          {
-            "name": "styled-components",
-            "message": "Please import from styled-components/macro."
-          },
-          {
-            "name": "@lingui/macro",
-            "importNames": ["t"],
-            "message": "Please use <Trans> instead of t."
-          }
-        ],
-        "patterns": [
-          {
-            "group": ["**/dist"],
-            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
-          },
-          {
-            "group": ["!styled-components/macro"]
-          }
-        ]
-      }
-    ],
-    "@typescript-eslint/no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "@ethersproject/providers",
-            "message": "Please only use Providers instantiated in constants/providers to improve traceability.",
-            "allowTypeImports": true
-          }
-        ]
-      }
-    ]
-  }
-}

.github/CODEOWNERS

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

.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/report/action.yml

@@ -0,0 +1,48 @@
+name: Report
+description: Report test failures via Slack
+inputs:
+  name:
+    description: The name of the failing test
+    required: true
+  SLACK_WEBHOOK_URL:
+    description: The webhook URL to send the report to
+    required: true
+
+runs:
+  using: composite
+  steps:
+    - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      with:
+        payload: |
+          {
+            "text": "${{ inputs.name }} failing on `${{ github.ref_name }}`",
+            "blocks": [
+              {
+                "type": "section",
+                "text": {
+                  "type": "mrkdwn",
+                  "text": "*${{ inputs.name }} failing on `${{ github.ref_name }}`:* <https://github.com/${{ github.repository}}/actions/runs/${{ github.run_id }}|view failing action>"
+                }
+              },
+              {
+                "type": "section",
+                "text": {
+                  "type": "mrkdwn",
+                  "text": "_This is blocking pull requests and branch promotions._\n_Please prioritize fixing the build._"
+                }
+              }
+            ]
+          }
+      env:
+        SLACK_WEBHOOK_URL: ${{ inputs.SLACK_WEBHOOK_URL }}
+        SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+    # The !oncall bot requires its own message:
+    - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+      with:
+        payload: |
+          {
+            "text": "!oncall web"
+          }
+      env:
+        SLACK_WEBHOOK_URL: ${{ inputs.SLACK_WEBHOOK_URL }}
+        SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/actions/setup/action.yml

@@ -1,4 +1,6 @@
 name: Setup
+description: checkout repo, setup node, and install node_modules
+
 runs:
   using: composite
   steps:
@@ -6,16 +8,62 @@ 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
       with:
-        path: node_modules/
-        key: ${{ runner.os }}-install-${{ hashFiles('**/yarn.lock') }}
-
+        # node_modules/.cache is intentionally omitted, as this is used for build tool caches.
+        path: |
+          node_modules
+          !node_modules/.cache
+        key: ${{ runner.os }}-install-${{ hashFiles('yarn.lock') }}
     - if: steps.install-cache.outputs.cache-hit != 'true'
       run: yarn install --frozen-lockfile --ignore-scripts
       shell: bash
+
+    # Validators compile quickly, so caching can be omitted.
+    - run: yarn ajv
+      shell: bash
+
+    # Contracts are compiled from source. If source hasn't changed, the contracts do not need to be re-compiled.
+    - uses: actions/cache@v3
+      id: contracts-cache
+      with:
+        path: |
+          src/abis/types
+          src/types/v3
+        key: ${{ runner.os }}-contracts-${{ hashFiles('src/abis/**/*.json', 'node_modules/@uniswap/**/artifacts/contracts/**/*.json') }}
+    - if: steps.contracts-cache.outputs.cache-hit != 'true'
+      run: yarn contracts
+      shell: bash
+
+    # 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 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: node_modules/.cache
+        key: ${{ runner.os }}-i18n-extract-${{ github.run_id }}
+        restore-keys: ${{ runner.os }}-i18n-extract-
+    - run: yarn i18n:extract
+      shell: bash
+
+    # Translations are compiled from messages. If messages haven't changed, the translations do not need to be re-compiled.
+    - uses: actions/cache@v3
+      id: i18n-compile-cache
+      with:
+        path: src/locales/*.js
+        key: ${{ runner.os }}-i18n-compile-${{ hashFiles('src/locales/*.po') }}
+    - if: steps.i18n-compile-cache.outputs.cache-hit !='true'
+      run: yarn i18n:compile
+      shell: bash

.github/dependabot.yml

@@ -6,5 +6,7 @@ updates:
     schedule:
       interval: 'daily'
     allow:
-      - dependency-name: '@uniswap/token-lists'
       - dependency-name: '@uniswap/default-token-list'
+      - dependency-name: '@uniswap/token-lists'
+    reviewers:
+      - 'Uniswap/dependabot-reviewers'

.github/pull_request_template.md

@@ -1,24 +1,52 @@
-Your PR title must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), and should start with one of the following [types](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type):
+<!-- Your PR title must follow conventional commits: https://github.com/Uniswap/interface#pr-title -->
 
-- build: Changes that affect the build system or external dependencies (example scopes: yarn, eslint, typescript)
-- ci: Changes to our CI configuration files and scripts (example scopes: vercel, github, cypress)
-- docs: Documentation only changes
-- feat: A new feature
-- fix: A bug fix
-- perf: A code change that improves performance
-- refactor: A code change that neither fixes a bug nor adds a feature
-- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- test: Adding missing tests or correcting existing tests
+## Description
+<!-- Summary of change, including motivation and context. -->
+<!-- Use verb-driven language: "Fixes XYZ" instead of "This change fixes XYZ" -->
 
-Example commit messages:
 
-- feat: adds support for gnosis safe wallet
-- fix: removes a polling memory leak
-- chore: bumps redux version
+<!-- Delete inapplicable lines: -->
+_Linear ticket:_
+_Slack thread:_
+_Relevant docs:_
 
-Other things to note:
 
-- Please describe the change using verb statements (ex: Removes X from Y)
-- PRs with multiple changes should use a list of verb statements
-- Add any relevant unit / integration tests
-- Changes will be previewable via vercel. Non-obvious changes should include instructions for how to reproduce them
+<!-- Delete this section if your change does not affect UI. -->
+## Screen capture
+
+### Before
+|    Mobile    |   Desktop    |
+| ------------ | ------------ |
+| paste_before | paste_before |
+
+
+### After
+|    Mobile    |   Desktop   |
+| ------------ | ----------- |
+| paste_after  | paste_after |
+
+
+## Test plan
+
+<!-- Delete this section if your change is not a bug fix. -->
+### Reproducing the error
+
+<!-- Include steps to reproduce the bug. -->
+1. 
+
+### QA (ie manual testing)
+
+<!-- Include steps to test the change, ensuring no regression. -->
+- [ ] N/A
+
+
+#### Devices
+<!-- If applicable, include different devices and screen sizes that may be affected, and how you've tested them. -->
+
+
+### Automated testing
+
+<!-- If N/A, check and note so it is obvious to your reviewers and does not show up as an incomplete task. -->
+<!-- eg - [x] Unit test N/A -->
+- [ ] Unit test
+- [ ] Integration/E2E test

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

@@ -0,0 +1,73 @@
+name: 1 | Push main -> staging
+
+# This CI job is responsible for pushing the current contents of the `main` branch to the
+# `releases/staging` branch, which will in turn kick off a deploy to the staging environment.
+
+on:
+  workflow_dispatch:
+
+# https://stackoverflow.com/questions/57921401/push-to-origin-from-github-action
+jobs:
+  push-staging:
+    name: 'Push to staging branch'
+    runs-on: ubuntu-latest
+    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 translations
+        run: |
+          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'
+
+      - name: Git push
+        run: |
+          git push origin main:releases/staging --force

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

@@ -0,0 +1,64 @@
+name: 2 | Deploy staging
+on:
+  push:
+    branches:
+      - 'releases/staging'
+
+jobs:
+  deploy-to-staging:
+    runs-on: ubuntu-latest
+    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 build
+        env:
+          REACT_APP_STAGING: 1
+
+      - name: Update Cloudflare Pages deployment
+        id: pages-deployment
+        uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          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
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        with:
+          environment: staging
+          sourcemaps: './build/static/js'
+          url_prefix: '~/static/js'

.github/workflows/3-staging-to-prod.yml

@@ -0,0 +1,42 @@
+name: 3 | Push staging -> prod
+
+# This CI job is responsible for force pushing the content of releases/staging to releases/prod. It
+# is restricted to web-reviewers through virtue of the GitHub environment protection rules for the
+# prod environment.
+
+on:
+  workflow_dispatch:
+
+jobs:
+  push-prod:
+    name: 'Push to prod branch'
+    runs-on: ubuntu-latest
+    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 }}
+          ref: releases/staging
+      - name: Git config
+        run: |
+          git config user.name "UL Service Account"
+          git config user.email "hello-happy-puppy@users.noreply.github.com"
+      - name: Git push
+        run: |
+          git push origin releases/staging:releases/prod --force

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

@@ -0,0 +1,111 @@
+name: 4 | Deploy prod
+on:
+  push:
+    branches:
+      - 'releases/prod'
+
+jobs:
+  deploy-to-prod:
+    runs-on: ubuntu-latest
+    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 build
+
+      - name: Bump and tag
+        id: github-tag-action
+        uses: mathieudutour/github-tag-action@d745f2e74aaf1ee82e747b181f7a0967978abee0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          release_branches: releases/prod
+          default_bump: patch
+
+      - name: Pin to IPFS
+        id: pinata
+        uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d
+        with:
+          pin-name: Uniswap ${{ steps.github-tag-action.outputs.new_tag }}
+          path: './build'
+          pinata-api-key: ${{ secrets.PINATA_API_KEY }}
+          pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}
+
+      - name: Convert CIDv0 to CIDv1
+        id: convert-cidv0
+        uses: uniswap/convert-cidv0-cidv1@v1.0.0
+        with:
+          cidv0: ${{ steps.pinata.outputs.hash }}
+
+      - name: Publish release
+        uses: actions/create-release@v1.1.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ steps.github-tag-action.outputs.new_tag }}
+          release_name: Release ${{ steps.github-tag-action.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 mirrored at [app.uniswap.org](https://app.uniswap.org).
+
+            You can also access the Uniswap Interface 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 hosted deployment of 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 }}/)
+
+            ${{ steps.github-tag-action.outputs.changelog }}
+
+      - 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
+        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/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

@@ -0,0 +1,91 @@
+name: Slack notification on pushes to releases/*
+
+# This CI job will push notifications to Slack whenever code is merged into any releases/* branch
+#
+# The steps of the command line kung-fu shown below are as follows:
+# First we take the JSON-formatted Github context
+#  echo $GITHUB_CONTEXT \
+# Then we parse out the specific fields we want for our messages using jq and format it into tab-separated values
+#  | jq '.event.commits[] | [.url, .id[0:7], .author.username, .timestamp, .message] | @tsv' \
+# We need to do some cleaning on this output - specifically removing quotes and replacing newlines with something easier to split
+#  | 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}' \
+# 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
+
+on:
+  push:
+    branches:
+      - 'releases/*'
+
+jobs:
+  notify-slack:
+    runs-on: ubuntu-latest
+    environment:
+      name: notify/releases
+    steps:
+      - name: Parse event to slug
+        id: parse-slug
+        env:
+          GITHUB_CONTEXT: ${{ toJson(github) }}
+        # Formats the contents of the GitHub event into slugs: one line per commit, formatted for Slack.
+        # Explanation for each line is in the comments above.
+        run: |
+          echo $GITHUB_CONTEXT \
+          | jq '.event.commits[] | [.url, .id[0:7], .author.username, .timestamp, .message] | @tsv' \
+          | 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"
+      - uses: slackapi/slack-github-action@007b2c3c751a190b6f0f040e47ed024deaa72844
+        with:
+          payload: |
+            {
+              "text": "GitHub Action build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+              "blocks": [
+                {
+                    "type": "divider"
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "*Code merged to <https://github.com/Uniswap/interface/tree/${{ github.ref }}|${{ github.ref_name }}> branch:*\n"
+                  }
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "*Actor*: <https://github.com/${{ github.triggering_actor }}/|${{ github.triggering_actor }}>\n*Force pushed*: ${{ github.event.forced || false }}\n"
+                  }
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "${{ steps.parse-slug.outputs.SLACK_COMMITS || 'New branch created' }}"
+                  }
+                },
+                {
+                  "type": "section",
+                  "text": {
+                    "type": "mrkdwn",
+                    "text": "<${{ github.event.compare}}|View Diff>"
+                  }
+                }
+              ]
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/release.yaml

@@ -1,121 +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
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - run: yarn prepare
-      - 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.upload.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 }}
-
-      - uses: actions/cache@v3
-        id: cypress-cache
-        with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
-      - uses: cypress-io/github-action@v4
-        with:
-          install: false
-          browser: chrome
-          config-file: cypress.release.config.ts
-          config: baseUrl=https://cloudflare-ipfs.com/ipfs/${{ steps.pinata.outputs.hash }}
-
-      - name: Update DNS with new IPFS hash
-        env:
-          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
-          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
-          CLOUDFLARE_GATEWAY_ID: ${{ secrets.CLOUDFLARE_GATEWAY_ID }}
-        uses: Uniswap/cloudflare-update-web3-gateway@b3205288b1c6d0acb63fa3bd8fb686c72a9e3f3e
-        with:
-          cid: ${{ 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.upload.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
-
-            ${{ needs.tag.outputs.changelog }}

.github/workflows/test.yml

@@ -1,12 +1,16 @@
 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 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.
+
 on:
   push:
     branches:
       - main
+      - releases/staging
   pull_request:
-  # manual trigger
-  workflow_dispatch:
 
 jobs:
   lint:
@@ -14,47 +18,96 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: node_modules/.cache
+          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
+        with:
+          name: Lint
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+  
+  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 }}-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-tsc-
+      - run: yarn typecheck
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Typecheck
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
 
   deps-tests:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: npx yarn-deduplicate --strategy=highest --list --fail
+      - run: yarn yarn-deduplicate --strategy=highest --list --fail
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Dependency checks
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
 
   unit-tests:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: yarn prepare
-      - run: yarn test
+      - uses: ./.github/actions/cache-on-main
+        with:
+          path: node_modules/.cache
+          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
+          flags: unit-tests
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Unit tests
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
 
-  cypress-build:
+  build-e2e:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: yarn prepare
-
-      - run: yarn build
-      - uses: actions/upload-artifact@v2
+      - uses: ./.github/actions/cache-on-main
         with:
-          name: build
+          path: node_modules/.cache
+          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@v3
+        with:
+          name: build-e2e
           path: build
           if-no-files-found: error
 
-      - uses: actions/cache@v3
-        id: cypress-cache
-        with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
+  # Allows for parallel re-runs of cypress tests without re-building.
+  cypress-rerun:
+    runs-on: ubuntu-latest
+    steps:
+      - run: exit 0
 
   cypress-test-matrix:
-    needs: cypress-build
+    needs: [build-e2e, cypress-rerun]
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -63,35 +116,97 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-
-      - uses: actions/download-artifact@v2
+      - uses: ./.github/actions/cache-on-main
         with:
-          name: build
+          path: /root/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('**/node_modules/cypress/package.json') }}
+      - run: |
+          yarn cypress install
+          yarn cypress info
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: build-e2e
           path: build
 
-      - uses: actions/cache@v3
-        id: cypress-cache
+      - uses: ./.github/actions/cache-on-main
         with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
+          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
+          flags: e2e-tests
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cypress tests
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
 
-  # Included as a single job to check against for cypress test success, as cypress runs in a matrix.
-  cypress-tests:
-    needs: cypress-test-matrix
+  pre:
+    if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }}
     runs-on: ubuntu-latest
     steps:
-      - run: echo 'Finished cypress tests https\://dashboard.cypress.io/projects/yp82ef'
+      - 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,11 +5,12 @@
 /src/types/v3
 /src/abis/types
 /src/locales/**/*.js
-/src/locales/**/en-US.po
-/src/locales/**/pseudo.po
+/src/locales/**/*.po
 
-# generated graphql types
-__generated__/
+# generated files
+/src/**/__generated__
+
+# schema
 schema.graphql
 
 # dependencies
@@ -17,6 +18,7 @@ schema.graphql
 
 # testing
 /coverage
+/cache
 
 # builds
 /build
@@ -29,6 +31,10 @@ schema.graphql
 .env.test.local
 .env.production.local
 
+instrumented
+.nyc_output
+.nyc_output/**/*
+
 /.netlify
 
 npm-debug.log*
@@ -40,6 +46,7 @@ notes.txt
 
 package-lock.json
 
+cypress/downloads
 cypress/videos
 cypress/screenshots
 

.nvmrc

@@ -1 +1 @@
-14
+v18.16.0

.prettierignore

@@ -1 +0,0 @@
-/src/schema/schema.graphql

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 120
-}

.snyk

@@ -0,0 +1,25 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.25.0
+# ignores vulnerabilities until expiry date; change duration by modifying expiry date
+ignore:
+  SNYK-JS-OPENZEPPELINCONTRACTS-2964946:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:25:57.347Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2958047:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:09.720Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2958050:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:17.702Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2965580:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:34.283Z
+patch: {}

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ],
+  "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.formatOnSaveMode": "file",
   "editor.tabCompletion": "on",
   "editor.tabSize": 2,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.inlineSuggest.enabled": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
@@ -13,7 +13,13 @@
   "files.eol": "\n",
   "eslint.enable": true,
   "eslint.debug": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
-}
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+}

CODEOWNERS

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

CONTRIBUTING.md

@@ -64,6 +64,14 @@ To run _all_ cypress integration tests _from the command line_:
 yarn cypress:run
 ```
 
+## Adding a new dependency
+
+Adding many new dependencies would cause bloat, so we have a test to guard against this: `scripts/test-size.js`. This will run as part of CI with every PR.
+
+If you *need* to add a new dependency, and it causes the generated build to exceed its size quota, you'll need to increase the quota. Do so in `scripts/test-size.js`.
+
+You can also run the test on your last build using `yarn build && yarn test:size`. If you exceed the size quota, it will let you know what to do :).
+
 ## Engineering standards
 
 Code merged into the `main` branch of this repository should adhere to high standards of correctness and maintainability.

README.md

@@ -1,5 +1,7 @@
 # Uniswap Labs Interface
 
+[![codecov](https://codecov.io/gh/Uniswap/interface/branch/main/graph/badge.svg?token=YVT2Y86O82)](https://codecov.io/gh/Uniswap/interface)
+
 [![Unit Tests](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml)
 [![Integration Tests](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml)
 [![Lint](https://github.com/Uniswap/interface/actions/workflows/lint.yml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/lint.yml)
@@ -36,14 +38,41 @@ You can block an entire list of tokens by passing in a tokenlist like [here](./s
 
 For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
 
+#### PR Title
+Your PR title must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), and should start with one of the following [types](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type):
+
+- build: Changes that affect the build system or external dependencies (example scopes: yarn, eslint, typescript)
+- ci: Changes to our CI configuration files and scripts (example scopes: vercel, github, cypress)
+- docs: Documentation only changes
+- feat: A new feature
+- fix: A bug fix
+- perf: A code change that improves performance
+- refactor: A code change that neither fixes a bug nor adds a feature
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- test: Adding missing tests or correcting existing tests
+
+Example commit messages:
+
+- feat: adds support for gnosis safe wallet
+- fix: removes a polling memory leak
+- chore: bumps redux version
+
+Other things to note:
+
+- Please describe the change using verb statements (ex: Removes X from Y)
+- PRs with multiple changes should use a list of verb statements
+- Add any relevant unit / integration tests
+- Changes will be previewable via vercel. Non-obvious changes should include instructions for how to reproduce them
+
+
 ## Accessing Uniswap V2
 
 The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
-- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
-- View V2 liquidity: https://app.uniswap.org/#/pool/v2
-- Add V2 liquidity: https://app.uniswap.org/#/add/v2
-- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
+- Swap on Uniswap V2: <https://app.uniswap.org/#/swap?use=v2>
+- View V2 liquidity: <https://app.uniswap.org/#/pools/v2>
+- Add V2 liquidity: <https://app.uniswap.org/#/add/v2>
+- Migrate V2 liquidity to V3: <https://app.uniswap.org/#/migrate/v2>
 
 ## Accessing Uniswap V1
 

babel-plugin-macros.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {

codecov.yml

@@ -0,0 +1,46 @@
+ignore:
+  - "**/generated/**/*"
+  - "**/generated/*"
+  - "**/cypress/**/*"
+  - "cypress/**/*"
+  - "**/instrumented/**/*"
+  - "**/styles/**/*"
+  - "styles/**/*"
+  - "**/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,26 +1,208 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* 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 { DefinePlugin } = 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 = require('child_process').execSync('git rev-parse HEAD')
+const commitHash = execSync('git rev-parse HEAD').toString().trim()
+const isProduction = process.env.NODE_ENV === 'production'
+
+// Linting and type checking are only necessary as part of development and testing.
+// 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: ['@vanilla-extract/babel-plugin'],
+    plugins: [
+      '@vanilla-extract/babel-plugin',
+      ...(process.env.REACT_APP_ADD_COVERAGE_INSTRUMENTATION
+        ? [
+            [
+              'istanbul',
+              {
+                all: true,
+                include: ['src/**/*.tsx', 'src/**/*.ts'],
+                exclude: [
+                  'src/**/*.css',
+                  'src/**/*.css.ts',
+                  'src/**/*.test.ts',
+                  'src/**/*.test.tsx',
+                  'src/**/*.spec.ts',
+                  'src/**/*.spec.tsx',
+                  'src/**/graphql/**/*',
+                  'src/**/*.d.ts',
+                ],
+              },
+            ],
+          ]
+        : []),
+    ],
+  },
+  eslint: {
+    enable: shouldLintOrTypeCheck,
+    pluginOptions(eslintConfig) {
+      return Object.assign(eslintConfig, {
+        cache: true,
+        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,
+      })
+    },
+  },
+  typescript: {
+    enableTypeChecking: shouldLintOrTypeCheck,
+  },
+  jest: {
+    configure(jestConfig) {
+      return Object.assign(jestConfig, {
+        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',
+          '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
+        },
+      })
+    },
   },
   webpack: {
     plugins: [
-      new VanillaExtractPlugin(),
-      new DefinePlugin({
-        'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
+      // 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) => {
-      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
-        (plugin) => plugin instanceof MiniCssExtractPlugin
+      // Configure webpack plugins:
+      webpackConfig.plugins = webpackConfig.plugins
+        .map((plugin) => {
+          // Extend process.env with dynamic values (eg commit hash).
+          // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
+          if (plugin instanceof DefinePlugin) {
+            Object.assign(plugin.definitions['process.env'], {
+              REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
+            })
+          }
+
+          // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
+          // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
+          if (plugin instanceof MiniCssExtractPlugin) {
+            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 already enforced by TypeScript.
+          // See https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames.
+          if (plugin instanceof CaseSensitivePathsPlugin) return false
+
+          // IgnorePlugin is used to tree-shake moment locales, but we do not use moment in this project.
+          if (plugin instanceof IgnorePlugin) return false
+
+          return true
+        })
+
+      // 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 = 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',
+              },
+            }
+          : {}
       )
-      if (instanceOfMiniCssExtractPlugin !== undefined) instanceOfMiniCssExtractPlugin.options.ignoreOrder = true
+
+      // 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

@@ -1,20 +1,33 @@
+import codeCoverageTask from '@cypress/code-coverage/task'
 import { defineConfig } from 'cypress'
+import { setupHardhatEvents } from 'cypress-hardhat'
+import { unlinkSync } from 'fs'
 
 export default defineConfig({
   projectId: 'yp82ef',
-  videoUploadOnPasses: false,
-  defaultCommandTimeout: 10000,
+  defaultCommandTimeout: 24000, // 2x average block time
   chromeWebSecurity: false,
+  experimentalMemoryManagement: true, // better memory management, see https://github.com/cypress-io/cypress/pull/25462
+  retries: { runMode: 2 },
+  videoCompression: false,
   e2e: {
-    setupNodeEvents(on, config) {
-      return {
-        ...config,
-        // Only enable Chrome.
-        // Electron (the default) has issues injecting window.ethereum before pageload, so it is not viable.
-        browsers: config.browsers.filter(({ name }) => name === 'chrome'),
-      }
+    async setupNodeEvents(on, config) {
+      await setupHardhatEvents(on, config)
+      codeCoverageTask(on, config)
+
+      // Delete recorded videos for specs that passed without flakes.
+      on('after:spec', async (spec, results) => {
+        if (results && results.video) {
+          // If there were no failures (including flakes), delete the recorded video.
+          if (!results.tests?.some((test) => test.attempts.some((attempt) => attempt?.state === 'failed'))) {
+            unlinkSync(results.video)
+          }
+        }
+      })
+
+      return config
     },
     baseUrl: 'http://localhost:3000',
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/{e2e,staging}/**/*.test.ts',
   },
 })

cypress.release.config.ts

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

cypress/README.md

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

cypress/e2e/add-liquidity.test.ts

@@ -10,28 +10,28 @@ describe('Add Liquidity', () => {
   })
 
   it('loads the two correct tokens', () => {
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/500')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/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')
   })
 
   it('does not crash if ETH is duplicated', () => {
-    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    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.skip('token not in storage is loaded', () => {
-    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
-    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'MKR')
+    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/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
+    cy.visit('/add/0x07865c6e87b9f70255377e024ace6630c1eaa37f')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'USDC')
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
   })
 
   it.skip('loads fee tier distribution', () => {
@@ -53,7 +53,7 @@ describe('Add Liquidity', () => {
         }
       })
 
-      cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+      cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
 
       cy.wait('@FeeTierDistributionQuery')
 

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

@@ -0,0 +1,29 @@
+import { FeatureFlag } from '../../src/featureFlags'
+import { getTestSelector } from '../utils'
+
+describe('Buy Crypto Modal', () => {
+  it('should open and close', () => {
+    cy.visit('/', { featureFlags: [FeatureFlag.fiatOnRampButtonOnSwap] })
+
+    // Open the fiat onramp modal
+    cy.get(getTestSelector('buy-fiat-button')).click()
+    cy.get(getTestSelector('fiat-onramp-modal')).should('be.visible')
+
+    // Click on a location that should be outside the modal, which should close it
+    cy.get('body').click(0, 100)
+    cy.get(getTestSelector('fiat-onramp-modal')).should('not.exist')
+  })
+
+  it('should open and close, mobile viewport', () => {
+    cy.viewport('iphone-6')
+    cy.visit('/', { featureFlags: [FeatureFlag.fiatOnRampButtonOnSwap] })
+
+    // Open the fiat onramp modal
+    cy.get(getTestSelector('buy-fiat-button')).click()
+    cy.get(getTestSelector('fiat-onramp-modal')).should('be.visible')
+
+    // Click on a location that should be outside the modal, which should close it
+    cy.get('body').click(10, 10)
+    cy.get(getTestSelector('fiat-onramp-modal')).should('not.exist')
+  })
+})

cypress/e2e/landing.test.ts

@@ -1,16 +1,42 @@
+import { getTestSelector } from '../utils'
+import { CONNECTED_WALLET_USER_STATE, DISCONNECTED_WALLET_USER_STATE } from '../utils/user-state'
+
 describe('Landing Page', () => {
-  beforeEach(() => cy.visit('/'))
-  it('loads swap page', () => {
-    cy.get('#swap-page')
+  it('shows landing page when no user state exists', () => {
+    cy.visit('/', { userState: DISCONNECTED_WALLET_USER_STATE })
+    cy.get(getTestSelector('landing-page'))
     cy.screenshot()
   })
 
-  it('redirects to url /swap', () => {
+  it('redirects to swap page when a user has already connected a wallet', () => {
+    cy.visit('/', { userState: CONNECTED_WALLET_USER_STATE })
+    cy.get('#swap-page')
     cy.url().should('include', '/swap')
+    cy.screenshot()
+  })
+
+  it('shows landing page when a user has already connected a wallet but ?intro=true is in query', () => {
+    cy.visit('/?intro=true', { userState: CONNECTED_WALLET_USER_STATE })
+    cy.get(getTestSelector('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'))
   })
 
   it('allows navigation to pool', () => {
-    cy.get('#pool-nav-link').click()
-    cy.url().should('include', '/pool')
+    cy.viewport(2000, 1600)
+    cy.visit('/swap')
+    cy.get(getTestSelector('pool-nav-link')).first().click()
+    cy.url().should('include', '/pools')
+  })
+
+  it('allows navigation to pool on mobile', () => {
+    cy.viewport('iphone-6')
+    cy.visit('/swap')
+    cy.get(getTestSelector('pool-nav-link')).last().click()
+    cy.url().should('include', '/pools')
   })
 })

cypress/e2e/link.test.ts

@@ -1,7 +1,8 @@
 // see https://github.com/Uniswap/interface/pull/4115
 describe('Link', () => {
   it('should update route', () => {
-    cy.visit('/')
+    cy.viewport(2000, 1600)
+    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,79 @@
+import { getTestSelector } from '../../utils'
+
+describe('Mini Portfolio account drawer', () => {
+  beforeEach(() => {
+    cy.intercept(/api.uniswap.org\/v1\/graphql/, cy.spy().as('gqlSpy'))
+    cy.visit('/swap', { ethereum: 'hardhat' })
+  })
+
+  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.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)
+        })
+    })
+  })
+})

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

@@ -0,0 +1,116 @@
+import { USDC_MAINNET } from '../../../src/constants/tokens'
+import { getTestSelector } from '../../utils'
+
+describe('mini-portfolio activity history', () => {
+  beforeEach(() => {
+    cy.hardhat()
+      .then((hardhat) => hardhat.wallet.getTransactionCount())
+      .then((nonce) => {
+        // Mock graphql response to include specific nonces.
+        cy.intercept(
+          {
+            method: 'POST',
+            url: 'https://beta.api.uniswap.org/v1/graphql',
+          },
+          {
+            body: {
+              data: {
+                portfolios: [
+                  {
+                    id: 'UG9ydGZvbGlvOjB4NUNlYUI3NGU0NDZkQmQzYkY2OUUyNzcyMDBGMTI5ZDJiQzdBMzdhMQ==',
+                    assetActivities: [
+                      {
+                        id: 'QXNzZXRBY3Rpdml0eTpWSEpoYm5OaFkzUnBiMjQ2TUhnME5tUm1PVGs0T0RrNVl6UmtNR1kzWTJNNE9HRTVNVFEzTURBME9EWmtOVGhrTURnNFpqbG1NelkxTnpRM1l6WXdZek15WVRFNE4yWXlaRFEwWVdVNFh6QjRZV1EyWXpCa05XTmlOVEZsWWpjMU5qUTFaRGszT1RneE4yRTJZVEkxTmpreU1UbG1ZbVE1Wmw4d2VEQXpOR0UwTURjMk5EUTROV1kzWlRBNFkyRXhOak0yTm1VMU1ETTBPVEZoTm1GbU56ZzFNR1E9',
+                        timestamp: 1681150079,
+                        type: 'UNKNOWN',
+                        chain: 'ETHEREUM',
+                        transaction: {
+                          id: 'VHJhbnNhY3Rpb246MHg0NmRmOTk4ODk5YzRkMGY3Y2M4OGE5MTQ3MDA0ODZkNThkMDg4ZjlmMzY1NzQ3YzYwYzMyYTE4N2YyZDQ0YWU4XzB4YWQ2YzBkNWNiNTFlYjc1NjQ1ZDk3OTgxN2E2YTI1NjkyMTlmYmQ5Zl8weDAzNGE0MDc2NDQ4NWY3ZTA4Y2ExNjM2NmU1MDM0OTFhNmFmNzg1MGQ=',
+                          blockNumber: 17019453,
+                          hash: '0x46df998899c4d0f7cc88a914700486d58d088f9f365747c60c32a187f2d44ae8',
+                          status: 'CONFIRMED',
+                          to: '0x034a40764485f7e08ca16366e503491a6af7850d',
+                          from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+                          nonce,
+                          __typename: 'Transaction',
+                        },
+                        assetChanges: [],
+                        __typename: 'AssetActivity',
+                      },
+                      {
+                        id: 'QXNzZXRBY3Rpdml0eTpWSEpoYm5OaFkzUnBiMjQ2TUhneE16UXpaR1ppTlROaE9XRmpNR00yWW1aaVpqUTNNRFEyWWpObFkyRXhORGN3TUdZd00yWXhOMkV3WWpnM1pqWXpPRFpsWVRnNU16QTRNVFZtWmpoaFh6QjRZMkUzTXpOalkySm1OelZoTXpnME1ERXhPR1ZpT1RjNU9EVTJOemRpTkdRMk56TTBZemMwWmw4d2VERmlOVEUxTkdGaE5HSTRaakF5TjJJNVptUXhPVE0wTVRFek1tWmpPV1JoWlRFd1pqY3pOVGs9',
+                        timestamp: 1681149995,
+                        type: 'SEND',
+                        chain: 'ETHEREUM',
+                        transaction: {
+                          id: 'VHJhbnNhY3Rpb246MHgxMzQzZGZiNTNhOWFjMGM2YmZiZjQ3MDQ2YjNlY2ExNDcwMGYwM2YxN2EwYjg3ZjYzODZlYTg5MzA4MTVmZjhhXzB4Y2E3MzNjY2JmNzVhMzg0MDExOGViOTc5ODU2NzdiNGQ2NzM0Yzc0Zl8weDFiNTE1NGFhNGI4ZjAyN2I5ZmQxOTM0MTEzMmZjOWRhZTEwZjczNTk=',
+                          blockNumber: 17019446,
+                          hash: '0x1343dfb53a9ac0c6bfbf47046b3eca14700f03f17a0b87f6386ea8930815ff8a',
+                          status: 'CONFIRMED',
+                          to: '0x1b5154aa4b8f027b9fd19341132fc9dae10f7359',
+                          from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+                          nonce: nonce + 1,
+                          __typename: 'Transaction',
+                        },
+                        assetChanges: [
+                          {
+                            __typename: 'TokenTransfer',
+                            id: 'VG9rZW5UcmFuc2ZlcjoweDVjZWFiNzRlNDQ2ZGJkM2JmNjllMjc3MjAwZjEyOWQyYmM3YTM3YTFfMHhiMWRjNDlmMDY1N2FkNTA1YjUzNzUyN2RkOWE1MDk0YTM2NTkzMWMxXzB4MTM0M2RmYjUzYTlhYzBjNmJmYmY0NzA0NmIzZWNhMTQ3MDBmMDNmMTdhMGI4N2Y2Mzg2ZWE4OTMwODE1ZmY4YQ==',
+                            asset: {
+                              id: 'VG9rZW46RVRIRVJFVU1fMHgxY2MyYjA3MGNhZjAxNmE3ZGRjMzA0N2Y5MzI3MmU4Yzc3YzlkZGU5',
+                              name: 'USD Coin (USDC)',
+                              symbol: 'USDC',
+                              address: '0x1cc2b070caf016a7ddc3047f93272e8c77c9dde9',
+                              decimals: 6,
+                              chain: 'ETHEREUM',
+                              standard: null,
+                              project: {
+                                id: 'VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4MWNjMmIwNzBjYWYwMTZhN2RkYzMwNDdmOTMyNzJlOGM3N2M5ZGRlOQ==',
+                                isSpam: true,
+                                logo: null,
+                                __typename: 'TokenProject',
+                              },
+                              __typename: 'Token',
+                            },
+                            tokenStandard: 'ERC20',
+                            quantity: '18011.212084',
+                            sender: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+                            recipient: '0xb1dc49f0657ad505b537527dd9a5094a365931c1',
+                            direction: 'OUT',
+                            transactedValue: null,
+                          },
+                        ],
+                        __typename: 'AssetActivity',
+                      },
+                    ],
+                    __typename: 'Portfolio',
+                  },
+                ],
+              },
+            },
+          }
+        ).as('graphql')
+      })
+  })
+
+  it('should deduplicate activity history by nonce', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' }).hardhat({
+      automine: false,
+    })
+
+    // Input swap info.
+    cy.get('#swap-currency-input .token-amount-input').clear().type('1').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

@@ -0,0 +1,56 @@
+import { getTestSelector } from '../utils'
+
+const PUDGY_COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+const BONSAI_COLLECTION_ADDRESS = '0xec9c519d49856fd2f8133a0741b4dbe002ce211b'
+
+describe('Testing nfts', () => {
+  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()
+    cy.get(getTestSelector('nft-trending-collection')).its('length').should('be.gte', 25)
+  })
+
+  it('should load pudgy penguin collection page', () => {
+    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-collection-asset')).should('exist')
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('not.exist')
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('exist')
+  })
+
+  it('should be able to navigate to activity', () => {
+    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-activity')).first().click()
+    cy.get(getTestSelector('nft-activity-row')).should('exist')
+  })
+
+  it('should go to the details page', () => {
+    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-traits')).should('exist')
+    cy.get(getTestSelector('nft-details-activity')).should('exist')
+    cy.get(getTestSelector('nft-details-description')).should('exist')
+    cy.get(getTestSelector('nft-details-asset-details')).should('exist')
+  })
+
+  it('should toggle buy now on details page', () => {
+    cy.visit(`#/nfts/asset/${BONSAI_COLLECTION_ADDRESS}/7580`)
+    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')
+    cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
+    cy.get(getTestSelector('nft-bag')).should('exist')
+  })
+
+  it('should navigate to and from the owned nfts page', () => {
+    cy.visit('/')
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()
+    cy.get(getTestSelector('mini-portfolio-nft')).click()
+    cy.get(getTestSelector('mini-portfolio-navbar')).should('not.be.visible')
+  })
+})

cypress/e2e/permit2.test.ts

@@ -0,0 +1,258 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { MaxUint160, MaxUint256 } from '@uniswap/permit2-sdk'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+
+import { DAI, USDC_MAINNET, USDT } from '../../src/constants/tokens'
+import { getTestSelector } from '../utils'
+
+/** 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.contains('Confirm swap').click()
+}
+
+describe('Permit2', () => {
+  function setupInputs(inputToken: Token, outputToken: Token) {
+    // Sets up a swap between inputToken and outputToken.
+    cy.visit(`/swap/?inputCurrency=${inputToken.address}&outputCurrency=${outputToken.address}`, {
+      ethereum: 'hardhat',
+    })
+    cy.get('#swap-currency-input .token-amount-input').type('0.01')
+  }
+
+  /** Asserts permit2 has a max approval for spend of the input token on-chain. */
+  function expectTokenAllowanceForPermit2ToBeMax(inputToken: Token) {
+    // check token approval
+    cy.hardhat()
+      .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: inputToken }))
+      .then((allowance) => {
+        Cypress.log({ name: `Token allowace: ${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(inputToken: Token) {
+    cy.hardhat()
+      .then(({ approval, wallet }) => approval.getPermit2Allowance({ owner: wallet, token: inputToken }))
+      .then((allowance) => {
+        Cypress.log({ name: `Permit2 allowace: ${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)
+      })
+  }
+
+  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.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+      expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+    })
+
+    it('swaps with existing permit approval and missing token approval', () => {
+      setupInputs(DAI, USDC_MAINNET)
+      cy.hardhat().then(async (hardhat) => {
+        await hardhat.approval.setPermit2Allowance({ owner: hardhat.wallet, token: DAI })
+        await hardhat.mine()
+      })
+      initiateSwap()
+
+      // 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 transaction
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+    })
+
+    /**
+     * 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()
+
+      // 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))
+
+      // 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)
+
+      // Verify transaction
+      cy.wait('@eth_sendRawTransaction')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+    })
+  })
+
+  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()
+
+    // Verify transaction
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+  })
+
+  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()
+
+      // Verify token approval rejection
+      cy.wrap(tokenApprovalStub).should('be.calledOnce')
+      cy.contains('Review swap')
+
+      // Allow token approval
+      cy.then(() => tokenApprovalStub.restore())
+
+      // 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()
+
+      // Verify token approval
+      cy.get(getTestSelector('popups')).contains('Approved')
+      expectTokenAllowanceForPermit2ToBeMax(DAI)
+
+      // Verify permit2 approval rejection
+      cy.wrap(permitApprovalStub).should('be.calledWith', 'eth_signTypedData_v4')
+      cy.contains('Review swap')
+
+      // Allow permit2 approval
+      cy.then(() => permitApprovalStub.restore())
+      cy.contains('Confirm swap').click()
+
+      // Verify permit2 approval
+      cy.contains('Success')
+      cy.get(getTestSelector('popups')).contains('Swapped')
+      expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+    })
+  })
+
+  it('prompts token approval when existing approval amount is too low', () => {
+    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()
+
+    // Verify token approval
+    cy.get(getTestSelector('popups')).contains('Approved')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+  })
+
+  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()
+
+    // Verify permit2 approval
+    cy.wait('@eth_signTypedData_v4')
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+  })
+
+  it('prompts signature when existing permit approval amount is too low', () => {
+    setupInputs(DAI, USDC_MAINNET)
+    const smallAllowance = { amount: 1 }
+    cy.hardhat().then(({ approval, wallet }) =>
+      Promise.all([
+        approval.setTokenAllowanceForPermit2({ owner: wallet, token: DAI }),
+        approval.setPermit2Allowance({ owner: wallet, token: DAI }, smallAllowance),
+      ])
+    )
+    initiateSwap()
+
+    // Verify permit2 approval
+    cy.wait('@eth_signTypedData_v4')
+    cy.contains('Success')
+    cy.get(getTestSelector('popups')).contains('Swapped')
+    expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
+  })
+})

cypress/e2e/pool.test.ts

@@ -1,8 +1,17 @@
 describe('Pool', () => {
-  beforeEach(() => cy.visit('/pool'))
+  beforeEach(() => {
+    cy.visit('/pools').then(() => {
+      cy.wait('@eth_blockNumber')
+    })
+  })
 
   it('add liquidity links to /add/ETH', () => {
-    cy.get('#join-pool-button').click()
-    cy.url().should('contain', '/add/ETH')
+    cy.get('body').then(() => {
+      cy.get('#join-pool-button')
+        .click()
+        .then(() => {
+          cy.url().should('contain', '/add/ETH')
+        })
+    })
   })
 })

cypress/e2e/position.test.ts

@@ -0,0 +1,11 @@
+describe('Position', () => {
+  it('shows an valid state on a supported network', () => {
+    cy.visit('/pools/1')
+    cy.contains('UNI / ETH')
+  })
+
+  it('shows an invalid state on a supported network', () => {
+    cy.visit('/pools/788893')
+    cy.contains('To view a position, you must be connected to the network it belongs to.')
+  })
+})

cypress/e2e/redirects.test.ts

@@ -3,8 +3,8 @@ describe('Redirect', () => {
     cy.visit('/create-proposal')
     cy.url().should('match', /\/vote\/create-proposal/)
   })
-  it('should redirect to /swap when visiting nonexist url', () => {
+  it('should redirect to /not-found when visiting nonexist url', () => {
     cy.visit('/none-exist-url')
-    cy.url().should('match', /\/swap/)
+    cy.url().should('match', /\/not-found/)
   })
 })

cypress/e2e/remove-liquidity.test.ts

@@ -1,31 +1,25 @@
 describe('Remove Liquidity', () => {
   it('eth remove', () => {
-    cy.visit('/remove/v2/ETH/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    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', 'MKR')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
 
   it('eth remove swap order', () => {
-    cy.visit('/remove/v2/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/ETH')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'MKR')
+    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/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    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', 'MKR')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
 
   it('does not crash if ETH is duplicated', () => {
-    cy.visit('/remove/v2/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    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')
   })
-
-  it.skip('token not in storage is loaded', () => {
-    cy.visit('/remove/v2/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'SKL')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
-  })
 })

cypress/e2e/service-worker.test.ts

@@ -1,4 +1,4 @@
-import assert = require('assert')
+import assert from 'assert'
 
 describe('Service Worker', () => {
   before(() => {
@@ -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,65 +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')
-      .wait('@NotInstalled', { timeout: 20000 })
-      .window({ timeout: 20000 })
-      .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,53 +0,0 @@
-describe('Swap', () => {
-  before(() => {
-    cy.visit('/swap')
-  })
-
-  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.skip('can swap ETH for DAI', () => {
-    cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click()
-    cy.get('#swap-currency-input .token-amount-input').clear().type('0.0000001')
-    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-    cy.get('#swap-button').click()
-    cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
-    cy.get('[data-cy="confirmation-close-icon"]').click()
-  })
-
-  it('add a recipient does not exist unless in expert mode', () => {
-    cy.get('#add-recipient-button').should('not.exist')
-  })
-
-  it.skip('ETH to wETH is same value (wrapped swaps have no price impact)', () => {
-    cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.get('.token-item-0xc778417E063141139Fce010982780140Aa0cD5Ab').click()
-    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')
-  })
-})

cypress/e2e/swap/errors.test.ts

@@ -0,0 +1,107 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { ChainId } from '@uniswap/sdk-core'
+
+import { DEFAULT_DEADLINE_FROM_NOW } from '../../../src/constants/misc'
+import { UNI, USDC_MAINNET } from '../../../src/constants/tokens'
+import { getBalance, getTestSelector } from '../../utils'
+
+const UNI_MAINNET = UNI[ChainId.MAINNET]
+
+describe('Swap errors', () => {
+  it('wallet rejection', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat().then((hardhat) => {
+      // Stub the wallet to reject any transaction.
+      cy.stub(hardhat.wallet, 'sendTransaction').log(false).rejects(new Error('user cancelled'))
+
+      // Enter amount to swap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+      cy.get('#swap-currency-input .token-amount-input').should('not.have.value', '')
+
+      // Submit transaction
+      cy.get('#swap-button').click()
+      cy.contains('Confirm swap').click()
+      cy.wait('@eth_estimateGas')
+
+      // Verify rejection
+      cy.contains('Review swap')
+      cy.contains('Confirm swap')
+    })
+  })
+
+  it('transaction past deadline', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat({ automine: false })
+    getBalance(USDC_MAINNET).then((initialBalance) => {
+      // Enter amount to swap
+      cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
+      cy.get('#swap-currency-input .token-amount-input').should('not.have.value', '')
+
+      // 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.skip('slippage failure', () => {
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.hardhat({ automine: false })
+    getBalance(USDC_MAINNET).then((initialBalance) => {
+      // Gas estimation fails for this transaction (that would normally fail), so we stub it.
+      cy.hardhat().then((hardhat) => {
+        const send = cy.stub(hardhat.provider, 'send').log(false)
+        send.withArgs('eth_estimateGas').resolves(BigNumber.from(2_000_000))
+        send.callThrough()
+      })
+
+      // Set slippage to a very low value.
+      cy.get(getTestSelector('open-settings-dialog-button')).click()
+      cy.get(getTestSelector('max-slippage-settings')).click()
+      cy.get(getTestSelector('slippage-input')).clear().type('0.01')
+      cy.get('body').click('topRight') // close modal
+      cy.get(getTestSelector('slippage-input')).should('not.exist')
+
+      // Submit 2 transactions
+      for (let i = 0; i < 2; i++) {
+        cy.get('#swap-currency-input .token-amount-input').type('200').should('have.value', '200')
+        cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
+        cy.get('#swap-button').click()
+        cy.contains('Confirm swap').click()
+        cy.wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
+        cy.contains('Swap submitted')
+        cy.get(getTestSelector('confirmation-close-icon')).click()
+      }
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '2 Pending')
+
+      // Mine transactions
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.wait('@eth_getTransactionReceipt')
+
+      // Verify transaction did not occur
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+      cy.get(getTestSelector('popups')).contains('Swap failed')
+      getBalance(UNI_MAINNET).should('eq', initialBalance)
+    })
+  })
+})

cypress/e2e/swap/settings.test.ts

@@ -0,0 +1,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], ethereum: 'hardhat' })
+    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', { ethereum: 'hardhat' })
+      cy.hardhat({ automine: false })
+      getBalance(USDC_MAINNET).then((initialBalance) => {
+        // Select USDC
+        cy.get('#swap-currency-output .open-currency-select-button').click()
+        cy.get(getTestSelector('token-search-input')).type(USDC_MAINNET.address)
+        cy.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/wrap.test.ts

@@ -0,0 +1,80 @@
+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}`, { ethereum: 'hardhat' }).hardhat({
+      automine: false,
+    })
+  })
+
+  it('ETH to wETH is same value (wrapped swaps have no price impact)', () => {
+    cy.get('#swap-currency-input .token-amount-input').type('0.01').should('have.value', '0.01')
+    cy.get('#swap-currency-output .token-amount-input').should('have.value', '0.01')
+
+    cy.get('#swap-currency-output .token-amount-input').clear().type('0.02').should('have.value', '0.02')
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '0.02')
+  })
+
+  it('should be able to wrap ETH', () => {
+    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

@@ -0,0 +1,158 @@
+import { ChainId, WETH9 } from '@uniswap/sdk-core'
+
+import { ARB, UNI } from '../../src/constants/tokens'
+import { getTestSelector } from '../utils'
+
+const UNI_MAINNET = UNI[ChainId.MAINNET]
+
+const UNI_ADDRESS = '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984'
+
+describe('Token details', () => {
+  beforeEach(() => {
+    cy.viewport(1440, 900)
+  })
+
+  it('Uniswap token should have all information populated', () => {
+    // Uniswap token
+    cy.visit(`/tokens/ethereum/${UNI_ADDRESS}`)
+
+    // Price chart should be filled in
+    cy.get('[data-cy="chart-header"]').should('include.text', '$')
+    cy.get('[data-cy="price-chart"]').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')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan').should('have.attr', 'href').and('include', `etherscan.io/address/${UNI_ADDRESS}`)
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', `info.uniswap.org/#/tokens/${UNI_ADDRESS}`)
+      cy.contains('Website').should('have.attr', 'href').and('include', 'uniswap.org')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/Uniswap')
+    })
+
+    // Contract address should be displayed
+    cy.contains(UNI_ADDRESS).should('exist')
+  })
+
+  it('token with warning and low trading volume should have all information populated', () => {
+    // Shiba predator token, low trading volume and also has warning modal
+    cy.visit('/tokens/ethereum/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+
+    // Should have missing price chart when price unavailable (expected for this token)
+    if (cy.get('[data-cy="chart-header"]').contains('Price Unavailable')) {
+      cy.get('[data-cy="missing-chart"]').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('exist')
+      cy.get('[data-cy="volume-24h"]').should('exist')
+      cy.get('[data-cy="52w-low"]').should('exist')
+      cy.get('[data-cy="52w-high"]').should('exist')
+    })
+
+    // About section should have description of token
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('QOM is the Shiba Predator').should('exist')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan')
+        .should('have.attr', 'href')
+        .and('include', 'etherscan.io/address/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', 'info.uniswap.org/#/tokens/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('Website').should('have.attr', 'href').and('include', 'qom')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/ShibaPredator1')
+    })
+
+    // Contract address should be displayed
+    cy.contains('0xa71d0588EAf47f12B13cF8eC750430d21DF04974').should('exist')
+
+    // Warning label should show if relevant ([spec](https://www.notion.so/3f7fce6f93694be08a94a6984d50298e))
+    cy.get('[data-cy="token-safety-message"]')
+      .should('include.text', 'Warning')
+      .and('include.text', "This token isn't traded on leading U.S. centralized exchanges")
+  })
+
+  describe('swapping', () => {
+    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.wait('@eth_blockNumber')
+        cy.scrollTo('top')
+      })
+    })
+
+    it('should have the expected output for a tokens detail page', () => {
+      cy.get(`#swap-currency-input .token-amount-input`).should('have.value', '')
+      cy.get(`#swap-currency-input .token-symbol-container`).should('contain.text', 'Select token')
+      cy.get(`#swap-currency-output .token-amount-input`).should('not.have.value')
+      cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'UNI')
+    })
+
+    it('should automatically navigate to the new TDP', () => {
+      cy.get(`#swap-currency-output .open-currency-select-button`).click()
+      cy.contains('WETH').click()
+      cy.url().should('include', `${WETH9[1].address}`)
+      cy.url().should('not.include', `${UNI_MAINNET.address}`)
+    })
+
+    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()
+      cy.visit('/swap')
+      cy.contains('UNI').should('not.exist')
+      cy.contains('WETH').should('not.exist')
+    })
+
+    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 show a L2 token even if the user is connected to a different network', () => {
+      cy.visit('/tokens', { ethereum: 'hardhat' })
+      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.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

@@ -0,0 +1,24 @@
+describe('Token explore filter', () => {
+  beforeEach(() => {
+    cy.visit('/tokens')
+  })
+
+  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', () => {
+    aliasFilteredTokens('dao')
+    searchFor('dao')
+
+    cy.get('@filteredTokens').then((filteredTokens) => {
+      cy.get('[data-cy="token-name"]').should('deep.equal', filteredTokens)
+    })
+  })
+})

cypress/e2e/token-explore.test.ts

@@ -0,0 +1,76 @@
+import { getTestSelector, getTestSelectorStartsWith } from '../utils'
+
+describe('Token explore', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load token leaderboard', () => {
+    cy.visit('/tokens/ethereum')
+    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-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()
+    cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).find('svg').should('exist')
+  })
+
+  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-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-NATIVE'))
+      .find(getTestSelector('volume-cell'))
+      .then(function ($elem) {
+        cy.wrap($elem.text()).as('yearlyEthVol')
+      })
+    expect(cy.get('@dailyEthVol')).to.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-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')
+    cy.get(getTestSelector('chart-container')).should('exist')
+    cy.contains('Ethereum is a smart contract platform that enables developers to build tokens').should('exist')
+    cy.contains('Etherscan').should('exist')
+  })
+
+  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-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-NATIVE'))
+      .find(getTestSelector('name-cell'))
+      .should('include.text', 'Polygon Matic')
+  })
+
+  it('should update when token explore table network changed', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).click()
+    cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.reload()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', 'Ethereum')
+  })
+})

cypress/e2e/universal-search.test.ts

@@ -0,0 +1,80 @@
+describe('Universal search bar', () => {
+  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('/')
+    openSearch()
+  })
+
+  function getSearchBar() {
+    return cy.get('[data-cy="search-bar-input"]').last()
+  }
+
+  it('should yield clickable result for regular token or nft collection search term', () => {
+    // Search for uni token by name.
+    getSearchBar().clear().type('uni')
+    cy.get('[data-cy="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()
+    cy.location('hash').should('equal', '#/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
+  })
+
+  it('should go to the selected result when recent results are shown', () => {
+    // Search for uni token by name.
+    getSearchBar().type('uni')
+    cy.get('[data-cy="searchbar-token-row-UNI"]')
+
+    // Clear search
+    getSearchBar().clear()
+
+    // Close search
+    getSearchBar().type('{esc}')
+
+    openSearch()
+
+    // Search a different token by name.
+    getSearchBar().type('eth')
+
+    // Validate ETH result now exists.
+    cy.get('[data-cy="searchbar-token-row-ETH"]')
+
+    // Hit enter
+    getSearchBar().type('{enter}')
+
+    // Validate we went to ethereum address
+    cy.url().should('contain', 'tokens/ethereum/NATIVE')
+  })
+
+  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.
+    getSearchBar().clear()
+    cy.get('[data-cy="searchbar-dropdown"]')
+      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
+      .find('[data-cy="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.
+    getSearchBar().clear().type('mtsla')
+    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
+  })
+})

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

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

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

@@ -0,0 +1,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', { ethereum: 'hardhat' })
+    cy.get(getTestSelector('web3-status-connected'))
+  })
+
+  function rejectsNetworkSwitchWith(rejection: unknown) {
+    cy.hardhat().then((hardhat) => {
+      // Reject network switch
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      sendStub.withArgs('wallet_switchEthereumChain').rejects(rejection)
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify rejected network switch
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    waitsForActiveChain('Ethereum')
+    cy.get(getTestSelector('web3-status-connected'))
+  }
+
+  it('should not display message on user rejection', () => {
+    const USER_REJECTION = { code: 4001 }
+    rejectsNetworkSwitchWith(USER_REJECTION)
+    cy.get(getTestSelector('popups')).should('not.contain', 'Failed to switch networks')
+  })
+
+  it('should display message on unknown error', () => {
+    rejectsNetworkSwitchWith(new Error('Unknown error'))
+    cy.get(getTestSelector('popups')).contains('Failed to switch networks')
+  })
+
+  it('should add missing chain', () => {
+    cy.hardhat().then((hardhat) => {
+      // https://docs.metamask.io/guide/rpc-api.html#unrestricted-methods
+      const CHAIN_NOT_ADDED = { code: 4902 } // missing message in useSelectChain
+
+      // Reject network switch with CHAIN_NOT_ADDED
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      let added = false
+      sendStub
+        .withArgs('wallet_switchEthereumChain')
+        .callsFake(() => (added ? Promise.resolve(null) : Promise.reject(CHAIN_NOT_ADDED)))
+      sendStub.withArgs('wallet_addEthereumChain').callsFake(() => {
+        added = true
+        return Promise.resolve(null)
+      })
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify the network was added
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    cy.get('@switch').should('have.been.calledWith', 'wallet_addEthereumChain', [
+      {
+        blockExplorerUrls: ['https://polygonscan.com/'],
+        chainId: '0x89',
+        chainName: 'Polygon',
+        nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
+        rpcUrls: ['https://polygon-rpc.com/'],
+      },
+    ])
+  })
+
+  it('should not disconnect while switching', () => {
+    const promise = createDeferredPromise()
+
+    cy.hardhat().then((hardhat) => {
+      // Reject network switch with CHAIN_NOT_ADDED
+      const sendStub = cy.stub(hardhat.provider, 'send').log(false).as('switch')
+      sendStub.withArgs('wallet_switchEthereumChain').returns(promise)
+      sendStub.callThrough() // allows other calls to return non-stubbed values
+    })
+
+    switchChain('Polygon')
+
+    // Verify there is no disconnection
+    cy.get('@switch').should('have.been.calledWith', 'wallet_switchEthereumChain')
+    cy.contains('Connecting to Polygon')
+    cy.get(getTestSelector('web3-status-connected')).should('be.disabled')
+    promise.resolve()
+  })
+
+  it('should switch networks', () => {
+    // Select an output currency
+    cy.get('#swap-currency-output .open-currency-select-button').click()
+    cy.contains('USDC').click()
+
+    // Populate input/output fields
+    cy.get('#swap-currency-input .token-amount-input').clear().type('1')
+    cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+
+    // Switch network
+    switchChain('Polygon')
+
+    // Verify network switch
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+    cy.get(getTestSelector('web3-status-connected'))
+    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', { ethereum: 'hardhat' })
+    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', { ethereum: 'hardhat' })
+    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,50 +1,132 @@
-import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
 import { getTestSelector } from '../utils'
 
 describe('Wallet Dropdown', () => {
-  before(() => {
-    cy.visit('/', { featureFlags: [FeatureFlag.navBar, FeatureFlag.tokenSafety] })
+  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-select-theme')).click()
-    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+  describe('testnet toggle', () => {
+    beforeEach(() => {
+      cy.visit('/swap')
+    })
+    it('should toggle testnet visibility', () => {
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('not.contain.text', 'Sepolia')
+
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+      cy.get('#testnets-toggle').click()
+      cy.get(getTestSelector('close-account-drawer')).click()
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('contain.text', 'Sepolia')
+    })
   })
 
-  it('should select a language', () => {
-    cy.get(getTestSelector('wallet-select-language')).click()
-    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
-    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 be able to view transactions', () => {
-    cy.get(getTestSelector('wallet-transactions')).click()
-    cy.get(getTestSelector('wallet-empty-transaction-text')).should('exist')
-    cy.get(getTestSelector('wallet-back')).click()
+  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 change the theme when not connected', () => {
-    cy.get(getTestSelector('wallet-disconnect')).click()
-    cy.get(getTestSelector('wallet-select-theme')).click()
-    cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
-  })
+  describe('mobile', () => {
+    beforeEach(() => {
+      cy.viewport('iphone-6').visit('/')
+    })
 
-  it('should select a language when not connected', () => {
-    cy.get(getTestSelector('wallet-select-language')).click()
-    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
-    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()
-  })
+    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 open the wallet connect modal from the drop down when not connected', () => {
-    cy.get(getTestSelector('wallet-connect-wallet')).click()
-    cy.get(getTestSelector('wallet-modal')).should('exist')
-    cy.get(getTestSelector('wallet-modal-close')).click()
+    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/release.ts

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

cypress/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

@@ -0,0 +1,80 @@
+import 'cypress-hardhat/lib/browser'
+
+import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
+
+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
+  namespace Cypress {
+    interface ApplicationWindow {
+      ethereum: Eip1193Bridge
+    }
+    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}
+       */
+      userState?: Partial<UserState>
+    }
+  }
+}
+
+// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
+// eslint-disable-next-line no-undef
+Cypress.Commands.overwrite(
+  'visit',
+  (original, url: string | Partial<Cypress.VisitOptions>, options?: Partial<Cypress.VisitOptions>) => {
+    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`
+
+    return cy
+      .intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 })
+      .provider()
+      .then((provider) =>
+        original({
+          ...options,
+          url: hashUrl,
+          onBeforeLoad(win) {
+            options?.onBeforeLoad?.(win)
+
+            // We want to test from a clean state, so we clear the local storage (which clears redux).
+            win.localStorage.clear()
+
+            // Set initial user state.
+            win.localStorage.setItem(
+              'redux_localstorage_simple_user', // storage key for the user reducer using 'redux-localstorage-simple'
+              JSON.stringify({ ...CONNECTED_WALLET_USER_STATE, ...(options?.userState ?? {}) })
+            )
+
+            // Set feature flags, if configured.
+            if (options?.featureFlags) {
+              const featureFlags = options.featureFlags.reduce((flags, flag) => ({ ...flags, [flag]: 'enabled' }), {})
+              win.localStorage.setItem('featureFlags', JSON.stringify(featureFlags))
+            }
+
+            // Inject the mock ethereum provider.
+            if (options?.ethereum === 'hardhat') {
+              win.ethereum = provider
+            } else {
+              win.ethereum = injected
+            }
+          },
+        })
+      )
+  }
+)

cypress/support/e2e.ts

@@ -5,70 +5,20 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.ts using ES2015 syntax:
-import { injected } from './ethereum'
-import assert = require('assert')
+import '@cypress/code-coverage/support'
+import './commands'
+import './setupTests'
 
-import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+// Squelch logs from fetches, as they clutter the logs so much as to make them unusable.
+// See https://docs.cypress.io/api/commands/intercept#Disabling-logs-for-a-request.
+// TODO(https://github.com/cypress-io/cypress/issues/26069): Squelch only wildcard logs once Cypress allows it.
+const log = Cypress.log
+Cypress.log = function (options, ...args) {
+  if (options.displayName === 'script' || options.name === 'request') return
+  return log(options, ...args)
+} as typeof log
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface ApplicationWindow {
-      ethereum: typeof injected
-    }
-    interface VisitOptions {
-      serviceWorker?: true
-      featureFlags?: Array<FeatureFlag>
-    }
-  }
-}
-
-// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
-// eslint-disable-next-line no-undef
-Cypress.Commands.overwrite(
-  'visit',
-  (original, url: string | Partial<Cypress.VisitOptions>, options?: Partial<Cypress.VisitOptions>) => {
-    assert(typeof url === 'string')
-
-    cy.intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 }).then(() => {
-      original({
-        ...options,
-        url: (url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url) + '?chain=goerli',
-        onBeforeLoad(win) {
-          options?.onBeforeLoad?.(win)
-          win.localStorage.clear()
-          win.localStorage.setItem('redux_localstorage_simple_user', '{"selectedWallet":"INJECTED"}')
-
-          if (options?.featureFlags) {
-            const featureFlags = options.featureFlags.reduce(
-              (flags, flag) => ({
-                ...flags,
-                [flag]: 'enabled',
-              }),
-              {}
-            )
-            win.localStorage.setItem('featureFlags', JSON.stringify(featureFlags))
-          }
-
-          win.ethereum = injected
-        },
-      })
-    })
-  }
-)
-
-beforeEach(() => {
-  // Infura security policies are based on Origin headers.
-  // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
-  cy.intercept(/infura.io/, (res) => {
-    res.headers['origin'] = 'http://localhost:3000'
-    res.continue()
-  })
-})
-
-Cypress.on('uncaught:exception', (_err, _runnable) => {
-  // returning false here prevents Cypress from
-  // failing the test
+Cypress.on('uncaught:exception', () => {
+  // returning false here prevents Cypress from failing the test
   return false
 })

cypress/support/ethereum.ts

@@ -3,26 +3,23 @@
  */
 
 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 { ChainId } from '@uniswap/sdk-core'
 
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
 const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19'
 
 // address of the above key
-export const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
+const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
+const CHAIN_ID = ChainId.GOERLI
+const HEXLIFIED_CHAIN_ID = `0x${CHAIN_ID.toString(16)}`
 
-export const TEST_ADDRESS_NEVER_USE_SHORTENED = `${TEST_ADDRESS_NEVER_USE.substr(
-  0,
-  6
-)}...${TEST_ADDRESS_NEVER_USE.substr(-4, 4)}`
-
-const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
+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 = /* GOERLI= */ 5
+  chainId = CHAIN_ID
 
   async sendAsync(...args: any[]) {
     console.debug('sendAsync called', ...args)
@@ -51,9 +48,9 @@ export const injected = new (class extends Eip1193Bridge {
     }
     if (method === 'eth_chainId') {
       if (isCallbackForm) {
-        callback(null, { result: '0x4' })
+        callback(null, { result: HEXLIFIED_CHAIN_ID })
       } else {
-        return Promise.resolve('0x4')
+        return Promise.resolve(HEXLIFIED_CHAIN_ID)
       }
     }
     try {

cypress/support/setupTests.ts

@@ -0,0 +1,63 @@
+// @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.
+  cy.intercept('*', (req) => {
+    req.headers['referer'] = 'https://app.uniswap.org'
+    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()
+  })
+
+  // 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.reply(
+      JSON.stringify({
+        code: 200,
+        server_upload_time: Date.now(),
+        payload_size_bytes: byteSize,
+        events_ingested: req.body.events.length,
+      })
+    )
+  }).intercept('https://*.sentry.io', { statusCode: 200 })
+
+  // Mock our own token list responses to avoid the latency of IPFS.
+  cy.intercept('https://gateway.ipfs.io/ipns/tokens.uniswap.org', TokenListJSON)
+    .intercept('https://gateway.ipfs.io/ipns/extendedtokens.uniswap.org', { statusCode: 404 })
+    .intercept('https://gateway.ipfs.io/ipns/unsupportedtokens.uniswap.org', { statusCode: 404 })
+
+  // Reset hardhat between tests to ensure isolation.
+  // This resets the fork, as well as options like automine.
+  cy.hardhat().then((hardhat) => hardhat.reset())
+})
+
+function logJsonRpc(req: CyHttpMessages.IncomingHttpRequest) {
+  req.alias = req.body.method
+  const log = Cypress.log({
+    autoEnd: false,
+    name: req.body.method,
+    message: req.body.params?.map((param: unknown) =>
+      typeof param === 'object' ? '{...}' : param?.toString().substring(0, 10)
+    ),
+  })
+  req.on('after:response', (res) => {
+    if (res.statusCode === 200) {
+      log.end()
+    } else {
+      log.error(new Error(`${res.statusCode}: ${res.statusMessage}`))
+    }
+  })
+}

cypress/tsconfig.json

@@ -1,9 +1,18 @@
 {
   "compilerOptions": {
+    "esModuleInterop": true,
+    "incremental": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "noEmit": true,
     "strict": true,
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
+    "target": "ES5",
+    "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/cypress", // avoid clobbering the build tsbuildinfo
+    "types": ["cypress", "node"],
+    "jsx": "react"
   },
-  "include": ["**/*.ts"]
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts"],
+  "watchOptions": {
+    "excludeDirectories": ["node_modules"]
+  }
 }

cypress/utils/graphql-test-utils.ts

@@ -1,7 +1,7 @@
 // Utility to match GraphQL mutation based on the query name
 export const hasQuery = (req: any, queryName: string) => {
   const { body } = req
-  return body.hasOwnProperty('query') && body.query.includes(queryName)
+  return Object.prototype.hasOwnProperty.call(body, 'query') && body.query.includes(queryName)
 }
 
 // Alias query if queryName  matches

cypress/utils/index.ts

@@ -1 +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

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

eslint_rules/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)
+            },
+          })
+        }
+      },
+    }
+  },
+}

fetch-schema.js

@@ -1,14 +0,0 @@
-/* eslint-disable */
-require('dotenv').config({ path: '.env.production' })
-const { exec } = require('child_process')
-const dataConfig = require('./relay.config')
-const thegraphConfig = require('./relay_thegraph.config')
-/* eslint-enable */
-
-const THEGRAPH_API_URL = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
-exec(`get-graphql-schema ${THEGRAPH_API_URL} > ${thegraphConfig.schema}`)
-
-console.log(process.env.REACT_APP_AWS_API_ENDPOINT)
-exec(
-  `get-graphql-schema --h Origin=https://app.uniswap.org ${process.env.REACT_APP_AWS_API_ENDPOINT} > ${dataConfig.schema}`
-)

functions/__snapshots__/collection.test.ts.snap

@@ -0,0 +1,403 @@
+// 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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/__snapshots__/nft.test.ts.snap

@@ -0,0 +1,403 @@
+// 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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/__snapshots__/token.test.ts.snap

@@ -0,0 +1,671 @@
+// 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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 FUC on Uniswap"/><meta property="og:image" content="https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get FUC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/arbitrum/0x1f52145666c862ed3e2f1da213d479e61b2892af"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get FUC on Uniswap"/><meta property="twitter:image" content="https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112"/><meta property="twitter:image:alt" content="Get FUC 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 5`] = `
+"<!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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
+
+    <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/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/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 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/components/metaTagInjector.ts

@@ -0,0 +1,41 @@
+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 {
+  constructor(private input: MetaTagInjectorInput) {}
+
+  append(element, property: string, content: string) {
+    element.append(`<meta property="${property}" content="${content}"/>`, { html: true })
+  }
+
+  /**
+   * Event handler for ElementHandler {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/#element-handlers}
+   */
+  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,10 @@
+{
+  "globalSetup": "<rootDir>/global-setup.ts",
+  "globalTeardown": "<rootDir>/global-teardown.ts",
+  "preset": "ts-jest",
+  "transform": {
+    "'^.+\\.(ts|tsx)?$'": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest"
+  },
+  "testTimeout": 50000
+}

functions/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 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/asset/[[index]].ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-unused-modules */
+import { MetaTagInjector } from '../../components/metaTagInjector'
+import getAsset from '../../utils/getAsset'
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const { index } = params
+  const collectionAddress = index[0]?.toString()
+  const tokenId = index[1]?.toString()
+  const assetPromise = getAsset(collectionAddress, tokenId, request.url)
+  const resPromise = next()
+  try {
+    const [data, res] = await Promise.all([assetPromise, resPromise])
+    if (!data) {
+      return resPromise
+    }
+    return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
+  } catch (e) {
+    return resPromise
+  }
+}

functions/nfts/collection/[index].ts

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-unused-modules */
+import { MetaTagInjector } from '../../components/metaTagInjector'
+import getCollection from '../../utils/getCollection'
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const { index } = params
+  const collectionAddress = index?.toString()
+  const collectionPromise = getCollection(collectionAddress, request.url)
+  const resPromise = next()
+  try {
+    const [data, res] = await Promise.all([collectionPromise, resPromise])
+    if (!data) {
+      return resPromise
+    }
+    return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
+  } catch (e) {
+    return resPromise
+  }
+}

functions/token.test.ts

@@ -0,0 +1,76 @@
+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: '0x1f52145666c862ed3e2f1da213d479e61b2892af',
+    network: 'arbitrum',
+    symbol: 'FUC',
+    image: 'https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112',
+  },
+  {
+    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/tokens/[[index]].ts

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-unused-modules */
+import { MetaTagInjector } from '../components/metaTagInjector'
+import getToken from '../utils/getToken'
+
+const convertTokenAddress = (tokenAddress: string) => {
+  return tokenAddress && tokenAddress === 'NATIVE' ? '0x0000000000000000000000000000000000000000' : tokenAddress
+}
+
+export const onRequest: PagesFunction = async ({ params, request, next }) => {
+  const { index } = params
+  const networkName = index[0]?.toString().toUpperCase()
+  const tokenAddress = convertTokenAddress(index[1]?.toString())
+  if (!tokenAddress) {
+    return next()
+  }
+  const tokenPromise = getToken(networkName, tokenAddress, request.url)
+  const resPromise = next()
+  try {
+    const [data, res] = await Promise.all([tokenPromise, resPromise])
+    if (!data) {
+      return resPromise
+    }
+    return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
+  } catch (e) {
+    return resPromise
+  }
+}

functions/tsconfig.json

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

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/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, 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

@@ -0,0 +1,26 @@
+/* eslint-env node */
+
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+// Generates TS objects from the schemas returned by graphql queries
+// To learn more: https://www.apollographql.com/docs/react/development-testing/static-typing/#setting-up-your-project
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: './src/graphql/data/schema.graphql',
+  documents: ['./src/graphql/data/**', '!./src/graphql/data/__generated__/**', '!**/thegraph/**'],
+  generates: {
+    'src/graphql/data/__generated__/types-and-hooks.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+      config: {
+        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,
+      },
+    },
+  },
+}
+
+// This is used in package.json when generating apollo schemas however the linter stills flags this as unused
+// eslint-disable-next-line import/no-unused-modules
+export default config

graphql.data.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 module.exports = {
   src: './src',
   language: 'typescript',

graphql.thegraph.codegen.config.ts

@@ -0,0 +1,25 @@
+/* eslint-env node */
+
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+// Generates TS objects from the schemas returned by graphql queries
+// To learn more: https://www.apollographql.com/docs/react/development-testing/static-typing/#setting-up-your-project
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: './src/graphql/thegraph/schema.graphql',
+  documents: ['!./src/graphql/data/**', '!./src/graphql/thegraph/__generated__/**', './src/graphql/thegraph/**'],
+  generates: {
+    'src/graphql/thegraph/__generated__/types-and-hooks.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+      config: {
+        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',
+      },
+    },
+  },
+}
+
+// This is used in package.json when generating apollo schemas however the linter stills flags this as unused
+// eslint-disable-next-line import/no-unused-modules
+export default config

graphql.thegraph.config.js

@@ -1,5 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const defaultConfig = require('./relay.config')
+/* eslint-env node */
+
+const defaultConfig = require('./graphql.data.config')
 
 module.exports = {
   src: defaultConfig.src,

hardhat.config.js

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