fix: widget theme integration (#5880)

* fix: add missing colors to widget theme integration

* feat: upgrade widget version

* fix: conedison in jest tests

.env

@@ -4,6 +4,7 @@ REACT_APP_AWS_API_REGION="us-east-2"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
 REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
 REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
+REACT_APP_SENTRY_ENABLED=false
 ESLINT_NO_DEV_ERRORS=true
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"

.env.production

@@ -8,3 +8,4 @@ REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/si
 REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_live_uQG4BJC4w3cxnqpcSqAfohdBFDTsY6E"
 REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
 THE_GRAPH_SCHEMA_ENDPOINT="https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3"
+REACT_APP_SENTRY_ENABLED=false

.eslintignore

@@ -1,2 +1,5 @@
 *.config.ts
 *.d.ts
+/src/graphql/data/__generated__/types-and-hooks.ts
+/src/graphql/thegraph/__generated__/types-and-hooks.ts
+/src/schema/schema.graphql

.eslintrc.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+
+require('@uniswap/eslint-config/load')
+
+module.exports = {
+  extends: '@uniswap/eslint-config/react',
+}

.eslintrc.json

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

.github/workflows/release.yaml

@@ -112,7 +112,8 @@ jobs:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload source maps to Sentry
-        uses: getsentry/action-release@bd5f874fcda966ba48139b0140fb3ec0cb3aabdd 
+        uses: getsentry/action-release@bd5f874fcda966ba48139b0140fb3ec0cb3aabdd
+        continue-on-error: true
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
@@ -120,4 +121,4 @@ jobs:
         with:
           environment: production
           sourcemaps: './build/static/js'
-          url_prefix: '/static/js'
+          url_prefix: '~/static/js'

.github/workflows/revert.yaml

@@ -1,27 +0,0 @@
-name: Revert
-on:
-  # manual trigger
-  workflow_dispatch:
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - run: yarn prepare
-      - run: yarn build
-
-      - name: Setup node@16 (required by Cloudflare Pages)
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: Update Cloudflare Pages deployment
-        uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
-          directory: build
-          githubToken: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -9,7 +9,6 @@
 /src/locales/**/pseudo.po
 
 # generated graphql types
-__generated__/
 schema.graphql
 
 # dependencies

.prettierignore

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

.prettierrc

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

.vscode/extensions.json

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

.vscode/settings.json

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

apollo-codegen.ts

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

apollo-codegen_thegraph.ts

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

babel-plugin-macros.config.js

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

craco.config.cjs

@@ -9,6 +9,17 @@ module.exports = {
   babel: {
     plugins: ['@vanilla-extract/babel-plugin'],
   },
+  jest: {
+    configure(jestConfig) {
+      return Object.assign({}, jestConfig, {
+        transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
+        moduleNameMapper: {
+          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
+          '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
+        },
+      })
+    },
+  },
   webpack: {
     plugins: [
       new VanillaExtractPlugin(),

cypress/e2e/nfts.test.ts

@@ -3,8 +3,9 @@ import { getTestSelector } from '../utils'
 const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
 
 describe('Testing nfts', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/')
+    cy.get(getTestSelector('FiatOnrampAnnouncement-close')).first().click()
   })
 
   it('should load nft leaderboard', () => {
@@ -22,13 +23,8 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('nft-collection-filter-buy-now')).should('exist')
   })
 
-  it('should be able to open bag and open sweep', () => {
-    cy.get(getTestSelector('nft-sweep-button')).first().click()
-    cy.get(getTestSelector('nft-empty-bag')).should('exist')
-    cy.get(getTestSelector('nft-sweep-slider')).should('exist')
-  })
-
   it('should be able to navigate to activity', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-activity')).first().click()
     cy.get(getTestSelector('nft-activity-row')).should('exist')
   })
@@ -45,19 +41,11 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
+    cy.visit(`#/nfts/asset/${COLLECTION_ADDRESS}/2043`)
     cy.get(getTestSelector('nft-details-description-text')).should('exist')
     cy.get(getTestSelector('nft-details-description')).click()
     cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
     cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
     cy.get(getTestSelector('nft-bag')).should('exist')
   })
-
-  it('should go view my nfts', () => {
-    cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('nft-view-self-nfts')).click()
-    cy.get(getTestSelector('nft-explore-nfts-button')).should('exist')
-    cy.get(getTestSelector('nft-no-nfts-selected')).should('exist')
-    cy.get(getTestSelector('nft-bag-close-icon')).click()
-    cy.get(getTestSelector('nft-explore-nfts-button')).click()
-  })
 })

cypress/e2e/pool.test.ts

@@ -1,7 +1,10 @@
+import { getTestSelector } from '../utils'
+
 describe('Pool', () => {
   beforeEach(() => cy.visit('/pool'))
 
   it('add liquidity links to /add/ETH', () => {
+    cy.get(getTestSelector('FiatOnrampAnnouncement-close')).first().click()
     cy.get('#join-pool-button').click()
     cy.url().should('contain', '/add/ETH')
   })

cypress/e2e/token-details.test.ts

@@ -0,0 +1,92 @@
+import { getTestSelector } from '../utils'
+
+describe('Token details', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('Uniswap token should have all information populated', () => {
+    // Uniswap token
+    cy.visit('/tokens/ethereum/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+
+    // Price chart should be filled in
+    cy.get('[data-cy="chart-header"]').should('include.text', '$')
+    cy.get('[data-cy="price-chart"]').should('exist')
+
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('include.text', '$')
+      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
+      cy.get('[data-cy="52w-low"]').should('include.text', '$')
+      cy.get('[data-cy="52w-high"]').should('include.text', '$')
+    })
+
+    // About section should have description of token
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('UNI is the governance token for Uniswap').should('exist')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan')
+        .should('have.attr', 'href')
+        .and('include', 'etherscan.io/address/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', 'info.uniswap.org/#/tokens/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+      cy.contains('Website').should('have.attr', 'href').and('include', 'uniswap.org')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/Uniswap')
+    })
+
+    // Contract address should be displayed
+    cy.contains('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984').should('exist')
+
+    // Swap widget should have this token pre-selected as the “destination” token
+    cy.get(getTestSelector('token-select')).should('include.text', 'UNI')
+  })
+
+  it('token with warning and low trading volume should have all information populated', () => {
+    // Shiba predator token, low trading volume and also has warning modal
+    cy.visit('/tokens/ethereum/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+
+    // Should have missing price chart when price unavailable (expected for this token)
+    if (cy.get('[data-cy="chart-header"]').contains('Price Unavailable')) {
+      cy.get('[data-cy="missing-chart"]').should('exist')
+    }
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('exist')
+      cy.get('[data-cy="volume-24h"]').should('exist')
+      cy.get('[data-cy="52w-low"]').should('exist')
+      cy.get('[data-cy="52w-high"]').should('exist')
+    })
+
+    // About section should have description of token
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('QOM is the Shiba Predator').should('exist')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan')
+        .should('have.attr', 'href')
+        .and('include', 'etherscan.io/address/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', 'info.uniswap.org/#/tokens/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('Website').should('have.attr', 'href').and('include', 'qom')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/ShibaPredator1')
+    })
+
+    // Contract address should be displayed
+    cy.contains('0xa71d0588EAf47f12B13cF8eC750430d21DF04974').should('exist')
+
+    // Swap widget should have this token pre-selected as the “destination” token
+    cy.get(getTestSelector('token-select')).should('include.text', 'QOM')
+
+    // Warning label should show if relevant ([spec](https://www.notion.so/3f7fce6f93694be08a94a6984d50298e))
+    cy.get('[data-cy="token-safety-message"]')
+      .should('include.text', 'Warning')
+      .and('include.text', "This token isn't traded on leading U.S. centralized exchanges")
+  })
+})

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

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

cypress/e2e/token-explore.test.ts

@@ -0,0 +1,74 @@
+import { getTestSelector, getTestSelectorStartsWith } from '../utils'
+
+describe('Token explore', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load token leaderboard', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.eq', 100)
+    // check sorted svg icon is present in volume cell, since tokens are sorted by volume by default
+    cy.get(getTestSelector('header-row')).find(getTestSelector('volume-cell')).find('svg').should('exist')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('volume-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('price-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('tvl-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('percent-change-cell'))
+      .should('include.text', '%')
+    cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).click()
+    cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).find('svg').should('exist')
+  })
+
+  it('should update when time window toggled', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('time-selector')).should('contain', '1D')
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('volume-cell'))
+      .then(function ($elem) {
+        cy.wrap($elem.text()).as('dailyEthVol')
+      })
+    cy.get(getTestSelector('time-selector')).click()
+    cy.get(getTestSelector('1Y')).click()
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('volume-cell'))
+      .then(function ($elem) {
+        cy.wrap($elem.text()).as('yearlyEthVol')
+      })
+    expect(cy.get('@dailyEthVol')).to.not.equal(cy.get('@yearlyEthVol'))
+  })
+
+  it('should navigate to token detail page when row clicked', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('token-table-row-ETH')).click()
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-info-container')).should('exist')
+    cy.get(getTestSelector('chart-container')).should('exist')
+    cy.contains('Ethereum is a smart contract platform that enables developers to build tokens').should('exist')
+    cy.contains('Etherscan').should('exist')
+  })
+
+  it('should update when global network changed', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Ethereum')
+    cy.get(getTestSelector('token-table-row-ETH')).should('exist')
+
+    // note: cannot switch global chain via UI because we cannot approve the network switch
+    // in metamask modal using plain cypress. this is a workaround.
+    cy.visit('/tokens/polygon')
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Polygon')
+    cy.get(getTestSelector('token-table-row-MATIC')).should('exist')
+  })
+
+  it('should update when token explore table network changed', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).click()
+    cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.reload()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.get(getTestSelector('chain-selector')).last().should('contain', 'Ethereum')
+  })
+})

cypress/e2e/token.test.ts

@@ -1,20 +0,0 @@
-import { getTestSelector, getTestSelectorStartsWith } from '../utils'
-
-describe('Testing tokens on uniswap page', () => {
-  before(() => {
-    cy.visit('/')
-  })
-
-  it('should load token leaderboard', () => {
-    cy.visit('/tokens/ethereum')
-    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
-  })
-
-  it('should load go to ethereum token and return to token list page', () => {
-    cy.visit('/tokens/ethereum')
-    cy.get(getTestSelector('token-table-row-Ether')).click()
-    cy.get(getTestSelector('token-details-stats')).should('exist')
-    cy.get(getTestSelector('token-details-return-button')).click()
-    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
-  })
-})

cypress/e2e/universal-search.test.ts

@@ -0,0 +1,72 @@
+import { getTestSelector } from '../utils'
+
+describe('Universal search bar', () => {
+  before(() => {
+    cy.visit('/')
+    cy.get('[data-cy="magnifying-icon"]')
+      .parent()
+      .then(($navIcon) => {
+        $navIcon.click()
+      })
+  })
+
+  it('should yield no results found when contract address is search term', () => {
+    // Search for uni token contract address.
+    cy.get('[data-cy="search-bar-input"]').last().type('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('[data-cy="search-bar"]')
+      .should('contain.text', 'No tokens found.')
+      .and('contain.text', 'No NFT collections found.')
+  })
+
+  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"]')
+      .should('contain.text', 'Uniswap')
+      .and('contain.text', 'UNI')
+      .and('contain.text', '$')
+      .and('contain.text', '%')
+    cy.get('[data-cy="searchbar-token-row-UNI"]').click()
+
+    cy.get('div').contains('Uniswap').should('exist')
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high.
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('include.text', '$')
+      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
+      cy.get('[data-cy="52w-low"]').should('include.text', '$')
+      cy.get('[data-cy="52w-high"]').should('include.text', '$')
+    })
+
+    // About section should have description of token.
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('UNI is the governance token for Uniswap').should('exist')
+  })
+
+  it('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"]')
+      .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')
+  })
+})

cypress/release.ts

