fix: Handle Different Listing Failure Responses (#5940)

fix: handle different failure responses

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

.env.production

@@ -8,4 +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=true
+REACT_APP_SENTRY_ENABLED=false

.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 }}

.github/workflows/test.yml

@@ -30,6 +30,11 @@ jobs:
       - uses: ./.github/actions/setup
       - run: yarn prepare
       - run: yarn test
+      - uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
+          verbose: true
 
   cypress-build:
     runs-on: ubuntu-latest

README.md

@@ -1,5 +1,7 @@
 # Uniswap Labs Interface
 
+[![codecov](https://codecov.io/gh/Uniswap/interface/branch/main/graph/badge.svg?token=YVT2Y86O82)](https://codecov.io/gh/Uniswap/interface)
+
 [![Unit Tests](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml)
 [![Integration Tests](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml)
 [![Lint](https://github.com/Uniswap/interface/actions/workflows/lint.yml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/lint.yml)
@@ -40,10 +42,10 @@ For steps on local deployment, development, and code contribution, please see [C
 
 The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
-- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
-- View V2 liquidity: https://app.uniswap.org/#/pool/v2
-- Add V2 liquidity: https://app.uniswap.org/#/add/v2
-- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
+- Swap on Uniswap V2: <https://app.uniswap.org/#/swap?use=v2>
+- View V2 liquidity: <https://app.uniswap.org/#/pool/v2>
+- Add V2 liquidity: <https://app.uniswap.org/#/add/v2>
+- Migrate V2 liquidity to V3: <https://app.uniswap.org/#/migrate/v2>
 
 ## Accessing Uniswap V1
 

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

@@ -1,10 +1,12 @@
 import { getTestSelector } from '../utils'
 
-const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+const PUDGY_COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+const BONSAI_COLLECTION_ADDRESS = '0xec9c519d49856fd2f8133a0741b4dbe002ce211b'
 
 describe('Testing nfts', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/')
+    cy.get(getTestSelector('FiatOnrampAnnouncement-close')).first().click()
   })
 
   it('should load nft leaderboard', () => {
@@ -15,26 +17,21 @@ describe('Testing nfts', () => {
   })
 
   it('should load pudgy penguin collection page', () => {
-    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-collection-asset')).should('exist')
     cy.get(getTestSelector('nft-collection-filter-buy-now')).should('not.exist')
     cy.get(getTestSelector('nft-filter')).first().click()
     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/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-activity')).first().click()
     cy.get(getTestSelector('nft-activity-row')).should('exist')
   })
 
   it('should go to the details page', () => {
-    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-filter')).first().click()
     cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
     cy.get(getTestSelector('nft-details-link')).first().click()
@@ -45,19 +42,11 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
+    cy.visit(`#/nfts/asset/${BONSAI_COLLECTION_ADDRESS}/7580`)
     cy.get(getTestSelector('nft-details-description-text')).should('exist')
     cy.get(getTestSelector('nft-details-description')).click()
     cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
     cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
     cy.get(getTestSelector('nft-bag')).should('exist')
   })
-
-  it('should 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')
+  })
+})

package.json

@@ -96,6 +96,7 @@
     "cypress": "^10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
     "patch-package": "^6.4.7",
@@ -130,11 +131,11 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@sentry/react": "7.20.1",
+    "@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",
@@ -144,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.27.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -164,16 +165,16 @@
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.11.1",
     "@walletconnect/ethereum-provider": "^1.8.0",
-    "@web3-react/coinbase-wallet": "8.0.34-beta.0",
+    "@web3-react/coinbase-wallet": "8.0.35-beta.0",
     "@web3-react/core": "8.0.35-beta.0",
-    "@web3-react/eip1193": "8.0.26-beta.0",
+    "@web3-react/eip1193": "8.0.27-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.30-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",
-    "@web3-react/walletconnect": "8.0.36-beta.0",
+    "@web3-react/walletconnect": "8.0.37-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "cids": "^1.0.0",

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,12 @@
 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 { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
-import { BREAKPOINTS } from 'theme'
+import { BREAKPOINTS, ExternalLink, StyledRouterLink } 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 +14,194 @@ 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;
-  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;
-  }
+  font-weight: 700;
+`
+
+const ExternalTextLink = styled(ExternalLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
+`
+
+const TextLink = styled(StyledRouterLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 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">Community</ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/governance">Governance</ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/developers">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">Careers</ExternalTextLink>
+          </TraceEvent>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.BLOG_LINK}
+          >
+            <ExternalTextLink href="https://uniswap.org/blog">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">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/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/Button/index.tsx

@@ -97,7 +97,8 @@ export const ButtonPrimary = styled(BaseButton)`
 export const SmallButtonPrimary = styled(ButtonPrimary)`
   width: auto;
   font-size: 16px;
-  padding: 10px 16px;
+  padding: ${({ padding }) => padding ?? '8px 12px'};
+
   border-radius: 12px;
 `
 

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

@@ -17,10 +17,10 @@ interface DoubleCurrencyLogoProps {
   currency1?: Currency
 }
 
-const HigherLogo = styled(CurrencyLogo)`
+const HigherLogoWrapper = styled.div`
   z-index: 1;
 `
-const CoveredLogo = styled(CurrencyLogo)<{ sizeraw: number }>`
+const CoveredLogoWapper = styled.div<{ sizeraw: number }>`
   position: absolute;
   left: ${({ sizeraw }) => '-' + (sizeraw / 2).toString() + 'px'} !important;
 `
@@ -33,8 +33,16 @@ export default function DoubleCurrencyLogo({
 }: DoubleCurrencyLogoProps) {
   return (
     <Wrapper sizeraw={size} margin={margin}>
-      {currency0 && <HigherLogo currency={currency0} size={size.toString() + 'px'} />}
-      {currency1 && <CoveredLogo currency={currency1} size={size.toString() + 'px'} sizeraw={size} />}
+      {currency0 && (
+        <HigherLogoWrapper>
+          <CurrencyLogo hideL2Icon currency={currency0} size={size.toString() + 'px'} />
+        </HigherLogoWrapper>
+      )}
+      {currency1 && (
+        <CoveredLogoWapper sizeraw={size}>
+          <CurrencyLogo hideL2Icon currency={currency1} size={size.toString() + 'px'} />
+        </CoveredLogoWapper>
+      )}
     </Wrapper>
   )
 }

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,9 @@
 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 { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
@@ -215,6 +218,24 @@ 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"
+      />
+      <FeatureFlagOption
+        variant={SwapWidgetVariant}
+        value={useSwapWidgetFlag()}
+        featureFlag={FeatureFlag.swapWidget}
+        label="Swap Widget"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/FiatOnrampAnnouncement/index.tsx

@@ -1,16 +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'
@@ -94,26 +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('FOR Banner Click')
+    sendAnalyticsEvent(InterfaceEventName.FIAT_ONRAMP_BANNER_CLICKED)
     toggleWalletDropdown()
     acknowledge({ user: true })
   }, [acknowledge, toggleWalletDropdown])
@@ -125,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/Logo/AssetLogo.tsx

@@ -1,3 +1,4 @@
+import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React from 'react'
@@ -29,10 +30,28 @@ export type AssetLogoBaseProps = {
   backupImg?: string | null
   size?: string
   style?: React.CSSProperties
+  hideL2Icon?: boolean
 }
 type AssetLogoProps = AssetLogoBaseProps & { isNative?: boolean; address?: string | null; chainId?: number }
 
-// TODO(cartcrom): add prop to optionally render an L2Icon w/ the logo
+const LogoContainer = styled.div`
+  position: relative;
+  display: flex;
+`
+
+const L2NetworkLogo = styled.div<{ networkUrl?: string; parentSize: string }>`
+  --size: ${({ parentSize }) => `calc(${parentSize} / 2)`};
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  background: url(${({ networkUrl }) => networkUrl});
+  background-repeat: no-repeat;
+  background-size: ${({ parentSize }) => `calc(${parentSize} / 2) calc(${parentSize} / 2)`};
+  display: ${({ networkUrl }) => !networkUrl && 'none'};
+`
+
 /**
  * Renders an image by prioritizing a list of sources, and then eventually a fallback triangle alert
  */
@@ -44,25 +63,27 @@ export default function AssetLogo({
   backupImg,
   size = '24px',
   style,
-  ...rest
+  hideL2Icon = false,
 }: AssetLogoProps) {
   const imageProps = {
     alt: `${symbol ?? 'token'} logo`,
     size,
-    style,
-    ...rest,
   }
 
   const [src, nextSrc] = useTokenLogoSource(address, chainId, isNative, backupImg)
+  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
 
-  if (src) {
-    return <LogoImage {...imageProps} src={src} onError={nextSrc} />
-  } else {
-    return (
-      <MissingImageLogo size={size}>
-        {/* use only first 3 characters of Symbol for design reasons */}
-        {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
-      </MissingImageLogo>
-    )
-  }
+  return (
+    <LogoContainer style={style}>
+      {src ? (
+        <LogoImage {...imageProps} src={src} onError={nextSrc} />
+      ) : (
+        <MissingImageLogo size={size}>
+          {/* use only first 3 characters of Symbol for design reasons */}
+          {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
+        </MissingImageLogo>
+      )}
+      {!hideL2Icon && <L2NetworkLogo networkUrl={L2Icon} parentSize={size} />}
+    </LogoContainer>
+  )
 }

src/components/Logo/CurrencyLogo.tsx

@@ -15,6 +15,7 @@ export default function CurrencyLogo(
       address={props.currency?.wrapped.address}
       symbol={props.symbol ?? props.currency?.symbol}
       backupImg={(props.currency as TokenInfo)?.logoURI}
+      hideL2Icon={props.hideL2Icon ?? true}
       {...props}
     />
   )

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,10 +1,9 @@
 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'
 import AssetLogo from 'components/Logo/AssetLogo'
-import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
@@ -25,9 +24,6 @@ import styled from 'styled-components/macro'
 import { getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
 import * as styles from './SearchBar.css'
 
-const StyledLogoContainer = styled(LogoContainer)`
-  margin-right: 8px;
-`
 const PriceChangeContainer = styled.div`
   display: flex;
   align-items: center;
@@ -71,7 +67,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,10 +153,10 @@ 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)
+  const [bridgedAddress, bridgedChain] = useBridgedAddress(token)
   const tokenDetailsPath = getTokenDetailsURL(bridgedAddress ?? token.address, undefined, bridgedChain ?? token.chainId)
   // Close the modal on escape
   useEffect(() => {
@@ -181,6 +177,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)}
@@ -189,17 +186,15 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
       style={{ background: isHovered ? vars.color.lightGrayOverlay : 'none' }}
     >
       <Row style={{ width: '65%' }}>
-        <StyledLogoContainer>
-          <AssetLogo
-            isNative={token.address === NATIVE_CHAIN_ID}
-            address={token.address}
-            chainId={token.chainId}
-            symbol={token.symbol}
-            size="36px"
-            backupImg={token.logoURI}
-          />
-          <L2NetworkLogo networkUrl={L2Icon} size="16px" />
-        </StyledLogoContainer>
+        <AssetLogo
+          isNative={token.address === NATIVE_CHAIN_ID}
+          address={token.address}
+          chainId={token.chainId}
+          symbol={token.symbol}
+          size="36px"
+          backupImg={token.logoURI}
+          style={{ margin: '8px 8px 8px 0' }}
+        />
         <Column className={styles.suggestionPrimaryContainer}>
           <Row gap="4" width="full">
             <Box className={styles.primaryText}>{token.name}</Box>

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

@@ -3,11 +3,9 @@ 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'
@@ -71,17 +69,6 @@ const StyledPollingDot = styled.div<{ warning: boolean }>`
   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);
@@ -123,9 +110,6 @@ export default function Polling() {
   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
 
@@ -163,25 +147,6 @@ export default function Polling() {
   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

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'
@@ -45,6 +45,7 @@ interface CurrencySearchProps {
   showCommonBases?: boolean
   showCurrencyAmount?: boolean
   disableNonToken?: boolean
+  onlyShowCurrenciesWithBalance?: boolean
 }
 
 export function CurrencySearch({
@@ -56,6 +57,7 @@ export function CurrencySearch({
   disableNonToken,
   onDismiss,
   isOpen,
+  onlyShowCurrenciesWithBalance,
 }: CurrencySearchProps) {
   const { chainId } = useWeb3React()
   const theme = useTheme()
@@ -92,6 +94,10 @@ export function CurrencySearch({
       !balancesAreLoading
         ? filteredTokens
             .filter((token) => {
+              if (onlyShowCurrenciesWithBalance) {
+                return balances[token.address]?.greaterThan(0)
+              }
+
               // If there is no query, filter out unselected user-added tokens with no balance.
               if (!debouncedQuery && token instanceof UserAddedToken) {
                 if (selectedCurrency?.equals(token) || otherSelectedCurrency?.equals(token)) return true
@@ -101,7 +107,15 @@ export function CurrencySearch({
             })
             .sort(tokenComparator.bind(null, balances))
         : [],
-    [balances, balancesAreLoading, debouncedQuery, filteredTokens, otherSelectedCurrency, selectedCurrency]
+    [
+      balances,
+      balancesAreLoading,
+      debouncedQuery,
+      filteredTokens,
+      otherSelectedCurrency,
+      selectedCurrency,
+      onlyShowCurrenciesWithBalance,
+    ]
   )
   const isLoading = Boolean(balancesAreLoading && !tokenLoaderTimerElapsed)
 
@@ -114,11 +128,23 @@ export function CurrencySearch({
     const s = debouncedQuery.toLowerCase().trim()
 
     const tokens = filteredSortedTokens.filter((t) => !(t.equals(wrapped) || (disableNonToken && t.isNative)))
-    const natives = (disableNonToken || native.equals(wrapped) ? [wrapped] : [native, wrapped]).filter(
-      (n) => n.symbol?.toLowerCase()?.indexOf(s) !== -1 || n.name?.toLowerCase()?.indexOf(s) !== -1
-    )
+    const shouldShowWrapped =
+      !onlyShowCurrenciesWithBalance || (!balancesAreLoading && balances[wrapped.address]?.greaterThan(0))
+    const natives = (
+      disableNonToken || native.equals(wrapped) ? [wrapped] : shouldShowWrapped ? [native, wrapped] : [native]
+    ).filter((n) => n.symbol?.toLowerCase()?.indexOf(s) !== -1 || n.name?.toLowerCase()?.indexOf(s) !== -1)
+
     return [...natives, ...tokens]
-  }, [debouncedQuery, filteredSortedTokens, wrapped, disableNonToken, native])
+  }, [
+    debouncedQuery,
+    filteredSortedTokens,
+    onlyShowCurrenciesWithBalance,
+    balancesAreLoading,
+    balances,
+    wrapped,
+    disableNonToken,
+    native,
+  ])
 
   const handleCurrencySelect = useCallback(
     (currency: Currency, hasWarning?: boolean) => {
@@ -168,7 +194,9 @@ export function CurrencySearch({
 
   // if no results on main list, show option to expand into inactive
   const filteredInactiveTokens = useSearchInactiveTokenLists(
-    filteredTokens.length === 0 || (debouncedQuery.length > 2 && !isAddressSearch) ? debouncedQuery : undefined
+    !onlyShowCurrenciesWithBalance && (filteredTokens.length === 0 || (debouncedQuery.length > 2 && !isAddressSearch))
+      ? debouncedQuery
+      : undefined
   )
 
   // Timeout token loader after 3 seconds to avoid hanging in a loading state.
@@ -181,7 +209,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/SearchModal/CurrencySearchModal.tsx

@@ -17,6 +17,7 @@ interface CurrencySearchModalProps {
   showCommonBases?: boolean
   showCurrencyAmount?: boolean
   disableNonToken?: boolean
+  onlyShowCurrenciesWithBalance?: boolean
 }
 
 enum CurrencyModalView {
@@ -34,6 +35,7 @@ export default memo(function CurrencySearchModal({
   showCommonBases = false,
   showCurrencyAmount = true,
   disableNonToken = false,
+  onlyShowCurrenciesWithBalance = false,
 }: CurrencySearchModalProps) {
   const [modalView, setModalView] = useState<CurrencyModalView>(CurrencyModalView.search)
   const lastOpen = useLast(isOpen)
@@ -84,6 +86,7 @@ export default memo(function CurrencySearchModal({
           showCommonBases={showCommonBases}
           showCurrencyAmount={showCurrencyAmount}
           disableNonToken={disableNonToken}
+          onlyShowCurrenciesWithBalance={onlyShowCurrenciesWithBalance}
         />
       )
       break

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" hideL2Icon={false} />
+          <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

@@ -13,7 +13,7 @@ import TimePeriodSelector from './TimeSelector'
 function usePriceHistory(tokenPriceData: TokenPriceQuery): PricePoint[] | undefined {
   // Appends the current price to the end of the priceHistory array
   const priceHistory = useMemo(() => {
-    const market = tokenPriceData.tokens?.[0]?.market
+    const market = tokenPriceData.token?.market
     const priceHistory = market?.priceHistory?.filter(isPricePoint)
     const currentPrice = market?.price?.value
     if (Array.isArray(priceHistory) && currentPrice !== undefined) {
@@ -58,7 +58,7 @@ function Chart({
   const timePeriod = useAtomValue(pageTimePeriodAtom)
 
   return (
-    <ChartContainer>
+    <ChartContainer data-testid="chart-container">
       <ParentSize>
         {({ width }) => <PriceChart prices={prices ?? null} width={width} height={436} timePeriod={timePeriod} />}
       </ParentSize>

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

@@ -1,12 +1,11 @@
 import { WidgetSkeleton } from 'components/Widget'
-import { WIDGET_WIDTH } from 'components/Widget'
+import { DEFAULT_WIDGET_WIDTH } from 'components/Widget'
 import { ArrowLeft } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
 import { textFadeIn } from 'theme/styles'
 
 import { LoadingBubble } from '../loading'
-import { LogoContainer } from '../TokenTable/TokenRow'
 import { AboutContainer, AboutHeader } from './About'
 import { BreadcrumbNavLink } from './BreadcrumbNavLink'
 import { TokenPrice } from './PriceChart'
@@ -25,7 +24,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;
@@ -44,7 +43,7 @@ export const RightPanel = styled.div`
   display: none;
   flex-direction: column;
   gap: 20px;
-  width: ${WIDGET_WIDTH}px;
+  width: ${DEFAULT_WIDGET_WIDTH}px;
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
     display: flex;
@@ -227,9 +226,7 @@ export default function TokenDetailsSkeleton() {
       </BreadcrumbNavLink>
       <TokenInfoContainer>
         <TokenNameCell>
-          <LogoContainer>
-            <TokenLogoBubble />
-          </LogoContainer>
+          <TokenLogoBubble />
           <TitleBubble />
         </TokenNameCell>
       </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};
 `
@@ -51,13 +45,20 @@ export const StatsWrapper = styled.div`
 
 type NumericStat = number | undefined | null
 
-function Stat({ value, title, description }: { value: NumericStat; title: ReactNode; description?: ReactNode }) {
+function Stat({
+  dataCy,
+  value,
+  title,
+  description,
+}: {
+  dataCy: string
+  value: NumericStat
+  title: ReactNode
+  description?: ReactNode
+}) {
   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>
   )
@@ -80,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>
@@ -95,8 +98,8 @@ export default function StatsSection(props: StatsSectionProps) {
             />
           </StatPair>
           <StatPair>
-            <Stat value={priceLow52W} title={<Trans>52W low</Trans>} />
-            <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} />
+            <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,7 +1,8 @@
 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 { Field } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { AboutSection } from 'components/Tokens/TokenDetails/About'
@@ -20,7 +21,6 @@ import TokenDetailsSkeleton, {
   TokenNameCell,
 } from 'components/Tokens/TokenDetails/Skeleton'
 import StatsSection from 'components/Tokens/TokenDetails/StatsSection'
-import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
 import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import Widget from 'components/Widget'
@@ -111,7 +111,7 @@ export default function TokenDetails({
 
   const pageChainId = CHAIN_NAME_TO_CHAIN_ID[chain]
 
-  const tokenQueryData = tokenQuery.tokens?.[0]
+  const tokenQueryData = tokenQuery.token
   const crossChainMap = useMemo(
     () =>
       tokenQueryData?.project?.tokens.reduce((map, current) => {
@@ -168,15 +168,13 @@ export default function TokenDetails({
     [continueSwap, setContinueSwap]
   )
 
-  const L2Icon = getChainInfo(pageChainId)?.circleLogoUrl
-
   // address will never be undefined if token is defined; address is checked here to appease typechecker
   if (token === undefined || !address) {
     return <InvalidTokenDetails chainName={address && getChainInfo(pageChainId)?.label} />
   }
   return (
     <Trace
-      page={PageName.TOKEN_DETAILS_PAGE}
+      page={InterfacePageName.TOKEN_DETAILS_PAGE}
       properties={{ tokenAddress: address, tokenName: token?.name }}
       shouldLogImpression
     >
@@ -186,12 +184,10 @@ 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" />
-                  <L2NetworkLogo networkUrl={L2Icon} size="16px" />
-                </LogoContainer>
+                <CurrencyLogo currency={token} size="32px" hideL2Icon={false} />
+
                 {token.name ?? <Trans>Name not found</Trans>}
                 <TokenSymbol>{token.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
               </TokenNameCell>
@@ -206,18 +202,15 @@ export default function TokenDetails({
               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 />
@@ -226,6 +219,7 @@ export default function TokenDetails({
         <RightPanel>
           <Widget
             token={token ?? undefined}
+            defaultField={Field.OUTPUT}
             onTokenChange={navigateToWidgetSelectedToken}
             onReviewSwapClick={onReviewSwapClick}
           />

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,17 @@
 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 { getChainInfo } from 'constants/chainInfo'
+import { MouseoverTooltip } from 'components/Tooltip'
 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 +31,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 +199,6 @@ const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
   display: flex;
   gap: 4px;
-  height: 100%;
   justify-content: flex-end;
   width: 100%;
 
@@ -280,21 +278,11 @@ export const SparkLineLoadingBubble = styled(LongLoadingBubble)`
   height: 4px;
 `
 
-export const L2NetworkLogo = styled.div<{ networkUrl?: string; size?: string }>`
-  height: ${({ size }) => size ?? '12px'};
-  width: ${({ size }) => size ?? '12px'};
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  background: url(${({ networkUrl }) => networkUrl});
-  background-repeat: no-repeat;
-  background-size: ${({ size }) => (size ? `${size} ${size}` : '12px 12px')};
-  display: ${({ networkUrl }) => !networkUrl && 'none'};
-`
-export const LogoContainer = styled.div`
-  position: relative;
-  align-items: center;
+const InfoIconContainer = styled.div`
+  margin-left: 2px;
   display: flex;
+  align-items: center;
+  cursor: help;
 `
 
 export const HEADER_DESCRIPTIONS: Record<TokenSortMethod, ReactNode | undefined> = {
@@ -333,7 +321,13 @@ function HeaderCell({
         </>
       )}
       {category}
-      {description && <InfoTip text={description}></InfoTip>}
+      {description && (
+        <MouseoverTooltip text={description} placement="right">
+          <InfoIconContainer>
+            <Info size={14} />
+          </InfoIconContainer>
+        </MouseoverTooltip>
+      )}
     </HeaderCellWrapper>
   )
 }
@@ -366,15 +360,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,34 +424,29 @@ 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()
   const chainId = CHAIN_NAME_TO_CHAIN_ID[filterNetwork]
-  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
   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,23 +454,22 @@ 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)}
+        onClick={() =>
+          sendAnalyticsEvent(InterfaceEventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)
+        }
       >
         <TokenRow
           header={false}
-          listNumber={rank}
+          listNumber={volumeRank}
           tokenInfo={
             <ClickableName>
-              <LogoContainer>
-                <QueryTokenLogo token={token} />
-                <L2NetworkLogo networkUrl={L2Icon} />
-              </LogoContainer>
+              <QueryTokenLogo token={token} />
               <TokenInfoCell>
-                <TokenName>{tokenName}</TokenName>
-                <TokenSymbol>{tokenSymbol}</TokenSymbol>
+                <TokenName data-cy="token-name">{token.name}</TokenName>
+                <TokenSymbol>{token.symbol}</TokenSymbol>
               </TokenInfoCell>
             </ClickableName>
           }

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -76,12 +76,11 @@ function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
 }
 
 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, loadingTokens, sparklines } = useTopTokens(chainName)
+  const { tokens, tokenVolumeRank, loadingTokens, sparklines } = useTopTokens(chainName)
 
   /* loading and error state */
-  if (loadingTokens) {
+  if (loadingTokens && !tokens) {
     return <LoadingTokenTable rowCount={PAGE_SIZE} />
   } else if (!tokens) {
     return (
@@ -103,13 +102,14 @@ export default function TokenTable() {
         <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,5 +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'
@@ -20,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'
@@ -56,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;
@@ -69,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;
 `
@@ -126,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;
@@ -142,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;
 `
 
@@ -167,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;
 `
 
@@ -176,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()
@@ -252,7 +248,7 @@ const AuthenticatedHeader = () => {
 
   const openFiatOnrampModal = useOpenModal(ApplicationModal.FIAT_ONRAMP)
   const openFoRModalWithAnalytics = useCallback(() => {
-    sendAnalyticsEvent('Fiat OnRamp Widget Opened')
+    sendAnalyticsEvent(InterfaceEventName.FIAT_ONRAMP_WIDGET_OPENED)
     openFiatOnrampModal()
   }, [openFiatOnrampModal])
 
@@ -279,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>}
@@ -308,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
@@ -334,7 +329,11 @@ const AuthenticatedHeader = () => {
                 <ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary>
               ) : (
                 <>
-                  {fiatOnrampAvailabilityLoading ? <StyledLoadingButtonSpinner /> : <CreditCard />}{' '}
+                  {fiatOnrampAvailabilityLoading ? (
+                    <StyledLoadingButtonSpinner />
+                  ) : (
+                    <CreditCard height="20px" width="20px" />
+                  )}{' '}
                   <Trans>Buy crypto</Trans>
                 </>
               )}
@@ -370,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

@@ -70,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={[]} />)
@@ -82,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={[]} />)
@@ -96,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={[]} />)
@@ -109,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={[]} />)
@@ -121,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/Web3Provider/index.tsx

@@ -1,7 +1,6 @@
 import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
 import { Connection } from 'connection'
-import { ConnectionType, setMetMaskErrorHandler } from 'connection'
 import { getConnectionName } from 'connection/utils'
 import { isSupportedChain } from 'constants/chains'
 import { RPC_PROVIDERS } from 'constants/providers'
@@ -9,19 +8,8 @@ import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/tra
 import useEagerlyConnect from 'hooks/useEagerlyConnect'
 import useOrderedConnections from 'hooks/useOrderedConnections'
 import { ReactNode, useEffect, useMemo } from 'react'
-import { updateConnectionError } from 'state/connection/reducer'
-import { useAppDispatch } from 'state/hooks'
 
 export default function Web3Provider({ children }: { children: ReactNode }) {
-  const dispatch = useAppDispatch()
-
-  // Set metamask error handler for metamask disconnection warning modal.
-  useEffect(() => {
-    setMetMaskErrorHandler((error: Error) =>
-      dispatch(updateConnectionError({ connectionType: ConnectionType.INJECTED, error: error.message }))
-    )
-  }, [dispatch])
-
   useEagerlyConnect()
   const connections = useOrderedConnections()
   const connectors: [Connector, Web3ReactHooks][] = connections.map(({ hooks, connector }) => [connector, hooks])

src/components/Web3Status/MetamaskConnectionError.tsx

@@ -1,97 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { ButtonPrimary } from 'components/Button'
-import { AutoColumn } from 'components/Column'
-import Modal from 'components/Modal'
-import { RowBetween } from 'components/Row'
-import { AlertTriangle } from 'react-feather'
-import { Text } from 'rebass'
-import styled from 'styled-components/macro'
-import { CloseIcon, ThemedText } from 'theme'
-
-import { useModalIsOpen, useToggleMetamaskConnectionErrorModal } from '../../state/application/hooks'
-import { ApplicationModal } from '../../state/application/reducer'
-
-const Wrapper = styled.div`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-`
-
-const Container = styled.div`
-  width: 100%;
-  padding: 32px 32px;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-`
-
-const LogoContainer = styled.div`
-  display: flex;
-  gap: 16px;
-`
-
-const ShortColumn = styled(AutoColumn)`
-  margin-top: 10px;
-`
-
-const InfoText = styled(Text)`
-  padding: 0 12px 0 12px;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-`
-
-const StyledButton = styled(ButtonPrimary)`
-  margin-top: 24px;
-  width: 100%;
-  font-weight: 600;
-`
-
-const WarningIcon = styled(AlertTriangle)`
-  width: 76px;
-  height: 76px;
-  margin-top: 4px;
-  margin-bottom: 28px;
-  stroke-width: 1px;
-  margin-right: 4px;
-  color: ${({ theme }) => theme.accentCritical};
-`
-
-const onReconnect = () => window.location.reload()
-
-const header = 'Wallet disconnected'
-const description = 'A Metamask error caused your wallet to disconnect. Reload the page to reconnect.'
-
-export default function MetamaskConnectionError() {
-  const modalOpen = useModalIsOpen(ApplicationModal.METAMASK_CONNECTION_ERROR)
-  const toggleModal = useToggleMetamaskConnectionErrorModal()
-
-  return (
-    <Modal isOpen={modalOpen} onDismiss={toggleModal} minHeight={false} maxHeight={90}>
-      <Wrapper>
-        <RowBetween style={{ padding: '1rem' }}>
-          <div />
-          <CloseIcon onClick={toggleModal} />
-        </RowBetween>
-        <Container>
-          <AutoColumn>
-            <LogoContainer>
-              <WarningIcon />
-            </LogoContainer>
-          </AutoColumn>
-          <ShortColumn>
-            <InfoText>
-              <ThemedText.HeadlineSmall marginBottom="8px">{header}</ThemedText.HeadlineSmall>
-              <ThemedText.BodySmall>{description}</ThemedText.BodySmall>
-            </InfoText>
-          </ShortColumn>
-          <StyledButton onClick={onReconnect}>
-            <Trans>Reload</Trans>
-          </StyledButton>
-        </Container>
-      </Wrapper>
-    </Modal>
-  )
-}

src/components/Web3Status/index.tsx

@@ -1,16 +1,16 @@
 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'
 import WalletDropdown from 'components/WalletDropdown'
-import { getConnection, getIsMetaMask } from 'connection/utils'
+import { getConnection } from 'connection/utils'
 import { Portal } from 'nft/components/common/Portal'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
@@ -22,7 +22,6 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import {
   useCloseModal,
   useModalIsOpen,
-  useToggleMetamaskConnectionErrorModal,
   useToggleWalletDropdown,
   useToggleWalletModal,
 } from '../../state/application/hooks'
@@ -35,7 +34,6 @@ import StatusIcon from '../Identicon/StatusIcon'
 import Loader from '../Loader'
 import { RowBetween } from '../Row'
 import WalletModal from '../WalletModal'
-import MetamaskConnectionError from './MetamaskConnectionError'
 
 // https://stackoverflow.com/a/31617326
 const FULL_BORDER_RADIUS = 9999
@@ -209,20 +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 toggleMetamaskConnectionErrorModal = useToggleMetamaskConnectionErrorModal()
   const walletIsOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
-  const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
-  useEffect(() => {
-    if (getIsMetaMask() && error) {
-      toggleMetamaskConnectionErrorModal()
-    }
-  }, [error, toggleMetamaskConnectionErrorModal])
+  const error = useAppSelector((state) => state.connection.errorByConnectionType[connectionType])
 
   const allTransactions = useAllTransactions()
 
@@ -284,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}>
@@ -326,7 +318,6 @@ export default function Web3Status() {
       <Web3StatusInner />
       <FiatOnrampAnnouncement />
       <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
-      <MetamaskConnectionError />
       <Portal>
         <span ref={walletRef}>
           <WalletDropdown />

src/components/Widget/index.tsx

@@ -1,10 +1,16 @@
 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 {
   AddEthereumChainParameter,
   EMPTY_TOKEN_LIST,
+  Field,
   OnReviewSwapClick,
   SwapWidget,
   SwapWidgetSkeleton,
@@ -21,6 +27,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'
@@ -30,7 +37,7 @@ import { useSyncWidgetSettings } from './settings'
 import { DARK_THEME, LIGHT_THEME } from './theme'
 import { useSyncWidgetTransactions } from './transactions'
 
-export const WIDGET_WIDTH = 360
+export const DEFAULT_WIDGET_WIDTH = 360
 
 const WIDGET_ROUTER_URL = 'https://api.uniswap.org/v1/'
 
@@ -40,25 +47,39 @@ function useWidgetTheme() {
 
 interface WidgetProps {
   token?: Currency
+  width?: number | string
+  defaultField: Field
   onTokenChange?: (token: Currency) => void
   onReviewSwapClick?: OnReviewSwapClick
 }
 
-export default function Widget({ token, onTokenChange, onReviewSwapClick }: WidgetProps) {
+export default function Widget({
+  token,
+  width = DEFAULT_WIDGET_WIDTH,
+  defaultField,
+  onTokenChange,
+  onReviewSwapClick,
+}: WidgetProps) {
   const { connector, provider } = useWeb3React()
   const locale = useActiveLocale()
   const theme = useWidgetTheme()
-  const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange })
+  const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange, defaultField })
   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 +93,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 +106,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 +121,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 +148,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]
   )
@@ -147,8 +168,9 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
         routerUrl={WIDGET_ROUTER_URL}
         locale={locale}
         theme={theme}
-        width={WIDGET_WIDTH}
+        width={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
@@ -169,5 +191,5 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
 
 export function WidgetSkeleton() {
   const theme = useWidgetTheme()
-  return <SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
+  return <SwapWidgetSkeleton theme={theme} width={DEFAULT_WIDGET_WIDTH} />
 }

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'
@@ -21,31 +21,34 @@ function includesDefaultToken(tokens: SwapTokens) {
  */
 export function useSyncWidgetInputs({
   token,
+  defaultField,
   onTokenChange,
 }: {
   token?: Currency
+  defaultField: Field
+
   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)
-  const [tokens, setTokens] = useState<SwapTokens>({ [Field.OUTPUT]: token, default: token })
+  const [tokens, setTokens] = useState<SwapTokens>({ [defaultField]: token, default: token })
 
   useEffect(() => {
     setTokens((tokens) => {
       const update = { ...tokens, default: token }
       if (!includesDefaultToken(update)) {
-        return { [Field.OUTPUT]: update.default, default: update.default }
+        return { [defaultField]: update.default, default: update.default }
       }
       return update
     })
-  }, [token])
+  }, [defaultField, token])
 
   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 +57,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,45 +1,68 @@
+import { Theme } from '@uniswap/widgets'
 import { darkTheme, lightTheme } from 'theme/colors'
+import { Z_INDEX } from 'theme/zIndex'
+
+const zIndex = {
+  modal: Z_INDEX.modal,
+}
 
 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,
   error: lightTheme.accentCritical,
 
   ...fonts,
+  zIndex,
 }
 
-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,
   error: darkTheme.accentCritical,
 
   ...fonts,
+  zIndex,
 }

src/components/Widget/transactions.ts

@@ -1,15 +1,23 @@
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
-import { EventName, SectionName } from '@uniswap/analytics-events'
+import { InterfaceEventName, InterfaceSectionName, SwapEventName } from '@uniswap/analytics-events'
+import { Trade } from '@uniswap/router-sdk'
+import { Currency, Percent } from '@uniswap/sdk-core'
 import {
+  OnTxSuccess,
   TradeType,
   Transaction,
   TransactionEventHandlers,
   TransactionInfo,
+  TransactionType,
   TransactionType as WidgetTransactionType,
 } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
-import { WrapType } from 'hooks/useWrapCallback'
-import { formatSwapSignedAnalyticsEventProperties, formatToDecimal, getTokenAddress } from 'lib/utils/analytics'
+import {
+  formatPercentInBasisPointsNumber,
+  formatSwapSignedAnalyticsEventProperties,
+  formatToDecimal,
+  getTokenAddress,
+} from 'lib/utils/analytics'
 import { useCallback, useMemo } from 'react'
 import { useTransactionAdder } from 'state/transactions/hooks'
 import {
@@ -19,10 +27,46 @@ import {
   WrapTransactionInfo,
 } from 'state/transactions/types'
 import { currencyId } from 'utils/currencyId'
+import { computeRealizedPriceImpact } from 'utils/prices'
+
+interface AnalyticsEventProps {
+  trade: Trade<Currency, Currency, TradeType>
+  gasUsed: string | undefined
+  blockNumber: number | undefined
+  hash: string | undefined
+  allowedSlippage: Percent
+  succeeded: boolean
+}
+
+const formatAnalyticsEventProperties = ({
+  trade,
+  hash,
+  allowedSlippage,
+  succeeded,
+  gasUsed,
+  blockNumber,
+}: AnalyticsEventProps) => ({
+  estimated_network_fee_usd: gasUsed,
+  transaction_hash: hash,
+  token_in_address: getTokenAddress(trade.inputAmount.currency),
+  token_out_address: getTokenAddress(trade.outputAmount.currency),
+  token_in_symbol: trade.inputAmount.currency.symbol,
+  token_out_symbol: trade.outputAmount.currency.symbol,
+  token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
+  token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
+  price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
+  allowed_slippage_basis_points: formatPercentInBasisPointsNumber(allowedSlippage),
+  chain_id:
+    trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId
+      ? trade.inputAmount.currency.chainId
+      : undefined,
+  swap_quote_block_number: blockNumber,
+  succeeded,
+})
 
 /** 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()
@@ -46,10 +90,10 @@ export function useSyncWidgetTransactions() {
           amount: transactionAmount
             ? formatToDecimal(transactionAmount, transactionAmount?.currency.decimals)
             : undefined,
-          type: type === WidgetTransactionType.WRAP ? WrapType.WRAP : WrapType.UNWRAP,
+          type: type === WidgetTransactionType.WRAP ? TransactionType.WRAP : TransactionType.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 +111,7 @@ export function useSyncWidgetTransactions() {
           }),
           ...trace,
         }
-        sendAnalyticsEvent(EventName.SWAP_SIGNED, eventProperties)
+        sendAnalyticsEvent(SwapEventName.SWAP_SIGNED, eventProperties)
         const baseTxInfo = {
           type: AppTransactionType.SWAP,
           tradeType,
@@ -94,7 +138,24 @@ export function useSyncWidgetTransactions() {
     [addTransaction, chainId, trace]
   )
 
-  const txHandlers: TransactionEventHandlers = useMemo(() => ({ onTxSubmit }), [onTxSubmit])
+  const onTxSuccess: OnTxSuccess = useCallback((hash: string, tx) => {
+    if (tx.info.type === TransactionType.SWAP) {
+      const { trade, slippageTolerance } = tx.info
+      sendAnalyticsEvent(
+        SwapEventName.SWAP_TRANSACTION_COMPLETED,
+        formatAnalyticsEventProperties({
+          trade,
+          hash,
+          gasUsed: tx.receipt?.gasUsed?.toString(),
+          blockNumber: tx.receipt?.blockNumber,
+          allowedSlippage: slippageTolerance,
+          succeeded: tx.receipt?.status === 1,
+        })
+      )
+    }
+  }, [])
+
+  const txHandlers: TransactionEventHandlers = useMemo(() => ({ onTxSubmit, onTxSuccess }), [onTxSubmit, onTxSuccess])
 
   return { transactions: { ...txHandlers } }
 }

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}>

src/components/swap/SwapModalFooter.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, TradeType } from '@uniswap/sdk-core'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import {
@@ -131,8 +131,8 @@ export default function SwapModalFooter({
       <AutoRow>
         <TraceEvent
           events={[BrowserEvent.onClick]}
-          element={ElementName.CONFIRM_SWAP_BUTTON}
-          name={EventName.SWAP_SUBMITTED_BUTTON_CLICKED}
+          element={InterfaceElementName.CONFIRM_SWAP_BUTTON}
+          name={SwapEventName.SWAP_SUBMITTED_BUTTON_CLICKED}
           properties={formatAnalyticsEventProperties({
             trade,
             hash,
@@ -150,7 +150,7 @@ export default function SwapModalFooter({
             onClick={onConfirm}
             disabled={disabledConfirm}
             style={{ margin: '10px 0 0 0' }}
-            id={ElementName.CONFIRM_SWAP_BUTTON}
+            id={InterfaceElementName.CONFIRM_SWAP_BUTTON}
           >
             <Text fontSize={20} fontWeight={500}>
               <Trans>Confirm Swap</Trans>

src/components/swap/SwapModalHeader.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
-import { EventName, SwapPriceUpdateUserResponse } from '@uniswap/analytics-events'
+import { SwapEventName, SwapPriceUpdateUserResponse } from '@uniswap/analytics-events'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { getPriceUpdateBasisPoints } from 'lib/utils/analytics'
 import { useEffect, useState } from 'react'
@@ -91,7 +91,7 @@ export default function SwapModalHeader({
   useEffect(() => {
     if (shouldLogModalCloseEvent && showAcceptChanges)
       sendAnalyticsEvent(
-        EventName.SWAP_PRICE_UPDATE_ACKNOWLEDGED,
+        SwapEventName.SWAP_PRICE_UPDATE_ACKNOWLEDGED,
         formatAnalyticsEventProperties(trade, priceUpdate, SwapPriceUpdateUserResponse.REJECTED)
       )
     setShouldLogModalCloseEvent(false)

src/components/swap/SwapRoute.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 { Protocol } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
@@ -66,8 +66,8 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
       <TraceEvent
         events={[BrowserEvent.onClick]}
-        name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}
-        element={ElementName.AUTOROUTER_VISUALIZATION_ROW}
+        name={SwapEventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}
+        element={InterfaceElementName.AUTOROUTER_VISUALIZATION_ROW}
         shouldLogImpression={!open}
       >
         <RowBetween onClick={() => setOpen(!open)}>

src/connection/index.ts

@@ -25,21 +25,10 @@ export interface Connection {
   type: ConnectionType
 }
 
-let metaMaskErrorHandler: (error: Error) => void | undefined
-
-export function setMetMaskErrorHandler(errorHandler: (error: Error) => void) {
-  metaMaskErrorHandler = errorHandler
-}
-
 function onError(error: Error) {
   console.debug(`web3-react error: ${error}`)
 }
 
-function onMetamaskError(error: Error) {
-  onError(error)
-  metaMaskErrorHandler?.(error)
-}
-
 const [web3Network, web3NetworkHooks] = initializeConnector<Network>(
   (actions) => new Network({ actions, urlMap: RPC_PROVIDERS, defaultChainId: 1 })
 )
@@ -49,9 +38,7 @@ export const networkConnection: Connection = {
   type: ConnectionType.NETWORK,
 }
 
-const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>(
-  (actions) => new MetaMask({ actions, onError: onMetamaskError })
-)
+const [web3Injected, web3InjectedHooks] = initializeConnector<MetaMask>((actions) => new MetaMask({ actions, onError }))
 export const injectedConnection: Connection = {
   connector: web3Injected,
   hooks: web3InjectedHooks,

src/connection/utils.ts

@@ -12,8 +12,15 @@ export function getIsInjected(): boolean {
   return Boolean(window.ethereum)
 }
 
-export function getIsMetaMask(): boolean {
-  return window.ethereum?.isMetaMask ?? false
+export function getIsBraveWallet(): boolean {
+  return window.ethereum?.isBraveWallet ?? false
+}
+
+export function getIsMetaMaskWallet(): boolean {
+  // When using Brave browser, `isMetaMask` is set to true when using the built-in wallet
+  // This function should return true only when using the MetaMask extension
+  // https://wallet-docs.brave.com/ethereum/wallet-detection#compatability-with-metamask
+  return (window.ethereum?.isMetaMask ?? false) && !getIsBraveWallet()
 }
 
 export function getIsCoinbaseWallet(): boolean {
@@ -50,10 +57,13 @@ export function getConnection(c: Connector | ConnectionType) {
   }
 }
 
-export function getConnectionName(connectionType: ConnectionType, isMetaMask?: boolean) {
+export function getConnectionName(
+  connectionType: ConnectionType,
+  hasMetaMaskExtension: boolean = getIsMetaMaskWallet()
+) {
   switch (connectionType) {
     case ConnectionType.INJECTED:
-      return isMetaMask ? 'MetaMask' : 'Browser Wallet'
+      return hasMetaMaskExtension ? 'MetaMask' : 'Browser Wallet'
     case ConnectionType.COINBASE_WALLET:
       return 'Coinbase Wallet'
     case ConnectionType.WALLET_CONNECT:

src/constants/TokenLogoLookupTable.ts

@@ -13,11 +13,11 @@ class TokenLogoLookupTable {
       store.getState().lists.byUrl[list].current?.tokens.forEach((token) => {
         if (token.logoURI) {
           const lowercaseAddress = token.address.toLowerCase()
-          const currentEntry = dict[lowercaseAddress]
+          const currentEntry = dict[lowercaseAddress + ':' + token.chainId]
           if (currentEntry) {
             currentEntry.push(token.logoURI)
           } else {
-            dict[lowercaseAddress] = [token.logoURI]
+            dict[lowercaseAddress + ':' + token.chainId] = [token.logoURI]
           }
         }
       })
@@ -25,13 +25,14 @@ class TokenLogoLookupTable {
     this.dict = dict
     this.initialized = true
   }
-  getIcons(address?: string | null) {
+  getIcons(address?: string | null, chainId: number | null = 1) {
     if (!address) return undefined
 
     if (!this.initialized) {
       this.initialize()
     }
-    return this.dict[address.toLowerCase()]
+
+    return this.dict[address.toLowerCase() + ':' + chainId]
   }
 }
 

src/constants/governance.ts

@@ -20,7 +20,8 @@ export const COMMON_CONTRACT_NAMES: Record<number, { [address: string]: string }
   },
 }
 
-export const DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS = 13
+// in PoS, ethereum block time is 12s, see https://ethereum.org/en/developers/docs/blocks/#block-time
+export const DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS = 12
 
 // Block time here is slightly higher (~1s) than average in order to avoid ongoing proposals past the displayed time
 export const AVERAGE_BLOCK_TIME_IN_SECS: { [chainId: number]: number } = {

src/constants/lists.ts

@@ -8,7 +8,6 @@ const COINGECKO_LIST = 'https://tokens.coingecko.com/uniswap/all.json'
 const COMPOUND_LIST = 'https://raw.githubusercontent.com/compound-finance/token-list/master/compound.tokenlist.json'
 const GEMINI_LIST = 'https://www.gemini.com/uniswap/manifest.json'
 const KLEROS_LIST = 't2crtokens.eth'
-const ROLL_LIST = 'https://app.tryroll.com/tokens.json'
 const SET_LIST = 'https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json'
 const WRAPPED_LIST = 'wrapped.tokensoft.eth'
 
@@ -30,7 +29,6 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   GEMINI_LIST,
   WRAPPED_LIST,
   SET_LIST,
-  ROLL_LIST,
   ARBITRUM_LIST,
   OPTIMISM_LIST,
   CELO_LIST,

src/featureFlags/flags/featureFlags.ts

@@ -2,4 +2,7 @@ export enum FeatureFlag {
   fiatOnramp = 'fiatOnramp',
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
+  nftListV2 = 'nftListV2',
+  payWithAnyToken = 'payWithAnyToken',
+  swapWidget = 'swapWidget',
 }

src/featureFlags/flags/nftListV2.ts

@@ -0,0 +1,7 @@
+import { BaseVariant } from '../index'
+
+export function useNftListV2Flag(): BaseVariant {
+  return BaseVariant.Enabled
+}
+
+export { BaseVariant as NftListV2Variant }

src/featureFlags/flags/payWithAnyToken.ts

@@ -0,0 +1,7 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function usePayWithAnyTokenFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.payWithAnyToken)
+}
+
+export { BaseVariant as PayWithAnyTokenVariant }

src/featureFlags/flags/permit2.ts

@@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
 export function usePermit2Flag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.permit2)
+  return useBaseFlag(FeatureFlag.permit2, BaseVariant.Enabled)
 }
 
 export function usePermit2Enabled(): boolean {

src/featureFlags/flags/swapWidget.ts

@@ -0,0 +1,11 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useSwapWidgetFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.swapWidget, BaseVariant.Control)
+}
+
+export function useSwapWidgetEnabled(): boolean {
+  return useSwapWidgetFlag() === BaseVariant.Enabled
+}
+
+export { BaseVariant as SwapWidgetVariant }

src/graphql/data/Token.ts

@@ -14,8 +14,8 @@ The difference between Token and TokenProject:
     TokenProjectMarket is aggregated market data (aggregated over multiple dexes and centralized exchanges) that we get from coingecko.
 */
 gql`
-  query Token($contract: ContractInput!) {
-    tokens(contracts: [$contract]) {
+  query Token($chain: Chain!, $address: String) {
+    token(chain: $chain, address: $address) {
       id
       decimals
       name
@@ -23,31 +23,39 @@ gql`
       address
       symbol
       market(currency: USD) {
+        id
         totalValueLocked {
+          id
           value
           currency
         }
         price {
+          id
           value
           currency
         }
         volume24H: volume(duration: DAY) {
+          id
           value
           currency
         }
         priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
+          id
           value
         }
         priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
+          id
           value
         }
       }
       project {
+        id
         description
         homepageUrl
         twitterName
         logoUrl
         tokens {
+          id
           chain
           address
         }
@@ -58,7 +66,7 @@ gql`
 
 export type { Chain, TokenQuery } from './__generated__/types-and-hooks'
 
-export type TokenQueryData = NonNullable<TokenQuery['tokens']>[number]
+export type TokenQueryData = TokenQuery['token']
 
 // TODO: Return a QueryToken from useTokenQuery instead of TokenQueryData to make it more usable in Currency-centric interfaces.
 export class QueryToken extends WrappedTokenInfo {

src/graphql/data/TokenPrice.ts

@@ -1,14 +1,19 @@
 import gql from 'graphql-tag'
 
-// TODO: Implemnt this as a refetchable fragment on tokenQuery when backend adds support
 gql`
-  query TokenPrice($contract: ContractInput!, $duration: HistoryDuration!) {
-    tokens(contracts: [$contract]) {
+  query TokenPrice($chain: Chain!, $address: String, $duration: HistoryDuration!) {
+    token(chain: $chain, address: $address) {
+      id
+      address
+      chain
       market(currency: USD) {
+        id
         price {
+          id
           value
         }
         priceHistory(duration: $duration) {
+          id
           timestamp
           value
         }

src/graphql/data/TopTokens.ts

@@ -15,35 +15,49 @@ import {
   useTopTokens100Query,
   useTopTokensSparklineQuery,
 } from './__generated__/types-and-hooks'
-import { CHAIN_NAME_TO_CHAIN_ID, isPricePoint, PricePoint, toHistoryDuration, unwrapToken } from './util'
+import {
+  CHAIN_NAME_TO_CHAIN_ID,
+  isPricePoint,
+  PollingInterval,
+  PricePoint,
+  toHistoryDuration,
+  unwrapToken,
+  usePollQueryWhileMounted,
+} from './util'
 
 gql`
   query TopTokens100($duration: HistoryDuration!, $chain: Chain!) {
-    topTokens(pageSize: 100, page: 1, chain: $chain) {
+    topTokens(pageSize: 100, page: 1, chain: $chain, orderBy: VOLUME) {
       id
       name
       chain
       address
       symbol
       market(currency: USD) {
+        id
         totalValueLocked {
+          id
           value
           currency
         }
         price {
+          id
           value
           currency
         }
         pricePercentChange(duration: $duration) {
+          id
           currency
           value
         }
         volume(duration: $duration) {
+          id
           value
           currency
         }
       }
       project {
+        id
         logoUrl
       }
     }
@@ -53,9 +67,13 @@ gql`
 gql`
   query TopTokensSparkline($duration: HistoryDuration!, $chain: Chain!) {
     topTokens(pageSize: 100, page: 1, chain: $chain) {
+      id
       address
+      chain
       market(currency: USD) {
+        id
         priceHistory(duration: $duration) {
+          id
           timestamp
           value
         }
@@ -64,11 +82,12 @@ gql`
   }
 `
 
-function useSortedTokens(tokens: NonNullable<TopTokens100Query['topTokens']>) {
+function useSortedTokens(tokens: TopTokens100Query['topTokens']) {
   const sortMethod = useAtomValue(sortMethodAtom)
   const sortAscending = useAtomValue(sortAscendingAtom)
 
   return useMemo(() => {
+    if (!tokens) return undefined
     let tokenArray = Array.from(tokens)
     switch (sortMethod) {
       case TokenSortMethod.PRICE:
@@ -93,12 +112,13 @@ function useSortedTokens(tokens: NonNullable<TopTokens100Query['topTokens']>) {
   }, [tokens, sortMethod, sortAscending])
 }
 
-function useFilteredTokens(tokens: NonNullable<TopTokens100Query['topTokens']>) {
+function useFilteredTokens(tokens: TopTokens100Query['topTokens']) {
   const filterString = useAtomValue(filterStringAtom)
 
   const lowercaseFilterString = useMemo(() => filterString.toLowerCase(), [filterString])
 
   return useMemo(() => {
+    if (!tokens) return undefined
     let returnTokens = tokens
     if (lowercaseFilterString) {
       returnTokens = returnTokens?.filter((token) => {
@@ -119,6 +139,7 @@ export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[
 
 interface UseTopTokensReturnValue {
   tokens: TopToken[] | undefined
+  tokenVolumeRank: Record<string, number>
   loadingTokens: boolean
   sparklines: SparklineMap
 }
@@ -127,9 +148,12 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const chainId = CHAIN_NAME_TO_CHAIN_ID[chain]
   const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
 
-  const { data: sparklineQuery } = useTopTokensSparklineQuery({
-    variables: { duration, chain },
-  })
+  const { data: sparklineQuery } = usePollQueryWhileMounted(
+    useTopTokensSparklineQuery({
+      variables: { duration, chain },
+    }),
+    PollingInterval.Slow
+  )
 
   const sparklines = useMemo(() => {
     const unwrappedTokens = sparklineQuery?.topTokens?.map((topToken) => unwrapToken(chainId, topToken))
@@ -140,14 +164,34 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
     return map
   }, [chainId, sparklineQuery?.topTokens])
 
-  const { data, loading: loadingTokens } = useTopTokens100Query({
-    variables: { duration, chain },
-  })
-  const mappedTokens = useMemo(
-    () => data?.topTokens?.map((token) => unwrapToken(chainId, token)) ?? [],
-    [chainId, data]
+  const { data, loading: loadingTokens } = usePollQueryWhileMounted(
+    useTopTokens100Query({
+      variables: { duration, chain },
+    }),
+    PollingInterval.Fast
   )
-  const filteredTokens = useFilteredTokens(mappedTokens)
+
+  const unwrappedTokens = useMemo(() => data?.topTokens?.map((token) => unwrapToken(chainId, token)), [chainId, data])
+  const tokenVolumeRank = useMemo(
+    () =>
+      unwrappedTokens
+        ?.sort((a, b) => {
+          if (!a.market?.volume || !b.market?.volume) return 0
+          return a.market.volume.value > b.market.volume.value ? -1 : 1
+        })
+        .reduce((acc, cur, i) => {
+          if (!cur.address) return acc
+          return {
+            ...acc,
+            [cur.address]: i + 1,
+          }
+        }, {}) ?? {},
+    [unwrappedTokens]
+  )
+  const filteredTokens = useFilteredTokens(unwrappedTokens)
   const sortedTokens = useSortedTokens(filteredTokens)
-  return useMemo(() => ({ tokens: sortedTokens, loadingTokens, sparklines }), [loadingTokens, sortedTokens, sparklines])
+  return useMemo(
+    () => ({ tokens: sortedTokens, tokenVolumeRank, loadingTokens, sparklines }),
+    [loadingTokens, tokenVolumeRank, sortedTokens, sparklines]
+  )
 }

src/graphql/data/__generated__/types-and-hooks.ts

@@ -386,6 +386,7 @@ export type NftCollectionTraitStats = {
 
 export type NftCollectionsFilterInput = {
   addresses?: InputMaybe<Array<Scalars['String']>>;
+  nameQuery?: InputMaybe<Scalars['String']>;
 };
 
 export type NftContract = IContract & {
@@ -468,12 +469,45 @@ export enum NftRarityProvider {
   RaritySniper = 'RARITY_SNIPER'
 }
 
+export type NftRouteResponse = {
+  __typename?: 'NftRouteResponse';
+  calldata: Scalars['String'];
+  id: Scalars['ID'];
+  route?: Maybe<Array<NftTrade>>;
+  sendAmount: TokenAmount;
+  toAddress: Scalars['String'];
+};
+
 export enum NftStandard {
   Erc721 = 'ERC721',
   Erc1155 = 'ERC1155',
   Noncompliant = 'NONCOMPLIANT'
 }
 
+export type NftTrade = {
+  __typename?: 'NftTrade';
+  amount: Scalars['Int'];
+  contractAddress: Scalars['String'];
+  id: Scalars['ID'];
+  marketplace: NftMarketplace;
+  /**   price represents the current price of the NFT, which can be different from quotePrice */
+  price: TokenAmount;
+  /**   quotePrice represents the last quoted price of the NFT */
+  quotePrice?: Maybe<TokenAmount>;
+  tokenId: Scalars['String'];
+  tokenType: NftStandard;
+};
+
+export type NftTradeInput = {
+  amount: Scalars['Int'];
+  contractAddress: Scalars['String'];
+  id: Scalars['ID'];
+  marketplace: NftMarketplace;
+  quotePrice?: InputMaybe<TokenAmountInput>;
+  tokenId: Scalars['String'];
+  tokenType: NftStandard;
+};
+
 export type NftTransfer = {
   __typename?: 'NftTransfer';
   asset: NftAsset;
@@ -504,6 +538,22 @@ export type PageInfo = {
   startCursor?: Maybe<Scalars['String']>;
 };
 
+/**   v2 pool parameters as defined by https://github.com/Uniswap/v2-sdk/blob/main/src/entities/pair.ts */
+export type PairInput = {
+  tokenAmountA: TokenAmountInput;
+  tokenAmountB: TokenAmountInput;
+};
+
+/**   v3 pool parameters as defined by https://github.com/Uniswap/v3-sdk/blob/main/src/entities/pool.ts */
+export type PoolInput = {
+  fee: Scalars['Int'];
+  liquidity: Scalars['String'];
+  sqrtRatioX96: Scalars['String'];
+  tickCurrent: Scalars['String'];
+  tokenA: TokenInput;
+  tokenB: TokenInput;
+};
+
 export type Portfolio = {
   __typename?: 'Portfolio';
   assetActivities?: Maybe<Array<Maybe<AssetActivity>>>;
@@ -514,7 +564,6 @@ export type Portfolio = {
   tokenBalances?: Maybe<Array<Maybe<TokenBalance>>>;
   tokensTotalDenominatedValue?: Maybe<Amount>;
   tokensTotalDenominatedValueChange?: Maybe<AmountChange>;
-  tokensTotalDenominatedValueHistory?: Maybe<Array<Maybe<TimestampedAmount>>>;
 };
 
 
@@ -528,11 +577,6 @@ export type PortfolioTokensTotalDenominatedValueChangeArgs = {
   duration?: InputMaybe<HistoryDuration>;
 };
 
-
-export type PortfolioTokensTotalDenominatedValueHistoryArgs = {
-  duration?: InputMaybe<HistoryDuration>;
-};
-
 export type Query = {
   __typename?: 'Query';
   assetActivities?: Maybe<Array<Maybe<AssetActivity>>>;
@@ -540,6 +584,7 @@ export type Query = {
   nftBalances?: Maybe<NftBalanceConnection>;
   nftCollections?: Maybe<NftCollectionConnection>;
   nftCollectionsById?: Maybe<Array<Maybe<NftCollection>>>;
+  nftRoute?: Maybe<NftRouteResponse>;
   portfolios?: Maybe<Array<Maybe<Portfolio>>>;
   searchTokenProjects?: Maybe<Array<Maybe<TokenProject>>>;
   searchTokens?: Maybe<Array<Maybe<Token>>>;
@@ -595,6 +640,14 @@ export type QueryNftCollectionsByIdArgs = {
 };
 
 
+export type QueryNftRouteArgs = {
+  chain?: InputMaybe<Chain>;
+  nftTrades: Array<NftTradeInput>;
+  senderAddress: Scalars['String'];
+  tokenTrades?: InputMaybe<Array<TokenTradeInput>>;
+};
+
+
 export type QueryPortfoliosArgs = {
   ownerAddresses: Array<Scalars['String']>;
   useAltDataSource?: InputMaybe<Scalars['Boolean']>;
@@ -667,6 +720,18 @@ export type TokenMarketArgs = {
   currency?: InputMaybe<Currency>;
 };
 
+export type TokenAmount = {
+  __typename?: 'TokenAmount';
+  currency: Currency;
+  id: Scalars['ID'];
+  value: Scalars['String'];
+};
+
+export type TokenAmountInput = {
+  amount: Scalars['String'];
+  token: TokenInput;
+};
+
 export type TokenApproval = {
   __typename?: 'TokenApproval';
   approvedAddress: Scalars['String'];
@@ -689,6 +754,13 @@ export type TokenBalance = {
   tokenProjectMarket?: Maybe<TokenProjectMarket>;
 };
 
+export type TokenInput = {
+  address: Scalars['String'];
+  chainId: Scalars['Int'];
+  decimals: Scalars['Int'];
+  isNative: Scalars['Boolean'];
+};
+
 export type TokenMarket = {
   __typename?: 'TokenMarket';
   id: Scalars['ID'];
@@ -794,6 +866,30 @@ export enum TokenStandard {
   Native = 'NATIVE'
 }
 
+export type TokenTradeInput = {
+  routes?: InputMaybe<TokenTradeRoutesInput>;
+  slippageToleranceBasisPoints?: InputMaybe<Scalars['Int']>;
+  tokenAmount: TokenAmountInput;
+};
+
+export type TokenTradeRouteInput = {
+  inputAmount: TokenAmountInput;
+  outputAmount: TokenAmountInput;
+  pools: Array<TradePoolInput>;
+};
+
+export type TokenTradeRoutesInput = {
+  mixedRoutes?: InputMaybe<Array<TokenTradeRouteInput>>;
+  tradeType: TokenTradeType;
+  v2Routes?: InputMaybe<Array<TokenTradeRouteInput>>;
+  v3Routes?: InputMaybe<Array<TokenTradeRouteInput>>;
+};
+
+export enum TokenTradeType {
+  ExactInput = 'EXACT_INPUT',
+  ExactOutput = 'EXACT_OUTPUT'
+}
+
 export type TokenTransfer = {
   __typename?: 'TokenTransfer';
   asset: Token;
@@ -806,6 +902,11 @@ export type TokenTransfer = {
   transactedValue?: Maybe<Amount>;
 };
 
+export type TradePoolInput = {
+  pair?: InputMaybe<PairInput>;
+  pool?: InputMaybe<PoolInput>;
+};
+
 export type Transaction = {
   __typename?: 'Transaction';
   blockNumber: Scalars['Int'];
@@ -832,19 +933,21 @@ export enum TransactionStatus {
 }
 
 export type TokenQueryVariables = Exact<{
-  contract: ContractInput;
+  chain: Chain;
+  address?: InputMaybe<Scalars['String']>;
 }>;
 
 
-export type TokenQuery = { __typename?: 'Query', tokens?: Array<{ __typename?: 'Token', id: string, decimals?: number, name?: string, chain: Chain, address?: string, symbol?: string, market?: { __typename?: 'TokenMarket', totalValueLocked?: { __typename?: 'Amount', value: number, currency?: Currency }, price?: { __typename?: 'Amount', value: number, currency?: Currency }, volume24H?: { __typename?: 'Amount', value: number, currency?: Currency }, priceHigh52W?: { __typename?: 'Amount', value: number }, priceLow52W?: { __typename?: 'Amount', value: number } }, project?: { __typename?: 'TokenProject', description?: string, homepageUrl?: string, twitterName?: string, logoUrl?: string, tokens: Array<{ __typename?: 'Token', chain: Chain, address?: string }> } }> };
+export type TokenQuery = { __typename?: 'Query', token?: { __typename?: 'Token', id: string, decimals?: number, name?: string, chain: Chain, address?: string, symbol?: string, market?: { __typename?: 'TokenMarket', id: string, totalValueLocked?: { __typename?: 'Amount', id: string, value: number, currency?: Currency }, price?: { __typename?: 'Amount', id: string, value: number, currency?: Currency }, volume24H?: { __typename?: 'Amount', id: string, value: number, currency?: Currency }, priceHigh52W?: { __typename?: 'Amount', id: string, value: number }, priceLow52W?: { __typename?: 'Amount', id: string, value: number } }, project?: { __typename?: 'TokenProject', id: string, description?: string, homepageUrl?: string, twitterName?: string, logoUrl?: string, tokens: Array<{ __typename?: 'Token', id: string, chain: Chain, address?: string }> } } };
 
 export type TokenPriceQueryVariables = Exact<{
-  contract: ContractInput;
+  chain: Chain;
+  address?: InputMaybe<Scalars['String']>;
   duration: HistoryDuration;
 }>;
 
 
-export type TokenPriceQuery = { __typename?: 'Query', tokens?: Array<{ __typename?: 'Token', market?: { __typename?: 'TokenMarket', price?: { __typename?: 'Amount', value: number }, priceHistory?: Array<{ __typename?: 'TimestampedAmount', timestamp: number, value: number }> } }> };
+export type TokenPriceQuery = { __typename?: 'Query', token?: { __typename?: 'Token', id: string, address?: string, chain: Chain, market?: { __typename?: 'TokenMarket', id: string, price?: { __typename?: 'Amount', id: string, value: number }, priceHistory?: Array<{ __typename?: 'TimestampedAmount', id: string, timestamp: number, value: number }> } } };
 
 export type TopTokens100QueryVariables = Exact<{
   duration: HistoryDuration;
@@ -852,7 +955,7 @@ export type TopTokens100QueryVariables = Exact<{
 }>;
 
 
-export type TopTokens100Query = { __typename?: 'Query', topTokens?: Array<{ __typename?: 'Token', id: string, name?: string, chain: Chain, address?: string, symbol?: string, market?: { __typename?: 'TokenMarket', totalValueLocked?: { __typename?: 'Amount', value: number, currency?: Currency }, price?: { __typename?: 'Amount', value: number, currency?: Currency }, pricePercentChange?: { __typename?: 'Amount', currency?: Currency, value: number }, volume?: { __typename?: 'Amount', value: number, currency?: Currency } }, project?: { __typename?: 'TokenProject', logoUrl?: string } }> };
+export type TopTokens100Query = { __typename?: 'Query', topTokens?: Array<{ __typename?: 'Token', id: string, name?: string, chain: Chain, address?: string, symbol?: string, market?: { __typename?: 'TokenMarket', id: string, totalValueLocked?: { __typename?: 'Amount', id: string, value: number, currency?: Currency }, price?: { __typename?: 'Amount', id: string, value: number, currency?: Currency }, pricePercentChange?: { __typename?: 'Amount', id: string, currency?: Currency, value: number }, volume?: { __typename?: 'Amount', id: string, value: number, currency?: Currency } }, project?: { __typename?: 'TokenProject', id: string, logoUrl?: string } }> };
 
 export type TopTokensSparklineQueryVariables = Exact<{
   duration: HistoryDuration;
@@ -860,7 +963,7 @@ export type TopTokensSparklineQueryVariables = Exact<{
 }>;
 
 
-export type TopTokensSparklineQuery = { __typename?: 'Query', topTokens?: Array<{ __typename?: 'Token', address?: string, market?: { __typename?: 'TokenMarket', priceHistory?: Array<{ __typename?: 'TimestampedAmount', timestamp: number, value: number }> } }> };
+export type TopTokensSparklineQuery = { __typename?: 'Query', topTokens?: Array<{ __typename?: 'Token', id: string, address?: string, chain: Chain, market?: { __typename?: 'TokenMarket', id: string, priceHistory?: Array<{ __typename?: 'TimestampedAmount', id: string, timestamp: number, value: number }> } }> };
 
 export type AssetQueryVariables = Exact<{
   address: Scalars['String'];
@@ -901,12 +1004,12 @@ export type NftBalanceQueryVariables = Exact<{
 }>;
 
 
-export type NftBalanceQuery = { __typename?: 'Query', nftBalances?: { __typename?: 'NftBalanceConnection', edges: Array<{ __typename?: 'NftBalanceEdge', node: { __typename?: 'NftBalance', listedMarketplaces?: Array<NftMarketplace>, ownedAsset?: { __typename?: 'NftAsset', id: string, animationUrl?: string, description?: string, flaggedBy?: string, name?: string, ownerAddress?: string, suspiciousFlag?: boolean, tokenId: string, collection?: { __typename?: 'NftCollection', isVerified?: boolean, name?: string, image?: { __typename?: 'Image', url: string }, nftContracts?: Array<{ __typename?: 'NftContract', address: string, chain: Chain, name?: string, standard?: NftStandard, symbol?: string, totalSupply?: number }>, markets?: Array<{ __typename?: 'NftCollectionMarket', floorPrice?: { __typename?: 'TimestampedAmount', value: number } }> }, image?: { __typename?: 'Image', url: string }, originalImage?: { __typename?: 'Image', url: string }, smallImage?: { __typename?: 'Image', url: string }, thumbnail?: { __typename?: 'Image', url: string }, listings?: { __typename?: 'NftOrderConnection', edges: Array<{ __typename?: 'NftOrderEdge', node: { __typename?: 'NftOrder', createdAt: number, marketplace: NftMarketplace, endAt?: number, price: { __typename?: 'Amount', value: number, currency?: Currency } } }> } }, listingFees?: Array<{ __typename?: 'NftFee', payoutAddress: string, basisPoints: number }>, lastPrice?: { __typename?: 'TimestampedAmount', currency?: Currency, timestamp: number, value: number } } }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string, hasNextPage?: boolean, hasPreviousPage?: boolean, startCursor?: string } } };
+export type NftBalanceQuery = { __typename?: 'Query', nftBalances?: { __typename?: 'NftBalanceConnection', edges: Array<{ __typename?: 'NftBalanceEdge', node: { __typename?: 'NftBalance', listedMarketplaces?: Array<NftMarketplace>, ownedAsset?: { __typename?: 'NftAsset', id: string, animationUrl?: string, description?: string, flaggedBy?: string, name?: string, ownerAddress?: string, suspiciousFlag?: boolean, tokenId: string, collection?: { __typename?: 'NftCollection', isVerified?: boolean, name?: string, twitterName?: string, image?: { __typename?: 'Image', url: string }, nftContracts?: Array<{ __typename?: 'NftContract', address: string, chain: Chain, name?: string, standard?: NftStandard, symbol?: string, totalSupply?: number }>, markets?: Array<{ __typename?: 'NftCollectionMarket', floorPrice?: { __typename?: 'TimestampedAmount', value: number } }> }, image?: { __typename?: 'Image', url: string }, originalImage?: { __typename?: 'Image', url: string }, smallImage?: { __typename?: 'Image', url: string }, thumbnail?: { __typename?: 'Image', url: string }, listings?: { __typename?: 'NftOrderConnection', edges: Array<{ __typename?: 'NftOrderEdge', node: { __typename?: 'NftOrder', createdAt: number, marketplace: NftMarketplace, endAt?: number, price: { __typename?: 'Amount', value: number, currency?: Currency } } }> } }, listingFees?: Array<{ __typename?: 'NftFee', payoutAddress: string, basisPoints: number }>, lastPrice?: { __typename?: 'TimestampedAmount', currency?: Currency, timestamp: number, value: number } } }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string, hasNextPage?: boolean, hasPreviousPage?: boolean, startCursor?: string } } };
 
 
 export const TokenDocument = gql`
-    query Token($contract: ContractInput!) {
-  tokens(contracts: [$contract]) {
+    query Token($chain: Chain!, $address: String) {
+  token(chain: $chain, address: $address) {
     id
     decimals
     name
@@ -914,31 +1017,39 @@ export const TokenDocument = gql`
     address
     symbol
     market(currency: USD) {
+      id
       totalValueLocked {
+        id
         value
         currency
       }
       price {
+        id
         value
         currency
       }
       volume24H: volume(duration: DAY) {
+        id
         value
         currency
       }
       priceHigh52W: priceHighLow(duration: YEAR, highLow: HIGH) {
+        id
         value
       }
       priceLow52W: priceHighLow(duration: YEAR, highLow: LOW) {
+        id
         value
       }
     }
     project {
+      id
       description
       homepageUrl
       twitterName
       logoUrl
       tokens {
+        id
         chain
         address
       }
@@ -959,7 +1070,8 @@ export const TokenDocument = gql`
  * @example
  * const { data, loading, error } = useTokenQuery({
  *   variables: {
- *      contract: // value for 'contract'
+ *      chain: // value for 'chain'
+ *      address: // value for 'address'
  *   },
  * });
  */
@@ -975,13 +1087,19 @@ export type TokenQueryHookResult = ReturnType<typeof useTokenQuery>;
 export type TokenLazyQueryHookResult = ReturnType<typeof useTokenLazyQuery>;
 export type TokenQueryResult = Apollo.QueryResult<TokenQuery, TokenQueryVariables>;
 export const TokenPriceDocument = gql`
-    query TokenPrice($contract: ContractInput!, $duration: HistoryDuration!) {
-  tokens(contracts: [$contract]) {
+    query TokenPrice($chain: Chain!, $address: String, $duration: HistoryDuration!) {
+  token(chain: $chain, address: $address) {
+    id
+    address
+    chain
     market(currency: USD) {
+      id
       price {
+        id
         value
       }
       priceHistory(duration: $duration) {
+        id
         timestamp
         value
       }
@@ -1002,7 +1120,8 @@ export const TokenPriceDocument = gql`
  * @example
  * const { data, loading, error } = useTokenPriceQuery({
  *   variables: {
- *      contract: // value for 'contract'
+ *      chain: // value for 'chain'
+ *      address: // value for 'address'
  *      duration: // value for 'duration'
  *   },
  * });
@@ -1020,31 +1139,37 @@ export type TokenPriceLazyQueryHookResult = ReturnType<typeof useTokenPriceLazyQ
 export type TokenPriceQueryResult = Apollo.QueryResult<TokenPriceQuery, TokenPriceQueryVariables>;
 export const TopTokens100Document = gql`
     query TopTokens100($duration: HistoryDuration!, $chain: Chain!) {
-  topTokens(pageSize: 100, page: 1, chain: $chain) {
+  topTokens(pageSize: 100, page: 1, chain: $chain, orderBy: VOLUME) {
     id
     name
     chain
     address
     symbol
     market(currency: USD) {
+      id
       totalValueLocked {
+        id
         value
         currency
       }
       price {
+        id
         value
         currency
       }
       pricePercentChange(duration: $duration) {
+        id
         currency
         value
       }
       volume(duration: $duration) {
+        id
         value
         currency
       }
     }
     project {
+      id
       logoUrl
     }
   }
@@ -1082,9 +1207,13 @@ export type TopTokens100QueryResult = Apollo.QueryResult<TopTokens100Query, TopT
 export const TopTokensSparklineDocument = gql`
     query TopTokensSparkline($duration: HistoryDuration!, $chain: Chain!) {
   topTokens(pageSize: 100, page: 1, chain: $chain) {
+    id
     address
+    chain
     market(currency: USD) {
+      id
       priceHistory(duration: $duration) {
+        id
         timestamp
         value
       }
@@ -1493,6 +1622,7 @@ export const NftBalanceDocument = gql`
               url
             }
             name
+            twitterName
             nftContracts {
               address
               chain

src/graphql/data/apollo.ts

@@ -1,5 +1,5 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client'
-import { relayStylePagination } from '@apollo/client/utilities'
+import { Reference, relayStylePagination } from '@apollo/client/utilities'
 
 const GRAPHQL_URL = process.env.REACT_APP_AWS_API_ENDPOINT
 if (!GRAPHQL_URL) {
@@ -7,6 +7,7 @@ if (!GRAPHQL_URL) {
 }
 
 export const apolloClient = new ApolloClient({
+  connectToDevTools: true,
   uri: GRAPHQL_URL,
   headers: {
     'Content-Type': 'application/json',
@@ -18,6 +19,33 @@ export const apolloClient = new ApolloClient({
         fields: {
           nftBalances: relayStylePagination(),
           nftAssets: relayStylePagination(),
+          // tell apollo client how to reference Token items in the cache after being fetched by queries that return Token[]
+          token: {
+            read(_, { args, toReference }): Reference | undefined {
+              return toReference({
+                __typename: 'Token',
+                chain: args?.chain,
+                address: args?.address,
+              })
+            },
+          },
+        },
+      },
+      Token: {
+        // key by chain, address combination so that Token(chain, address) endpoint can read from cache
+        /**
+         * NOTE: In any query for `token` or `tokens`, you must include the `chain` and `address` fields
+         * in order for result to normalize properly in the cache.
+         */
+        keyFields: ['chain', 'address'],
+        fields: {
+          address: {
+            read(address: string | null): string | null {
+              // backend endpoint sometimes returns checksummed, sometimes lowercased addresses
+              // always use lowercased addresses in our app for consistency
+              return address?.toLowerCase() ?? null
+            },
+          },
         },
       },
     },

src/graphql/data/nft/NftBalance.ts

@@ -34,6 +34,7 @@ gql`
                 url
               }
               name
+              twitterName
               nftContracts {
                 address
                 chain
@@ -166,7 +167,12 @@ export function useNftBalance(
         image_url: asset?.collection?.image?.url,
         payout_address: queryAsset?.node?.listingFees?.[0]?.payoutAddress,
       },
-      collection: asset?.collection as unknown as GenieCollection,
+      collection: {
+        name: asset.collection?.name,
+        isVerified: asset.collection?.isVerified,
+        imageUrl: asset.collection?.image?.url,
+        twitterUrl: asset.collection?.twitterName ? `@${asset.collection?.twitterName}` : undefined,
+      } as GenieCollection,
       collectionIsVerified: asset?.collection?.isVerified,
       lastPrice: queryAsset.node.lastPrice?.value,
       floorPrice: asset?.collection?.markets?.[0]?.floorPrice?.value,