feat: privacy disclaimer change (#4790)

* privacy disclaimer change

* remove change for current site, only apply to phase 0

.env

@@ -5,3 +5,4 @@ REACT_APP_AWS_API_ACCESS_KEY="AKIAYJJWW6AQ47ODATHN"
 REACT_APP_AWS_API_ACCESS_SECRET="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"
 REACT_APP_AWS_X_API_KEY="z9dReS5UtHu7iTrUsTuWRozLthi3AxOZlvobrIdr14"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
+REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"

.env.production

@@ -4,3 +4,4 @@ REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
 REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
+REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"

.eslintrc.json

@@ -81,6 +81,18 @@
           }
         ]
       }
+    ],
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "@ethersproject/providers",
+            "message": "Please only use Providers instantiated in constants/providers to improve traceability.",
+            "allowTypeImports": true
+          }
+        ]
+      }
     ]
   }
 }

.gitignore

@@ -10,6 +10,7 @@
 
 # generated graphql types
 __generated__/
+schema.graphql
 
 # dependencies
 /node_modules

README.md

@@ -30,7 +30,7 @@ or visit [app.uniswap.org](https://app.uniswap.org).
 
 Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
 
-You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
+You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts)
 
 ## Contributions
 

craco.config.cjs

@@ -1,13 +1,21 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { DefinePlugin } = require('webpack')
+
+const commitHash = require('child_process').execSync('git rev-parse HEAD')
 
 module.exports = {
   babel: {
     plugins: ['@vanilla-extract/babel-plugin'],
   },
   webpack: {
-    plugins: [new VanillaExtractPlugin()],
+    plugins: [
+      new VanillaExtractPlugin(),
+      new DefinePlugin({
+        'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
+      }),
+    ],
     configure: (webpackConfig) => {
       const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
         (plugin) => plugin instanceof MiniCssExtractPlugin

cypress/e2e/wallet-dropdown.test.ts

@@ -0,0 +1,50 @@
+import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+import { getTestSelector } from '../utils'
+
+describe('Wallet Dropdown', () => {
+  before(() => {
+    cy.visit('/', { featureFlags: [FeatureFlag.navBar, FeatureFlag.tokenSafety] })
+  })
+
+  it('should change the theme', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+  })
+
+  it('should select a language', () => {
+    cy.get(getTestSelector('wallet-select-language')).click()
+    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should be able to view transactions', () => {
+    cy.get(getTestSelector('wallet-transactions')).click()
+    cy.get(getTestSelector('wallet-empty-transaction-text')).should('exist')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should change the theme when not connected', () => {
+    cy.get(getTestSelector('wallet-disconnect')).click()
+    cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
+  })
+
+  it('should select a language when not connected', () => {
+    cy.get(getTestSelector('wallet-select-language')).click()
+    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should open the wallet connect modal from the drop down when not connected', () => {
+    cy.get(getTestSelector('wallet-connect-wallet')).click()
+    cy.get(getTestSelector('wallet-modal')).should('exist')
+    cy.get(getTestSelector('wallet-modal-close')).click()
+  })
+})

cypress/e2e/wallet.test.ts

@@ -24,6 +24,7 @@ describe('Wallet', () => {
   })
 
   it('shows connect buttons after disconnect', () => {
+    cy.get('[data-testid=web3-status-connected]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED).click()
     cy.contains('Disconnect').click()
     cy.get('[data-testid=option-grid]').should('exist')
   })

cypress/support/e2e.ts

@@ -9,6 +9,8 @@
 import { injected } from './ethereum'
 import assert = require('assert')
 
+import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
@@ -17,6 +19,7 @@ declare global {
     }
     interface VisitOptions {
       serviceWorker?: true
+      featureFlags?: Array<FeatureFlag>
     }
   }
 }
@@ -36,6 +39,18 @@ Cypress.Commands.overwrite(
           options?.onBeforeLoad?.(win)
           win.localStorage.clear()
           win.localStorage.setItem('redux_localstorage_simple_user', '{"selectedWallet":"INJECTED"}')
+
+          if (options?.featureFlags) {
+            const featureFlags = options.featureFlags.reduce(
+              (flags, flag) => ({
+                ...flags,
+                [flag]: 'enabled',
+              }),
+              {}
+            )
+            win.localStorage.setItem('featureFlags', JSON.stringify(featureFlags))
+          }
+
           win.ethereum = injected
         },
       })

cypress/support/ethereum.ts

@@ -3,6 +3,7 @@
  */
 
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
 

cypress/utils/index.ts

@@ -0,0 +1 @@
+export const getTestSelector = (selectorId: string) => `[data-testid=${selectorId}]`

fetch-schema.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-require('dotenv').config({ path: '.env.local' })
+require('dotenv').config({ path: '.env.production' })
 const { exec } = require('child_process')
 const dataConfig = require('./relay.config')
 const thegraphConfig = require('./relay_thegraph.config')
@@ -8,11 +8,7 @@ const thegraphConfig = require('./relay_thegraph.config')
 const THEGRAPH_API_URL = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
 exec(`get-graphql-schema ${THEGRAPH_API_URL} > ${thegraphConfig.schema}`)
 
-const API_URL = process.env.REACT_APP_GQL_API_URL
-const API_KEY = process.env.REACT_APP_GQL_API_KEY
-
-if (API_URL && API_KEY) {
-  exec(`get-graphql-schema ${API_URL} --h X-API-KEY=${API_KEY} > ${dataConfig.schema}`)
-} else {
-  console.log('REACT_APP_GQL_API_URL or REACT_APP_GQL_API_KEY is missing from env.local')
-}
+console.log(process.env.REACT_APP_AWS_API_ENDPOINT)
+exec(
+  `get-graphql-schema --h Origin=https://app.uniswap.org ${process.env.REACT_APP_AWS_API_ENDPOINT} > ${dataConfig.schema}`
+)

package.json

@@ -16,7 +16,7 @@
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
-    "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "prepare": "yarn contracts:compile && yarn graphql:fetch && yarn graphql:generate && yarn i18n:compile",
     "start": "craco start",
     "build": "craco build",
     "serve": "serve build -l 3000",
@@ -80,6 +80,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.7",
@@ -137,7 +138,7 @@
     "@uniswap/redux-multicall": "^1.1.5",
     "@uniswap/router-sdk": "^1.3.0",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.9.2",
+    "@uniswap/smart-order-router": "^2.10.0",
     "@uniswap/token-lists": "^1.0.0-beta.30",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
@@ -145,7 +146,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.3.1",
+    "@uniswap/widgets": "^2.9.2",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -154,6 +155,7 @@
     "@visx/event": "^2.6.0",
     "@visx/glyph": "^2.10.0",
     "@visx/group": "^2.10.0",
+    "@visx/react-spring": "^2.12.2",
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.11.1",
     "@walletconnect/ethereum-provider": "1.7.1",
@@ -170,12 +172,10 @@
     "ajv": "^6.12.3",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
-    "aws4fetch": "^1.0.13",
     "cids": "^1.0.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
-    "d3-curve-circlecorners": "^0.1.6",
     "ethers": "^5.1.4",
     "firebase": "^9.1.3",
     "focus-visible": "^5.2.0",
@@ -208,7 +208,7 @@
     "react-redux": "^8.0.2",
     "react-relay": "^14.1.0",
     "react-router-dom": "^6.3.0",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.5.5",
     "react-table": "^7.8.0",
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",

public/index.html

@@ -70,7 +70,6 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
       }
 
       #background-radial-gradient {

src/analytics/Trace.tsx