@@ -8,7 +8,8 @@ describe(
   },
   () => {
     it('loads swap page', () => {
-      // We *must* wait in order to space out the retry attempts.
+      // TODO: We *must* wait in order to space out the retry attempts. Find a better way to do this.
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(ONE_MINUTE)
         .visit('/', {
           retryOnStatusCodeFailure: true,

cypress/support/e2e.ts

@@ -85,8 +85,7 @@ beforeEach(() => {
   })
 })
 
-Cypress.on('uncaught:exception', (_err, _runnable) => {
-  // returning false here prevents Cypress from
-  // failing the test
+Cypress.on('uncaught:exception', () => {
+  // returning false here prevents Cypress from failing the test
   return false
 })

cypress/utils/graphql-test-utils.ts

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

fetch-schema.js

@@ -1,9 +1,10 @@
-/* eslint-disable */
+/* eslint-env node */
+
 require('dotenv').config({ path: '.env.production' })
+
 const { exec } = require('child_process')
-const dataConfig = require('./relay.config')
-const thegraphConfig = require('./relay_thegraph.config')
-/* eslint-enable */
+const dataConfig = require('./graphql.config')
+const thegraphConfig = require('./graphql_thegraph.config')
 
 function fetchSchema(url, outputFile) {
   exec(

graphql.config.js

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

graphql_thegraph.config.js

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

package.json

@@ -8,10 +8,10 @@
     "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
     "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
-    "relay": "relay-compiler relay.config.js",
-    "relay-thegraph": "relay-compiler relay_thegraph.config.js",
     "graphql:fetch": "node fetch-schema.js",
-    "graphql:generate": "yarn relay && yarn relay-thegraph",
+    "graphql:generate:data": "graphql-codegen --config apollo-codegen.ts",
+    "graphql:generate:thegraph": "graphql-codegen --config apollo-codegen_thegraph.ts",
+    "graphql:generate": "yarn graphql:generate:data && yarn graphql:generate:thegraph",
     "prei18n:extract": "node prei18n-extract.js",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
@@ -90,39 +90,36 @@
     "@types/ua-parser-js": "^0.7.35",
     "@types/uuid": "^8.3.4",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4",
-    "@typescript-eslint/parser": "^4",
+    "@uniswap/eslint-config": "^1.1.1",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
-    "babel-plugin-relay": "^14.1.0",
     "cypress": "^10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-better-styled-components": "^1.1.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3",
-    "relay-compiler": "^14.1.0",
     "serve": "^11.3.2",
+    "ts-transform-graphql-tag": "^0.2.1",
     "typechain": "^5.0.0",
     "typescript": "^4.4.3",
     "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.2",
     "@coinbase/wallet-sdk": "^3.3.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/typescript-react-apollo": "^3.3.7",
+    "@graphql-codegen/typescript-resolvers": "^2.7.8",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
@@ -134,12 +131,11 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@sentry/react": "7.20.1",
-    "@types/react-relay": "^13.0.2",
+    "@sentry/react": "^7.29.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.2.0",
-    "@uniswap/analytics-events": "^1.5.0",
-    "@uniswap/conedison": "^1.1.1",
+    "@uniswap/analytics-events": "^2.1.0",
+    "@uniswap/conedison": "^1.2.1",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
@@ -149,14 +145,14 @@
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/smart-order-router": "^2.10.0",
     "@uniswap/token-lists": "^1.0.0-beta.30",
-    "@uniswap/universal-router-sdk": "1.3.0",
+    "@uniswap/universal-router-sdk": "1.3.4",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "2.22.11",
+    "@uniswap/widgets": "^2.26.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -174,7 +170,7 @@
     "@web3-react/eip1193": "8.0.26-beta.0",
     "@web3-react/empty": "8.0.20-beta.0",
     "@web3-react/gnosis-safe": "8.0.7-beta.0",
-    "@web3-react/metamask": "8.0.28-beta.0",
+    "@web3-react/metamask": "8.0.29-beta.0",
     "@web3-react/network": "8.0.27-beta.0",
     "@web3-react/types": "8.0.20-beta.0",
     "@web3-react/url": "8.0.25-beta.0",
@@ -215,8 +211,6 @@
     "react-popper": "^2.2.3",
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
-    "react-relay": "^14.1.0",
-    "react-relay-network-modern": "^6.2.1",
     "react-router-dom": "^6.3.0",
     "react-spring": "^9.5.5",
     "react-table": "^7.8.0",

prei18n-extract.js

@@ -1,4 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+/* eslint-env node */
+
 const { exec } = require('child_process')
 const isWindows = process.platform === 'win32' || /^(msys|cygwin)$/.test(process.env.OSTYPE)
 

public/index.html

@@ -76,8 +76,8 @@
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
 
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
       #background-radial-gradient {
-        background: linear-gradient(180deg, #202738 0%, #070816 100%);
         position: fixed;
         top: 0;
         left: 0;
@@ -97,13 +97,13 @@
 
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: #212429;
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
         }
       }
 
       @media (prefers-color-scheme: light) {
         html {
-          background-color: #f7f8fa;
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
         }
       }
     </style>

src/abis/permit2.json

@@ -0,0 +1,41 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "internalType": "uint160",
+        "name": "amount",
+        "type": "uint160"
+      },
+      {
+        "internalType": "uint48",
+        "name": "expiration",
+        "type": "uint48"
+      },
+      {
+        "internalType": "uint48",
+        "name": "nonce",
+        "type": "uint48"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/components/About/AboutFooter.tsx

@@ -1,8 +1,13 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
-import { BookOpen, Globe, Heart, Twitter } from 'react-feather'
+import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
+import { Link } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
-import { BREAKPOINTS } from 'theme'
+import { BREAKPOINTS, ExternalLink } from 'theme'
+
+import { DiscordIcon, GithubIcon, TwitterIcon } from './Icons'
+import darkUnicornImgSrc from './images/unicornEmbossDark.png'
+import lightUnicornImgSrc from './images/unicornEmbossLight.png'
 
 const Footer = styled.div`
   display: flex;
@@ -10,80 +15,210 @@ const Footer = styled.div`
   width: 100%;
   gap: 48px;
   max-width: 1440px;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+
+const LogoSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const LogoSectionLeft = styled(LogoSection)`
+  display: none;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: flex;
+  }
+`
+
+const LogoSectionBottom = styled(LogoSection)`
+  display: flex;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: none;
+  }
+`
+
+const StyledLogo = styled.img`
+  width: 72px;
+  height: 72px;
+  display: none;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: block;
+  }
+`
+
+const SocialLinks = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin: 20px 0 0 0;
+`
+
+const SocialLink = styled.a`
+  display: flex;
 `
 
 const FooterLinks = styled.div`
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
-  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-  }
-  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 24px;
   }
 `
 
-const FooterLink = styled.a`
+const LinkGroup = styled.div`
   display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  color: ${({ theme }) => theme.textPrimary};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  flex-direction: column;
+  gap: 12px;
+  width: 200px;
+  margin: 20px 0 0 0;
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    margin: 0;
+  }
+`
+
+const LinkGroupTitle = styled.span`
   font-size: 16px;
   line-height: 20px;
-  font-weight: 600;
-  border-radius: 8px;
-  cursor: pointer;
+  font-weight: 700;
+`
+
+const ExternalTextLink = styled(ExternalLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
+`
+
+const TextLink = styled(Link)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
   text-decoration: none;
-  svg {
-    color: ${({ theme }) => theme.textSecondary};
-    stroke-width: 1.5;
-  }
-  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} border`};
   &:hover {
-    border: 1px solid ${({ theme }) => theme.textTertiary};
-  }
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
-    font-size: 20px;
-    line-height: 24px;
+    text-decoration: underline;
   }
 `
 
 const Copyright = styled.span`
   font-size: 16px;
   line-height: 20px;
+  margin: 1rem 0 0 0;
   color: ${({ theme }) => theme.textTertiary};
 `
 
+const LogoSectionContent = () => {
+  const isDarkMode = useIsDarkMode()
+  return (
+    <>
+      <StyledLogo src={isDarkMode ? darkUnicornImgSrc : lightUnicornImgSrc} alt="Uniswap Logo" />
+      <SocialLinks>
+        <SocialLink href="https://discord.gg/FCfyBSbCU5" target="_blank" rel="noopener noreferrer">
+          <DiscordIcon size={32} />
+        </SocialLink>
+        <TraceEvent
+          events={[BrowserEvent.onClick]}
+          name={SharedEventName.ELEMENT_CLICKED}
+          element={InterfaceElementName.TWITTER_LINK}
+        >
+          <SocialLink href="https://twitter.com/uniswap" target="_blank" rel="noopener noreferrer">
+            <TwitterIcon size={32} />
+          </SocialLink>
+        </TraceEvent>
+        <SocialLink href="https://github.com/Uniswap" target="_blank" rel="noopener noreferrer">
+          <GithubIcon size={32} />
+        </SocialLink>
+      </SocialLinks>
+      <Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
+    </>
+  )
+}
+
 export const AboutFooter = () => {
   return (
     <Footer>
+      <LogoSectionLeft>
+        <LogoSectionContent />
+      </LogoSectionLeft>
+
       <FooterLinks>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.SUPPORT_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://support.uniswap.org">
-            <Globe /> Support
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.TWITTER_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://twitter.com/uniswap">
-            <Twitter /> Twitter
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.BLOG_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://uniswap.org/blog">
-            <BookOpen /> Blog
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.CAREERS_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://boards.greenhouse.io/uniswaplabs">
-            <Heart /> Careers
-          </FooterLink>
-        </TraceEvent>
+        <LinkGroup>
+          <LinkGroupTitle>App</LinkGroupTitle>
+          <TextLink to="/swap">Swap</TextLink>
+          <TextLink to="/tokens">Tokens</TextLink>
+          <TextLink to="/nfts">NFTs</TextLink>
+          <TextLink to="/pool">Pools</TextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Protocol</LinkGroupTitle>
+          <ExternalTextLink href="https://uniswap.org/community" target="_blank" rel="noopener noreferrer">
+            Community
+          </ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/governance" target="_blank" rel="noopener noreferrer">
+            Governance
+          </ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/developers" target="_blank" rel="noopener noreferrer">
+            Developers
+          </ExternalTextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Company</LinkGroupTitle>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.CAREERS_LINK}
+          >
+            <ExternalTextLink href="https://boards.greenhouse.io/uniswaplabs" target="_blank" rel="noopener noreferrer">
+              Careers
+            </ExternalTextLink>
+          </TraceEvent>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.BLOG_LINK}
+          >
+            <ExternalTextLink href="https://uniswap.org/blog" target="_blank" rel="noopener noreferrer">
+              Blog
+            </ExternalTextLink>
+          </TraceEvent>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Get Help</LinkGroupTitle>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.SUPPORT_LINK}
+          >
+            <ExternalTextLink
+              href="https://support.uniswap.org/hc/en-us/requests/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Contact Us
+            </ExternalTextLink>
+          </TraceEvent>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.SUPPORT_LINK}
+          >
+            <ExternalTextLink href="https://support.uniswap.org/hc/en-us" target="_blank" rel="noopener noreferrer">
+              Help Center
+            </ExternalTextLink>
+          </TraceEvent>
+        </LinkGroup>
       </FooterLinks>
-      <Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
+
+      <LogoSectionBottom>
+        <LogoSectionContent />
+      </LogoSectionBottom>
     </Footer>
   )
 }

src/components/About/Card.tsx

@@ -1,5 +1,5 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, SharedEventName } from '@uniswap/analytics-events'
 import { Link } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled, { DefaultTheme } from 'styled-components/macro'
@@ -123,7 +123,7 @@ const Card = ({
 }) => {
   const isDarkMode = useIsDarkMode()
   return (
-    <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={elementName}>
+    <TraceEvent events={[BrowserEvent.onClick]} name={SharedEventName.ELEMENT_CLICKED} element={elementName}>
       <StyledCard
         type={type}
         as={external ? 'a' : Link}

src/components/About/Icons.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components/macro'
+
+import { ReactComponent as DiscordI } from './images/discord.svg'
+import { ReactComponent as GithubI } from './images/github.svg'
+import { ReactComponent as TwitterI } from './images/twitter-safe.svg'
+
+export const DiscordIcon = styled(DiscordI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`
+
+export const TwitterIcon = styled(TwitterI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`
+
+export const GithubIcon = styled(GithubI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`

src/components/About/constants.tsx

@@ -1,4 +1,4 @@
-import { ElementName } from '@uniswap/analytics-events'
+import { InterfaceElementName } from '@uniswap/analytics-events'
 import { DollarSign, Terminal } from 'react-feather'
 import styled from 'styled-components/macro'
 import { lightTheme } from 'theme/colors'
@@ -18,7 +18,7 @@ export const MAIN_CARDS = [
     cta: 'Trade Tokens',
     darkBackgroundImgSrc: swapCardImgSrc,
     lightBackgroundImgSrc: swapCardImgSrc,
-    elementName: ElementName.ABOUT_PAGE_SWAP_CARD,
+    elementName: InterfaceElementName.ABOUT_PAGE_SWAP_CARD,
   },
   {
     to: '/nfts',
@@ -27,7 +27,7 @@ export const MAIN_CARDS = [
     cta: 'Explore NFTs',
     darkBackgroundImgSrc: nftCardImgSrc,
     lightBackgroundImgSrc: nftCardImgSrc,
-    elementName: ElementName.ABOUT_PAGE_NFTS_CARD,
+    elementName: InterfaceElementName.ABOUT_PAGE_NFTS_CARD,
   },
 ]
 
@@ -47,7 +47,7 @@ export const MORE_CARDS = [
     lightIcon: <DollarSign color={lightTheme.textTertiary} size={48} />,
     darkIcon: <StyledCardLogo src={darkDollarImgSrc} alt="Earn" />,
     cta: 'Buy now',
-    elementName: ElementName.ABOUT_PAGE_BUY_CRYPTO_CARD,
+    elementName: InterfaceElementName.ABOUT_PAGE_BUY_CRYPTO_CARD,
   },
   {
     to: '/pool',
@@ -56,7 +56,7 @@ export const MORE_CARDS = [
     lightIcon: <StyledCardLogo src={lightArrowImgSrc} alt="Analytics" />,
     darkIcon: <StyledCardLogo src={darkArrowImgSrc} alt="Analytics" />,
     cta: 'Provide liquidity',
-    elementName: ElementName.ABOUT_PAGE_EARN_CARD,
+    elementName: InterfaceElementName.ABOUT_PAGE_EARN_CARD,
   },
   {
     to: 'https://docs.uniswap.org',
@@ -66,6 +66,6 @@ export const MORE_CARDS = [
     lightIcon: <Terminal color={lightTheme.textTertiary} size={48} />,
     darkIcon: <StyledCardLogo src={darkTerminalImgSrc} alt="Developers" />,
     cta: 'Developer docs',
-    elementName: ElementName.ABOUT_PAGE_DEV_DOCS_CARD,
+    elementName: InterfaceElementName.ABOUT_PAGE_DEV_DOCS_CARD,
   },
 ]

src/components/About/images/discord.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 71 55" xmlns="http://www.w3.org/2000/svg">
+  <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" />
+</svg>

src/components/About/images/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

src/components/About/images/twitter-safe.svg

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 32 32" role="img"  xmlns="http://www.w3.org/2000/svg">
+    <path d="M31.2746 5.92398C30.7719 6.14694 30.2551 6.33512 29.727 6.4879C30.3522 5.7808 30.8289 4.9488 31.1199 4.03835C31.1851 3.83427 31.1175 3.61089 30.9498 3.47742C30.7822 3.34385 30.5495 3.32785 30.365 3.43716C29.2434 4.10235 28.0334 4.58039 26.7647 4.85993C25.4866 3.6111 23.7508 2.90039 21.9563 2.90039C18.1684 2.90039 15.0867 5.98199 15.0867 9.76975C15.0867 10.0681 15.1056 10.3647 15.143 10.6573C10.4426 10.2446 6.07276 7.9343 3.07198 4.25337C2.96504 4.12217 2.80029 4.05146 2.63162 4.06498C2.46285 4.0782 2.31121 4.17337 2.22595 4.31964C1.61733 5.36398 1.29557 6.5584 1.29557 7.77368C1.29557 9.4289 1.88654 10.9994 2.93046 12.2265C2.61304 12.1166 2.30502 11.9792 2.01103 11.816C1.8532 11.7282 1.66058 11.7295 1.50378 11.8194C1.34687 11.9093 1.2485 12.0747 1.24437 12.2554C1.24365 12.2859 1.24365 12.3163 1.24365 12.3472C1.24365 14.8179 2.5734 17.0423 4.60644 18.2547C4.43178 18.2373 4.25722 18.212 4.0838 18.1788C3.90502 18.1447 3.72117 18.2073 3.6006 18.3437C3.47983 18.4799 3.43988 18.6699 3.49552 18.8433C4.24804 21.1927 6.18548 22.9208 8.52767 23.4477C6.58507 24.6644 4.36355 25.3017 2.03147 25.3017C1.54486 25.3017 1.05547 25.2731 0.5765 25.2165C0.338565 25.1882 0.111055 25.3287 0.0300229 25.5549C-0.0510093 25.7813 0.0348745 26.0337 0.2373 26.1634C3.23322 28.0844 6.69738 29.0997 10.2551 29.0997C17.249 29.0997 21.6242 25.8016 24.063 23.0349C27.104 19.585 28.8481 15.0186 28.8481 10.5067C28.8481 10.3182 28.8452 10.1278 28.8394 9.93812C30.0392 9.03417 31.0722 7.94018 31.9128 6.68279C32.0404 6.49182 32.0266 6.23943 31.8787 6.06364C31.731 5.88774 31.4848 5.83087 31.2746 5.92398Z" />
+</svg>

src/components/AccountDetails/TransactionSummary.tsx

@@ -14,18 +14,15 @@ import {
   CollectFeesTransactionInfo,
   CreateV3PoolTransactionInfo,
   DelegateTransactionInfo,
-  DepositLiquidityStakingTransactionInfo,
   ExactInputSwapTransactionInfo,
   ExactOutputSwapTransactionInfo,
   ExecuteTransactionInfo,
   MigrateV2LiquidityToV3TransactionInfo,
   QueueTransactionInfo,
   RemoveLiquidityV3TransactionInfo,
-  SubmitProposalTransactionInfo,
   TransactionInfo,
   TransactionType,
   VoteTransactionInfo,
-  WithdrawLiquidityStakingTransactionInfo,
   WrapTransactionInfo,
 } from '../../state/transactions/types'
 
@@ -83,7 +80,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa
   )
 }
 
-function SubmitProposalTransactionSummary(_: { info: SubmitProposalTransactionInfo }) {
+function SubmitProposalTransactionSummary() {
   return <Trans>Submit new proposal</Trans>
 }
 
@@ -175,13 +172,13 @@ function WrapSummary({ info: { chainId, currencyAmountRaw, unwrapped } }: { info
   }
 }
 
-function DepositLiquidityStakingSummary(_: { info: DepositLiquidityStakingTransactionInfo }) {
+function DepositLiquidityStakingSummary() {
   // not worth rendering the tokens since you can should no longer deposit liquidity in the staking contracts
   // todo: deprecate and delete the code paths that allow this, show user more information
   return <Trans>Deposit liquidity</Trans>
 }
 
-function WithdrawLiquidityStakingSummary(_: { info: WithdrawLiquidityStakingTransactionInfo }) {
+function WithdrawLiquidityStakingSummary() {
   return <Trans>Withdraw deposited liquidity</Trans>
 }
 
@@ -319,10 +316,10 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
       return <ClaimSummary info={info} />
 
     case TransactionType.DEPOSIT_LIQUIDITY_STAKING:
-      return <DepositLiquidityStakingSummary info={info} />
+      return <DepositLiquidityStakingSummary />
 
     case TransactionType.WITHDRAW_LIQUIDITY_STAKING:
-      return <WithdrawLiquidityStakingSummary info={info} />
+      return <WithdrawLiquidityStakingSummary />
 
     case TransactionType.SWAP:
       return <SwapSummary info={info} />
@@ -358,6 +355,6 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
       return <ExecuteSummary info={info} />
 
     case TransactionType.SUBMIT_PROPOSAL:
-      return <SubmitProposalTransactionSummary info={info} />
+      return <SubmitProposalTransactionSummary />
   }
 }

src/components/AccountDetails/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils'
+import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMaskWallet } from 'connection/utils'
 import { useCallback } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
@@ -210,14 +210,14 @@ export default function AccountDetails({
   const theme = useTheme()
   const dispatch = useAppDispatch()
 
-  const isMetaMask = getIsMetaMask()
-  const isCoinbaseWallet = getIsCoinbaseWallet()
-  const isInjectedMobileBrowser = (isMetaMask || isCoinbaseWallet) && isMobile
+  const hasMetaMaskExtension = getIsMetaMaskWallet()
+  const hasCoinbaseExtension = getIsCoinbaseWallet()
+  const isInjectedMobileBrowser = (hasMetaMaskExtension || hasCoinbaseExtension) && isMobile
 
   function formatConnectorName() {
     return (
       <WalletName>
-        <Trans>Connected with</Trans> {getConnectionName(connectionType, isMetaMask)}
+        <Trans>Connected with</Trans> {getConnectionName(connectionType, hasMetaMaskExtension)}
       </WalletName>
     )
   }
@@ -246,7 +246,7 @@ export default function AccountDetails({
                       <WalletAction
                         style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
                         onClick={() => {
-                          const walletType = getConnectionName(getConnection(connector).type, getIsMetaMask())
+                          const walletType = getConnectionName(getConnection(connector).type)
                           if (connector.deactivate) {
                             connector.deactivate()
                           } else {

src/components/AccountDetailsV2/LogoView.tsx

@@ -39,26 +39,32 @@ const getCurrency = ({ info, chainId }: { info: TransactionInfo; chainId: number
   switch (info.type) {
     case TransactionType.ADD_LIQUIDITY_V3_POOL:
     case TransactionType.REMOVE_LIQUIDITY_V3:
-    case TransactionType.CREATE_V3_POOL:
+    case TransactionType.CREATE_V3_POOL: {
       const { baseCurrencyId, quoteCurrencyId } = info
       return { currencyId0: baseCurrencyId, currencyId1: quoteCurrencyId }
-    case TransactionType.SWAP:
+    }
+    case TransactionType.SWAP: {
       const { inputCurrencyId, outputCurrencyId } = info
       return { currencyId0: inputCurrencyId, currencyId1: outputCurrencyId }
-    case TransactionType.WRAP:
+    }
+    case TransactionType.WRAP: {
       const { unwrapped } = info
       const native = info.chainId ? nativeOnChain(info.chainId) : undefined
       const base = 'ETH'
       const wrappedCurrency = native?.wrapped.address ?? 'WETH'
       return { currencyId0: unwrapped ? wrappedCurrency : base, currencyId1: unwrapped ? base : wrappedCurrency }
-    case TransactionType.COLLECT_FEES:
+    }
+    case TransactionType.COLLECT_FEES: {
       const { currencyId0, currencyId1 } = info
       return { currencyId0, currencyId1 }
-    case TransactionType.APPROVAL:
+    }
+    case TransactionType.APPROVAL: {
       return { currencyId0: info.tokenAddress, currencyId1: undefined }
-    case TransactionType.CLAIM:
+    }
+    case TransactionType.CLAIM: {
       const uniAddress = chainId ? UNI_ADDRESS[chainId] : undefined
       return { currencyId0: uniAddress, currencyId1: undefined }
+    }
     default:
       return { currencyId0: undefined, currencyId1: undefined }
   }

src/components/Charts/SparklineChart.tsx

@@ -2,7 +2,6 @@ import { SparkLineLoadingBubble } from 'components/Tokens/TokenTable/TokenRow'
 import { curveCardinal, scaleLinear } from 'd3'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
 import { PricePoint } from 'graphql/data/util'
-import { TimePeriod } from 'graphql/data/util'
 import { memo } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
 
@@ -21,18 +20,10 @@ interface SparklineChartProps {
   height: number
   tokenData: TopToken
   pricePercentChange: number | undefined | null
-  timePeriod: TimePeriod
   sparklineMap: SparklineMap
 }
 
-function _SparklineChart({
-  width,
-  height,
-  tokenData,
-  pricePercentChange,
-  timePeriod,
-  sparklineMap,
-}: SparklineChartProps) {
+function _SparklineChart({ width, height, tokenData, pricePercentChange, sparklineMap }: SparklineChartProps) {
   const theme = useTheme()
   // for sparkline
   const pricePoints = tokenData?.address ? sparklineMap[tokenData.address] : null

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -332,8 +332,8 @@ export default function SwapCurrencyInputPanel({
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
                       events={[BrowserEvent.onClick]}
-                      name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
-                      element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
+                      name={SwapEventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
+                      element={InterfaceElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >
                       <StyledBalanceMax onClick={onMax}>
                         <Trans>Max</Trans>

src/components/CurrencyInputPanel/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -315,8 +315,8 @@ export default function CurrencyInputPanel({
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
                       events={[BrowserEvent.onClick]}
-                      name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
-                      element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
+                      name={SwapEventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
+                      element={InterfaceElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >
                       <StyledBalanceMax onClick={onMax}>
                         <Trans>MAX</Trans>

src/components/ErrorBoundary/index.tsx

@@ -6,6 +6,7 @@ import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
 import { Copy } from 'react-feather'
 import styled from 'styled-components/macro'
+import { isSentryEnabled } from 'utils/env'
 
 import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
 import { Column } from '../Column'
@@ -85,6 +86,7 @@ const CodeTitle = styled.div`
   display: flex;
   gap: 14px;
   align-items: center;
+  justify-content: space-between;
   word-break: break-word;
 `
 
@@ -92,49 +94,87 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
   const [isExpanded, setExpanded] = useState(false)
   const isMobile = useIsMobile()
 
-  const errorId = eventId || 'unknown-error'
-
   // @todo: ThemedText components should be responsive by default
   const [Title, Description] = isMobile
     ? [ThemedText.HeadlineSmall, ThemedText.BodySmall]
     : [ThemedText.HeadlineLarge, ThemedText.BodySecondary]
 
+  const showErrorId = isSentryEnabled() && eventId
+
+  const showMoreButton = (
+    <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
+      <ThemedText.Link color="textSecondary">
+        <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
+      </ThemedText.Link>
+      <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
+    </ShowMoreButton>
+  )
+
+  const errorDetails = error.stack || error.message
+
   return (
     <FallbackWrapper>
       <BodyWrapper>
         <Column gap="xl">
-          <Column gap="sm">
-            <Title textAlign="center">
-              <Trans>Something went wrong</Trans>
-            </Title>
-            <Description textAlign="center" color="textSecondary">
-              <Trans>
-                Sorry, an error occured while processing your request. If you request support, be sure to provide your
-                error ID.
-              </Trans>
-            </Description>
-          </Column>
-          <CodeBlockWrapper>
-            <CodeTitle>
-              <ThemedText.SubHeader fontWeight={500}>Error ID: {errorId}</ThemedText.SubHeader>
-              <CopyToClipboard toCopy={errorId}>
-                <CopyIcon />
-              </CopyToClipboard>
-            </CodeTitle>
-            <Separator />
-            {isExpanded && (
-              <>
-                <Code>{error.stack}</Code>
+          {showErrorId ? (
+            <>
+              <Column gap="sm">
+                <Title textAlign="center">
+                  <Trans>Something went wrong</Trans>
+                </Title>
+                <Description textAlign="center" color="textSecondary">
+                  <Trans>
+                    Sorry, an error occured while processing your request. If you request support, be sure to provide
+                    your error ID.
+                  </Trans>
+                </Description>
+              </Column>
+              <CodeBlockWrapper>
+                <CodeTitle>
+                  <ThemedText.SubHeader fontWeight={500}>
+                    <Trans>Error ID: {eventId}</Trans>
+                  </ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={eventId}>
+                    <CopyIcon />
+                  </CopyToClipboard>
+                </CodeTitle>
                 <Separator />
-              </>
-            )}
-            <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
-              <ThemedText.Link color="textSecondary">
-                <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
-              </ThemedText.Link>
-              <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
-            </ShowMoreButton>
-          </CodeBlockWrapper>
+                {isExpanded && (
+                  <>
+                    <Code>{errorDetails}</Code>
+                    <Separator />
+                  </>
+                )}
+                {showMoreButton}
+              </CodeBlockWrapper>
+            </>
+          ) : (
+            <>
+              <Column gap="sm">
+                <Title textAlign="center">
+                  <Trans>Something went wrong</Trans>
+                </Title>
+                <Description textAlign="center" color="textSecondary">
+                  <Trans>
+                    Sorry, an error occured while processing your request. If you request support, be sure to copy the
+                    details of this error.
+                  </Trans>
+                </Description>
+              </Column>
+              <CodeBlockWrapper>
+                <CodeTitle>
+                  <ThemedText.SubHeader fontWeight={500}>Error details</ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={errorDetails}>
+                    <CopyIcon />
+                  </CopyToClipboard>
+                </CodeTitle>
+                <Separator />
+                <Code>{errorDetails.split('\n').slice(0, isExpanded ? undefined : 4)}</Code>
+                <Separator />
+                {showMoreButton}
+              </CodeBlockWrapper>
+            </>
+          )}
           <StretchedRow>
             <SmallButtonPrimary onClick={() => window.location.reload()}>
               <Trans>Reload the app</Trans>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,5 +1,7 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
+import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
+import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { Permit2Variant, usePermit2Flag } from 'featureFlags/flags/permit2'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
@@ -164,7 +166,7 @@ function FeatureFlagGroup({ name, children }: PropsWithChildren<{ name: string }
   )
 }
 
-function FeatureFlagOption({ variant, featureFlag, value, label }: FeatureFlagProps) {
+function FeatureFlagOption({ variant, featureFlag, label }: FeatureFlagProps) {
   const updateFlag = useUpdateFlag()
   const [count, setCount] = useState(0)
   const featureFlags = useAtomValue(featureFlagSettings)
@@ -215,6 +217,18 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.fiatOnramp}
         label="Fiat on-ramp"
       />
+      <FeatureFlagOption
+        variant={NftListV2Variant}
+        value={useNftListV2Flag()}
+        featureFlag={FeatureFlag.nftListV2}
+        label="NFT Listing Page v2"
+      />
+      <FeatureFlagOption
+        variant={PayWithAnyTokenVariant}
+        value={usePayWithAnyTokenFlag()}
+        featureFlag={FeatureFlag.payWithAnyToken}
+        label="Pay With Any Token"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/FiatOnrampAnnouncement/index.tsx

@@ -1,15 +1,15 @@
 import { Trans } from '@lingui/macro'
+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { InterfaceEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import fiatMaskUrl from 'assets/svg/fiat_mask.svg'
 import { BaseVariant } from 'featureFlags'
 import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { X } from 'react-feather'
-import { useDispatch } from 'react-redux'
 import { useToggleWalletDropdown } from 'state/application/hooks'
 import { useAppSelector } from 'state/hooks'
 import { useFiatOnrampAck } from 'state/user/hooks'
-import { dismissFiatOnramp } from 'state/user/reducer'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { isMobile } from 'utils/userAgent'
@@ -93,25 +93,29 @@ const Body = styled(ThemedText.BodySmall)`
   position: relative;
 `
 
-const MAX_RENDER_COUNT = 3
+const ANNOUNCEMENT_RENDERED = 'FiatOnrampAnnouncement-rendered'
+const ANNOUNCEMENT_DISMISSED = 'FiatOnrampAnnouncement-dismissed'
 
+const MAX_RENDER_COUNT = 3
 export function FiatOnrampAnnouncement() {
   const { account } = useWeb3React()
   const [acks, acknowledge] = useFiatOnrampAck()
-  const fiatOnrampDismissed = useAppSelector((state) => state.user.fiatOnrampDismissed)
-
+  const [localClose, setLocalClose] = useState(false)
   useEffect(() => {
-    acknowledge({ renderCount: acks?.renderCount + 1 })
-    // The dependency list is empty so this is only run once on mount
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+    if (!sessionStorage.getItem(ANNOUNCEMENT_RENDERED)) {
+      acknowledge({ renderCount: acks?.renderCount + 1 })
+      sessionStorage.setItem(ANNOUNCEMENT_RENDERED, 'true')
+    }
+  }, [acknowledge, acks])
 
-  const dispatch = useDispatch()
   const handleClose = useCallback(() => {
-    dispatch(dismissFiatOnramp())
-  }, [dispatch])
+    setLocalClose(true)
+    localStorage.setItem(ANNOUNCEMENT_DISMISSED, 'true')
+  }, [])
 
   const toggleWalletDropdown = useToggleWalletDropdown()
   const handleClick = useCallback(() => {
+    sendAnalyticsEvent(InterfaceEventName.FIAT_ONRAMP_BANNER_CLICKED)
     toggleWalletDropdown()
     acknowledge({ user: true })
   }, [acknowledge, toggleWalletDropdown])
@@ -123,17 +127,18 @@ export function FiatOnrampAnnouncement() {
     !account ||
     acks?.user ||
     fiatOnrampFlag === BaseVariant.Control ||
-    fiatOnrampDismissed ||
+    localStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
     acks?.renderCount >= MAX_RENDER_COUNT ||
     isMobile ||
-    openModal !== null
+    openModal !== null ||
+    localClose
   ) {
     return null
   }
   return (
     <ArrowWrapper>
       <Arrow />
-      <CloseIcon onClick={handleClose} />
+      <CloseIcon onClick={handleClose} data-testid="FiatOnrampAnnouncement-close" />
       <Wrapper onClick={handleClick}>
         <Header>
           <Trans>Buy crypto</Trans>

src/components/FiatOnrampModal/index.tsx

@@ -10,7 +10,7 @@ import Circle from '../../assets/images/blue-loader.svg'
 import Modal from '../Modal'
 
 const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.backgroundSurface};
+  background-color: ${({ theme }) => theme.white};
   border-radius: 20px;
   box-shadow: ${({ theme }) => theme.deepShadow};
   display: flex;
@@ -67,7 +67,7 @@ const MOONPAY_SUPPORTED_CURRENCY_CODES = [
 export default function FiatOnrampModal() {
   const { account } = useWeb3React()
   const theme = useTheme()
-  const closeModal = useCloseModal(ApplicationModal.FIAT_ONRAMP)
+  const closeModal = useCloseModal()
   const fiatOnrampModalOpen = useModalIsOpen(ApplicationModal.FIAT_ONRAMP)
 
   const [signedIframeUrl, setSignedIframeUrl] = useState<string | null>(null)

src/components/Modal/index.tsx

@@ -17,6 +17,9 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boo
 
     display: flex;
     align-items: center;
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      align-items: flex-end;
+    }
     overflow-y: ${({ $scrollOverlay }) => $scrollOverlay && 'scroll'};
     justify-content: center;
 
@@ -27,7 +30,6 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boo
 type StyledDialogProps = {
   $minHeight?: number | false
   $maxHeight?: number
-  $isBottomSheet?: boolean
   $scrollOverlay?: boolean
   $hideBorder?: boolean
   $maxWidth: number
@@ -40,14 +42,12 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
   &[data-reach-dialog-content] {
     margin: auto;
     background-color: ${({ theme }) => theme.backgroundSurface};
-    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.backgroundOutline}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
     overflow-x: hidden;
-
-    align-self: ${({ $isBottomSheet }) => $isBottomSheet && 'flex-end'};
     max-width: ${({ $maxWidth }) => $maxWidth}px;
     ${({ $maxHeight }) =>
       $maxHeight &&
@@ -61,22 +61,17 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
       `}
     display: ${({ $scrollOverlay }) => ($scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
-    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.md}px) {
       width: 65vw;
-      margin: auto;
-    `}
-    ${({ theme, $isBottomSheet }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-      width:  85vw;
-      ${
-        $isBottomSheet &&
-        css`
-          width: 100vw;
-          border-radius: 20px;
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        `
-      }
-    `}
+    }
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      margin: 0;
+      width: 100vw;
+      border-radius: 20px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 `
 
@@ -91,7 +86,6 @@ interface ModalProps {
   children?: React.ReactNode
   $scrollOverlay?: boolean
   hideBorder?: boolean
-  isBottomSheet?: boolean
 }
 
 export default function Modal({
@@ -104,7 +98,6 @@ export default function Modal({
   children,
   onSwipe = onDismiss,
   $scrollOverlay,
-  isBottomSheet = isMobile,
   hideBorder = false,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, {
@@ -148,7 +141,6 @@ export default function Modal({
                 aria-label="dialog"
                 $minHeight={minHeight}
                 $maxHeight={maxHeight}
-                $isBottomSheet={isBottomSheet}
                 $scrollOverlay={$scrollOverlay}
                 $hideBorder={hideBorder}
                 $maxWidth={maxWidth}

src/components/NavBar/ChainSelector.tsx

@@ -93,6 +93,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
         gap="8"
         className={styles.ChainSelector}
         background={isOpen ? 'accentActiveSoft' : 'none'}
+        data-testid="chain-selector"
         onClick={() => setIsOpen(!isOpen)}
       >
         {!isSupported ? (

src/components/NavBar/ChainSelectorRow.tsx

@@ -76,7 +76,7 @@ export default function ChainSelectorRow({
   const theme = useTheme()
 
   return (
-    <Container onClick={() => onSelectChain(targetChain)}>
+    <Container onClick={() => onSelectChain(targetChain)} data-testid={`chain-selector-option-${label.toLowerCase()}`}>
       <Logo src={logoUrl} alt={label} />
       <Label>{label}</Label>
       {isPending && <ApproveText>Approve in wallet</ApproveText>}

src/components/NavBar/SearchBar.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName, SectionName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName, InterfaceSectionName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
 import useDebounce from 'hooks/useDebounce'
 import { useIsNftPage } from 'hooks/useIsNftPage'
@@ -109,7 +109,7 @@ export const SearchBar = () => {
 
   const isMobileOrTablet = isMobile || isTablet
 
-  const trace = useTrace({ section: SectionName.NAVBAR_SEARCH })
+  const trace = useTrace({ section: InterfaceSectionName.NAVBAR_SEARCH })
 
   const navbarSearchEventProperties = {
     navbar_search_input_text: debouncedSearchValue,
@@ -146,8 +146,9 @@ export const SearchBar = () => {
   }, [handleKeyPress, inputRef])
 
   return (
-    <Trace section={SectionName.NAVBAR_SEARCH}>
+    <Trace section={InterfaceSectionName.NAVBAR_SEARCH}>
       <Box
+        data-cy="search-bar"
         position={{ sm: 'fixed', md: 'absolute', xl: 'relative' }}
         width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
@@ -178,8 +179,8 @@ export const SearchBar = () => {
           </Box>
           <TraceEvent
             events={[BrowserEvent.onFocus]}
-            name={EventName.NAVBAR_SEARCH_SELECTED}
-            element={ElementName.NAVBAR_SEARCH_INPUT}
+            name={InterfaceEventName.NAVBAR_SEARCH_SELECTED}
+            element={InterfaceElementName.NAVBAR_SEARCH_INPUT}
             properties={{ ...trace }}
           >
             <Trans
@@ -187,12 +188,15 @@ export const SearchBar = () => {
               render={({ translation }) => (
                 <Box
                   as="input"
+                  data-cy="search-bar-input"
                   placeholder={translation as string}
                   onChange={(event: ChangeEvent<HTMLInputElement>) => {
                     !isOpen && toggleOpen()
                     setSearchValue(event.target.value)
                   }}
-                  onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
+                  onBlur={() =>
+                    sendAnalyticsEvent(InterfaceEventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)
+                  }
                   className={`${styles.searchBarInput} ${styles.searchContentLeftAlign}`}
                   value={searchValue}
                   ref={inputRef}

src/components/NavBar/SearchBarDropdown.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { useTrace } from '@uniswap/analytics'
-import { NavBarSearchTypes, SectionName } from '@uniswap/analytics-events'
+import { InterfaceSectionName, NavBarSearchTypes } from '@uniswap/analytics-events'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -46,7 +46,7 @@ const SearchBarDropdownSection = ({
   eventProperties,
 }: SearchBarDropdownSectionProps) => {
   return (
-    <Column gap="12">
+    <Column gap="12" data-cy="searchbar-dropdown">
       <Row paddingX="16" paddingY="4" gap="8" color="gray300" className={subheadSmall} style={{ lineHeight: '20px' }}>
         {headerIcon ? headerIcon : null}
         <Box>{header}</Box>
@@ -202,7 +202,7 @@ export const SearchBarDropdown = ({
     (isNFTPage && (hasVerifiedCollection || !hasVerifiedToken)) ||
     (!isNFTPage && !hasVerifiedToken && hasVerifiedCollection)
 
-  const trace = JSON.stringify(useTrace({ section: SectionName.NAVBAR_SEARCH }))
+  const trace = JSON.stringify(useTrace({ section: InterfaceSectionName.NAVBAR_SEARCH }))
 
   useEffect(() => {
     const eventProperties = { total_suggestions: totalSuggestions, query_text: queryText, ...JSON.parse(trace) }

src/components/NavBar/SuggestionRow.tsx

@@ -1,5 +1,5 @@
 import { sendAnalyticsEvent } from '@uniswap/analytics'
-import { EventName } from '@uniswap/analytics-events'
+import { InterfaceEventName } from '@uniswap/analytics-events'
 import { formatUSDPrice } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import clsx from 'clsx'
@@ -71,7 +71,7 @@ export const CollectionRow = ({
   const handleClick = useCallback(() => {
     addToSearchHistory(collection)
     toggleOpen()
-    sendAnalyticsEvent(EventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
+    sendAnalyticsEvent(InterfaceEventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
   }, [addToSearchHistory, collection, toggleOpen, eventProperties])
 
   useEffect(() => {
@@ -157,7 +157,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
   const handleClick = useCallback(() => {
     addToSearchHistory(token)
     toggleOpen()
-    sendAnalyticsEvent(EventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
+    sendAnalyticsEvent(InterfaceEventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
   }, [addToSearchHistory, toggleOpen, token, eventProperties])
 
   const [bridgedAddress, bridgedChain, L2Icon] = useBridgedAddress(token)
@@ -181,6 +181,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
 
   return (
     <Link
+      data-cy={`searchbar-token-row-${token.symbol}`}
       to={tokenDetailsPath}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}

src/components/NavBar/index.tsx

@@ -1,11 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
+import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
+import { useProfilePageState } from 'nft/hooks'
+import { ProfilePageStateType } from 'nft/types'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
@@ -79,6 +82,8 @@ export const PageTabs = () => {
 
 const Navbar = () => {
   const isNftPage = useIsNftPage()
+  const sellPageState = useProfilePageState((state) => state.state)
+  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const navigate = useNavigate()
 
   return (
@@ -120,7 +125,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {isNftPage && <Bag />}
+              {isNftPage && (!isNftListV2 || sellPageState !== ProfilePageStateType.LISTING) && <Bag />}
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />

src/components/NavigationTabs/index.tsx

@@ -76,7 +76,7 @@ export function AddRemoveTabs({
   // detect if back should redirect to v3 or v2 pool page
   const poolLink = location.pathname.includes('add/v2')
     ? '/pool/v2'
-    : '/pool' + (!!positionID ? `/${positionID.toString()}` : '')
+    : '/pool' + (positionID ? `/${positionID.toString()}` : '')
 
   return (
     <Tabs>

src/components/Polling/ChainConnectivityWarning.tsx

@@ -1,81 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
-import { AlertTriangle } from 'react-feather'
-import styled from 'styled-components/macro'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-
-const BodyRow = styled.div`
-  color: ${({ theme }) => theme.textPrimary};
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-`
-const CautionTriangle = styled(AlertTriangle)`
-  color: ${({ theme }) => theme.accentWarning};
-`
-const Link = styled(ExternalLink)`
-  color: ${({ theme }) => theme.black};
-  text-decoration: underline;
-`
-const TitleRow = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 8px;
-`
-const TitleText = styled.div`
-  color: ${({ theme }) => theme.textPrimary};
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0px 12px;
-`
-const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  bottom: 60px;
-  display: none;
-  max-width: 348px;
-  padding: 16px 20px;
-  position: fixed;
-  right: 16px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium}px) {
-    display: block;
-  }
-`
-
-export function ChainConnectivityWarning() {
-  const { chainId } = useWeb3React()
-  const info = getChainInfoOrDefault(chainId)
-  const label = info?.label
-
-  return (
-    <Wrapper>
-      <TitleRow>
-        <CautionTriangle />
-        <TitleText>
-          <Trans>Network Warning</Trans>
-        </TitleText>
-      </TitleRow>
-      <BodyRow>
-        {chainId === SupportedChainId.MAINNET ? (
-          <Trans>You may have lost your network connection.</Trans>
-        ) : (
-          <Trans>{label} might be down right now, or you may have lost your network connection.</Trans>
-        )}{' '}
-        {(info as L2ChainInfo).statusPage !== undefined && (
-          <span>
-            <Trans>Check network status</Trans>{' '}
-            <Link href={(info as L2ChainInfo).statusPage || ''}>
-              <Trans>here.</Trans>
-            </Link>
-          </span>
-        )}
-      </BodyRow>
-    </Wrapper>
-  )
-}

src/components/Polling/index.tsx

@@ -1,199 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { RowFixed } from 'components/Row'
-import { getChainInfo } from 'constants/chainInfo'
-import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
-import useGasPrice from 'hooks/useGasPrice'
-import { useIsLandingPage } from 'hooks/useIsLandingPage'
-import { useIsNftPage } from 'hooks/useIsNftPage'
-import useMachineTimeMs from 'hooks/useMachineTime'
-import JSBI from 'jsbi'
-import useBlockNumber from 'lib/hooks/useBlockNumber'
-import ms from 'ms.macro'
-import { useEffect, useMemo, useState } from 'react'
-import styled, { keyframes } from 'styled-components/macro'
-import { ExternalLink, ThemedText } from 'theme'
-import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
-
-import { MouseoverTooltip } from '../Tooltip'
-import { ChainConnectivityWarning } from './ChainConnectivityWarning'
-
-const StyledPolling = styled.div`
-  align-items: center;
-  bottom: 0;
-  color: ${({ theme }) => theme.textTertiary};
-  display: none;
-  padding: 1rem;
-  position: fixed;
-  right: 0;
-  transition: 250ms ease color;
-
-  a {
-    color: unset;
-  }
-  a:hover {
-    color: unset;
-    text-decoration: none;
-  }
-
-  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
-    display: flex;
-  }
-`
-const StyledPollingBlockNumber = styled(ThemedText.DeprecatedSmall)<{
-  breathe: boolean
-  hovering: boolean
-  warning: boolean
-}>`
-  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
-  transition: opacity 0.25s ease;
-  opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
-  :hover {
-    opacity: 1;
-  }
-
-  a {
-    color: unset;
-  }
-  a:hover {
-    text-decoration: none;
-    color: unset;
-  }
-`
-const StyledPollingDot = styled.div<{ warning: boolean }>`
-  width: 8px;
-  height: 8px;
-  min-height: 8px;
-  min-width: 8px;
-  border-radius: 50%;
-  position: relative;
-  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
-  transition: 250ms ease background-color;
-`
-
-const StyledGasDot = styled.div`
-  background-color: ${({ theme }) => theme.textTertiary};
-  border-radius: 50%;
-  height: 4px;
-  min-height: 4px;
-  min-width: 4px;
-  position: relative;
-  transition: 250ms ease background-color;
-  width: 4px;
-`
-
-const rotate360 = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const Spinner = styled.div<{ warning: boolean }>`
-  animation: ${rotate360} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
-  transform: translateZ(0);
-
-  border-top: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
-  background: transparent;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  position: relative;
-  transition: 250ms ease border-color;
-
-  left: -3px;
-  top: -3px;
-`
-
-const DEFAULT_MS_BEFORE_WARNING = ms`10m`
-const NETWORK_HEALTH_CHECK_MS = ms`10s`
-
-export default function Polling() {
-  const { chainId } = useWeb3React()
-  const blockNumber = useBlockNumber()
-  const [isMounting, setIsMounting] = useState(false)
-  const [isHover, setIsHover] = useState(false)
-  const machineTime = useMachineTimeMs(NETWORK_HEALTH_CHECK_MS)
-  const blockTime = useCurrentBlockTimestamp()
-  const isNftPage = useIsNftPage()
-  const isLandingPage = useIsLandingPage()
-
-  const ethGasPrice = useGasPrice()
-  const priceGwei = ethGasPrice ? JSBI.divide(ethGasPrice, JSBI.BigInt(1000000000)) : undefined
-
-  const waitMsBeforeWarning =
-    (chainId ? getChainInfo(chainId)?.blockWaitMsBeforeWarning : DEFAULT_MS_BEFORE_WARNING) ?? DEFAULT_MS_BEFORE_WARNING
-
-  const warning = Boolean(!!blockTime && machineTime - blockTime.mul(1000).toNumber() > waitMsBeforeWarning)
-
-  useEffect(
-    () => {
-      if (!blockNumber) {
-        return
-      }
-
-      setIsMounting(true)
-      const mountingTimer = setTimeout(() => setIsMounting(false), 1000)
-
-      // this will clear Timeout when component unmount like in willComponentUnmount
-      return () => {
-        clearTimeout(mountingTimer)
-      }
-    },
-    [blockNumber] //useEffect will run only one time
-    //if you pass a value to array, like this [data] than clearTimeout will run every time this value changes (useEffect re-run)
-  )
-
-  //TODO - chainlink gas oracle is really slow. Can we get a better data source?
-
-  const blockExternalLinkHref = useMemo(() => {
-    if (!chainId || !blockNumber) return ''
-    return getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK)
-  }, [blockNumber, chainId])
-
-  if (isNftPage || isLandingPage) {
-    return null
-  }
-
-  return (
-    <RowFixed>
-      <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
-        <ExternalLink href="https://etherscan.io/gastracker">
-          {!!priceGwei && (
-            <RowFixed style={{ marginRight: '8px' }}>
-              <ThemedText.DeprecatedMain fontSize="11px" mr="8px">
-                <MouseoverTooltip
-                  text={
-                    <Trans>
-                      The current fast gas amount for sending a transaction on L1. Gas fees are paid in Ethereum&apos;s
-                      native currency Ether (ETH) and denominated in GWEI.
-                    </Trans>
-                  }
-                >
-                  {priceGwei.toString()} <Trans>gwei</Trans>
-                </MouseoverTooltip>
-              </ThemedText.DeprecatedMain>
-              <StyledGasDot />
-            </RowFixed>
-          )}
-        </ExternalLink>
-        <StyledPollingBlockNumber breathe={isMounting} hovering={isHover} warning={warning}>
-          <ExternalLink href={blockExternalLinkHref}>
-            <MouseoverTooltip
-              text={<Trans>The most recent block number on this network. Prices update on every block.</Trans>}
-            >
-              {blockNumber}&ensp;
-            </MouseoverTooltip>
-          </ExternalLink>
-        </StyledPollingBlockNumber>
-        <StyledPollingDot warning={warning}>{isMounting && <Spinner warning={warning} />}</StyledPollingDot>{' '}
-      </StyledPolling>
-      {warning && <ChainConnectivityWarning />}
-    </RowFixed>
-  )
-}

src/components/PositionListItem/index.tsx

@@ -232,8 +232,12 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
               <Trans>Min: </Trans>
             </ExtentsText>
             <Trans>
-              {formatTickPrice(priceLower, tickAtLimit, Bound.LOWER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
-              per <HoverInlineText text={currencyBase?.symbol ?? ''} />
+              {formatTickPrice({
+                price: priceLower,
+                atLimit: tickAtLimit,
+                direction: Bound.LOWER,
+              })}{' '}
+              <HoverInlineText text={currencyQuote?.symbol} /> per <HoverInlineText text={currencyBase?.symbol ?? ''} />
             </Trans>
           </RangeText>{' '}
           <HideSmall>
@@ -247,8 +251,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
               <Trans>Max:</Trans>
             </ExtentsText>
             <Trans>
-              {formatTickPrice(priceUpper, tickAtLimit, Bound.UPPER)} <HoverInlineText text={currencyQuote?.symbol} />{' '}
-              per <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
+              {formatTickPrice({
+                price: priceUpper,
+                atLimit: tickAtLimit,
+                direction: Bound.UPPER,
+              })}{' '}
+              <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
+              <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
             </Trans>
           </RangeText>
         </RangeLineItem>

src/components/PositionPreview/index.tsx

@@ -125,11 +125,13 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Min Price</Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
-                priceLower,
-                ticksAtLimit,
-                Bound.LOWER
-              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">
+                {formatTickPrice({
+                  price: priceLower,
+                  atLimit: ticksAtLimit,
+                  direction: Bound.LOWER,
+                })}
+              </ThemedText.DeprecatedMediumHeader>
               <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
@@ -146,11 +148,13 @@ export const PositionPreview = ({
               <ThemedText.DeprecatedMain fontSize="12px">
                 <Trans>Max Price</Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedMediumHeader textAlign="center">{`${formatTickPrice(
-                priceUpper,
-                ticksAtLimit,
-                Bound.UPPER
-              )}`}</ThemedText.DeprecatedMediumHeader>
+              <ThemedText.DeprecatedMediumHeader textAlign="center">
+                {formatTickPrice({
+                  price: priceUpper,
+                  atLimit: ticksAtLimit,
+                  direction: Bound.UPPER,
+                })}
+              </ThemedText.DeprecatedMediumHeader>
               <ThemedText.DeprecatedMain textAlign="center" fontSize="12px">
                 <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}

src/components/SearchModal/CommonBases.tsx

@@ -1,5 +1,5 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { Currency } from '@uniswap/sdk-core'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
@@ -70,9 +70,9 @@ export default function CommonBases({
           return (
             <TraceEvent
               events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
-              name={EventName.TOKEN_SELECTED}
+              name={InterfaceEventName.TOKEN_SELECTED}
               properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
-              element={ElementName.COMMON_BASES_CURRENCY_BUTTON}
+              element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON}
               key={currencyId(currency)}
             >
               <BaseWrapper

src/components/SearchModal/CurrencyList/index.tsx

@@ -1,5 +1,5 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
@@ -131,9 +131,9 @@ export function CurrencyRow({
   return (
     <TraceEvent
       events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
-      name={EventName.TOKEN_SELECTED}
+      name={InterfaceEventName.TOKEN_SELECTED}
       properties={{ is_imported_by_user: customAdded, ...eventProperties }}
-      element={ElementName.TOKEN_SELECTOR_ROW}
+      element={InterfaceElementName.TOKEN_SELECTOR_ROW}
     >
       <MenuItem
         tabIndex={0}

src/components/SearchModal/CurrencySearch.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
-import { EventName, ModalName } from '@uniswap/analytics-events'
+import { InterfaceEventName, InterfaceModalName } from '@uniswap/analytics-events'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
@@ -181,7 +181,11 @@ export function CurrencySearch({
 
   return (
     <ContentWrapper>
-      <Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
+      <Trace
+        name={InterfaceEventName.TOKEN_SELECTOR_OPENED}
+        modal={InterfaceModalName.TOKEN_SELECTOR}
+        shouldLogImpression
+      >
         <PaddedColumn gap="16px">
           <RowBetween>
             <Text fontWeight={500} fontSize={16}>

src/components/Toggle/index.tsx

@@ -51,7 +51,7 @@ const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInit
     ${({ isActive, isInitialToggleLoad }) => (isInitialToggleLoad ? 'none' : isActive ? turnOnToggle : turnOffToggle)}
     ease-in;
   background: ${({ theme, bgColor, isActive }) =>
-    isActive ? bgColor ?? theme.accentAction : !!bgColor ? theme.deprecated_bg4 : theme.textTertiary};
+    isActive ? bgColor ?? theme.accentAction : bgColor ? theme.deprecated_bg4 : theme.textTertiary};
   border-radius: 50%;
   height: 24px;
   :hover {

src/components/TokenSafety/TokenSafetyIcon.tsx

@@ -28,7 +28,7 @@ export default function TokenSafetyIcon({ warning }: { warning: Warning | null }
     case WARNING_LEVEL.BLOCKED:
       return (
         <WarningContainer>
-          <BlockedIcon strokeWidth={2.5} />
+          <BlockedIcon data-cy="blocked-icon" strokeWidth={2.5} />
         </WarningContainer>
       )
     case WARNING_LEVEL.UNKNOWN:

src/components/TokenSafety/TokenSafetyLabel.tsx

@@ -1,14 +1,14 @@
 import { WARNING_LEVEL } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
+import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWarningColor'
 import { ReactNode } from 'react'
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 
-const Label = styled.div<{ color: string }>`
+const Label = styled.div<{ color: string; backgroundColor: string }>`
   padding: 4px 4px;
   font-size: 12px;
-  background-color: ${({ color }) => color + '1F'};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: 8px;
   color: ${({ color }) => color};
   display: inline-flex;
@@ -28,7 +28,7 @@ type TokenWarningLabelProps = {
 }
 export default function TokenSafetyLabel({ level, canProceed, children }: TokenWarningLabelProps) {
   return (
-    <Label color={useTokenWarningColor(level)}>
+    <Label color={useTokenWarningTextColor(level)} backgroundColor={useTokenWarningColor(level)}>
       <Title marginRight="5px">{children}</Title>
       {canProceed ? <AlertTriangle strokeWidth={2.5} size="14px" /> : <Slash strokeWidth={2.5} size="14px" />}
     </Label>

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -1,15 +1,15 @@
 import { Trans } from '@lingui/macro'
 import { getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
+import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWarningColor'
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
 
-const Label = styled.div<{ color: string }>`
+const Label = styled.div<{ color: string; backgroundColor: string }>`
   width: 100%;
   padding: 12px 20px 16px;
-  background-color: ${({ color }) => color + '1F'};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: 16px;
   color: ${({ color }) => color};
 `
@@ -39,17 +39,18 @@ const StyledLink = styled(ExternalLink)`
   font-weight: 700;
 `
 
-type TokenWarningMessageProps = {
+type TokenSafetyMessageProps = {
   warning: Warning
   tokenAddress: string
 }
 
-export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarningMessageProps) {
-  const color = useTokenWarningColor(warning.level)
+export default function TokenSafetyMessage({ warning, tokenAddress }: TokenSafetyMessageProps) {
+  const backgroundColor = useTokenWarningColor(warning.level)
+  const textColor = useTokenWarningTextColor(warning.level)
   const { heading, description } = getWarningCopy(warning)
 
   return (
-    <Label color={color}>
+    <Label data-cy="token-safety-message" color={textColor} backgroundColor={backgroundColor}>
       <TitleRow>
         {warning.canProceed ? <AlertTriangle size="16px" /> : <Slash size="16px" />}
         <Title marginLeft="7px">{warning.message}</Title>

src/components/Tokens/TokenDetails/About.tsx

@@ -1,4 +1,6 @@
 import { Trans } from '@lingui/macro'
+import { SupportedChainId } from '@uniswap/sdk-core'
+import { getChainInfo } from 'constants/chainInfo'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
@@ -65,19 +67,22 @@ const ResourcesContainer = styled.div`
 
 type AboutSectionProps = {
   address: string
+  chainId: SupportedChainId
   description?: string | null | undefined
   homepageUrl?: string | null | undefined
   twitterName?: string | null | undefined
 }
 
-export function AboutSection({ address, description, homepageUrl, twitterName }: AboutSectionProps) {
+export function AboutSection({ address, chainId, description, homepageUrl, twitterName }: AboutSectionProps) {
   const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(true)
   const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT
 
   const tokenDescription = shouldTruncate && isDescriptionTruncated ? truncateDescription(description) : description
 
+  const baseExplorerUrl = getChainInfo(chainId).explorer
+
   return (
-    <AboutContainer>
+    <AboutContainer data-testid="token-details-about-section">
       <AboutHeader>
         <Trans>About</Trans>
       </AboutHeader>
@@ -98,8 +103,11 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
       <ThemedText.SubHeaderSmall>
         <Trans>Links</Trans>
       </ThemedText.SubHeaderSmall>
-      <ResourcesContainer>
-        <Resource name="Etherscan" link={`https://etherscan.io/address/${address}`} />
+      <ResourcesContainer data-cy="resources-container">
+        <Resource
+          name={chainId === SupportedChainId.MAINNET ? 'Etherscan' : 'Block Explorer'}
+          link={`${baseExplorerUrl}${address === 'NATIVE' ? '' : 'address/' + address}`}
+        />
         <Resource name="More analytics" link={`https://info.uniswap.org/#/tokens/${address}`} />
         {homepageUrl && <Resource name="Website" link={homepageUrl} />}
         {twitterName && <Resource name="Twitter" link={`https://twitter.com/${twitterName}`} />}

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,11 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
-import { Currency } from '@uniswap/sdk-core'
+import { Currency, SupportedChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import { getChainInfo } from 'constants/chainInfo'
+import { isSupportedChain } from 'constants/chains'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
+import { ThemedText } from 'theme'
 
 const BalancesCard = styled.div`
   box-shadow: ${({ theme }) => theme.shallowShadow};
@@ -14,9 +17,7 @@ const BalancesCard = styled.div`
   border-radius: 16px;
   color: ${({ theme }) => theme.textPrimary};
   display: none;
-  font-size: 12px;
   height: fit-content;
-  line-height: 16px;
   padding: 20px;
   width: 100%;
 
@@ -35,33 +36,65 @@ const BalanceRow = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
-  font-size: 20px;
-  justify-content: space-between;
-  line-height: 28px;
-  margin-top: 12px;
+  margin-top: 20px;
 `
 const BalanceItem = styled.div`
   display: flex;
   align-items: center;
 `
 
+const BalanceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 8px;
+  flex: 1;
+`
+
+const BalanceAmountsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const StyledNetworkLabel = styled.div`
+  color: ${({ color }) => color};
+  font-size: 12px;
+  line-height: 16px;
+`
+
 export default function BalanceSummary({ token }: { token: Currency }) {
-  const { account } = useWeb3React()
+  const { account, chainId } = useWeb3React()
+  const theme = useTheme()
+  const { label, color } = getChainInfo(isSupportedChain(chainId) ? chainId : SupportedChainId.MAINNET)
   const balance = useCurrencyBalance(account, token)
   const formattedBalance = formatCurrencyAmount(balance, NumberType.TokenNonTx)
   const formattedUsdValue = formatCurrencyAmount(useStablecoinValue(balance), NumberType.FiatTokenStats)
 
-  if (!account || !balance) return null
+  if (!account || !balance) {
+    return null
+  }
   return (
     <BalancesCard>
       <BalanceSection>
-        <Trans>Your balance</Trans>
+        <ThemedText.SubHeaderSmall color={theme.textPrimary}>
+          <Trans>Your balance on {label}</Trans>
+        </ThemedText.SubHeaderSmall>
         <BalanceRow>
-          <BalanceItem>
-            <CurrencyLogo currency={token} />
-            &nbsp;{formattedBalance} {token.symbol}
-          </BalanceItem>
-          <BalanceItem>{formattedUsdValue}</BalanceItem>
+          <CurrencyLogo currency={token} size="2rem" />
+          <BalanceContainer>
+            <BalanceAmountsContainer>
+              <BalanceItem>
+                <ThemedText.SubHeader>
+                  {formattedBalance} {token.symbol}
+                </ThemedText.SubHeader>
+              </BalanceItem>
+              <BalanceItem>
+                <ThemedText.BodyPrimary>{formattedUsdValue}</ThemedText.BodyPrimary>
+              </BalanceItem>
+            </BalanceAmountsContainer>
+            <StyledNetworkLabel color={color}>{label}</StyledNetworkLabel>
+          </BalanceContainer>
         </BalanceRow>
       </BalanceSection>
     </BalancesCard>

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -1,22 +1,19 @@
 import { ParentSize } from '@visx/responsive'
 import { ChartContainer, LoadingChart } from 'components/Tokens/TokenDetails/Skeleton'
-import { TokenPriceQuery, tokenPriceQuery } from 'graphql/data/TokenPrice'
+import { TokenPriceQuery } from 'graphql/data/TokenPrice'
 import { isPricePoint, PricePoint } from 'graphql/data/util'
 import { TimePeriod } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { pageTimePeriodAtom } from 'pages/TokenDetails'
 import { startTransition, Suspense, useMemo } from 'react'
-import { PreloadedQuery, usePreloadedQuery } from 'react-relay'
 
 import { PriceChart } from './PriceChart'
 import TimePeriodSelector from './TimeSelector'
 
-function usePreloadedTokenPriceQuery(priceQueryReference: PreloadedQuery<TokenPriceQuery>): PricePoint[] | undefined {
-  const queryData = usePreloadedQuery(tokenPriceQuery, priceQueryReference)
-
+function usePriceHistory(tokenPriceData: TokenPriceQuery): PricePoint[] | undefined {
   // Appends the current price to the end of the priceHistory array
   const priceHistory = useMemo(() => {
-    const market = queryData.tokens?.[0]?.market
+    const market = tokenPriceData.tokens?.[0]?.market
     const priceHistory = market?.priceHistory?.filter(isPricePoint)
     const currentPrice = market?.price?.value
     if (Array.isArray(priceHistory) && currentPrice !== undefined) {
@@ -24,51 +21,51 @@ function usePreloadedTokenPriceQuery(priceQueryReference: PreloadedQuery<TokenPr
       return [...priceHistory, { timestamp, value: currentPrice }]
     }
     return priceHistory
-  }, [queryData])
+  }, [tokenPriceData])
 
   return priceHistory
 }
 export default function ChartSection({
-  priceQueryReference,
-  refetchTokenPrices,
+  tokenPriceQuery,
+  onChangeTimePeriod,
 }: {
-  priceQueryReference: PreloadedQuery<TokenPriceQuery> | null | undefined
-  refetchTokenPrices: RefetchPricesFunction
+  tokenPriceQuery?: TokenPriceQuery
+  onChangeTimePeriod: OnChangeTimePeriod
 }) {
-  if (!priceQueryReference) {
+  if (!tokenPriceQuery) {
     return <LoadingChart />
   }
 
   return (
     <Suspense fallback={<LoadingChart />}>
       <ChartContainer>
-        <Chart priceQueryReference={priceQueryReference} refetchTokenPrices={refetchTokenPrices} />
+        <Chart tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} />
       </ChartContainer>
     </Suspense>
   )
 }
 
-export type RefetchPricesFunction = (t: TimePeriod) => void
+export type OnChangeTimePeriod = (t: TimePeriod) => void
 function Chart({
-  priceQueryReference,
-  refetchTokenPrices,
+  tokenPriceQuery,
+  onChangeTimePeriod,
 }: {
-  priceQueryReference: PreloadedQuery<TokenPriceQuery>
-  refetchTokenPrices: RefetchPricesFunction
+  tokenPriceQuery: TokenPriceQuery
+  onChangeTimePeriod: OnChangeTimePeriod
 }) {
-  const prices = usePreloadedTokenPriceQuery(priceQueryReference)
+  const prices = usePriceHistory(tokenPriceQuery)
   // Initializes time period to global & maintain separate time period for subsequent changes
   const timePeriod = useAtomValue(pageTimePeriodAtom)
 
   return (
-    <ChartContainer>
+    <ChartContainer data-testid="chart-container">
       <ParentSize>
         {({ width }) => <PriceChart prices={prices ?? null} width={width} height={436} timePeriod={timePeriod} />}
       </ParentSize>
       <TimePeriodSelector
         currentTimePeriod={timePeriod}
         onTimeChange={(t: TimePeriod) => {
-          startTransition(() => refetchTokenPrices(t))
+          startTransition(() => onChangeTimePeriod(t))
         }}
       />
     </ChartContainer>

src/components/Tokens/TokenDetails/InfoTip.tsx

@@ -1,40 +0,0 @@
-import Tooltip from 'components/Tooltip'
-import { ReactNode, useCallback, useState } from 'react'
-import { Info } from 'react-feather'
-import styled from 'styled-components/macro'
-
-const InfoTipContainer = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  cursor: help;
-`
-
-const InfoTipBody = styled.div`
-  color: ${({ theme }) => theme.textPrimary};
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-`
-
-const InfoTipWrapper = styled.div`
-  margin-left: 4px;
-  display: flex;
-  align-items: center;
-`
-
-export default function InfoTip({ text }: { text: ReactNode; size?: number }) {
-  const [show, setShow] = useState<boolean>(false)
-
-  const open = useCallback(() => setShow(true), [setShow])
-  const close = useCallback(() => setShow(false), [setShow])
-  return (
-    <InfoTipWrapper>
-      <Tooltip text={<InfoTipBody>{text}</InfoTipBody>} show={show} placement="right">
-        <InfoTipContainer onClick={open} onMouseEnter={open} onMouseLeave={close}>
-          <Info size={14} />
-        </InfoTipContainer>
-      </Tooltip>
-    </InfoTipWrapper>
-  )
-}

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -275,7 +275,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
 
   return (
     <>
-      <ChartHeader>
+      <ChartHeader data-cy="chart-header">
         {displayPrice.value ? (
           <>
             <TokenPrice>{formatDollar({ num: displayPrice.value, isPrice: true })}</TokenPrice>
@@ -294,7 +294,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
       {!chartAvailable ? (
         <MissingPriceChart width={width} height={graphHeight} message={!!displayPrice.value && missingPricesMessage} />
       ) : (
-        <svg width={width} height={graphHeight} style={{ minWidth: '100%' }}>
+        <svg data-cy="price-chart" width={width} height={graphHeight} style={{ minWidth: '100%' }}>
           <AnimatedInLineChart
             data={prices}
             getX={getX}
@@ -411,7 +411,7 @@ function MissingPriceChart({ width, height, message }: { width: number; height:
   const theme = useTheme()
   const midPoint = height / 2 + 45
   return (
-    <StyledMissingChart width={width} height={height} style={{ minWidth: '100%' }}>
+    <StyledMissingChart data-cy="missing-chart" width={width} height={height} style={{ minWidth: '100%' }}>
       <path
         d={`M 0 ${midPoint} Q 104 ${midPoint - 70}, 208 ${midPoint} T 416 ${midPoint}
           M 416 ${midPoint} Q 520 ${midPoint - 70}, 624 ${midPoint} T 832 ${midPoint}`}

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -25,7 +25,7 @@ export const TokenDetailsLayout = styled.div`
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) {
     gap: 16px;
-    padding: 0 16px;
+    padding: 0 16px 52px;
   }
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
     gap: 40px;
@@ -222,7 +222,7 @@ export default function TokenDetailsSkeleton() {
   const { chainName } = useParams<{ chainName?: string }>()
   return (
     <LeftPanel>
-      <BreadcrumbNavLink to={{ chainName } ? `/tokens/${chainName}` : `/explore`}>
+      <BreadcrumbNavLink to={chainName ? `/tokens/${chainName}` : `/explore`}>
         <ArrowLeft size={14} /> Tokens
       </BreadcrumbNavLink>
       <TokenInfoContainer>

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { formatNumber, NumberType } from '@uniswap/conedison/format'
+import { MouseoverTooltip } from 'components/Tooltip'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
@@ -7,16 +8,12 @@ import { textFadeIn } from 'theme/styles'
 
 import { TokenSortMethod } from '../state'
 import { HEADER_DESCRIPTIONS } from '../TokenTable/TokenRow'
-import InfoTip from './InfoTip'
 
 export const StatWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
   color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   min-width: 168px;
   flex: 1;
-  gap: 4px;
   padding: 24px 0px;
 `
 const TokenStatsSection = styled.div`
@@ -32,12 +29,9 @@ export const StatPair = styled.div`
 const Header = styled(ThemedText.MediumHeader)`
   font-size: 28px !important;
 `
-const StatTitle = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-`
-const StatPrice = styled.span`
+
+const StatPrice = styled.div`
+  margin-top: 4px;
   font-size: 28px;
   color: ${({ theme }) => theme.textPrimary};
 `
@@ -52,23 +46,19 @@ export const StatsWrapper = styled.div`
 type NumericStat = number | undefined | null
 
 function Stat({
+  dataCy,
   value,
   title,
   description,
-  isPrice = false,
 }: {
+  dataCy: string
   value: NumericStat
   title: ReactNode
   description?: ReactNode
-  isPrice?: boolean
 }) {
   return (
-    <StatWrapper>
-      <StatTitle>
-        {title}
-        {description && <InfoTip text={description}></InfoTip>}
-      </StatTitle>
-
+    <StatWrapper data-cy={`${dataCy}`}>
+      <MouseoverTooltip text={description}>{title}</MouseoverTooltip>
       <StatPrice>{formatNumber(value, NumberType.FiatTokenStats)}</StatPrice>
     </StatWrapper>
   )
@@ -91,11 +81,13 @@ export default function StatsSection(props: StatsSectionProps) {
         <TokenStatsSection>
           <StatPair>
             <Stat
+              dataCy="tvl"
               value={TVL}
               description={HEADER_DESCRIPTIONS[TokenSortMethod.TOTAL_VALUE_LOCKED]}
               title={<Trans>TVL</Trans>}
             />
             <Stat
+              dataCy="volume-24h"
               value={volume24H}
               description={
                 <Trans>
@@ -106,8 +98,8 @@ export default function StatsSection(props: StatsSectionProps) {
             />
           </StatPair>
           <StatPair>
-            <Stat value={priceLow52W} title={<Trans>52W low</Trans>} isPrice={true} />
-            <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} isPrice={true} />
+            <Stat dataCy="52w-low" value={priceLow52W} title={<Trans>52W low</Trans>} />
+            <Stat dataCy="52w-high" value={priceHigh52W} title={<Trans>52W high</Trans>} />
           </StatPair>
         </TokenStatsSection>
       </StatsWrapper>

src/components/Tokens/TokenDetails/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
-import { PageName } from '@uniswap/analytics-events'
+import { InterfacePageName } from '@uniswap/analytics-events'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
@@ -27,21 +27,20 @@ import Widget from 'components/Widget'
 import { getChainInfo } from 'constants/chainInfo'
 import { NATIVE_CHAIN_ID, nativeOnChain } from 'constants/tokens'
 import { checkWarning } from 'constants/tokenSafety'
-import { TokenPriceQuery } from 'graphql/data/__generated__/TokenPriceQuery.graphql'
+import { TokenPriceQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { Chain, TokenQuery, TokenQueryData } from 'graphql/data/Token'
-import { QueryToken, tokenQuery } from 'graphql/data/Token'
+import { QueryToken } from 'graphql/data/Token'
 import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useIsUserAddedTokenOnChain } from 'hooks/Tokens'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { UNKNOWN_TOKEN_SYMBOL, useTokenFromActiveNetwork } from 'lib/hooks/useCurrency'
 import { useCallback, useMemo, useState, useTransition } from 'react'
 import { ArrowLeft } from 'react-feather'
-import { PreloadedQuery, usePreloadedQuery } from 'react-relay'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { isAddress } from 'utils'
 
-import { RefetchPricesFunction } from './ChartSection'
+import { OnChangeTimePeriod } from './ChartSection'
 import InvalidTokenDetails from './InvalidTokenDetails'
 
 const TokenSymbol = styled.span`
@@ -75,7 +74,7 @@ function useRelevantToken(
   const queryToken = useMemo(() => {
     if (!address) return undefined
     if (address === NATIVE_CHAIN_ID) return nativeOnChain(pageChainId)
-    if (tokenQueryData) return new QueryToken(tokenQueryData)
+    if (tokenQueryData) return new QueryToken(address, tokenQueryData)
     return undefined
   }, [pageChainId, address, tokenQueryData])
   // fetches on-chain token if query data is missing and page chain matches global chain (else fetch won't work)
@@ -91,16 +90,16 @@ function useRelevantToken(
 type TokenDetailsProps = {
   urlAddress: string | undefined
   chain: Chain
-  tokenQueryReference: PreloadedQuery<TokenQuery>
-  priceQueryReference: PreloadedQuery<TokenPriceQuery> | null | undefined
-  refetchTokenPrices: RefetchPricesFunction
+  tokenQuery: TokenQuery
+  tokenPriceQuery: TokenPriceQuery | undefined
+  onChangeTimePeriod: OnChangeTimePeriod
 }
 export default function TokenDetails({
   urlAddress,
   chain,
-  tokenQueryReference,
-  priceQueryReference,
-  refetchTokenPrices,
+  tokenQuery,
+  tokenPriceQuery,
+  onChangeTimePeriod,
 }: TokenDetailsProps) {
   if (!urlAddress) {
     throw new Error('Invalid token details route: tokenAddress param is undefined')
@@ -112,7 +111,7 @@ export default function TokenDetails({
 
   const pageChainId = CHAIN_NAME_TO_CHAIN_ID[chain]
 
-  const tokenQueryData = usePreloadedQuery(tokenQuery, tokenQueryReference).tokens?.[0]
+  const tokenQueryData = tokenQuery.tokens?.[0]
   const crossChainMap = useMemo(
     () =>
       tokenQueryData?.project?.tokens.reduce((map, current) => {
@@ -177,7 +176,7 @@ export default function TokenDetails({
   }
   return (
     <Trace
-      page={PageName.TOKEN_DETAILS_PAGE}
+      page={InterfacePageName.TOKEN_DETAILS_PAGE}
       properties={{ tokenAddress: address, tokenName: token?.name }}
       shouldLogImpression
     >
@@ -187,7 +186,7 @@ export default function TokenDetails({
             <BreadcrumbNavLink to={`/tokens/${chain.toLowerCase()}`}>
               <ArrowLeft data-testid="token-details-return-button" size={14} /> Tokens
             </BreadcrumbNavLink>
-            <TokenInfoContainer>
+            <TokenInfoContainer data-testid="token-info-container">
               <TokenNameCell>
                 <LogoContainer>
                   <CurrencyLogo currency={token} size="32px" />
@@ -200,25 +199,22 @@ export default function TokenDetails({
                 <ShareButton currency={token} />
               </TokenActions>
             </TokenInfoContainer>
-            <ChartSection priceQueryReference={priceQueryReference} refetchTokenPrices={refetchTokenPrices} />
+            <ChartSection tokenPriceQuery={tokenPriceQuery} onChangeTimePeriod={onChangeTimePeriod} />
             <StatsSection
               TVL={tokenQueryData?.market?.totalValueLocked?.value}
               volume24H={tokenQueryData?.market?.volume24H?.value}
               priceHigh52W={tokenQueryData?.market?.priceHigh52W?.value}
               priceLow52W={tokenQueryData?.market?.priceLow52W?.value}
             />
-            {!token.isNative && (
-              <>
-                <Hr />
-                <AboutSection
-                  address={address}
-                  description={tokenQueryData?.project?.description}
-                  homepageUrl={tokenQueryData?.project?.homepageUrl}
-                  twitterName={tokenQueryData?.project?.twitterName}
-                />
-                <AddressSection address={address} />
-              </>
-            )}
+            <Hr />
+            <AboutSection
+              address={address}
+              chainId={pageChainId}
+              description={tokenQueryData?.project?.description}
+              homepageUrl={tokenQueryData?.project?.homepageUrl}
+              twitterName={tokenQueryData?.project?.twitterName}
+            />
+            {!token.isNative && <AddressSection address={address} />}
           </LeftPanel>
         ) : (
           <TokenDetailsSkeleton />

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -103,7 +103,12 @@ export default function NetworkFilter() {
 
   return (
     <StyledMenu ref={node}>
-      <NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
+      <NetworkFilterOption
+        onClick={toggleMenu}
+        aria-label="networkFilter"
+        active={open}
+        data-testid="tokens-network-filter-selected"
+      >
         <StyledMenuContent>
           <NetworkLabel>
             <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}
@@ -125,6 +130,7 @@ export default function NetworkFilter() {
             return (
               <InternalLinkMenuItem
                 key={network}
+                data-testid={`tokens-network-filter-option-${network.toLowerCase()}`}
                 onClick={() => {
                   navigate(`/tokens/${network.toLowerCase()}`)
                   toggleMenu()

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
 import useDebounce from 'hooks/useDebounce'
@@ -80,10 +80,11 @@ export default function SearchBar() {
         render={({ translation }) => (
           <TraceEvent
             events={[BrowserEvent.onFocus]}
-            name={EventName.EXPLORE_SEARCH_SELECTED}
-            element={ElementName.EXPLORE_SEARCH_INPUT}
+            name={InterfaceEventName.EXPLORE_SEARCH_SELECTED}
+            element={InterfaceElementName.EXPLORE_SEARCH_INPUT}
           >
             <SearchInput
+              data-cy="explore-tokens-search-input"
               type="search"
               placeholder={`${translation}`}
               id="searchBar"

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -111,7 +111,7 @@ export default function TimeSelector() {
 
   return (
     <StyledMenu ref={node}>
-      <FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open}>
+      <FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open} data-testid="time-selector">
         <StyledMenuContent>
           {DISPLAYS[activeTime]}
           <Chevron open={open}>
@@ -128,6 +128,7 @@ export default function TimeSelector() {
           {ORDERED_TIMES.map((time) => (
             <InternalLinkMenuItem
               key={DISPLAYS[time]}
+              data-testid={DISPLAYS[time]}
               onClick={() => {
                 setTime(time)
                 toggleMenu()

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -1,17 +1,18 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
-import { EventName } from '@uniswap/analytics-events'
+import { InterfaceEventName } from '@uniswap/analytics-events'
 import { formatNumber, formatUSDPrice, NumberType } from '@uniswap/conedison/format'
 import { ParentSize } from '@visx/responsive'
 import SparklineChart from 'components/Charts/SparklineChart'
 import QueryTokenLogo from 'components/Logo/QueryTokenLogo'
+import { MouseoverTooltip } from 'components/Tooltip'
 import { getChainInfo } from 'constants/chainInfo'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
 import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
-import { ArrowDown, ArrowUp } from 'react-feather'
+import { ArrowDown, ArrowUp, Info } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
@@ -31,7 +32,6 @@ import {
   TokenSortMethod,
   useSetSortMethod,
 } from '../state'
-import InfoTip from '../TokenDetails/InfoTip'
 import { ArrowCell, DeltaText, formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
 
 const Cell = styled.div`
@@ -200,7 +200,6 @@ const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
   display: flex;
   gap: 4px;
-  height: 100%;
   justify-content: flex-end;
   width: 100%;
 
@@ -297,6 +296,13 @@ export const LogoContainer = styled.div`
   display: flex;
 `
 
+const InfoIconContainer = styled.div`
+  margin-left: 2px;
+  display: flex;
+  align-items: center;
+  cursor: help;
+`
+
 export const HEADER_DESCRIPTIONS: Record<TokenSortMethod, ReactNode | undefined> = {
   [TokenSortMethod.PRICE]: undefined,
   [TokenSortMethod.PERCENT_CHANGE]: undefined,
@@ -333,7 +339,13 @@ function HeaderCell({
         </>
       )}
       {category}
-      {description && <InfoTip text={description}></InfoTip>}
+      {description && (
+        <MouseoverTooltip text={description} placement="right">
+          <InfoIconContainer>
+            <Info size={14} />
+          </InfoIconContainer>
+        </MouseoverTooltip>
+      )}
     </HeaderCellWrapper>
   )
 }
@@ -366,15 +378,23 @@ function TokenRow({
   const rowCells = (
     <>
       <ListNumberCell header={header}>{listNumber}</ListNumberCell>
-      <NameCell>{tokenInfo}</NameCell>
-      <PriceCell sortable={header}>{price}</PriceCell>
-      <PercentChangeCell sortable={header}>{percentChange}</PercentChangeCell>
-      <TvlCell sortable={header}>{tvl}</TvlCell>
-      <VolumeCell sortable={header}>{volume}</VolumeCell>
+      <NameCell data-testid="name-cell">{tokenInfo}</NameCell>
+      <PriceCell data-testid="price-cell" sortable={header}>
+        {price}
+      </PriceCell>
+      <PercentChangeCell data-testid="percent-change-cell" sortable={header}>
+        {percentChange}
+      </PercentChangeCell>
+      <TvlCell data-testid="tvl-cell" sortable={header}>
+        {tvl}
+      </TvlCell>
+      <VolumeCell data-testid="volume-cell" sortable={header}>
+        {volume}
+      </VolumeCell>
       <SparkLineCell>{sparkLine}</SparkLineCell>
     </>
   )
-  if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
+  if (header) return <StyledHeaderRow data-testid="header-row">{rowCells}</StyledHeaderRow>
   return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
 }
 
@@ -422,16 +442,13 @@ interface LoadedRowProps {
   tokenListLength: number
   token: NonNullable<TopToken>
   sparklineMap: SparklineMap
+  volumeRank: number
 }
 
 /* Loaded State: row component with token information */
 export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { tokenListIndex, tokenListLength, token } = props
-  const tokenAddress = token.address
-  const tokenName = token.name
-  const tokenSymbol = token.symbol
+  const { tokenListIndex, tokenListLength, token, volumeRank } = props
   const filterString = useAtomValue(filterStringAtom)
-  const sortAscending = useAtomValue(sortAscendingAtom)
 
   const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
   const filterNetwork = lowercaseChainName.toUpperCase()
@@ -442,14 +459,13 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const arrow = getDeltaArrow(delta)
   const smallArrow = getDeltaArrow(delta, 14)
   const formattedDelta = formatDelta(delta)
-  const rank = sortAscending ? tokenListLength - tokenListIndex : tokenListIndex + 1
 
   const exploreTokenSelectedEventProperties = {
     chain_id: chainId,
-    token_address: tokenAddress,
-    token_symbol: tokenSymbol,
+    token_address: token.address,
+    token_symbol: token.symbol,
     token_list_index: tokenListIndex,
-    token_list_rank: rank,
+    token_list_rank: volumeRank,
     token_list_length: tokenListLength,
     time_frame: timePeriod,
     search_token_address_input: filterString,
@@ -457,14 +473,16 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
 
   // TODO: currency logo sizing mobile (32px) vs. desktop (24px)
   return (
-    <div ref={ref} data-testid={`token-table-row-${tokenName}`}>
+    <div ref={ref} data-testid={`token-table-row-${token.symbol}`}>
       <StyledLink
-        to={getTokenDetailsURL(token.address, token.chain)}
-        onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}
+        to={getTokenDetailsURL(token.address ?? '', token.chain)}
+        onClick={() =>
+          sendAnalyticsEvent(InterfaceEventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)
+        }
       >
         <TokenRow
           header={false}
-          listNumber={rank}
+          listNumber={volumeRank}
           tokenInfo={
             <ClickableName>
               <LogoContainer>
@@ -472,8 +490,8 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
                 <L2NetworkLogo networkUrl={L2Icon} />
               </LogoContainer>
               <TokenInfoCell>
-                <TokenName>{tokenName}</TokenName>
-                <TokenSymbol>{tokenSymbol}</TokenSymbol>
+                <TokenName data-cy="token-name">{token.name}</TokenName>
+                <TokenSymbol>{token.symbol}</TokenSymbol>
               </TokenInfoCell>
             </ClickableName>
           }
@@ -512,7 +530,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
                       height={height}
                       tokenData={token}
                       pricePercentChange={token.market?.pricePercentChange?.value}
-                      timePeriod={timePeriod}
                       sparklineMap={props.sparklineMap}
                     />
                   )

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -64,7 +64,7 @@ const LoadingRows = ({ rowCount }: { rowCount: number }) => (
   </>
 )
 
-export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
+function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
   return (
     <GridContainer>
       <HeaderRow />
@@ -75,14 +75,15 @@ export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number
   )
 }
 
-export default function TokenTable({ setRowCount }: { setRowCount: (c: number) => void }) {
+export default function TokenTable() {
   // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
-  const { tokens, sparklines } = useTopTokens(chainName)
-  setRowCount(tokens?.length ?? PAGE_SIZE)
+  const { tokens, tokenVolumeRank, loadingTokens, sparklines } = useTopTokens(chainName)
 
   /* loading and error state */
-  if (!tokens) {
+  if (loadingTokens) {
+    return <LoadingTokenTable rowCount={PAGE_SIZE} />
+  } else if (!tokens) {
     return (
       <NoTokensState
         message={
@@ -102,13 +103,14 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) =
         <TokenDataContainer>
           {tokens.map(
             (token, index) =>
-              token && (
+              token?.address && (
                 <LoadedRow
-                  key={token?.address}
+                  key={token.address}
                   tokenListIndex={index}
                   tokenListLength={tokens.length}
                   token={token}
                   sparklineMap={sparklines}
+                  volumeRank={tokenVolumeRank[token.address]}
                 />
               )
           )}

src/components/Tooltip/index.tsx

@@ -8,7 +8,11 @@ export const TooltipContainer = styled.div`
   max-width: 256px;
   cursor: default;
   padding: 0.6rem 1rem;
+
+  color: ${({ theme }) => theme.textPrimary};
   font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
   word-break: break-word;
 
   background: ${({ theme }) => theme.backgroundSurface};
@@ -56,7 +60,7 @@ function TooltipContent({ content, wrap = false, ...rest }: TooltipContentProps)
 /** Standard text tooltip. */
 export function MouseoverTooltip({ text, disableHover, children, timeout, ...rest }: Omit<TooltipProps, 'show'>) {
   const [show, setShow] = useState(false)
-  const open = useCallback(() => setShow(true), [setShow])
+  const open = useCallback(() => text && setShow(true), [text, setShow])
   const close = useCallback(() => setShow(false), [setShow])
 
   useEffect(() => {

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -1,4 +1,6 @@
 import { Trans } from '@lingui/macro'
+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { InterfaceEventName } from '@uniswap/analytics-events'
 import { formatUSDPrice } from '@uniswap/conedison/format'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
@@ -19,7 +21,6 @@ import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Copy, CreditCard, ExternalLink as ExternalLinkIcon, Info, Power } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
-import { Text } from 'rebass'
 import { useCurrencyBalanceString } from 'state/connection/hooks'
 import { useAppDispatch } from 'state/hooks'
 import { useFiatOnrampAck } from 'state/user/hooks'
@@ -55,7 +56,7 @@ const BuyCryptoButton = styled(ThemeButton)<{ $animateBorder: boolean }>`
   border-style: solid;
   border-width: 1px;
   height: 40px;
-  margin-top: 12px;
+  margin-top: 8px;
   animation-direction: alternate;
   animation-duration: ${({ theme }) => theme.transition.duration.slow};
   animation-fill-mode: none;
@@ -68,7 +69,7 @@ const WalletButton = styled(ThemeButton)`
   border-radius: 12px;
   padding-top: 10px;
   padding-bottom: 10px;
-  margin-top: 12px;
+  margin-top: 4px;
   color: white;
   border: none;
 `
@@ -125,15 +126,6 @@ const FiatOnrampAvailabilityExternalLink = styled(ExternalLink)`
   margin-left: 6px;
   width: 14px;
 `
-const FlexContainer = styled.div`
-  display: flex;
-`
-
-const StatusWrapper = styled.div`
-  display: inline-block;
-  margin-top: 4px;
-  width: 70%;
-`
 
 const TruncatedTextStyle = css`
   text-overflow: ellipsis;
@@ -141,8 +133,14 @@ const TruncatedTextStyle = css`
   white-space: nowrap;
 `
 
-const AccountNamesWrapper = styled.div`
+const FlexContainer = styled.div`
   ${TruncatedTextStyle}
+  padding-right: 4px;
+  display: inline-flex;
+`
+
+const AccountNamesWrapper = styled.div`
+  min-width: 0;
   margin-right: 8px;
 `
 
@@ -166,6 +164,9 @@ const StyledLoadingButtonSpinner = styled(LoadingButtonSpinner)`
   fill: ${({ theme }) => theme.accentAction};
 `
 const BalanceWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   padding: 16px 0;
 `
 
@@ -175,10 +176,6 @@ const HeaderWrapper = styled.div`
   justify-content: space-between;
 `
 
-const AuthenticatedHeaderWrapper = styled.div`
-  padding: 0 16px;
-`
-
 const AuthenticatedHeader = () => {
   const { account, chainId, connector, ENSName } = useWeb3React()
   const [isCopied, setCopied] = useCopyClipboard()
@@ -192,7 +189,7 @@ const AuthenticatedHeader = () => {
     explorer,
   } = getChainInfoOrDefault(chainId ? chainId : SupportedChainId.MAINNET)
   const navigate = useNavigate()
-  const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
+  const closeModal = useCloseModal()
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const resetSellAssets = useSellAsset((state) => state.reset)
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
@@ -250,21 +247,26 @@ const AuthenticatedHeader = () => {
   }, [acknowledge, animateBuyCryptoButtonBorder])
 
   const openFiatOnrampModal = useOpenModal(ApplicationModal.FIAT_ONRAMP)
+  const openFoRModalWithAnalytics = useCallback(() => {
+    sendAnalyticsEvent(InterfaceEventName.FIAT_ONRAMP_WIDGET_OPENED)
+    openFiatOnrampModal()
+  }, [openFiatOnrampModal])
+
   const [shouldCheck, setShouldCheck] = useState(false)
   const {
     available: fiatOnrampAvailable,
     availabilityChecked: fiatOnrampAvailabilityChecked,
     error,
     loading: fiatOnrampAvailabilityLoading,
-  } = useFiatOnrampAvailability(shouldCheck, openFiatOnrampModal)
+  } = useFiatOnrampAvailability(shouldCheck, openFoRModalWithAnalytics)
 
   const handleBuyCryptoClick = useCallback(() => {
     if (!fiatOnrampAvailabilityChecked) {
       setShouldCheck(true)
     } else if (fiatOnrampAvailable) {
-      openFiatOnrampModal()
+      openFoRModalWithAnalytics()
     }
-  }, [fiatOnrampAvailabilityChecked, fiatOnrampAvailable, openFiatOnrampModal])
+  }, [fiatOnrampAvailabilityChecked, fiatOnrampAvailable, openFoRModalWithAnalytics])
   const disableBuyCryptoButton = Boolean(
     error || (!fiatOnrampAvailable && fiatOnrampAvailabilityChecked) || fiatOnrampAvailabilityLoading
   )
@@ -273,21 +275,19 @@ const AuthenticatedHeader = () => {
   const closeFiatOnrampUnavailableTooltip = useCallback(() => setShow(false), [setShow])
 
   return (
-    <AuthenticatedHeaderWrapper>
+    <>
       <HeaderWrapper>
-        <StatusWrapper>
-          <FlexContainer>
-            <StatusIcon connectionType={connectionType} size={24} />
-            {ENSName ? (
-              <AccountNamesWrapper>
-                <ENSNameContainer>{ENSName}</ENSNameContainer>
-                <AccountContainer>{account && shortenAddress(account, 2, 4)}</AccountContainer>
-              </AccountNamesWrapper>
-            ) : (
-              <ThemedText.SubHeader marginTop="2.5px">{account && shortenAddress(account, 2, 4)}</ThemedText.SubHeader>
-            )}
-          </FlexContainer>
-        </StatusWrapper>
+        <FlexContainer>
+          <StatusIcon connectionType={connectionType} size={24} />
+          {ENSName ? (
+            <AccountNamesWrapper>
+              <ENSNameContainer>{ENSName}</ENSNameContainer>
+              <AccountContainer>{account && shortenAddress(account, 2, 4)}</AccountContainer>
+            </AccountNamesWrapper>
+          ) : (
+            <ThemedText.SubHeader marginTop="2.5px">{account && shortenAddress(account, 2, 4)}</ThemedText.SubHeader>
+          )}
+        </FlexContainer>
         <IconContainer>
           <IconButton onClick={copy} Icon={Copy}>
             {isCopied ? <Trans>Copied!</Trans> : <Trans>Copy</Trans>}
@@ -302,9 +302,10 @@ const AuthenticatedHeader = () => {
       </HeaderWrapper>
       <Column>
         <BalanceWrapper>
-          <Text fontSize={36} fontWeight={400}>
+          <ThemedText.SubHeaderSmall>ETH Balance</ThemedText.SubHeaderSmall>
+          <ThemedText.HeadlineLarge fontSize={36} fontWeight={400}>
             {balanceString} {nativeCurrencySymbol}
-          </Text>
+          </ThemedText.HeadlineLarge>
           {amountUSD !== undefined && <USDText>{formatUSDPrice(amountUSD)} USD</USDText>}
         </BalanceWrapper>
         <ProfileButton
@@ -328,7 +329,11 @@ const AuthenticatedHeader = () => {
                 <ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary>
               ) : (
                 <>
-                  {fiatOnrampAvailabilityLoading ? <StyledLoadingButtonSpinner /> : <CreditCard />}{' '}
+                  {fiatOnrampAvailabilityLoading ? (
+                    <StyledLoadingButtonSpinner />
+                  ) : (
+                    <CreditCard height="20px" width="20px" />
+                  )}{' '}
                   <Trans>Buy crypto</Trans>
                 </>
               )}
@@ -364,7 +369,7 @@ const AuthenticatedHeader = () => {
           </UNIButton>
         )}
       </Column>
-    </AuthenticatedHeaderWrapper>
+    </>
   )
 }
 

src/components/WalletDropdown/DefaultMenu.tsx

@@ -91,7 +91,6 @@ const IconWrap = styled.span`
 const DefaultMenuWrap = styled.div`
   width: 100%;
   height: 100%;
-  padding: 0 8px;
 `
 
 const DefaultText = styled.span`

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components/macro'
 
 const Menu = styled.div`
   width: 100%;
-  height: 100%;
   font-size: 16px;
   overflow: auto;
   max-height: 450px;
@@ -58,8 +57,9 @@ const StyledChevron = styled(ChevronLeft)`
 const BackSection = styled.div`
   position: absolute;
   background-color: ${({ theme }) => theme.backgroundSurface};
-  width: 99%;
-  padding: 0 16px 16px 16px;
+  width: fill-available;
+  margin: 0px 2vw 0px 0px;
+  padding: 0px 0px 2vh 0px;
   color: ${({ theme }) => theme.textSecondary};
   cursor: default;
   display: flex;

src/components/WalletDropdown/index.tsx

@@ -19,7 +19,7 @@ const WalletWrapper = styled.div`
   background-color: ${({ theme }) => theme.backgroundSurface};
   border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   box-shadow: ${({ theme }) => theme.deepShadow};
-  padding: 16px 0;
+  padding: 16px;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     width: 100%;

src/components/WalletModal/Option.tsx

@@ -1,5 +1,5 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import React from 'react'
 import { Check } from 'react-feather'
 import styled from 'styled-components/macro'
@@ -116,9 +116,9 @@ export default function Option({
   const content = (
     <TraceEvent
       events={[BrowserEvent.onClick]}
-      name={EventName.WALLET_SELECTED}
+      name={InterfaceEventName.WALLET_SELECTED}
       properties={{ wallet_type: header }}
-      element={ElementName.WALLET_TYPE_OPTION}
+      element={InterfaceElementName.WALLET_TYPE_OPTION}
     >
       <OptionCardClickable
         id={id}

src/components/WalletModal/index.test.tsx

@@ -1,6 +1,4 @@
-import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import * as connectionUtils from 'connection/utils'
-import { ApplicationModal } from 'state/application/reducer'
 
 import { nativeOnChain } from '../../constants/tokens'
 import { render, screen } from '../../test-utils'
@@ -20,7 +18,7 @@ jest.mock('utils/userAgent', () => ({
 
 jest.mock('.../../state/application/hooks', () => {
   return {
-    useModalIsOpen: (_modal: ApplicationModal) => true,
+    useModalIsOpen: () => true,
     useToggleWalletModal: () => {
       return
     },
@@ -29,7 +27,7 @@ jest.mock('.../../state/application/hooks', () => {
 
 jest.mock('hooks/useStablecoinPrice', () => {
   return {
-    useStablecoinValue: (_currencyAmount: CurrencyAmount<Currency> | undefined | null) => {
+    useStablecoinValue: () => {
       return
     },
   }
@@ -38,10 +36,10 @@ jest.mock('hooks/useStablecoinPrice', () => {
 jest.mock('lib/hooks/useCurrencyBalance', () => {
   return {
     __esModule: true,
-    default: (account?: string, currency?: Currency) => {
+    default: () => {
       return
     },
-    useTokenBalance: (account?: string, token?: Token) => {
+    useTokenBalance: () => {
       return
     },
   }
@@ -72,7 +70,7 @@ it('loads Wallet Modal on desktop', async () => {
 
 it('loads Wallet Modal on desktop with generic Injected', async () => {
   jest.spyOn(connectionUtils, 'getIsInjected').mockReturnValue(true)
-  jest.spyOn(connectionUtils, 'getIsMetaMask').mockReturnValue(false)
+  jest.spyOn(connectionUtils, 'getIsMetaMaskWallet').mockReturnValue(false)
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(false)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
@@ -84,7 +82,7 @@ it('loads Wallet Modal on desktop with generic Injected', async () => {
 
 it('loads Wallet Modal on desktop with MetaMask installed', async () => {
   jest.spyOn(connectionUtils, 'getIsInjected').mockReturnValue(true)
-  jest.spyOn(connectionUtils, 'getIsMetaMask').mockReturnValue(true)
+  jest.spyOn(connectionUtils, 'getIsMetaMaskWallet').mockReturnValue(true)
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(false)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
@@ -98,7 +96,7 @@ it('loads Wallet Modal on mobile', async () => {
   UserAgentMock.isMobile = true
 
   jest.spyOn(connectionUtils, 'getIsInjected').mockReturnValue(false)
-  jest.spyOn(connectionUtils, 'getIsMetaMask').mockReturnValue(false)
+  jest.spyOn(connectionUtils, 'getIsMetaMaskWallet').mockReturnValue(false)
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(false)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
@@ -111,7 +109,7 @@ it('loads Wallet Modal on MetaMask browser', async () => {
   UserAgentMock.isMobile = true
 
   jest.spyOn(connectionUtils, 'getIsInjected').mockReturnValue(true)
-  jest.spyOn(connectionUtils, 'getIsMetaMask').mockReturnValue(true)
+  jest.spyOn(connectionUtils, 'getIsMetaMaskWallet').mockReturnValue(true)
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(false)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)
@@ -123,7 +121,7 @@ it('loads Wallet Modal on Coinbase Wallet browser', async () => {
   UserAgentMock.isMobile = true
 
   jest.spyOn(connectionUtils, 'getIsInjected').mockReturnValue(true)
-  jest.spyOn(connectionUtils, 'getIsMetaMask').mockReturnValue(false)
+  jest.spyOn(connectionUtils, 'getIsMetaMaskWallet').mockReturnValue(false)
   jest.spyOn(connectionUtils, 'getIsCoinbaseWallet').mockReturnValue(true)
 
   render(<WalletModal pendingTransactions={[]} confirmedTransactions={[]} />)

src/components/WalletModal/index.tsx

@@ -1,13 +1,19 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, user } from '@uniswap/analytics'
-import { CustomUserProperties, EventName, WalletConnectionResult } from '@uniswap/analytics-events'
+import { CustomUserProperties, InterfaceEventName, WalletConnectionResult } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
 import { sendEvent } from 'components/analytics'
 import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
 import { networkConnection } from 'connection'
-import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
+import {
+  getConnection,
+  getConnectionName,
+  getIsCoinbaseWallet,
+  getIsInjected,
+  getIsMetaMaskWallet,
+} from 'connection/utils'
 import usePrevious from 'hooks/usePrevious'
 import { useCallback, useEffect, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
@@ -125,7 +131,7 @@ const sendAnalyticsEventAndUserInfo = (
   chainId: number | undefined,
   isReconnect: boolean
 ) => {
-  sendAnalyticsEvent(EventName.WALLET_CONNECT_TXN_COMPLETED, {
+  sendAnalyticsEvent(InterfaceEventName.WALLET_CONNECT_TXN_COMPLETED, {
     result: WalletConnectionResult.SUCCEEDED,
     wallet_address: account,
     wallet_type: walletType,
@@ -204,7 +210,7 @@ export default function WalletModal({
   // When new wallet is successfully set by the user, trigger logging of Amplitude analytics event.
   useEffect(() => {
     if (account && account !== lastActiveWalletAddress) {
-      const walletType = getConnectionName(getConnection(connector).type, getIsMetaMask())
+      const walletType = getConnectionName(getConnection(connector).type)
       const isReconnect =
         connectedWallets.filter((wallet) => wallet.account === account && wallet.walletType === walletType).length > 0
       sendAnalyticsEventAndUserInfo(account, walletType, chainId, isReconnect)
@@ -236,9 +242,9 @@ export default function WalletModal({
         console.debug(`web3-react connection error: ${error}`)
         dispatch(updateConnectionError({ connectionType, error: error.message }))
 
-        sendAnalyticsEvent(EventName.WALLET_CONNECT_TXN_COMPLETED, {
+        sendAnalyticsEvent(InterfaceEventName.WALLET_CONNECT_TXN_COMPLETED, {
           result: WalletConnectionResult.FAILED,
-          wallet_type: getConnectionName(connectionType, getIsMetaMask()),
+          wallet_type: getConnectionName(connectionType),
         })
       }
     },
@@ -247,11 +253,11 @@ export default function WalletModal({
 
   function getOptions() {
     const isInjected = getIsInjected()
-    const isMetaMask = getIsMetaMask()
-    const isCoinbaseWallet = getIsCoinbaseWallet()
+    const hasMetaMaskExtension = getIsMetaMaskWallet()
+    const hasCoinbaseExtension = getIsCoinbaseWallet()
 
-    const isCoinbaseWalletBrowser = isMobile && isCoinbaseWallet
-    const isMetaMaskBrowser = isMobile && isMetaMask
+    const isCoinbaseWalletBrowser = isMobile && hasCoinbaseExtension
+    const isMetaMaskBrowser = isMobile && hasMetaMaskExtension
     const isInjectedMobileBrowser = isCoinbaseWalletBrowser || isMetaMaskBrowser
 
     let injectedOption
@@ -259,8 +265,8 @@ export default function WalletModal({
       if (!isMobile) {
         injectedOption = <InstallMetaMaskOption />
       }
-    } else if (!isCoinbaseWallet) {
-      if (isMetaMask) {
+    } else if (!hasCoinbaseExtension) {
+      if (hasMetaMaskExtension) {
         injectedOption = <MetaMaskOption tryActivation={tryActivation} />
       } else {
         injectedOption = <InjectedOption tryActivation={tryActivation} />

src/components/Web3Status/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { FiatOnrampAnnouncement } from 'components/FiatOnrampAnnouncement'
 import { IconWrapper } from 'components/Identicon/StatusIcon'
@@ -207,14 +207,14 @@ function Web3StatusInner() {
   const theme = useTheme()
   const toggleWalletDropdown = useToggleWalletDropdown()
   const handleWalletDropdownClick = useCallback(() => {
-    sendAnalyticsEvent('FOR Account Dropdown Button Clicks')
+    sendAnalyticsEvent(InterfaceEventName.ACCOUNT_DROPDOWN_BUTTON_CLICKED)
     toggleWalletDropdown()
   }, [toggleWalletDropdown])
   const toggleWalletModal = useToggleWalletModal()
   const walletIsOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
-  const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
+  const error = useAppSelector((state) => state.connection.errorByConnectionType[connectionType])
 
   const allTransactions = useAllTransactions()
 
@@ -276,9 +276,9 @@ function Web3StatusInner() {
     return (
       <TraceEvent
         events={[BrowserEvent.onClick]}
-        name={EventName.CONNECT_WALLET_BUTTON_CLICKED}
+        name={InterfaceEventName.CONNECT_WALLET_BUTTON_CLICKED}
         properties={{ received_swap_quote: validSwapQuote }}
-        element={ElementName.CONNECT_WALLET_BUTTON}
+        element={InterfaceElementName.CONNECT_WALLET_BUTTON}
       >
         <Web3StatusConnectWrapper faded={!account}>
           <StyledConnectButton data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
@@ -300,7 +300,7 @@ export default function Web3Status() {
   const allTransactions = useAllTransactions()
   const ref = useRef<HTMLDivElement>(null)
   const walletRef = useRef<HTMLDivElement>(null)
-  const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
+  const closeModal = useCloseModal()
   const isOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
 
   useOnClickOutside(ref, isOpen ? closeModal : undefined, [walletRef])

src/components/Widget/index.tsx

@@ -1,5 +1,10 @@
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
-import { EventName, SectionName, SwapPriceUpdateUserResponse } from '@uniswap/analytics-events'
+import {
+  InterfaceEventName,
+  InterfaceSectionName,
+  SwapEventName,
+  SwapPriceUpdateUserResponse,
+} from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import {
@@ -21,6 +26,7 @@ import {
   getTokenAddress,
 } from 'lib/utils/analytics'
 import { useCallback, useState } from 'react'
+import { useToggleWalletModal } from 'state/application/hooks'
 import { useIsDarkMode } from 'state/user/hooks'
 import { computeRealizedPriceImpact } from 'utils/prices'
 import { switchChain } from 'utils/switchChain'
@@ -52,13 +58,19 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
   const { settings } = useSyncWidgetSettings()
   const { transactions } = useSyncWidgetTransactions()
 
+  const toggleWalletModal = useToggleWalletModal()
+  const onConnectWalletClick = useCallback(() => {
+    toggleWalletModal()
+    return false // prevents the in-widget wallet modal from opening
+  }, [toggleWalletModal])
+
   const onSwitchChain = useCallback(
     // TODO(WEB-1757): Widget should not break if this rejects - upstream the catch to ignore it.
     ({ chainId }: AddEthereumChainParameter) => switchChain(connector, Number(chainId)).catch(() => undefined),
     [connector]
   )
 
-  const trace = useTrace({ section: SectionName.WIDGET })
+  const trace = useTrace({ section: InterfaceSectionName.WIDGET })
   const [initialQuoteDate, setInitialQuoteDate] = useState<Date>()
   const onInitialSwapQuote = useCallback(
     (trade: Trade<Currency, Currency, TradeType>) => {
@@ -72,7 +84,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
         ),
         ...trace,
       }
-      sendAnalyticsEvent(EventName.SWAP_QUOTE_RECEIVED, eventProperties)
+      sendAnalyticsEvent(SwapEventName.SWAP_QUOTE_RECEIVED, eventProperties)
     },
     [trace]
   )
@@ -85,10 +97,10 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
       token_address: getTokenAddress(input),
       ...trace,
     }
-    sendAnalyticsEvent(EventName.APPROVE_TOKEN_TXN_SUBMITTED, eventProperties)
+    sendAnalyticsEvent(InterfaceEventName.APPROVE_TOKEN_TXN_SUBMITTED, eventProperties)
   }, [inputs.value.INPUT, trace])
   const onExpandSwapDetails = useCallback(() => {
-    sendAnalyticsEvent(EventName.SWAP_DETAILS_EXPANDED, { ...trace })
+    sendAnalyticsEvent(SwapEventName.SWAP_DETAILS_EXPANDED, { ...trace })
   }, [trace])
   const onSwapPriceUpdateAck = useCallback(
     (stale: Trade<Currency, Currency, TradeType>, update: Trade<Currency, Currency, TradeType>) => {
@@ -100,7 +112,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
         price_update_basis_points: getPriceUpdateBasisPoints(stale.executionPrice, update.executionPrice),
         ...trace,
       }
-      sendAnalyticsEvent(EventName.SWAP_PRICE_UPDATE_ACKNOWLEDGED, eventProperties)
+      sendAnalyticsEvent(SwapEventName.SWAP_PRICE_UPDATE_ACKNOWLEDGED, eventProperties)
     },
     [trace]
   )
@@ -127,7 +139,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
         swap_quote_block_number: undefined,
         ...trace,
       }
-      sendAnalyticsEvent(EventName.SWAP_SUBMITTED_BUTTON_CLICKED, eventProperties)
+      sendAnalyticsEvent(SwapEventName.SWAP_SUBMITTED_BUTTON_CLICKED, eventProperties)
     },
     [initialQuoteDate, trace]
   )
@@ -149,6 +161,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
         theme={theme}
         width={WIDGET_WIDTH}
         // defaultChainId is excluded - it is always inferred from the passed provider
+        onConnectWalletClick={onConnectWalletClick}
         provider={provider}
         onSwitchChain={onSwitchChain}
         tokenList={EMPTY_TOKEN_LIST} // prevents loading the default token list, as we use our own token selector UI

src/components/Widget/inputs.tsx

@@ -1,5 +1,5 @@
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
-import { EventName, SectionName } from '@uniswap/analytics-events'
+import { InterfaceSectionName, SwapEventName } from '@uniswap/analytics-events'
 import { Currency, Field, SwapController, SwapEventHandlers, TradeType } from '@uniswap/widgets'
 import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -26,7 +26,7 @@ export function useSyncWidgetInputs({
   token?: Currency
   onTokenChange?: (token: Currency) => void
 }) {
-  const trace = useTrace({ section: SectionName.WIDGET })
+  const trace = useTrace({ section: InterfaceSectionName.WIDGET })
 
   const [type, setType] = useState<SwapValue['type']>(TradeType.EXACT_INPUT)
   const [amount, setAmount] = useState<SwapValue['amount']>(EMPTY_AMOUNT)
@@ -45,7 +45,7 @@ export function useSyncWidgetInputs({
   const onAmountChange = useCallback(
     (field: Field, amount: string, origin?: 'max') => {
       if (origin === 'max') {
-        sendAnalyticsEvent(EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED, { ...trace })
+        sendAnalyticsEvent(SwapEventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED, { ...trace })
       }
       setType(field === Field.INPUT ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT)
       setAmount(amount)
@@ -54,7 +54,7 @@ export function useSyncWidgetInputs({
   )
 
   const onSwitchTokens = useCallback(() => {
-    sendAnalyticsEvent(EventName.SWAP_TOKENS_REVERSED, { ...trace })
+    sendAnalyticsEvent(SwapEventName.SWAP_TOKENS_REVERSED, { ...trace })
     setType((type) => invertTradeType(type))
     setTokens((tokens) => ({
       [Field.INPUT]: tokens[Field.OUTPUT],

src/components/Widget/settings.ts

@@ -1,5 +1,5 @@
 import { Percent } from '@uniswap/sdk-core'
-import { Slippage, SwapController, SwapEventHandlers } from '@uniswap/widgets'
+import { RouterPreference, Slippage, SwapController, SwapEventHandlers } from '@uniswap/widgets'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import { useCallback, useMemo, useState } from 'react'
 import { useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
@@ -37,6 +37,8 @@ export function useSyncWidgetSettings() {
     [setAppSlippage]
   )
 
+  const [routerPreference, onRouterPreferenceChange] = useState(RouterPreference.API)
+
   const onSettingsReset = useCallback(() => {
     setWidgetTtl(undefined)
     setAppTtl(DEFAULT_DEADLINE_FROM_NOW)
@@ -46,11 +48,15 @@ export function useSyncWidgetSettings() {
 
   const settings: SwapController['settings'] = useMemo(() => {
     const auto = appSlippage === 'auto'
-    return { slippage: { auto, max: widgetSlippage }, transactionTtl: widgetTtl }
-  }, [widgetSlippage, widgetTtl, appSlippage])
+    return {
+      slippage: { auto, max: widgetSlippage },
+      transactionTtl: widgetTtl,
+      routerPreference,
+    }
+  }, [appSlippage, widgetSlippage, widgetTtl, routerPreference])
   const settingsHandlers: SwapEventHandlers = useMemo(
-    () => ({ onSettingsReset, onSlippageChange, onTransactionDeadlineChange }),
-    [onSettingsReset, onSlippageChange, onTransactionDeadlineChange]
+    () => ({ onSettingsReset, onSlippageChange, onTransactionDeadlineChange, onRouterPreferenceChange }),
+    [onSettingsReset, onSlippageChange, onTransactionDeadlineChange, onRouterPreferenceChange]
   )
 
   return { settings: { settings, ...settingsHandlers } }

src/components/Widget/theme.ts

@@ -1,21 +1,30 @@
+import { Theme } from '@uniswap/widgets'
 import { darkTheme, lightTheme } from 'theme/colors'
 
 const fonts = {
   fontFamily: 'Inter custom',
 }
 
-export const LIGHT_THEME = {
+export const LIGHT_THEME: Theme = {
   // surface
-  container: lightTheme.backgroundSurface,
-  interactive: lightTheme.backgroundInteractive,
-  module: lightTheme.backgroundModule,
   accent: lightTheme.accentAction,
-  dialog: lightTheme.backgroundBackdrop,
+  accentSoft: lightTheme.accentActionSoft,
+  container: lightTheme.backgroundSurface,
+  module: lightTheme.backgroundModule,
+  interactive: lightTheme.backgroundInteractive,
   outline: lightTheme.backgroundOutline,
+  dialog: lightTheme.backgroundBackdrop,
+  scrim: lightTheme.backgroundScrim,
   // text
+  onAccent: lightTheme.white,
   primary: lightTheme.textPrimary,
   secondary: lightTheme.textSecondary,
+  hint: lightTheme.textTertiary,
   onInteractive: lightTheme.accentTextDarkPrimary,
+  // shadow
+  deepShadow: lightTheme.deepShadow,
+  networkDefaultShadow: lightTheme.networkDefaultShadow,
+
   // state
   success: lightTheme.accentSuccess,
   warning: lightTheme.accentWarning,
@@ -24,18 +33,25 @@ export const LIGHT_THEME = {
   ...fonts,
 }
 
-export const DARK_THEME = {
+export const DARK_THEME: Theme = {
   // surface
-  container: darkTheme.backgroundSurface,
-  interactive: darkTheme.backgroundInteractive,
-  module: darkTheme.backgroundModule,
   accent: darkTheme.accentAction,
-  dialog: darkTheme.backgroundBackdrop,
+  accentSoft: darkTheme.accentActionSoft,
+  container: darkTheme.backgroundSurface,
+  module: darkTheme.backgroundModule,
+  interactive: darkTheme.backgroundInteractive,
   outline: darkTheme.backgroundOutline,
+  dialog: darkTheme.backgroundBackdrop,
+  scrim: darkTheme.backgroundScrim,
   // text
+  onAccent: darkTheme.white,
   primary: darkTheme.textPrimary,
   secondary: darkTheme.textSecondary,
+  hint: darkTheme.textTertiary,
   onInteractive: darkTheme.accentTextLightPrimary,
+  // shadow
+  deepShadow: darkTheme.deepShadow,
+  networkDefaultShadow: darkTheme.networkDefaultShadow,
   // state
   success: darkTheme.accentSuccess,
   warning: darkTheme.accentWarning,

src/components/Widget/transactions.ts

@@ -1,5 +1,5 @@
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
-import { EventName, SectionName } from '@uniswap/analytics-events'
+import { InterfaceEventName, InterfaceSectionName, SwapEventName } from '@uniswap/analytics-events'
 import {
   TradeType,
   Transaction,
@@ -22,7 +22,7 @@ import { currencyId } from 'utils/currencyId'
 
 /** Integrates the Widget's transactions, showing the widget's transactions in the app. */
 export function useSyncWidgetTransactions() {
-  const trace = useTrace({ section: SectionName.WIDGET })
+  const trace = useTrace({ section: InterfaceSectionName.WIDGET })
 
   const { chainId } = useWeb3React()
   const addTransaction = useTransactionAdder()
@@ -49,7 +49,7 @@ export function useSyncWidgetTransactions() {
           type: type === WidgetTransactionType.WRAP ? WrapType.WRAP : WrapType.UNWRAP,
           ...trace,
         }
-        sendAnalyticsEvent(EventName.WRAP_TOKEN_TXN_SUBMITTED, eventProperties)
+        sendAnalyticsEvent(InterfaceEventName.WRAP_TOKEN_TXN_SUBMITTED, eventProperties)
         const { amount } = transaction.info
         addTransaction(response, {
           type: AppTransactionType.WRAP,
@@ -67,7 +67,7 @@ export function useSyncWidgetTransactions() {
           }),
           ...trace,
         }
-        sendAnalyticsEvent(EventName.SWAP_SIGNED, eventProperties)
+        sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, eventProperties)
         const baseTxInfo = {
           type: AppTransactionType.SWAP,
           tradeType,

src/components/swap/ConfirmSwapModal.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
-import { ModalName } from '@uniswap/analytics-events'
+import { InterfaceModalName } from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
@@ -122,7 +122,7 @@ export default function ConfirmSwapModal({
   )
 
   return (
-    <Trace modal={ModalName.CONFIRM_SWAP}>
+    <Trace modal={InterfaceModalName.CONFIRM_SWAP}>
       <TransactionConfirmationModal
         isOpen={isOpen}
         onDismiss={onModalDismiss}

src/components/swap/SwapDetailsDropdown.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import AnimatedDropdown from 'components/AnimatedDropdown'
@@ -123,8 +123,8 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
       <AutoColumn gap="sm" style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[BrowserEvent.onClick]}
-          name={EventName.SWAP_DETAILS_EXPANDED}
-          element={ElementName.SWAP_DETAILS_DROPDOWN}
+          name={SwapEventName.SWAP_DETAILS_EXPANDED}
+          element={InterfaceElementName.SWAP_DETAILS_DROPDOWN}
           shouldLogImpression={!showDetails}
         >
           <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>