fix: Cherrypick main fixes to staging (#7166)

* fix: token margin in searchbar (#7155)

fix: token margin is searchbar

* feat: Add base support to Explore & Search (#7165)

* filter search results

* feat: add full base TDP support

* add base to uni wallet supported chains

* fix: test id based on address & chain instead of ticker (#7167)

* fix: test id based on address instead of ticker

* add chain to test id

* use token address

* lowercase

---------

Co-authored-by: Jack Short <john.short.tj@gmail.com>

.env

@@ -4,6 +4,8 @@ REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
 REACT_APP_BNB_RPC_URL="https://rough-sleek-hill.bsc.quiknode.pro/413cc98cbc776cda8fdf1d0f47003583ff73d9bf"
+REACT_APP_BASE_GOERLI_RPC_URL="https://wiser-compatible-mansion.base-goerli.quiknode.pro/5874f36248e17020a1006149e7f68c63967e1f45/"
+REACT_APP_BASE_MAINNET_RPC_URL="https://cool-white-diagram.base-mainnet.quiknode.pro/d8f036f35dfab2c68f32dfa822cd971e7a25a117/"
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"
 REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=staging"
@@ -11,4 +13,5 @@ REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_DycfESRid31UaSxhI5yWKe1r5E5kKSz"
 REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
 REACT_APP_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
 REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
-REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"
+REACT_APP_UNISWAP_API_URL="https://api.uniswap.org/v2"
+REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"

.eslintrc.js

@@ -1,5 +1,6 @@
 /* eslint-env node */
 
+const { node: restrictedImports } = require('@uniswap/eslint-config/restrictedImports')
 require('@uniswap/eslint-config/load')
 
 const rulesDirPlugin = require('eslint-plugin-rulesdir')
@@ -27,6 +28,7 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx'],
       rules: {
+        '@typescript-eslint/no-restricted-imports': ['error', restrictedImports],
         'import/no-restricted-paths': [
           'error',
           {
@@ -57,5 +59,22 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      excludedFiles: ['src/analytics/*'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: '@uniswap/analytics',
+                message: `Do not import from '@uniswap/analytics' directly. Use 'analytics' instead.`,
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 }

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

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

.github/actions/setup/action.yml

@@ -23,9 +23,9 @@ runs:
     - 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
+    
+    # Run patch-package to apply patches to dependencies.
+    - run: yarn patch-package
       shell: bash
 
     # Contracts are compiled from source. If source hasn't changed, the contracts do not need to be re-compiled.
@@ -40,35 +40,10 @@ runs:
       run: yarn contracts
       shell: bash
 
-    # GraphQL is generated from schema. The schema is always fetched, but if unchanged, graphql does not need to be re-generated.
-    - run: yarn graphql:fetch
-      shell: bash
-    - uses: actions/cache@v3
-      id: graphql-cache
-      with:
-        path: src/graphql/**/__generated__
-        key: ${{ runner.os }}-graphql-${{ hashFiles('src/graphql/**/schema.graphql') }}
-    - if: steps.graphql-cache.outputs.cache-hit != 'true'
-      run: yarn graphql:generate
-      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
+    # These operations cannot be cached, so they are run concurrently
+    # - ajv: Validators compile quickly, so caching can be omitted.
+    # - graphql: 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.
+    # - i18n: Messages are extracted from source and compiled. No caching extractor is available (out-of-the-box).
+    - run: yarn concurrently --max-processes=100% npm:ajv npm:graphql npm:i18n
       shell: bash

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

@@ -14,6 +14,21 @@ jobs:
     environment:
       name: push/prod
     steps:
+      - name: Check test status
+        uses: actions/github-script@v6.4.1
+        with:
+          script: |
+            const statuses = await github.rest.repos.listCommitStatusesForRef({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: context.sha
+            })
+            const status = statuses.data.find(status => status.context === 'Test / promotion')?.state || 'missing'
+            core.info('Status: ' + status)
+            if (status !== 'success') {
+              core.setFailed('"Test / promotion" must be successful before pushing')
+            }
+
       - uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
         with:
           token: ${{ secrets.RELEASE_SERVICE_ACCESS_TOKEN }}

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache@v3
         with:
           path: node_modules/.cache
           key: ${{ runner.os }}-eslint-${{ github.run_id }}
@@ -35,7 +35,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache@v3
         with:
           path: node_modules/.cache
           key: ${{ runner.os }}-tsc-${{ github.run_id }}
@@ -64,7 +64,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache@v3
         with:
           path: node_modules/.cache
           key: ${{ runner.os }}-jest-${{ github.run_id }}
@@ -81,25 +81,40 @@ jobs:
           name: Unit tests
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
 
-  build-e2e:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache@v3
         with:
-          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"
+          path: node_modules/.swc
+          key: ${{ runner.os }}-swc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-swc-
+      - run: yarn build
       - uses: actions/upload-artifact@v3
         with:
-          name: build-e2e
+          name: build
           path: build
           if-no-files-found: error
 
+  cypress-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cypress-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cypress-tsc-
+      - run: yarn typecheck:cypress
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cypress typecheck
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+
   # Allows for parallel re-runs of cypress tests without re-building.
   cypress-rerun:
     runs-on: ubuntu-latest
@@ -107,7 +122,7 @@ jobs:
       - run: exit 0
 
   cypress-test-matrix:
-    needs: [build-e2e, cypress-rerun]
+    needs: [build, cypress-rerun]
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -116,7 +131,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache@v3
         with:
           path: /root/.cache/Cypress
           key: ${{ runner.os }}-cypress-${{ hashFiles('**/node_modules/cypress/package.json') }}
@@ -126,10 +141,10 @@ jobs:
 
       - uses: actions/download-artifact@v3
         with:
-          name: build-e2e
+          name: build
           path: build
 
-      - uses: ./.github/actions/cache-on-main
+      - uses: actions/cache/restore@v3
         with:
           path: cache
           key: ${{ runner.os }}-hardhat-${{ hashFiles('hardhat.config.js') }}-${{ github.run_id }}
@@ -158,17 +173,60 @@ jobs:
           COMMIT_INFO_TIMESTAMP: ${{ github.event.pull_request.updated_at || github.event.head_commit.timestamp }}
           CYPRESS_PULL_REQUEST_ID: ${{ github.event.pull_request.number }}
           CYPRESS_PULL_REQUEST_URL: ${{ github.event.pull_request.html_url }}
-      - uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: false
-          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 }}
 
+      - uses: actions/upload-artifact@v3
+        with:
+          name: hardhat-cache
+          path: cache
+
+  hardhat-cache:
+    needs: [cypress-test-matrix]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: hardhat-cache
+          path: cache
+      - uses: actions/cache/save@v3
+        with:
+          path: cache
+          key: ${{ runner.os }}-hardhat-${{ hashFiles('hardhat.config.js') }}-${{ github.run_id }}
+
+  cloud-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cloud-tsc-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cloud-tsc-
+      - run: yarn typecheck:cloud
+      - if: failure() && github.ref_name == 'main'
+        uses: ./.github/actions/report
+        with:
+          name: Cloud typecheck
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
+
+  # TODO(WEB-2537): Setup CodeCOV
+  cloud-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-cloud-jest-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-cloud-jest-
+      - run: yarn test:cloud --coverage --maxWorkers=100%
+        
   pre:
     if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }}
     runs-on: ubuntu-latest

.gitignore

@@ -19,6 +19,8 @@ schema.graphql
 # testing
 /coverage
 /cache
+/functions/coverage
+/.swc
 
 # builds
 /build
@@ -46,7 +48,10 @@ notes.txt
 
 package-lock.json
 
+cypress/downloads
 cypress/videos
 cypress/screenshots
 
 .vercel
+
+.wrangler

.swcrc

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  // has to duplicate from package.json, see swc issue: https://swc.rs/docs/configuration/compilation#env
+  // this breaks jest because jest is setting target for some reason
+  // "env": {
+  //   "targets": "> 0.5%, not dead"
+  // },
+  "jsc": {
+    // without this swc breaks WalletConnect class super() call
+    "target": "es2020",
+    "keepClassNames": true,
+    "experimental": {
+      "plugins": [
+        [
+          "@lingui/swc-plugin",
+          {}
+        ],
+        [
+          "@swc/plugin-styled-components",
+          {
+            "displayName": true
+          }
+        ]
+      ]
+    },
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  }
+}

CODEOWNERS

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

README.md

@@ -69,10 +69,10 @@ Other things to note:
 
 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/#/pools/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,10 +0,0 @@
-/* eslint-env node */
-
-const isDev = process.env.NODE_ENV === 'development'
-
-module.exports = {
-  styledComponents: {
-    fileName: isDev,
-    displayName: isDev,
-  },
-}

codecov.yml

@@ -6,12 +6,12 @@ ignore:
   - "**/instrumented/**/*"
   - "**/styles/**/*"
   - "styles/**/*"
+  - "**/styled.tsx"
   - "**/constants/**/*"
   - "constants/**/*"
 
 coverage:
   status:
-    # Omit merging unit/e2e reports into the defaults, as it is nonsensical.
     project: off
     patch: off
 
@@ -25,20 +25,12 @@ flag_management:
         removed_code_behavior: adjust_base
         if_ci_failed: error
       - type: patch
-        target: 80%
+        target: 50%
   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:

craco.config.cjs

@@ -5,12 +5,15 @@ const { execSync } = require('child_process')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
-const { DefinePlugin, IgnorePlugin, ProvidePlugin } = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const { IgnorePlugin, ProvidePlugin } = require('webpack')
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
 
 const commitHash = execSync('git rev-parse HEAD').toString().trim()
 const isProduction = process.env.NODE_ENV === 'production'
 
+process.env.REACT_APP_GIT_COMMIT_HASH = commitHash
+
 // 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
@@ -21,32 +24,6 @@ function getCacheDirectory(cacheName) {
 }
 
 module.exports = {
-  babel: {
-    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) {
@@ -69,15 +46,19 @@ module.exports = {
     configure(jestConfig) {
       return Object.assign(jestConfig, {
         cacheDirectory: getCacheDirectory('jest'),
-        transform: Object.assign(jestConfig.transform, {
+        transform: {
+          ...Object.entries(jestConfig.transform).reduce((transform, [key, value]) => {
+            if (value.match(/babel/)) return transform
+            return { ...transform, [key]: value }
+          }, {}),
           // Transform vanilla-extract using its own transformer.
           // See https://sandroroth.com/blog/vanilla-extract-cra#jest-transform.
           '\\.css\\.ts$': '@vanilla-extract/jest-transform',
-        }),
+          '\\.(t|j)sx?$': '@swc/jest',
+        },
         // Use @uniswap/conedison's build directly, as jest does not support its exports.
-        transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
+        transformIgnorePatterns: ['@uniswap/conedison/provider'],
         moduleNameMapper: {
-          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
           '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
         },
       })
@@ -88,12 +69,9 @@ module.exports = {
       // Webpack 5 does not polyfill node globals, so we do so for those necessary:
       new ProvidePlugin({
         // - react-markdown requires process.cwd
-        process: 'process/browser',
+        process: 'process/browser.js',
       }),
-      // 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 VanillaExtractPlugin(),
       new RetryChunkLoadPlugin({
         cacheBust: `function() {
           return 'cache-bust=' + Date.now();
@@ -109,14 +87,6 @@ module.exports = {
       // 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) {
@@ -163,13 +133,9 @@ module.exports = {
 
       // 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')
+        if (rule.loader && rule.loader.match(/babel-loader/)) {
+          rule.loader = 'swc-loader'
+          delete rule.options
         }
         return rule
       })
@@ -177,6 +143,15 @@ module.exports = {
       // Configure webpack optimization:
       webpackConfig.optimization = Object.assign(
         webpackConfig.optimization,
+        {
+          minimize: isProduction,
+          minimizer: [
+            new TerserPlugin({
+              minify: TerserPlugin.swcMinify,
+              parallel: require('os').cpus().length,
+            }),
+          ],
+        },
         isProduction
           ? {
               splitChunks: {
@@ -192,16 +167,15 @@ module.exports = {
           : {}
       )
 
-      // Configure webpack caching:
-      webpackConfig.cache = Object.assign(webpackConfig.cache, {
-        cacheDirectory: getCacheDirectory('webpack'),
-      })
+      // Configure webpack resolution. webpackConfig.cache is unused with swc-loader, but the resolver can still cache:
+      webpackConfig.resolve = Object.assign(webpackConfig.resolve, { unsafeCache: true })
 
-      // 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/]
+      webpackConfig.ignoreWarnings = [
+        // 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.
+        /Failed to parse source map/,
+      ]
 
       return webpackConfig
     },

cypress.config.ts

@@ -1,7 +1,5 @@
-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',
@@ -9,22 +7,10 @@ export default defineConfig({
   chromeWebSecurity: false,
   experimentalMemoryManagement: true, // better memory management, see https://github.com/cypress-io/cypress/pull/25462
   retries: { runMode: 2 },
-  videoCompression: false,
+  video: false, // GH provides 2 CPUs, and cypress video eats one up, see https://github.com/cypress-io/cypress/issues/20468#issuecomment-1307608025
   e2e: {
     async setupNodeEvents(on, config) {
       await setupHardhatEvents(on, config)
-      codeCoverageTask(on, config)
-
-      // 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',

cypress/README.md

@@ -52,7 +52,7 @@ This becomes more relevant as you work with data on the blockchain, as you'll ne
 
 ```
 cy.hardhat().then(async (hardhat) => {
-  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
   cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
   cy.get('#swap-button').click()
   cy.contains('Confirm swap').click()
@@ -68,7 +68,7 @@ cy.hardhat().then(async (hardhat) => {
 ```
 
 ```
-  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+  cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
   cy.get('#swap-currency-output .token-amount-input').type('1').should('have.value', '1')
   cy.get('#swap-button').click()
   cy.contains('Confirm swap').click()
@@ -87,7 +87,6 @@ cy.hardhat().then(async (hardhat) => {
 ### 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 })`.
 

cypress/e2e/add-liquidity.test.ts

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

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

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

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

@@ -3,7 +3,7 @@ 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' })
+    cy.visit('/swap')
   })
 
   it('fetches balances when account button is first hovered', () => {
@@ -41,6 +41,7 @@ describe('Mini Portfolio account drawer', () => {
     cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()
     cy.get(getTestSelector('mini-portfolio-page')).contains('I Got Plenty')
 
+    cy.intercept(/graphql/, { fixture: 'mini-portfolio/pools.json' })
     cy.get(getTestSelector('mini-portfolio-navbar')).contains('Pools').click()
     cy.get(getTestSelector('mini-portfolio-page')).contains('No pools yet')
 
@@ -76,4 +77,36 @@ describe('Mini Portfolio account drawer', () => {
         })
     })
   })
+
+  it('fetches ENS name', () => {
+    cy.hardhat().then(() => {
+      const haydenAccount = '0x50EC05ADe8280758E2077fcBC08D878D4aef79C3'
+      const haydenENS = 'hayden.eth'
+
+      // Opens the account drawer
+      cy.get(getTestSelector('web3-status-connected')).click()
+
+      // Simulate wallet changing to Hayden's account
+      cy.window().then((win) => win.ethereum.emit('accountsChanged', [haydenAccount]))
+
+      // Hayden's ENS name should be shown
+      cy.contains(haydenENS).should('exist')
+
+      // Close account drawer
+      cy.get(getTestSelector('close-account-drawer')).click()
+
+      // Switch chain to Polygon
+      cy.get(getTestSelector('chain-selector')).eq(1).click()
+      cy.contains('Polygon').click()
+
+      //Reopen account drawer
+      cy.get(getTestSelector('web3-status-connected')).click()
+
+      // Simulate wallet changing to Hayden's account
+      cy.window().then((win) => win.ethereum.emit('accountsChanged', [haydenAccount]))
+
+      // Hayden's ENS name should be shown
+      cy.contains(haydenENS).should('exist')
+    })
+  })
 })

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

@@ -94,9 +94,7 @@ describe('mini-portfolio activity history', () => {
   })
 
   it('should deduplicate activity history by nonce', () => {
-    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' }).hardhat({
-      automine: false,
-    })
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`).hardhat({ automine: false })
 
     // Input swap info.
     cy.get('#swap-currency-input .token-amount-input').clear().type('1').should('have.value', '1')

cypress/e2e/nfts.test.ts

@@ -1,7 +1,6 @@
 import { getTestSelector } from '../utils'
 
 const PUDGY_COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
-const BONSAI_COLLECTION_ADDRESS = '0xec9c519d49856fd2f8133a0741b4dbe002ce211b'
 
 describe('Testing nfts', () => {
   it('should load nft leaderboard', () => {
@@ -13,7 +12,7 @@ describe('Testing nfts', () => {
   })
 
   it('should load pudgy penguin collection page', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    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()
@@ -21,13 +20,13 @@ describe('Testing nfts', () => {
   })
 
   it('should be able to navigate to activity', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    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.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()
@@ -38,7 +37,10 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
-    cy.visit(`#/nfts/asset/${BONSAI_COLLECTION_ADDRESS}/7580`)
+    cy.visit(`/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
+    cy.get(getTestSelector('nft-collection-asset')).first().click()
     cy.get(getTestSelector('nft-details-description-text')).should('exist')
     cy.get(getTestSelector('nft-details-description')).click()
     cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
@@ -50,7 +52,7 @@ describe('Testing nfts', () => {
     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-nft')).first().click()
     cy.get(getTestSelector('mini-portfolio-navbar')).should('not.be.visible')
   })
 })

cypress/e2e/permit2.test.ts

@@ -17,9 +17,7 @@ function initiateSwap() {
 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.visit(`/swap/?inputCurrency=${inputToken.address}&outputCurrency=${outputToken.address}`)
     cy.get('#swap-currency-input .token-amount-input').type('0.01')
   }
 
@@ -28,15 +26,19 @@ describe('Permit2', () => {
     // check token approval
     cy.hardhat()
       .then(({ approval, wallet }) => approval.getTokenAllowanceForPermit2({ owner: wallet, token: inputToken }))
-      .should('deep.equal', MaxUint256)
+      .then((allowance) => {
+        Cypress.log({ name: `Token allowance: ${allowance.toString()}` })
+        cy.wrap(allowance).should('deep.equal', MaxUint256)
+      })
   }
 
   /** Asserts the universal router has a max permit2 approval for spend of the input token on-chain. */
   function expectPermit2AllowanceForUniversalRouterToBeMax(inputToken: Token) {
     cy.hardhat()
-      .then((hardhat) => hardhat.approval.getPermit2Allowance({ owner: hardhat.wallet, token: inputToken }))
+      .then(({ approval, wallet }) => approval.getPermit2Allowance({ owner: wallet, token: inputToken }))
       .then((allowance) => {
-        cy.wrap(MaxUint160.eq(allowance.amount)).should('eq', true)
+        Cypress.log({ name: `Permit2 allowance: ${allowance.amount.toString()}` })
+        cy.wrap(allowance.amount).should('deep.equal', MaxUint160)
         // Asserts that the on-chain expiration is in 30 days, within a tolerance of 40 seconds.
         const THIRTY_DAYS_SECONDS = 2_592_000
         const expected = Math.floor(Date.now() / 1000 + THIRTY_DAYS_SECONDS)
@@ -44,6 +46,13 @@ describe('Permit2', () => {
       })
   }
 
+  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 }))
@@ -66,8 +75,9 @@ describe('Permit2', () => {
       cy.contains('Allow DAI to be used for swapping')
       cy.wait('@eth_signTypedData_v4')
       cy.wait('@eth_sendRawTransaction')
+      cy.contains('Swap submitted')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
       expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
     })
@@ -90,7 +100,7 @@ describe('Permit2', () => {
       // Verify transaction
       cy.wait('@eth_sendRawTransaction')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
     })
 
@@ -133,7 +143,7 @@ describe('Permit2', () => {
       // Verify transaction
       cy.wait('@eth_sendRawTransaction')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
     })
   })
@@ -149,7 +159,7 @@ describe('Permit2', () => {
     initiateSwap()
 
     // Verify transaction
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
   })
 
@@ -188,7 +198,7 @@ describe('Permit2', () => {
       cy.contains('Confirm swap').click()
 
       // Verify permit2 approval
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
       expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
     })
@@ -222,7 +232,7 @@ describe('Permit2', () => {
 
     // Verify permit2 approval
     cy.wait('@eth_signTypedData_v4')
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
     expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })
@@ -240,7 +250,7 @@ describe('Permit2', () => {
 
     // Verify permit2 approval
     cy.wait('@eth_signTypedData_v4')
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
     expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })

cypress/e2e/remove-liquidity.test.ts

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

cypress/e2e/swap/errors.test.ts

@@ -1,15 +1,13 @@
 import { BigNumber } from '@ethersproject/bignumber'
-import { ChainId } from '@uniswap/sdk-core'
+import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { DEFAULT_DEADLINE_FROM_NOW } from '../../../src/constants/misc'
-import { UNI, USDC_MAINNET } from '../../../src/constants/tokens'
+import { DAI, 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.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
     cy.hardhat().then((hardhat) => {
       // Stub the wallet to reject any transaction.
       cy.stub(hardhat.wallet, 'sendTransaction').log(false).rejects(new Error('user cancelled'))
@@ -30,7 +28,7 @@ describe('Swap errors', () => {
   })
 
   it('transaction past deadline', () => {
-    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`, { ethereum: 'hardhat' })
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${USDC_MAINNET.address}`)
     cy.hardhat({ automine: false })
     getBalance(USDC_MAINNET).then((initialBalance) => {
       // Enter amount to swap
@@ -41,7 +39,7 @@ describe('Swap errors', () => {
       cy.get('#swap-button').click()
       cy.contains('Confirm swap').click()
       cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
-      cy.contains('Transaction submitted')
+      cy.contains('Swap submitted')
       cy.get(getTestSelector('confirmation-close-icon')).click()
       cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
 
@@ -64,10 +62,19 @@ describe('Swap errors', () => {
     })
   })
 
-  it.skip('slippage failure', () => {
-    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${UNI_MAINNET.address}`, { ethereum: 'hardhat' })
-    cy.hardhat({ automine: false })
-    getBalance(USDC_MAINNET).then((initialBalance) => {
+  it('slippage failure', () => {
+    cy.visit(`/swap?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`)
+    cy.hardhat({ automine: false }).then(async (hardhat) => {
+      await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(USDC_MAINNET, 500e6))
+      await hardhat.mine()
+      await Promise.all([
+        hardhat.approval.setTokenAllowanceForPermit2({ owner: hardhat.wallet, token: USDC_MAINNET }),
+        hardhat.approval.setPermit2Allowance({ owner: hardhat.wallet, token: USDC_MAINNET }),
+      ])
+      await hardhat.mine()
+    })
+
+    getBalance(DAI).then((initialBalance) => {
       // Gas estimation fails for this transaction (that would normally fail), so we stub it.
       cy.hardhat().then((hardhat) => {
         const send = cy.stub(hardhat.provider, 'send').log(false)
@@ -89,8 +96,10 @@ describe('Swap errors', () => {
         cy.get('#swap-button').click()
         cy.contains('Confirm swap').click()
         cy.wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
-        cy.contains('Transaction submitted')
-        cy.get(getTestSelector('confirmation-close-icon')).click()
+        cy.contains('Swap submitted')
+        if (i === 0) {
+          cy.get(getTestSelector('confirmation-close-icon')).click()
+        }
       }
       cy.get(getTestSelector('web3-status-connected')).should('contain', '2 Pending')
 
@@ -98,10 +107,13 @@ describe('Swap errors', () => {
       cy.hardhat().then((hardhat) => hardhat.mine())
       cy.wait('@eth_getTransactionReceipt')
 
-      // Verify transaction did not occur
+      cy.contains('Swap failed')
+
+      // Verify only 1 transaction occurred
       cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+      cy.get(getTestSelector('popups')).contains('Swapped')
       cy.get(getTestSelector('popups')).contains('Swap failed')
-      getBalance(UNI_MAINNET).should('eq', initialBalance)
+      getBalance(DAI).should('be.closeTo', initialBalance + 200, 1)
     })
   })
 })

cypress/e2e/swap/settings.test.ts

@@ -1,14 +1,29 @@
+import { FeatureFlag } from '../../../src/featureFlags'
 import { getTestSelector } from '../../utils'
 
 describe('Swap settings', () => {
   it('Opens and closes the settings menu', () => {
-    cy.visit('/swap')
+    cy.visit('/swap', { featureFlags: [FeatureFlag.uniswapXEnabled] })
     cy.contains('Settings').should('not.exist')
     cy.get(getTestSelector('open-settings-dialog-button')).click()
+    cy.get(getTestSelector('mobile-settings-menu')).should('not.exist')
     cy.contains('Max slippage').should('exist')
     cy.contains('Transaction deadline').should('exist')
-    cy.contains('Auto Router API').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')
   })
+
+  it('should open the mobile settings menu', () => {
+    cy.viewport('iphone-6')
+    cy.visit('/swap', { featureFlags: [FeatureFlag.uniswapXEnabled] })
+    cy.get(getTestSelector('open-settings-dialog-button')).click()
+    cy.get(getTestSelector('mobile-settings-menu')).should('exist')
+    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('mobile-settings-scrim')).click()
+  })
 })

cypress/e2e/swap/swap.test.ts

@@ -52,13 +52,13 @@ describe('Swap', () => {
     })
 
     it('swaps ETH for USDC', () => {
-      cy.visit('/swap', { ethereum: 'hardhat' })
+      cy.visit('/swap')
       cy.hardhat({ automine: false })
       getBalance(USDC_MAINNET).then((initialBalance) => {
         // Select USDC
         cy.get('#swap-currency-output .open-currency-select-button').click()
         cy.get(getTestSelector('token-search-input')).type(USDC_MAINNET.address)
-        cy.contains('USDC').click()
+        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')
@@ -69,9 +69,9 @@ describe('Swap', () => {
         cy.contains('Review swap')
         cy.contains('Confirm swap').click()
         cy.wait('@eth_estimateGas').wait('@eth_sendRawTransaction').wait('@eth_getTransactionReceipt')
-        cy.contains('Transaction submitted')
+        cy.contains('Swap submitted')
         cy.get(getTestSelector('confirmation-close-icon')).click()
-        cy.contains('Transaction submitted').should('not.exist')
+        cy.contains('Swap submitted').should('not.exist')
         cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
 
         // Mine transaction

cypress/e2e/swap/timeToSwap.test.ts

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

cypress/e2e/swap/wrap.test.ts

@@ -6,9 +6,7 @@ const WETH = WETH9[ChainId.MAINNET]
 
 describe('Swap wrap', () => {
   beforeEach(() => {
-    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${WETH.address}`, { ethereum: 'hardhat' }).hardhat({
-      automine: false,
-    })
+    cy.visit(`/swap?inputCurrency=ETH&outputCurrency=${WETH.address}`).hardhat({ automine: false })
   })
 
   it('ETH to wETH is same value (wrapped swaps have no price impact)', () => {

cypress/e2e/token-details.test.ts

@@ -93,9 +93,7 @@ describe('Token details', () => {
     beforeEach(() => {
       // On mobile widths, we just link back to /swap instead of rendering the swap component.
       cy.viewport(1200, 800)
-      cy.visit(`/tokens/ethereum/${UNI_MAINNET.address}`, {
-        ethereum: 'hardhat',
-      }).then(() => {
+      cy.visit(`/tokens/ethereum/${UNI_MAINNET.address}`).then(() => {
         cy.wait('@eth_blockNumber')
         cy.scrollTo('top')
       })
@@ -145,7 +143,7 @@ describe('Token details', () => {
     })
 
     it('should show a L2 token even if the user is connected to a different network', () => {
-      cy.visit('/tokens', { ethereum: 'hardhat' })
+      cy.visit('/tokens')
       cy.get(getTestSelector('tokens-network-filter-selected')).click()
       cy.get(getTestSelector('tokens-network-filter-option-arbitrum')).click()
       cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Arbitrum')

cypress/e2e/token-explore.test.ts

@@ -36,7 +36,7 @@ describe('Token explore', () => {
       .then(function ($elem) {
         cy.wrap($elem.text()).as('yearlyEthVol')
       })
-    expect(cy.get('@dailyEthVol')).to.not.equal(cy.get('@yearlyEthVol'))
+    cy.get('@dailyEthVol').should('not.equal', cy.get('@yearlyEthVol'))
   })
 
   it('should navigate to token detail page when row clicked', () => {
@@ -69,8 +69,5 @@ describe('Token explore', () => {
     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

@@ -1,45 +1,72 @@
+import { ChainId } from '@uniswap/sdk-core'
+import { UNI } from 'constants/tokens'
+
+import { getTestSelector } from '../utils'
+
+const UNI_ADDRESS = UNI[ChainId.MAINNET].address.toLowerCase()
+
 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('/')
-    cy.get('[data-cy="magnifying-icon"]').parent().eq(1).click()
   })
 
-  it('should yield clickable result for regular token or nft collection search term', () => {
-    // Search for uni token by name.
-    cy.get('[data-cy="search-bar-input"]').last().clear().type('uni')
-    cy.get('[data-cy="searchbar-token-row-UNI"]')
+  function getSearchBar() {
+    return cy.get('[data-cy="search-bar-input"]').last()
+  }
+
+  it('should yield clickable result that is then added to recent searches', () => {
+    // Search for UNI token by name.
+    openSearch()
+    getSearchBar().clear().type('uni')
+
+    cy.get(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
       .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')
-  })
+      .click()
+    cy.location('pathname').should('equal', '/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
 
-  it.skip('should show recent tokens and popular tokens with empty search term', () => {
-    cy.get('[data-cy="magnifying-icon"]')
-      .parent()
-      .then(($navIcon) => {
-        $navIcon.click()
-      })
-    // Recently searched UNI token should exist.
-    cy.get('[data-cy="search-bar-input"]').last().clear()
-    cy.get('[data-cy="searchbar-dropdown"]')
-      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
-      .find('[data-cy="searchbar-token-row-UNI"]')
+    openSearch()
+    cy.get(getTestSelector('searchbar-dropdown'))
+      .contains(getTestSelector('searchbar-dropdown'), 'Recent searches')
+      .find(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
       .should('exist')
-
-    // Most popular 3 tokens should be shown.
-    cy.get('[data-cy="searchbar-dropdown"]')
-      .contains('[data-cy="searchbar-dropdown"]', 'Popular tokens')
-      .find('[data-cy^="searchbar-token-row"]')
-      .its('length')
-      .should('be.eq', 3)
   })
 
-  it.skip('should show blocked badge when blocked token is searched for', () => {
-    // Search for mTSLA, which is a blocked token.
-    cy.get('[data-cy="search-bar-input"]').last().clear().type('mtsla')
-    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
-  })
+  it(
+    'should go to the selected result when recent results are shown',
+    // this test is experiencing flake despite being correct, i can see the right value in DOM
+    // but for some reason cypress doesn't find it, so adding retries for now :/
+    {
+      // @ts-ignore see https://uniswapteam.slack.com/archives/C047U65H422/p1691455547556309
+      // basically cypress has bad types due to overlap with jest and you just have to deal with it
+      // i tried removing jest types but still happens
+      retries: {
+        runMode: 3,
+        openMode: 3,
+      },
+    },
+    () => {
+      // Seed recent results with UNI.
+      openSearch()
+      getSearchBar().type('uni')
+      cy.get(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
+      getSearchBar().clear().type('{esc}')
+
+      // Search a different token by name.
+      openSearch()
+      getSearchBar().type('eth')
+      cy.get(getTestSelector('searchbar-token-row-ETHEREUM-NATIVE'))
+
+      // Validate that we go to the searched/selected result.
+      getSearchBar().type('{enter}')
+      cy.url().should('contain', 'tokens/ethereum/NATIVE')
+    }
+  )
 })

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

@@ -3,7 +3,7 @@ import { DISCONNECTED_WALLET_USER_STATE } from '../../utils/user-state'
 
 describe('disconnect wallet', () => {
   it('should clear state', () => {
-    cy.visit('/swap', { ethereum: 'hardhat' })
+    cy.visit('/swap')
     cy.get('#swap-currency-input .token-amount-input').clear().type('1')
 
     // Verify wallet is connected
@@ -22,13 +22,13 @@ describe('disconnect wallet', () => {
     cy.contains('Connect Wallet')
 
     // Verify swap input is cleared
-    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
   })
 })
 
 describe('connect wallet', () => {
   it('should load state', () => {
-    cy.visit('/swap', { ethereum: 'hardhat', userState: DISCONNECTED_WALLET_USER_STATE })
+    cy.visit('/swap', { userState: DISCONNECTED_WALLET_USER_STATE })
 
     // Connect the wallet
     cy.get(getTestSelector('navbar-connect-wallet')).contains('Connect').click()

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

@@ -12,7 +12,7 @@ function switchChain(chain: string) {
 
 describe('network switching', () => {
   beforeEach(() => {
-    cy.visit('/swap', { ethereum: 'hardhat' })
+    cy.visit('/swap')
     cy.get(getTestSelector('web3-status-connected'))
   })
 
@@ -111,6 +111,7 @@ describe('network switching', () => {
     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', '')
@@ -122,9 +123,22 @@ describe('network switching', () => {
 
 describe('network switching from URL param', () => {
   it('should switch network from URL param', () => {
-    cy.visit('/swap?chain=polygon', { ethereum: 'hardhat' })
+    cy.visit('/swap?chain=polygon')
     cy.get(getTestSelector('web3-status-connected'))
     cy.wait('@wallet_switchEthereumChain')
     waitsForActiveChain('Polygon')
   })
+
+  it('should be able to switch network after loading from URL param', () => {
+    cy.visit('/swap?chain=polygon')
+    cy.get(getTestSelector('web3-status-connected'))
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Polygon')
+
+    // switching to another chain clears query param
+    switchChain('Ethereum')
+    cy.wait('@wallet_switchEthereumChain')
+    waitsForActiveChain('Ethereum')
+    cy.url().should('not.contain', 'chain=polygon')
+  })
 })

cypress/e2e/wallet-dropdown.test.ts

@@ -26,11 +26,11 @@ describe('Wallet Dropdown', () => {
       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.location('search').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.location('search').should('match', /\?lng=en-US$/)
       cy.contains('Uniswap available in: English').should('not.exist')
     })
   }

cypress/fixtures/mini-portfolio/pools.json

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

cypress/staging/t9n.test.ts

@@ -12,7 +12,7 @@ describe('translations', () => {
     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.location('search').should('match', /\?lng=fr-FR$/)
     cy.contains('Échanger')
     cy.contains('Uniswap disponible en : English')
   })

cypress/support/commands.ts

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

cypress/support/e2e.ts

@@ -5,7 +5,6 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import '@cypress/code-coverage/support'
 import './commands'
 import './setupTests'
 

cypress/support/ethereum.ts

@@ -1,72 +0,0 @@
-/**
- * Updates cy.visit() to include an injected window.ethereum provider.
- */
-
-import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
-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
-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)}`
-
-const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 5)
-const signer = new Wallet(TEST_PRIVATE_KEY, provider)
-export const injected = new (class extends Eip1193Bridge {
-  chainId = CHAIN_ID
-
-  async sendAsync(...args: any[]) {
-    console.debug('sendAsync called', ...args)
-    return this.send(...args)
-  }
-  async send(...args: any[]) {
-    console.debug('send called', ...args)
-    const isCallbackForm = typeof args[0] === 'object' && typeof args[1] === 'function'
-    let callback
-    let method
-    let params
-    if (isCallbackForm) {
-      callback = args[1]
-      method = args[0].method
-      params = args[0].params
-    } else {
-      method = args[0]
-      params = args[1]
-    }
-    if (method === 'eth_requestAccounts' || method === 'eth_accounts') {
-      if (isCallbackForm) {
-        callback({ result: [TEST_ADDRESS_NEVER_USE] })
-      } else {
-        return Promise.resolve([TEST_ADDRESS_NEVER_USE])
-      }
-    }
-    if (method === 'eth_chainId') {
-      if (isCallbackForm) {
-        callback(null, { result: HEXLIFIED_CHAIN_ID })
-      } else {
-        return Promise.resolve(HEXLIFIED_CHAIN_ID)
-      }
-    }
-    try {
-      const result = await super.send(method, params)
-      console.debug('result received', method, params, result)
-      if (isCallbackForm) {
-        callback(null, { result })
-      } else {
-        return result
-      }
-    } catch (error) {
-      if (isCallbackForm) {
-        callback(error, null)
-      } else {
-        throw error
-      }
-    }
-  }
-})(signer, provider)

cypress/support/setupTests.ts

@@ -9,13 +9,8 @@ beforeEach(() => {
     req.headers['origin'] = 'https://app.uniswap.org'
   })
 
-  // Infura uses a test endpoint, which allow-lists http://localhost:3000 instead.
-  cy.intercept(/infura.io/, (req) => {
-    req.headers['referer'] = 'http://localhost:3000'
-    req.headers['origin'] = 'http://localhost:3000'
-    req.alias = req.body.method
-    req.continue()
-  })
+  // Infura is disabled for cypress tests - calls should be routed through the connected wallet instead.
+  cy.intercept(/infura.io/, { statusCode: 404 })
 
   // Log requests to hardhat.
   cy.intercept(/:8545/, logJsonRpc)
@@ -24,6 +19,7 @@ beforeEach(() => {
   cy.intercept('https://api.uniswap.org/v1/amplitude-proxy', (req) => {
     const requestBody = JSON.stringify(req.body)
     const byteSize = new Blob([requestBody]).size
+    req.alias = 'amplitude'
     req.reply(
       JSON.stringify({
         code: 200,
@@ -49,7 +45,7 @@ function logJsonRpc(req: CyHttpMessages.IncomingHttpRequest) {
   const log = Cypress.log({
     autoEnd: false,
     name: req.body.method,
-    message: req.body.params?.map((param: unknown) =>
+    message: req.body.params?.map((param: any) =>
       typeof param === 'object' ? '{...}' : param?.toString().substring(0, 10)
     ),
   })

cypress/tsconfig.json

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

cypress/utils/user-state.ts

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

functions/README.md

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

functions/[[index]].ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-unused-modules */
+import { MetaTagInjector } from './components/metaTagInjector'
+
+export const onRequest: PagesFunction = async ({ request, next }) => {
+  const imageUri = new URL(request.url).origin + '/images/1200x630_Rich_Link_Preview_Image.png'
+  const data = {
+    title: 'Uniswap Interface',
+    image: imageUri,
+    url: request.url,
+    description: 'Swap or provide liquidity on the Uniswap Protocol',
+  }
+  const res = next()
+  try {
+    return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(await res)
+  } catch (e) {
+    return res
+  }
+}

functions/api/image/nfts/asset/[[index]].tsx

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-unused-modules */
+import { ImageResponse } from '@vercel/og'
+import React from 'react'
+
+import { WATERMARK_URL } from '../../../../constants'
+import getAsset from '../../../../utils/getAsset'
+import getFont from '../../../../utils/getFont'
+import { getRequest } from '../../../../utils/getRequest'
+
+export const onRequest: PagesFunction = async ({ params, request }) => {
+  try {
+    const origin = new URL(request.url).origin
+    const { index } = params
+    const collectionAddress = index[0]?.toString()
+    const tokenId = index[1]?.toString()
+    const cacheUrl = origin + '/nfts/asset/' + collectionAddress + '/' + tokenId
+
+    const data = await getRequest(
+      cacheUrl,
+      () => getAsset(collectionAddress, tokenId, cacheUrl),
+      (data): data is NonNullable<Awaited<ReturnType<typeof getAsset>>> => Boolean(data.ogImage)
+    )
+
+    if (!data) {
+      return new Response('Asset not found.', { status: 404 })
+    }
+
+    const fontData = await getFont()
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            width: '1200px',
+            height: '630px',
+          }}
+        >
+          <img src={data.ogImage} alt={data.title} width="1200px" />
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '72px',
+              right: '72px',
+              display: 'flex',
+              gap: '24px',
+            }}
+          >
+            <img src={WATERMARK_URL} alt="Uniswap" height="72px" width="324px" />
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'Inter',
+            data: fontData,
+            style: 'normal',
+          },
+        ],
+      }
+    ) as Response
+  } catch (error: any) {
+    return new Response(error.message || error.toString(), { status: 500 })
+  }
+}

functions/api/image/nfts/asset/nftImage.test.ts

@@ -0,0 +1,20 @@
+const assetImageUrl = [
+  'http://127.0.0.1:3000/api/image/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/804',
+  'http://127.0.0.1:3000/api/image/nfts/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/3947',
+]
+
+test.each(assetImageUrl)('assetImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(200)
+  expect(response.headers.get('content-type')).toBe('image/png')
+})
+
+const invalidAssetImageUrl = [
+  'http://127.0.0.1:3000/api/image/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/100000',
+  'http://127.0.0.1:3000/api/image/nfts/asset/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/44700',
+]
+
+test.each(invalidAssetImageUrl)('invalidAssetImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(404)
+})

functions/api/image/nfts/collection/[index].tsx

@@ -0,0 +1,117 @@
+/* eslint-disable import/no-unused-modules */
+import { ImageResponse } from '@vercel/og'
+import React from 'react'
+
+import { CHECK_URL, WATERMARK_URL } from '../../../../constants'
+import getCollection from '../../../../utils/getCollection'
+import getColor from '../../../../utils/getColor'
+import getFont from '../../../../utils/getFont'
+import { getRequest } from '../../../../utils/getRequest'
+
+export const onRequest: PagesFunction = async ({ params, request }) => {
+  try {
+    const origin = new URL(request.url).origin
+    const { index } = params
+    const collectionAddress = index?.toString()
+    const cacheUrl = origin + '/nfts/collection/' + collectionAddress
+
+    const data = await getRequest(
+      cacheUrl,
+      () => getCollection(collectionAddress, cacheUrl),
+      (data): data is NonNullable<Awaited<ReturnType<typeof getCollection>>> =>
+        Boolean(data.ogImage && data.name && data.isVerified)
+    )
+
+    if (!data) {
+      return new Response('Asset not found.', { status: 404 })
+    }
+
+    const [fontData, palette] = await Promise.all([getFont(), getColor(data.ogImage)])
+
+    // Split name into words to wrap them since satori does not support inline text wrapping
+    const words = data.name.split(' ')
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: 'black',
+            display: 'flex',
+            width: '1200px',
+            height: '630px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              backgroundColor: `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, 0.75)`,
+              padding: '72px',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-end',
+                gap: '48px',
+                width: '100%',
+              }}
+            >
+              <img
+                src={data.ogImage}
+                alt={data.name}
+                width="500px"
+                height="500px"
+                style={{
+                  borderRadius: '60px',
+                  objectFit: 'cover',
+                }}
+              />
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '32px',
+                  width: '45%',
+                }}
+              >
+                <div
+                  style={{
+                    gap: '12px',
+                    fontSize: '72px',
+                    fontFamily: 'Inter',
+                    color: 'white',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                  }}
+                >
+                  {words.map((word: string) => (
+                    <text key={word + index}>{word}</text>
+                  ))}
+                  {data.isVerified && <img src={CHECK_URL} height="54px" />}
+                </div>
+                <img src={WATERMARK_URL} alt="Uniswap" height="72px" width="324px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'Inter',
+            data: fontData,
+            style: 'normal',
+          },
+        ],
+      }
+    ) as Response
+  } catch (error: any) {
+    return new Response(error.message || error.toString(), { status: 500 })
+  }
+}

functions/api/image/nfts/collection/collectionImage.test.ts

@@ -0,0 +1,20 @@
+const collectionImageUrl = [
+  'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544',
+  'http://127.0.0.1:3000/api/image/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+  'http://127.0.0.1:3000/api/image/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
+]
+
+test.each(collectionImageUrl)('collectionImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(200)
+  expect(response.headers.get('content-type')).toBe('image/png')
+})
+
+const invalidCollectionImageUrl = [
+  'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
+]
+
+test.each(invalidCollectionImageUrl)('invalidAssetImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(404)
+})

functions/api/image/tokens/[[index]].tsx

@@ -0,0 +1,173 @@
+/* eslint-disable import/no-unused-modules */
+import { ImageResponse } from '@vercel/og'
+import React from 'react'
+
+import { WATERMARK_URL } from '../../../constants'
+import getColor from '../../../utils/getColor'
+import getFont from '../../../utils/getFont'
+import getNetworkLogoUrl from '../../../utils/getNetworkLogoURL'
+import { getRequest } from '../../../utils/getRequest'
+import getToken from '../../../utils/getToken'
+
+export const onRequest: PagesFunction = async ({ params, request }) => {
+  try {
+    const origin = new URL(request.url).origin
+    const { index } = params
+    const networkName = String(index[0])
+    const tokenAddress = String(index[1])
+
+    const cacheUrl = origin + '/tokens/' + networkName + '/' + tokenAddress
+
+    const data = await getRequest(
+      cacheUrl,
+      () => getToken(networkName, tokenAddress, cacheUrl),
+      (data): data is NonNullable<Awaited<ReturnType<typeof getToken>>> => Boolean(data.symbol && data.name)
+    )
+
+    if (!data) {
+      return new Response('Asset not found.', { status: 404 })
+    }
+
+    const [fontData, palette] = await Promise.all([getFont(), getColor(data.ogImage)])
+
+    const networkLogo = getNetworkLogoUrl(networkName.toUpperCase())
+
+    // Capitalize name such that each word starts with a capital letter
+    let words = data.name.split(' ')
+    words = words.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    let name = words.join(' ')
+    name = name.trim()
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: 'black',
+            display: 'flex',
+            width: '1200px',
+            height: '630px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              backgroundColor: `rgba(${palette[0]}, ${palette[1]}, ${palette[2]})`,
+              alignItems: 'center',
+              height: '100%',
+              padding: '72px',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                width: '100%',
+                height: '100%',
+                color: 'white',
+              }}
+            >
+              {data.ogImage ? (
+                <img src={data.ogImage} width="144px" style={{ borderRadius: '100%' }}>
+                  {networkLogo != '' && (
+                    <img
+                      src={networkLogo}
+                      width="48px"
+                      style={{
+                        position: 'absolute',
+                        right: '2px',
+                        bottom: '0px',
+                        borderRadius: '100%',
+                      }}
+                    />
+                  )}
+                </img>
+              ) : (
+                <div
+                  style={{
+                    width: '144px',
+                    height: '144px',
+                    borderRadius: '100%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <div
+                    style={{
+                      fontFamily: 'Inter',
+                      fontSize: '48px',
+                      lineHeight: '58px',
+                      color: 'white',
+                    }}
+                  >
+                    {data.name.slice(0, 3).toUpperCase()}
+                  </div>
+                  {networkLogo != '' && (
+                    <img
+                      src={networkLogo}
+                      width="48px"
+                      style={{
+                        position: 'absolute',
+                        right: '2px',
+                        bottom: '0px',
+                        borderRadius: '100%',
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+              <div
+                style={{
+                  fontFamily: 'Inter',
+                  fontSize: '72px',
+                  lineHeight: '58px',
+                  marginLeft: '-5px',
+                  marginTop: '24px',
+                }}
+              >
+                {name}
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-end',
+                  width: '100%',
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: 'Inter',
+                    fontSize: '168px',
+                    lineHeight: '133px',
+                    marginLeft: '-13px',
+                  }}
+                >
+                  {data.symbol}
+                </div>
+                <img src={WATERMARK_URL} alt="Uniswap" height="72px" width="324px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'Inter',
+            data: fontData,
+            style: 'normal',
+          },
+        ],
+      }
+    ) as Response
+  } catch (error: any) {
+    return new Response(error.message || error.toString(), { status: 500 })
+  }
+}

functions/api/image/tokens/tokenImage.test.ts

@@ -0,0 +1,23 @@
+const tokenImageUrl = [
+  'http://127.0.0.1:3000/api/image/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  'http://127.0.0.1:3000/api/image/tokens/ethereum/NATIVE',
+]
+
+test.each(tokenImageUrl)('tokenImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(200)
+  expect(response.headers.get('content-type')).toBe('image/png')
+})
+
+const invalidTokenImageUrl = [
+  'http://127.0.0.1:3000/api/image/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb49',
+  'http://127.0.0.1:3000/api/image/tokens/ethereum',
+  'http://127.0.0.1:3000/api/image/tokens/ethereun',
+  'http://127.0.0.1:3000/api/image/tokens/ethereum/0x0',
+  'http://127.0.0.1:3000/api/image/tokens/potato/?potato=1',
+]
+
+test.each(invalidTokenImageUrl)('invalidAssetImageUrl', async (url) => {
+  const response = await fetch(new Request(url))
+  expect(response.status).toBe(404)
+})

functions/client.ts

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

functions/components/metaTagInjector.ts

@@ -0,0 +1,42 @@
+type MetaTagInjectorInput = {
+  title: string
+  image?: string
+  url: string
+  description?: string
+}
+
+/**
+ * Listener class for Cloudflare's HTMLRewriter {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter}
+ * to inject meta tags into the <head> of an HTML document.
+ */
+export class MetaTagInjector implements HTMLRewriterElementContentHandlers {
+  constructor(private input: MetaTagInjectorInput) {}
+
+  append(element: Element, property: string, content: string) {
+    element.append(`<meta property="${property}" content="${content}"/>`, { html: true })
+  }
+
+  element(element: Element) {
+    //Open Graph Tags
+    this.append(element, 'og:title', this.input.title)
+    if (this.input.description) {
+      this.append(element, 'og:description', this.input.description)
+    }
+    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/constants.ts

@@ -0,0 +1,76 @@
+export const WATERMARK_URL = 'https://app.uniswap.org/images/324x74_App_Watermark.png'
+export const CHECK_URL = 'https://app.uniswap.org/images/54x54_Verified_Check.svg'
+
+export const DEFAULT_COLOR = [35, 43, 43]
+
+export const predefinedTokenColors: { [key: string]: number[] } = {
+  // old WBTC
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png':
+    [240, 146, 65],
+  // new WBTC
+  'https://assets.coingecko.com/coins/images/7598/large/wrapped_bitcoin_wbtc.png?1548822744': [240, 146, 65],
+  // DAI
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png':
+    [250, 176, 27],
+  // UNI
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png':
+    [230, 53, 140],
+  // BUSD
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4Fabb145d64652a948d72533023f6E7A623C7C53/logo.png':
+    [239, 186, 9],
+  // AI-X
+  'https://s2.coinmarketcap.com/static/img/coins/64x64/26984.png': [41, 161, 241],
+  // ETH
+  'https://token-icons.s3.amazonaws.com/eth.png': [73, 112, 213],
+  // HARRYPOTTERSHIBAINUBITCOIN
+  'https://assets.coingecko.com/coins/images/30323/large/hpos10i_logo_casino_night-dexview.png?1684117567': [
+    222, 49, 16,
+  ],
+  // PEPE
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png':
+    [62, 174, 20],
+  // Unibot V2
+  'https://s2.coinmarketcap.com/static/img/coins/64x64/25436.png': [74, 10, 79],
+  // UNIBOT v1
+  'https://assets.coingecko.com/coins/images/30462/small/logonoline_%281%29.png?1687510315': [74, 10, 79],
+  // USDC
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png':
+    [0, 102, 217],
+  // HEX
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png':
+    [249, 63, 140],
+  // MONG
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1ce270557C1f68Cfb577b856766310Bf8B47FD9C/logo.png':
+    [169, 109, 255],
+  // ARB
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xB50721BCf8d664c30412Cfbc6cf7a15145234ad1/logo.png':
+    [41, 161, 241],
+  // PSYOP
+  'https://s2.coinmarketcap.com/static/img/coins/64x64/25422.png': [232, 143, 0],
+  // MATIC
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png':
+    [169, 109, 255],
+  // TURBO
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA35923162C49cF95e6BF26623385eb431ad920D3/logo.png':
+    [189, 110, 41],
+  // AIDOGE
+  'https://assets.coingecko.com/coins/images/29852/large/photo_2023-04-18_14-25-28.jpg?1681799160': [41, 161, 241],
+  // SIMPSON
+  'https://assets.coingecko.com/coins/images/30243/large/1111.png?1683692033': [232, 143, 0],
+  // OX
+  'https://assets.coingecko.com/coins/images/30604/large/Logo2.png?1685522119': [41, 89, 217],
+  // ANGLE
+  'https://assets.coingecko.com/coins/images/19060/large/ANGLE_Token-light.png?1666774221': [255, 85, 85],
+  // APE
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x4d224452801ACEd8B2F0aebE155379bb5D594381/logo.png':
+    [5, 74, 169],
+  // GUSD
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd/logo.png':
+    [0, 164, 189],
+  // OGN
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x8207c1FfC5B6804F6024322CcF34F29c3541Ae26/logo.png':
+    [5, 74, 169],
+  // RPL
+  'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xD33526068D116cE69F19A9ee46F0bd304F21A51f/logo.png':
+    [255, 123, 79],
+}

functions/default.test.ts

@@ -0,0 +1,22 @@
+const defaultUrls = ['http://127.0.0.1:3000/', 'http://127.0.0.1:3000/swap', 'http://127.0.0.1:3000/pools']
+
+test.each(defaultUrls)('should inject metadata for valid collections', async (defaultUrl) => {
+  const body = await fetch(new Request(defaultUrl)).then((res) => res.text())
+  expect(body).toContain(`<meta property="og:title" content="Uniswap Interface"/>`)
+  expect(body).toContain(
+    `<meta property="og:description" content="Swap or provide liquidity on the Uniswap Protocol"/>`
+  )
+  expect(body).toContain(
+    `<meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/>`
+  )
+  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:image:alt" content="Uniswap Interface"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="Uniswap Interface"/>`)
+  expect(body).toContain(
+    `<meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/>`
+  )
+  expect(body).toContain(`<meta property="twitter:image:alt" content="Uniswap Interface"/>`)
+})

functions/global-setup.ts

@@ -4,6 +4,16 @@ module.exports = async function globalSetup() {
   globalThis.servers = await setup({
     command: `yarn start:cloud`,
     port: 3000,
-    launchTimeout: 50000,
+    launchTimeout: 80000,
   })
+  // Wait for wrangler to return a request before running tests
+  for (let i = 0; i < 3; i++) {
+    const res = await fetch(new Request('http://127.0.0.1:3000/tokens/ethereum/NATIVE'))
+    if (res.ok) {
+      return
+    }
+    // Set timeout to make sure the server isn't flooded with requests if wrangler is not running
+    await new Promise((resolve) => setTimeout(resolve, 500 * (i + 1)))
+  }
+  throw new Error('Failed to start server')
 }

functions/jest.config.json

@@ -5,5 +5,7 @@
   "transform": {
     "'^.+\\.(ts|tsx)?$'": "ts-jest",
     "^.+\\.(js|jsx)$": "babel-jest"
-  }
-}
+  },
+  "testTimeout": 360000,
+  "cacheDirectory": "../node_modules/.cache/cloud-jest"
+}

functions/nft.test.ts

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

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

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

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

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

functions/nfts/asset/nft.test.ts

@@ -0,0 +1,62 @@
+const assets = [
+  {
+    address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
+    assetId: '2550',
+    collectionName: 'Azuki',
+    image: 'http://127.0.0.1:3000/api/image/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/2550',
+  },
+  {
+    address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+    assetId: '3735',
+    collectionName: 'Bored Ape Yacht Club',
+    image: 'http://127.0.0.1:3000/api/image/nfts/asset/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3735',
+  },
+  {
+    address: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb',
+    assetId: '3947',
+    collectionName: 'CryptoPunk',
+    image: 'http://127.0.0.1:3000/api/image/nfts/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/3947',
+  },
+]
+
+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).not.toContain(`<meta property="og:description"`)
+  expect(body).toContain(`<meta property="og:image" content="${nft.image}"/>`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
+  expect(body).toContain(`<meta property="og:type" content="website"/>`)
+  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
+  expect(body).toContain(`<meta property="og:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="twitter:image" content="${nft.image}"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
+})
+
+const invalidAssets = [
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/100000',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c545',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/-1',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//',
+  'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//2550',
+]
+
+test.each(invalidAssets)('should not inject metadata for invalid asset calls', async (url) => {
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).not.toContain('og:title')
+  expect(body).not.toContain('og:image')
+  expect(body).not.toContain('og:image:width')
+  expect(body).not.toContain('og:image:height')
+  expect(body).not.toContain('og:type')
+  expect(body).not.toContain('og:url')
+  expect(body).not.toContain('og:image:alt')
+  expect(body).not.toContain('twitter:card')
+  expect(body).not.toContain('twitter:title')
+  expect(body).not.toContain('twitter:image')
+  expect(body).not.toContain('twitter:image:alt')
+})

functions/nfts/collection/[index].ts

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

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

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

functions/nfts/collection/collection.test.ts

@@ -0,0 +1,59 @@
+const collections = [
+  {
+    address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
+    collectionName: 'Azuki',
+    image: 'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544',
+  },
+  {
+    address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+    collectionName: 'Bored Ape Yacht Club',
+    image: 'http://127.0.0.1:3000/api/image/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
+  },
+  {
+    address: '0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
+    collectionName: 'CLONE X - X TAKASHI MURAKAMI',
+    image: 'http://127.0.0.1:3000/api/image/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
+  },
+]
+
+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).not.toContain(`<meta property="og:description"`)
+  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//',
+]
+
+test.each(invalidCollections)(
+  'should not inject metadata for invalid collection urls',
+  async (url) => {
+    const body = await fetch(new Request(url)).then((res) => res.text())
+    expect(body).not.toContain('og:title')
+    expect(body).not.toContain('og:image')
+    expect(body).not.toContain('og:image:width')
+    expect(body).not.toContain('og:image:height')
+    expect(body).not.toContain('og:type')
+    expect(body).not.toContain('og:url')
+    expect(body).not.toContain('og:image:alt')
+    expect(body).not.toContain('twitter:card')
+    expect(body).not.toContain('twitter:title')
+    expect(body).not.toContain('twitter:image')
+    expect(body).not.toContain('twitter:image:alt')
+  },
+  50000
+)

functions/tokens/[[index]].ts

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

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

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

functions/tokens/token.test.ts

@@ -0,0 +1,68 @@
+const tokens = [
+  {
+    address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+    network: 'ethereum',
+    symbol: 'USDC',
+    image: 'http://127.0.0.1:3000/api/image/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  },
+  {
+    address: 'NATIVE',
+    network: 'ethereum',
+    symbol: 'ETH',
+    image: 'http://127.0.0.1:3000/api/image/tokens/ethereum/NATIVE',
+  },
+  {
+    address: 'NATIVE',
+    network: 'polygon',
+    symbol: 'MATIC',
+    image: 'http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE',
+  },
+  {
+    address: '0x6982508145454ce325ddbe47a25d4ec3d2311933',
+    network: 'ethereum',
+    symbol: 'PEPE',
+    image: 'http://127.0.0.1:3000/api/image/tokens/ethereum/0x6982508145454ce325ddbe47a25d4ec3d2311933',
+  },
+]
+
+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).not.toContain(`<meta property="og:description"`)
+  expect(body).toContain(`<meta property="og:image" content="${token.image}"/>`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
+  expect(body).toContain(`<meta property="og:type" content="website"/>`)
+  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
+  expect(body).toContain(`<meta property="og:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
+  expect(body).toContain(`<meta property="twitter:title" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="twitter:image" content="${token.image}"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
+})
+
+const invalidTokens = [
+  'http://127.0.0.1:3000/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb49',
+  'http://127.0.0.1:3000/tokens/ethereum',
+  'http://127.0.0.1:3000/tokens/ethereun',
+  'http://127.0.0.1:3000/tokens/ethereum/0x0',
+  'http://127.0.0.1:3000/tokens/ethereum//',
+  'http://127.0.0.1:3000/tokens/potato/?potato=1',
+]
+
+test.each(invalidTokens)('should not inject metadata for invalid tokens', async (url) => {
+  const body = await fetch(new Request(url)).then((res) => res.text())
+  expect(body).not.toContain('og:title')
+  expect(body).not.toContain('og:image')
+  expect(body).not.toContain('og:image:width')
+  expect(body).not.toContain('og:image:height')
+  expect(body).not.toContain('og:type')
+  expect(body).not.toContain('og:url')
+  expect(body).not.toContain('og:image:alt')
+  expect(body).not.toContain('twitter:card')
+  expect(body).not.toContain('twitter:title')
+  expect(body).not.toContain('twitter:image')
+  expect(body).not.toContain('twitter:image:alt')
+})

functions/tsconfig.json

@@ -1,19 +1,13 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "esModuleInterop": true,
+    "baseUrl": "functions",
+    "composite": false,
     "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"],
+    "isolatedModules": false,
     "jsx": "react",
-    "moduleResolution": "NodeNext",
+    "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/functions", // avoid clobbering the build tsbuildinfo
+    "types": ["jest", "node", "@cloudflare/workers-types"],
   },
-  "exclude": ["node_modules"],
-  "include": ["**/*.ts"],
-  "watchOptions": {
-    "excludeDirectories": ["node_modules"]
-  }
+  "include": ["**/*.ts", ".ts", "**/*.tsx"],
 }

functions/types.d.ts

@@ -0,0 +1 @@
+declare module 'colorthief/src/color-thief-node'

functions/utils/cache.test.ts

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

functions/utils/cache.ts

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

functions/utils/getAsset.ts

@@ -0,0 +1,41 @@
+import { AssetDocument, AssetQuery } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+function formatTitleName(name: string | undefined, collectionName: string | undefined, 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 origin = new URL(url).origin
+  const image = origin + '/api/image/nfts/asset/' + collectionAddress + '/' + tokenId
+  const { data } = await client.query<AssetQuery>({
+    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,
+    url,
+    ogImage: asset.image?.url ?? origin + '/images/192x192_App_Icon.png',
+  }
+  return formattedAsset
+}

functions/utils/getCollection.ts

@@ -0,0 +1,26 @@
+import { CollectionDocument, CollectionQuery } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+export default async function getCollection(collectionAddress: string, url: string) {
+  const origin = new URL(url).origin
+  const image = origin + '/api/image/nfts/collection/' + collectionAddress
+  const { data } = await client.query<CollectionQuery>({
+    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,
+    url,
+    name: collection.name ?? 'Collection',
+    ogImage: collection.image?.url ?? origin + '/images/192x192_App_Icon.png',
+    isVerified: collection.isVerified ?? false,
+  }
+  return formattedAsset
+}

functions/utils/getColor.test.ts

@@ -0,0 +1,33 @@
+import { DEFAULT_COLOR } from '../constants'
+import getColor from './getColor'
+
+test('should return the average color of a black PNG image', async () => {
+  const image = 'https://static.vecteezy.com/system/resources/previews/001/209/957/original/square-png.png'
+  const color = await getColor(image)
+  expect(color).toEqual([0, 0, 0])
+})
+
+test('should return the average color of a blue PNG image', async () => {
+  const image = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2Ztcim-RKbOu57kfjYpXnnS1MO5YMUaUH9Lk5Eg&s'
+  const color = await getColor(image)
+  expect(color).toEqual([2, 6, 251])
+})
+
+test('should return the average color of a white PNG image', async () => {
+  const image = 'https://www.cac.cornell.edu/wiki/images/4/44/White_square.png'
+  const color = await getColor(image)
+  expect(color).toEqual([255, 255, 255])
+})
+
+test('should return the average color of a black JPG image', async () => {
+  const image =
+    'https://imageio.forbes.com/specials-images/imageserve/5ed6636cdd5d320006caf841/0x0.jpg?format=jpg&width=1200'
+  const color = await getColor(image)
+  expect(color).toEqual([0, 0, 0])
+})
+
+test('should return default color for a gif image', async () => {
+  const image = 'https://thumbs.gfycat.com/AgitatedLiveAgouti-size_restricted.gif'
+  const color = await getColor(image)
+  expect(color).toEqual(DEFAULT_COLOR)
+})

functions/utils/getColor.ts

@@ -0,0 +1,67 @@
+import { Buffer } from 'buffer'
+import JPEG from 'jpeg-js'
+import PNG from 'png-ts'
+
+import { DEFAULT_COLOR, predefinedTokenColors } from '../constants'
+
+export default async function getColor(image: string | undefined) {
+  if (!image) {
+    return DEFAULT_COLOR
+  }
+  if (image in predefinedTokenColors) {
+    return predefinedTokenColors[image]
+  }
+  try {
+    const data = await fetch(image)
+    const buffer = await data.arrayBuffer()
+    const arrayBuffer = Buffer.from(buffer)
+
+    const type = data.headers.get('content-type') ?? ''
+    return getAverageColor(arrayBuffer, type)
+  } catch (e) {
+    return DEFAULT_COLOR
+  }
+}
+
+function getAverageColor(arrayBuffer: Uint8Array, type?: string) {
+  let pixels
+  switch (type) {
+    case 'image/png': {
+      const image = PNG.load(arrayBuffer)
+      pixels = image.decode()
+      break
+    }
+    case 'image/jpeg' || 'image/jpg': {
+      const jpeg = JPEG.decode(arrayBuffer, { useTArray: true })
+      pixels = jpeg.data
+      break
+    }
+    default: {
+      return DEFAULT_COLOR
+    }
+  }
+
+  const pixelCount = pixels.length / 4
+
+  let transparentPixels = 0
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  for (let i = 0; i < pixelCount; i++) {
+    if (pixels[i * 4 + 3] === 0) {
+      transparentPixels++
+      continue
+    }
+    r += pixels[i * 4]
+    g += pixels[i * 4 + 1]
+    b += pixels[i * 4 + 2]
+  }
+
+  r = Math.floor(r / (pixelCount - transparentPixels))
+  g = Math.floor(g / (pixelCount - transparentPixels))
+  b = Math.floor(b / (pixelCount - transparentPixels))
+
+  return [r, g, b]
+}

functions/utils/getFont.ts

@@ -0,0 +1,6 @@
+const FONT_URL = 'https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZFhjQ.ttf'
+
+export default async function getFont() {
+  const font = await fetch(FONT_URL)
+  return font.arrayBuffer()
+}

functions/utils/getNetworkLogoURL.ts

@@ -0,0 +1,16 @@
+import { Chain } from '../../src/graphql/data/__generated__/types-and-hooks'
+
+export default function getNetworkLogoUrl(network: string) {
+  switch (network) {
+    case Chain.Polygon:
+      return 'https://assets.coingecko.com/coins/images/4713/small/matic-token-icon.png?1624446912'
+    case Chain.Arbitrum:
+      return 'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0x912CE59144191C1204E64559FE8253a0e49E6548/logo.png'
+    case Chain.Optimism:
+      return 'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/optimism/assets/0x4200000000000000000000000000000000000042/logo.png'
+    case Chain.Celo:
+      return 'https://assets.coingecko.com/coins/images/11090/small/InjXBNx9_400x400.jpg?1674707499'
+    default:
+      return ''
+  }
+}

functions/utils/getRequest.test.ts

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

functions/utils/getRequest.ts

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

functions/utils/getToken.ts

@@ -0,0 +1,57 @@
+import { TokenDocument, TokenQuery } from '../../src/graphql/data/__generated__/types-and-hooks'
+import { Chain } from '../../src/graphql/data/__generated__/types-and-hooks'
+import client from '../client'
+
+function formatTitleName(symbol: string | undefined, name: string | undefined) {
+  if (symbol) {
+    return 'Get ' + symbol + ' on Uniswap'
+  }
+  if (name) {
+    return 'Get ' + name + ' on Uniswap'
+  }
+  return 'View Token on Uniswap'
+}
+
+const convertTokenAddress = (networkName: string, tokenAddress: string) => {
+  if (tokenAddress === 'NATIVE') {
+    switch (networkName) {
+      case Chain.Celo:
+        return '0x471EcE3750Da237f93B8E339c536989b8978a438'
+      case Chain.Polygon:
+        return '0x0000000000000000000000000000000000001010'
+      default:
+        return undefined
+    }
+  }
+  return tokenAddress
+}
+
+export default async function getToken(networkName: string, tokenAddress: string, url: string) {
+  const origin = new URL(url).origin
+  const image = origin + '/api/image/tokens/' + networkName + '/' + tokenAddress
+  const uppercaseNetworkName = networkName.toUpperCase()
+  const convertedTokenAddress = convertTokenAddress(uppercaseNetworkName, tokenAddress)
+  const { data } = await client.query<TokenQuery>({
+    query: TokenDocument,
+    variables: {
+      chain: uppercaseNetworkName,
+      address: convertedTokenAddress,
+    },
+  })
+  const asset = data?.token
+  if (!asset) {
+    return undefined
+  }
+
+  const title = formatTitleName(asset.symbol, asset.name)
+
+  const formattedAsset = {
+    title,
+    image,
+    url,
+    symbol: asset.symbol ?? 'UNK',
+    ogImage: asset.project?.logoUrl,
+    name: asset.name ?? 'Token',
+  }
+  return formattedAsset
+}

hardhat.config.js

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

lingui.config.ts

@@ -1,64 +1,4 @@
 /* eslint-env node */
-import { default as babelExtractor } from '@lingui/cli/api/extractors/babel'
-import { createHash } from 'crypto'
-import { mkdirSync, readFileSync, writeFileSync } from 'fs'
-import { existsSync } from 'fs'
-import * as path from 'path'
-
-/** A custom caching extractor built on top of babelExtractor. */
-const cachingExtractor: typeof babelExtractor = {
-  /** Delegates to babelExtractor.match. */
-  match(filename: string) {
-    return babelExtractor.match(filename)
-  },
-  /**
-   * Checks a cache before extraction, only delegating to babelExtractor.extract if the file has changed.
-   *
-   * The lingui extractor works by extracting JSON (the catalog) from `filename` to `buildDir/filename.json`.
-   * Caching works by man-in-the-middling this:
-   * - File freshness is computed as a hash of `filename` contents.
-   * - Before extracting, we check the cache to see if we already have a fresh catalog for the file.
-   *   If we do, we copy it to `localeDir/filename.json`. Copying is significantly faster than extracting.
-   * - After extracting, we copy the catalog to the cache.
-   */
-  extract(filename: string, localeDir: string, ...options: unknown[]) {
-    // This runs from node_modules/@lingui/conf, so we need to back out to the root.
-    const root = __dirname.split('/node_modules')[0]
-
-    // This logic mimics catalogFilename in @lingui/babel-plugin-extract-messages.
-    const buildDir = path.join(localeDir, '_build')
-    const localePath = path.join(buildDir, filename + '.json')
-
-    const filePath = path.join(root, filename)
-    const fileHash = createHash('sha256').update(readFileSync(filePath)).digest('hex')
-
-    const cacheRoot = path.join(root, 'node_modules/.cache/lingui')
-    const cachePath = path.join(cacheRoot, filename + '.json')
-
-    // If we have a matching cached copy of the catalog, we can copy it to localePath and return early.
-    if (existsSync(cachePath)) {
-      const { hash, catalog } = JSON.parse(readFileSync(cachePath, 'utf8'))
-      if (hash === fileHash) {
-        if (catalog) {
-          mkdirSync(path.dirname(localePath), { recursive: true })
-          writeFileSync(localePath, JSON.stringify(catalog, null, 2))
-        }
-        return
-      }
-    }
-
-    babelExtractor.extract(filename, localeDir, ...options)
-
-    // Cache the extracted catalog.
-    mkdirSync(path.dirname(cachePath), { recursive: true })
-    if (existsSync(localePath)) {
-      const catalog = JSON.parse(readFileSync(localePath, 'utf8'))
-      writeFileSync(cachePath, JSON.stringify({ hash: fileHash, catalog }))
-    } else {
-      writeFileSync(cachePath, JSON.stringify({ hash: fileHash }))
-    }
-  },
-}
 
 const linguiConfig = {
   catalogs: [
@@ -120,7 +60,6 @@ const linguiConfig = {
   rootDir: '.',
   runtimeConfigModule: ['@lingui/core', 'i18n'],
   sourceLocale: 'en-US',
-  extractors: [cachingExtractor],
 }
 
 export default linguiConfig

package.json

@@ -2,7 +2,6 @@
   "name": "@uniswap/interface",
   "version": "1.1.0",
   "description": "Uniswap Interface",
-  "homepage": ".",
   "license": "GPL-3.0-or-later",
   "scripts": {
     "ajv": "node scripts/compile-ajv-validators.js",
@@ -19,18 +18,20 @@
     "i18n": "yarn i18n:extract --clean && yarn i18n:compile",
     "prepare": "concurrently \"npm:ajv\" \"npm:contracts\" \"npm:graphql\" \"npm:i18n\"",
     "start": "craco start",
-    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --proxy=3001 --port=3000 -- yarn start",
+    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3001 --port=3000 -- yarn start",
     "build": "craco build",
-    "build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
     "serve": "serve build -l 3000",
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc",
+    "typecheck:cloud": "tsc -p functions/tsconfig.json",
+    "typecheck:cypress": "tsc -p cypress/tsconfig.json",
     "test": "craco test",
-    "test:cloud": "NODE_OPTIONS=--experimental-vm-modules yarn jest functions  --watch --config=functions/jest.config.json",
+    "test:cloud": "NODE_OPTIONS=--experimental-vm-modules yarn jest functions --config=functions/jest.config.json",
     "cypress:open": "cypress open --browser chrome --e2e",
     "cypress:run": "cypress run --browser chrome --e2e",
-    "deduplicate": "yarn-deduplicate --strategy=highest"
+    "deduplicate": "yarn-deduplicate --strategy=highest",
+    "postinstall": "yarn patch-package"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -57,9 +58,8 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      ">0.5%",
+      "not dead"
     ],
     "development": [
       "last 1 chrome version",
@@ -69,10 +69,14 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.7",
-    "@cloudflare/workers-types": "^4.20230518.0",
+    "@cloudflare/workers-types": "^4.20230710.1",
     "@craco/craco": "^7.1.0",
     "@ethersproject/experimental": "^5.4.0",
-    "@lingui/cli": "^3.9.0",
+    "@lingui/cli": "^4.3.0",
+    "@lingui/swc-plugin": "^4.0.4",
+    "@swc/core": "^1.3.72",
+    "@swc/jest": "^0.2.27",
+    "@swc/plugin-styled-components": "^1.5.70",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1",
     "@testing-library/user-event": "^14.4.3",
@@ -84,14 +88,13 @@
     "@types/lingui__core": "^2.7.1",
     "@types/lingui__macro": "^2.7.4",
     "@types/lingui__react": "^2.8.3",
-    "@types/ms.macro": "^2.0.0",
+    "@types/ms": "^0.7.31",
     "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.5",
     "@types/qs": "^6.9.2",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
@@ -103,16 +106,16 @@
     "@types/wcag-contrast": "^3.0.0",
     "@uniswap/default-token-list": "^11.2.0",
     "@uniswap/eslint-config": "^1.2.0",
-    "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/jest-transform": "^1.1.1",
-    "@vanilla-extract/webpack-plugin": "^2.1.11",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
+    "@vercel/og": "0.5.8",
     "@walletconnect/types": "^2.8.6",
     "babel-jest": "^29.6.1",
-    "babel-plugin-istanbul": "^6.1.1",
+    "browser-cache-mock": "^0.1.7",
     "buffer": "^6.0.3",
     "concurrently": "^8.0.1",
     "cypress": "12.12.0",
-    "cypress-hardhat": "^2.4.2",
+    "cypress-hardhat": "^2.5.0",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "eslint-plugin-import": "^2.27",
@@ -120,75 +123,83 @@
     "hardhat": "^2.14.0",
     "jest": "^29.6.1",
     "jest-dev-server": "^9.0.0",
+    "jest-extended": "^4.0.1",
     "jest-fail-on-console": "^3.1.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
-    "ms.macro": "^2.0.0",
+    "jpeg-js": "^0.4.4",
+    "mini-css-extract-plugin": "^2.7.6",
+    "patch-package": "^7.0.0",
     "path-browserify": "^1.0.1",
+    "png-ts": "^0.0.3",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.3",
+    "swc-loader": "^0.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.1.1",
     "ts-transform-graphql-tag": "^0.2.1",
     "typechain": "^5.0.0",
-    "typescript": "^4.4.3",
-    "wrangler": "https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/4925945367/npm-package-wrangler-3048",
+    "typescript": "^4.9.4",
+    "webpack": "^5.88.2",
     "webpack-retry-chunk-load-plugin": "^3.1.1",
+    "wrangler": "^3.5.0",
     "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
     "@apollo/client": "^3.7.2",
     "@coinbase/wallet-sdk": "^3.6.4",
-    "@cypress/code-coverage": "^3.10.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
-    "@graphql-codegen/cli": "^2.15.0",
-    "@graphql-codegen/client-preset": "^1.2.1",
-    "@graphql-codegen/typescript": "^2.8.3",
-    "@graphql-codegen/typescript-operations": "^2.5.8",
+    "@graphql-codegen/cli": "^3.3.1",
+    "@graphql-codegen/client-preset": "^3.0.1",
+    "@graphql-codegen/typescript": "^3.0.4",
+    "@graphql-codegen/typescript-operations": "^3.0.2",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@graphql-codegen/typescript-resolvers": "^2.7.8",
+    "@graphql-codegen/typescript-resolvers": "^3.2.1",
     "@juggle/resize-observer": "^3.4.0",
-    "@lingui/core": "^3.14.0",
-    "@lingui/macro": "^3.14.0",
-    "@lingui/react": "^3.14.0",
+    "@lingui/core": "^4.3.0",
+    "@lingui/macro": "^4.3.0",
+    "@lingui/react": "^4.3.0",
     "@looksrare/sdk": "^0.10.2",
     "@metamask/jazzicon": "^2.0.0",
     "@opensea/seaport-js": "^1.2.0",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "^7.45.0",
     "@sentry/tracing": "^7.45.0",
     "@sentry/types": "^7.45.0",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@uniswap/analytics": "^1.3.1",
-    "@uniswap/analytics-events": "^2.13.0",
-    "@uniswap/conedison": "^1.7.1",
+    "@uniswap/analytics": "^1.4.0",
+    "@uniswap/analytics-events": "^2.15.0",
+    "@uniswap/conedison": "^1.8.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
-    "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/permit2-sdk": "1.2.0",
+    "@uniswap/merkle-distributor": "^1.0.1",
+    "@uniswap/permit2-sdk": "^1.2.0",
     "@uniswap/redux-multicall": "^1.1.8",
-    "@uniswap/router-sdk": "^1.3.0",
-    "@uniswap/sdk-core": "^3.2.6",
-    "@uniswap/smart-order-router": "3.13.5",
-    "@uniswap/token-lists": "^1.0.0-beta.31",
-    "@uniswap/universal-router-sdk": "^1.5.3",
-    "@uniswap/v2-core": "1.0.0",
+    "@uniswap/router-sdk": "^1.6.0",
+    "@uniswap/sdk-core": "^4.0.3",
+    "@uniswap/smart-order-router": "^3.15.0",
+    "@uniswap/token-lists": "^1.0.0-beta.33",
+    "@uniswap/uniswapx-sdk": "^1.2.0",
+    "@uniswap/universal-router-sdk": "^1.5.6",
+    "@uniswap/v2-core": "^1.0.1",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
-    "@uniswap/v2-sdk": "^3.0.1",
-    "@uniswap/v3-core": "1.0.0",
+    "@uniswap/v2-sdk": "^3.2.0",
+    "@uniswap/v3-core": "^1.0.1",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@uniswap/v3-sdk": "^3.9.0",
-    "@vanilla-extract/css": "^1.7.2",
-    "@vanilla-extract/css-utils": "^0.1.2",
-    "@vanilla-extract/dynamic": "^2.0.2",
-    "@vanilla-extract/sprinkles": "^1.4.1",
+    "@uniswap/v3-sdk": "^3.10.0",
+    "@vanilla-extract/css": "^1.12.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "@visx/axis": "^2.12.2",
     "@visx/event": "^2.6.0",
     "@visx/glyph": "^2.10.0",
@@ -215,6 +226,7 @@
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
     "ethers": "^5.7.2",
+    "ext-name": "^5.0.0",
     "focus-visible": "^5.2.0",
     "get-graphql-schema": "^2.1.2",
     "graphql": "^16.5.0",
@@ -224,6 +236,7 @@
     "jotai": "^1.3.7",
     "jsbi": "^3.1.4",
     "make-plural": "^7.0.0",
+    "ms": "^2.1.3",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
     "node-vibrant": "^3.2.1-alpha.1",

patches/@vercel+og+0.5.8.patch

@@ -0,0 +1,50 @@
+diff --git a/node_modules/@vercel/og/dist/index.edge.js b/node_modules/@vercel/og/dist/index.edge.js
+index 5187f88..c4a1c41 100644
+--- a/node_modules/@vercel/og/dist/index.edge.js
++++ b/node_modules/@vercel/og/dist/index.edge.js
+@@ -18673,8 +18673,8 @@ var Resvg2 = class extends Resvg {
+ };
+ 
+ // src/index.edge.ts
+-import resvg_wasm from "./resvg.wasm?module";
+-import yoga_wasm from "./yoga.wasm?module";
++import resvg_wasm from "./resvg.wasm";
++import yoga_wasm from "./yoga.wasm";
+ 
+ // src/emoji/index.ts
+ var U200D = String.fromCharCode(8205);
+@@ -18809,18 +18809,18 @@ async function render(satori, resvg, opts, defaultFonts, element) {
+ // src/index.edge.ts
+ var initializedResvg = initWasm(resvg_wasm);
+ var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Ll(yoga2));
+-var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());
++// var fallbackFont = fetch(new URL("https://fonts.gstatic.com/s/notosans/v28/o-0IIpQlx3QUlC5A4PNr6zRF.ttf", import.meta.url)).then((res) => res.arrayBuffer());
+ var ImageResponse = class {
+   constructor(element, options = {}) {
+     const result = new ReadableStream({
+       async start(controller) {
+         await initializedYoga;
+         await initializedResvg;
+-        const fontData = await fallbackFont;
++        // const fontData = await fallbackFont;
+         const fonts = [
+           {
+             name: "sans serif",
+-            data: fontData,
++            // data: fontData,
+             weight: 700,
+             style: "normal"
+           }
+diff --git a/node_modules/@vercel/og/dist/types.d.ts b/node_modules/@vercel/og/dist/types.d.ts
+index dde26cc..eb59ff4 100644
+--- a/node_modules/@vercel/og/dist/types.d.ts
++++ b/node_modules/@vercel/og/dist/types.d.ts
+@@ -30,7 +30,7 @@ declare type ImageOptions = {
+      * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
+      * @default Noto Sans Latin Regular.
+      */
+-    fonts?: SatoriOptions['fonts'];
++    fonts: SatoriOptions['fonts'];
+     /**
+      * Using a specific Emoji style. Defaults to `twemoji`.
+      *

public/.well-known/assetlinks.json

@@ -0,0 +1,29 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.uniswap",
+      "sha256_cert_fingerprints":
+        ["97:A5:81:51:DA:AF:8F:6E:65:3A:90:1E:82:12:6C:FB:61:2D:36:C7:CF:20:61:6B:A3:4C:52:CA:BC:58:43:8E", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.uniswap.beta",
+      "sha256_cert_fingerprints":
+        ["E5:39:87:DC:4D:FD:4C:1B:A6:74:36:7D:3A:3B:6B:ED:9E:B3:66:89:92:8A:1B:B8:FC:1B:22:56:56:B4:46:A3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.uniswap.dev",
+      "sha256_cert_fingerprints":
+        ["A8:A7:D4:DE:46:8E:BE:F6:DE:3B:62:2B:A7:26:60:F2:9A:4C:CD:AF:A6:96:C9:E5:7C:91:68:A1:29:2A:48:D3", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"]
+    }
+  }
+]

public/apple-app-site-association

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

public/images/54x54_Verified_Check.svg

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

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Uniswap Interface</title>
-    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
 
     <!--
       %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.

src/analytics/index.tsx

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

src/assets/svg/base_background_icon.svg

@@ -0,0 +1,3 @@
+<svg width="119" height="99" viewBox="0 0 119 99" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M118.097 29.6061C117.891 67.6376 86.8404 98.3016 48.7425 98.0958C12.5975 97.9006 -16.9048 69.9894 -19.659 34.6507L71.5199 35.1431L71.5825 23.5662L-19.5965 23.0738C-16.4608 -12.2332 13.3412 -39.824 49.4863 -39.6288C87.5842 -39.423 118.302 -8.4256 118.097 29.6061Z" fill="white" fill-opacity="0.1"/>
+</svg>

src/assets/svg/base_logo.svg

@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 6.26801 6.26801 0 14 0V0C21.732 0 28 6.26801 28 14V14C28 21.732 21.732 28 14 28V28C6.26801 28 0 21.732 0 14V14Z" fill="#0052FF"/>
+<g clip-path="url(#clip0_13924_33076)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3332 14.0003C23.3332 19.155 19.1472 23.3337 13.9836 23.3337C9.08459 23.3337 5.06565 19.5724 4.6665 14.7849H17.0245V13.2158H4.6665C5.06565 8.42825 9.08459 4.66699 13.9836 4.66699C19.1472 4.66699 23.3332 8.84566 23.3332 14.0003Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13924_33076">
+<rect width="18.6667" height="18.6667" fill="white" transform="translate(4.66675 4.66699)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/base_square_logo.svg

@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="8" fill="#0052FF"/>
+<g clip-path="url(#clip0_13921_13252)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3332 14.0003C23.3332 19.155 19.1472 23.3337 13.9836 23.3337C9.08459 23.3337 5.06565 19.5724 4.6665 14.7849H17.0245V13.2158H4.6665C5.06565 8.42825 9.08459 4.66699 13.9836 4.66699C19.1472 4.66699 23.3332 8.84566 23.3332 14.0003Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13921_13252">
+<rect width="18.6667" height="18.6667" fill="white" transform="translate(4.66675 4.66699)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/bolt.svg

@@ -0,0 +1,9 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.97119 6.19815C9.91786 6.07749 9.79854 6.00016 9.66654 6.00016H6.66654V1.00016C6.66654 0.862156 6.58189 0.738159 6.45255 0.688826C6.32255 0.638826 6.17787 0.674818 6.0852 0.776818L0.0852016 7.44349C-0.00279838 7.54149 -0.025439 7.68149 0.028561 7.80216C0.0818943 7.92283 0.201208 8.00016 0.333208 8.00016H3.33321V13.0002C3.33321 13.1382 3.41786 13.2622 3.5472 13.3115C3.58653 13.3262 3.62654 13.3335 3.66654 13.3335C3.75921 13.3335 3.84988 13.2948 3.91455 13.2228L9.91455 6.55616C10.0025 6.45882 10.0245 6.31815 9.97119 6.19815Z" fill="url(#paint0_linear_1816_1801)"/>
+<defs>
+<linearGradient id="paint0_linear_1816_1801" x1="-10.1808" y1="-12.0005" x2="10.6572" y2="-11.6015" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4673FA"/>
+<stop offset="1" stop-color="#9646FA"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/svg/settings.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
+    fill="currentColor" />
+</svg>

src/assets/svg/uniswapx_error.svg

@@ -0,0 +1,37 @@
+<svg width="74" height="72" viewBox="0 0 74 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.3747 21.5043C24.671 21.5043 24.9274 21.7105 24.991 21.9998C25.1664 22.7982 25.1791 24.1098 24.6141 25.1601C24.322 25.703 23.8683 26.1865 23.2031 26.4658C22.5432 26.7429 21.7375 26.7931 20.7823 26.5871C19.5609 26.3237 18.3363 25.6271 17.1951 24.7335C16.0477 23.8349 14.9472 22.7077 13.9724 21.5319C12.9967 20.3551 12.137 19.1177 11.4739 17.9903C10.8173 16.8739 10.3306 15.8269 10.132 15.0366C10.059 14.7459 10.2005 14.444 10.4706 14.3141C10.7407 14.1843 11.0649 14.2624 11.2463 14.501C12.087 15.6072 14.0213 17.3714 16.4539 18.8598C18.8877 20.3489 21.7272 21.5043 24.3747 21.5043Z" fill="white" stroke="black" stroke-width="1.26191" stroke-linejoin="round"/>
+<mask id="path-2-outside-1_1930_115608" maskUnits="userSpaceOnUse" x="0.0805664" y="18.0469" width="56" height="43" fill="black">
+<rect fill="white" x="0.0805664" y="18.0469" width="56" height="43"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.4887 52.6749C51.8537 49.2159 53.8899 44.7033 53.8899 39.7671C53.8899 28.8759 43.9775 20.0469 31.7499 20.0469C19.5224 20.0469 9.60998 28.8759 9.60998 39.7671C9.60998 40.805 9.69999 41.8241 9.87343 42.8186C5.25341 44.2149 2.08057 47.1039 2.08057 50.4413C2.08057 55.1444 8.38116 58.9569 16.1533 58.9569C18.6361 58.9569 20.9687 58.5679 22.9937 57.885C25.6793 58.9161 28.6397 59.4874 31.7499 59.4874C38.4356 59.4874 44.4292 56.8479 48.4887 52.6749Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.4887 52.6749C51.8537 49.2159 53.8899 44.7033 53.8899 39.7671C53.8899 28.8759 43.9775 20.0469 31.7499 20.0469C19.5224 20.0469 9.60998 28.8759 9.60998 39.7671C9.60998 40.805 9.69999 41.8241 9.87343 42.8186C5.25341 44.2149 2.08057 47.1039 2.08057 50.4413C2.08057 55.1444 8.38116 58.9569 16.1533 58.9569C18.6361 58.9569 20.9687 58.5679 22.9937 57.885C25.6793 58.9161 28.6397 59.4874 31.7499 59.4874C38.4356 59.4874 44.4292 56.8479 48.4887 52.6749Z" fill="white"/>
+<path d="M48.4887 52.6749L49.3932 53.5549L48.4887 52.6749ZM9.87343 42.8186L10.2385 44.0265L11.3086 43.7031L11.1166 42.6018L9.87343 42.8186ZM22.9937 57.885L23.446 56.707L23.0214 56.544L22.5905 56.6893L22.9937 57.885ZM52.628 39.7671C52.628 44.3432 50.743 48.548 47.5842 51.795L49.3932 53.5549C52.9645 49.8838 55.1518 45.0634 55.1518 39.7671H52.628ZM31.7499 21.3088C43.4219 21.3088 52.628 29.7062 52.628 39.7671H55.1518C55.1518 28.0457 44.5332 18.785 31.7499 18.785V21.3088ZM10.8719 39.7671C10.8719 29.7062 20.078 21.3088 31.7499 21.3088V18.785C18.9667 18.785 8.34807 28.0457 8.34807 39.7671H10.8719ZM11.1166 42.6018C10.9555 41.6784 10.8719 40.7318 10.8719 39.7671H8.34807C8.34807 40.8781 8.44444 41.9697 8.63029 43.0354L11.1166 42.6018ZM3.34248 50.4413C3.34248 47.9707 5.77784 45.3747 10.2385 44.0265L9.50835 41.6106C4.72899 43.0551 0.818657 46.2371 0.818657 50.4413H3.34248ZM16.1533 57.695C12.4585 57.695 9.17438 56.7862 6.85568 55.3831C4.5135 53.9658 3.34248 52.1807 3.34248 50.4413H0.818657C0.818657 53.405 2.79793 55.8776 5.54909 57.5424C8.32373 59.2214 12.076 60.2188 16.1533 60.2188V57.695ZM22.5905 56.6893C20.7028 57.3258 18.5071 57.695 16.1533 57.695V60.2188C18.7651 60.2188 21.2345 59.8099 23.3969 59.0808L22.5905 56.6893ZM31.7499 58.2255C28.7946 58.2255 25.9875 57.6827 23.446 56.707L22.5414 59.0631C25.3711 60.1496 28.4849 60.7493 31.7499 60.7493V58.2255ZM47.5842 51.795C43.7692 55.7165 38.1051 58.2255 31.7499 58.2255V60.7493C38.7662 60.7493 45.0891 57.9792 49.3932 53.5549L47.5842 51.795Z" fill="black" mask="url(#path-2-outside-1_1930_115608)"/>
+<path d="M39.0719 21.5043C38.7762 21.5043 38.5201 21.7097 38.456 21.9984C38.2783 22.7979 38.2654 24.1112 38.8376 25.1627C39.1334 25.7063 39.592 26.1886 40.2622 26.4668C40.9266 26.7426 41.7385 26.793 42.7026 26.5874C43.9355 26.3246 45.1727 25.6291 46.3268 24.7356C47.487 23.8374 48.6 22.7104 49.586 21.5347C50.5728 20.3579 51.4423 19.1205 52.1131 17.993C52.7773 16.8766 53.2698 15.8293 53.4709 15.0382C53.5446 14.7481 53.4043 14.4461 53.135 14.3153C52.8657 14.1845 52.5416 14.2609 52.3592 14.4982C51.5085 15.6046 49.5517 17.3692 47.0903 18.8581C44.6282 20.3475 41.7536 21.5043 39.0719 21.5043Z" fill="white" stroke="black" stroke-width="1.26191" stroke-linejoin="round"/>
+<path d="M9.27317 46.8448L9.50259 46.4782C9.93019 45.7949 9.38096 45.0323 8.64133 45.3527C7.81405 45.7111 6.82196 46.2689 5.87019 47.1255C5.44297 47.51 5.12141 47.8905 4.88077 48.2545C3.88061 49.7674 5.42411 51.2381 7.23768 51.2541C8.19162 51.2626 9.28694 51.2174 10.3799 51.0555C11.8292 50.8408 13.0434 50.1513 13.916 49.4901C14.561 49.0012 14.1621 48.1301 13.3534 48.1626L10.1134 48.2925C9.35325 48.323 8.8696 47.4897 9.27317 46.8448Z" fill="black"/>
+<path d="M22.3604 55.8761C23.8648 55.9852 25.2756 55.8261 26.3472 55.4561C26.8819 55.2714 27.362 55.024 27.7263 54.7048C28.0935 54.3831 28.3749 53.9571 28.4127 53.4357C28.4505 52.9142 28.2335 52.4521 27.9166 52.0807C27.6022 51.7123 27.1628 51.3982 26.6604 51.1384C25.6534 50.6176 24.2803 50.2565 22.7758 50.1474C21.2714 50.0383 19.8606 50.1974 18.789 50.5675C18.2544 50.7521 17.7742 50.9995 17.4099 51.3187C17.0428 51.6404 16.7613 52.0665 16.7235 52.5879C16.6857 53.1093 16.9027 53.5714 17.2196 53.9428C17.534 54.3112 17.9735 54.6253 18.4759 54.8852C19.4829 55.4059 20.8559 55.767 22.3604 55.8761Z" fill="white" stroke="black" stroke-width="1.26191"/>
+<line y1="-0.630955" x2="10.458" y2="-0.630955" transform="matrix(0.99738 0.0723377 -0.0723344 0.99738 17.2944 53.4453)" stroke="black" stroke-width="1.26191"/>
+<line y1="-0.630955" x2="5.19898" y2="-0.630955" transform="matrix(-0.0723344 0.99738 -0.99738 -0.0723377 23.6921 50.0703)" stroke="black" stroke-width="1.26191"/>
+<line y1="-0.630955" x2="5.19898" y2="-0.630955" transform="matrix(-0.0723344 0.99738 -0.99738 -0.0723377 19.9366 50.5742)" stroke="black" stroke-width="1.26191"/>
+<path d="M23.6113 12.1879C23.4573 11.9346 23.1478 11.8226 22.8674 11.9188C22.587 12.015 22.4114 12.2934 22.4453 12.5878L23.4514 21.3197C23.618 22.7653 24.9556 23.7808 26.3928 23.5526C28.1885 23.2675 29.1214 21.2523 28.1769 19.6986L23.6113 12.1879Z" fill="url(#paint0_linear_1930_115608)" stroke="black" stroke-width="1.26191" stroke-linejoin="round"/>
+<mask id="path-11-outside-2_1930_115608" maskUnits="userSpaceOnUse" x="53.3934" y="34.8259" width="22.6706" height="24.8274" fill="black">
+<rect fill="white" x="53.3934" y="34.8259" width="22.6706" height="24.8274"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.6261 54.012C57.135 53.9721 56.7516 53.8134 56.5049 53.5249C55.2906 52.1043 57.8521 48.0728 62.2261 44.5205C66.6002 40.9681 71.1305 39.24 72.3449 40.6606C73.078 41.5183 72.435 43.3274 70.8479 45.4082C71.665 45.4935 72.234 45.7574 72.4517 46.2109C73.1324 47.6291 70.1196 50.3641 65.7223 52.3195C62.4196 53.7883 59.2752 54.3996 57.6261 54.012Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.6261 54.012C57.135 53.9721 56.7516 53.8134 56.5049 53.5249C55.2906 52.1043 57.8521 48.0728 62.2261 44.5205C66.6002 40.9681 71.1305 39.24 72.3449 40.6606C73.078 41.5183 72.435 43.3274 70.8479 45.4082C71.665 45.4935 72.234 45.7574 72.4517 46.2109C73.1324 47.6291 70.1196 50.3641 65.7223 52.3195C62.4196 53.7883 59.2752 54.3996 57.6261 54.012Z" fill="url(#paint1_linear_1930_115608)"/>
+<path d="M57.6261 54.012L57.9148 52.7835C57.8534 52.7691 57.791 52.7593 57.7282 52.7542L57.6261 54.012ZM56.5049 53.5249L55.5457 54.3449L55.5457 54.3449L56.5049 53.5249ZM62.2261 44.5205L61.4306 43.5409L62.2261 44.5205ZM72.3449 40.6606L71.3857 41.4806L71.3857 41.4806L72.3449 40.6606ZM70.8479 45.4082L69.8445 44.6428C69.5678 45.0056 69.5085 45.4895 69.6893 45.9084C69.8702 46.3272 70.2631 46.6159 70.7169 46.6633L70.8479 45.4082ZM72.4517 46.2109L71.314 46.757L72.4517 46.2109ZM65.7223 52.3195L66.2351 53.4726L65.7223 52.3195ZM57.7282 52.7542C57.5875 52.7428 57.5078 52.7177 57.4715 52.7021C57.44 52.6886 57.4475 52.6855 57.4642 52.705L55.5457 54.3449C56.0816 54.9718 56.8316 55.2135 57.524 55.2697L57.7282 52.7542ZM57.4642 52.705C57.5255 52.7768 57.4073 52.7335 57.5045 52.2864C57.5986 51.8541 57.859 51.248 58.335 50.4988C59.279 49.0131 60.9099 47.2151 63.0217 45.5L61.4306 43.5409C59.1683 45.3782 57.3314 47.3721 56.2048 49.1453C55.6454 50.0257 55.2198 50.9159 55.0384 51.75C54.8602 52.5693 54.8772 53.5627 55.5457 54.3449L57.4642 52.705ZM63.0217 45.5C65.1329 43.7855 67.244 42.5441 68.9202 41.9047C69.7645 41.5827 70.4326 41.4388 70.9004 41.4263C71.3906 41.4132 71.4384 41.5422 71.3857 41.4806L73.3041 39.8407C72.6442 39.0687 71.6703 38.881 70.8329 38.9034C69.973 38.9264 69.0075 39.1702 68.0207 39.5466C66.0346 40.3042 63.6935 41.7031 61.4306 43.5409L63.0217 45.5ZM71.3857 41.4806C71.3132 41.3958 71.4919 41.4945 71.2668 42.1842C71.0603 42.8169 70.5933 43.6612 69.8445 44.6428L71.8512 46.1735C72.6896 45.0744 73.3376 43.9737 73.6661 42.9673C73.976 42.0178 74.1096 40.7831 73.3041 39.8407L71.3857 41.4806ZM70.7169 46.6633C71.0333 46.6963 71.2227 46.7572 71.3185 46.8042C71.4057 46.8471 71.3576 46.8477 71.314 46.757L73.5893 45.6649C73.0698 44.5825 71.8893 44.2481 70.9789 44.1531L70.7169 46.6633ZM71.314 46.757C71.2372 46.5968 71.3566 46.582 71.1885 46.902C71.0285 47.2068 70.6953 47.6281 70.1431 48.1294C69.05 49.1216 67.321 50.2275 65.2095 51.1665L66.2351 53.4726C68.5208 52.4561 70.4969 51.2168 71.8394 49.9981C72.5049 49.394 73.0722 48.7434 73.423 48.0755C73.7658 47.4227 74.0066 46.5342 73.5893 45.6649L71.314 46.757ZM65.2095 51.1665C63.6302 51.8688 62.1053 52.3583 60.8007 52.6257C59.4622 52.9 58.4759 52.9154 57.9148 52.7835L57.3374 55.2404C58.4254 55.4961 59.8358 55.3997 61.3075 55.0981C62.813 54.7896 64.5117 54.239 66.2351 53.4726L65.2095 51.1665Z" fill="black" mask="url(#path-11-outside-2_1930_115608)"/>
+<ellipse cx="14.8446" cy="37.3595" rx="3.31248" ry="4.96883" fill="black"/>
+<ellipse cx="14.9235" cy="37.3605" rx="1.4985" ry="2.60272" fill="white"/>
+<ellipse cx="27.7795" cy="37.3595" rx="3.31248" ry="4.96883" fill="black"/>
+<ellipse cx="27.8581" cy="37.3605" rx="1.4985" ry="2.60272" fill="white"/>
+<path d="M34.2463 54.3156C34.2463 51.2381 35.3257 47.5016 37.9302 45.6216C40.1969 43.9853 43.0541 43.828 45.7611 44.284" stroke="black" stroke-width="1.26191"/>
+<defs>
+<linearGradient id="paint0_linear_1930_115608" x1="27.4989" y1="4.1016" x2="19.0152" y2="20.2113" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF24A7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1930_115608" x1="66.7203" y1="38.9751" x2="63.2492" y2="55.4808" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF24A7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

src/components/About/AboutFooter.tsx

@@ -1,7 +1,7 @@
-import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
+import { TraceEvent } from 'analytics'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
-import styled from 'styled-components/macro'
+import styled from 'styled-components'
 import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 

src/components/About/Card.tsx

@@ -1,7 +1,7 @@
-import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, SharedEventName } from '@uniswap/analytics-events'
+import { TraceEvent } from 'analytics'
 import { Link } from 'react-router-dom'
-import styled, { DefaultTheme } from 'styled-components/macro'
+import styled, { DefaultTheme } from 'styled-components'
 import { BREAKPOINTS } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 

src/components/About/Icons.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro'
+import styled from 'styled-components'
 
 import { ReactComponent as DiscordI } from './images/discord.svg'
 import { ReactComponent as GithubI } from './images/github.svg'

src/components/About/ProtocolBanner.tsx

@@ -1,5 +1,5 @@
 import { ButtonEmpty } from 'components/Button'
-import styled from 'styled-components/macro'
+import styled from 'styled-components'
 import { BREAKPOINTS } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'