@@ -44,7 +44,14 @@ export const Trace = memo(
 
     useEffect(() => {
       if (shouldLogImpression) {
-        sendAnalyticsEvent(name ?? EventName.PAGE_VIEWED, { ...combinedProps, ...properties })
+        const origin = window.location.origin
+        const commitHash = process.env.REACT_APP_GIT_COMMIT_HASH
+        sendAnalyticsEvent(name ?? EventName.PAGE_VIEWED, {
+          ...combinedProps,
+          ...properties,
+          origin,
+          git_commit_hash: commitHash,
+        })
       }
       // Impressions should only be logged on mount.
       // eslint-disable-next-line react-hooks/exhaustive-deps

src/analytics/constants.ts

@@ -1,7 +1,3 @@
-import { Token } from '@uniswap/sdk-core'
-
-import { nativeOnChain } from '../../constants/tokens'
-
 /**
  * Event names that can occur in this application.
  *
@@ -12,14 +8,18 @@ export enum EventName {
   APP_LOADED = 'Application Loaded',
   APPROVE_TOKEN_TXN_SUBMITTED = 'Approve Token Transaction Submitted',
   CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
+  EXPLORE_SEARCH_SELECTED = 'Explore Search Selected',
   EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
   PAGE_VIEWED = 'Page Viewed',
+  NAVBAR_SEARCH_SELECTED = 'Navbar Search Selected',
+  NAVBAR_SEARCH_EXITED = 'Navbar Search Exited',
   SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
   SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
   SWAP_PRICE_UPDATE_ACKNOWLEDGED = 'Swap Price Update Acknowledged',
   SWAP_QUOTE_RECEIVED = 'Swap Quote Received',
-  SWAP_SUBMITTED = 'Swap Submitted',
+  SWAP_SIGNED = 'Swap Signed',
+  SWAP_SUBMITTED_BUTTON_CLICKED = 'Swap Submit Button Clicked',
   SWAP_TOKENS_REVERSED = 'Swap Tokens Reversed',
   SWAP_TRANSACTION_COMPLETED = 'Swap Transaction Completed',
   TOKEN_IMPORTED = 'Token Imported',
@@ -28,6 +28,7 @@ export enum EventName {
   WALLET_CONNECT_TXN_COMPLETED = 'Wallet Connect Transaction Completed',
   WALLET_SELECTED = 'Wallet Selected',
   WEB_VITALS = 'Web Vitals',
+  WRAP_TOKEN_TXN_INVALIDATED = 'Wrap Token Transaction Invalidated',
   WRAP_TOKEN_TXN_SUBMITTED = 'Wrap Token Transaction Submitted',
   // alphabetize additional event names.
 }
@@ -35,27 +36,14 @@ export enum EventName {
 export enum CUSTOM_USER_PROPERTIES {
   ALL_WALLET_ADDRESSES_CONNECTED = 'all_wallet_addresses_connected',
   ALL_WALLET_CHAIN_IDS = 'all_wallet_chain_ids',
+  USER_AGENT = 'user_agent',
   BROWSER = 'browser',
   DARK_MODE = 'is_dark_mode',
   EXPERT_MODE = 'is_expert_mode',
   SCREEN_RESOLUTION_HEIGHT = 'screen_resolution_height',
   SCREEN_RESOLUTION_WIDTH = 'screen_resolution_width',
   WALLET_ADDRESS = 'wallet_address',
-  WALLET_NATIVE_CURRENCY_AMOUNT = 'wallet_native_currency_amount',
-  WALLET_NATIVE_CURRENCY_BALANCE_USD = 'wallet_native_currency_balance_usd',
   WALLET_TYPE = 'wallet_type',
-  WALLET_USDC_AMOUNT = 'wallet_usdc_amount',
-  WALLET_USDC_BALANCE_USD = 'wallet_usdc_balance_usd',
-  WALLET_WETH_AMOUNT = 'wallet_weth_amount',
-  WALLET_WETH_BALANCE_USD = 'wallet_weth_balance_usd',
-}
-
-const ETH = nativeOnChain(1)
-const USDC = new Token(1, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC')
-
-export const TOKENS_TO_TRACK = {
-  USDC,
-  WETH: ETH.wrapped,
 }
 
 export enum BROWSER {
@@ -67,6 +55,7 @@ export enum BROWSER {
   EDGE_CHROMIUM = 'Microsoft Edge (Chromium)',
   CHROME = 'Google Chrome or Chromium',
   SAFARI = 'Apple Safari',
+  BRAVE = 'Brave',
   UNKNOWN = 'unknown',
 }
 
@@ -120,8 +109,10 @@ export enum ElementName {
   COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
   CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
   CONNECT_WALLET_BUTTON = 'connect-wallet-button',
+  EXPLORE_SEARCH_INPUT = 'explore_search_input',
   IMPORT_TOKEN_BUTTON = 'import-token-button',
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
+  NAVBAR_SEARCH_INPUT = 'navbar-search-input',
   PRICE_UPDATE_ACCEPT_BUTTON = 'price-update-accept-button',
   SWAP_BUTTON = 'swap-button',
   SWAP_DETAILS_DROPDOWN = 'swap-details-dropdown',
@@ -138,6 +129,7 @@ export enum ElementName {
  */
 export enum Event {
   onClick = 'onClick',
+  onFocus = 'onFocus',
   onKeyPress = 'onKeyPress',
   onSelect = 'onSelect',
   // alphabetize additional events.

src/analytics/index.ts

@@ -1,6 +1,8 @@
 import { Identify, identify, init, track } from '@amplitude/analytics-browser'
 import { isProductionEnv } from 'utils/env'
 
+const API_KEY = isProductionEnv() ? process.env.REACT_APP_AMPLITUDE_KEY : process.env.REACT_APP_AMPLITUDE_TEST_KEY
+
 /**
  * Initializes Amplitude with API key for project.
  *
@@ -8,14 +10,11 @@ import { isProductionEnv } from 'utils/env'
  * member of the organization on Amplitude to view details.
  */
 export function initializeAnalytics() {
-  const API_KEY = isProductionEnv() ? process.env.REACT_APP_AMPLITUDE_KEY : process.env.REACT_APP_AMPLITUDE_TEST_KEY
-
   if (typeof API_KEY === 'undefined') {
     const keyName = isProductionEnv() ? 'REACT_APP_AMPLITUDE_KEY' : 'REACT_APP_AMPLITUDE_TEST_KEY'
     console.error(`${keyName} is undefined, Amplitude analytics will not run.`)
     return
   }
-
   init(
     API_KEY,
     /* userId= */ undefined, // User ID should be undefined to let Amplitude default to Device ID
@@ -23,7 +22,8 @@ export function initializeAnalytics() {
     {
       // Disable tracking of private user information by Amplitude
       trackingOptions: {
-        ipAddress: false,
+        // IP is being dropped before ingestion on Amplitude side, only being used to determine country.
+        ipAddress: isProductionEnv() ? false : true,
         carrier: false,
         city: false,
         region: false,
@@ -33,23 +33,16 @@ export function initializeAnalytics() {
   )
 }
 
-/** Sends an approved (finalized) event to Amplitude production project. */
+/** Sends an event to Amplitude. */
 export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
-  if (!isProductionEnv()) {
-    console.log(`[amplitude(${eventName})]: ${JSON.stringify(eventProperties)}`)
+  if (!API_KEY) {
+    console.log(`[analytics(${eventName})]: ${JSON.stringify(eventProperties)}`)
     return
   }
 
   track(eventName, eventProperties)
 }
 
-/** Sends a draft event to Amplitude test project. */
-export function sendTestAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
-  if (isProductionEnv()) return
-
-  track(eventName, eventProperties)
-}
-
 type Value = string | number | boolean | string[] | number[]
 
 /**

src/assets/svg/socks.svg

@@ -0,0 +1,186 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
+  <g filter="url(#a)">
+    <path fill="url(#b)" d="M17.654 4.868c0-.69-.56-1.25-1.25-1.25h-2.932c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.741 1.873c-.898.999-1.115 2.687-.058 3.748 1.013 1.017 2.918.988 3.87 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.158v-7.55Z"/>
+    <path fill="url(#c)" d="M17.654 4.868c0-.69-.56-1.25-1.25-1.25h-2.932c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.741 1.873c-.898.999-1.115 2.687-.058 3.748 1.013 1.017 2.918.988 3.87 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.158v-7.55Z"/>
+    <path fill="url(#d)" d="M17.654 4.868c0-.69-.56-1.25-1.25-1.25h-2.932c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.741 1.873c-.898.999-1.115 2.687-.058 3.748 1.013 1.017 2.918.988 3.87 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.158v-7.55Z"/>
+    <path fill="url(#e)" d="M17.654 4.868c0-.69-.56-1.25-1.25-1.25h-2.932c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.741 1.873c-.898.999-1.115 2.687-.058 3.748 1.013 1.017 2.918.988 3.87 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.158v-7.55Z"/>
+    <path fill="url(#f)" d="M17.654 4.868c0-.69-.56-1.25-1.25-1.25h-2.932c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.741 1.873c-.898.999-1.115 2.687-.058 3.748 1.013 1.017 2.918.988 3.87 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.158v-7.55Z"/>
+  </g>
+  <g filter="url(#g)">
+    <path fill="url(#h)" d="M10.954 2.602c0-.69-.56-1.25-1.25-1.25H6.773c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.742 1.873c-.898 1-1.115 2.687-.058 3.748 1.014 1.018 2.919.988 3.871 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.157V2.602Z"/>
+    <path fill="url(#i)" d="M10.954 2.602c0-.69-.56-1.25-1.25-1.25H6.773c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.742 1.873c-.898 1-1.115 2.687-.058 3.748 1.014 1.018 2.919.988 3.871 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.157V2.602Z"/>
+    <path fill="url(#j)" d="M10.954 2.602c0-.69-.56-1.25-1.25-1.25H6.773c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.742 1.873c-.898 1-1.115 2.687-.058 3.748 1.014 1.018 2.919.988 3.871 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.157V2.602Z"/>
+    <path fill="url(#k)" d="M10.954 2.602c0-.69-.56-1.25-1.25-1.25H6.773c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.742 1.873c-.898 1-1.115 2.687-.058 3.748 1.014 1.018 2.919.988 3.871 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.157V2.602Z"/>
+    <path fill="url(#l)" d="M10.954 2.602c0-.69-.56-1.25-1.25-1.25H6.773c-.69 0-1.25.56-1.25 1.25v5.704a2.5 2.5 0 0 1-.67 1.703l-1.742 1.873c-.898 1-1.115 2.687-.058 3.748 1.014 1.018 2.919.988 3.871 0l3.167-3.32a3.125 3.125 0 0 0 .864-2.157V2.602Z"/>
+  </g>
+  <path fill="url(#m)" d="M17.654 5.776h-5.431v.673h5.431v-.673Z"/>
+  <path fill="url(#n)" d="M17.654 5.776h-5.431v.673h5.431v-.673Z"/>
+  <path fill="url(#o)" d="M10.955 3.51H5.523v.674h5.432V3.51Z"/>
+  <path fill="url(#p)" d="M10.955 3.51H5.523v.674h5.432V3.51Z"/>
+  <path fill="url(#q)" d="M17.606 4.523c.031.11.048.225.048.345v.328h-5.431v-.328c0-.12.016-.236.048-.345h5.335Z"/>
+  <path fill="url(#r)" d="M17.606 4.523c.031.11.048.225.048.345v.328h-5.431v-.328c0-.12.016-.236.048-.345h5.335Z"/>
+  <path fill="url(#s)" d="M10.907 2.257c.031.11.048.225.048.345v.329H5.523v-.329c0-.12.017-.235.049-.345h5.335Z"/>
+  <path fill="url(#t)" d="M10.907 2.257c.031.11.048.225.048.345v.329H5.523v-.329c0-.12.017-.235.049-.345h5.335Z"/>
+  <g filter="url(#u)">
+    <path fill="url(#v)" d="M17.654 12.236h-3.116a.173.173 0 0 0-.176.17c0 1.255.904 2.3 2.096 2.518l.332-.349a3.125 3.125 0 0 0 .864-2.157v-.182Z"/>
+  </g>
+  <g filter="url(#w)">
+    <path fill="url(#x)" d="M10.955 9.97H7.839a.173.173 0 0 0-.176.17c0 1.255.903 2.3 2.096 2.518l.332-.349a3.125 3.125 0 0 0 .864-2.156V9.97Z"/>
+  </g>
+  <g filter="url(#y)">
+    <path fill="url(#z)" d="M13.243 18.21v-.05a3.424 3.424 0 0 0-3.856-3.397c-.511.986-.496 2.268.366 3.133.892.895 2.474.98 3.49.314Z"/>
+  </g>
+  <g filter="url(#A)">
+    <path fill="url(#B)" d="M6.544 15.944v-.05a3.424 3.424 0 0 0-3.857-3.396c-.51.985-.495 2.267.366 3.132.892.896 2.475.98 3.49.314Z"/>
+  </g>
+  <defs>
+    <linearGradient id="b" x1="17.248" x2="13.193" y1="4.4" y2="16.827" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF2FF"/>
+      <stop offset="1" stop-color="#FFECFB"/>
+    </linearGradient>
+    <linearGradient id="c" x1="17.654" x2="15.615" y1="11.854" y2="11.854" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFCCF1"/>
+      <stop offset="1" stop-color="#FFC5EF" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="f" x1="14.99" x2="13.818" y1="16.932" y2="15.721" gradientUnits="userSpaceOnUse">
+      <stop offset=".209" stop-color="#EDB0DF"/>
+      <stop offset="1" stop-color="#ECAAED" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="h" x1="10.549" x2="6.493" y1="2.134" y2="14.562" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF2FF"/>
+      <stop offset="1" stop-color="#FFECFB"/>
+    </linearGradient>
+    <linearGradient id="i" x1="10.954" x2="8.915" y1="9.588" y2="9.588" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFCCF1"/>
+      <stop offset="1" stop-color="#FFC5EF" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="l" x1="8.29" x2="7.119" y1="14.666" y2="13.456" gradientUnits="userSpaceOnUse">
+      <stop offset=".209" stop-color="#EDB0DF"/>
+      <stop offset="1" stop-color="#ECAAED" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="m" x1="12.773" x2="16.915" y1="6.449" y2="6.449" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E95FDB"/>
+      <stop offset="1" stop-color="#FF46CB"/>
+    </linearGradient>
+    <linearGradient id="n" x1="12.223" x2="12.793" y1="6.449" y2="6.449" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9F4977"/>
+      <stop offset="1" stop-color="#CA5284" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="o" x1="6.074" x2="10.216" y1="4.184" y2="4.184" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E95FDB"/>
+      <stop offset="1" stop-color="#FF46CB"/>
+    </linearGradient>
+    <linearGradient id="p" x1="5.523" x2="6.094" y1="4.184" y2="4.184" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9F4977"/>
+      <stop offset="1" stop-color="#CA5284" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="q" x1="12.773" x2="16.915" y1="5.196" y2="5.196" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E95FDB"/>
+      <stop offset="1" stop-color="#FF46CB"/>
+    </linearGradient>
+    <linearGradient id="r" x1="12.223" x2="12.793" y1="5.196" y2="5.196" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9F4977"/>
+      <stop offset="1" stop-color="#CA5284" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="s" x1="6.074" x2="10.216" y1="2.931" y2="2.931" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E95FDB"/>
+      <stop offset="1" stop-color="#FF46CB"/>
+    </linearGradient>
+    <linearGradient id="t" x1="5.523" x2="6.094" y1="2.931" y2="2.931" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9F4977"/>
+      <stop offset="1" stop-color="#CA5284" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="matrix(2.8125 0 0 6.01563 12.02 8.026)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD1F5"/>
+      <stop offset="1" stop-color="#FECAFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="matrix(1.54348 -1.53472 2.30642 2.31958 11.806 16.12)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFC0FC"/>
+      <stop offset="1" stop-color="#FFBCFC" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="j" cx="0" cy="0" r="1" gradientTransform="matrix(2.8125 0 0 6.01563 5.322 5.76)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD1F5"/>
+      <stop offset="1" stop-color="#FECAFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="k" cx="0" cy="0" r="1" gradientTransform="matrix(1.54347 -1.53473 2.30643 2.31957 5.107 13.854)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFC0FC"/>
+      <stop offset="1" stop-color="#FFBCFC" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="v" cx="0" cy="0" r="1" gradientTransform="matrix(-.42911 2.50572 -2.20218 -.37713 16.437 12.236)" gradientUnits="userSpaceOnUse">
+      <stop offset=".147" stop-color="#FF52CF"/>
+      <stop offset="1" stop-color="#FB3FFF"/>
+    </radialGradient>
+    <radialGradient id="x" cx="0" cy="0" r="1" gradientTransform="matrix(-.42911 2.50572 -2.20218 -.37713 9.738 9.97)" gradientUnits="userSpaceOnUse">
+      <stop offset=".147" stop-color="#FF52CF"/>
+      <stop offset="1" stop-color="#FB3FFF"/>
+    </radialGradient>
+    <radialGradient id="z" cx="0" cy="0" r="1" gradientTransform="rotate(167.471 5.464 9.437) scale(4.54024 4.83245)" gradientUnits="userSpaceOnUse">
+      <stop offset=".268" stop-color="#FF4EE3"/>
+      <stop offset=".92" stop-color="#D12396"/>
+    </radialGradient>
+    <radialGradient id="B" cx="0" cy="0" r="1" gradientTransform="rotate(167.471 2.239 7.937) scale(4.54024 4.83245)" gradientUnits="userSpaceOnUse">
+      <stop offset=".268" stop-color="#FF4EE3"/>
+      <stop offset=".92" stop-color="#D12396"/>
+    </radialGradient>
+    <filter id="a" width="8.808" height="15.23" x="9.045" y="3.418" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx=".2" dy="-.2"/>
+      <feGaussianBlur stdDeviation=".3"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.522043 0 0 0 0 0.119948 0 0 0 0 0.5875 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+    <filter id="g" width="8.808" height="15.23" x="2.346" y="1.152" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx=".2" dy="-.2"/>
+      <feGaussianBlur stdDeviation=".3"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.545098 0 0 0 0 0.219608 0 0 0 0 0.512549 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+    <filter id="u" width="3.541" height="2.688" x="14.112" y="12.236" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="-.25"/>
+      <feGaussianBlur stdDeviation=".25"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.976471 0 0 0 0 0.145098 0 0 0 0 0.743686 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+    <filter id="w" width="3.541" height="2.688" x="7.413" y="9.97" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="-.25"/>
+      <feGaussianBlur stdDeviation=".25"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.976471 0 0 0 0 0.145098 0 0 0 0 0.743686 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+    <filter id="y" width="4.448" height="4.112" x="9.045" y="14.536" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx=".25" dy="-.2"/>
+      <feGaussianBlur stdDeviation=".25"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.906118 0 0 0 0 0.329412 0 0 0 0 1 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+    <filter id="A" width="4.448" height="4.112" x="2.346" y="12.27" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx=".25" dy="-.2"/>
+      <feGaussianBlur stdDeviation=".25"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0.906118 0 0 0 0 0.329412 0 0 0 0 1 0 0 0 1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_6126_86420"/>
+    </filter>
+  </defs>
+</svg>

src/assets/svg/swap-arrows.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.80333 4.8863C7.51044 5.17919 7.51044 5.65406 7.80333 5.94696C8.09622 6.23985 8.5711 6.23985 8.86399 5.94696L7.80333 4.8863ZM12.0837 1.66663L12.614 1.1363C12.3211 0.843403 11.8462 0.843403 11.5533 1.1363L12.0837 1.66663ZM15.3033 5.94696C15.5962 6.23985 16.0711 6.23985 16.364 5.94696C16.6569 5.65406 16.6569 5.17919 16.364 4.8863L15.3033 5.94696ZM11.3337 9.99996C11.3337 10.4142 11.6694 10.75 12.0837 10.75C12.4979 10.75 12.8337 10.4142 12.8337 9.99996H11.3337ZM12.1973 15.1136C12.4902 14.8207 12.4902 14.3459 12.1973 14.053C11.9044 13.7601 11.4296 13.7601 11.1367 14.053L12.1973 15.1136ZM7.91699 18.3333L7.38666 18.8636C7.52731 19.0043 7.71808 19.0833 7.91699 19.0833C8.1159 19.0833 8.30667 19.0043 8.44732 18.8636L7.91699 18.3333ZM4.69732 14.053C4.40443 13.7601 3.92956 13.7601 3.63666 14.053C3.34377 14.3459 3.34377 14.8207 3.63666 15.1136L4.69732 14.053ZM8.66699 10.8333C8.66699 10.4191 8.33121 10.0833 7.91699 10.0833C7.50278 10.0833 7.16699 10.4191 7.16699 10.8333H8.66699ZM8.86399 5.94696L12.614 2.19696L11.5533 1.1363L7.80333 4.8863L8.86399 5.94696ZM11.5533 2.19696L15.3033 5.94696L16.364 4.8863L12.614 1.1363L11.5533 2.19696ZM11.3337 1.66663V9.99996H12.8337V1.66663H11.3337ZM11.1367 14.053L7.38666 17.803L8.44732 18.8636L12.1973 15.1136L11.1367 14.053ZM8.44732 17.803L4.69732 14.053L3.63666 15.1136L7.38666 18.8636L8.44732 17.803ZM8.66699 18.3333L8.66699 10.8333H7.16699L7.16699 18.3333H8.66699Z" fill="currentColor"/>
+</svg>

src/components/AccountDetails/index.tsx

@@ -145,7 +145,7 @@ const CloseIcon = styled.div`
   top: 14px;
   &:hover {
     cursor: pointer;
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
 `
 

src/components/Charts/AnimatedInLineChart.tsx

@@ -0,0 +1,90 @@
+import { Group } from '@visx/group'
+import { LinePath } from '@visx/shape'
+import { easeCubicInOut } from 'd3'
+import React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { animated, useSpring } from 'react-spring'
+import { useTheme } from 'styled-components/macro'
+
+import { LineChartProps } from './LineChart'
+
+const config = {
+  duration: 800,
+  easing: easeCubicInOut,
+}
+
+// code reference: https://airbnb.io/visx/lineradial
+
+function AnimatedInLineChart<T>({
+  data,
+  getX,
+  getY,
+  marginTop,
+  curve,
+  color,
+  strokeWidth,
+  width,
+  height,
+  children,
+}: LineChartProps<T>) {
+  const lineRef = useRef<SVGPathElement>(null)
+  const [lineLength, setLineLength] = useState(0)
+  const [shouldAnimate, setShouldAnimate] = useState(false)
+  const [hasAnimatedIn, setHasAnimatedIn] = useState(false)
+
+  const spring = useSpring({
+    frame: shouldAnimate ? 0 : 1,
+    config,
+    onRest: () => {
+      setShouldAnimate(false)
+      setHasAnimatedIn(true)
+    },
+  })
+
+  const effectDependency = lineRef.current
+  useEffect(() => {
+    if (lineRef.current) {
+      setLineLength(lineRef.current.getTotalLength())
+      setShouldAnimate(true)
+    }
+  }, [effectDependency])
+  const theme = useTheme()
+  const lineColor = color ?? theme.accentAction
+
+  return (
+    <svg width={width} height={height}>
+      <Group top={marginTop}>
+        <LinePath curve={curve} x={getX} y={getY}>
+          {({ path }) => {
+            const d = path(data) || ''
+            return (
+              <>
+                <animated.path
+                  d={d}
+                  ref={lineRef}
+                  strokeWidth={strokeWidth}
+                  strokeOpacity={hasAnimatedIn ? 1 : 0}
+                  fill="none"
+                  stroke={lineColor}
+                />
+                {shouldAnimate && lineLength !== 0 && (
+                  <animated.path
+                    d={d}
+                    strokeWidth={strokeWidth}
+                    fill="none"
+                    stroke={lineColor}
+                    strokeDashoffset={spring.frame.to((v) => v * lineLength)}
+                    strokeDasharray={lineLength}
+                  />
+                )}
+              </>
+            )
+          }}
+        </LinePath>
+      </Group>
+      {children}
+    </svg>
+  )
+}
+
+export default AnimatedInLineChart

src/components/Charts/LineChart.tsx

@@ -1,18 +1,17 @@
 import { Group } from '@visx/group'
 import { LinePath } from '@visx/shape'
 import { CurveFactory } from 'd3'
-import { radius } from 'd3-curve-circlecorners'
 import React from 'react'
 import { ReactNode } from 'react'
 import { useTheme } from 'styled-components/macro'
 import { Color } from 'theme/styled'
 
-interface LineChartProps<T> {
+export interface LineChartProps<T> {
   data: T[]
   getX: (t: T) => number
   getY: (t: T) => number
   marginTop?: number
-  curve?: CurveFactory
+  curve: CurveFactory
   color?: Color
   strokeWidth: number
   children?: ReactNode
@@ -37,7 +36,7 @@ function LineChart<T>({
     <svg width={width} height={height}>
       <Group top={marginTop}>
         <LinePath
-          curve={curve ?? radius(0.25)}
+          curve={curve}
           stroke={color ?? theme.accentAction}
           strokeWidth={strokeWidth}
           data={data}

src/components/Charts/SparklineChart.tsx

@@ -1,48 +1,54 @@
-import { scaleLinear } from 'd3'
+import { curveCardinal, scaleLinear } from 'd3'
+import { filterPrices } from 'graphql/data/Token'
+import { TopToken } from 'graphql/data/TopTokens'
+import { TimePeriod } from 'graphql/data/util'
 import React from 'react'
 import { useTheme } from 'styled-components/macro'
 
-import data from './data.json'
+import { DATA_EMPTY, getPriceBounds } from '../Tokens/TokenDetails/PriceChart'
 import LineChart from './LineChart'
 
 type PricePoint = { value: number; timestamp: number }
 
-function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
-  const prices = pricePoints.map((x) => x.value)
-  const min = Math.min(...prices)
-  const max = Math.max(...prices)
-  return [min, max]
-}
-
 interface SparklineChartProps {
   width: number
   height: number
+  tokenData: TopToken
+  pricePercentChange: number | undefined | null
+  timePeriod: TimePeriod
 }
 
-function SparklineChart({ width, height }: SparklineChartProps) {
+function SparklineChart({ width, height, tokenData, pricePercentChange, timePeriod }: SparklineChartProps) {
   const theme = useTheme()
-
-  /* TODO: Implement API calls & cache to use here */
-  const pricePoints = data.day
-  const startingPrice = pricePoints[0]
-  const endingPrice = pricePoints[pricePoints.length - 1]
-
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
-  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([height, 0])
-
-  const isPositive = endingPrice.value >= startingPrice.value
+  // for sparkline
+  const pricePoints = filterPrices(tokenData?.market?.priceHistory) ?? []
+  const hasData = pricePoints.length !== 0
+  const startingPrice = hasData ? pricePoints[0] : DATA_EMPTY
+  const endingPrice = hasData ? pricePoints[pricePoints.length - 1] : DATA_EMPTY
+  const widthScale = scaleLinear()
+    .domain(
+      // the range of possible input values
+      [startingPrice.timestamp, endingPrice.timestamp]
+    )
+    .range(
+      // the range of possible output values that the inputs should be transformed to (see https://www.d3indepth.com/scales/ for details)
+      [0, 110]
+    )
+  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([30, 0])
+  const curveTension = 0.9
 
   return (
     <LineChart
       data={pricePoints}
-      getX={(p: PricePoint) => timeScale(p.timestamp)}
+      getX={(p: PricePoint) => widthScale(p.timestamp)}
       getY={(p: PricePoint) => rdScale(p.value)}
-      marginTop={0}
-      color={isPositive ? theme.accentSuccess : theme.accentFailure}
+      curve={curveCardinal.tension(curveTension)}
+      marginTop={5}
+      color={pricePercentChange && pricePercentChange < 0 ? theme.accentFailure : theme.accentSuccess}
       strokeWidth={1.5}
       width={width}
       height={height}
-    ></LineChart>
+    />
   )
 }
 

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import HoverInlineText from 'components/HoverInlineText'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useMemo } from 'react'
 import { useTheme } from 'styled-components/macro'
 
@@ -18,6 +18,7 @@ export function FiatValue({
   priceImpact?: Percent
 }) {
   const theme = useTheme()
+  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
     if (priceImpact.lessThan('0')) return theme.deprecated_green1
@@ -30,19 +31,15 @@ export function FiatValue({
   const p = Number(fiatValue?.toFixed())
   const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
+  const textColor = redesignFlagEnabled
+    ? theme.textSecondary
+    : fiatValue
+    ? theme.deprecated_text3
+    : theme.deprecated_text4
+
   return (
-    <ThemedText.DeprecatedBody fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
-      {fiatValue ? (
-        <Trans>
-          $
-          <HoverInlineText
-            text={fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}
-            textColor={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}
-          />
-        </Trans>
-      ) : (
-        ''
-      )}
+    <ThemedText.DeprecatedBody fontSize={14} color={textColor}>
+      {fiatValue && <>${fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}</>}
       {priceImpact ? (
         <span style={{ color: priceImpactColor }}>
           {' '}

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
@@ -11,8 +11,7 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
-import { useLocation } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -51,7 +50,7 @@ const FixedContainer = styled.div<{ redesignFlag: boolean }>`
 `
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
-  min-height: ${({ redesignFlag }) => redesignFlag && '69px'};
+  min-height: ${({ redesignFlag }) => redesignFlag && '44px'};
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
   background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
@@ -78,7 +77,7 @@ const CurrencySelect = styled(ButtonGray)<{
   background-color: ${({ selected, theme, redesignFlag }) =>
     redesignFlag
       ? selected
-        ? theme.backgroundSurface
+        ? theme.backgroundInteractive
         : theme.accentAction
       : selected
       ? theme.deprecated_bg2
@@ -100,30 +99,51 @@ const CurrencySelect = styled(ButtonGray)<{
   gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
-  :focus,
-  :hover {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundSurface
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
-  }
+
+  ${({ redesignFlag, selected }) =>
+    !redesignFlag &&
+    css`
+      &:hover {
+        background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
+      }
+
+      &:active {
+        background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
+      }
+    `}
+
+  ${({ redesignFlag, selected }) =>
+    redesignFlag &&
+    css`
+      &:hover,
+      &:active {
+        background-color: ${({ theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
+      }
+
+      &:before {
+        background-size: 100%;
+        border-radius: inherit;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+        content: '';
+      }
+
+      &:hover:before {
+        background-color: ${({ theme }) => theme.stateOverlayHover};
+      }
+
+      &:active:before {
+        background-color: ${({ theme }) => theme.stateOverlayPressed};
+      }
+    `}
+
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
-const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
-  background-color: ${({ theme, selected, redesignFlag }) =>
-    redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
-  :focus,
-  :hover {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundInteractive
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
-  }
-`
 
 const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -133,13 +153,13 @@ const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
     redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
 `
 
-const LabelRow = styled.div`
+const LabelRow = styled.div<{ redesignFlag: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
   font-size: 0.75rem;
   line-height: 1rem;
-  padding: 0 1rem 1rem;
+  padding: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0 1rem 1rem')};
 
   span:hover {
     cursor: pointer;
@@ -149,23 +169,11 @@ const LabelRow = styled.div`
 
 const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
   justify-content: flex-end;
-  min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
+  min-height: ${({ redesignFlag }) => redesignFlag && '20px'};
+  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px 0px 0px'};
   height: ${({ redesignFlag }) => !redesignFlag && '24px'};
 `
 
-const NoBalanceState = styled.div`
-  color: ${({ theme }) => theme.textTertiary};
-  font-weight: 400;
-  justify-content: space-between;
-  padding: 0px 4px 1px 4px;
-`
-const NoBalanceDash = styled.span`
-  color: ${({ theme }) => theme.textTertiary};
-  font-variant: small-caps;
-  font-feature-settings: 'pnum' on, 'lnum' on;
-`
-
 const Aligner = styled.span`
   display: flex;
   align-items: center;
@@ -186,7 +194,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boole
 
 const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '18px')};
   font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
 `
 
@@ -217,8 +225,9 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
 const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
+  font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
+  line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
   font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
-  font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
 `
 
 interface SwapCurrencyInputPanelProps {
@@ -272,8 +281,6 @@ export default function SwapCurrencyInputPanel({
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
-  const { pathname } = useLocation()
-  const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2')
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
@@ -310,7 +317,7 @@ export default function SwapCurrencyInputPanel({
             />
           )}
 
-          <InputCurrencySelect
+          <CurrencySelect
             disabled={!chainAllowed}
             visible={currency !== undefined}
             selected={!!currency}
@@ -352,18 +359,8 @@ export default function SwapCurrencyInputPanel({
               </RowFixed>
               {onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
             </Aligner>
-          </InputCurrencySelect>
+          </CurrencySelect>
         </InputRow>
-        {redesignFlagEnabled && !currency && !isAddLiquidityPage && (
-          <NoBalanceState>
-            <FiatRow redesignFlag={redesignFlagEnabled}>
-              <RowBetween>
-                <NoBalanceDash>-</NoBalanceDash>
-                <NoBalanceDash>-</NoBalanceDash>
-              </RowBetween>
-            </FiatRow>
-          </NoBalanceState>
-        )}
         {!hideInput && !hideBalance && currency && (
           <FiatRow redesignFlag={redesignFlagEnabled}>
             <RowBetween>
@@ -373,11 +370,10 @@ export default function SwapCurrencyInputPanel({
               {account ? (
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.DeprecatedBody
-                    onClick={onMax}
-                    color={theme.deprecated_text3}
-                    fontWeight={500}
+                    color={redesignFlag ? theme.textSecondary : theme.deprecated_text3}
+                    fontWeight={redesignFlag ? 400 : 500}
                     fontSize={14}
-                    style={{ display: 'inline', cursor: 'pointer' }}
+                    style={{ display: 'inline' }}
                   >
                     {!hideBalance && currency && selectedCurrencyBalance ? (
                       renderBalance ? (

src/components/CurrencyInputPanel/index.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
@@ -140,7 +140,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
 
 const StyledTokenName = styled.span<{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-size: 20px;
 `
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`

src/components/CurrencyLogo/index.tsx

@@ -1,6 +1,6 @@
 import { Currency } from '@uniswap/sdk-core'
 import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
-import React from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
 import Logo from '../Logo'
@@ -24,18 +24,25 @@ const StyledNativeLogo = styled(StyledLogo)`
 
 export default function CurrencyLogo({
   currency,
+  symbol,
   size = '24px',
   style,
+  src,
   ...rest
 }: {
   currency?: Currency | null
+  symbol?: string | null
   size?: string
   style?: React.CSSProperties
+  src?: string | null
 }) {
+  const logoURIs = useCurrencyLogoURIs(currency)
+  const srcs = useMemo(() => (src ? [src] : logoURIs), [src, logoURIs])
   const props = {
     alt: `${currency?.symbol ?? 'token'} logo`,
     size,
-    srcs: useCurrencyLogoURIs(currency),
+    srcs,
+    symbol: symbol ?? currency?.symbol,
     style,
     ...rest,
   }

src/components/DowntimeWarning/index.tsx

@@ -49,7 +49,7 @@ export default function DowntimeWarning() {
 
   switch (chainId) {
     case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISTIC_KOVAN:
+    case SupportedChainId.OPTIMISM_GOERLI:
       return (
         <Wrapper>
           <Trans>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,10 +1,11 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
-import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter'
+import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
 import { X } from 'react-feather'
@@ -225,12 +226,6 @@ export default function FeatureFlagModal() {
           featureFlag={FeatureFlag.tokens}
           label="Tokens"
         />
-        <FeatureFlagOption
-          variant={TokensNetworkFilterVariant}
-          value={useTokensNetworkFilterFlag()}
-          featureFlag={FeatureFlag.tokensNetworkFilter}
-          label="Tokens Network Filter"
-        />
         <FeatureFlagOption
           variant={TokenSafetyVariant}
           value={useTokenSafetyFlag()}
@@ -238,9 +233,25 @@ export default function FeatureFlagModal() {
           label="Token Safety"
         />
       </FeatureFlagGroup>
+      <FeatureFlagGroup name="Phase 0 Follow-ups">
+        <FeatureFlagOption
+          variant={FavoriteTokensVariant}
+          value={useFavoriteTokensFlag()}
+          featureFlag={FeatureFlag.favoriteTokens}
+          label="Favorite Tokens"
+        />
+      </FeatureFlagGroup>
       <FeatureFlagGroup name="Phase 1">
         <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
       </FeatureFlagGroup>
+      <FeatureFlagGroup name="Debug">
+        <FeatureFlagOption
+          variant={TraceJsonRpcVariant}
+          value={useTraceJsonRpcFlag()}
+          featureFlag={FeatureFlag.traceJsonRpc}
+          label="Enables JSON-RPC tracing"
+        />
+      </FeatureFlagGroup>
       <SaveButton onClick={() => window.location.reload()}>Reload</SaveButton>
     </Modal>
   )

src/components/Header/ChainConnectivityWarning.tsx

@@ -2,17 +2,25 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { AlertOctagon } from 'react-feather'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { AlertOctagon, AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 
-const BodyRow = styled.div`
-  color: ${({ theme }) => theme.deprecated_black};
+const BodyRow = styled.div<{ $redesignFlag?: boolean }>`
+  color: ${({ theme, $redesignFlag }) => ($redesignFlag ? theme.textPrimary : theme.black)};
   font-size: 12px;
+  font-weight: ${({ $redesignFlag }) => $redesignFlag && '400'};
+  font-size: ${({ $redesignFlag }) => ($redesignFlag ? '14px' : '12px')};
+  line-height: ${({ $redesignFlag }) => $redesignFlag && '20px'};
 `
-const CautionIcon = styled(AlertOctagon)`
+const CautionOctagon = styled(AlertOctagon)`
   color: ${({ theme }) => theme.deprecated_black};
 `
+
+const CautionTriangle = styled(AlertTriangle)`
+  color: ${({ theme }) => theme.accentWarning};
+`
 const Link = styled(ExternalLink)`
   color: ${({ theme }) => theme.deprecated_black};
   text-decoration: underline;
@@ -23,21 +31,22 @@ const TitleRow = styled.div`
   justify-content: flex-start;
   margin-bottom: 8px;
 `
-const TitleText = styled.div`
-  color: black;
-  font-weight: 600;
+const TitleText = styled.div<{ redesignFlag?: boolean }>`
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textPrimary : theme.black)};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '500' : '600')};
   font-size: 16px;
-  line-height: 20px;
+  line-height: ${({ redesignFlag }) => (redesignFlag ? '24px' : '20px')};
   margin: 0px 12px;
 `
-const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_yellow3};
+const Wrapper = styled.div<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_yellow3)};
   border-radius: 12px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   bottom: 60px;
   display: none;
   max-width: 348px;
   padding: 16px 20px;
-  position: absolute;
+  position: fixed;
   right: 16px;
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium}px) {
     display: block;
@@ -48,20 +57,21 @@ export function ChainConnectivityWarning() {
   const { chainId } = useWeb3React()
   const info = getChainInfoOrDefault(chainId)
   const label = info?.label
+  const redesignFlag = useRedesignFlag() === RedesignVariant.Enabled
 
   return (
-    <Wrapper>
+    <Wrapper redesignFlag={redesignFlag}>
       <TitleRow>
-        <CautionIcon />
-        <TitleText>
+        {redesignFlag ? <CautionTriangle /> : <CautionOctagon />}
+        <TitleText redesignFlag={redesignFlag}>
           <Trans>Network Warning</Trans>
         </TitleText>
       </TitleRow>
-      <BodyRow>
+      <BodyRow $redesignFlag={redesignFlag}>
         {chainId === SupportedChainId.MAINNET ? (
           <Trans>You may have lost your network connection.</Trans>
         ) : (
-          <Trans>You may have lost your network connection, or {label} might be down right now.</Trans>
+          <Trans>{label} might be down right now, or you may have lost your network connection.</Trans>
         )}{' '}
         {(info as L2ChainInfo).statusPage !== undefined && (
           <span>

src/components/Header/NetworkSelector.tsx

@@ -11,7 +11,6 @@ import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'sta
 import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { isChainAllowed } from 'utils/switchChain'
 import { isMobile } from 'utils/userAgent'
 
 const ActiveRowLinkList = styled.div`
@@ -179,7 +178,7 @@ const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
     case SupportedChainId.ARBITRUM_RINKEBY:
       return <Trans>Arbitrum Bridge</Trans>
     case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISTIC_KOVAN:
+    case SupportedChainId.OPTIMISM_GOERLI:
       return <Trans>Optimism Bridge</Trans>
     case SupportedChainId.POLYGON:
     case SupportedChainId.POLYGON_MUMBAI:
@@ -197,7 +196,7 @@ const ExplorerLabel = ({ chainId }: { chainId: SupportedChainId }) => {
     case SupportedChainId.ARBITRUM_RINKEBY:
       return <Trans>Arbiscan</Trans>
     case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISTIC_KOVAN:
+    case SupportedChainId.OPTIMISM_GOERLI:
       return <Trans>Optimistic Etherscan</Trans>
     case SupportedChainId.POLYGON:
     case SupportedChainId.POLYGON_MUMBAI:
@@ -328,18 +327,16 @@ export default function NetworkSelector() {
             <FlyoutHeader>
               <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
             </FlyoutHeader>
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(chainId) ? (
-                <Row
-                  onSelectChain={async (targetChainId: SupportedChainId) => {
-                    await selectChain(targetChainId)
-                    closeModal()
-                  }}
-                  targetChain={chainId}
-                  key={chainId}
-                />
-              ) : null
-            )}
+            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
+              <Row
+                onSelectChain={async (targetChainId: SupportedChainId) => {
+                  await selectChain(targetChainId)
+                  closeModal()
+                }}
+                targetChain={chainId}
+                key={chainId}
+              />
+            ))}
           </FlyoutMenuContents>
         </FlyoutMenu>
       )}

src/components/HoverInlineText/index.tsx

@@ -10,7 +10,6 @@ const TextWrapper = styled.span<{
   textColor?: string
 }>`
   margin-left: ${({ margin }) => margin && '4px'};
-  color: ${({ theme, link, textColor }) => (link ? theme.deprecated_blue1 : textColor ?? theme.deprecated_text1)};
   font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
 
   @media screen and (max-width: 600px) {

src/components/Identicon/StatusIcon.tsx

@@ -1,11 +1,17 @@
+import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
+import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
+import sockImg from '../../assets/svg/socks.svg'
+import { useHasSocks } from '../../hooks/useSocksBalance'
 import Identicon from '../Identicon'
 
 const IconWrapper = styled.div<{ size?: number }>`
+  position: relative;
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -20,19 +26,55 @@ const IconWrapper = styled.div<{ size?: number }>`
   `};
 `
 
-export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
-  let image
-  switch (connectionType) {
-    case ConnectionType.INJECTED:
-      image = <Identicon />
-      break
-    case ConnectionType.WALLET_CONNECT:
-      image = <img src={WalletConnectIcon} alt="WalletConnect" />
-      break
-    case ConnectionType.COINBASE_WALLET:
-      image = <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
-      break
+const SockContainer = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  bottom: -4px;
+  right: -4px;
+`
+
+const SockImg = styled.img`
+  width: 16px;
+  height: 16px;
+`
+
+const Socks = () => {
+  return (
+    <SockContainer>
+      <SockImg src={sockImg} />
+    </SockContainer>
+  )
+}
+
+const useIcon = (connectionType: ConnectionType) => {
+  const { account } = useWeb3React()
+  const { avatar } = useENSAvatar(account ?? undefined)
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+
+  if ((isNavbarEnabled && avatar) || connectionType === ConnectionType.INJECTED) {
+    return <Identicon />
+  } else if (connectionType === ConnectionType.WALLET_CONNECT) {
+    return <img src={WalletConnectIcon} alt="WalletConnect" />
+  } else if (connectionType === ConnectionType.COINBASE_WALLET) {
+    return <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
   }
 
-  return <IconWrapper size={size ?? 16}>{image}</IconWrapper>
+  return undefined
+}
+
+export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
+  const hasSocks = useHasSocks()
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+  const icon = useIcon(connectionType)
+
+  return (
+    <IconWrapper size={size ?? 16}>
+      {isNavbarEnabled && hasSocks && <Socks />}
+      {icon}
+    </IconWrapper>
+  )
 }

src/components/Identicon/index.tsx

@@ -1,12 +1,13 @@
 import jazzicon from '@metamask/jazzicon'
 import { useWeb3React } from '@web3-react/core'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
 
-const StyledIdenticon = styled.div`
-  height: 1rem;
-  width: 1rem;
+const StyledIdenticon = styled.div<{ iconSize: number }>`
+  height: ${({ iconSize }) => `${iconSize}px`};
+  width: ${({ iconSize }) => `${iconSize}px`};
   border-radius: 1.125rem;
   background-color: ${({ theme }) => theme.deprecated_bg4};
   font-size: initial;
@@ -18,12 +19,14 @@ const StyledAvatar = styled.img`
   border-radius: inherit;
 `
 
-export default function Identicon() {
+export default function Identicon({ size }: { size?: number }) {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
   const [fetchable, setFetchable] = useState(true)
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+  const iconSize = size ? size : isNavbarEnabled ? 24 : 16
 
-  const icon = useMemo(() => account && jazzicon(16, parseInt(account.slice(2, 10), 16)), [account])
+  const icon = useMemo(() => account && jazzicon(iconSize, parseInt(account.slice(2, 10), 16)), [account, iconSize])
   const iconRef = useRef<HTMLDivElement>(null)
   useLayoutEffect(() => {
     const current = iconRef.current
@@ -41,7 +44,7 @@ export default function Identicon() {
   }, [icon, iconRef])
 
   return (
-    <StyledIdenticon>
+    <StyledIdenticon iconSize={iconSize}>
       {avatar && fetchable ? (
         <StyledAvatar alt="avatar" src={avatar} onError={() => setFetchable(false)}></StyledAvatar>
       ) : (

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -19,7 +19,7 @@ const HandleAccent = styled.path`
 
   stroke-width: 1.5;
   stroke: ${({ theme }) => theme.deprecated_white};
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
 `
 
 const LabelGroup = styled.g<{ visible: boolean }>`

src/components/LiquidityChartRangeInput/index.tsx

@@ -176,7 +176,7 @@ export default function LiquidityChartRangeInput({
           message={<Trans>Liquidity data not available.</Trans>}
           icon={<CloudOff size={56} stroke={theme.deprecated_text4} />}
         />
-      ) : !formattedData || formattedData === [] || !price ? (
+      ) : !formattedData || formattedData.length === 0 || !price ? (
         <InfoBox
           message={<Trans>There is no liquidity data.</Trans>}
           icon={<BarChart2 size={56} stroke={theme.deprecated_text4} />}

src/components/ListLogo/index.tsx

@@ -14,13 +14,15 @@ export default function ListLogo({
   style,
   size = '24px',
   alt,
+  symbol,
 }: {
   logoURI: string
   size?: string
   style?: React.CSSProperties
   alt?: string
+  symbol?: string
 }) {
   const srcs: string[] = useHttpLocations(logoURI)
 
-  return <StyledListLogo alt={alt} size={size} srcs={srcs} style={style} />
+  return <StyledListLogo alt={alt} size={size} symbol={symbol} srcs={srcs} style={style} />
 }

src/components/Logo/index.tsx

@@ -1,22 +1,34 @@
 import { useState } from 'react'
-import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
-import { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 
 interface LogoProps extends Pick<ImageProps, 'style' | 'alt' | 'className'> {
   srcs: string[]
+  symbol?: string
+  size?: string
 }
 
+const MissingImageLogo = styled.div<{ size?: string }>`
+  --size: ${({ size }) => size};
+  border-radius: 100px;
+  color: ${({ theme }) => theme.textPrimary};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  font-size: calc(var(--size) / 3);
+  font-weight: 500;
+  height: ${({ size }) => size ?? '24px'};
+  line-height: ${({ size }) => size ?? '24px'};
+  text-align: center;
+  width: ${({ size }) => size ?? '24px'};
+`
+
 /**
  * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert
  */
-export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
+export default function Logo({ srcs, alt, style, size, symbol, ...rest }: LogoProps) {
   const [, refresh] = useState<number>(0)
 
-  const theme = useTheme()
-
   const src: string | undefined = srcs.find((src) => !BAD_SRCS[src])
 
   if (src) {
@@ -34,5 +46,10 @@ export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
     )
   }
 
-  return <Slash {...rest} style={{ ...style, color: theme.deprecated_bg4 }} />
+  return (
+    <MissingImageLogo size={size}>
+      {/* use only first 3 characters of Symbol for design reasons */}
+      {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
+    </MissingImageLogo>
+  )
 }

src/components/Menu/index.tsx

@@ -278,7 +278,7 @@ export default function Menu() {
                     </ToggleMenuItem>
                     <ToggleMenuItem onClick={() => toggleDarkMode()}>
                       <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
-                      {darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
+                      {darkMode ? <Sun opacity={0.6} size={16} /> : <Moon opacity={0.6} size={16} />}
                     </ToggleMenuItem>
                     <MenuItem href="https://docs.uniswap.org/">
                       <div>

src/components/Modal/index.tsx

@@ -4,19 +4,21 @@ import React from 'react'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
 import styled, { css } from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean }>`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean; scrollOverlay?: boolean }>`
   &[data-reach-dialog-overlay] {
-    z-index: 2;
+    z-index: ${Z_INDEX.modalBackdrop};
     background-color: transparent;
     overflow: hidden;
 
     display: flex;
     align-items: center;
+    overflow-y: ${({ scrollOverlay }) => scrollOverlay && 'scroll'};
     justify-content: center;
 
     background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundScrim : theme.deprecated_modalBG)};
@@ -26,7 +28,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boole
 const AnimatedDialogContent = animated(DialogContent)
 // destructure to not pass custom props to Dialog DOM element
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, redesignFlag, ...rest }) => (
+const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, redesignFlag, scrollOverlay, ...rest }) => (
   <AnimatedDialogContent {...rest} />
 )).attrs({
   'aria-label': 'dialog',
@@ -34,7 +36,7 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
   overflow-y: auto;
 
   &[data-reach-dialog-content] {
-    margin: 0 0 2rem 0;
+    margin: ${({ redesignFlag }) => (redesignFlag ? 'auto' : '0 0 2rem 0')};
     background-color: ${({ theme }) => theme.deprecated_bg0};
     border: 1px solid ${({ theme }) => theme.deprecated_bg1};
     box-shadow: ${({ theme, redesignFlag }) =>
@@ -44,7 +46,7 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
     overflow-y: auto;
     overflow-x: hidden;
 
-    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};
+    align-self: ${({ mobile }) => mobile && 'flex-end'};
 
     max-width: 420px;
     ${({ maxHeight }) =>
@@ -57,11 +59,11 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
       css`
         min-height: ${minHeight}vh;
       `}
-    display: flex;
+    display: ${({ scrollOverlay }) => (scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
-    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+    ${({ theme, redesignFlag }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
       width: 65vw;
-      margin: 0;
+      margin: ${redesignFlag ? 'auto' : '0'};
     `}
     ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
       width:  85vw;
@@ -86,6 +88,7 @@ interface ModalProps {
   initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
   redesignFlag?: boolean
+  scrollOverlay?: boolean
 }
 
 export default function Modal({
@@ -96,8 +99,9 @@ export default function Modal({
   initialFocusRef,
   children,
   redesignFlag,
+  scrollOverlay,
 }: ModalProps) {
-  const fadeTransition = useTransition(isOpen, null, {
+  const fadeTransition = useTransition(isOpen, {
     config: { duration: 200 },
     from: { opacity: 0 },
     enter: { opacity: 1 },
@@ -118,16 +122,17 @@ export default function Modal({
 
   return (
     <>
-      {fadeTransition.map(
-        ({ item, key, props }) =>
+      {fadeTransition(
+        ({ opacity }, item) =>
           item && (
             <StyledDialogOverlay
-              key={key}
-              style={props}
+              as={AnimatedDialogOverlay}
+              style={{ opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }) }}
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
               unstable_lockFocusAcrossFrames={false}
               redesignFlag={redesignFlag}
+              scrollOverlay={scrollOverlay}
             >
               <StyledDialogContent
                 {...(isMobile
@@ -141,6 +146,7 @@ export default function Modal({
                 maxHeight={maxHeight}
                 mobile={isMobile}
                 redesignFlag={redesignFlag}
+                scrollOverlay={scrollOverlay}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
                 {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}

src/components/NavBar/ChainSelector.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css'
+import { lightGrayOverlayOnHover } from 'nft/css/common.css'
+
+import { sprinkles } from '../../nft/css/sprinkles.css'
+
+export const ChainSelector = style([
+  lightGrayOverlayOnHover,
+  sprinkles({
+    borderRadius: '8',
+    height: '40',
+    cursor: 'pointer',
+    border: 'none',
+    color: 'textPrimary',
+    background: 'none',
+  }),
+])
+
+export const Image = style([
+  sprinkles({
+    width: '20',
+    height: '20',
+  }),
+])

src/components/NavBar/ChainSelector.tsx

@@ -7,46 +7,18 @@ import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
-import { CheckMarkIcon, NewChevronDownIcon, NewChevronUpIcon, TokenWarningRedIcon } from 'nft/components/icons'
+import { TokenWarningRedIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
-import { themeVars, vars } from 'nft/css/sprinkles.css'
+import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
-import { ReactNode, useReducer, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
+import { ChevronDown, ChevronUp } from 'react-feather'
+import { useTheme } from 'styled-components/macro'
 
-import * as styles from './ChainSwitcher.css'
+import * as styles from './ChainSelector.css'
+import ChainSelectorRow from './ChainSelectorRow'
 import { NavDropdown } from './NavDropdown'
 
-const ChainRow = ({
-  targetChain,
-  onSelectChain,
-}: {
-  targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
-}) => {
-  const { chainId } = useWeb3React()
-  const active = chainId === targetChain
-  const { label, logoUrl } = getChainInfo(targetChain)
-
-  return (
-    <Column borderRadius="12">
-      <Row
-        as="button"
-        background="none"
-        className={`${styles.ChainSwitcherRow} ${subhead}`}
-        onClick={() => onSelectChain(targetChain)}
-      >
-        <ChainDetails>
-          <img src={logoUrl} alt={label} className={styles.Icon} />
-          {label}
-        </ChainDetails>
-        {active && <CheckMarkIcon width={20} height={20} color={vars.color.blue400} />}
-      </Row>
-    </Column>
-  )
-}
-
-const ChainDetails = ({ children }: { children: ReactNode }) => <Row>{children}</Row>
-
 const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.MAINNET,
   SupportedChainId.POLYGON,
@@ -55,24 +27,38 @@ const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.CELO,
 ]
 
-interface ChainSwitcherProps {
+interface ChainSelectorProps {
   leftAlign?: boolean
 }
 
-export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
+export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   const { chainId } = useWeb3React()
-  const [isOpen, toggleOpen] = useReducer((s) => !s, false)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
   const isMobile = useIsMobile()
 
+  const theme = useTheme()
+
   const ref = useRef<HTMLDivElement>(null)
   const modalRef = useRef<HTMLDivElement>(null)
-  useOnClickOutside(ref, isOpen ? toggleOpen : undefined, [modalRef])
+  useOnClickOutside(ref, () => setIsOpen(false), [modalRef])
 
   const info = chainId ? getChainInfo(chainId) : undefined
 
   const selectChain = useSelectChain()
   useSyncChainQuery()
 
+  const [pendingChainId, setPendingChainId] = useState<SupportedChainId | undefined>(undefined)
+
+  const onSelectChain = useCallback(
+    async (targetChainId: SupportedChainId) => {
+      setPendingChainId(targetChainId)
+      await selectChain(targetChainId)
+      setPendingChainId(undefined)
+      setIsOpen(false)
+    },
+    [selectChain, setIsOpen]
+  )
+
   if (!chainId) {
     return null
   }
@@ -81,50 +67,50 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
 
   const dropdown = (
     <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
-      <Column marginX="8">
+      <Column paddingX="8">
         {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
-          <ChainRow
-            onSelectChain={async (targetChainId: SupportedChainId) => {
-              await selectChain(targetChainId)
-              toggleOpen()
-            }}
+          <ChainSelectorRow
+            onSelectChain={onSelectChain}
             targetChain={chainId}
             key={chainId}
+            isPending={chainId === pendingChainId}
           />
         ))}
       </Column>
     </NavDropdown>
   )
 
+  const chevronProps = {
+    height: 20,
+    width: 20,
+    color: theme.textSecondary,
+  }
+
   return (
     <Box position="relative" ref={ref}>
       <Row
         as="button"
         gap="8"
-        className={styles.ChainSwitcher}
+        className={styles.ChainSelector}
         background={isOpen ? 'accentActiveSoft' : 'none'}
-        onClick={toggleOpen}
+        onClick={() => setIsOpen(!isOpen)}
       >
         {!isSupported ? (
           <>
-            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
-            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+            <TokenWarningRedIcon fill={themeVars.colors.textSecondary} width={24} height={24} />
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
               Unsupported
             </Box>
           </>
         ) : (
           <>
             <img src={info.logoUrl} alt={info.label} className={styles.Image} />
-            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
               {info.label}
             </Box>
           </>
         )}
-        {isOpen ? (
-          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
-        ) : (
-          <NewChevronDownIcon width={16} height={16} color="blackBlue" />
-        )}
+        {isOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
       </Row>
       {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
     </Box>

src/components/NavBar/ChainSelectorRow.tsx

@@ -0,0 +1,89 @@
+import { useWeb3React } from '@web3-react/core'
+import Loader from 'components/Loader'
+import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { CheckMarkIcon } from 'nft/components/icons'
+import styled, { useTheme } from 'styled-components/macro'
+
+const LOGO_SIZE = 20
+
+const Container = styled.button`
+  display: grid;
+  background: none;
+  grid-template-columns: min-content 1fr min-content;
+  align-items: center;
+  text-align: left;
+  line-height: 24px;
+  border: none;
+  justify-content: space-between;
+  padding: 10px 8px;
+  cursor: pointer;
+  border-radius: 12px;
+  color: ${({ theme }) => theme.textPrimary};
+  width: 240px;
+  transition: ${({ theme }) => theme.transition.duration.medium} ${({ theme }) => theme.transition.timing.ease}
+    background-color;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.backgroundOutline};
+  }
+`
+
+const Label = styled.div`
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 16px;
+`
+
+const Status = styled.div`
+  grid-column: 3;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  width: ${LOGO_SIZE}px;
+`
+
+const ApproveText = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
+  font-size: 12px;
+  grid-column: 2;
+  grid-row: 2;
+`
+
+const Logo = styled.img`
+  height: ${LOGO_SIZE}px;
+  width: ${LOGO_SIZE}px;
+  margin-right: 12px;
+`
+
+export default function ChainSelectorRow({
+  targetChain,
+  onSelectChain,
+  isPending,
+}: {
+  targetChain: SupportedChainId
+  onSelectChain: (targetChain: number) => void
+  isPending: boolean
+}) {
+  const { chainId } = useWeb3React()
+  const active = chainId === targetChain
+  const { label, logoUrl } = getChainInfo(targetChain)
+
+  const theme = useTheme()
+
+  return (
+    <Container onClick={() => onSelectChain(targetChain)}>
+      <Logo src={logoUrl} alt={label} />
+      <Label>{label}</Label>
+      {isPending && <ApproveText>Approve in wallet</ApproveText>}
+      <Status>
+        {active && <CheckMarkIcon width={LOGO_SIZE} height={LOGO_SIZE} color={theme.accentActive} />}
+        {isPending && <Loader width={LOGO_SIZE} height={LOGO_SIZE} />}
+      </Status>
+    </Container>
+  )
+}

src/components/NavBar/ChainSwitcher.css.ts

@@ -1,53 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { lightGrayOverlayOnHover } from 'nft/css/common.css'
-
-import { breakpoints, sprinkles } from '../../nft/css/sprinkles.css'
-
-export const ChainSwitcher = style([
-  lightGrayOverlayOnHover,
-  sprinkles({
-    borderRadius: '8',
-    paddingY: '8',
-    paddingX: '12',
-    cursor: 'pointer',
-    border: 'none',
-    color: 'blackBlue',
-    background: 'none',
-  }),
-])
-
-export const ChainSwitcherRow = style([
-  lightGrayOverlayOnHover,
-  sprinkles({
-    border: 'none',
-    justifyContent: 'space-between',
-    paddingX: '8',
-    paddingY: '8',
-    cursor: 'pointer',
-    color: 'blackBlue',
-    borderRadius: '12',
-    width: { sm: 'full' },
-  }),
-  {
-    lineHeight: '24px',
-    '@media': {
-      [`screen and (min-width: ${breakpoints.sm}px)`]: {
-        width: '204px',
-      },
-    },
-  },
-])
-
-export const Image = style([
-  sprinkles({
-    width: '20',
-    height: '20',
-  }),
-])
-
-export const Icon = style([
-  Image,
-  sprinkles({
-    marginRight: '12',
-  }),
-])

src/components/NavBar/MenuDropdown.css.ts

@@ -17,7 +17,7 @@ export const hover = style([
 export const MenuRow = style([
   hover,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     paddingY: '8',
     paddingX: '8',
     width: 'full',
@@ -40,7 +40,8 @@ export const SecondaryText = style([
   sprinkles({
     paddingY: '8',
     paddingX: '8',
-    color: 'darkGray',
+    color: 'textSecondary',
+    width: 'full',
   }),
   {
     lineHeight: '20px',
@@ -54,7 +55,7 @@ export const Separator = style([
   }),
   {
     borderTop: 'solid',
-    borderColor: themeVars.colors.medGray,
+    borderColor: themeVars.colors.backgroundOutline,
     borderWidth: '1px',
   },
 ])

src/components/NavBar/MenuDropdown.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -11,7 +10,6 @@ import {
   EllipsisIcon,
   GithubIconMenu,
   GovernanceIcon,
-  ThinTagIcon,
   TwitterIconMenu,
 } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
@@ -100,7 +98,7 @@ const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
         rel={href ? 'noopener noreferrer' : undefined}
         display="flex"
         flexDirection="column"
-        color="blackBlue"
+        color="textPrimary"
         background="none"
         border="none"
         justifyContent="center"
@@ -117,7 +115,6 @@ export const MenuDropdown = () => {
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
   const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
-  const nftFlag = useNftFlag()
 
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
@@ -126,23 +123,13 @@ export const MenuDropdown = () => {
     <>
       <Box position="relative" ref={ref}>
         <NavIcon isActive={isOpen} onClick={toggleOpen}>
-          <EllipsisIcon width={28} height={28} />
+          <EllipsisIcon width={20} height={20} />
         </NavIcon>
 
         {isOpen && (
-          <NavDropdown top={{ sm: 'unset', xxl: '56' }} bottom={{ sm: '56', xxl: 'unset' }} right="0">
+          <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '56', lg: 'unset' }} right="0">
             <Column gap="16">
               <Column paddingX="8" gap="4">
-                {nftFlag === NftVariant.Enabled && (
-                  <PrimaryMenuRow to="/nft/sell" close={toggleOpen}>
-                    <Icon>
-                      <ThinTagIcon width={24} height={24} />
-                    </Icon>
-                    <PrimaryMenuRow.Text>
-                      <Trans>Sell NFTs</Trans>
-                    </PrimaryMenuRow.Text>
-                  </PrimaryMenuRow>
-                )}
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} />
@@ -190,13 +177,28 @@ export const MenuDropdown = () => {
               </Box>
               <IconRow>
                 <Icon href="https://discord.com/invite/FCfyBSbCU5">
-                  <DiscordIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <DiscordIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
                 <Icon href="https://twitter.com/Uniswap">
-                  <TwitterIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <TwitterIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
                 <Icon href="https://github.com/Uniswap">
-                  <GithubIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                  <GithubIconMenu
+                    className={styles.hover}
+                    width={24}
+                    height={24}
+                    color={themeVars.colors.textSecondary}
+                  />
                 </Icon>
               </IconRow>
             </Column>

src/components/NavBar/NavDropdown.css.ts

@@ -4,9 +4,9 @@ import { sprinkles } from '../../nft/css/sprinkles.css'
 
 const baseNavDropdown = style([
   sprinkles({
-    background: 'lightGray',
+    background: 'backgroundSurface',
     borderStyle: 'solid',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
     borderWidth: '1px',
     paddingBottom: '8',
     paddingTop: '8',
@@ -38,4 +38,8 @@ export const mobileNavDropdown = style([
     right: '0',
     width: 'full',
   }),
+  {
+    borderRightWidth: '0px',
+    borderLeftWidth: '0px',
+  },
 ])

src/components/NavBar/NavIcon.css.ts

@@ -11,7 +11,7 @@ export const navIcon = style([
     justifyContent: 'center',
     textAlign: 'center',
     cursor: 'pointer',
-    padding: '8',
+    padding: '10',
     borderRadius: '8',
     transition: '250',
   }),
@@ -19,6 +19,6 @@ export const navIcon = style([
     ':hover': {
       background: vars.color.lightGrayOverlay,
     },
-    zIndex: 2,
+    zIndex: 1,
   },
 ])

src/components/NavBar/NavIcon.tsx

@@ -15,8 +15,9 @@ export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
       as="button"
       className={styles.navIcon}
       background={isActive ? 'accentActiveSoft' : 'none'}
-      color={isActive ? 'blackBlue' : 'darkGray'}
+      color={isActive ? 'textPrimary' : 'textSecondary'}
       onClick={onClick}
+      height="40"
     >
       {children}
     </Box>

src/components/NavBar/SearchBar.css.ts

@@ -3,7 +3,8 @@ import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css'
 
 import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css'
 
-const DESKTOP_NAVBAR_WIDTH = '360px'
+const DESKTOP_NAVBAR_WIDTH = 360
+const MAGNIFYING_GLASS_ICON_WIDTH = 28
 
 const baseSearchStyle = style([
   sprinkles({
@@ -11,12 +12,29 @@ const baseSearchStyle = style([
     width: { sm: 'viewWidth' },
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'medGray',
+    borderColor: 'backgroundOutline',
   }),
   {
     '@media': {
-      [`screen and (min-width: ${breakpoints.md}px)`]: {
-        width: DESKTOP_NAVBAR_WIDTH,
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH}px`,
+      },
+    },
+  },
+])
+
+export const searchBarContainer = style([
+  sprinkles({
+    right: '0',
+    top: '0',
+    zIndex: '3',
+    display: 'inline-block',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.lg}px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH / 2 - MAGNIFYING_GLASS_ICON_WIDTH}px`,
+        top: '-3px',
       },
     },
   },
@@ -25,11 +43,9 @@ const baseSearchStyle = style([
 export const searchBar = style([
   baseSearchStyle,
   sprinkles({
-    height: 'full',
-    color: 'placeholder',
+    color: 'textTertiary',
     paddingX: '16',
-    cursor: 'pointer',
-    background: 'lightGray',
+    background: 'backgroundSurface',
   }),
 ])
 
@@ -38,22 +54,21 @@ export const searchBarInput = style([
     padding: '0',
     fontWeight: 'normal',
     fontSize: '16',
-    color: { default: 'blackBlue', placeholder: 'placeholder' },
+    color: { default: 'textPrimary', placeholder: 'textTertiary' },
     border: 'none',
     background: 'none',
+    lineHeight: '24',
+    height: 'full',
   }),
-  { lineHeight: '24px' },
 ])
 
 export const searchBarDropdown = style([
   baseSearchStyle,
   sprinkles({
-    position: 'absolute',
-    left: '0',
-    top: '48',
     borderBottomLeftRadius: '12',
     borderBottomRightRadius: '12',
-    background: 'lightGray',
+    background: 'backgroundSurface',
+    height: { sm: 'viewHeight', md: 'auto' },
   }),
   {
     borderTop: 'none',
@@ -68,11 +83,10 @@ export const suggestionRow = style([
     justifyContent: 'space-between',
     paddingY: '8',
     paddingX: '16',
-    transition: '250',
+    cursor: 'pointer',
   }),
   {
     ':hover': {
-      cursor: 'pointer',
       background: vars.color.lightGrayOverlay,
     },
     textDecoration: 'none',
@@ -104,7 +118,7 @@ export const primaryText = style([
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
   {
     lineHeight: '24px',
@@ -114,7 +128,7 @@ export const primaryText = style([
 export const secondaryText = style([
   buttonTextSmall,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
   {
     lineHeight: '20px',
@@ -124,7 +138,7 @@ export const secondaryText = style([
 export const imageHolder = style([
   suggestionImage,
   sprinkles({
-    background: 'loading',
+    background: 'backgroundModule',
     flexShrink: '0',
   }),
 ])
@@ -137,7 +151,7 @@ export const suggestionIcon = sprinkles({
 export const sectionHeader = style([
   subheadSmall,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
   {
     lineHeight: '20px',
@@ -149,6 +163,52 @@ export const notFoundContainer = style([
   sprinkles({
     paddingY: '4',
     paddingLeft: '16',
-    marginTop: '20',
   }),
 ])
+
+const visibilityTransition = `visibility ${vars.time[125]}, opacity ${vars.time[125]}`
+const delayedTransitionProperties = `padding 0s ${vars.time[125]}, height 0s ${vars.time[125]}`
+
+export const hidden = style([
+  sprinkles({
+    visibility: 'hidden',
+    opacity: '0',
+    padding: '0',
+    height: '0',
+  }),
+  {
+    transition: `${visibilityTransition}, ${delayedTransitionProperties}`,
+    transitionTimingFunction: 'ease-in',
+  },
+])
+export const visible = style([
+  sprinkles({
+    visibility: 'visible',
+    opacity: '1',
+    height: 'full',
+  }),
+  {
+    transition: `${visibilityTransition}`,
+    transitionTimingFunction: 'ease-out',
+  },
+])
+
+export const searchContentCentered = style({
+  '@media': {
+    [`screen and (min-width: ${breakpoints.lg}px)`]: {
+      transform: `translateX(${DESKTOP_NAVBAR_WIDTH / 4}px)`,
+      transition: `transform ${vars.time[125]}`,
+      transitionTimingFunction: 'ease-out',
+    },
+  },
+})
+
+export const searchContentLeftAlign = style({
+  '@media': {
+    [`screen and (min-width: ${breakpoints.lg}px)`]: {
+      transform: 'translateX(0)',
+      transition: `transform ${vars.time[125]}`,
+      transitionTimingFunction: 'ease-in',
+    },
+  },
+})

src/components/NavBar/SearchBar.tsx

@@ -1,276 +1,38 @@
 // eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
+import { t } from '@lingui/macro'
+import { sendAnalyticsEvent } from 'analytics'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { organizeSearchResults } from 'lib/utils/searchBar'
 import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { Overlay } from 'nft/components/modals/Overlay'
-import { magicalGradientOnHover, subheadSmall } from 'nft/css/common.css'
-import { useIsMobile, useSearchHistory } from 'nft/hooks'
-import { fetchSearchCollections, fetchTrendingCollections } from 'nft/queries'
+import { Row } from 'nft/components/Flex'
+import { magicalGradientOnHover } from 'nft/css/common.css'
+import { useIsMobile, useIsTablet } from 'nft/hooks'
+import { fetchSearchCollections } from 'nft/queries'
 import { fetchSearchTokens } from 'nft/queries/genie/SearchTokensFetcher'
-import { fetchTrendingTokens } from 'nft/queries/genie/TrendingTokensFetcher'
-import { FungibleToken, GenieCollection, TimePeriod, TrendingCollection } from 'nft/types'
-import { formatEthPrice } from 'nft/utils/currency'
-import { ChangeEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { ChangeEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { useQuery } from 'react-query'
 import { useLocation } from 'react-router-dom'
 
-import {
-  ChevronLeftIcon,
-  ClockIcon,
-  MagnifyingGlassIcon,
-  NavMagnifyingGlassIcon,
-  TrendingArrow,
-} from '../../nft/components/icons'
+import { ChevronLeftIcon, MagnifyingGlassIcon, NavMagnifyingGlassIcon } from '../../nft/components/icons'
 import { NavIcon } from './NavIcon'
 import * as styles from './SearchBar.css'
-import { CollectionRow, SkeletonRow, TokenRow } from './SuggestionRow'
-
-interface SearchBarDropdownSectionProps {
-  toggleOpen: () => void
-  suggestions: (GenieCollection | FungibleToken)[]
-  header: JSX.Element
-  headerIcon?: JSX.Element
-  hoveredIndex: number | undefined
-  startingIndex: number
-  setHoveredIndex: (index: number | undefined) => void
-}
-
-export const SearchBarDropdownSection = ({
-  toggleOpen,
-  suggestions,
-  header,
-  headerIcon = undefined,
-  hoveredIndex,
-  startingIndex,
-  setHoveredIndex,
-}: SearchBarDropdownSectionProps) => {
-  return (
-    <Column gap="12">
-      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
-        {headerIcon ? headerIcon : null}
-        <Box>{header}</Box>
-      </Row>
-      <Column gap="12">
-        {suggestions?.map((suggestion, index) =>
-          isCollection(suggestion) ? (
-            <CollectionRow
-              key={suggestion.address}
-              collection={suggestion as GenieCollection}
-              isHovered={hoveredIndex === index + startingIndex}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              index={index + startingIndex}
-            />
-          ) : (
-            <TokenRow
-              key={suggestion.address}
-              token={suggestion as FungibleToken}
-              isHovered={hoveredIndex === index + startingIndex}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              index={index + startingIndex}
-            />
-          )
-        )}
-      </Column>
-    </Column>
-  )
-}
-
-interface SearchBarDropdownProps {
-  toggleOpen: () => void
-  tokens: FungibleToken[]
-  collections: GenieCollection[]
-  hasInput: boolean
-}
-
-export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }: SearchBarDropdownProps) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(undefined)
-  const searchHistory = useSearchHistory(
-    (state: { history: (FungibleToken | GenieCollection)[] }) => state.history
-  ).slice(0, 2)
-  const { pathname } = useLocation()
-  const isNFTPage = pathname.includes('/nfts')
-  const isTokenPage = pathname.includes('/tokens')
-  const phase1Flag = useNftFlag()
-
-  const tokenSearchResults =
-    tokens.length > 0 ? (
-      <SearchBarDropdownSection
-        hoveredIndex={hoveredIndex}
-        startingIndex={isNFTPage ? collections.length : 0}
-        setHoveredIndex={setHoveredIndex}
-        toggleOpen={toggleOpen}
-        suggestions={tokens}
-        header={<Trans>Tokens</Trans>}
-      />
-    ) : (
-      <Box className={styles.notFoundContainer}>
-        <Trans>No tokens found.</Trans>
-      </Box>
-    )
-
-  const collectionSearchResults =
-    phase1Flag === NftVariant.Enabled ? (
-      collections.length > 0 ? (
-        <SearchBarDropdownSection
-          hoveredIndex={hoveredIndex}
-          startingIndex={isNFTPage ? 0 : tokens.length}
-          setHoveredIndex={setHoveredIndex}
-          toggleOpen={toggleOpen}
-          suggestions={collections}
-          header={<Trans>NFT Collections</Trans>}
-        />
-      ) : (
-        <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
-      )
-    ) : null
-
-  const { data: trendingCollectionResults } = useQuery(['trendingCollections', 'eth', 'twenty_four_hours'], () =>
-    fetchTrendingCollections({ volumeType: 'eth', timePeriod: 'ONE_DAY' as TimePeriod, size: 3 })
-  )
-
-  const trendingCollections = useMemo(() => {
-    return trendingCollectionResults
-      ?.map((collection) => {
-        return {
-          ...collection,
-          collectionAddress: collection.address,
-          floorPrice: formatEthPrice(collection.floor.toString()),
-          stats: {
-            total_supply: collection.totalSupply,
-            one_day_change: collection.floorChange,
-          },
-        }
-      })
-      .slice(0, isNFTPage ? 3 : 2)
-  }, [isNFTPage, trendingCollectionResults])
-
-  const showTrendingCollections: boolean = useMemo(
-    () => (trendingCollections?.length ?? 0) > 0 && !isTokenPage && phase1Flag === NftVariant.Enabled,
-    [trendingCollections?.length, isTokenPage, phase1Flag]
-  )
-
-  const { data: trendingTokenResults } = useQuery([], () => fetchTrendingTokens(4), {
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-  })
-
-  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
-
-  const trendingTokens = useMemo(() => {
-    return trendingTokenResults?.slice(0, trendingTokensLength)
-  }, [trendingTokenResults, trendingTokensLength])
-
-  const totalSuggestions = hasInput
-    ? tokens.length + collections.length
-    : Math.min(searchHistory.length, 2) +
-      (isNFTPage || !isTokenPage ? trendingCollections?.length ?? 0 : 0) +
-      (isTokenPage || !isNFTPage ? trendingTokens?.length ?? 0 : 0)
-
-  // Close the modal on escape
-  useEffect(() => {
-    const keyDownHandler = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        if (!hoveredIndex) {
-          setHoveredIndex(totalSuggestions - 1)
-        } else {
-          setHoveredIndex(hoveredIndex - 1)
-        }
-      } else if (event.key === 'ArrowDown') {
-        if (hoveredIndex && hoveredIndex === totalSuggestions - 1) {
-          setHoveredIndex(0)
-        } else {
-          setHoveredIndex((hoveredIndex ?? -1) + 1)
-        }
-      }
-    }
-
-    document.addEventListener('keydown', keyDownHandler)
-
-    return () => {
-      document.removeEventListener('keydown', keyDownHandler)
-    }
-  }, [toggleOpen, hoveredIndex, totalSuggestions])
-
-  return (
-    <Box className={styles.searchBarDropdown}>
-      {hasInput ? (
-        // Empty or Up to 8 combined tokens and nfts
-        <Column gap="20">
-          {isNFTPage ? (
-            <>
-              {collectionSearchResults}
-              {tokenSearchResults}
-            </>
-          ) : (
-            <>
-              {tokenSearchResults}
-              {collectionSearchResults}
-            </>
-          )}
-        </Column>
-      ) : (
-        // Recent Searches, Trending Tokens, Trending Collections
-        <Column gap="20">
-          {searchHistory.length > 0 && (
-            <SearchBarDropdownSection
-              hoveredIndex={hoveredIndex}
-              startingIndex={0}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              suggestions={searchHistory}
-              header={<Trans>Recent searches</Trans>}
-              headerIcon={<ClockIcon />}
-            />
-          )}
-          {(trendingTokens?.length ?? 0) > 0 && !isNFTPage && (
-            <SearchBarDropdownSection
-              hoveredIndex={hoveredIndex}
-              startingIndex={searchHistory.length}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              suggestions={trendingTokens ?? []}
-              header={<Trans>Popular tokens</Trans>}
-              headerIcon={<TrendingArrow />}
-            />
-          )}
-          {showTrendingCollections && (
-            <SearchBarDropdownSection
-              hoveredIndex={hoveredIndex}
-              startingIndex={searchHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              suggestions={trendingCollections as unknown as GenieCollection[]}
-              header={<Trans>Popular NFT collections</Trans>}
-              headerIcon={<TrendingArrow />}
-            />
-          )}
-        </Column>
-      )}
-    </Box>
-  )
-}
-
-function isCollection(suggestion: GenieCollection | FungibleToken | TrendingCollection) {
-  return (suggestion as FungibleToken).decimals === undefined
-}
+import { SearchBarDropdown } from './SearchBarDropdown'
 
 export const SearchBar = () => {
   const [isOpen, toggleOpen] = useReducer((state: boolean) => !state, false)
   const [searchValue, setSearchValue] = useState('')
   const debouncedSearchValue = useDebounce(searchValue, 300)
   const searchRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const { pathname } = useLocation()
   const phase1Flag = useNftFlag()
   const isMobile = useIsMobile()
+  const isTablet = useIsTablet()
 
   useOnClickOutside(searchRef, () => {
     isOpen && toggleOpen()
@@ -300,6 +62,7 @@ export const SearchBar = () => {
 
   const [reducedTokens, reducedCollections] = organizeSearchResults(isNFTPage, tokens ?? [], collections ?? [])
 
+  // close dropdown on escape
   useEffect(() => {
     const escapeKeyDownHandler = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOpen) {
@@ -320,65 +83,89 @@ export const SearchBar = () => {
     setSearchValue('')
   }, [pathname])
 
+  // auto set cursor when searchbar is opened
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus()
+    }
+  }, [isOpen])
+
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
+  const isMobileOrTablet = isMobile || isTablet
+  const showCenteredSearchContent =
+    !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0
+
+  const navbarSearchEventProperties = {
+    navbar_search_input_text: debouncedSearchValue,
+  }
 
   return (
-    <>
+    <Box position="relative">
       <Box
-        position={{ sm: isOpen ? 'absolute' : 'relative', lg: 'relative' }}
-        top={{ sm: '0', lg: 'unset' }}
-        left={{ sm: '0', lg: 'unset' }}
-        width={{ sm: isOpen ? 'viewWidth' : 'auto', lg: 'auto' }}
+        position={{ sm: 'fixed', md: 'absolute' }}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
-        style={{ zIndex: '1000' }}
+        className={styles.searchBarContainer}
+        display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
       >
         <Row
-          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
-          borderRadius={isOpen ? undefined : '12'}
+          className={clsx(
+            ` ${styles.searchBar} ${!isOpen && !isMobile && magicalGradientOnHover} ${
+              isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
+            }`
+          )}
+          borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
           borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          display={{ sm: isOpen ? 'flex' : 'none', lg: 'flex' }}
-          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-          onFocus={() => !isOpen && toggleOpen()}
+          borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
           onClick={() => !isOpen && toggleOpen()}
           gap="12"
         >
-          <Box display={{ sm: 'none', lg: 'flex' }}>
-            <MagnifyingGlassIcon />
+          <Box className={showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign}>
+            <Box display={{ sm: 'none', md: 'flex' }}>
+              <MagnifyingGlassIcon />
+            </Box>
+            <Box display={{ sm: 'flex', md: 'none' }} color="textTertiary" onClick={toggleOpen}>
+              <ChevronLeftIcon />
+            </Box>
           </Box>
-          <Box display={{ sm: 'flex', lg: 'none' }} color="placeholder" onClick={toggleOpen}>
-            <ChevronLeftIcon />
-          </Box>
-          <Box
-            as="input"
-            placeholder={placeholderText}
-            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              !isOpen && toggleOpen()
-              setSearchValue(event.target.value)
-            }}
-            className={styles.searchBarInput}
-            value={searchValue}
-          />
+          <TraceEvent
+            events={[Event.onFocus]}
+            name={EventName.NAVBAR_SEARCH_SELECTED}
+            element={ElementName.NAVBAR_SEARCH_INPUT}
+          >
+            <Box
+              as="input"
+              placeholder={placeholderText}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                !isOpen && toggleOpen()
+                setSearchValue(event.target.value)
+              }}
+              onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
+              className={`${styles.searchBarInput} ${
+                showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
+              }`}
+              value={searchValue}
+              ref={inputRef}
+              width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
+            />
+          </TraceEvent>
         </Row>
-        <Box display={{ sm: isOpen ? 'none' : 'flex', lg: 'none' }}>
-          <NavIcon onClick={toggleOpen}>
-            <NavMagnifyingGlassIcon width={28} height={28} />
-          </NavIcon>
-        </Box>
-        {isOpen &&
-          (searchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
-            <SkeletonRow />
-          ) : (
+        <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
+          {isOpen && (
             <SearchBarDropdown
               toggleOpen={toggleOpen}
               tokens={reducedTokens}
               collections={reducedCollections}
-              hasInput={searchValue.length > 0}
+              hasInput={debouncedSearchValue.length > 0}
+              isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)}
             />
-          ))}
+          )}
+        </Box>
       </Box>
-      {isOpen && <Overlay />}
-    </>
+      <NavIcon onClick={toggleOpen}>
+        <NavMagnifyingGlassIcon />
+      </NavIcon>
+    </Box>
   )
 }

src/components/NavBar/SearchBarDropdown.tsx

@@ -0,0 +1,310 @@
+import { Trans } from '@lingui/macro'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { Box } from 'nft/components/Box'
+import { Column, Row } from 'nft/components/Flex'
+import { subheadSmall } from 'nft/css/common.css'
+import { useSearchHistory } from 'nft/hooks'
+import { fetchTrendingCollections } from 'nft/queries'
+import { fetchTrendingTokens } from 'nft/queries/genie/TrendingTokensFetcher'
+import { FungibleToken, GenieCollection, TimePeriod, TrendingCollection } from 'nft/types'
+import { formatEthPrice } from 'nft/utils/currency'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
+import { useQuery } from 'react-query'
+import { useLocation } from 'react-router-dom'
+
+import { ClockIcon, TrendingArrow } from '../../nft/components/icons'
+import * as styles from './SearchBar.css'
+import { CollectionRow, SkeletonRow, TokenRow } from './SuggestionRow'
+
+function isCollection(suggestion: GenieCollection | FungibleToken | TrendingCollection) {
+  return (suggestion as FungibleToken).decimals === undefined
+}
+
+interface SearchBarDropdownSectionProps {
+  toggleOpen: () => void
+  suggestions: (GenieCollection | FungibleToken)[]
+  header: JSX.Element
+  headerIcon?: JSX.Element
+  hoveredIndex: number | undefined
+  startingIndex: number
+  setHoveredIndex: (index: number | undefined) => void
+  isLoading?: boolean
+}
+
+export const SearchBarDropdownSection = ({
+  toggleOpen,
+  suggestions,
+  header,
+  headerIcon = undefined,
+  hoveredIndex,
+  startingIndex,
+  setHoveredIndex,
+  isLoading,
+}: SearchBarDropdownSectionProps) => {
+  return (
+    <Column gap="12">
+      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
+        {headerIcon ? headerIcon : null}
+        <Box>{header}</Box>
+      </Row>
+      <Column gap="12">
+        {suggestions.map((suggestion, index) =>
+          isLoading ? (
+            <SkeletonRow key={index} />
+          ) : isCollection(suggestion) ? (
+            <CollectionRow
+              key={suggestion.address}
+              collection={suggestion as GenieCollection}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              traceEvent={() =>
+                sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, {
+                  position: index,
+                  selected_type: 'collection',
+                  suggestion_count: suggestions.length,
+                  selected_name: suggestion.name,
+                  selected_address: suggestion.address,
+                })
+              }
+              index={index + startingIndex}
+            />
+          ) : (
+            <TokenRow
+              key={suggestion.address}
+              token={suggestion as FungibleToken}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              traceEvent={() =>
+                sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, {
+                  position: index,
+                  selected_type: 'token',
+                  suggestion_count: suggestions.length,
+                  selected_name: suggestion.name,
+                  selected_address: suggestion.address,
+                })
+              }
+              index={index + startingIndex}
+            />
+          )
+        )}
+      </Column>
+    </Column>
+  )
+}
+
+interface SearchBarDropdownProps {
+  toggleOpen: () => void
+  tokens: FungibleToken[]
+  collections: GenieCollection[]
+  hasInput: boolean
+  isLoading: boolean
+}
+
+export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, isLoading }: SearchBarDropdownProps) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(0)
+  const searchHistory = useSearchHistory((state: { history: (FungibleToken | GenieCollection)[] }) => state.history)
+  const shortenedHistory = useMemo(() => searchHistory.slice(0, 2), [searchHistory])
+  const { pathname } = useLocation()
+  const isNFTPage = pathname.includes('/nfts')
+  const isTokenPage = pathname.includes('/tokens')
+  const phase1Flag = useNftFlag()
+  const [resultsState, setResultsState] = useState<ReactNode>()
+
+  const { data: trendingCollectionResults, isLoading: trendingCollectionsAreLoading } = useQuery(
+    ['trendingCollections', 'eth', 'twenty_four_hours'],
+    () => fetchTrendingCollections({ volumeType: 'eth', timePeriod: 'ONE_DAY' as TimePeriod, size: 3 })
+  )
+
+  const trendingCollections = useMemo(
+    () =>
+      trendingCollectionResults
+        ? trendingCollectionResults
+            .map((collection) => ({
+              ...collection,
+              collectionAddress: collection.address,
+              floorPrice: formatEthPrice(collection.floor?.toString()),
+              stats: {
+                total_supply: collection.totalSupply,
+                one_day_change: collection.floorChange,
+              },
+            }))
+            .slice(0, isNFTPage ? 3 : 2)
+        : [...Array<GenieCollection>(isNFTPage ? 3 : 2)],
+    [isNFTPage, trendingCollectionResults]
+  )
+
+  const { data: trendingTokenResults, isLoading: trendingTokensAreLoading } = useQuery(
+    ['trendingTokens'],
+    () => fetchTrendingTokens(4),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    }
+  )
+
+  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
+
+  const trendingTokens = useMemo(
+    () =>
+      trendingTokenResults
+        ? trendingTokenResults.slice(0, trendingTokensLength)
+        : [...Array<FungibleToken>(trendingTokensLength)],
+    [trendingTokenResults, trendingTokensLength]
+  )
+
+  const totalSuggestions = hasInput
+    ? tokens.length + collections.length
+    : Math.min(shortenedHistory.length, 2) +
+      (isNFTPage || !isTokenPage ? trendingCollections?.length ?? 0 : 0) +
+      (isTokenPage || !isNFTPage ? trendingTokens?.length ?? 0 : 0)
+
+  // Navigate search results via arrow keys
+  useEffect(() => {
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (!hoveredIndex) {
+          setHoveredIndex(totalSuggestions - 1)
+        } else {
+          setHoveredIndex(hoveredIndex - 1)
+        }
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (hoveredIndex && hoveredIndex === totalSuggestions - 1) {
+          setHoveredIndex(0)
+        } else {
+          setHoveredIndex((hoveredIndex ?? -1) + 1)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', keyDownHandler)
+
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [toggleOpen, hoveredIndex, totalSuggestions])
+
+  useEffect(() => {
+    if (!isLoading) {
+      const tokenSearchResults =
+        tokens.length > 0 ? (
+          <SearchBarDropdownSection
+            hoveredIndex={hoveredIndex}
+            startingIndex={isNFTPage ? collections.length : 0}
+            setHoveredIndex={setHoveredIndex}
+            toggleOpen={toggleOpen}
+            suggestions={tokens}
+            header={<Trans>Tokens</Trans>}
+          />
+        ) : (
+          <Box className={styles.notFoundContainer}>
+            <Trans>No tokens found.</Trans>
+          </Box>
+        )
+
+      const collectionSearchResults =
+        phase1Flag === NftVariant.Enabled ? (
+          collections.length > 0 ? (
+            <SearchBarDropdownSection
+              hoveredIndex={hoveredIndex}
+              startingIndex={isNFTPage ? 0 : tokens.length}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              suggestions={collections}
+              header={<Trans>NFT Collections</Trans>}
+            />
+          ) : (
+            <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
+          )
+        ) : null
+
+      const currentState = () =>
+        hasInput ? (
+          // Empty or Up to 8 combined tokens and nfts
+          <Column gap="20">
+            {isNFTPage ? (
+              <>
+                {collectionSearchResults}
+                {tokenSearchResults}
+              </>
+            ) : (
+              <>
+                {tokenSearchResults}
+                {collectionSearchResults}
+              </>
+            )}
+          </Column>
+        ) : (
+          // Recent Searches, Trending Tokens, Trending Collections
+          <Column gap="20">
+            {shortenedHistory.length > 0 && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={0}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={shortenedHistory}
+                header={<Trans>Recent searches</Trans>}
+                headerIcon={<ClockIcon />}
+              />
+            )}
+            {!isNFTPage && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={shortenedHistory.length}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={trendingTokens}
+                header={<Trans>Popular tokens</Trans>}
+                headerIcon={<TrendingArrow />}
+                isLoading={trendingTokensAreLoading}
+              />
+            )}
+            {!isTokenPage && phase1Flag === NftVariant.Enabled && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={shortenedHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={trendingCollections as unknown as GenieCollection[]}
+                header={<Trans>Popular NFT collections</Trans>}
+                headerIcon={<TrendingArrow />}
+                isLoading={trendingCollectionsAreLoading}
+              />
+            )}
+          </Column>
+        )
+
+      setResultsState(currentState)
+    }
+  }, [
+    isLoading,
+    tokens,
+    collections,
+    trendingCollections,
+    trendingCollectionsAreLoading,
+    trendingTokens,
+    trendingTokensAreLoading,
+    hoveredIndex,
+    phase1Flag,
+    toggleOpen,
+    shortenedHistory,
+    hasInput,
+    isNFTPage,
+    isTokenPage,
+  ])
+
+  return (
+    <Box className={styles.searchBarDropdown}>
+      <Box opacity={isLoading ? '0.3' : '1'} transition="125">
+        {resultsState}
+      </Box>
+    </Box>
+  )
+}

src/components/NavBar/ShoppingBag.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css'
+import { sprinkles } from 'nft/css/sprinkles.css'
+
+export const bagQuantity = style([
+  sprinkles({
+    position: 'absolute',
+    top: '4',
+    right: '4',
+    backgroundColor: 'accentAction',
+    borderRadius: 'round',
+    color: 'explicitWhite',
+    textAlign: 'center',
+    fontWeight: 'semibold',
+    paddingY: '1',
+    paddingX: '4',
+  }),
+  {
+    fontSize: '8px',
+    lineHeight: '12px',
+    minWidth: '14px',
+  },
+])

src/components/NavBar/ShoppingBag.tsx

@@ -0,0 +1,47 @@
+import { NavIcon } from 'components/NavBar/NavIcon'
+import * as styles from 'components/NavBar/ShoppingBag.css'
+import { Box } from 'nft/components/Box'
+import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons'
+import { useBag, useSellAsset } from 'nft/hooks'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export const ShoppingBag = () => {
+  const itemsInBag = useBag((state) => state.itemsInBag)
+  const sellAssets = useSellAsset((state) => state.sellAssets)
+  const [bagQuantity, setBagQuantity] = useState(0)
+  const [sellQuantity, setSellQuantity] = useState(0)
+  const location = useLocation()
+
+  const toggleBag = useBag((s) => s.toggleBag)
+
+  useEffect(() => {
+    setBagQuantity(itemsInBag.length)
+  }, [itemsInBag])
+
+  useEffect(() => {
+    setSellQuantity(sellAssets.length)
+  }, [sellAssets])
+
+  const isProfilePage = location.pathname === '/profile'
+
+  return (
+    <NavIcon onClick={toggleBag}>
+      {isProfilePage ? (
+        <>
+          <TagIcon width={20} height={20} />
+          {sellQuantity ? (
+            <Box className={styles.bagQuantity}>{sellQuantity > 99 ? <HundredsOverflowIcon /> : sellQuantity}</Box>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <BagIcon width={20} height={20} />
+          {bagQuantity ? (
+            <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
+          ) : null}
+        </>
+      )}
+    </NavIcon>
+  )
+}

src/components/NavBar/SuggestionRow.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { getTokenDetailsURL } from 'graphql/data/util'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -10,7 +11,7 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 
-import { TokenWarningRedIcon, VerifiedIcon } from '../../nft/components/icons'
+import { VerifiedIcon } from '../../nft/components/icons'
 import * as styles from './SearchBar.css'
 
 interface CollectionRowProps {
@@ -18,10 +19,18 @@ interface CollectionRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
+  traceEvent: () => void
   index: number
 }
 
-export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOpen, index }: CollectionRowProps) => {
+export const CollectionRow = ({
+  collection,
+  isHovered,
+  setHoveredIndex,
+  toggleOpen,
+  traceEvent,
+  index,
+}: CollectionRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const addToSearchHistory = useSearchHistory(
@@ -32,7 +41,8 @@ export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOp
   const handleClick = useCallback(() => {
     addToSearchHistory(collection)
     toggleOpen()
-  }, [addToSearchHistory, collection, toggleOpen])
+    traceEvent()
+  }, [addToSearchHistory, collection, toggleOpen, traceEvent])
 
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
@@ -78,14 +88,14 @@ export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOp
           <Box className={styles.secondaryText}>{putCommas(collection.stats.total_supply)} items</Box>
         </Column>
       </Row>
-      {collection.floorPrice && (
+      {collection.floorPrice ? (
         <Column className={styles.suggestionSecondaryContainer}>
           <Row gap="4">
             <Box className={styles.primaryText}>{ethNumberStandardFormatter(collection.floorPrice)} ETH</Box>
           </Row>
           <Box className={styles.secondaryText}>Floor</Box>
         </Column>
-      )}
+      ) : null}
     </Link>
   )
 }
@@ -95,10 +105,11 @@ interface TokenRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
+  traceEvent: () => void
   index: number
 }
 
-export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index }: TokenRowProps) => {
+export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceEvent, index }: TokenRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const addToSearchHistory = useSearchHistory(
@@ -109,14 +120,16 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
   const handleClick = useCallback(() => {
     addToSearchHistory(token)
     toggleOpen()
-  }, [addToSearchHistory, toggleOpen, token])
+    traceEvent()
+  }, [addToSearchHistory, toggleOpen, token, traceEvent])
 
+  const tokenDetailsPath = getTokenDetailsURL(token.address, undefined, token.chainId)
   // Close the modal on escape
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
       if (event.key === 'Enter' && isHovered) {
         event.preventDefault()
-        navigate(`/tokens/${token.address}`)
+        navigate(tokenDetailsPath)
         handleClick()
       }
     }
@@ -124,11 +137,11 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
     return () => {
       document.removeEventListener('keydown', keyDownHandler)
     }
-  }, [toggleOpen, isHovered, token, navigate, handleClick])
+  }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
   return (
     <Link
-      to={`/tokens/${token.address}`}
+      to={tokenDetailsPath}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
       onMouseLeave={() => isHovered && setHoveredIndex(undefined)}
@@ -151,11 +164,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
         <Column className={styles.suggestionPrimaryContainer}>
           <Row gap="4" width="full">
             <Box className={styles.primaryText}>{token.name}</Box>
-            {token.onDefaultList ? (
-              <VerifiedIcon className={styles.suggestionIcon} />
-            ) : (
-              <TokenWarningRedIcon className={styles.suggestionIcon} />
-            )}
+            {token.onDefaultList && <VerifiedIcon className={styles.suggestionIcon} />}
           </Row>
           <Box className={styles.secondaryText}>{token.symbol}</Box>
         </Column>
@@ -179,13 +188,21 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
 
 export const SkeletonRow = () => {
   return (
-    <Box className={styles.searchBarDropdown}>
-      <Row className={styles.suggestionRow}>
-        <Row>
-          <Box className={styles.imageHolder} />
-          <Box borderRadius="round" height="16" width="160" background="loading" />
-        </Row>
+    <Row className={styles.suggestionRow}>
+      <Row width="full">
+        <Box className={styles.imageHolder} />
+        <Column gap="4" width="full">
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="20" background="backgroundModule" style={{ width: '180px' }} />
+            <Box borderRadius="round" height="20" width="48" background="backgroundModule" />
+          </Row>
+
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="16" width="120" background="backgroundModule" />
+            <Box borderRadius="round" height="16" width="48" background="backgroundModule" />
+          </Row>
+        </Column>
       </Row>
-    </Box>
+    </Row>
   )
 }

src/components/NavBar/index.ts

@@ -1,3 +0,0 @@
-import Navbar from './Navbar'
-
-export default Navbar

src/components/NavBar/index.tsx

@@ -1,16 +1,18 @@
 import { Trans } from '@lingui/macro'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { useGlobalChainName } from 'graphql/data/util'
+import { Box } from 'nft/components/Box'
+import { Row } from 'nft/components/Flex'
+import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
-import { Box } from '../../nft/components/Box'
-import { Row } from '../../nft/components/Flex'
-import { UniIcon } from '../../nft/components/icons'
-import { ChainSwitcher } from './ChainSwitcher'
+import { ChainSelector } from './ChainSelector'
 import { MenuDropdown } from './MenuDropdown'
-import * as styles from './Navbar.css'
 import { SearchBar } from './SearchBar'
+import { ShoppingBag } from './ShoppingBag'
+import * as styles from './style.css'
 
 interface MenuItemProps {
   href: string
@@ -35,6 +37,7 @@ const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
 const PageTabs = () => {
   const { pathname } = useLocation()
   const nftFlag = useNftFlag()
+  const chainName = useGlobalChainName()
 
   const isPoolActive =
     pathname.startsWith('/pool') ||
@@ -48,7 +51,7 @@ const PageTabs = () => {
       <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
         <Trans>Swap</Trans>
       </MenuItem>
-      <MenuItem href="/tokens" isActive={pathname.startsWith('/tokens')}>
+      <MenuItem href={`/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/tokens')}>
         <Trans>Tokens</Trans>
       </MenuItem>
       {nftFlag === NftVariant.Enabled && (
@@ -64,6 +67,9 @@ const PageTabs = () => {
 }
 
 const Navbar = () => {
+  const { pathname } = useLocation()
+  const showShoppingBag = pathname.startsWith('/nfts') || pathname.startsWith('/profile')
+
   return (
     <>
       <nav className={styles.nav}>
@@ -72,10 +78,10 @@ const Navbar = () => {
             <Box as="a" href="#/swap" className={styles.logoContainer}>
               <UniIcon width="48" height="48" className={styles.logo} />
             </Box>
-            <Box display={{ sm: 'flex', xxl: 'none' }}>
-              <ChainSwitcher leftAlign={true} />
+            <Box display={{ sm: 'flex', lg: 'none' }}>
+              <ChainSelector leftAlign={true} />
             </Box>
-            <Row gap="8" display={{ sm: 'none', xxl: 'flex' }}>
+            <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
               <PageTabs />
             </Row>
           </Box>
@@ -84,14 +90,15 @@ const Navbar = () => {
           </Box>
           <Box className={styles.rightSideContainer}>
             <Row gap="12">
-              <Box display={{ sm: 'flex', lg: 'none' }}>
+              <Box display={{ sm: 'flex', xl: 'none' }}>
                 <SearchBar />
               </Box>
-              <Box display={{ sm: 'none', xxl: 'flex' }}>
+              <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              <Box display={{ sm: 'none', xxl: 'flex' }}>
-                <ChainSwitcher />
+              {showShoppingBag && <ShoppingBag />}
+              <Box display={{ sm: 'none', lg: 'flex' }}>
+                <ChainSelector />
               </Box>
 
               <Web3Status />
@@ -101,7 +108,9 @@ const Navbar = () => {
       </nav>
       <Box className={styles.mobileBottomBar}>
         <PageTabs />
-        <MenuDropdown />
+        <Box marginY="4">
+          <MenuDropdown />
+        </Box>
       </Box>
     </>
   )

src/components/NavBar/style.css.ts

@@ -10,7 +10,7 @@ export const nav = style([
     width: 'full',
     height: '72',
     zIndex: '2',
-    background: 'white08',
+    background: 'backgroundFloating',
   }),
   {
     backdropFilter: 'blur(24px)',
@@ -28,7 +28,7 @@ export const logoContainer = style([
 export const logo = style([
   sprinkles({
     display: 'block',
-    color: 'blackBlue',
+    color: 'textPrimary',
   }),
 ])
 
@@ -61,7 +61,7 @@ export const middleContainer = style([
     flex: '1',
     flexShrink: '1',
     justifyContent: 'center',
-    display: { sm: 'none', lg: 'flex' },
+    display: { sm: 'none', xl: 'flex' },
   }),
 ])
 
@@ -81,6 +81,8 @@ const baseMenuItem = style([
     borderRadius: '12',
     transition: '250',
     height: 'min',
+    width: 'full',
+    textAlign: 'center',
   }),
   {
     lineHeight: '24px',
@@ -94,14 +96,14 @@ const baseMenuItem = style([
 export const menuItem = style([
   baseMenuItem,
   sprinkles({
-    color: 'darkGray',
+    color: 'textSecondary',
   }),
 ])
 
 export const activeMenuItem = style([
   baseMenuItem,
   sprinkles({
-    color: 'blackBlue',
+    color: 'textPrimary',
     background: 'backgroundFloating',
   }),
 ])
@@ -109,7 +111,7 @@ export const activeMenuItem = style([
 export const mobileBottomBar = style([
   sprinkles({
     position: 'fixed',
-    display: { sm: 'flex', xxl: 'none' },
+    display: { sm: 'flex', lg: 'none' },
     bottom: '0',
     right: '0',
     left: '0',
@@ -117,6 +119,6 @@ export const mobileBottomBar = style([
     paddingY: '4',
     paddingX: '8',
     height: '56',
-    background: 'lightGray',
+    background: 'backgroundSurface',
   }),
 ])

src/components/NetworkAlert/NetworkAlert.tsx

@@ -37,7 +37,7 @@ const RootWrapper = styled.div`
 
 const SHOULD_SHOW_ALERT = {
   [SupportedChainId.OPTIMISM]: true,
-  [SupportedChainId.OPTIMISTIC_KOVAN]: true,
+  [SupportedChainId.OPTIMISM_GOERLI]: true,
   [SupportedChainId.ARBITRUM_ONE]: true,
   [SupportedChainId.ARBITRUM_RINKEBY]: true,
   [SupportedChainId.POLYGON]: true,
@@ -62,7 +62,7 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
       'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
     [SupportedChainId.OPTIMISM]:
       'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
-    [SupportedChainId.OPTIMISTIC_KOVAN]:
+    [SupportedChainId.OPTIMISM_GOERLI]:
       'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.04) 0%, rgba(235, 0, 255, 0.01 96%)',
     [SupportedChainId.ARBITRUM_ONE]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)',
@@ -80,7 +80,7 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
       'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
     [SupportedChainId.OPTIMISM]:
       'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
-    [SupportedChainId.OPTIMISTIC_KOVAN]:
+    [SupportedChainId.OPTIMISM_GOERLI]:
       'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
     [SupportedChainId.ARBITRUM_ONE]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
@@ -142,7 +142,7 @@ const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
   [SupportedChainId.CELO]: 'rgba(53, 178, 97)',
   [SupportedChainId.CELO_ALFAJORES]: 'rgba(53, 178, 97)',
   [SupportedChainId.OPTIMISM]: '#ff3856',
-  [SupportedChainId.OPTIMISTIC_KOVAN]: '#ff3856',
+  [SupportedChainId.OPTIMISM_GOERLI]: '#ff3856',
   [SupportedChainId.ARBITRUM_ONE]: '#0490ed',
   [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed',
 }

src/components/Popover/index.tsx

@@ -4,9 +4,10 @@ import useInterval from 'lib/hooks/useInterval'
 import React, { useCallback, useMemo, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
-  z-index: 9999;
+  z-index: ${Z_INDEX.popover};
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
@@ -15,6 +16,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
 
 const ReferenceElement = styled.div`
   display: inline-block;
+  height: inherit;
 `
 
 const Arrow = styled.div`

src/components/Popups/PopupItem.tsx

@@ -2,7 +2,7 @@ import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
 import { animated } from 'react-spring'
-import { useSpring } from 'react-spring/web'
+import { useSpring } from 'react-spring'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { useRemovePopup } from '../../state/application/hooks'

src/components/Popups/SurveyPopup.tsx

@@ -7,7 +7,8 @@ import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
 import { useShowSurveyPopup } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
+import { ExternalLink, ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import BGImage from '../../assets/images/survey-orb.svg'
 

src/components/Popups/index.tsx

@@ -41,7 +41,7 @@ const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.deprecat
 
 const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
   position: fixed;
-  top: ${({ extraPadding }) => (extraPadding ? '64px' : '56px')};
+  top: ${({ extraPadding }) => (extraPadding ? '72px' : '64px')};
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
@@ -52,7 +52,7 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding:
   `};
 
   ${StopOverflowQuery} {
-    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '64px' : extraPadding ? '64px' : '56px')};
+    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '72px' : extraPadding ? '72px' : '64px')};
   }
 `
 

src/components/PositionList/index.tsx

@@ -50,7 +50,7 @@ const ToggleWrap = styled.div`
 `
 
 const ToggleLabel = styled.div`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   margin-right: 10px;
 `
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -10,7 +10,8 @@ import { RoutingDiagramEntry } from 'components/swap/SwapRoute'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
-import { ThemedText, Z_INDEX } from 'theme'
+import { ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
 import { MouseoverTooltip } from '../Tooltip'

src/components/SearchModal/CommonBases.tsx

@@ -1,7 +1,7 @@
 import { Currency } from '@uniswap/sdk-core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
-import { getTokenAddress } from 'components/AmplitudeAnalytics/utils'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
+import { getTokenAddress } from 'analytics/utils'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { AutoRow } from 'components/Row'

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -6,12 +6,6 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   color: #6E727D;
 }
 
-.c0 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,6 +25,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   grid-auto-rows: auto;
 }
 
+.c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
 .c1 {
   width: 100%;
   display: -webkit-box;
@@ -100,6 +100,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"
@@ -138,6 +139,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"
@@ -176,6 +178,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"

src/components/SearchModal/CurrencyList/index.tsx

@@ -1,21 +1,19 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
-import { LightGreyCard } from 'components/Card'
-import QuestionHelper from 'components/QuestionHelper'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
+import { XOctagon } from 'react-feather'
 import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import styled, { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
-import TokenListLogo from '../../../assets/svg/tokenlist.svg'
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { useCurrencyBalance } from '../../../state/connection/hooks'
 import { useCombinedActiveList } from '../../../state/lists/hooks'
@@ -25,9 +23,8 @@ import { isTokenOnList } from '../../../utils'
 import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../CurrencyLogo'
 import Loader from '../../Loader'
-import Row, { RowBetween, RowFixed } from '../../Row'
+import Row, { RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
-import ImportRow from '../ImportRow'
 import { LoadingRows, MenuItem } from '../styleds'
 
 function currencyKey(currency: Currency): string {
@@ -69,13 +66,12 @@ const Tag = styled.div`
   margin-right: 4px;
 `
 
-const FixedContentRow = styled.div`
-  padding: 4px 20px;
-  height: 56px;
-  display: grid;
-  grid-gap: 16px;
-  align-items: center;
+export const BlockedTokenIcon = styled(XOctagon)<{ size?: string }>`
+  margin-left: 0.3em;
+  width: 1em;
+  height: 1em;
 `
+
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
   return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
 }
@@ -85,10 +81,6 @@ const TagContainer = styled.div`
   justify-content: flex-end;
 `
 
-const TokenListLogoWrapper = styled.img`
-  height: 20px;
-`
-
 function TokenTags({ currency }: { currency: Currency }) {
   if (!(currency instanceof WrappedTokenInfo)) {
     return null
@@ -118,7 +110,7 @@ function TokenTags({ currency }: { currency: Currency }) {
   )
 }
 
-function CurrencyRow({
+export function CurrencyRow({
   currency,
   onSelect,
   isSelected,
@@ -131,7 +123,7 @@ function CurrencyRow({
   onSelect: (hasWarning: boolean) => void
   isSelected: boolean
   otherSelected: boolean
-  style: CSSProperties
+  style?: CSSProperties
   showCurrencyAmount?: boolean
   eventProperties: Record<string, unknown>
 }) {
@@ -142,9 +134,10 @@ function CurrencyRow({
   const customAdded = useIsUserAddedToken(currency)
   const balance = useCurrencyBalance(account ?? undefined, currency)
   const warning = currency.isNative ? null : checkWarning(currency.address)
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-  const tokenSafetyFlag = useTokenSafetyFlag()
+  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
+  const tokenSafetyFlagEnabled = useTokenSafetyFlag() === TokenSafetyVariant.Enabled
+  const isBlockedToken = !!warning && !warning.canProceed
+  const blockedTokenOpacity = '0.6'
 
   // only show add or remove buttons if not on selected list
   return (
@@ -163,15 +156,20 @@ function CurrencyRow({
         onClick={() => (isSelected ? null : onSelect(!!warning))}
         disabled={isSelected}
         selected={otherSelected}
+        dim={isBlockedToken}
       >
         <Column>
-          <CurrencyLogo currency={currency} size={'24px'} />
+          <CurrencyLogo
+            currency={currency}
+            size={'36px'}
+            style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}
+          />
         </Column>
-        <AutoColumn>
+        <AutoColumn style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}>
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
-
-            {tokenSafetyFlag === TokenSafetyVariant.Enabled && <TokenSafetyIcon warning={warning} />}
+            {tokenSafetyFlagEnabled && <TokenSafetyIcon warning={warning} />}
+            {isBlockedToken && <BlockedTokenIcon />}
           </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
@@ -204,44 +202,13 @@ function CurrencyRow({
   )
 }
 
-const BREAK_LINE = 'BREAK'
-type BreakLine = typeof BREAK_LINE
-function isBreakLine(x: unknown): x is BreakLine {
-  return x === BREAK_LINE
-}
-
-function BreakLineComponent({ style }: { style: CSSProperties }) {
-  const theme = useTheme()
-  return (
-    <FixedContentRow style={style}>
-      <LightGreyCard padding="8px 12px" $borderRadius="8px">
-        <RowBetween>
-          <RowFixed>
-            <TokenListLogoWrapper src={TokenListLogo} />
-            <ThemedText.DeprecatedMain ml="6px" fontSize="12px" color={theme.deprecated_text1}>
-              <Trans>Expanded results from inactive Token Lists</Trans>
-            </ThemedText.DeprecatedMain>
-          </RowFixed>
-          <QuestionHelper
-            text={
-              <Trans>
-                Tokens from inactive lists. Import specific tokens below or click Manage to activate more lists.
-              </Trans>
-            }
-          />
-        </RowBetween>
-      </LightGreyCard>
-    </FixedContentRow>
-  )
-}
-
 interface TokenRowProps {
-  data: Array<Currency | BreakLine>
+  data: Array<Currency>
   index: number
   style: CSSProperties
 }
 
-const formatAnalyticsEventProperties = (
+export const formatAnalyticsEventProperties = (
   token: Token,
   index: number,
   data: any[],
@@ -268,8 +235,6 @@ export default function CurrencyList({
   onCurrencySelect,
   otherCurrency,
   fixedListRef,
-  showImportView,
-  setImportToken,
   showCurrencyAmount,
   isLoading,
   searchQuery,
@@ -282,27 +247,21 @@ export default function CurrencyList({
   onCurrencySelect: (currency: Currency, hasWarning?: boolean) => void
   otherCurrency?: Currency | null
   fixedListRef?: MutableRefObject<FixedSizeList | undefined>
-  showImportView: () => void
-  setImportToken: (token: Token) => void
   showCurrencyAmount?: boolean
   isLoading: boolean
   searchQuery: string
   isAddressSearch: string | false
 }) {
-  const itemData: (Currency | BreakLine)[] = useMemo(() => {
+  const itemData: Currency[] = useMemo(() => {
     if (otherListTokens && otherListTokens?.length > 0) {
-      return [...currencies, BREAK_LINE, ...otherListTokens]
+      return [...currencies, ...otherListTokens]
     }
     return currencies
   }, [currencies, otherListTokens])
 
   const Row = useCallback(
     function TokenRow({ data, index, style }: TokenRowProps) {
-      const row: Currency | BreakLine = data[index]
-
-      if (isBreakLine(row)) {
-        return <BreakLineComponent style={style} />
-      }
+      const row: Currency = data[index]
 
       const currency = row
 
@@ -312,8 +271,6 @@ export default function CurrencyList({
 
       const token = currency?.wrapped
 
-      const showImport = index > currencies.length
-
       if (isLoading) {
         return (
           <LoadingRows>
@@ -322,10 +279,6 @@ export default function CurrencyList({
             <div />
           </LoadingRows>
         )
-      } else if (showImport && token) {
-        return (
-          <ImportRow style={style} token={token} showImportView={showImportView} setImportToken={setImportToken} dim />
-        )
       } else if (currency) {
         return (
           <CurrencyRow
@@ -342,23 +295,11 @@ export default function CurrencyList({
         return null
       }
     },
-    [
-      currencies.length,
-      onCurrencySelect,
-      otherCurrency,
-      selectedCurrency,
-      setImportToken,
-      showImportView,
-      showCurrencyAmount,
-      isLoading,
-      isAddressSearch,
-      searchQuery,
-    ]
+    [onCurrencySelect, otherCurrency, selectedCurrency, showCurrencyAmount, isLoading, isAddressSearch, searchQuery]
   )
 
   const itemKey = useCallback((index: number, data: typeof itemData) => {
     const currency = data[index]
-    if (isBreakLine(currency)) return BREAK_LINE
     return currencyKey(currency)
   }, [])
 

src/components/SearchModal/CurrencySearch.tsx

@@ -2,8 +2,8 @@
 import { t, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { EventName, ModalName } from 'components/AmplitudeAnalytics/constants'
-import { Trace } from 'components/AmplitudeAnalytics/Trace'
+import { EventName, ModalName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
 import { sendEvent } from 'components/analytics'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useDebounce from 'hooks/useDebounce'
@@ -26,8 +26,8 @@ import { isAddress } from '../../utils'
 import Column from '../Column'
 import Row, { RowBetween, RowFixed } from '../Row'
 import CommonBases from './CommonBases'
+import { CurrencyRow, formatAnalyticsEventProperties } from './CurrencyList'
 import CurrencyList from './CurrencyList'
-import ImportRow from './ImportRow'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 
 const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
@@ -57,8 +57,6 @@ interface CurrencySearchProps {
   showCurrencyAmount?: boolean
   disableNonToken?: boolean
   showManageView: () => void
-  showImportView: () => void
-  setImportToken: (token: Token) => void
 }
 
 export function CurrencySearch({
@@ -71,8 +69,6 @@ export function CurrencySearch({
   onDismiss,
   isOpen,
   showManageView,
-  showImportView,
-  setImportToken,
 }: CurrencySearchProps) {
   const redesignFlag = useRedesignFlag()
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
@@ -230,7 +226,20 @@ export function CurrencySearch({
         <Separator redesignFlag={redesignFlagEnabled} />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
-            <ImportRow token={searchToken} showImportView={showImportView} setImportToken={setImportToken} />
+            <CurrencyRow
+              currency={searchToken}
+              isSelected={Boolean(searchToken && selectedCurrency && selectedCurrency.equals(searchToken))}
+              onSelect={(hasWarning: boolean) => searchToken && handleCurrencySelect(searchToken, hasWarning)}
+              otherSelected={Boolean(searchToken && otherSelectedCurrency && otherSelectedCurrency.equals(searchToken))}
+              showCurrencyAmount={showCurrencyAmount}
+              eventProperties={formatAnalyticsEventProperties(
+                searchToken,
+                0,
+                [searchToken],
+                searchQuery,
+                isAddressSearch
+              )}
+            />
           </Column>
         ) : filteredSortedTokens?.length > 0 || filteredInactiveTokens?.length > 0 ? (
           <div style={{ flex: '1' }}>
@@ -244,8 +253,6 @@ export function CurrencySearch({
                   otherCurrency={otherSelectedCurrency}
                   selectedCurrency={selectedCurrency}
                   fixedListRef={fixedList}
-                  showImportView={showImportView}
-                  setImportToken={setImportToken}
                   showCurrencyAmount={showCurrencyAmount}
                   isLoading={balancesIsLoading && !tokenLoaderTimerElapsed}
                   searchQuery={searchQuery}

src/components/SearchModal/CurrencySearchModal.tsx

@@ -8,6 +8,7 @@ import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { useUserAddedTokens } from 'state/user/hooks'
 
 import useLast from '../../hooks/useLast'
+import { useWindowSize } from '../../hooks/useWindowSize'
 import Modal from '../Modal'
 import { CurrencySearch } from './CurrencySearch'
 import { ImportList } from './ImportList'
@@ -90,18 +91,22 @@ export default memo(function CurrencySearchModal({
   // used for token safety
   const [warningToken, setWarningToken] = useState<Token | undefined>()
 
-  const showImportView = useCallback(() => setModalView(CurrencyModalView.importToken), [setModalView])
   const showManageView = useCallback(() => setModalView(CurrencyModalView.manage), [setModalView])
   const handleBackImport = useCallback(
     () => setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
     [setModalView, prevView]
   )
 
+  const { height: windowHeight } = useWindowSize()
   // change min height if not searching
-  let minHeight: number | undefined = 80
+  let modalHeight: number | undefined = 80
   let content = null
   switch (modalView) {
     case CurrencyModalView.search:
+      if (windowHeight) {
+        // Converts pixel units to vh for Modal component
+        modalHeight = Math.min(Math.round((680 / windowHeight) * 100), 80)
+      }
       content = (
         <CurrencySearch
           isOpen={isOpen}
@@ -112,27 +117,26 @@ export default memo(function CurrencySearchModal({
           showCommonBases={showCommonBases}
           showCurrencyAmount={showCurrencyAmount}
           disableNonToken={disableNonToken}
-          showImportView={showImportView}
-          setImportToken={setImportToken}
           showManageView={showManageView}
         />
       )
       break
     case CurrencyModalView.tokenSafety:
-      minHeight = undefined
+      modalHeight = undefined
       if (tokenSafetyFlag === TokenSafetyVariant.Enabled && warningToken) {
         content = (
           <TokenSafety
             tokenAddress={warningToken.address}
             onContinue={() => handleCurrencySelect(warningToken)}
             onCancel={() => setModalView(CurrencyModalView.search)}
+            showCancel={true}
           />
         )
       }
       break
     case CurrencyModalView.importToken:
       if (importToken) {
-        minHeight = undefined
+        modalHeight = undefined
         if (tokenSafetyFlag === TokenSafetyVariant.Enabled) {
           showTokenSafetySpeedbump(importToken)
         }
@@ -148,7 +152,7 @@ export default memo(function CurrencySearchModal({
       }
       break
     case CurrencyModalView.importList:
-      minHeight = 40
+      modalHeight = 40
       if (importList && listURL) {
         content = <ImportList list={importList} listURL={listURL} onDismiss={onDismiss} setModalView={setModalView} />
       }
@@ -166,7 +170,7 @@ export default memo(function CurrencySearchModal({
       break
   }
   return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={80} minHeight={minHeight}>
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={modalHeight} minHeight={modalHeight}>
       {content}
     </Modal>
   )

src/components/SearchModal/ImportToken.tsx

@@ -1,8 +1,8 @@
 import { Plural, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { TokenList } from '@uniswap/token-lists'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import { RowBetween } from 'components/Row'

src/components/SearchModal/styleds.tsx

@@ -22,7 +22,7 @@ export const PaddedColumn = styled(AutoColumn)`
   padding: 20px;
 `
 
-export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
+export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boolean }>`
   padding: 4px 20px;
   height: 56px;
   display: grid;
@@ -34,7 +34,7 @@ export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
     background-color: ${({ theme, disabled, redesignFlag }) =>
       (redesignFlag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
   }
-  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
+  opacity: ${({ disabled, selected, dim }) => (dim || disabled || selected ? 0.4 : 1)};
 `
 
 export const SearchInput = styled.input<{ redesignFlag?: boolean }>`

src/components/SwitchLocaleLink/index.tsx

@@ -8,7 +8,7 @@ import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
 import { StyledInternalLink, ThemedText } from '../../theme'
 
 const Container = styled(ThemedText.DeprecatedSmall)`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   :hover {
     opacity: 1;
   }

src/components/TokenSafety/TokenSafetyIcon.tsx

@@ -1,18 +1,6 @@
 import { ReactComponent as Verified } from 'assets/svg/verified.svg'
-import { Warning, WARNING_LEVEL } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { Warning } from 'constants/tokenSafety'
 import styled from 'styled-components/macro'
-import { Color } from 'theme/styled'
-
-const Container = styled.div<{ color: Color }>`
-  width: 0.9rem;
-  height: 0.9rem;
-  margin-left: 4px;
-  color: ${({ color }) => color};
-  display: inline-flex;
-  align-items: center;
-`
 
 const VerifiedContainer = styled.div`
   margin-left: 4px;
@@ -26,13 +14,10 @@ export const VerifiedIcon = styled(Verified)<{ size?: string }>`
 `
 
 export default function TokenSafetyIcon({ warning }: { warning: Warning | null }) {
-  const color = useTokenWarningColor(warning ? warning.level : WARNING_LEVEL.UNKNOWN)
-  if (!warning) {
-    return (
-      <VerifiedContainer>
-        <VerifiedIcon />
-      </VerifiedContainer>
-    )
-  }
-  return <Container color={color}>{warning.canProceed ? <AlertTriangle /> : <AlertOctagon />}</Container>
+  if (warning) return null
+  return (
+    <VerifiedContainer>
+      <VerifiedIcon />
+    </VerifiedContainer>
+  )
 }

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -51,11 +51,12 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
       </TitleRow>
 
       <DetailsRow>
-        {heading && [heading, '. ']}
+        {heading}
+        {Boolean(heading) && ' '}
         {description}
+        {Boolean(description) && ' '}
         {tokenAddress && (
           <ExternalLink href={TOKEN_SAFETY_ARTICLE}>
-            {' '}
             <Trans>Learn more</Trans>
           </ExternalLink>
         )}

src/components/TokenSafety/TokenSafetyModal.tsx

@@ -1,12 +1,8 @@
 import Modal from '../Modal'
-import TokenSafety from '.'
+import TokenSafety, { TokenSafetyProps } from '.'
 
-interface TokenSafetyModalProps {
+interface TokenSafetyModalProps extends TokenSafetyProps {
   isOpen: boolean
-  tokenAddress: string | null
-  secondTokenAddress?: string
-  onContinue: () => void
-  onCancel: () => void
 }
 
 export default function TokenSafetyModal({
@@ -15,14 +11,18 @@ export default function TokenSafetyModal({
   secondTokenAddress,
   onContinue,
   onCancel,
+  onBlocked,
+  showCancel,
 }: TokenSafetyModalProps) {
   return (
     <Modal isOpen={isOpen} onDismiss={onCancel}>
       <TokenSafety
         tokenAddress={tokenAddress}
         secondTokenAddress={secondTokenAddress}
-        onCancel={onCancel}
         onContinue={onContinue}
+        onBlocked={onBlocked}
+        onCancel={onCancel}
+        showCancel={showCancel}
       />
     </Modal>
   )

src/components/TokenSafety/index.tsx

@@ -10,7 +10,7 @@ import { ExternalLink as LinkIconFeather } from 'react-feather'
 import { Text } from 'rebass'
 import { useAddUserToken } from 'state/user/hooks'
 import styled from 'styled-components/macro'
-import { CopyLinkIcon, ExternalLink } from 'theme'
+import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 const Wrapper = styled.div`
@@ -51,13 +51,20 @@ const StyledButton = styled(ButtonPrimary)`
   font-weight: 600;
 `
 
+const StyledCancelButton = styled(ButtonText)`
+  margin-top: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+  font-weight: 600;
+  font-size: 14px;
+`
+
 const StyledCloseButton = styled(StyledButton)`
   background-color: ${({ theme }) => theme.backgroundInteractive};
   color: ${({ theme }) => theme.textPrimary};
 
   &:hover {
     background-color: ${({ theme }) => theme.backgroundInteractive};
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
     transition: opacity 250ms ease;
   }
 `
@@ -66,19 +73,24 @@ const Buttons = ({
   warning,
   onContinue,
   onCancel,
+  onBlocked,
+  showCancel,
 }: {
   warning: Warning
   onContinue: () => void
   onCancel: () => void
+  onBlocked?: () => void
+  showCancel?: boolean
 }) => {
   return warning.canProceed ? (
     <>
       <StyledButton onClick={onContinue}>
         <Trans>I understand</Trans>
       </StyledButton>
+      {showCancel && <StyledCancelButton onClick={onCancel}>Cancel</StyledCancelButton>}
     </>
   ) : (
-    <StyledCloseButton onClick={onCancel}>
+    <StyledCloseButton onClick={onBlocked ?? onCancel}>
       <Trans>Close</Trans>
     </StyledCloseButton>
   )
@@ -120,10 +132,10 @@ const ExplorerLinkWrapper = styled.div`
   cursor: pointer;
 
   :hover {
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
   :active {
-    opacity: 0.4;
+    opacity: ${({ theme }) => theme.opacity.click};
   }
 `
 
@@ -174,14 +186,23 @@ const StyledExternalLink = styled(ExternalLink)`
   font-weight: 600;
 `
 
-interface TokenSafetyProps {
+export interface TokenSafetyProps {
   tokenAddress: string | null
   secondTokenAddress?: string
   onContinue: () => void
   onCancel: () => void
+  onBlocked?: () => void
+  showCancel?: boolean
 }
 
-export default function TokenSafety({ tokenAddress, secondTokenAddress, onContinue, onCancel }: TokenSafetyProps) {
+export default function TokenSafety({
+  tokenAddress,
+  secondTokenAddress,
+  onContinue,
+  onCancel,
+  onBlocked,
+  showCancel,
+}: TokenSafetyProps) {
   const logos = []
   const urls = []
 
@@ -244,7 +265,13 @@ export default function TokenSafety({ tokenAddress, secondTokenAddress, onContin
             </InfoText>
           </ShortColumn>
           <LinkColumn>{urls}</LinkColumn>
-          <Buttons warning={displayWarning} onContinue={acknowledge} onCancel={onCancel} />
+          <Buttons
+            warning={displayWarning}
+            onContinue={acknowledge}
+            onCancel={onCancel}
+            onBlocked={onBlocked}
+            showCancel={showCancel}
+          />
         </Container>
       </Wrapper>
     )

src/components/Tokens/TokenDetails/About.tsx

@@ -0,0 +1,105 @@
+import { Trans } from '@lingui/macro'
+import { darken } from 'polished'
+import { useState } from 'react'
+import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
+
+import Resource from './Resource'
+
+const NoInfoAvailable = styled.span`
+  color: ${({ theme }) => theme.textTertiary};
+  font-weight: 400;
+  font-size: 16px;
+`
+const TokenDescriptionContainer = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  max-height: fit-content;
+  padding-top: 16px;
+  line-height: 24px;
+  white-space: pre-wrap;
+`
+
+const TruncateDescriptionButton = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
+  font-weight: 400;
+  font-size: 14px;
+  padding-top: 14px;
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => darken(0.1, theme.textSecondary)};
+    cursor: pointer;
+  }
+`
+
+const truncateDescription = (desc: string) => {
+  //trim the string to the maximum length
+  let tokenDescriptionTruncated = desc.slice(0, TRUNCATE_CHARACTER_COUNT)
+  //re-trim if we are in the middle of a word
+  tokenDescriptionTruncated = `${tokenDescriptionTruncated.slice(
+    0,
+    Math.min(tokenDescriptionTruncated.length, tokenDescriptionTruncated.lastIndexOf(' '))
+  )}...`
+  return tokenDescriptionTruncated
+}
+
+const TRUNCATE_CHARACTER_COUNT = 400
+
+export const AboutContainer = styled.div`
+  gap: 16px;
+  padding: 24px 0px;
+  ${textFadeIn}
+`
+export const AboutHeader = styled.span`
+  font-size: 28px;
+  line-height: 36px;
+`
+
+export const ResourcesContainer = styled.div`
+  display: flex;
+  padding-top: 12px;
+  gap: 14px;
+`
+
+type AboutSectionProps = {
+  address: string
+  description?: string | null | undefined
+  homepageUrl?: string | null | undefined
+  twitterName?: string | null | undefined
+}
+
+export function AboutSection({ address, description, homepageUrl, twitterName }: AboutSectionProps) {
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(true)
+  const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT
+
+  const tokenDescription = shouldTruncate && isDescriptionTruncated ? truncateDescription(description) : description
+
+  return (
+    <AboutContainer>
+      <AboutHeader>
+        <Trans>About</Trans>
+      </AboutHeader>
+      <TokenDescriptionContainer>
+        {!description && (
+          <NoInfoAvailable>
+            <Trans>No token information available</Trans>
+          </NoInfoAvailable>
+        )}
+        {tokenDescription}
+        {shouldTruncate && (
+          <TruncateDescriptionButton onClick={() => setIsDescriptionTruncated(!isDescriptionTruncated)}>
+            {isDescriptionTruncated ? <Trans>Read more</Trans> : <Trans>Hide</Trans>}
+          </TruncateDescriptionButton>
+        )}
+      </TokenDescriptionContainer>
+      <ResourcesContainer>
+        <Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} />
+        <Resource name={'Protocol info'} link={`https://info.uniswap.org/#/tokens/${address}`} />
+        {homepageUrl && <Resource name={'Website'} link={homepageUrl} />}
+        {twitterName && <Resource name={'Twitter'} link={`https://twitter.com/${twitterName}`} />}
+      </ResourcesContainer>
+    </AboutContainer>
+  )
+}

src/components/Tokens/TokenDetails/AddressSection.tsx

@@ -0,0 +1,36 @@
+import { Trans } from '@lingui/macro'
+import styled from 'styled-components/macro'
+import { CopyContractAddress } from 'theme'
+
+export const ContractAddressSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme }) => theme.textSecondary};
+  font-weight: 600;
+  font-size: 14px;
+  gap: 4px;
+  padding: 36px 0px;
+`
+
+const ContractAddress = styled.button`
+  display: flex;
+  color: ${({ theme }) => theme.textPrimary};
+  gap: 10px;
+  align-items: center;
+  background: transparent;
+  border: none;
+  min-height: 38px;
+  padding: 0px;
+  cursor: pointer;
+`
+
+export default function AddressSection({ address }: { address: string }) {
+  return (
+    <ContractAddressSection>
+      <Trans>Contract address</Trans>
+      <ContractAddress>
+        <CopyContractAddress address={address} />
+      </ContractAddress>
+    </ContractAddressSection>
+  )
+}

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,12 +1,8 @@
 import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfoOrDefault } from 'constants/chainInfo'
 import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
 import { AlertTriangle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import NetworkBalance from './NetworkBalance'
+import styled from 'styled-components/macro'
 
 const BalancesCard = styled.div`
   width: 100%;
@@ -33,14 +29,9 @@ const ErrorText = styled.span`
   display: flex;
   flex-wrap: wrap;
 `
-const NetworkBalancesSection = styled.div`
-  height: fit-content;
-`
+
 const TotalBalanceSection = styled.div`
   height: fit-content;
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
-  margin-bottom: 20px;
-  padding-bottom: 20px;
 `
 const TotalBalance = styled.div`
   display: flex;
@@ -56,56 +47,35 @@ const TotalBalanceItem = styled.div`
 
 export default function BalanceSummary({
   address,
-  networkBalances,
-  totalBalance,
+  balance,
+  balanceUsd,
 }: {
   address: string
-  networkBalances: (JSX.Element | null)[] | null
-  totalBalance: number
+  balance?: number
+  balanceUsd?: number
 }) {
-  const theme = useTheme()
-  const tokenSymbol = useToken(address)?.symbol
-  const { loading, error, data } = useNetworkTokenBalances({ address })
+  const token = useToken(address)
+  const { loading, error } = useNetworkTokenBalances({ address })
 
-  const { chainId: connectedChainId } = useWeb3React()
-
-  const { label: connectedLabel, logoUrl: connectedLogoUrl } = getChainInfoOrDefault(connectedChainId)
-  const connectedFiatValue = 1
-  const multipleBalances = true // for testing purposes
-
-  if (loading) return null
+  if (loading || (!error && !balance && !balanceUsd)) return null
   return (
     <BalancesCard>
       {error ? (
         <ErrorState>
           <AlertTriangle size={24} />
           <ErrorText>
-            <Trans>There was an error loading your {tokenSymbol} balance</Trans>
+            <Trans>There was an error loading your {token?.symbol} balance</Trans>
           </ErrorText>
         </ErrorState>
-      ) : multipleBalances ? (
-        <>
-          <TotalBalanceSection>
-            Your balance across all networks
-            <TotalBalance>
-              <TotalBalanceItem>{`${totalBalance} ${tokenSymbol}`}</TotalBalanceItem>
-              <TotalBalanceItem>$4,210.12</TotalBalanceItem>
-            </TotalBalance>
-          </TotalBalanceSection>
-          <NetworkBalancesSection>Your balances by network</NetworkBalancesSection>
-          {data && networkBalances}
-        </>
       ) : (
         <>
-          Your balance on {connectedLabel}
-          <NetworkBalance
-            logoUrl={connectedLogoUrl}
-            balance={'1'}
-            tokenSymbol={tokenSymbol ?? 'XXX'}
-            fiatValue={connectedFiatValue}
-            label={connectedLabel}
-            networkColor={theme.textPrimary}
-          />
+          <TotalBalanceSection>
+            Your balance
+            <TotalBalance>
+              <TotalBalanceItem>{`${balance} ${token?.symbol}`}</TotalBalanceItem>
+              <TotalBalanceItem>{`$${balanceUsd}`}</TotalBalanceItem>
+            </TotalBalance>
+          </TotalBalanceSection>
         </>
       )}
     </BalancesCard>

src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+export const BreadcrumbNavLink = styled(Link)`
+  display: flex;
+  color: ${({ theme }) => theme.textSecondary};
+  font-size: 14px;
+  line-height: 20px;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  margin-bottom: 16px;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+
+  &:hover {
+    color: ${({ theme }) => theme.textTertiary};
+  }
+`

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -0,0 +1,118 @@
+import { Trans } from '@lingui/macro'
+import { NativeCurrency, Token } from '@uniswap/sdk-core'
+import { ParentSize } from '@visx/responsive'
+import CurrencyLogo from 'components/CurrencyLogo'
+import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
+import { getChainInfo } from 'constants/chainInfo'
+import { checkWarning } from 'constants/tokenSafety'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
+import { SingleTokenData, useTokenPricesCached } from 'graphql/data/Token'
+import { TopToken } from 'graphql/data/TopTokens'
+import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util'
+import useCurrencyLogoURIs, { getTokenLogoURI } from 'lib/hooks/useCurrencyLogoURIs'
+import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
+import { isAddress } from 'utils'
+
+import { useIsFavorited, useToggleFavorite } from '../state'
+import { ClickFavorited, FavoriteIcon, L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
+import PriceChart from './PriceChart'
+import ShareButton from './ShareButton'
+
+export const ChartHeader = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme }) => theme.textPrimary};
+  gap: 4px;
+  margin-bottom: 24px;
+`
+export const TokenInfoContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+export const ChartContainer = styled.div`
+  display: flex;
+  height: 436px;
+  align-items: center;
+`
+export const TokenNameCell = styled.div`
+  display: flex;
+  gap: 8px;
+  font-size: 20px;
+  line-height: 28px;
+  align-items: center;
+  ${textFadeIn}
+`
+const TokenSymbol = styled.span`
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.textSecondary};
+`
+const TokenActions = styled.div`
+  display: flex;
+  gap: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+`
+
+export function useTokenLogoURI(
+  token: NonNullable<SingleTokenData> | NonNullable<TopToken>,
+  nativeCurrency?: Token | NativeCurrency
+) {
+  const checksummedAddress = isAddress(token.address)
+  const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
+  return (
+    useCurrencyLogoURIs(nativeCurrency)[0] ??
+    (checksummedAddress && getTokenLogoURI(checksummedAddress, chainId)) ??
+    token.project?.logoUrl
+  )
+}
+
+export default function ChartSection({
+  token,
+  nativeCurrency,
+}: {
+  token: NonNullable<SingleTokenData>
+  nativeCurrency?: Token | NativeCurrency
+}) {
+  const isFavorited = useIsFavorited(token.address)
+  const toggleFavorite = useToggleFavorite(token.address)
+  const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
+  const L2Icon = getChainInfo(chainId).circleLogoUrl
+  const warning = checkWarning(token.address ?? '')
+
+  const { prices } = useTokenPricesCached(token)
+
+  const logoSrc = useTokenLogoURI(token, nativeCurrency)
+
+  return (
+    <ChartHeader>
+      <TokenInfoContainer>
+        <TokenNameCell>
+          <LogoContainer>
+            <CurrencyLogo src={logoSrc} size={'32px'} symbol={nativeCurrency?.symbol ?? token.symbol} />
+            <L2NetworkLogo networkUrl={L2Icon} size={'16px'} />
+          </LogoContainer>
+          {nativeCurrency?.name ?? token.name ?? <Trans>Name not found</Trans>}
+          <TokenSymbol>{nativeCurrency?.symbol ?? token.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
+          {!warning && <VerifiedIcon size="20px" />}
+        </TokenNameCell>
+        <TokenActions>
+          {token.name && token.symbol && token.address && (
+            <ShareButton tokenName={token.name} tokenSymbol={token.symbol} tokenAddress={token.address} />
+          )}
+          {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && (
+            <ClickFavorited onClick={toggleFavorite}>
+              <FavoriteIcon isFavorited={isFavorited} />
+            </ClickFavorited>
+          )}
+        </TokenActions>
+      </TokenInfoContainer>
+      <ChartContainer>
+        <ParentSize>
+          {({ width, height }) => prices && <PriceChart prices={prices} width={width} height={height} />}
+        </ParentSize>
+      </ChartContainer>
+    </ChartHeader>
+  )
+}

src/components/Tokens/TokenDetails/FooterBalanceSummary.tsx

@@ -3,6 +3,7 @@ import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
 import { useState } from 'react'
 import { AlertTriangle } from 'react-feather'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants'
@@ -131,11 +132,13 @@ const ErrorText = styled.span`
 export default function FooterBalanceSummary({
   address,
   networkBalances,
-  totalBalance,
+  balance,
+  balanceUsd,
 }: {
   address: string
   networkBalances: (JSX.Element | null)[] | null
-  totalBalance: number
+  balance?: number
+  balanceUsd?: number
 }) {
   const tokenSymbol = useToken(address)?.symbol
   const [showMultipleBalances, setShowMultipleBalances] = useState(false)
@@ -158,24 +161,29 @@ export default function FooterBalanceSummary({
             </ErrorText>
           </ErrorState>
         ) : (
-          <BalanceInfo>
-            {multipleBalances ? 'Balance on all networks' : `Your balance on ${networkNameIfOneBalance}`}
-            <BalanceTotal>
-              <BalanceValue>
-                {totalBalance} {tokenSymbol}
-              </BalanceValue>
-              <FiatValue>($107, 610.04)</FiatValue>
-            </BalanceTotal>
-            {multipleBalances && (
-              <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>
-                <Trans>{showMultipleBalances ? 'Hide' : 'View'} all balances</Trans>
-              </ViewAll>
-            )}
-          </BalanceInfo>
+          !!balance &&
+          !!balanceUsd && (
+            <BalanceInfo>
+              {multipleBalances ? 'Balance on all networks' : `Your balance on ${networkNameIfOneBalance}`}
+              <BalanceTotal>
+                <BalanceValue>
+                  {balance} {tokenSymbol}
+                </BalanceValue>
+                <FiatValue>{`$${balanceUsd}`}</FiatValue>
+              </BalanceTotal>
+              {multipleBalances && (
+                <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>
+                  <Trans>{showMultipleBalances ? 'Hide' : 'View'} all balances</Trans>
+                </ViewAll>
+              )}
+            </BalanceInfo>
+          )
         )}
-        <SwapButton onClick={() => (window.location.href = 'https://app.uniswap.org/#/swap')}>
-          <Trans>Swap</Trans>
-        </SwapButton>
+        <Link to={`/swap?outputCurrency=${address}`}>
+          <SwapButton>
+            <Trans>Swap</Trans>
+          </SwapButton>
+        </Link>
       </TotalBalancesSection>
       {showMultipleBalances && (
         <NetworkBalancesSection>

src/components/Tokens/TokenDetails/LoadingTokenDetails.tsx

@@ -1,22 +1,13 @@
+import { Footer, LeftPanel, RightPanel, TokenDetailsLayout } from 'pages/TokenDetails'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { LoadingBubble } from '../loading'
+import { AboutContainer, AboutHeader, ResourcesContainer } from './About'
+import { ContractAddressSection } from './AddressSection'
+import { BreadcrumbNavLink } from './BreadcrumbNavLink'
+import { ChartContainer, ChartHeader, TokenInfoContainer, TokenNameCell } from './ChartSection'
 import { DeltaContainer, TokenPrice } from './PriceChart'
-import {
-  AboutContainer,
-  AboutHeader,
-  BreadcrumbNavLink,
-  ChartContainer,
-  ChartHeader,
-  ContractAddressSection,
-  ResourcesContainer,
-  Stat,
-  StatPair,
-  StatsSection,
-  TokenInfoContainer,
-  TokenNameCell,
-  TopArea,
-} from './TokenDetailContainers'
+import { StatPair, StatWrapper, TokenStatsSection } from './StatsSection'
 
 const LoadingChartContainer = styled(ChartContainer)`
   height: 336px;
@@ -90,7 +81,7 @@ export function Wave() {
 /* Loading State: row component with loading bubbles */
 export default function LoadingTokenDetail() {
   return (
-    <TopArea>
+    <LeftPanel>
       <BreadcrumbNavLink to="/explore">
         <Space heightSize={20} />
       </BreadcrumbNavLink>
@@ -120,30 +111,30 @@ export default function LoadingTokenDetail() {
         </LoadingChartContainer>
         <Space heightSize={32} />
       </ChartHeader>
-      <StatsSection>
+      <TokenStatsSection>
         <StatsLoadingContainer>
           <StatPair>
-            <Stat>
+            <StatWrapper>
               <HalfLoadingBubble />
               <StatLoadingBubble />
-            </Stat>
-            <Stat>
+            </StatWrapper>
+            <StatWrapper>
               <HalfLoadingBubble />
               <StatLoadingBubble />
-            </Stat>
+            </StatWrapper>
           </StatPair>
           <StatPair>
-            <Stat>
+            <StatWrapper>
               <HalfLoadingBubble />
               <StatLoadingBubble />
-            </Stat>
-            <Stat>
+            </StatWrapper>
+            <StatWrapper>
               <HalfLoadingBubble />
               <StatLoadingBubble />
-            </Stat>
+            </StatWrapper>
           </StatPair>
         </StatsLoadingContainer>
-      </StatsSection>
+      </TokenStatsSection>
       <AboutContainer>
         <AboutHeader>
           <SquareLoadingBubble />
@@ -155,6 +146,16 @@ export default function LoadingTokenDetail() {
         <ResourcesContainer>{null}</ResourcesContainer>
       </AboutContainer>
       <ContractAddressSection>{null}</ContractAddressSection>
-    </TopArea>
+    </LeftPanel>
+  )
+}
+
+export function LoadingTokenDetails() {
+  return (
+    <TokenDetailsLayout>
+      <LoadingTokenDetail />
+      <RightPanel />
+      <Footer />
+    </TokenDetailsLayout>
   )
 }

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -1,39 +1,33 @@
-import { Token } from '@uniswap/sdk-core'
 import { AxisBottom, TickFormatter } from '@visx/axis'
 import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
 import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
+import AnimatedInLineChart from 'components/Charts/AnimatedInLineChart'
 import { filterTimeAtom } from 'components/Tokens/state'
-import { bisect, curveBasis, NumberValue, scaleLinear } from 'd3'
-import { useTokenPriceQuery } from 'graphql/data/TokenPriceQuery'
-import { TimePeriod } from 'graphql/data/TopTokenQuery'
+import { bisect, curveCardinal, NumberValue, scaleLinear, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
+import { PricePoint } from 'graphql/data/Token'
+import { TimePeriod } from 'graphql/data/util'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useAtom } from 'jotai'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
-import { OPACITY_HOVER } from 'theme'
 import {
   dayHourFormatter,
   hourFormatter,
   monthDayFormatter,
-  monthFormatter,
+  monthTickFormatter,
   monthYearDayFormatter,
-  monthYearFormatter,
   weekFormatter,
 } from 'utils/formatChartTimes'
 
-import LineChart from '../../Charts/LineChart'
+import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
 import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
 
-// TODO: This should be combined with the logic in TimeSelector.
-
-export type PricePoint = { value: number; timestamp: number }
-
 export const DATA_EMPTY = { value: 0, timestamp: 0 }
 
-function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
+export function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
   const prices = pricePoints.map((x) => x.value)
   const min = Math.min(...prices)
   const max = Math.max(...prices)
@@ -51,17 +45,21 @@ export function calculateDelta(start: number, current: number) {
   return (current / start - 1) * 100
 }
 
-export function getDeltaArrow(delta: number) {
-  if (Math.sign(delta) > 0) {
-    return <StyledUpArrow size={16} key="arrow-up" />
-  } else if (delta === 0) {
+export function getDeltaArrow(delta: number | null | undefined) {
+  // Null-check not including zero
+  if (delta === null || delta === undefined) {
     return null
-  } else {
+  } else if (Math.sign(delta) < 0) {
     return <StyledDownArrow size={16} key="arrow-down" />
   }
+  return <StyledUpArrow size={16} key="arrow-up" />
 }
 
-export function formatDelta(delta: number) {
+export function formatDelta(delta: number | null | undefined) {
+  // Null-check not including zero
+  if (delta === null || delta === undefined) {
+    return '-'
+  }
   let formattedDelta = delta.toFixed(2) + '%'
   if (Math.sign(delta) > 0) {
     formattedDelta = '+' + formattedDelta
@@ -72,7 +70,6 @@ export function formatDelta(delta: number) {
 export const ChartHeader = styled.div`
   position: absolute;
 `
-
 export const TokenPrice = styled.span`
   font-size: 36px;
   line-height: 44px;
@@ -101,8 +98,17 @@ export const TimeOptionsContainer = styled.div`
   height: 40px;
   padding: 4px;
   width: fit-content;
+
+  @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
+    width: 100%;
+    justify-content: space-between;
+    border: none;
+  }
 `
 const TimeButton = styled.button<{ active: boolean }>`
+  flex: 1;
+  display: flex;
+  align-items: center;
   background-color: ${({ theme, active }) => (active ? theme.backgroundInteractive : 'transparent')};
   font-weight: 600;
   font-size: 16px;
@@ -112,91 +118,115 @@ const TimeButton = styled.button<{ active: boolean }>`
   border: none;
   cursor: pointer;
   color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
   :hover {
-    ${({ active }) => !active && `opacity: ${OPACITY_HOVER};`}
+    ${({ active, theme }) => !active && `opacity: ${theme.opacity.hover};`}
   }
 `
 
-function getTicks(startTimestamp: number, endTimestamp: number, numTicks = 5) {
-  return Array.from(
-    { length: numTicks },
-    (v, i) => endTimestamp - ((endTimestamp - startTimestamp) / (numTicks + 1)) * (i + 1)
-  )
-}
-
-function tickFormat(
-  startTimestamp: number,
-  endTimestamp: number,
-  timePeriod: TimePeriod,
-  locale: string
-): [TickFormatter<NumberValue>, (v: number) => string, number[]] {
-  switch (timePeriod) {
-    case TimePeriod.HOUR:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.DAY:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.WEEK:
-      return [weekFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp, 6)]
-    case TimePeriod.MONTH:
-      return [monthDayFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.YEAR:
-      return [monthFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.ALL:
-      return [monthYearFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-  }
-}
-
 const margin = { top: 100, bottom: 48, crosshair: 72 }
 const timeOptionsHeight = 44
-const crosshairDateOverhang = 80
 
 interface PriceChartProps {
   width: number
   height: number
-  token: Token
+  prices: PricePoint[] | undefined
 }
 
-export function PriceChart({ width, height, token }: PriceChartProps) {
+export function PriceChart({ width, height, prices }: PriceChartProps) {
   const [timePeriod, setTimePeriod] = useAtom(filterTimeAtom)
   const locale = useActiveLocale()
   const theme = useTheme()
 
-  // TODO: Add network selector input, consider using backend type instead of current front end selector type
-  const pricePoints: PricePoint[] = useTokenPriceQuery(token.address, timePeriod, 'ETHEREUM').filter(
-    (p): p is PricePoint => Boolean(p && p.value)
-  )
-
-  const hasData = pricePoints.length !== 0
-
-  /* TODO: Implement API calls & cache to use here */
-  const startingPrice = hasData ? pricePoints[0] : DATA_EMPTY
-  const endingPrice = hasData ? pricePoints[pricePoints.length - 1] : DATA_EMPTY
+  // first price point on the x-axis of the current time period's chart
+  const startingPrice = prices?.[0] ?? DATA_EMPTY
+  // last price point on the x-axis of the current time period's chart
+  const endingPrice = prices?.[prices.length - 1] ?? DATA_EMPTY
   const [displayPrice, setDisplayPrice] = useState(startingPrice)
+
+  // set display price to ending price when prices have changed.
+  useEffect(() => {
+    if (prices) {
+      setDisplayPrice(endingPrice)
+    }
+  }, [prices, endingPrice])
   const [crosshair, setCrosshair] = useState<number | null>(null)
 
-  const graphWidth = width + crosshairDateOverhang
-  // TODO: remove this logic after suspense is properly added
   const graphHeight = height - timeOptionsHeight > 0 ? height - timeOptionsHeight : 0
   const graphInnerHeight = graphHeight - margin.top - margin.bottom > 0 ? graphHeight - margin.top - margin.bottom : 0
 
   // Defining scales
   // x scale
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
+  const timeScale = useMemo(
+    () => scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width]),
+    [startingPrice, endingPrice, width]
+  )
   // y scale
-  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([graphInnerHeight, 0])
+  const rdScale = useMemo(
+    () =>
+      scaleLinear()
+        .domain(getPriceBounds(prices ?? []))
+        .range([graphInnerHeight, 0]),
+    [prices, graphInnerHeight]
+  )
+
+  function tickFormat(
+    timePeriod: TimePeriod,
+    locale: string
+  ): [TickFormatter<NumberValue>, (v: number) => string, NumberValue[]] {
+    const offsetTime = (endingPrice.timestamp.valueOf() - startingPrice.timestamp.valueOf()) / 24
+    const startDateWithOffset = new Date((startingPrice.timestamp.valueOf() + offsetTime) * 1000)
+    const endDateWithOffset = new Date((endingPrice.timestamp.valueOf() - offsetTime) * 1000)
+    switch (timePeriod) {
+      case TimePeriod.HOUR:
+        return [
+          hourFormatter(locale),
+          dayHourFormatter(locale),
+          (timeMinute.every(5) ?? timeMinute)
+            .range(startDateWithOffset, endDateWithOffset, 2)
+            .map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.DAY:
+        return [
+          hourFormatter(locale),
+          dayHourFormatter(locale),
+          timeHour.range(startDateWithOffset, endDateWithOffset, 4).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.WEEK:
+        return [
+          weekFormatter(locale),
+          dayHourFormatter(locale),
+          timeDay.range(startDateWithOffset, endDateWithOffset, 1).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.MONTH:
+        return [
+          monthDayFormatter(locale),
+          dayHourFormatter(locale),
+          timeDay.range(startDateWithOffset, endDateWithOffset, 7).map((x) => x.valueOf() / 1000),
+        ]
+      case TimePeriod.YEAR:
+        return [
+          monthTickFormatter(locale),
+          monthYearDayFormatter(locale),
+          timeMonth.range(startDateWithOffset, endDateWithOffset, 2).map((x) => x.valueOf() / 1000),
+        ]
+    }
+  }
 
   const handleHover = useCallback(
     (event: Element | EventType) => {
+      if (!prices) return
+
       const { x } = localPoint(event) || { x: 0 }
       const x0 = timeScale.invert(x) // get timestamp from the scalexw
       const index = bisect(
-        pricePoints.map((x) => x.timestamp),
+        prices.map((x) => x.timestamp),
         x0,
         1
       )
 
-      const d0 = pricePoints[index - 1]
-      const d1 = pricePoints[index]
+      const d0 = prices[index - 1]
+      const d1 = prices[index]
       let pricePoint = d0
 
       const hasPreviousData = d1 && d1.timestamp
@@ -204,10 +234,12 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
         pricePoint = x0.valueOf() - d0.timestamp.valueOf() > d1.timestamp.valueOf() - x0.valueOf() ? d1 : d0
       }
 
-      setCrosshair(timeScale(pricePoint.timestamp))
-      setDisplayPrice(pricePoint)
+      if (pricePoint) {
+        setCrosshair(timeScale(pricePoint.timestamp))
+        setDisplayPrice(pricePoint)
+      }
     },
-    [timeScale, pricePoints]
+    [timeScale, prices]
   )
 
   const resetDisplay = useCallback(() => {
@@ -215,23 +247,25 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
     setDisplayPrice(endingPrice)
   }, [setCrosshair, setDisplayPrice, endingPrice])
 
-  // TODO: connect to loading state
-  if (!hasData) {
+  // TODO: Display no data available error
+  if (!prices) {
     return null
   }
 
-  const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(
-    startingPrice.timestamp,
-    endingPrice.timestamp,
-    timePeriod,
-    locale
-  )
+  const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale)
   const delta = calculateDelta(startingPrice.value, displayPrice.value)
   const formattedDelta = formatDelta(delta)
   const arrow = getDeltaArrow(delta)
   const crosshairEdgeMax = width * 0.85
   const crosshairAtEdge = !!crosshair && crosshair > crosshairEdgeMax
 
+  /*
+   * Default curve doesn't look good for the HOUR chart.
+   * Higher values make the curve more rigid, lower values smooth the curve but make it less "sticky" to real data points,
+   * making it unacceptable for shorter durations / smaller variances.
+   */
+  const curveTension = timePeriod === TimePeriod.HOUR ? 1 : 0.9
+
   return (
     <>
       <ChartHeader>
@@ -241,15 +275,14 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
           <ArrowCell>{arrow}</ArrowCell>
         </DeltaContainer>
       </ChartHeader>
-      <LineChart
-        data={pricePoints}
+      <AnimatedInLineChart
+        data={prices}
         getX={(p: PricePoint) => timeScale(p.timestamp)}
         getY={(p: PricePoint) => rdScale(p.value)}
         marginTop={margin.top}
-        /* Default curve doesn't look good for the ALL chart */
-        curve={timePeriod === TimePeriod.ALL ? curveBasis : undefined}
+        curve={curveCardinal.tension(curveTension)}
         strokeWidth={2}
-        width={graphWidth}
+        width={width}
         height={graphHeight}
       >
         {crosshair !== null ? (
@@ -260,6 +293,7 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
               tickFormat={tickFormatter}
               tickStroke={theme.backgroundOutline}
               tickLength={4}
+              hideTicks={true}
               tickTransform={'translate(0 -5)'}
               tickValues={ticks}
               top={graphHeight - 1}
@@ -310,11 +344,17 @@ export function PriceChart({ width, height, token }: PriceChartProps) {
           onMouseMove={handleHover}
           onMouseLeave={resetDisplay}
         />
-      </LineChart>
+      </AnimatedInLineChart>
       <TimeOptionsWrapper>
         <TimeOptionsContainer>
           {ORDERED_TIMES.map((time) => (
-            <TimeButton key={DISPLAYS[time]} active={timePeriod === time} onClick={() => setTimePeriod(time)}>
+            <TimeButton
+              key={DISPLAYS[time]}
+              active={timePeriod === time}
+              onClick={() => {
+                setTimePeriod(time)
+              }}
+            >
               {DISPLAYS[time]}
             </TimeButton>
           ))}

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -5,9 +5,10 @@ import { Twitter } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
-import { ClickableStyle, CopyHelperRefType, OPACITY_CLICK, Z_INDEX } from 'theme'
+import { ClickableStyle, CopyHelperRefType } from 'theme'
 import { colors } from 'theme/colors'
 import { opacify } from 'theme/utils'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { ReactComponent as ShareIcon } from '../../../assets/svg/share.svg'
 import { CopyHelper } from '../../../theme'
@@ -25,7 +26,7 @@ const Share = styled(ShareIcon)<{ open: boolean }>`
   height: 24px;
   width: 24px;
   ${ClickableStyle}
-  ${({ open }) => open && `opacity: ${OPACITY_CLICK} !important`};
+  ${({ open, theme }) => open && `opacity: ${theme.opacity.click} !important`};
 `
 
 const ShareActions = styled.div`

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -0,0 +1,70 @@
+import { Trans } from '@lingui/macro'
+import { ReactNode } from 'react'
+import styled from 'styled-components/macro'
+import { textFadeIn } from 'theme/animations'
+import { formatDollarAmount } from 'utils/formatDollarAmt'
+
+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;
+`
+export const TokenStatsSection = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  ${textFadeIn}
+`
+export const StatPair = styled.div`
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+`
+const StatPrice = styled.span`
+  font-size: 28px;
+  color: ${({ theme }) => theme.textPrimary};
+`
+const NoData = styled.div`
+  color: ${({ theme }) => theme.textTertiary};
+`
+
+type NumericStat = number | undefined | null
+
+function Stat({ value, title }: { value: NumericStat; title: ReactNode }) {
+  return (
+    <StatWrapper>
+      {title}
+      <StatPrice>{value ? formatDollarAmount(value) : '-'}</StatPrice>
+    </StatWrapper>
+  )
+}
+
+type StatsSectionProps = {
+  priceLow52W?: NumericStat
+  priceHigh52W?: NumericStat
+  TVL?: NumericStat
+  volume24H?: NumericStat
+}
+export default function StatsSection(props: StatsSectionProps) {
+  const { priceLow52W, priceHigh52W, TVL, volume24H } = props
+  if (TVL || volume24H || priceLow52W || priceHigh52W) {
+    return (
+      <TokenStatsSection>
+        <StatPair>
+          <Stat value={TVL} title={<Trans>Total Value Locked</Trans>} />
+          <Stat value={volume24H} title={<Trans>24H volume</Trans>} />
+        </StatPair>
+        <StatPair>
+          <Stat value={priceLow52W} title={<Trans>52W low</Trans>} />
+          <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} />
+        </StatPair>
+      </TokenStatsSection>
+    )
+  } else {
+    return <NoData>No stats available</NoData>
+  }
+}

src/components/Tokens/TokenDetails/TokenDetail.tsx

@@ -1,305 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { ParentSize } from '@visx/responsive'
-import { useWeb3React } from '@web3-react/core'
-import CurrencyLogo from 'components/CurrencyLogo'
-import PriceChart from 'components/Tokens/TokenDetails/PriceChart'
-import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
-import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
-import { getChainInfo } from 'constants/chainInfo'
-import { nativeOnChain, WRAPPED_NATIVE_CURRENCY } from 'constants/tokens'
-import { checkWarning, WARNING_LEVEL } from 'constants/tokenSafety'
-import { chainIdToChainName, useTokenDetailQuery } from 'graphql/data/TokenDetailQuery'
-import { useCurrency, useIsUserAddedToken, useToken } from 'hooks/Tokens'
-import { useAtomValue } from 'jotai/utils'
-import { darken } from 'polished'
-import { Suspense, useCallback } from 'react'
-import { useState } from 'react'
-import { ArrowLeft, Heart } from 'react-feather'
-import { useNavigate } from 'react-router-dom'
-import styled from 'styled-components/macro'
-import { ClickableStyle, CopyContractAddress } from 'theme'
-import { formatDollarAmount } from 'utils/formatDollarAmt'
-
-import { favoritesAtom, filterNetworkAtom, useToggleFavorite } from '../state'
-import { ClickFavorited } from '../TokenTable/TokenRow'
-import LoadingTokenDetail from './LoadingTokenDetail'
-import Resource from './Resource'
-import ShareButton from './ShareButton'
-import {
-  AboutContainer,
-  AboutHeader,
-  BreadcrumbNavLink,
-  ChartContainer,
-  ChartHeader,
-  ContractAddressSection,
-  ResourcesContainer,
-  Stat,
-  StatPair,
-  StatsSection,
-  TokenInfoContainer,
-  TokenNameCell,
-  TopArea,
-} from './TokenDetailContainers'
-
-const ContractAddress = styled.button`
-  display: flex;
-  color: ${({ theme }) => theme.textPrimary};
-  gap: 10px;
-  align-items: center;
-  background: transparent;
-  border: none;
-  min-height: 38px;
-  padding: 0px;
-  cursor: pointer;
-`
-const Contract = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  gap: 4px;
-`
-const StatPrice = styled.span`
-  font-size: 28px;
-  color: ${({ theme }) => theme.textPrimary};
-`
-const TokenActions = styled.div`
-  display: flex;
-  gap: 16px;
-  color: ${({ theme }) => theme.textSecondary};
-`
-const TokenSymbol = styled.span`
-  text-transform: uppercase;
-  color: ${({ theme }) => theme.textSecondary};
-`
-const NetworkBadge = styled.div<{ networkColor?: string; backgroundColor?: string }>`
-  border-radius: 5px;
-  padding: 4px 8px;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-  color: ${({ theme, networkColor }) => networkColor ?? theme.textPrimary};
-  background-color: ${({ theme, backgroundColor }) => backgroundColor ?? theme.backgroundSurface};
-`
-const FavoriteIcon = styled(Heart)<{ isFavorited: boolean }>`
-  ${ClickableStyle}
-  height: 22px;
-  width: 24px;
-  color: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : theme.textSecondary)};
-  fill: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : 'transparent')};
-`
-const NoInfoAvailable = styled.span`
-  color: ${({ theme }) => theme.textTertiary};
-  font-weight: 400;
-  font-size: 16px;
-`
-const TokenDescriptionContainer = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  max-height: fit-content;
-  padding-top: 16px;
-  line-height: 24px;
-  white-space: pre-wrap;
-`
-const TruncateDescriptionButton = styled.div`
-  color: ${({ theme }) => theme.textSecondary};
-  font-weight: 400;
-  font-size: 14px;
-  padding-top: 14px;
-
-  &:hover,
-  &:focus {
-    color: ${({ theme }) => darken(0.1, theme.textSecondary)};
-    cursor: pointer;
-  }
-`
-
-const TRUNCATE_CHARACTER_COUNT = 400
-
-type TokenDetailData = {
-  description: string | null | undefined
-  homepageUrl: string | null | undefined
-  twitterName: string | null | undefined
-}
-
-const truncateDescription = (desc: string) => {
-  //trim the string to the maximum length
-  let tokenDescriptionTruncated = desc.slice(0, TRUNCATE_CHARACTER_COUNT)
-  //re-trim if we are in the middle of a word
-  tokenDescriptionTruncated = `${tokenDescriptionTruncated.slice(
-    0,
-    Math.min(tokenDescriptionTruncated.length, tokenDescriptionTruncated.lastIndexOf(' '))
-  )}...`
-  return tokenDescriptionTruncated
-}
-
-export function AboutSection({ address, tokenDetailData }: { address: string; tokenDetailData: TokenDetailData }) {
-  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(true)
-
-  const shouldTruncate =
-    tokenDetailData && tokenDetailData.description
-      ? tokenDetailData.description.length > TRUNCATE_CHARACTER_COUNT
-      : false
-
-  const tokenDescription =
-    tokenDetailData && tokenDetailData.description && shouldTruncate && isDescriptionTruncated
-      ? truncateDescription(tokenDetailData.description)
-      : tokenDetailData.description
-
-  return (
-    <AboutContainer>
-      <AboutHeader>
-        <Trans>About</Trans>
-      </AboutHeader>
-      <TokenDescriptionContainer>
-        {(!tokenDetailData || !tokenDetailData.description) && (
-          <NoInfoAvailable>
-            <Trans>No token information available</Trans>
-          </NoInfoAvailable>
-        )}
-        {tokenDescription}
-        {shouldTruncate && (
-          <TruncateDescriptionButton onClick={() => setIsDescriptionTruncated(!isDescriptionTruncated)}>
-            {isDescriptionTruncated ? <Trans>Read more</Trans> : <Trans>Hide</Trans>}
-          </TruncateDescriptionButton>
-        )}
-      </TokenDescriptionContainer>
-      <ResourcesContainer>
-        <Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} />
-        <Resource name={'Protocol info'} link={`https://info.uniswap.org/#/tokens/${address}`} />
-        {tokenDetailData?.homepageUrl && <Resource name={'Website'} link={tokenDetailData.homepageUrl} />}
-        {tokenDetailData?.twitterName && (
-          <Resource name={'Twitter'} link={`https://twitter.com/${tokenDetailData.twitterName}`} />
-        )}
-      </ResourcesContainer>
-    </AboutContainer>
-  )
-}
-
-export default function LoadedTokenDetail({ address }: { address: string }) {
-  const { chainId: connectedChainId } = useWeb3React()
-  const token = useToken(address)
-  let currency = useCurrency(address)
-  const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
-  const isFavorited = favoriteTokens.includes(address)
-  const toggleFavorite = useToggleFavorite(address)
-  const warning = checkWarning(address)
-  const navigate = useNavigate()
-  const isUserAddedToken = useIsUserAddedToken(token)
-  const [warningModalOpen, setWarningModalOpen] = useState(!!warning && !isUserAddedToken)
-
-  const handleDismissWarning = useCallback(() => {
-    setWarningModalOpen(false)
-  }, [setWarningModalOpen])
-  const handleCancel = useCallback(() => {
-    setWarningModalOpen(false)
-    warning && warning.level === WARNING_LEVEL.BLOCKED && navigate(-1)
-  }, [setWarningModalOpen, navigate, warning])
-  const chainInfo = getChainInfo(token?.chainId)
-  const networkLabel = chainInfo?.label
-  const networkBadgebackgroundColor = chainInfo?.backgroundColor
-  const filterNetwork = useAtomValue(filterNetworkAtom)
-  const tokenDetailData = useTokenDetailQuery(address, chainIdToChainName(filterNetwork))
-  const relevantTokenDetailData = (({ description, homepageUrl, twitterName }) => ({
-    description,
-    homepageUrl,
-    twitterName,
-  }))(tokenDetailData)
-
-  if (!token || !token.name || !token.symbol || !connectedChainId) {
-    return <LoadingTokenDetail />
-  }
-
-  const wrappedNativeCurrency = WRAPPED_NATIVE_CURRENCY[connectedChainId]
-  const isWrappedNativeToken = wrappedNativeCurrency?.address === token.address
-
-  if (isWrappedNativeToken) {
-    currency = nativeOnChain(connectedChainId)
-  }
-
-  const tokenName = isWrappedNativeToken && currency ? currency.name : tokenDetailData.name
-  const defaultTokenSymbol = tokenDetailData.tokens?.[0]?.symbol ?? token.symbol
-  const tokenSymbol = isWrappedNativeToken && currency ? currency.symbol : defaultTokenSymbol
-
-  return (
-    <Suspense fallback={<LoadingTokenDetail />}>
-      <TopArea>
-        <BreadcrumbNavLink to="/tokens">
-          <ArrowLeft size={14} /> Tokens
-        </BreadcrumbNavLink>
-        <ChartHeader>
-          <TokenInfoContainer>
-            <TokenNameCell>
-              <CurrencyLogo currency={currency} size={'32px'} />
-              {tokenName ?? <Trans>Name not found</Trans>}
-              <TokenSymbol>{tokenSymbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
-              {!warning && <VerifiedIcon size="20px" />}
-              {networkBadgebackgroundColor && (
-                <NetworkBadge networkColor={chainInfo?.color} backgroundColor={networkBadgebackgroundColor}>
-                  {networkLabel}
-                </NetworkBadge>
-              )}
-            </TokenNameCell>
-            <TokenActions>
-              {tokenName && tokenSymbol && (
-                <ShareButton tokenName={tokenName} tokenSymbol={tokenSymbol} tokenAddress={address} />
-              )}
-              <ClickFavorited onClick={toggleFavorite}>
-                <FavoriteIcon isFavorited={isFavorited} />
-              </ClickFavorited>
-            </TokenActions>
-          </TokenInfoContainer>
-          <ChartContainer>
-            <ParentSize>{({ width, height }) => <PriceChart token={token} width={width} height={height} />}</ParentSize>
-          </ChartContainer>
-        </ChartHeader>
-        <StatsSection>
-          <StatPair>
-            <Stat>
-              <Trans>Market cap</Trans>
-              <StatPrice>
-                {tokenDetailData.marketCap?.value ? formatDollarAmount(tokenDetailData.marketCap?.value) : '-'}
-              </StatPrice>
-            </Stat>
-            <Stat>
-              24H volume
-              <StatPrice>
-                {tokenDetailData.volume24h?.value ? formatDollarAmount(tokenDetailData.volume24h?.value) : '-'}
-              </StatPrice>
-            </Stat>
-          </StatPair>
-          <StatPair>
-            <Stat>
-              52W low
-              <StatPrice>
-                {tokenDetailData.priceLow52W?.value ? formatDollarAmount(tokenDetailData.priceLow52W?.value) : '-'}
-              </StatPrice>
-            </Stat>
-            <Stat>
-              52W high
-              <StatPrice>
-                {tokenDetailData.priceHigh52W?.value ? formatDollarAmount(tokenDetailData.priceHigh52W?.value) : '-'}
-              </StatPrice>
-            </Stat>
-          </StatPair>
-        </StatsSection>
-        <AboutSection address={address} tokenDetailData={relevantTokenDetailData} />
-        <ContractAddressSection>
-          <Contract>
-            <Trans>Contract address</Trans>
-            <ContractAddress>
-              <CopyContractAddress address={address} />
-            </ContractAddress>
-          </Contract>
-        </ContractAddressSection>
-        <TokenSafetyModal
-          isOpen={warningModalOpen}
-          tokenAddress={address}
-          onCancel={handleCancel}
-          onContinue={handleDismissWarning}
-        />
-      </TopArea>
-    </Suspense>
-  )
-}

src/components/Tokens/TokenDetails/TokenDetailContainers.tsx

@@ -1,81 +0,0 @@
-import { Link } from 'react-router-dom'
-import styled from 'styled-components/macro'
-
-export const AboutContainer = styled.div`
-  gap: 16px;
-  padding: 24px 0px;
-`
-export const AboutHeader = styled.span`
-  font-size: 28px;
-  line-height: 36px;
-`
-export const BreadcrumbNavLink = styled(Link)`
-  display: flex;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  line-height: 20px;
-  align-items: center;
-  gap: 4px;
-  text-decoration: none;
-  margin-bottom: 16px;
-
-  &:hover {
-    color: ${({ theme }) => theme.textTertiary};
-  }
-`
-export const ChartHeader = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textPrimary};
-  gap: 4px;
-  margin-bottom: 24px;
-`
-export const ContractAddressSection = styled.div`
-  padding: 36px 0px;
-`
-export const ChartContainer = styled.div`
-  display: flex;
-  height: 436px;
-  align-items: center;
-`
-export const Stat = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  min-width: 168px;
-  flex: 1;
-  gap: 4px;
-  padding: 24px 0px;
-`
-export const StatsSection = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-export const StatPair = styled.div`
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-`
-export const TokenNameCell = styled.div`
-  display: flex;
-  gap: 8px;
-  font-size: 20px;
-  line-height: 28px;
-  align-items: center;
-`
-export const TokenInfoContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-export const TopArea = styled.div`
-  max-width: 832px;
-  overflow: hidden;
-`
-export const ResourcesContainer = styled.div`
-  display: flex;
-  padding-top: 12px;
-  gap: 14px;
-`

src/components/Tokens/TokenTable/FavoriteButton.tsx

@@ -5,6 +5,7 @@ import styled, { useTheme } from 'styled-components/macro'
 
 import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants'
 import { showFavoritesAtom } from '../state'
+import FilterOption from './FilterOption'
 
 const FavoriteButtonContent = styled.div`
   display: flex;
@@ -12,20 +13,6 @@ const FavoriteButtonContent = styled.div`
   align-items: center;
   gap: 8px;
 `
-const StyledFavoriteButton = styled.button<{ active: boolean }>`
-  padding: 0px 16px;
-  border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
-  border: none;
-  color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-
-  :hover {
-    background-color: ${({ theme, active }) => !active && theme.backgroundModule};
-  }
-`
 const FavoriteText = styled.span`
   @media only screen and (max-width: ${SMALLEST_MOBILE_MEDIA_BREAKPOINT}) {
     display: none;
@@ -36,13 +23,13 @@ export default function FavoriteButton() {
   const theme = useTheme()
   const [showFavorites, setShowFavorites] = useAtom(showFavoritesAtom)
   return (
-    <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
+    <FilterOption onClick={() => setShowFavorites(!showFavorites)} active={showFavorites} highlight>
       <FavoriteButtonContent>
-        <Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
+        <Heart size={20} color={showFavorites ? theme.accentActive : theme.textPrimary} />
         <FavoriteText>
           <Trans>Favorites</Trans>
         </FavoriteText>
       </FavoriteButtonContent>
-    </StyledFavoriteButton>
+    </FilterOption>
   )
 }

src/components/Tokens/TokenTable/FilterOption.tsx

@@ -0,0 +1,26 @@
+//import { ReactNode } from 'react'
+import styled from 'styled-components/macro'
+const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>`
+  height: 100%;
+  color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
+  background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
+  margin: 0;
+  padding: 6px 12px 6px 14px;
+  border-radius: 12px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  border: none;
+  outline: ${({ theme, active, highlight }) => (active && highlight ? `1px solid ${theme.accentAction}` : 'none')};
+
+  :hover {
+    cursor: pointer;
+    background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundModule)};
+    opacity: ${({ theme, active }) => (active ? theme.opacity.hover : 1)};
+  }
+  :focus {
+    background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
+  }
+`
+export default FilterOption

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -1,22 +1,14 @@
 import { getChainInfo } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
+import { BACKEND_CHAIN_NAMES, CHAIN_NAME_TO_CHAIN_ID, validateUrlChainParam } from 'graphql/data/util'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { useAtom } from 'jotai'
 import { useRef } from 'react'
 import { Check, ChevronDown, ChevronUp } from 'react-feather'
+import { useNavigate, useParams } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
 
-import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
-import { filterNetworkAtom } from '../state'
-
-const NETWORKS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-]
+import FilterOption from './FilterOption'
 
 const InternalMenuItem = styled.div`
   flex: 1;
@@ -28,7 +20,6 @@ const InternalMenuItem = styled.div`
     text-decoration: none;
   }
 `
-
 const InternalLinkMenuItem = styled(InternalMenuItem)`
   display: flex;
   align-items: center;
@@ -59,36 +50,6 @@ const MenuTimeFlyout = styled.span`
   z-index: 100;
   left: 0px;
 `
-
-const StyledMenuButton = styled.button<{ open: boolean }>`
-  width: 100%;
-  height: 100%;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
-  border: none;
-  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-  margin: 0;
-  padding: 6px 12px 6px 12px;
-  border-radius: 12px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  :hover {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
-  }
-  :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-    border: none;
-    outline: none;
-  }
-  svg {
-    margin-top: 2px;
-  }
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -96,26 +57,19 @@ const StyledMenu = styled.div`
   position: relative;
   border: none;
   text-align: left;
-  width: 160px;
-
-  @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
-    flex: 1;
-  }
 `
-
 const StyledMenuContent = styled.div`
   display: flex;
   justify-content: space-between;
+  gap: 8px;
   align-items: center;
   border: none;
-  width: 100%;
   font-weight: 600;
   vertical-align: middle;
 `
-
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `
 const NetworkLabel = styled.div`
   display: flex;
@@ -130,50 +84,63 @@ const CheckContainer = styled.div`
   display: flex;
   flex-direction: flex-end;
 `
+const NetworkFilterOption = styled(FilterOption)`
+  width: 156px;
+`
 
-// TODO: change this to reflect data pipeline
 export default function NetworkFilter() {
   const theme = useTheme()
   const node = useRef<HTMLDivElement | null>(null)
   const open = useModalIsOpen(ApplicationModal.NETWORK_FILTER)
   const toggleMenu = useToggleModal(ApplicationModal.NETWORK_FILTER)
   useOnClickOutside(node, open ? toggleMenu : undefined)
-  const [activeNetwork, setNetwork] = useAtom(filterNetworkAtom)
-  const { label, circleLogoUrl, logoUrl } = getChainInfo(activeNetwork)
+  const navigate = useNavigate()
+
+  const { chainName } = useParams<{ chainName?: string }>()
+  const currentChainName = validateUrlChainParam(chainName)
+
+  const { label, circleLogoUrl, logoUrl } = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[currentChainName])
 
   return (
     <StyledMenu ref={node}>
-      <StyledMenuButton onClick={toggleMenu} aria-label={`networkFilter`} open={open}>
+      <NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
         <StyledMenuContent>
           <NetworkLabel>
             <Logo src={circleLogoUrl ?? logoUrl} /> {label}
           </NetworkLabel>
           <Chevron open={open}>
-            {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
+            {open ? (
+              <ChevronUp width={20} height={15} viewBox="0 0 24 20" />
+            ) : (
+              <ChevronDown width={20} height={15} viewBox="0 0 24 20" />
+            )}
           </Chevron>
         </StyledMenuContent>
-      </StyledMenuButton>
+      </NetworkFilterOption>
       {open && (
         <MenuTimeFlyout>
-          {NETWORKS.map((network) => (
-            <InternalLinkMenuItem
-              key={network}
-              onClick={() => {
-                setNetwork(network)
-                toggleMenu()
-              }}
-            >
-              <NetworkLabel>
-                <Logo src={getChainInfo(network).circleLogoUrl ?? getChainInfo(network).logoUrl} />
-                {getChainInfo(network).label}
-              </NetworkLabel>
-              {network === activeNetwork && (
-                <CheckContainer>
-                  <Check size={16} color={theme.accentAction} />
-                </CheckContainer>
-              )}
-            </InternalLinkMenuItem>
-          ))}
+          {BACKEND_CHAIN_NAMES.map((network) => {
+            const chainInfo = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[network])
+            return (
+              <InternalLinkMenuItem
+                key={network}
+                onClick={() => {
+                  navigate(`/tokens/${network.toLowerCase()}`)
+                  toggleMenu()
+                }}
+              >
+                <NetworkLabel>
+                  <Logo src={chainInfo.circleLogoUrl ?? chainInfo.logoUrl} />
+                  {chainInfo.label}
+                </NetworkLabel>
+                {network === currentChainName && (
+                  <CheckContainer>
+                    <Check size={16} color={theme.accentAction} />
+                  </CheckContainer>
+                )}
+              </InternalLinkMenuItem>
+            )
+          })}
         </MenuTimeFlyout>
       )}
     </StyledMenu>

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -1,7 +1,11 @@
 import { Trans } from '@lingui/macro'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
-import { useAtom } from 'jotai'
+import useDebounce from 'hooks/useDebounce'
+import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
@@ -17,17 +21,18 @@ const SearchInput = styled.input`
   background-image: url(${searchIcon});
   background-size: 20px 20px;
   background-position: 12px center;
-  background-color: ${({ theme }) => theme.backgroundSurface};
+  background-color: ${({ theme }) => theme.backgroundModule};
   border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border: 1.5px solid ${({ theme }) => theme.backgroundOutline};
   height: 100%;
   width: min(200px, 100%);
-  font-size: 16px;
+  font-size: 14px;
   padding-left: 40px;
   color: ${({ theme }) => theme.textSecondary};
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   :hover {
-    background-color: ${({ theme }) => theme.backgroundModule};
+    background-color: ${({ theme }) => theme.backgroundSurface};
   }
 
   :focus {
@@ -56,19 +61,37 @@ const SearchInput = styled.input`
 `
 
 export default function SearchBar() {
-  const [filterString, setFilterString] = useAtom(filterStringAtom)
+  const currentString = useAtomValue(filterStringAtom)
+  const [localFilterString, setLocalFilterString] = useState(currentString)
+  const setFilterString = useUpdateAtom(filterStringAtom)
+  const debouncedLocalFilterString = useDebounce(localFilterString, 300)
+
+  useEffect(() => {
+    setLocalFilterString(currentString)
+  }, [currentString])
+
+  useEffect(() => {
+    setFilterString(debouncedLocalFilterString)
+  }, [debouncedLocalFilterString, setFilterString])
+
   return (
     <SearchBarContainer>
       <Trans
         render={({ translation }) => (
-          <SearchInput
-            type="search"
-            placeholder={`${translation}`}
-            id="searchBar"
-            autoComplete="off"
-            value={filterString}
-            onChange={({ target: { value } }) => setFilterString(value)}
-          />
+          <TraceEvent
+            events={[Event.onFocus]}
+            name={EventName.EXPLORE_SEARCH_SELECTED}
+            element={ElementName.EXPLORE_SEARCH_INPUT}
+          >
+            <SearchInput
+              type="search"
+              placeholder={`${translation}`}
+              id="searchBar"
+              autoComplete="off"
+              value={localFilterString}
+              onChange={({ target: { value } }) => setLocalFilterString(value)}
+            />
+          </TraceEvent>
         )}
       >
         Filter tokens

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -1,4 +1,4 @@
-import { TimePeriod } from 'graphql/data/TopTokenQuery'
+import { TimePeriod } from 'graphql/data/util'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useAtom } from 'jotai'
 import { useRef } from 'react'
@@ -9,6 +9,7 @@ import styled, { useTheme } from 'styled-components/macro'
 
 import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
+import FilterOption from './FilterOption'
 
 export const DISPLAYS: Record<TimePeriod, string> = {
   [TimePeriod.HOUR]: '1H',
@@ -16,16 +17,14 @@ export const DISPLAYS: Record<TimePeriod, string> = {
   [TimePeriod.WEEK]: '1W',
   [TimePeriod.MONTH]: '1M',
   [TimePeriod.YEAR]: '1Y',
-  [TimePeriod.ALL]: 'All',
 }
 
-export const ORDERED_TIMES = [
+export const ORDERED_TIMES: TimePeriod[] = [
   TimePeriod.HOUR,
   TimePeriod.DAY,
   TimePeriod.WEEK,
   TimePeriod.MONTH,
   TimePeriod.YEAR,
-  TimePeriod.ALL,
 ]
 
 const InternalMenuItem = styled.div`
@@ -39,7 +38,6 @@ const InternalMenuItem = styled.div`
     text-decoration: none;
   }
 `
-
 const InternalLinkMenuItem = styled(InternalMenuItem)`
   display: flex;
   flex-direction: row;
@@ -76,36 +74,6 @@ const MenuTimeFlyout = styled.span`
     left: unset;
   }
 `
-
-const StyledMenuButton = styled.button<{ open: boolean }>`
-  width: 100%;
-  height: 100%;
-  border: none;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
-  margin: 0;
-  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-  padding: 6px 12px 6px 12px;
-  border-radius: 12px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-
-  :hover {
-    cursor: pointer;
-    border: none;
-    outline: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
-  }
-  :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-    border: none;
-    outline: none;
-  }
-  svg {
-    margin-top: 2px;
-  }
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -113,25 +81,23 @@ const StyledMenu = styled.div`
   position: relative;
   border: none;
   text-align: left;
-  width: 80px;
 
   @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
     width: 72px;
   }
 `
-
 const StyledMenuContent = styled.div`
   display: flex;
   justify-content: space-between;
+  gap: 8px;
   align-items: center;
   border: none;
   width: 100%;
   vertical-align: middle;
 `
-
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `
 
 // TODO: change this to reflect data pipeline
@@ -145,14 +111,18 @@ export default function TimeSelector() {
 
   return (
     <StyledMenu ref={node}>
-      <StyledMenuButton onClick={toggleMenu} aria-label={`timeSelector`} open={open}>
+      <FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}>
         <StyledMenuContent>
           {DISPLAYS[activeTime]}
           <Chevron open={open}>
-            {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
+            {open ? (
+              <ChevronUp width={20} height={15} viewBox="0 0 24 20" />
+            ) : (
+              <ChevronDown width={20} height={15} viewBox="0 0 24 20" />
+            )}
           </Chevron>
         </StyledMenuContent>
-      </StyledMenuButton>
+      </FilterOption>
       {open && (
         <MenuTimeFlyout>
           {ORDERED_TIMES.map((time) => (

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -1,18 +1,20 @@
 import { Trans } from '@lingui/macro'
 import { ParentSize } from '@visx/responsive'
-import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
-import { EventName } from 'components/AmplitudeAnalytics/constants'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
-import { TimePeriod, TokenData } from 'graphql/data/TopTokenQuery'
-import { useCurrency } from 'hooks/Tokens'
-import { useAtom } from 'jotai'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
+import { TokenSortMethod, TopToken } from 'graphql/data/TopTokens'
+import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
-import { ReactNode } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 import { ArrowDown, ArrowUp, Heart } from 'react-feather'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components/macro'
+import { ClickableStyle } from 'theme'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
 import {
@@ -23,35 +25,41 @@ import {
 } from '../constants'
 import { LoadingBubble } from '../loading'
 import {
-  favoritesAtom,
-  filterNetworkAtom,
   filterStringAtom,
   filterTimeAtom,
-  sortCategoryAtom,
-  sortDirectionAtom,
-  useSetSortCategory,
+  sortAscendingAtom,
+  sortMethodAtom,
+  useIsFavorited,
+  useSetSortMethod,
   useToggleFavorite,
 } from '../state'
+import { useTokenLogoURI } from '../TokenDetails/ChartSection'
 import { formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
-import { Category, SortDirection } from '../types'
-import { DISPLAYS } from './TimeSelector'
 
 const Cell = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `
-const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean; loading?: boolean }>`
+const StyledTokenRow = styled.div<{
+  first?: boolean
+  last?: boolean
+  loading?: boolean
+  favoriteTokensEnabled?: boolean
+}>`
   background-color: transparent;
   display: grid;
-  font-size: 15px;
-  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr;
-  height: 60px;
+  font-size: 16px;
+  grid-template-columns: ${({ favoriteTokensEnabled }) =>
+    favoriteTokensEnabled ? '1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr' : '1fr 7fr 4fr 4fr 4fr 4fr 5fr'};
   line-height: 24px;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
   min-width: 390px;
-  padding-top: ${({ first }) => (first ? '4px' : '0px')};
-  padding-bottom: ${({ last }) => (last ? '4px' : '0px')};
+  ${({ first, last }) => css`
+    height: ${first || last ? '72px' : '64px'};
+    padding-top: ${first ? '8px' : '0px'};
+    padding-bottom: ${last ? '8px' : '0px'};
+  `}
   padding-left: 12px;
   padding-right: 12px;
   transition: ${({
@@ -60,6 +68,7 @@ const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean; loading?: b
     },
   }) => css`background-color ${duration.medium} ${timing.ease}`};
   width: 100%;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   &:hover {
     ${({ loading, theme }) =>
@@ -109,6 +118,14 @@ export const ClickFavorited = styled.span`
   }
 `
 
+export const FavoriteIcon = styled(Heart)<{ isFavorited: boolean }>`
+  ${ClickableStyle}
+  height: 22px;
+  width: 24px;
+  color: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : theme.textSecondary)};
+  fill: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : 'transparent')};
+`
+
 const ClickableContent = styled.div`
   display: flex;
   text-decoration: none;
@@ -134,7 +151,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
   border-color: ${({ theme }) => theme.backgroundOutline};
   border-radius: 8px 8px 0px 0px;
   color: ${({ theme }) => theme.textSecondary};
-  font-size: 12px;
+  font-size: 14px;
   height: 48px;
   line-height: 16px;
   padding: 0px 12px;
@@ -149,10 +166,12 @@ const StyledHeaderRow = styled(StyledTokenRow)`
     justify-content: space-between;
   }
 `
-const ListNumberCell = styled(Cell)`
+
+const ListNumberCell = styled(Cell)<{ header: boolean }>`
   color: ${({ theme }) => theme.textSecondary};
   min-width: 32px;
-  height: 48px;
+  font-size: 14px;
+  height: ${({ header }) => (header ? '48px' : '60px')};
 
   @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
     display: none;
@@ -215,15 +234,12 @@ const SortArrowCell = styled(Cell)`
 `
 const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   align-items: center;
+  ${ClickableStyle}
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
   display: flex;
   height: 100%;
   justify-content: flex-end;
   width: 100%;
-
-  &:hover {
-    opacity: 60%;
-  }
 `
 const SparkLineCell = styled(Cell)`
   padding: 0px 24px;
@@ -297,54 +313,47 @@ const SparkLineLoadingBubble = styled(LongLoadingBubble)`
   height: 4px;
 `
 
-const L2NetworkLogo = styled.div<{ networkUrl?: string }>`
-  height: 12px;
-  width: 12px;
+export const L2NetworkLogo = styled.div<{ networkUrl?: string; size?: string }>`
+  height: ${({ size }) => size ?? '12px'};
+  width: ${({ size }) => size ?? '12px'};
   position: absolute;
   left: 50%;
   top: 50%;
   background: url(${({ networkUrl }) => networkUrl});
   background-repeat: no-repeat;
-  background-size: 12px 12px;
+  background-size: ${({ size }) => (size ? `${size} ${size}` : '12px 12px')};
   display: ${({ networkUrl }) => !networkUrl && 'none'};
 `
-const LogoContainer = styled.div`
+export const LogoContainer = styled.div`
   position: relative;
   align-items: center;
   display: flex;
 `
 
-/* formatting for volume with timeframe header display */
-function getHeaderDisplay(category: string, timeframe: TimePeriod): string {
-  if (category === Category.volume || category === Category.percentChange) return `${DISPLAYS[timeframe]} ${category}`
-  return category
-}
-
 /* Get singular header cell for header row */
 function HeaderCell({
   category,
   sortable,
 }: {
-  category: Category // TODO: change this to make it work for trans
+  category: TokenSortMethod // TODO: change this to make it work for trans
   sortable: boolean
 }) {
   const theme = useTheme()
-  const sortDirection = useAtomValue<SortDirection>(sortDirectionAtom)
-  const handleSortCategory = useSetSortCategory(category)
-  const sortCategory = useAtomValue<Category>(sortCategoryAtom)
-  const timeframe = useAtomValue<TimePeriod>(filterTimeAtom)
+  const sortAscending = useAtomValue(sortAscendingAtom)
+  const handleSortCategory = useSetSortMethod(category)
+  const sortMethod = useAtomValue(sortMethodAtom)
 
-  if (sortCategory === category) {
+  if (sortMethod === category) {
     return (
       <HeaderCellWrapper onClick={handleSortCategory}>
         <SortArrowCell>
-          {sortDirection === SortDirection.increasing ? (
-            <ArrowUp size={14} color={theme.accentActive} />
+          {sortAscending ? (
+            <ArrowUp size={20} strokeWidth={1.8} color={theme.accentActive} />
           ) : (
-            <ArrowDown size={14} color={theme.accentActive} />
+            <ArrowDown size={20} strokeWidth={1.8} color={theme.accentActive} />
           )}
         </SortArrowCell>
-        {getHeaderDisplay(category, timeframe)}
+        {category}
       </HeaderCellWrapper>
     )
   }
@@ -354,11 +363,11 @@ function HeaderCell({
         <SortArrowCell>
           <ArrowUp size={14} visibility="hidden" />
         </SortArrowCell>
-        {getHeaderDisplay(category, timeframe)}
+        {category}
       </HeaderCellWrapper>
     )
   }
-  return <HeaderCellWrapper>{getHeaderDisplay(category, timeframe)}</HeaderCellWrapper>
+  return <HeaderCellWrapper>{category}</HeaderCellWrapper>
 }
 
 /* Token Row: skeleton row component */
@@ -386,21 +395,27 @@ export function TokenRow({
   tokenInfo: ReactNode
   volume: ReactNode
   last?: boolean
+  style?: CSSProperties
 }) {
+  const favoriteTokensEnabled = useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled
   const rowCells = (
     <>
-      <ListNumberCell>{listNumber}</ListNumberCell>
+      <ListNumberCell header={header}>{listNumber}</ListNumberCell>
       <NameCell>{tokenInfo}</NameCell>
       <PriceCell sortable={header}>{price}</PriceCell>
       <PercentChangeCell sortable={header}>{percentChange}</PercentChangeCell>
       <MarketCapCell sortable={header}>{marketCap}</MarketCapCell>
       <VolumeCell sortable={header}>{volume}</VolumeCell>
       <SparkLineCell>{sparkLine}</SparkLineCell>
-      <FavoriteCell>{favorited}</FavoriteCell>
+      {favoriteTokensEnabled && <FavoriteCell>{favorited}</FavoriteCell>}
     </>
   )
-  if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
-  return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
+  if (header) return <StyledHeaderRow favoriteTokensEnabled={favoriteTokensEnabled}>{rowCells}</StyledHeaderRow>
+  return (
+    <StyledTokenRow favoriteTokensEnabled={favoriteTokensEnabled} {...rest}>
+      {rowCells}
+    </StyledTokenRow>
+  )
 }
 
 /* Header Row: top header row component for table */
@@ -411,10 +426,10 @@ export function HeaderRow() {
       favorited={null}
       listNumber="#"
       tokenInfo={<Trans>Token Name</Trans>}
-      price={<HeaderCell category={Category.price} sortable />}
-      percentChange={<HeaderCell category={Category.percentChange} sortable />}
-      marketCap={<HeaderCell category={Category.marketCap} sortable />}
-      volume={<HeaderCell category={Category.volume} sortable />}
+      price={<HeaderCell category={TokenSortMethod.PRICE} sortable />}
+      percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} sortable />}
+      marketCap={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} sortable />}
+      volume={<HeaderCell category={TokenSortMethod.VOLUME} sortable />}
       sparkLine={null}
     />
   )
@@ -443,33 +458,30 @@ export function LoadingRow() {
   )
 }
 
-/* Loaded State: row component with token information */
-export default function LoadedRow({
-  tokenAddress,
-  tokenListIndex,
-  tokenListLength,
-  tokenData,
-  timePeriod,
-}: {
-  tokenAddress: string
+interface LoadedRowProps {
   tokenListIndex: number
   tokenListLength: number
-  tokenData: TokenData
-  timePeriod: TimePeriod
-}) {
-  const currency = useCurrency(tokenAddress)
-  const tokenName = tokenData.name
-  const tokenSymbol = tokenData.symbol
-  const theme = useTheme()
-  const [favoriteTokens] = useAtom(favoritesAtom)
-  const isFavorited = favoriteTokens.includes(tokenAddress)
+  token: NonNullable<TopToken>
+}
+
+/* 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 isFavorited = useIsFavorited(tokenAddress)
   const toggleFavorite = useToggleFavorite(tokenAddress)
   const filterString = useAtomValue(filterStringAtom)
-  const filterNetwork = useAtomValue(filterNetworkAtom)
-  const L2Icon = getChainInfo(filterNetwork).circleLogoUrl
-  const delta = tokenData.percentChange?.[timePeriod]?.value
-  const arrow = delta ? getDeltaArrow(delta) : null
-  const formattedDelta = delta ? formatDelta(delta) : null
+
+  const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
+  const filterNetwork = lowercaseChainName.toUpperCase()
+  const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork]).circleLogoUrl
+  const timePeriod = useAtomValue(filterTimeAtom)
+  const delta = token.market?.pricePercentChange?.value
+  const arrow = getDeltaArrow(delta)
+  const formattedDelta = formatDelta(delta)
+  const sortAscending = useAtomValue(sortAscendingAtom)
 
   const exploreTokenSelectedEventProperties = {
     chain_id: filterNetwork,
@@ -481,75 +493,86 @@ export default function LoadedRow({
     search_token_address_input: filterString,
   }
 
-  const heartColor = isFavorited ? theme.accentActive : undefined
   // TODO: currency logo sizing mobile (32px) vs. desktop (24px)
   return (
-    <StyledLink
-      to={`/tokens/${tokenAddress}`}
-      onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}
-    >
-      <TokenRow
-        header={false}
-        favorited={
-          <ClickFavorited
-            onClick={(e) => {
-              e.preventDefault()
-              toggleFavorite()
-            }}
-          >
-            <Heart size={18} color={heartColor} fill={heartColor} />
-          </ClickFavorited>
-        }
-        listNumber={tokenListIndex + 1}
-        tokenInfo={
-          <ClickableName>
-            <LogoContainer>
-              <CurrencyLogo currency={currency} />
-              <L2NetworkLogo networkUrl={L2Icon} />
-            </LogoContainer>
-            <TokenInfoCell>
-              <TokenName>{tokenName}</TokenName>
-              <TokenSymbol>{tokenSymbol}</TokenSymbol>
-            </TokenInfoCell>
-          </ClickableName>
-        }
-        price={
-          <ClickableContent>
-            <PriceInfoCell>
-              {tokenData.price?.value ? formatDollarAmount(tokenData.price?.value) : '-'}
-              <PercentChangeInfoCell>
-                {formattedDelta}
-                {arrow}
-              </PercentChangeInfoCell>
-            </PriceInfoCell>
-          </ClickableContent>
-        }
-        percentChange={
-          <ClickableContent>
-            {formattedDelta}
-            {arrow}
-          </ClickableContent>
-        }
-        marketCap={
-          <ClickableContent>
-            {tokenData.marketCap?.value ? formatDollarAmount(tokenData.marketCap?.value) : '-'}
-          </ClickableContent>
-        }
-        volume={
-          <ClickableContent>
-            {tokenData.volume?.[timePeriod]?.value
-              ? formatDollarAmount(tokenData.volume?.[timePeriod]?.value ?? undefined)
-              : '-'}
-          </ClickableContent>
-        }
-        sparkLine={
-          <SparkLine>
-            <ParentSize>{({ width, height }) => <SparklineChart width={width} height={height} />}</ParentSize>
-          </SparkLine>
-        }
-        first={tokenListIndex === 0}
-        last={tokenListIndex === tokenListLength - 1}
-      />
-    </StyledLink>
+    <div ref={ref}>
+      <StyledLink
+        to={getTokenDetailsURL(token.address, token.chain)}
+        onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}
+      >
+        <TokenRow
+          header={false}
+          favorited={
+            <ClickFavorited
+              onClick={(e) => {
+                e.preventDefault()
+                toggleFavorite()
+              }}
+            >
+              <FavoriteIcon isFavorited={isFavorited} />
+            </ClickFavorited>
+          }
+          listNumber={sortAscending ? tokenListLength - tokenListIndex : tokenListIndex + 1}
+          tokenInfo={
+            <ClickableName>
+              <LogoContainer>
+                <CurrencyLogo src={useTokenLogoURI(token)} symbol={tokenSymbol} />
+                <L2NetworkLogo networkUrl={L2Icon} />
+              </LogoContainer>
+              <TokenInfoCell>
+                <TokenName>{tokenName}</TokenName>
+                <TokenSymbol>{tokenSymbol}</TokenSymbol>
+              </TokenInfoCell>
+            </ClickableName>
+          }
+          price={
+            <ClickableContent>
+              <PriceInfoCell>
+                {token.market?.price?.value ? formatDollarAmount(token.market.price.value) : '-'}
+                <PercentChangeInfoCell>
+                  {formattedDelta}
+                  {arrow}
+                </PercentChangeInfoCell>
+              </PriceInfoCell>
+            </ClickableContent>
+          }
+          percentChange={
+            <ClickableContent>
+              {formattedDelta}
+              {arrow}
+            </ClickableContent>
+          }
+          marketCap={
+            <ClickableContent>
+              {token.market?.totalValueLocked?.value ? formatDollarAmount(token.market.totalValueLocked.value) : '-'}
+            </ClickableContent>
+          }
+          volume={
+            <ClickableContent>
+              {token.market?.volume?.value ? formatDollarAmount(token.market.volume.value) : '-'}
+            </ClickableContent>
+          }
+          sparkLine={
+            <SparkLine>
+              <ParentSize>
+                {({ width, height }) => (
+                  <SparklineChart
+                    width={width}
+                    height={height}
+                    tokenData={token}
+                    pricePercentChange={token.market?.pricePercentChange?.value}
+                    timePeriod={timePeriod}
+                  />
+                )}
+              </ParentSize>
+            </SparkLine>
+          }
+          first={tokenListIndex === 0}
+          last={tokenListIndex === tokenListLength - 1}
+        />
+      </StyledLink>
+    </div>
   )
-}
+})
+
+LoadedRow.displayName = 'LoadedRow'

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -1,36 +1,41 @@
 import { Trans } from '@lingui/macro'
-import {
-  favoritesAtom,
-  filterStringAtom,
-  filterTimeAtom,
-  showFavoritesAtom,
-  sortCategoryAtom,
-  sortDirectionAtom,
-} from 'components/Tokens/state'
-import { TimePeriod, TokenData } from 'graphql/data/TopTokenQuery'
+import { showFavoritesAtom } from 'components/Tokens/state'
+import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens'
+import { validateUrlChainParam } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
-import { ReactNode, Suspense, useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useRef } from 'react'
 import { AlertTriangle } from 'react-feather'
+import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { MAX_WIDTH_MEDIA_BREAKPOINT } from '../constants'
-import { Category, SortDirection } from '../types'
-import LoadedRow, { HeaderRow, LoadingRow } from './TokenRow'
+import { HeaderRow, LoadedRow, LoadingRow } from './TokenRow'
+
+const LOADING_ROWS_COUNT = 3
 
 const GridContainer = styled.div`
   display: flex;
   flex-direction: column;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
-  background-color: ${({ theme }) => theme.backgroundModule};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   margin-left: auto;
   margin-right: auto;
-  border-radius: 8px;
+  border-radius: 12px;
   justify-content: center;
   align-items: center;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
 `
+
+const TokenDataContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 100%;
+  width: 100%;
+`
+
 const NoTokenDisplay = styled.div`
   display: flex;
   justify-content: center;
@@ -43,89 +48,6 @@ const NoTokenDisplay = styled.div`
   padding: 0px 28px;
   gap: 8px;
 `
-const TokenRowsContainer = styled.div`
-  width: 100%;
-`
-
-function useFilteredTokens(tokens: TokenData[] | undefined) {
-  const filterString = useAtomValue(filterStringAtom)
-  const favoriteTokenAddresses = useAtomValue(favoritesAtom)
-  const showFavorites = useAtomValue(showFavoritesAtom)
-  const shownTokens =
-    showFavorites && tokens ? tokens.filter((token) => favoriteTokenAddresses.includes(token.address)) : tokens
-
-  return useMemo(
-    () =>
-      (shownTokens ?? []).filter((token) => {
-        if (!token.address) {
-          return false
-        }
-        if (!filterString) {
-          return true
-        }
-        const lowercaseFilterString = filterString.toLowerCase()
-        const addressIncludesFilterString = token?.address?.toLowerCase().includes(lowercaseFilterString)
-        const nameIncludesFilterString = token?.name?.toLowerCase().includes(lowercaseFilterString)
-        const symbolIncludesFilterString = token?.symbol?.toLowerCase().includes(lowercaseFilterString)
-        return nameIncludesFilterString || symbolIncludesFilterString || addressIncludesFilterString
-      }),
-    [shownTokens, filterString]
-  )
-}
-
-function useSortedTokens(tokenData: TokenData[] | null) {
-  const sortCategory = useAtomValue(sortCategoryAtom)
-  const sortDirection = useAtomValue(sortDirectionAtom)
-  const timePeriod = useAtomValue<TimePeriod>(filterTimeAtom)
-
-  const sortFn = useCallback(
-    (a: any, b: any) => {
-      if (a > b) {
-        return sortDirection === SortDirection.decreasing ? -1 : 1
-      } else if (a < b) {
-        return sortDirection === SortDirection.decreasing ? 1 : -1
-      }
-      return 0
-    },
-    [sortDirection]
-  )
-
-  return useMemo(
-    () =>
-      tokenData &&
-      tokenData.sort((token1, token2) => {
-        if (!tokenData) {
-          return 0
-        }
-        // fix delta/percent change property
-        if (!token1 || !token2 || !sortDirection || !sortCategory) {
-          return 0
-        }
-        let a: number | null | undefined
-        let b: number | null | undefined
-        switch (sortCategory) {
-          case Category.marketCap:
-            a = token1.marketCap?.value
-            b = token2.marketCap?.value
-            break
-          case Category.price:
-            a = token1.price?.value
-            b = token2.price?.value
-            break
-          case Category.volume:
-            a = token1.volume?.[timePeriod]?.value
-            b = token2.volume?.[timePeriod]?.value
-            break
-          case Category.percentChange:
-            a = token1.percentChange?.[timePeriod]?.value
-            b = token2.percentChange?.[timePeriod]?.value
-            break
-        }
-        return sortFn(a, b)
-      }),
-    [tokenData, sortDirection, sortCategory, sortFn, timePeriod]
-  )
-}
 
 function NoTokensState({ message }: { message: ReactNode }) {
   return (
@@ -136,64 +58,85 @@ function NoTokensState({ message }: { message: ReactNode }) {
   )
 }
 
-const LOADING_ROWS = Array.from({ length: 100 })
-  .fill(0)
-  .map((_item, index) => <LoadingRow key={index} />)
+const LoadingMoreRows = Array(LOADING_ROWS_COUNT).fill(<LoadingRow />)
+const LoadingRows = (rowCount?: number) => Array(rowCount ?? PAGE_SIZE).fill(<LoadingRow />)
 
-export function LoadingTokenTable() {
+export function LoadingTokenTable({ rowCount }: { rowCount?: number }) {
   return (
     <GridContainer>
       <HeaderRow />
-      <TokenRowsContainer>{LOADING_ROWS}</TokenRowsContainer>
+      <TokenDataContainer>{LoadingRows(rowCount)}</TokenDataContainer>
     </GridContainer>
   )
 }
 
-export default function TokenTable({ data }: { data: TokenData[] | undefined }) {
+export default function TokenTable() {
   const showFavorites = useAtomValue<boolean>(showFavoritesAtom)
-  const timePeriod = useAtomValue<TimePeriod>(filterTimeAtom)
-  const filteredTokens = useFilteredTokens(data)
-  const sortedFilteredTokens = useSortedTokens(filteredTokens)
+
+  // 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 { error, loading, tokens, hasMore, loadMoreTokens, loadingRowCount } = useTopTokens(chainName)
+  const showMoreLoadingRows = Boolean(loading && hasMore)
+
+  const observer = useRef<IntersectionObserver>()
+  const lastTokenRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (loading) return
+      if (observer.current) observer.current.disconnect()
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          loadMoreTokens()
+        }
+      })
+      if (node) observer.current.observe(node)
+    },
+    [loading, hasMore, loadMoreTokens]
+  )
 
   /* loading and error state */
-  if (data === null) {
-    return (
-      <NoTokensState
-        message={
-          <>
-            <AlertTriangle size={16} />
-            <Trans>An error occured loading tokens. Please try again.</Trans>
-          </>
-        }
-      />
-    )
+  if (loading && (!tokens || tokens?.length === 0)) {
+    return <LoadingTokenTable rowCount={loadingRowCount} />
+  } else {
+    if (error || !tokens) {
+      return (
+        <NoTokensState
+          message={
+            <>
+              <AlertTriangle size={16} />
+              <Trans>An error occured loading tokens. Please try again.</Trans>
+            </>
+          }
+        />
+      )
+    } else if (tokens?.length === 0) {
+      return showFavorites ? (
+        <NoTokensState message={<Trans>You have no favorited tokens</Trans>} />
+      ) : (
+        <NoTokensState message={<Trans>No tokens found</Trans>} />
+      )
+    } else {
+      return (
+        <>
+          <GridContainer>
+            <HeaderRow />
+            <TokenDataContainer>
+              {tokens.map(
+                (token, index) =>
+                  token && (
+                    <LoadedRow
+                      key={token?.address}
+                      tokenListIndex={index}
+                      tokenListLength={tokens.length}
+                      token={token}
+                      ref={index + 1 === tokens.length ? lastTokenRef : undefined}
+                    />
+                  )
+              )}
+              {showMoreLoadingRows && LoadingMoreRows}
+            </TokenDataContainer>
+          </GridContainer>
+        </>
+      )
+    }
   }
-
-  if (showFavorites && sortedFilteredTokens?.length === 0) {
-    return <NoTokensState message={<Trans>You have no favorited tokens</Trans>} />
-  }
-
-  if (!showFavorites && sortedFilteredTokens?.length === 0) {
-    return <NoTokensState message={<Trans>No tokens found</Trans>} />
-  }
-
-  return (
-    <Suspense fallback={<LoadingTokenTable />}>
-      <GridContainer>
-        <HeaderRow />
-        <TokenRowsContainer>
-          {sortedFilteredTokens?.map((token, index) => (
-            <LoadedRow
-              key={token.address}
-              tokenAddress={token.address}
-              tokenListIndex={index}
-              tokenListLength={sortedFilteredTokens.length}
-              tokenData={token}
-              timePeriod={timePeriod}
-            />
-          ))}
-        </TokenRowsContainer>
-      </GridContainer>
-    </Suspense>
-  )
 }