style: polish explore banner blur effect (#5267)

* Update Banner.tsx

* Adjust dark theme opacity value

.env

@@ -1,8 +1,10 @@
+# These API keys are intentionally public. Please do not report them - thank you for your concern.
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
-REACT_APP_AMPLITUDE_TEST_KEY="add-the-real-test-key-if-you-need-to-test-amplitude-events"
+REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
 REACT_APP_AWS_API_ACCESS_KEY="AKIAYJJWW6AQ47ODATHN"
 REACT_APP_AWS_API_ACCESS_SECRET="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"
 REACT_APP_AWS_X_API_KEY="z9dReS5UtHu7iTrUsTuWRozLthi3AxOZlvobrIdr14"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
 REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
+ESLINT_NO_DEV_ERRORS=true

.env.production

@@ -1,5 +1,4 @@
-REACT_APP_AMPLITUDE_KEY="b8f7dabddb1c3b03b394619767972160"
-REACT_APP_AMPLITUDE_TEST_KEY="1c694b28cd089acc2c386d518f93a775"
+REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"

.eslintrc.json

@@ -52,6 +52,7 @@
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/react-in-jsx-scope": "off",
+    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
     "object-shorthand": ["error", "always"],
     "no-restricted-imports": [
       "error",

.github/CODEOWNERS

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

.github/workflows/release.yaml

@@ -88,10 +88,9 @@ jobs:
       - name: Update DNS with new IPFS hash
         env:
           CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
-          RECORD_DOMAIN: 'uniswap.org'
-          RECORD_NAME: '_dnslink.app'
           CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
-        uses: textileio/cloudflare-update-dnslink@0fe7b7a1ffc865db3a4da9773f0f987447ad5848
+          CLOUDFLARE_GATEWAY_ID: ${{ secrets.CLOUDFLARE_GATEWAY_ID }}
+        uses: Uniswap/cloudflare-update-web3-gateway@b3205288b1c6d0acb63fa3bd8fb686c72a9e3f3e
         with:
           cid: ${{ steps.pinata.outputs.hash }}
 

.vscode/settings.json

@@ -16,4 +16,4 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
-}
+}

package.json

@@ -116,14 +116,13 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^1.1.4",
     "@coinbase/wallet-sdk": "^3.3.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
-    "@looksrare/sdk": "^0.7.1",
+    "@looksrare/sdk": "^0.10.2",
     "@metamask/jazzicon": "^2.0.0",
     "@opensea/seaport-js": "^1.0.2",
     "@popperjs/core": "^2.4.4",
@@ -132,10 +131,12 @@
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/react-relay": "^13.0.2",
+    "@uniswap/analytics": "1.1.1",
+    "@uniswap/analytics-events": "1.1.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/redux-multicall": "^1.1.6",
+    "@uniswap/redux-multicall": "^1.1.8",
     "@uniswap/router-sdk": "^1.3.0",
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/smart-order-router": "^2.10.0",
@@ -146,7 +147,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.16.2",
+    "@uniswap/widgets": "^2.18.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -158,7 +159,7 @@
     "@visx/react-spring": "^2.12.2",
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.11.1",
-    "@walletconnect/ethereum-provider": "1.7.1",
+    "@walletconnect/ethereum-provider": "^1.8.0",
     "@web3-react/coinbase-wallet": "^8.0.34-beta.0",
     "@web3-react/core": "^8.0.35-beta.0",
     "@web3-react/eip1193": "^8.0.26-beta.0",

public/index.html

@@ -1,119 +1,120 @@
 <!DOCTYPE html>
 <html translate="no">
+  <head>
+    <meta charset="utf-8" />
 
-<head>
-  <meta charset="utf-8" />
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
 
-  <title>Uniswap Interface</title>
-  <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
-
-  <!--
+    <!--
       %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
       Only files inside the `public` folder can be referenced from the HTML.
     -->
-  <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
-  <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
-  <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="theme-color" content="#FC72FF" />
-  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#FC72FF" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
+    />
 
-  <!--
+    <!--
       manifest.json provides metadata used when the app is installed as a PWA.
       See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-  <link rel="preconnect" href="https://www.google-analytics.com/" />
+    <link rel="preconnect" href="https://www.google-analytics.com/" />
 
-  <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
 
-  <style>
-    * {
-      font-family: 'Inter', sans-serif;
-      box-sizing: border-box;
-    }
+    <style>
+      * {
+        font-family: 'Inter', sans-serif;
+        box-sizing: border-box;
+      }
 
-    /**
+      /**
           Explicitly load Inter var from public/ so it does not block LCP's critical path.
         */
-    @font-face {
-      font-family: 'Inter custom';
-      font-weight: 100 900;
-      font-style: normal;
-      font-display: block;
-      font-named-instance: 'Regular';
-      src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
-        url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
-        url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
-    }
-
-    @supports (font-variation-settings: normal) {
-      * {
-        font-family: 'Inter custom', sans-serif;
+      @font-face {
+        font-family: 'Inter custom';
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: block;
+        font-named-instance: 'Regular';
+        src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
+          url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
       }
-    }
 
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-    }
+      @supports (font-variation-settings: normal) {
+        * {
+          font-family: 'Inter custom', sans-serif;
+        }
+      }
 
-    button {
-      user-select: none;
-    }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
 
-    html {
-      font-size: 16px;
-      font-variant: none;
-      font-smooth: always;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
+      button {
+        user-select: none;
+      }
 
-    #background-radial-gradient {
-      background: linear-gradient(180deg, #202738 0%, #070816 100%);
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      pointer-events: none;
-      width: 200vw;
-      height: 200vh;
-      transform: translate(-50vw, -100vh);
-      z-index: -1;
-    }
-
-    html {
-      min-height: 100%;
-    }
-
-    @media (prefers-color-scheme: dark) {
       html {
-        background-color: #212429;
+        font-size: 16px;
+        font-variant: none;
+        font-smooth: always;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      #background-radial-gradient {
+        background: linear-gradient(180deg, #202738 0%, #070816 100%);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        width: 200vw;
+        height: 200vh;
+        transform: translate(-50vw, -100vh);
+        z-index: -1;
       }
-    }
 
-    @media (prefers-color-scheme: light) {
       html {
-        background-color: #f7f8fa;
+        min-height: 100%;
       }
-    }
-  </style>
-</head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: #212429;
+        }
+      }
 
-  <div id="root">
-    <!-- Triggers the font to load immediately and then is replaced by the app -->
-    <div>&emsp;</div>
-  </div>
+      @media (prefers-color-scheme: light) {
+        html {
+          background-color: #f7f8fa;
+        }
+      }
+    </style>
+  </head>
 
-  <div id="background-radial-gradient"></div>
-</body>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
 
-</html>
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
+    <div id="background-radial-gradient"></div>
+  </body>
+</html>

public/manifest.json

@@ -27,4 +27,4 @@
   "short_name": "Uniswap",
   "start_url": ".",
   "theme_color": "#FC72FFs"
-}
+}

public/nft/svgs/marketplaces/sudoswap.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14.4C0 6.4471 6.4471 0 14.4 0H33.6C41.5529 0 48 6.4471 48 14.4V33.6C48 41.5529 41.5529 48 33.6 48H14.4C6.4471 48 0 41.5529 0 33.6V14.4Z" fill="#B9B9FF"/>
+<path d="M9.29999 15H12L15.3 24L12 33H9.29999L12.6 24L9.29999 15Z" fill="#121212"/>
+<path d="M23.5727 33.192C22.1807 33.192 21.0367 32.872 20.1407 32.232C19.2607 31.592 18.8207 30.72 18.8207 29.616H21.2447C21.2447 30.112 21.4607 30.496 21.8927 30.768C22.3407 31.024 22.9167 31.152 23.6207 31.152H24.6287C25.4607 31.152 26.0767 30.992 26.4767 30.672C26.8767 30.336 27.0767 29.896 27.0767 29.352C27.0767 28.808 26.8847 28.384 26.5007 28.08C26.1167 27.776 25.5727 27.56 24.8687 27.432L23.0687 27.168C20.4447 26.752 19.1327 25.48 19.1327 23.352C19.1327 22.136 19.5327 21.208 20.3327 20.568C21.1327 19.928 22.2767 19.608 23.7647 19.608H24.6767C26.0527 19.608 27.1567 19.92 27.9887 20.544C28.8207 21.152 29.2367 21.96 29.2367 22.968H26.8127C26.8127 22.568 26.6127 22.248 26.2127 22.008C25.8287 21.768 25.3007 21.648 24.6287 21.648H23.7167C22.9807 21.648 22.4207 21.8 22.0367 22.104C21.6527 22.392 21.4607 22.808 21.4607 23.352C21.4607 24.28 22.1167 24.848 23.4287 25.056L25.2287 25.344C26.6687 25.568 27.7247 25.992 28.3967 26.616C29.0687 27.224 29.4047 28.104 29.4047 29.256C29.4047 30.488 28.9967 31.456 28.1807 32.16C27.3807 32.848 26.1807 33.192 24.5807 33.192H23.5727Z" fill="#121212"/>
+<path d="M38.7 15H36L32.7 24L36 33H38.7L35.4 24L38.7 15Z" fill="#121212"/>
+</svg>

src/analytics/Trace.tsx

@@ -1,76 +0,0 @@
-import { createContext, memo, PropsWithChildren, useContext, useEffect, useMemo } from 'react'
-
-import { sendAnalyticsEvent } from '.'
-import { ElementName, EventName, ModalName, PageName, SectionName } from './constants'
-
-export interface ITraceContext {
-  // Highest order context: eg Swap or Explore.
-  page?: PageName
-
-  // Enclosed section name. For contexts with modals, refers to the
-  // section of the page from which the user triggered the modal.
-  section?: SectionName
-
-  modal?: ModalName
-
-  // Element name mostly used to identify events sources
-  // Does not need to be unique given the higher order page and section.
-  element?: ElementName
-}
-
-export const TraceContext = createContext<ITraceContext>({})
-
-export function useTrace(trace?: ITraceContext): ITraceContext {
-  const parentTrace = useContext(TraceContext)
-  return useMemo(() => ({ ...parentTrace, ...trace }), [parentTrace, trace])
-}
-
-type TraceProps = {
-  shouldLogImpression?: boolean // whether to log impression on mount
-  name?: EventName
-  properties?: Record<string, unknown>
-} & ITraceContext
-
-/**
- * Sends an analytics event on mount (if shouldLogImpression is set),
- * and propagates the context to child traces.
- */
-export const Trace = memo(
-  ({
-    shouldLogImpression,
-    name,
-    children,
-    page,
-    section,
-    modal,
-    element,
-    properties,
-  }: PropsWithChildren<TraceProps>) => {
-    const parentTrace = useTrace()
-
-    const combinedProps = useMemo(
-      () => ({
-        ...parentTrace,
-        ...Object.fromEntries(Object.entries({ page, section, modal, element }).filter(([_, v]) => v !== undefined)),
-      }),
-      [element, parentTrace, page, modal, section]
-    )
-
-    useEffect(() => {
-      if (shouldLogImpression) {
-        const commitHash = process.env.REACT_APP_GIT_COMMIT_HASH
-        sendAnalyticsEvent(name ?? EventName.PAGE_VIEWED, {
-          ...combinedProps,
-          ...properties,
-          git_commit_hash: commitHash,
-        })
-      }
-      // Impressions should only be logged on mount.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
-    return <TraceContext.Provider value={combinedProps}>{children}</TraceContext.Provider>
-  }
-)
-
-Trace.displayName = 'Trace'

src/analytics/TraceEvent.tsx

@@ -1,75 +0,0 @@
-import { Children, cloneElement, isValidElement, memo, PropsWithChildren, SyntheticEvent } from 'react'
-
-import { sendAnalyticsEvent } from '.'
-import { Event, EventName } from './constants'
-import { ITraceContext, Trace, TraceContext } from './Trace'
-
-type TraceEventProps = {
-  events: Event[]
-  name: EventName
-  properties?: Record<string, unknown>
-  shouldLogImpression?: boolean
-} & ITraceContext
-
-/**
- * Analytics instrumentation component that wraps event callbacks with logging logic.
- *
- * @example
- *  <TraceEvent events={[Event.onClick]} element={ElementName.SWAP_BUTTON}>
- *    <Button onClick={() => console.log('clicked')}>Click me</Button>
- *  </TraceEvent>
- */
-export const TraceEvent = memo((props: PropsWithChildren<TraceEventProps>) => {
-  const { shouldLogImpression, name, properties, events, children, ...traceProps } = props
-
-  return (
-    <Trace {...traceProps}>
-      <TraceContext.Consumer>
-        {(traceContext) =>
-          Children.map(children, (child) => {
-            if (!isValidElement(child)) {
-              return child
-            }
-
-            // For each child, augment event handlers defined in `events` with event tracing.
-            return cloneElement(
-              child,
-              getEventHandlers(child, traceContext, events, name, properties, shouldLogImpression)
-            )
-          })
-        }
-      </TraceContext.Consumer>
-    </Trace>
-  )
-})
-
-TraceEvent.displayName = 'TraceEvent'
-
-/**
- * Given a set of child element and event props, returns a spreadable
- * object of the event handlers augmented with analytics logging.
- */
-function getEventHandlers(
-  child: React.ReactElement,
-  traceContext: ITraceContext,
-  events: Event[],
-  name: EventName,
-  properties?: Record<string, unknown>,
-  shouldLogImpression = true
-) {
-  const eventHandlers: Partial<Record<Event, (e: SyntheticEvent<Element, Event>) => void>> = {}
-
-  for (const event of events) {
-    eventHandlers[event] = (eventHandlerArgs: unknown) => {
-      // call child event handler with original arguments, must be in array
-      const args = Array.isArray(eventHandlerArgs) ? eventHandlerArgs : [eventHandlerArgs]
-      child.props[event]?.apply(child, args)
-
-      // augment handler with analytics logging
-      if (shouldLogImpression) sendAnalyticsEvent(name, { ...traceContext, ...properties, action: event })
-    }
-  }
-
-  // return a spreadable event handler object
-  return eventHandlers
-}

src/analytics/constants.ts

@@ -1,138 +0,0 @@
-/**
- * Event names that can occur in this application.
- *
- * Subject to change as new features are added and new events are defined
- * and logged.
- */
-export enum EventName {
-  APP_LOADED = 'Application Loaded',
-  APPROVE_TOKEN_TXN_SUBMITTED = 'Approve Token Transaction Submitted',
-  CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
-  EXPLORE_BANNER_CLICKED = 'Explore Banner 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_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',
-  TOKEN_SELECTED = 'Token Selected',
-  TOKEN_SELECTOR_OPENED = 'Token Selector Opened',
-  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.
-}
-
-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_TYPE = 'wallet_type',
-}
-
-export enum BROWSER {
-  FIREFOX = 'Mozilla Firefox',
-  SAMSUNG = 'Samsung Internet',
-  OPERA = 'Opera',
-  INTERNET_EXPLORER = 'Microsoft Internet Explorer',
-  EDGE = 'Microsoft Edge (Legacy)',
-  EDGE_CHROMIUM = 'Microsoft Edge (Chromium)',
-  CHROME = 'Google Chrome or Chromium',
-  SAFARI = 'Apple Safari',
-  BRAVE = 'Brave',
-  UNKNOWN = 'unknown',
-}
-
-export enum WALLET_CONNECTION_RESULT {
-  SUCCEEDED = 'Succeeded',
-  FAILED = 'Failed',
-}
-
-export enum SWAP_PRICE_UPDATE_USER_RESPONSE {
-  ACCEPTED = 'Accepted',
-  REJECTED = 'Rejected',
-}
-
-/**
- * Known pages in the app. Highest order context.
- */
-export enum PageName {
-  TOKEN_DETAILS_PAGE = 'token-details',
-  TOKENS_PAGE = 'tokens-page',
-  POOL_PAGE = 'pool-page',
-  SWAP_PAGE = 'swap-page',
-  VOTE_PAGE = 'vote-page',
-  // alphabetize additional page names.
-}
-
-/**
- * Sections. Disambiguates low-level elements that may share a name.
- * eg a `back` button in a modal will have the same `element`,
- * but a different `section`.
- */
-export enum SectionName {
-  CURRENCY_INPUT_PANEL = 'swap-currency-input',
-  CURRENCY_OUTPUT_PANEL = 'swap-currency-output',
-  WIDGET = 'widget',
-  // alphabetize additional section names.
-}
-
-/** Known modals for analytics purposes. */
-export enum ModalName {
-  CONFIRM_SWAP = 'confirm-swap-modal',
-  TOKEN_SELECTOR = 'token-selector-modal',
-  // alphabetize additional modal names.
-}
-
-/**
- * Known element names for analytics purposes.
- * Use to identify low-level components given a TraceContext
- */
-export enum ElementName {
-  AUTOROUTER_VISUALIZATION_ROW = 'expandable-autorouter-visualization-row',
-  COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
-  CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
-  CONNECT_WALLET_BUTTON = 'connect-wallet-button',
-  EXPLORE_BANNER = 'explore-banner',
-  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',
-  SWAP_TOKENS_REVERSE_ARROW_BUTTON = 'swap-tokens-reverse-arrow-button',
-  TOKEN_SELECTOR_ROW = 'token-selector-row',
-  WALLET_TYPE_OPTION = 'wallet-type-option',
-  // alphabetize additional element names.
-}
-
-/**
- * Known events that trigger callbacks.
- * @example
- *  <TraceEvent events={[Event.onClick]} element={name}>
- */
-export enum Event {
-  onClick = 'onClick',
-  onFocus = 'onFocus',
-  onKeyPress = 'onKeyPress',
-  onSelect = 'onSelect',
-  // alphabetize additional events.
-}

src/analytics/index.ts

@@ -1,91 +0,0 @@
-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.
- *
- * Uniswap has two Amplitude projects: test and production. You must be a
- * member of the organization on Amplitude to view details.
- */
-export function initializeAnalytics() {
-  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
-    /* options= */
-    {
-      // Disable tracking of private user information by Amplitude
-      trackingOptions: {
-        // 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,
-        dma: false, // designated market area
-      },
-    }
-  )
-}
-
-/** Sends an event to Amplitude. */
-export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
-  const origin = window.location.origin
-  if (!API_KEY) {
-    console.log(`[analytics(${eventName})]: ${JSON.stringify(eventProperties)}`)
-    return
-  }
-
-  track(eventName, { ...eventProperties, origin })
-}
-
-type Value = string | number | boolean | string[] | number[]
-
-/**
- * Class that exposes methods to mutate the User Model's properties in
- * Amplitude that represents the current session's user.
- *
- * See https://help.amplitude.com/hc/en-us/articles/115002380567-User-properties-and-event-properties
- * for details.
- */
-class UserModel {
-  private log(method: string, ...parameters: unknown[]) {
-    console.debug(`[amplitude(Identify)]: ${method}(${parameters})`)
-  }
-
-  private call(mutate: (event: Identify) => Identify) {
-    if (!isProductionEnv()) {
-      const log = (_: Identify, method: string) => this.log.bind(this, method)
-      mutate(new Proxy(new Identify(), { get: log }))
-      return
-    }
-    identify(mutate(new Identify()))
-  }
-
-  set(key: string, value: Value) {
-    this.call((event) => event.set(key, value))
-  }
-
-  setOnce(key: string, value: Value) {
-    this.call((event) => event.setOnce(key, value))
-  }
-
-  add(key: string, value: number) {
-    this.call((event) => event.add(key, value))
-  }
-
-  postInsert(key: string, value: string | number) {
-    this.call((event) => event.postInsert(key, value))
-  }
-
-  remove(key: string, value: string | number) {
-    this.call((event) => event.remove(key, value))
-  }
-}
-
-export const user = new UserModel()

src/components/AccountDetails/TransactionSummary.tsx

@@ -75,7 +75,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa
   const { ENSName } = useENSName()
   return typeof uniAmountRaw === 'string' ? (
     <Trans>
-      Claim <FormattedCurrencyAmount rawAmount={uniAmountRaw} symbol={'UNI'} decimals={18} sigFigs={4} /> for{' '}
+      Claim <FormattedCurrencyAmount rawAmount={uniAmountRaw} symbol="UNI" decimals={18} sigFigs={4} /> for{' '}
       {ENSName ?? recipient}
     </Trans>
   ) : (

src/components/AccountDetails/index.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import { removeConnectedWallet } from 'state/wallets/reducer'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
@@ -20,7 +21,7 @@ import { AutoRow } from '../Row'
 import Transaction from './Transaction'
 
 const HeaderRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
@@ -60,14 +61,14 @@ const InfoCard = styled.div`
 `
 
 const AccountGroupingRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap};
+  ${flexColumnNoWrap};
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
   color: ${({ theme }) => theme.deprecated_text1};
 
   div {
-    ${({ theme }) => theme.flexRowNoWrap}
+    ${flexColumnNoWrap};
     align-items: center;
   }
 `
@@ -90,7 +91,7 @@ const YourAccount = styled.div`
 `
 
 const LowerSection = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   padding: 1.5rem;
   flex-grow: 1;
   overflow: auto;
@@ -163,7 +164,7 @@ const WalletName = styled.div`
 `
 
 const TransactionListWrapper = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
 `
 
 const WalletAction = styled(ButtonSecondary)`
@@ -302,7 +303,7 @@ export default function AccountDetails({
       </UpperSection>
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
-          <AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}>
+          <AutoRow mb="1rem" style={{ justifyContent: 'space-between' }}>
             <ThemedText.DeprecatedBody>
               <Trans>Recent Transactions</Trans>
             </ThemedText.DeprecatedBody>

src/components/AccountDetailsV2/TransactionBody.tsx

@@ -57,7 +57,6 @@ const FailedText = ({ transactionState }: { transactionState: TransactionState }
 const FormattedCurrencyAmount = ({
   rawAmount,
   currencyId,
-  sigFigs = 2,
 }: {
   rawAmount: string
   currencyId: string
@@ -67,7 +66,7 @@ const FormattedCurrencyAmount = ({
 
   return currency ? (
     <HighlightText>
-      {formatAmount(rawAmount, currency.decimals, sigFigs)} {currency.symbol}
+      {formatAmount(rawAmount, currency.decimals, /* sigFigs= */ 6)} {currency.symbol}
     </HighlightText>
   ) : null
 }

src/components/AddressInputPanel/index.tsx

@@ -4,6 +4,7 @@ import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ChangeEvent, ReactNode, useCallback } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap } from 'theme/styles'
 
 import useENS from '../../hooks/useENS'
 import { ExternalLink, ThemedText } from '../../theme'
@@ -12,7 +13,7 @@ import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 
 const InputPanel = styled.div`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: 1.25rem;
   background-color: ${({ theme }) => theme.deprecated_bg1};

src/components/Badge/index.tsx

@@ -1,7 +1,6 @@
 import { readableColor } from 'polished'
 import { PropsWithChildren } from 'react'
 import styled, { DefaultTheme } from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
 export enum BadgeVariant {
   DEFAULT = 'DEFAULT',
@@ -17,7 +16,7 @@ interface BadgeProps {
   variant?: BadgeVariant
 }
 
-function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): Color {
+function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
       return theme.deprecated_error

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import { darken } from 'polished'
 import { Check, ChevronDown } from 'react-feather'
 import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { DefaultTheme, useTheme } from 'styled-components/macro'
 
 import { RowBetween } from '../Row'
 
@@ -50,12 +50,12 @@ export const BaseButton = styled(RebassButton)<
   }
 `
 
-export const ButtonPrimary = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
-  font-size: ${({ redesignFlag }) => redesignFlag && '20px'};
-  font-weight: ${({ redesignFlag }) => redesignFlag && '600'};
-  padding: ${({ redesignFlag }) => redesignFlag && '16px'};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentTextLightPrimary : 'white')};
+export const ButtonPrimary = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentAction};
+  font-size: 20px;
+  font-weight: 600;
+  padding: 16px;
+  color: ${({ theme }) => theme.accentTextLightPrimary};
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
     background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
@@ -79,35 +79,28 @@ export const ButtonPrimary = styled(BaseButton)<{ redesignFlag?: boolean }>`
   }
 `
 
-export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActionSoft : theme.deprecated_primary5)};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primaryText1)};
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '16px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+export const ButtonLight = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentActionSoft};
+  color: ${({ theme }) => theme.accentAction};
+  font-size: 20px;
+  font-weight: 600;
 
   &:focus {
-    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
   }
   &:hover {
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
   }
   &:active {
-    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
   }
   :disabled {
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary5)};
+      background-color: transparent;
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;
@@ -176,28 +169,22 @@ export const ButtonOutlined = styled(BaseButton)`
   }
 `
 
-export const ButtonYellow = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3)};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarning : 'white')};
+export const ButtonYellow = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentWarningSoft};
+  color: ${({ theme }) => theme.accentWarning};
   &:focus {
-    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${theme.deprecated_yellow3}`};
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : darken(0.05, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
   }
   &:hover {
-    background: ${({ theme, redesignFlag }) => redesignFlag && theme.stateOverlayHover};
-    mix-blend-mode: ${({ redesignFlag }) => redesignFlag && 'normal'};
-    background-color: ${({ theme, redesignFlag }) => !redesignFlag && darken(0.05, theme.deprecated_yellow3)};
+    background: ${({ theme }) => theme.stateOverlayHover};
+    mix-blend-mode: normal;
   }
   &:active {
-    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${darken(0.1, theme.deprecated_yellow3)}`};
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : darken(0.1, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
   }
   &:disabled {
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3};
-    opacity: ${({ redesignFlag }) => (redesignFlag ? '60%' : '50%')};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
+    opacity: 60%;
     cursor: auto;
   }
 `
@@ -358,23 +345,139 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
   if (!active) {
     return (
       <ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}>
-        {<RowBetween>{children}</RowBetween>}
+        <RowBetween>{children}</RowBetween>
       </ButtonOutlined>
     )
   } else {
     return (
       <ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px">
-        {
-          <RowBetween>
-            {children}
-            <CheckboxWrapper>
-              <Circle>
-                <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
-              </Circle>
-            </CheckboxWrapper>
-          </RowBetween>
-        }
+        <RowBetween>
+          {children}
+          <CheckboxWrapper>
+            <Circle>
+              <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
+            </Circle>
+          </CheckboxWrapper>
+        </RowBetween>
       </ActiveOutlined>
     )
   }
 }
+
+const ButtonOverlay = styled.div`
+  background-color: transparent;
+  bottom: 0;
+  border-radius: 16px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 150ms ease background-color;
+  width: 100%;
+`
+export enum ButtonSize {
+  small,
+  medium,
+  large,
+}
+export enum ButtonEmphasis {
+  high,
+  promotional,
+  highSoft,
+  medium,
+  low,
+  warning,
+  destructive,
+}
+interface BaseButtonProps {
+  size: ButtonSize
+  emphasis: ButtonEmphasis
+}
+
+function pickThemeButtonBackgroundColor({ theme, emphasis }: { theme: DefaultTheme; emphasis: ButtonEmphasis }) {
+  switch (emphasis) {
+    case ButtonEmphasis.high:
+      return theme.accentAction
+    case ButtonEmphasis.promotional:
+      return theme.accentTextLightPrimary
+    case ButtonEmphasis.highSoft:
+      return theme.accentActionSoft
+    case ButtonEmphasis.low:
+      return 'transparent'
+    case ButtonEmphasis.warning:
+      return theme.accentWarningSoft
+    case ButtonEmphasis.destructive:
+      return theme.accentCritical
+    case ButtonEmphasis.medium:
+    default:
+      return theme.backgroundInteractive
+  }
+}
+
+function pickThemeButtonTextColor({ theme, emphasis }: { theme: DefaultTheme; emphasis: ButtonEmphasis }) {
+  switch (emphasis) {
+    case ButtonEmphasis.high:
+    case ButtonEmphasis.promotional:
+      return theme.accentTextLightPrimary
+    case ButtonEmphasis.highSoft:
+      return theme.accentAction
+    case ButtonEmphasis.low:
+      return theme.textSecondary
+    case ButtonEmphasis.warning:
+      return theme.accentWarning
+    case ButtonEmphasis.destructive:
+      return theme.accentTextDarkPrimary
+    case ButtonEmphasis.medium:
+    default:
+      return theme.textPrimary
+  }
+}
+
+const BaseThemeButton = styled.button<BaseButtonProps>`
+  align-items: center;
+  background-color: ${pickThemeButtonBackgroundColor};
+  border-radius: 16px;
+  border: 0;
+  color: ${pickThemeButtonTextColor};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-weight: 600;
+  gap: 12px;
+  justify-content: center;
+  padding: 16px;
+  position: relative;
+  transition: 150ms ease opacity;
+
+  :active {
+    ${ButtonOverlay} {
+      background-color: ${({ theme }) => theme.stateOverlayPressed};
+    }
+  }
+  :disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+  :focus {
+    ${ButtonOverlay} {
+      background-color: ${({ theme }) => theme.stateOverlayPressed};
+    }
+  }
+  :hover {
+    ${ButtonOverlay} {
+      background-color: ${({ theme }) => theme.stateOverlayHover};
+    }
+  }
+`
+
+interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseButtonProps {}
+
+export const ThemeButton = ({ children, ...rest }: ThemeButtonProps) => {
+  return (
+    <BaseThemeButton {...rest}>
+      <ButtonOverlay />
+      {children}
+    </BaseThemeButton>
+  )
+}

src/components/Card/index.tsx

@@ -14,15 +14,15 @@ export const LightCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
-export const LightGreyCard = styled(Card)`
+export const LightGrayCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_bg2};
 `
 
-export const GreyCard = styled(Card)`
+export const GrayCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
-export const DarkGreyCard = styled(Card)`
+export const DarkGrayCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_bg2};
 `
 

src/components/Charts/LineChart.tsx

@@ -4,7 +4,6 @@ import { CurveFactory } from 'd3'
 import React from 'react'
 import { ReactNode } from 'react'
 import { useTheme } from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
 export interface LineChartProps<T> {
   data: T[]
@@ -12,7 +11,7 @@ export interface LineChartProps<T> {
   getY: (t: T) => number
   marginTop?: number
   curve: CurveFactory
-  color?: Color
+  color?: string
   strokeWidth: number
   children?: ReactNode
   width: number

src/components/Charts/SparklineChart.tsx

@@ -1,7 +1,7 @@
 import { SparkLineLoadingBubble } from 'components/Tokens/TokenTable/TokenRow'
 import { curveCardinal, scaleLinear } from 'd3'
-import { PricePoint } from 'graphql/data/Token'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
+import { PricePoint } from 'graphql/data/util'
 import { TimePeriod } from 'graphql/data/util'
 import { memo } from 'react'
 import styled, { useTheme } from 'styled-components/macro'

src/components/Common/index.tsx

@@ -0,0 +1,47 @@
+import { css } from 'styled-components/macro'
+
+export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
+  // Firefox scrollbar styling
+  scrollbar-width: thin;
+  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
+  height: 100%;
+
+  // safari and chrome scrollbar styling
+  ::-webkit-scrollbar {
+    background: transparent;
+
+    // Set height for horizontal scrolls
+    ${({ $isHorizontalScroll }) => {
+      return $isHorizontalScroll
+        ? css`
+            height: 4px;
+            overflow-x: scroll;
+          `
+        : css`
+            width: 4px;
+            overflow-y: scroll;
+          `
+    }}
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.backgroundOutline};
+    border-radius: 8px;
+  }
+`
+
+export const OpacityHoverState = css`
+  &:hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+
+  &:active {
+    opacity: ${({ theme }) => theme.opacity.click};
+  }
+
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `opacity ${duration.medium} ${timing.ease}`};
+`

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
-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,6 +11,7 @@ import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -25,7 +26,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   z-index: 1;
@@ -106,13 +107,13 @@ const CurrencySelect = styled(ButtonGray)<{
 `
 
 const InputRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
 `
 
 const LabelRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   color: ${({ theme }) => theme.textSecondary};
   font-size: 0.75rem;
@@ -281,7 +282,7 @@ export default function SwapCurrencyInputPanel({
                     <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
                   </span>
                 ) : currency ? (
-                  <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
+                  <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size="24px" />
                 ) : null}
                 {pair ? (
                   <StyledTokenName className="pair-name-container">
@@ -325,7 +326,7 @@ export default function SwapCurrencyInputPanel({
                   </ThemedText.DeprecatedBody>
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
-                      events={[Event.onClick]}
+                      events={[BrowserEvent.onClick]}
                       name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
                       element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >

src/components/CurrencyInputPanel/index.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/macro'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
-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,6 +11,7 @@ import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -25,7 +26,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexColumnNoWrap}
+  ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
@@ -95,14 +96,14 @@ const CurrencySelect = styled(ButtonGray)<{
 `
 
 const InputRow = styled.div<{ selected: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
   padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
 `
 
 const LabelRow = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   color: ${({ theme }) => theme.deprecated_text1};
   font-size: 0.75rem;
@@ -269,7 +270,7 @@ export default function CurrencyInputPanel({
                     <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
                   </span>
                 ) : currency ? (
-                  <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size={'24px'} />
+                  <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size="24px" />
                 ) : null}
                 {pair ? (
                   <StyledTokenName className="pair-name-container">
@@ -314,7 +315,7 @@ export default function CurrencyInputPanel({
                   </ThemedText.DeprecatedBody>
                   {showMaxButton && selectedCurrencyBalance ? (
                     <TraceEvent
-                      events={[Event.onClick]}
+                      events={[BrowserEvent.onClick]}
                       name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
                       element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >

src/components/ErrorBoundary/index.tsx

@@ -98,7 +98,7 @@ export default class ErrorBoundary extends React.Component<PropsWithChildren<unk
       return (
         <FallbackWrapper>
           <BodyWrapper>
-            <AutoColumn gap={'md'}>
+            <AutoColumn gap="md">
               <SomethingWentWrongWrapper>
                 <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
                   <Trans>Something went wrong</Trans>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,5 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
-import { NftGraphQlVariant, useNftGraphQlFlag } from 'featureFlags/flags/nftGraphQl'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
@@ -205,12 +204,6 @@ export default function FeatureFlagModal() {
       </Header>
       <FeatureFlagGroup name="Phase 1">
         <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
-        <FeatureFlagOption
-          variant={NftGraphQlVariant}
-          value={useNftGraphQlFlag()}
-          featureFlag={FeatureFlag.nftGraphQl}
-          label="NFT GraphQL Endpoints"
-        />
       </FeatureFlagGroup>
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption

src/components/Identicon/StatusIcon.tsx

@@ -2,6 +2,7 @@ import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
 import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
+import { flexColumnNoWrap } from 'theme/styles'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
@@ -9,9 +10,9 @@ import sockImg from '../../assets/svg/socks.svg'
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import Identicon from '../Identicon'
 
-const IconWrapper = styled.div<{ size?: number }>`
+export const IconWrapper = styled.div<{ size?: number }>`
   position: relative;
-  ${({ theme }) => theme.flexColumnNoWrap};
+  ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   margin-right: 8px;

src/components/Identicon/index.tsx

@@ -1,13 +1,13 @@
 import jazzicon from '@metamask/jazzicon'
 import { useWeb3React } from '@web3-react/core'
 import useENSAvatar from 'hooks/useENSAvatar'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
 
 const StyledIdenticon = styled.div<{ iconSize: number }>`
   height: ${({ iconSize }) => `${iconSize}px`};
   width: ${({ iconSize }) => `${iconSize}px`};
-  border-radius: 1.125rem;
+  border-radius: 50%;
   background-color: ${({ theme }) => theme.deprecated_bg4};
   font-size: initial;
 `
@@ -41,10 +41,12 @@ export default function Identicon({ size }: { size?: number }) {
     return
   }, [icon, iconRef])
 
+  const handleError = useCallback(() => setFetchable(false), [])
+
   return (
     <StyledIdenticon iconSize={iconSize}>
       {avatar && fetchable ? (
-        <StyledAvatar alt="avatar" src={avatar} onError={() => setFetchable(false)}></StyledAvatar>
+        <StyledAvatar alt="avatar" src={avatar} onError={handleError}></StyledAvatar>
       ) : (
         <span ref={iconRef} />
       )}

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -213,7 +213,7 @@ export const Brush = ({
                   visible={showLabels || hovering}
                 >
                   <TooltipBackground y="0" x="-30" height="30" width="60" rx="8" />
-                  <Tooltip transform={`scale(-1, 1)`} y="15" dominantBaseline="middle">
+                  <Tooltip transform="scale(-1, 1)" y="15" dominantBaseline="middle">
                     {brushLabelValue('w', localBrushExtent[0])}
                   </Tooltip>
                 </LabelGroup>

src/components/ListLogo/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import styled from 'styled-components/macro'
-
-import useHttpLocations from '../../hooks/useHttpLocations'
-import Logo from '../Logo'
-
-const StyledListLogo = styled(Logo)<{ size: string }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-`
-
-export default function ListLogo({
-  logoURI,
-  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} symbol={symbol} srcs={srcs} style={style} />
-}

src/components/Loader/index.tsx

@@ -9,13 +9,12 @@ const rotate = keyframes`
   }
 `
 
-const StyledSVG = styled.svg<{ size: string; stroke?: string; redesignFlag?: boolean }>`
+const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
   animation: 2s ${rotate} linear infinite;
   height: ${({ size }) => size};
   width: ${({ size }) => size};
   path {
-    stroke: ${({ stroke, redesignFlag, theme }) =>
-      redesignFlag ? theme.accentActive : stroke ?? theme.deprecated_primary1};
+    stroke: ${({ stroke, theme }) => stroke ?? theme.accentActive};
   }
 `
 
@@ -27,25 +26,15 @@ export default function Loader({
   size = '16px',
   stroke,
   strokeWidth,
-  redesignFlag,
   ...rest
 }: {
   size?: string
   stroke?: string
   strokeWidth?: number
-  redesignFlag?: boolean
   [k: string]: any
 }) {
   return (
-    <StyledSVG
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      size={size}
-      stroke={stroke}
-      redesignFlag={redesignFlag}
-      {...rest}
-    >
+    <StyledSVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size={size} stroke={stroke} {...rest}>
       <path
         d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5"
         strokeWidth={strokeWidth ?? '2.5'}

src/components/Modal/index.tsx

@@ -1,5 +1,4 @@
 import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { transparentize } from 'polished'
 import React from 'react'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
@@ -10,7 +9,7 @@ import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean; scrollOverlay?: boolean }>`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: ${Z_INDEX.modalBackdrop};
     background-color: transparent;
@@ -21,14 +20,14 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boole
     overflow-y: ${({ scrollOverlay }) => scrollOverlay && 'scroll'};
     justify-content: center;
 
-    background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundScrim : theme.deprecated_modalBG)};
+    background-color: ${({ theme }) => theme.backgroundScrim};
   }
 `
 
 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, scrollOverlay, ...rest }) => (
+const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, scrollOverlay, ...rest }) => (
   <AnimatedDialogContent {...rest} />
 )).attrs({
   'aria-label': 'dialog',
@@ -36,11 +35,10 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
   overflow-y: auto;
 
   &[data-reach-dialog-content] {
-    margin: ${({ redesignFlag }) => (redesignFlag ? 'auto' : '0 0 2rem 0')};
+    margin: auto;
     background-color: ${({ theme }) => theme.deprecated_bg0};
     border: 1px solid ${({ theme }) => theme.deprecated_bg1};
-    box-shadow: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.deepShadow : `0 4px 8px 0 ${transparentize(0.95, theme.shadow1)}`};
+    box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
@@ -61,9 +59,9 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
       `}
     display: ${({ scrollOverlay }) => (scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
-    ${({ theme, redesignFlag }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
       width: 65vw;
-      margin: ${redesignFlag ? 'auto' : '0'};
+      margin: auto;
     `}
     ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
       width:  85vw;
@@ -87,7 +85,6 @@ interface ModalProps {
   maxHeight?: number
   initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
-  redesignFlag?: boolean
   scrollOverlay?: boolean
 }
 
@@ -98,7 +95,6 @@ export default function Modal({
   maxHeight = 90,
   initialFocusRef,
   children,
-  redesignFlag,
   scrollOverlay,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, {
@@ -131,7 +127,6 @@ export default function Modal({
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
               unstable_lockFocusAcrossFrames={false}
-              redesignFlag={redesignFlag}
               scrollOverlay={scrollOverlay}
             >
               <StyledDialogContent
@@ -145,7 +140,6 @@ export default function Modal({
                 minHeight={minHeight}
                 maxHeight={maxHeight}
                 mobile={isMobile}
-                redesignFlag={redesignFlag}
                 scrollOverlay={scrollOverlay}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}

src/components/ModalViews/index.tsx

@@ -27,9 +27,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
         <CloseIcon onClick={onDismiss} />
       </RowBetween>
       <ConfirmedIcon>
-        <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
+        <CustomLightSpinner src={Circle} alt="loader" size="90px" />
       </ConfirmedIcon>
-      <AutoColumn gap="100px" justify={'center'}>
+      <AutoColumn gap="100px" justify="center">
         {children}
         <ThemedText.DeprecatedSubHeader>
           <Trans>Confirm this transaction in your wallet</Trans>
@@ -60,7 +60,7 @@ export function SubmittedView({
       <ConfirmedIcon>
         <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
       </ConfirmedIcon>
-      <AutoColumn gap="100px" justify={'center'}>
+      <AutoColumn gap="100px" justify="center">
         {children}
         {chainId && hash && (
           <ExternalLink

src/components/NavBar/Bag.tsx

@@ -0,0 +1,48 @@
+import { NavIcon } from 'components/NavBar/NavIcon'
+import { BagIcon, HundredsOverflowIcon } from 'nft/components/icons'
+import { useBag } from 'nft/hooks'
+import { useCallback, useEffect, useState } from 'react'
+import styled from 'styled-components/macro'
+import shallow from 'zustand/shallow'
+
+const CounterDot = styled.div`
+  background-color: ${({ theme }) => theme.accentAction};
+  border-radius: 100px;
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  font-size: 10px;
+  line-height: 12px;
+  min-height: 16px;
+  min-width: 16px;
+  padding: 2px 4px;
+  position: absolute;
+  right: 0px;
+  text-align: center;
+  top: 4px;
+`
+
+export const Bag = () => {
+  const itemsInBag = useBag((state) => state.itemsInBag)
+  const [bagQuantity, setBagQuantity] = useState(0)
+
+  const { bagExpanded, setBagExpanded } = useBag(
+    ({ bagExpanded, setBagExpanded }) => ({ bagExpanded, setBagExpanded }),
+    shallow
+  )
+
+  const handleIconClick = useCallback(() => {
+    setBagExpanded({ bagExpanded: !bagExpanded })
+  }, [bagExpanded, setBagExpanded])
+
+  useEffect(() => {
+    setBagQuantity(itemsInBag.length)
+  }, [itemsInBag])
+
+  const bagHasItems = bagQuantity > 0
+
+  return (
+    <NavIcon isActive={bagExpanded} onClick={handleIconClick}>
+      <BagIcon viewBox="0 0 24 24" width={24} height={24} />
+      {bagHasItems && <CounterDot>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</CounterDot>}
+    </NavIcon>
+  )
+}

src/components/NavBar/MenuDropdown.tsx

@@ -42,7 +42,7 @@ const PrimaryMenuRow = ({
           <Row onClick={close}>{children}</Row>
         </NavLink>
       ) : (
-        <Row as="a" href={href} target={'_blank'} rel={'noopener noreferrer'} className={styles.MenuRow}>
+        <Row as="a" href={href} target="_blank" rel="noopener noreferrer" className={styles.MenuRow}>
           {children}
         </Row>
       )}
@@ -123,7 +123,7 @@ export const MenuDropdown = () => {
     <>
       <Box position="relative" ref={ref}>
         <NavIcon isActive={isOpen} onClick={toggleOpen}>
-          <EllipsisIcon width={20} height={20} />
+          <EllipsisIcon viewBox="0 0 20 20" width={24} height={24} />
         </NavIcon>
 
         {isOpen && (

src/components/NavBar/NavIcon.css.ts

@@ -4,6 +4,8 @@ import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const navIcon = style([
   sprinkles({
+    alignItems: 'center',
+    background: 'transparent',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
@@ -11,7 +13,6 @@ export const navIcon = style([
     justifyContent: 'center',
     textAlign: 'center',
     cursor: 'pointer',
-    padding: '10',
     borderRadius: '8',
     transition: '250',
   }),

src/components/NavBar/NavIcon.tsx

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

src/components/NavBar/SearchBar.css.ts

@@ -103,8 +103,10 @@ export const suggestionImage = sprinkles({
 export const suggestionPrimaryContainer = style([
   sprinkles({
     alignItems: 'flex-start',
-    width: 'full',
   }),
+  {
+    width: '90%',
+  },
 ])
 
 export const suggestionSecondaryContainer = sprinkles({

src/components/NavBar/SearchBar.tsx

@@ -1,11 +1,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
-import { sendAnalyticsEvent } from 'analytics'
-import { ElementName, Event, EventName } from 'analytics/constants'
-import { TraceEvent } from 'analytics/TraceEvent'
+import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName, SectionName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { organizeSearchResults } from 'lib/utils/searchBar'
 import { Box } from 'nft/components/Box'
@@ -45,6 +45,7 @@ export const SearchBar = () => {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
+      enabled: !!debouncedSearchValue.length && phase1Flag === NftVariant.Enabled,
     }
   )
 
@@ -55,10 +56,11 @@ export const SearchBar = () => {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
+      enabled: !!debouncedSearchValue.length,
     }
   )
 
-  const isNFTPage = pathname.includes('/nfts')
+  const isNFTPage = useIsNftPage()
 
   const [reducedTokens, reducedCollections] = organizeSearchResults(isNFTPage, tokens ?? [], collections ?? [])
 
@@ -95,77 +97,85 @@ export const SearchBar = () => {
   const showCenteredSearchContent =
     !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0
 
+  const trace = useTrace({ section: SectionName.NAVBAR_SEARCH })
+
   const navbarSearchEventProperties = {
     navbar_search_input_text: debouncedSearchValue,
+    hasInput: debouncedSearchValue && debouncedSearchValue.length > 0,
+    ...trace,
   }
 
   return (
     <Box position="relative">
-      <Box
-        position={{ sm: 'fixed', md: 'absolute' }}
-        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-        ref={searchRef}
-        className={styles.searchBarContainer}
-        display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
-      >
-        <Row
-          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}
-          borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
-          onClick={() => !isOpen && toggleOpen()}
-          gap="12"
+      <Trace section={SectionName.NAVBAR_SEARCH}>
+        <Box
+          position={{ sm: 'fixed', md: 'absolute' }}
+          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+          ref={searchRef}
+          className={styles.searchBarContainer}
+          display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
         >
-          <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>
-          <TraceEvent
-            events={[Event.onFocus]}
-            name={EventName.NAVBAR_SEARCH_SELECTED}
-            element={ElementName.NAVBAR_SEARCH_INPUT}
+          <Row
+            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}
+            borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
+            onClick={() => !isOpen && toggleOpen()}
+            gap="12"
           >
-            <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 className={clsx(isOpen ? styles.visible : styles.hidden)}>
-          {isOpen && (
-            <SearchBarDropdown
-              toggleOpen={toggleOpen}
-              tokens={reducedTokens}
-              collections={reducedCollections}
-              hasInput={debouncedSearchValue.length > 0}
-              isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)}
-            />
-          )}
+            <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>
+            <TraceEvent
+              events={[BrowserEvent.onFocus]}
+              name={EventName.NAVBAR_SEARCH_SELECTED}
+              element={ElementName.NAVBAR_SEARCH_INPUT}
+              properties={{ ...trace }}
+            >
+              <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 className={clsx(isOpen ? styles.visible : styles.hidden)}>
+            {isOpen && (
+              <SearchBarDropdown
+                toggleOpen={toggleOpen}
+                tokens={reducedTokens}
+                collections={reducedCollections}
+                queryText={debouncedSearchValue}
+                hasInput={debouncedSearchValue.length > 0}
+                isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)}
+              />
+            )}
+          </Box>
         </Box>
-      </Box>
-      <NavIcon onClick={toggleOpen}>
-        <NavMagnifyingGlassIcon />
-      </NavIcon>
+        <NavIcon onClick={toggleOpen}>
+          <NavMagnifyingGlassIcon />
+        </NavIcon>
+      </Trace>
     </Box>
   )
 }

src/components/NavBar/SearchBarDropdown.tsx

@@ -1,7 +1,8 @@
 import { Trans } from '@lingui/macro'
-import { sendAnalyticsEvent } from 'analytics'
-import { EventName } from 'analytics/constants'
+import { useTrace } from '@uniswap/analytics'
+import { NavBarSearchTypes, SectionName } from '@uniswap/analytics-events'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { subheadSmall } from 'nft/css/common.css'
@@ -31,6 +32,7 @@ interface SearchBarDropdownSectionProps {
   startingIndex: number
   setHoveredIndex: (index: number | undefined) => void
   isLoading?: boolean
+  eventProperties: Record<string, unknown>
 }
 
 export const SearchBarDropdownSection = ({
@@ -42,10 +44,11 @@ export const SearchBarDropdownSection = ({
   startingIndex,
   setHoveredIndex,
   isLoading,
+  eventProperties,
 }: SearchBarDropdownSectionProps) => {
   return (
     <Column gap="12">
-      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
+      <Row paddingX="16" paddingY="4" gap="8" color="gray300" className={subheadSmall} style={{ lineHeight: '20px' }}>
         {headerIcon ? headerIcon : null}
         <Box>{header}</Box>
       </Row>
@@ -60,16 +63,13 @@ export const SearchBarDropdownSection = ({
               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}
+              eventProperties={{
+                position: index + startingIndex,
+                selected_search_result_name: suggestion.name,
+                selected_search_result_address: suggestion.address,
+                ...eventProperties,
+              }}
             />
           ) : (
             <TokenRow
@@ -78,16 +78,13 @@ export const SearchBarDropdownSection = ({
               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}
+              eventProperties={{
+                position: index + startingIndex,
+                selected_search_result_name: suggestion.name,
+                selected_search_result_address: suggestion.address,
+                ...eventProperties,
+              }}
             />
           )
         )}
@@ -100,16 +97,24 @@ interface SearchBarDropdownProps {
   toggleOpen: () => void
   tokens: FungibleToken[]
   collections: GenieCollection[]
+  queryText: string
   hasInput: boolean
   isLoading: boolean
 }
 
-export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, isLoading }: SearchBarDropdownProps) => {
+export const SearchBarDropdown = ({
+  toggleOpen,
+  tokens,
+  collections,
+  queryText,
+  hasInput,
+  isLoading,
+}: SearchBarDropdownProps) => {
   const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(0)
   const { history: searchHistory, updateItem: updateSearchHistory } = useSearchHistory()
   const shortenedHistory = useMemo(() => searchHistory.slice(0, 2), [searchHistory])
   const { pathname } = useLocation()
-  const isNFTPage = pathname.includes('/nfts')
+  const isNFTPage = useIsNftPage()
   const isTokenPage = pathname.includes('/tokens')
   const phase1Flag = useNftFlag()
   const [resultsState, setResultsState] = useState<ReactNode>()
@@ -130,6 +135,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
               stats: {
                 total_supply: collection.totalSupply,
                 one_day_change: collection.floorChange,
+                floor_price: formatEthPrice(collection.floor?.toString()),
               },
             }))
             .slice(0, isNFTPage ? 3 : 2)
@@ -192,16 +198,29 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
     }
   }, [toggleOpen, hoveredIndex, totalSuggestions])
 
+  const hasVerifiedCollection = collections.some((collection) => collection.isVerified)
+  const hasVerifiedToken = tokens.some((token) => token.onDefaultList)
+  const showCollectionsFirst =
+    (isNFTPage && (hasVerifiedCollection || !hasVerifiedToken)) ||
+    (!isNFTPage && !hasVerifiedToken && hasVerifiedCollection)
+
+  const trace = JSON.stringify(useTrace({ section: SectionName.NAVBAR_SEARCH }))
+
   useEffect(() => {
+    const eventProperties = { total_suggestions: totalSuggestions, query_text: queryText, ...JSON.parse(trace) }
     if (!isLoading) {
       const tokenSearchResults =
         tokens.length > 0 ? (
           <SearchBarDropdownSection
             hoveredIndex={hoveredIndex}
-            startingIndex={isNFTPage ? collections.length : 0}
+            startingIndex={showCollectionsFirst ? collections.length : 0}
             setHoveredIndex={setHoveredIndex}
             toggleOpen={toggleOpen}
             suggestions={tokens}
+            eventProperties={{
+              suggestion_type: NavBarSearchTypes.TOKEN_SUGGESTION,
+              ...eventProperties,
+            }}
             header={<Trans>Tokens</Trans>}
           />
         ) : (
@@ -215,10 +234,14 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
           collections.length > 0 ? (
             <SearchBarDropdownSection
               hoveredIndex={hoveredIndex}
-              startingIndex={isNFTPage ? 0 : tokens.length}
+              startingIndex={showCollectionsFirst ? 0 : tokens.length}
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
               suggestions={collections}
+              eventProperties={{
+                suggestion_type: NavBarSearchTypes.COLLECTION_SUGGESTION,
+                ...eventProperties,
+              }}
               header={<Trans>NFT Collections</Trans>}
             />
           ) : (
@@ -230,7 +253,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
         hasInput ? (
           // Empty or Up to 8 combined tokens and nfts
           <Column gap="20">
-            {isNFTPage ? (
+            {showCollectionsFirst ? (
               <>
                 {collectionSearchResults}
                 {tokenSearchResults}
@@ -252,6 +275,10 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
                 setHoveredIndex={setHoveredIndex}
                 toggleOpen={toggleOpen}
                 suggestions={shortenedHistory}
+                eventProperties={{
+                  suggestion_type: NavBarSearchTypes.RECENT_SEARCH,
+                  ...eventProperties,
+                }}
                 header={<Trans>Recent searches</Trans>}
                 headerIcon={<ClockIcon />}
               />
@@ -263,6 +290,10 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
                 setHoveredIndex={setHoveredIndex}
                 toggleOpen={toggleOpen}
                 suggestions={trendingTokens}
+                eventProperties={{
+                  suggestion_type: NavBarSearchTypes.TOKEN_TRENDING,
+                  ...eventProperties,
+                }}
                 header={<Trans>Popular tokens</Trans>}
                 headerIcon={<TrendingArrow />}
                 isLoading={trendingTokensAreLoading}
@@ -275,6 +306,10 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
                 setHoveredIndex={setHoveredIndex}
                 toggleOpen={toggleOpen}
                 suggestions={trendingCollections as unknown as GenieCollection[]}
+                eventProperties={{
+                  suggestion_type: NavBarSearchTypes.COLLECTION_TRENDING,
+                  ...eventProperties,
+                }}
                 header={<Trans>Popular NFT collections</Trans>}
                 headerIcon={<TrendingArrow />}
                 isLoading={trendingCollectionsAreLoading}
@@ -300,6 +335,10 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
     hasInput,
     isNFTPage,
     isTokenPage,
+    showCollectionsFirst,
+    queryText,
+    totalSuggestions,
+    trace,
   ])
 
   return (

src/components/NavBar/ShoppingBag.css.ts

@@ -1,22 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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,12 +1,16 @@
+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { EventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import clsx from 'clsx'
 import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
-import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
+import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
+import { checkWarning } from 'constants/tokenSafety'
 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'
+import { VerifiedIcon } from 'nft/components/icons'
 import { vars } from 'nft/css/sprinkles.css'
 import { useSearchHistory } from 'nft/hooks'
 import { FungibleToken, GenieCollection } from 'nft/types'
@@ -23,8 +27,8 @@ interface CollectionRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
-  traceEvent: () => void
   index: number
+  eventProperties: Record<string, unknown>
 }
 
 export const CollectionRow = ({
@@ -32,8 +36,8 @@ export const CollectionRow = ({
   isHovered,
   setHoveredIndex,
   toggleOpen,
-  traceEvent,
   index,
+  eventProperties,
 }: CollectionRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
@@ -45,8 +49,8 @@ export const CollectionRow = ({
   const handleClick = useCallback(() => {
     addToSearchHistory(collection)
     toggleOpen()
-    traceEvent()
-  }, [addToSearchHistory, collection, toggleOpen, traceEvent])
+    sendAnalyticsEvent(EventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
+  }, [addToSearchHistory, collection, toggleOpen, eventProperties])
 
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
@@ -89,13 +93,13 @@ export const CollectionRow = ({
             <Box className={styles.primaryText}>{collection.name}</Box>
             {collection.isVerified && <VerifiedIcon className={styles.suggestionIcon} />}
           </Row>
-          <Box className={styles.secondaryText}>{putCommas(collection.stats.total_supply)} items</Box>
+          <Box className={styles.secondaryText}>{putCommas(collection?.stats?.total_supply ?? 0)} items</Box>
         </Column>
       </Row>
-      {collection.floorPrice ? (
+      {collection.stats?.floor_price ? (
         <Column className={styles.suggestionSecondaryContainer}>
           <Row gap="4">
-            <Box className={styles.primaryText}>{ethNumberStandardFormatter(collection.floorPrice)} ETH</Box>
+            <Box className={styles.primaryText}>{ethNumberStandardFormatter(collection.stats?.floor_price)} ETH</Box>
           </Row>
           <Box className={styles.secondaryText}>Floor</Box>
         </Column>
@@ -118,11 +122,11 @@ interface TokenRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
-  traceEvent: () => void
   index: number
+  eventProperties: Record<string, unknown>
 }
 
-export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceEvent, index }: TokenRowProps) => {
+export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index, eventProperties }: TokenRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const addToSearchHistory = useSearchHistory(
@@ -133,8 +137,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceE
   const handleClick = useCallback(() => {
     addToSearchHistory(token)
     toggleOpen()
-    traceEvent()
-  }, [addToSearchHistory, toggleOpen, token, traceEvent])
+    sendAnalyticsEvent(EventName.NAVBAR_RESULT_SELECTED, { ...eventProperties })
+  }, [addToSearchHistory, toggleOpen, token, eventProperties])
 
   const [bridgedAddress, bridgedChain, L2Icon] = useBridgedAddress(token)
   const tokenDetailsPath = getTokenDetailsURL(bridgedAddress ?? token.address, undefined, bridgedChain ?? token.chainId)
@@ -181,7 +185,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceE
         <Column className={styles.suggestionPrimaryContainer}>
           <Row gap="4" width="full">
             <Box className={styles.primaryText}>{token.name}</Box>
-            {token.onDefaultList && <VerifiedIcon className={styles.suggestionIcon} />}
+            <TokenSafetyIcon warning={checkWarning(token.address)} />
           </Row>
           <Box className={styles.secondaryText}>{token.symbol}</Box>
         </Column>

src/components/NavBar/index.tsx

@@ -3,16 +3,17 @@ import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { chainIdToBackendName } from 'graphql/data/util'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
+import { Bag } from './Bag'
 import { ChainSelector } from './ChainSelector'
 import { MenuDropdown } from './MenuDropdown'
 import { SearchBar } from './SearchBar'
-import { ShoppingBag } from './ShoppingBag'
 import * as styles from './style.css'
 
 interface MenuItemProps {
@@ -48,6 +49,8 @@ const PageTabs = () => {
     pathname.startsWith('/increase') ||
     pathname.startsWith('/find')
 
+  const isNftPage = useIsNftPage()
+
   return (
     <>
       <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
@@ -57,11 +60,11 @@ const PageTabs = () => {
         <Trans>Tokens</Trans>
       </MenuItem>
       {nftFlag === NftVariant.Enabled && (
-        <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
+        <MenuItem href="/nfts" isActive={isNftPage}>
           <Trans>NFTs</Trans>
         </MenuItem>
       )}
-      <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
+      <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
         <Trans>Pool</Trans>
       </MenuItem>
     </>
@@ -69,8 +72,7 @@ const PageTabs = () => {
 }
 
 const Navbar = () => {
-  const { pathname } = useLocation()
-  const showShoppingBag = pathname.startsWith('/nfts') || pathname.startsWith('/profile')
+  const isNftPage = useIsNftPage()
 
   return (
     <>
@@ -80,9 +82,11 @@ const Navbar = () => {
             <Box as="a" href="#/swap" className={styles.logoContainer}>
               <UniIcon width="48" height="48" className={styles.logo} />
             </Box>
-            <Box display={{ sm: 'flex', lg: 'none' }}>
-              <ChainSelector leftAlign={true} />
-            </Box>
+            {!isNftPage && (
+              <Box display={{ sm: 'flex', lg: 'none' }}>
+                <ChainSelector leftAlign={true} />
+              </Box>
+            )}
             <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
               <PageTabs />
             </Row>
@@ -98,10 +102,12 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {showShoppingBag && <ShoppingBag />}
-              <Box display={{ sm: 'none', lg: 'flex' }}>
-                <ChainSelector />
-              </Box>
+              {isNftPage && <Bag />}
+              {!isNftPage && (
+                <Box display={{ sm: 'none', lg: 'flex' }}>
+                  <ChainSelector />
+                </Box>
+              )}
 
               <Web3Status />
             </Row>

src/components/NavBar/style.css.ts

@@ -12,9 +12,6 @@ export const nav = style([
     zIndex: '2',
     background: 'backgroundFloating',
   }),
-  {
-    backdropFilter: 'blur(24px)',
-  },
 ])
 
 export const logoContainer = style([

src/components/NavigationTabs/index.tsx

@@ -9,12 +9,13 @@ import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
+import { flexRowNoWrap } from 'theme/styles'
 
 import Row, { RowBetween } from '../Row'
 import SettingsTab from '../Settings'
 
 const Tabs = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${flexRowNoWrap};
   align-items: center;
   border-radius: 3rem;
   justify-content: space-evenly;

src/components/NumericalInput/index.tsx

@@ -1,18 +1,17 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
 import styled from 'styled-components/macro'
 
 import { escapeRegExp } from '../../utils'
 
-const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; redesignFlag: boolean }>`
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
   color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   width: 0;
   position: relative;
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? 400 : 500)};
+  font-weight: 400;
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
+  background-color: transparent;
   font-size: ${({ fontSize }) => fontSize ?? '28px'};
   text-align: ${({ align }) => align && align};
   white-space: nowrap;
@@ -36,7 +35,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
   }
 
   ::placeholder {
-    color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text4)};
+    color: ${({ theme }) => theme.textTertiary};
   }
 `
 
@@ -56,8 +55,6 @@ export const Input = React.memo(function InnerInput({
   align?: 'right' | 'left'
   prependSymbol?: string | undefined
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
       onUserInput(nextUserInput)
@@ -68,7 +65,6 @@ export const Input = React.memo(function InnerInput({
     <StyledInput
       {...rest}
       value={prependSymbol && value ? prependSymbol + value : value}
-      redesignFlag={redesignFlagEnabled}
       onChange={(event) => {
         if (prependSymbol) {
           const value = event.target.value
@@ -91,7 +87,7 @@ export const Input = React.memo(function InnerInput({
       // text-specific options
       type="text"
       pattern="^[0-9]*[.,]?[0-9]*$"
-      placeholder={placeholder || (redesignFlagEnabled ? '0' : '0.0')}
+      placeholder={placeholder || '0'}
       minLength={1}
       maxLength={79}
       spellCheck="false"

src/components/Polling/ChainConnectivityWarning.tsx

@@ -2,22 +2,17 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 
-const BodyRow = styled.div<{ $redesignFlag?: boolean }>`
-  color: ${({ theme, $redesignFlag }) => ($redesignFlag ? theme.textPrimary : theme.black)};
+const BodyRow = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
   font-size: 12px;
-  font-weight: ${({ $redesignFlag }) => $redesignFlag && '400'};
-  font-size: ${({ $redesignFlag }) => ($redesignFlag ? '14px' : '12px')};
-  line-height: ${({ $redesignFlag }) => $redesignFlag && '20px'};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
 `
-const CautionOctagon = styled(AlertOctagon)`
-  color: ${({ theme }) => theme.deprecated_black};
-`
-
 const CautionTriangle = styled(AlertTriangle)`
   color: ${({ theme }) => theme.accentWarning};
 `
@@ -31,15 +26,15 @@ const TitleRow = styled.div`
   justify-content: flex-start;
   margin-bottom: 8px;
 `
-const TitleText = styled.div<{ redesignFlag?: boolean }>`
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textPrimary : theme.black)};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '500' : '600')};
+const TitleText = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 500;
   font-size: 16px;
-  line-height: ${({ redesignFlag }) => (redesignFlag ? '24px' : '20px')};
+  line-height: 24px;
   margin: 0px 12px;
 `
-const Wrapper = styled.div<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_yellow3)};
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.backgroundSurface};
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   bottom: 60px;
@@ -57,17 +52,16 @@ export function ChainConnectivityWarning() {
   const { chainId } = useWeb3React()
   const info = getChainInfoOrDefault(chainId)
   const label = info?.label
-  const redesignFlag = useRedesignFlag() === RedesignVariant.Enabled
 
   return (
-    <Wrapper redesignFlag={redesignFlag}>
+    <Wrapper>
       <TitleRow>
-        {redesignFlag ? <CautionTriangle /> : <CautionOctagon />}
-        <TitleText redesignFlag={redesignFlag}>
+        <CautionTriangle />
+        <TitleText>
           <Trans>Network Warning</Trans>
         </TitleText>
       </TitleRow>
-      <BodyRow $redesignFlag={redesignFlag}>
+      <BodyRow>
         {chainId === SupportedChainId.MAINNET ? (
           <Trans>You may have lost your network connection.</Trans>
         ) : (

src/components/Polling/index.tsx

@@ -4,6 +4,7 @@ import { RowFixed } from 'components/Row'
 import { getChainInfo } from 'constants/chainInfo'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import useGasPrice from 'hooks/useGasPrice'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import useMachineTimeMs from 'hooks/useMachineTime'
 import JSBI from 'jsbi'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
@@ -106,6 +107,7 @@ export default function Polling() {
   const machineTime = useMachineTimeMs(NETWORK_HEALTH_CHECK_MS)
   const blockTime = useCurrentBlockTimestamp()
   const theme = useTheme()
+  const isNftPage = useIsNftPage()
 
   const ethGasPrice = useGasPrice()
   const priceGwei = ethGasPrice ? JSBI.divide(ethGasPrice, JSBI.BigInt(1000000000)) : undefined
@@ -135,11 +137,11 @@ export default function Polling() {
 
   //TODO - chainlink gas oracle is really slow. Can we get a better data source?
 
-  return (
+  return isNftPage ? null : (
     <>
       <RowFixed>
         <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
-          <ExternalLink href={'https://etherscan.io/gastracker'}>
+          <ExternalLink href="https://etherscan.io/gastracker">
             {priceGwei ? (
               <RowFixed style={{ marginRight: '8px' }}>
                 <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>

src/components/Popover/index.tsx

@@ -1,13 +1,14 @@
 import { Options, Placement } from '@popperjs/core'
 import Portal from '@reach/portal'
 import useInterval from 'lib/hooks/useInterval'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { CSSProperties, 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: ${Z_INDEX.popover};
+  pointer-events: none;
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
@@ -74,11 +75,26 @@ const Arrow = styled.div`
 export interface PopoverProps {
   content: React.ReactNode
   show: boolean
-  children: React.ReactNode
+  children?: React.ReactNode
   placement?: Placement
+  offsetX?: number
+  offsetY?: number
+  hideArrow?: boolean
+  showInline?: boolean
+  style?: CSSProperties
 }
 
-export default function Popover({ content, show, children, placement = 'auto' }: PopoverProps) {
+export default function Popover({
+  content,
+  show,
+  children,
+  placement = 'auto',
+  offsetX = 8,
+  offsetY = 8,
+  hideArrow = false,
+  showInline = false,
+  style,
+}: PopoverProps) {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
@@ -88,12 +104,12 @@ export default function Popover({ content, show, children, placement = 'auto' }:
       placement,
       strategy: 'fixed',
       modifiers: [
-        { name: 'offset', options: { offset: [8, 8] } },
+        { name: 'offset', options: { offset: [offsetX, offsetY] } },
         { name: 'arrow', options: { element: arrowElement } },
         { name: 'preventOverflow', options: { padding: 8 } },
       ],
     }),
-    [arrowElement, placement]
+    [arrowElement, offsetX, offsetY, placement]
   )
 
   const { styles, update, attributes } = usePopper(referenceElement, popperElement, options)
@@ -103,18 +119,24 @@ export default function Popover({ content, show, children, placement = 'auto' }:
   }, [update])
   useInterval(updateCallback, show ? 100 : null)
 
-  return (
+  return showInline ? (
+    <PopoverContainer show={show}>{content}</PopoverContainer>
+  ) : (
     <>
-      <ReferenceElement ref={setReferenceElement as any}>{children}</ReferenceElement>
+      <ReferenceElement style={style} ref={setReferenceElement as any}>
+        {children}
+      </ReferenceElement>
       <Portal>
         <PopoverContainer show={show} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
           {content}
-          <Arrow
-            className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
-            ref={setArrowElement as any}
-            style={styles.arrow}
-            {...attributes.arrow}
-          />
+          {!hideArrow && (
+            <Arrow
+              className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
+              ref={setArrowElement as any}
+              style={styles.arrow}
+              {...attributes.arrow}
+            />
+          )}
         </PopoverContainer>
       </Portal>
     </>

src/components/Popups/ClaimPopup.tsx

@@ -121,7 +121,7 @@ export default function ClaimPopup() {
             </ThemedText.DeprecatedSubHeader>
           </AutoColumn>
           <AutoColumn style={{ zIndex: 10 }} justify="center">
-            <ButtonPrimary padding="8px" $borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>
+            <ButtonPrimary padding="8px" $borderRadius="8px" width="fit-content" onClick={handleToggleSelfClaimModal}>
               <Trans>Claim your UNI tokens</Trans>
             </ButtonPrimary>
           </AutoColumn>

src/components/PositionCard/V2.tsx

@@ -143,7 +143,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
               </RowFixed>
               {token0Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <Text fontSize={16} fontWeight={500} marginLeft="6px">
                     {token0Deposited?.toSignificant(6)}
                   </Text>
                   <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
@@ -161,7 +161,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
               </RowFixed>
               {token1Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <Text fontSize={16} fontWeight={500} marginLeft="6px">
                     {token1Deposited?.toSignificant(6)}
                   </Text>
                   <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />

src/components/PositionCard/index.tsx

@@ -18,7 +18,7 @@ import { ExternalLink, ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
-import { GreyCard, LightCard } from '../Card'
+import { GrayCard, LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
@@ -78,7 +78,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
   return (
     <>
       {userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
-        <GreyCard border={border}>
+        <GrayCard border={border}>
           <AutoColumn gap="12px">
             <FixedHeightRow>
               <RowFixed>
@@ -115,7 +115,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
                 </Text>
                 {token0Deposited ? (
                   <RowFixed>
-                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    <Text fontSize={16} fontWeight={500} marginLeft="6px">
                       {token0Deposited?.toSignificant(6)}
                     </Text>
                   </RowFixed>
@@ -129,7 +129,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
                 </Text>
                 {token1Deposited ? (
                   <RowFixed>
-                    <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                    <Text fontSize={16} fontWeight={500} marginLeft="6px">
                       {token1Deposited?.toSignificant(6)}
                     </Text>
                   </RowFixed>
@@ -139,7 +139,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
               </FixedHeightRow>
             </AutoColumn>
           </AutoColumn>
-        </GreyCard>
+        </GrayCard>
       ) : (
         <LightCard>
           <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>
@@ -254,7 +254,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
               </RowFixed>
               {token0Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <Text fontSize={16} fontWeight={500} marginLeft="6px">
                     {token0Deposited?.toSignificant(6)}
                   </Text>
                   <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
@@ -272,7 +272,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
               </RowFixed>
               {token1Deposited ? (
                 <RowFixed>
-                  <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  <Text fontSize={16} fontWeight={500} marginLeft="6px">
                     {token1Deposited?.toSignificant(6)}
                   </Text>
                   <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />

src/components/PositionList/index.tsx

@@ -1,6 +1,5 @@
 import { Trans } from '@lingui/macro'
 import PositionListItem from 'components/PositionListItem'
-import Toggle from 'components/Toggle'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
@@ -10,7 +9,8 @@ const DesktopHeader = styled.div`
   display: none;
   font-size: 14px;
   font-weight: 500;
-  padding: 8px;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     align-items: center;
@@ -25,12 +25,14 @@ const DesktopHeader = styled.div`
 
 const MobileHeader = styled.div`
   font-weight: medium;
-  font-size: 16px;
-  font-weight: 500;
   padding: 8px;
+  font-weight: 500;
+  padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     display: none;
@@ -38,8 +40,8 @@ const MobileHeader = styled.div`
 
   @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
     display: flex;
-    flex-direction: column;
-    align-items: start;
+    flex-direction: row;
+    justify-content: space-between;
   }
 `
 
@@ -49,16 +51,12 @@ const ToggleWrap = styled.div`
   align-items: center;
 `
 
-const ToggleLabel = styled.div`
-  opacity: ${({ theme }) => theme.opacity.hover};
-  margin-right: 10px;
-`
-
-const MobileTogglePosition = styled.div`
-  @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
-    position: absolute;
-    right: 20px;
-  }
+const ToggleLabel = styled.button`
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: ${({ theme }) => theme.accentAction};
+  font-size: 1rem;
 `
 
 type PositionListProps = React.PropsWithChildren<{
@@ -79,34 +77,26 @@ export default function PositionList({
           <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
-        <ToggleWrap>
-          <ToggleLabel>
-            <Trans>Show closed positions</Trans>
-          </ToggleLabel>
-          <Toggle
-            id="desktop-hide-closed-positions"
-            isActive={!userHideClosedPositions}
-            toggle={() => {
-              setUserHideClosedPositions(!userHideClosedPositions)
-            }}
-          />
-        </ToggleWrap>
+
+        <ToggleLabel
+          id="desktop-hide-closed-positions"
+          onClick={() => {
+            setUserHideClosedPositions(!userHideClosedPositions)
+          }}
+        >
+          {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
+        </ToggleLabel>
       </DesktopHeader>
       <MobileHeader>
         <Trans>Your positions</Trans>
         <ToggleWrap>
-          <ToggleLabel>
-            <Trans>Show closed positions</Trans>
+          <ToggleLabel
+            onClick={() => {
+              setUserHideClosedPositions(!userHideClosedPositions)
+            }}
+          >
+            {userHideClosedPositions ? <Trans>Show closed positions</Trans> : <Trans>Hide closed positions</Trans>}
           </ToggleLabel>
-          <MobileTogglePosition>
-            <Toggle
-              id="mobile-hide-closed-positions"
-              isActive={!userHideClosedPositions}
-              toggle={() => {
-                setUserHideClosedPositions(!userHideClosedPositions)
-              }}
-            />
-          </MobileTogglePosition>
         </ToggleWrap>
       </MobileHeader>
       {positions.map((p) => {

src/components/PositionListItem/index.tsx

@@ -23,29 +23,22 @@ import { DAI, USDC_MAINNET, USDT, WBTC, WRAPPED_NATIVE_CURRENCY } from '../../co
 
 const LinkRow = styled(Link)`
   align-items: center;
-  border-radius: 20px;
   display: flex;
   cursor: pointer;
   user-select: none;
   display: flex;
   flex-direction: column;
-
   justify-content: space-between;
   color: ${({ theme }) => theme.deprecated_text1};
-  margin: 8px 0;
   padding: 16px;
   text-decoration: none;
   font-weight: 500;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
 
-  &:last-of-type {
-    margin: 8px 0 0 0;
-  }
   & > div:not(:first-child) {
     text-align: center;
   }
   :hover {
-    background-color: ${({ theme }) => theme.deprecated_bg2};
+    background-color: ${({ theme }) => theme.hoverDefault};
   }
 
   @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
@@ -54,7 +47,7 @@ const LinkRow = styled(Link)`
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     flex-direction: column;
-    row-gap: 12px;
+    row-gap: 8px;
   `};
 `
 
@@ -74,29 +67,17 @@ const RangeLineItem = styled(DataLineItem)`
   display: flex;
   flex-direction: row;
   align-items: center;
-
   margin-top: 4px;
   width: 100%;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-    border-radius: 12px;
-    padding: 8px 0;
-`};
 `
 
 const DoubleArrow = styled.span`
   margin: 0 2px;
   color: ${({ theme }) => theme.deprecated_text3};
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    margin: 4px;
-    padding: 20px;
-  `};
 `
 
 const RangeText = styled.span`
-  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem 0.25rem;
   border-radius: 8px;
 `
 
@@ -123,7 +104,7 @@ const DataText = styled.div`
   font-size: 18px;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    font-size: 14px;
+    font-size: 18px;
   `};
 `
 

src/components/PrivacyPolicy/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { sendEvent } from 'components/analytics'
-import Card, { DarkGreyCard } from 'components/Card'
+import Card, { DarkGrayCard } from 'components/Card'
 import Row, { AutoRow, RowBetween } from 'components/Row'
 import { useEffect, useRef } from 'react'
 import { ArrowDown, Info, X } from 'react-feather'
@@ -124,11 +124,11 @@ export function PrivacyPolicy() {
       <AutoColumn gap="16px">
         <AutoColumn gap="8px" style={{ width: '100%' }}>
           <StyledExternalCard>
-            <ExternalLink href={'https://uniswap.org/terms-of-service'}>
+            <ExternalLink href="https://uniswap.org/terms-of-service">
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
+                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
                     <Trans>Uniswap Labs&apos; Terms of Service</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
@@ -137,12 +137,12 @@ export function PrivacyPolicy() {
             </ExternalLink>
           </StyledExternalCard>
           <StyledExternalCard>
-            <ExternalLink href={'https://uniswap.org/disclaimer/'}>
+            <ExternalLink href="https://uniswap.org/privacy-policy/">
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_primaryText1'}>
-                    <Trans>Protocol Disclaimer</Trans>
+                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
+                    <Trans>Privacy Policy</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
                 <StyledLinkOut size={20} />
@@ -155,17 +155,17 @@ export function PrivacyPolicy() {
         </ThemedText.DeprecatedMain>
         <AutoColumn gap="12px">
           {EXTERNAL_APIS.map(({ name, description }, i) => (
-            <DarkGreyCard key={i}>
+            <DarkGrayCard key={i}>
               <AutoColumn gap="8px">
                 <AutoRow gap="4px">
                   <Info size={18} />
-                  <ThemedText.DeprecatedMain fontSize={14} color={'deprecated_text1'}>
+                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">
                     {name}
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
                 <ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain>
               </AutoColumn>
-            </DarkGreyCard>
+            </DarkGrayCard>
           ))}
           <ThemedText.DeprecatedBody fontSize={12}>
             <Row justify="center" marginBottom="1rem">

src/components/ProgressSteps/index.tsx

@@ -55,7 +55,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
   const theme = useTheme()
 
   return (
-    <Wrapper justify={'center'} {...rest}>
+    <Wrapper justify="center" {...rest}>
       <Grouping>
         {steps.map((step, i) => {
           return (

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -99,9 +99,9 @@ export default function RoutingDiagram({
     <Wrapper>
       {routes.map((entry, index) => (
         <RouteContainerRow key={index}>
-          <CurrencyLogo currency={tokenIn} size={'20px'} />
+          <CurrencyLogo currency={tokenIn} size="20px" />
           <Route entry={entry} />
-          <CurrencyLogo currency={tokenOut} size={'20px'} />
+          <CurrencyLogo currency={tokenOut} size="20px" />
         </RouteContainerRow>
       ))}
     </Wrapper>
@@ -117,7 +117,7 @@ function Route({ entry: { percent, path, protocol } }: { entry: RoutingDiagramEn
       <OpaqueBadge>
         {protocol === Protocol.MIXED ? (
           <MixedProtocolBadge>
-            <BadgeText fontSize={12}>{'V3 + V2'}</BadgeText>
+            <BadgeText fontSize={12}>V3 + V2</BadgeText>
           </MixedProtocolBadge>
         ) : (
           <ProtocolBadge>

src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap

@@ -110,7 +110,7 @@ exports[`renders multi route 1`] = `
 }
 
 .c6 path {
-  stroke: #99A1BD;
+  stroke: #98A1C0;
 }
 
 .c8 {
@@ -129,9 +129,9 @@ exports[`renders multi route 1`] = `
 }
 
 .c9 {
-  background-color: #C9D0E7;
+  background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5E6887;
+  color: #7780A0;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;
@@ -348,7 +348,7 @@ exports[`renders single route 1`] = `
 }
 
 .c6 path {
-  stroke: #99A1BD;
+  stroke: #98A1C0;
 }
 
 .c8 {
@@ -367,9 +367,9 @@ exports[`renders single route 1`] = `
 }
 
 .c9 {
-  background-color: #C9D0E7;
+  background-color: #B8C0DC;
   border-radius: 4px;
-  color: #5E6887;
+  color: #7780A0;
   font-size: 10px;
   padding: 2px 4px;
   z-index: 1021;

src/components/SearchModal/BlockedToken.tsx

@@ -1,71 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
-import { ButtonPrimary } from 'components/Button'
-import { AlertCircle, ArrowLeft } from 'react-feather'
-import styled from 'styled-components/macro'
-import { CloseIcon, ThemedText } from 'theme'
-
-import TokenImportCard from './TokenImportCard'
-
-const Wrapper = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  height: 100%;
-  width: 100%;
-`
-const Button = styled(ButtonPrimary)`
-  margin-top: 1em;
-  padding: 10px 1em;
-`
-const Content = styled.div`
-  padding: 1em;
-`
-const Copy = styled(ThemedText.DeprecatedBody)`
-  text-align: center;
-  margin: 0 2em 1em !important;
-  font-weight: 400;
-  font-size: 16px;
-`
-const Header = styled.div`
-  align-items: center;
-  display: flex;
-  gap: 14px;
-  justify-content: space-between;
-  padding: 20px;
-  width: 100%;
-`
-const Icon = styled(AlertCircle)`
-  stroke: ${({ theme }) => theme.deprecated_text2};
-  width: 48px;
-  height: 48px;
-`
-interface BlockedTokenProps {
-  onBack: (() => void) | undefined
-  onDismiss: (() => void) | undefined
-  blockedTokens: Token[]
-}
-
-const BlockedToken = ({ onBack, onDismiss, blockedTokens }: BlockedTokenProps) => (
-  <Wrapper>
-    <Header>
-      {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
-      <ThemedText.DeprecatedMediumHeader>
-        <Trans>Token not supported</Trans>
-      </ThemedText.DeprecatedMediumHeader>
-      {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
-    </Header>
-    <Icon />
-    <Content>
-      <Copy>
-        <Trans>This token is not supported in the Uniswap Labs app</Trans>
-      </Copy>
-      <TokenImportCard token={blockedTokens[0]} />
-      <Button disabled>
-        <Trans>Import</Trans>
-      </Button>
-    </Content>
-  </Wrapper>
-)
-export default BlockedToken

src/components/SearchModal/CommonBases.tsx

@@ -1,13 +1,12 @@
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import { Currency } from '@uniswap/sdk-core'
-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'
 import { COMMON_BASES } from 'constants/routing'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
+import { getTokenAddress } from 'lib/utils/analytics'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { currencyId } from 'utils/currencyId'
@@ -18,17 +17,9 @@ const MobileWrapper = styled(AutoColumn)`
   `};
 `
 
-const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
-  border: 1px solid
-    ${({ theme, disable, redesignFlag }) =>
-      disable
-        ? redesignFlag
-          ? theme.accentAction
-          : 'transparent'
-        : redesignFlag
-        ? theme.backgroundOutline
-        : theme.deprecated_bg3};
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '10px')};
+const BaseWrapper = styled.div<{ disable?: boolean }>`
+  border: 1px solid ${({ theme, disable }) => (disable ? theme.accentAction : theme.backgroundOutline)};
+  border-radius: 16px;
   display: flex;
   padding: 6px;
   padding-right: 12px;
@@ -36,15 +27,11 @@ const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
   align-items: center;
   :hover {
     cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable, redesignFlag }) =>
-      (redesignFlag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
+    background-color: ${({ theme }) => theme.hoverDefault};
   }
 
-  color: ${({ theme, disable, redesignFlag }) =>
-    disable && (redesignFlag ? theme.accentAction : theme.deprecated_text3)};
-  background-color: ${({ theme, disable, redesignFlag }) =>
-    disable && (redesignFlag ? theme.accentActionSoft : theme.deprecated_bg3)};
-  filter: ${({ disable, redesignFlag }) => disable && !redesignFlag && 'grayscale(1)'};
+  color: ${({ theme, disable }) => disable && theme.accentAction};
+  background-color: ${({ theme, disable }) => disable && theme.accentActionSoft};
 `
 
 const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({
@@ -73,8 +60,6 @@ export default function CommonBases({
   isAddressSearch: string | false
 }) {
   const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   return bases.length > 0 ? (
     <MobileWrapper gap="md">
@@ -84,7 +69,7 @@ export default function CommonBases({
 
           return (
             <TraceEvent
-              events={[Event.onClick, Event.onKeyPress]}
+              events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
               name={EventName.TOKEN_SELECTED}
               properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
               element={ElementName.COMMON_BASES_CURRENCY_BUTTON}
@@ -95,7 +80,6 @@ export default function CommonBases({
                 onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
                 onClick={() => !isSelected && onSelect(currency)}
                 disable={isSelected}
-                redesignFlag={redesignFlagEnabled}
                 key={currencyId(currency)}
               >
                 <CurrencyLogoFromList currency={currency} />

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

@@ -2,8 +2,26 @@
 
 exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
 <DocumentFragment>
-  .c7 {
-  color: #99A1BD;
+  .c9 {
+  color: #98A1C0;
+}
+
+.c7 {
+  margin-left: 4px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c8 {
+  width: 1em;
+  height: 1em;
+  color: #98A1C0;
 }
 
 .c4 {
@@ -55,7 +73,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: space-between;
 }
 
-.c8 {
+.c10 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -72,7 +90,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 }
 
 .c3:hover {
-  background-color: #C9D0E714;
+  background-color: #B8C0DC14;
 }
 
 .c6 {
@@ -111,9 +129,41 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             >
               Dai Stablecoin
             </div>
+            <div
+              class="c7"
+            >
+              <svg
+                class="c8"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="9"
+                  y2="13"
+                />
+                <line
+                  x1="12"
+                  x2="12.01"
+                  y1="17"
+                  y2="17"
+                />
+              </svg>
+            </div>
           </div>
           <div
-            class="c7 css-1j6a53a"
+            class="c9 css-1j6a53a"
           >
             DAI
           </div>
@@ -122,7 +172,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c8"
+            class="c0 c1 c10"
             style="justify-self: flex-end;"
           />
         </div>
@@ -150,9 +200,41 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             >
               USD//C
             </div>
+            <div
+              class="c7"
+            >
+              <svg
+                class="c8"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="9"
+                  y2="13"
+                />
+                <line
+                  x1="12"
+                  x2="12.01"
+                  y1="17"
+                  y2="17"
+                />
+              </svg>
+            </div>
           </div>
           <div
-            class="c7 css-1j6a53a"
+            class="c9 css-1j6a53a"
           >
             USDC
           </div>
@@ -161,7 +243,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c8"
+            class="c0 c1 c10"
             style="justify-self: flex-end;"
           />
         </div>
@@ -189,9 +271,41 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             >
               Wrapped BTC
             </div>
+            <div
+              class="c7"
+            >
+              <svg
+                class="c8"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="9"
+                  y2="13"
+                />
+                <line
+                  x1="12"
+                  x2="12.01"
+                  y1="17"
+                  y2="17"
+                />
+              </svg>
+            </div>
           </div>
           <div
-            class="c7 css-1j6a53a"
+            class="c9 css-1j6a53a"
           >
             WBTC
           </div>
@@ -200,7 +314,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c8"
+            class="c0 c1 c10"
             style="justify-self: flex-end;"
           />
         </div>

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

@@ -52,8 +52,8 @@ it('renders loading rows when isLoading is true', () => {
       showImportView={noOp}
       setImportToken={noOp}
       isLoading={true}
-      searchQuery={''}
-      isAddressSearch={''}
+      searchQuery=""
+      isAddressSearch=""
     />
   )
   expect(asFragment()).toMatchSnapshot()
@@ -70,8 +70,8 @@ it('renders currency rows correctly when currencies list is non-empty', () => {
       showImportView={noOp}
       setImportToken={noOp}
       isLoading={false}
-      searchQuery={''}
-      isAddressSearch={''}
+      searchQuery=""
+      isAddressSearch=""
     />
   )
   expect(asFragment()).toMatchSnapshot()

src/components/SearchModal/CurrencyList/index.tsx

@@ -1,11 +1,9 @@
-import { Trans } from '@lingui/macro'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-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 { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { XOctagon } from 'react-feather'
 import { Check } from 'react-feather'
@@ -15,10 +13,8 @@ import styled from 'styled-components/macro'
 
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { useCurrencyBalance } from '../../../state/connection/hooks'
-import { useCombinedActiveList } from '../../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
 import { ThemedText } from '../../../theme'
-import { isTokenOnList } from '../../../utils'
 import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../CurrencyLogo'
 import Loader from '../../Loader'
@@ -128,26 +124,22 @@ export function CurrencyRow({
 }) {
   const { account } = useWeb3React()
   const key = currencyKey(currency)
-  const selectedTokenList = useCombinedActiveList()
-  const isOnSelectedList = isTokenOnList(selectedTokenList, currency.isToken ? currency : undefined)
   const customAdded = useIsUserAddedToken(currency)
   const balance = useCurrencyBalance(account ?? undefined, currency)
   const warning = currency.isNative ? null : checkWarning(currency.address)
-  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
   const isBlockedToken = !!warning && !warning.canProceed
   const blockedTokenOpacity = '0.6'
 
   // only show add or remove buttons if not on selected list
   return (
     <TraceEvent
-      events={[Event.onClick, Event.onKeyPress]}
+      events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
       name={EventName.TOKEN_SELECTED}
       properties={{ is_imported_by_user: customAdded, ...eventProperties }}
       element={ElementName.TOKEN_SELECTOR_ROW}
     >
       <MenuItem
         tabIndex={0}
-        redesignFlag={redesignFlagEnabled}
         style={style}
         className={`token-item-${key}`}
         onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect(!!warning) : null)}
@@ -159,7 +151,7 @@ export function CurrencyRow({
         <Column>
           <CurrencyLogo
             currency={currency}
-            size={'36px'}
+            size="36px"
             style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}
           />
         </Column>
@@ -169,12 +161,8 @@ export function CurrencyRow({
             <TokenSafetyIcon warning={warning} />
             {isBlockedToken && <BlockedTokenIcon />}
           </Row>
-          <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
-            {!currency.isNative && !isOnSelectedList && customAdded ? (
-              <Trans>{currency.symbol} • Added by user</Trans>
-            ) : (
-              currency.symbol
-            )}
+          <ThemedText.DeprecatedDarkGray ml="0px" fontSize="12px" fontWeight={300}>
+            {currency.symbol}
           </ThemedText.DeprecatedDarkGray>
         </AutoColumn>
         <Column>
@@ -185,10 +173,9 @@ export function CurrencyRow({
         {showCurrencyAmount ? (
           <RowFixed style={{ justifySelf: 'flex-end' }}>
             {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
-            {redesignFlagEnabled && isSelected && <CheckIcon />}
+            {isSelected && <CheckIcon />}
           </RowFixed>
         ) : (
-          redesignFlagEnabled &&
           isSelected && (
             <RowFixed style={{ justifySelf: 'flex-end' }}>
               <CheckIcon />

src/components/SearchModal/CurrencySearch.tsx

@@ -1,11 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
+import { Trace } from '@uniswap/analytics'
+import { EventName, ModalName } from '@uniswap/analytics-events'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-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'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useToggle from 'hooks/useToggle'
@@ -19,7 +18,7 @@ import { Text } from 'rebass'
 import { useAllTokenBalances } from 'state/connection/hooks'
 import styled, { useTheme } from 'styled-components/macro'
 
-import { useAllTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
+import { useActiveTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
 import { CloseIcon, ThemedText } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'
@@ -29,8 +28,8 @@ import { CurrencyRow, formatAnalyticsEventProperties } from './CurrencyList'
 import CurrencyList from './CurrencyList'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 
-const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
+const ContentWrapper = styled(Column)`
+  background-color: ${({ theme }) => theme.backgroundSurface};
   width: 100%;
   flex: 1 1;
   position: relative;
@@ -57,9 +56,6 @@ export function CurrencySearch({
   onDismiss,
   isOpen,
 }: CurrencySearchProps) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
   const { chainId } = useWeb3React()
   const theme = useTheme()
 
@@ -71,7 +67,8 @@ export function CurrencySearch({
   const [searchQuery, setSearchQuery] = useState<string>('')
   const debouncedQuery = useDebounce(searchQuery, 200)
 
-  const allTokens = useAllTokens()
+  // Only display 'imported' tokens when the search filter has input
+  const defaultTokens = useActiveTokens(debouncedQuery.length > 0)
 
   // if they input an address, use it
   const isAddressSearch = isAddress(debouncedQuery)
@@ -91,8 +88,8 @@ export function CurrencySearch({
   }, [isAddressSearch])
 
   const filteredTokens: Token[] = useMemo(() => {
-    return Object.values(allTokens).filter(getTokenFilter(debouncedQuery))
-  }, [allTokens, debouncedQuery])
+    return Object.values(defaultTokens).filter(getTokenFilter(debouncedQuery))
+  }, [defaultTokens, debouncedQuery])
 
   const [balances, balancesAreLoading] = useAllTokenBalances()
   const sortedTokens: Token[] = useMemo(
@@ -176,7 +173,7 @@ export function CurrencySearch({
   }, [])
 
   return (
-    <ContentWrapper redesignFlag={redesignFlagEnabled}>
+    <ContentWrapper>
       <Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
         <PaddedColumn gap="16px">
           <RowBetween>
@@ -191,7 +188,6 @@ export function CurrencySearch({
               id="token-search-input"
               placeholder={t`Search name or paste address`}
               autoComplete="off"
-              redesignFlag={redesignFlagEnabled}
               value={searchQuery}
               ref={inputRef as RefObject<HTMLInputElement>}
               onChange={handleInput}
@@ -208,7 +204,7 @@ export function CurrencySearch({
             />
           )}
         </PaddedColumn>
-        <Separator redesignFlag={redesignFlagEnabled} />
+        <Separator />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
             <CurrencyRow

src/components/SearchModal/CurrencySearchModal.tsx

@@ -1,18 +1,12 @@
 import { Currency, Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists'
 import TokenSafety from 'components/TokenSafety'
-import usePrevious from 'hooks/usePrevious'
 import { memo, useCallback, useEffect, useState } from 'react'
-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'
-import { ImportToken } from './ImportToken'
-import Manage from './Manage'
 
 interface CurrencySearchModalProps {
   isOpen: boolean
@@ -27,9 +21,7 @@ interface CurrencySearchModalProps {
 
 export enum CurrencyModalView {
   search,
-  manage,
   importToken,
-  importList,
   tokenSafety,
 }
 
@@ -69,25 +61,9 @@ export default memo(function CurrencySearchModal({
     },
     [onDismiss, onCurrencySelect, userAddedTokens]
   )
-
-  // for token import view
-  const prevView = usePrevious(modalView)
-
-  // used for import token flow
-  const [importToken, setImportToken] = useState<Token | undefined>()
-
-  // used for import list
-  const [importList, setImportList] = useState<TokenList | undefined>()
-  const [listURL, setListUrl] = useState<string | undefined>()
-
   // used for token safety
   const [warningToken, setWarningToken] = useState<Token | undefined>()
 
-  const handleBackImport = useCallback(
-    () => setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
-    [setModalView, prevView]
-  )
-
   const { height: windowHeight } = useWindowSize()
   // change min height if not searching
   let modalHeight: number | undefined = 80
@@ -124,38 +100,6 @@ export default memo(function CurrencySearchModal({
         )
       }
       break
-    case CurrencyModalView.importToken:
-      if (importToken) {
-        modalHeight = undefined
-        showTokenSafetySpeedbump(importToken)
-        content = (
-          <ImportToken
-            tokens={[importToken]}
-            onDismiss={onDismiss}
-            list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
-            onBack={handleBackImport}
-            handleCurrencySelect={handleCurrencySelect}
-          />
-        )
-      }
-      break
-    case CurrencyModalView.importList:
-      modalHeight = 40
-      if (importList && listURL) {
-        content = <ImportList list={importList} listURL={listURL} onDismiss={onDismiss} setModalView={setModalView} />
-      }
-      break
-    case CurrencyModalView.manage:
-      content = (
-        <Manage
-          onDismiss={onDismiss}
-          setModalView={setModalView}
-          setImportToken={setImportToken}
-          setImportList={setImportList}
-          setListUrl={setListUrl}
-        />
-      )
-      break
   }
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={modalHeight} minHeight={modalHeight}>

src/components/SearchModal/ImportList.tsx

@@ -1,167 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { TokenList } from '@uniswap/token-lists'
-import { sendEvent } from 'components/analytics'
-import { ButtonPrimary } from 'components/Button'
-import Card from 'components/Card'
-import { AutoColumn } from 'components/Column'
-import ListLogo from 'components/ListLogo'
-import { AutoRow, RowBetween, RowFixed } from 'components/Row'
-import { SectionBreak } from 'components/swap/styleds'
-import { useFetchListCallback } from 'hooks/useFetchListCallback'
-import { transparentize } from 'polished'
-import { useCallback, useState } from 'react'
-import { AlertTriangle, ArrowLeft } from 'react-feather'
-import { useAppDispatch } from 'state/hooks'
-import { enableList, removeList } from 'state/lists/actions'
-import { useAllLists } from 'state/lists/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { CloseIcon, ThemedText } from 'theme'
-
-import { ExternalLink } from '../../theme'
-import { CurrencyModalView } from './CurrencySearchModal'
-import { Checkbox, PaddedColumn, TextDot } from './styleds'
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  overflow: auto;
-`
-
-interface ImportProps {
-  listURL: string
-  list: TokenList
-  onDismiss: () => void
-  setModalView: (view: CurrencyModalView) => void
-}
-
-export function ImportList({ listURL, list, setModalView, onDismiss }: ImportProps) {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-
-  // user must accept
-  const [confirmed, setConfirmed] = useState(false)
-
-  const lists = useAllLists()
-  const fetchList = useFetchListCallback()
-
-  // monitor is list is loading
-  const adding = Boolean(lists[listURL]?.loadingRequestId)
-  const [addError, setAddError] = useState<string | null>(null)
-
-  const handleAddList = useCallback(() => {
-    if (adding) return
-    setAddError(null)
-    fetchList(listURL)
-      .then(() => {
-        sendEvent({
-          category: 'Lists',
-          action: 'Add List',
-          label: listURL,
-        })
-
-        // turn list on
-        dispatch(enableList(listURL))
-        // go back to lists
-        setModalView(CurrencyModalView.manage)
-      })
-      .catch((error) => {
-        sendEvent({
-          category: 'Lists',
-          action: 'Add List Failed',
-          label: listURL,
-        })
-        setAddError(error.message)
-        dispatch(removeList(listURL))
-      })
-  }, [adding, dispatch, fetchList, listURL, setModalView])
-
-  return (
-    <Wrapper>
-      <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
-        <RowBetween>
-          <ArrowLeft style={{ cursor: 'pointer' }} onClick={() => setModalView(CurrencyModalView.manage)} />
-          <ThemedText.DeprecatedMediumHeader>
-            <Trans>Import List</Trans>
-          </ThemedText.DeprecatedMediumHeader>
-          <CloseIcon onClick={onDismiss} />
-        </RowBetween>
-      </PaddedColumn>
-      <SectionBreak />
-      <PaddedColumn gap="md">
-        <AutoColumn gap="md">
-          <Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
-            <RowBetween>
-              <RowFixed>
-                {list.logoURI && <ListLogo logoURI={list.logoURI} size="40px" />}
-                <AutoColumn gap="sm" style={{ marginLeft: '20px' }}>
-                  <RowFixed>
-                    <ThemedText.DeprecatedBody fontWeight={600} mr="6px">
-                      {list.name}
-                    </ThemedText.DeprecatedBody>
-                    <TextDot />
-                    <ThemedText.DeprecatedMain fontSize={'16px'} ml="6px">
-                      <Trans>{list.tokens.length} tokens</Trans>
-                    </ThemedText.DeprecatedMain>
-                  </RowFixed>
-                  <ExternalLink href={`https://tokenlists.org/token-list?url=${listURL}`}>
-                    <ThemedText.DeprecatedMain fontSize={'12px'} color={theme.deprecated_blue1}>
-                      {listURL}
-                    </ThemedText.DeprecatedMain>
-                  </ExternalLink>
-                </AutoColumn>
-              </RowFixed>
-            </RowBetween>
-          </Card>
-          <Card style={{ backgroundColor: transparentize(0.8, theme.deprecated_red1) }}>
-            <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-              <AlertTriangle stroke={theme.deprecated_red1} size={32} />
-              <ThemedText.DeprecatedBody fontWeight={500} fontSize={20} color={theme.deprecated_red1}>
-                <Trans>Import at your own risk</Trans>
-              </ThemedText.DeprecatedBody>
-            </AutoColumn>
-
-            <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-              <ThemedText.DeprecatedBody fontWeight={500} color={theme.deprecated_red1}>
-                <Trans>
-                  By adding this list you are implicitly trusting that the data is correct. Anyone can create a list,
-                  including creating fake versions of existing lists and lists that claim to represent projects that do
-                  not have one.
-                </Trans>
-              </ThemedText.DeprecatedBody>
-              <ThemedText.DeprecatedBody fontWeight={600} color={theme.deprecated_red1}>
-                <Trans>If you purchase a token from this list, you may not be able to sell it back.</Trans>
-              </ThemedText.DeprecatedBody>
-            </AutoColumn>
-            <AutoRow justify="center" style={{ cursor: 'pointer' }} onClick={() => setConfirmed(!confirmed)}>
-              <Checkbox
-                name="confirmed"
-                type="checkbox"
-                checked={confirmed}
-                onChange={() => setConfirmed(!confirmed)}
-              />
-              <ThemedText.DeprecatedBody ml="10px" fontSize="16px" color={theme.deprecated_red1} fontWeight={500}>
-                <Trans>I understand</Trans>
-              </ThemedText.DeprecatedBody>
-            </AutoRow>
-          </Card>
-
-          <ButtonPrimary
-            disabled={!confirmed}
-            altDisabledStyle={true}
-            $borderRadius="20px"
-            padding="10px 1rem"
-            onClick={handleAddList}
-          >
-            <Trans>Import</Trans>
-          </ButtonPrimary>
-          {addError ? (
-            <ThemedText.DeprecatedError title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
-              {addError}
-            </ThemedText.DeprecatedError>
-          ) : null}
-        </AutoColumn>
-        {/* </Card> */}
-      </PaddedColumn>
-    </Wrapper>
-  )
-}

src/components/SearchModal/ImportRow.tsx

@@ -1,106 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
-import { ButtonPrimary } from 'components/Button'
-import { AutoColumn } from 'components/Column'
-import CurrencyLogo from 'components/CurrencyLogo'
-import ListLogo from 'components/ListLogo'
-import { AutoRow, RowFixed } from 'components/Row'
-import { useIsTokenActive, useIsUserAddedToken } from 'hooks/Tokens'
-import { CSSProperties } from 'react'
-import { CheckCircle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
-
-import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
-
-const TokenSection = styled.div<{ dim?: boolean }>`
-  padding: 4px 20px;
-  height: 56px;
-  display: grid;
-  grid-template-columns: auto minmax(auto, 1fr) auto;
-  grid-gap: 16px;
-  align-items: center;
-
-  opacity: ${({ dim }) => (dim ? '0.4' : '1')};
-`
-
-const CheckIcon = styled(CheckCircle)`
-  height: 16px;
-  width: 16px;
-  margin-right: 6px;
-  stroke: ${({ theme }) => theme.deprecated_green1};
-`
-
-const NameOverflow = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 140px;
-  font-size: 12px;
-`
-
-export default function ImportRow({
-  token,
-  style,
-  dim,
-  showImportView,
-  setImportToken,
-}: {
-  token: Token
-  style?: CSSProperties
-  dim?: boolean
-  showImportView: () => void
-  setImportToken: (token: Token) => void
-}) {
-  const theme = useTheme()
-
-  // check if already active on list or local storage tokens
-  const isAdded = useIsUserAddedToken(token)
-  const isActive = useIsTokenActive(token)
-
-  const list = token instanceof WrappedTokenInfo ? token.list : undefined
-
-  return (
-    <TokenSection tabIndex={0} style={style}>
-      <CurrencyLogo currency={token} size={'24px'} style={{ opacity: dim ? '0.6' : '1' }} />
-      <AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
-        <AutoRow>
-          <ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
-          <ThemedText.DeprecatedDarkGray ml="8px" fontWeight={300}>
-            <NameOverflow title={token.name}>{token.name}</NameOverflow>
-          </ThemedText.DeprecatedDarkGray>
-        </AutoRow>
-        {list && list.logoURI && (
-          <RowFixed>
-            <ThemedText.DeprecatedSmall mr="4px" color={theme.deprecated_text3}>
-              <Trans>via {list.name} </Trans>
-            </ThemedText.DeprecatedSmall>
-            <ListLogo logoURI={list.logoURI} size="12px" />
-          </RowFixed>
-        )}
-      </AutoColumn>
-      {!isActive && !isAdded ? (
-        <ButtonPrimary
-          width="fit-content"
-          padding="6px 12px"
-          fontWeight={500}
-          fontSize="14px"
-          onClick={() => {
-            setImportToken && setImportToken(token)
-            showImportView()
-          }}
-        >
-          <Trans>Import</Trans>
-        </ButtonPrimary>
-      ) : (
-        <RowFixed style={{ minWidth: 'fit-content' }}>
-          <CheckIcon />
-          <ThemedText.DeprecatedMain color={theme.deprecated_green1}>
-            <Trans>Active</Trans>
-          </ThemedText.DeprecatedMain>
-        </RowFixed>
-      )}
-    </TokenSection>
-  )
-}

src/components/SearchModal/ImportToken.tsx

@@ -1,100 +0,0 @@
-import { Plural, Trans } from '@lingui/macro'
-import { Currency, Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists'
-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'
-import { SectionBreak } from 'components/swap/styleds'
-import { useUnsupportedTokens } from 'hooks/Tokens'
-import { AlertCircle, ArrowLeft } from 'react-feather'
-import { useAddUserToken } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { CloseIcon, ThemedText } from 'theme'
-
-import BlockedToken from './BlockedToken'
-import { PaddedColumn } from './styleds'
-import TokenImportCard from './TokenImportCard'
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  overflow: auto;
-`
-
-interface ImportProps {
-  tokens: Token[]
-  list?: TokenList
-  onBack?: () => void
-  onDismiss?: () => void
-  handleCurrencySelect?: (currency: Currency) => void
-}
-
-const formatAnalyticsEventProperties = (tokens: Token[]) => ({
-  token_symbols: tokens.map((token) => token?.symbol),
-  token_addresses: tokens.map((token) => token?.address),
-  token_chain_ids: tokens.map((token) => token?.chainId),
-})
-
-export function ImportToken(props: ImportProps) {
-  const { tokens, list, onBack, onDismiss, handleCurrencySelect } = props
-  const theme = useTheme()
-
-  const addToken = useAddUserToken()
-
-  const unsupportedTokens = useUnsupportedTokens()
-  const unsupportedSet = new Set(Object.keys(unsupportedTokens))
-  const intersection = new Set(tokens.filter((token) => unsupportedSet.has(token.address)))
-  if (intersection.size > 0) {
-    return <BlockedToken onBack={onBack} onDismiss={onDismiss} blockedTokens={Array.from(intersection)} />
-  }
-
-  return (
-    <Wrapper>
-      <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
-        <RowBetween>
-          {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
-          <ThemedText.DeprecatedMediumHeader>
-            <Plural value={tokens.length} _1="Import token" other="Import tokens" />
-          </ThemedText.DeprecatedMediumHeader>
-          {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
-        </RowBetween>
-      </PaddedColumn>
-      <SectionBreak />
-      <AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
-        <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
-          <AlertCircle size={48} stroke={theme.deprecated_text2} strokeWidth={1} />
-          <ThemedText.DeprecatedBody fontWeight={400} fontSize={16}>
-            <Trans>
-              This token doesn&apos;t appear on the active token list(s). Make sure this is the token that you want to
-              trade.
-            </Trans>
-          </ThemedText.DeprecatedBody>
-        </AutoColumn>
-        {tokens.map((token) => (
-          <TokenImportCard token={token} list={list} key={'import' + token.address} />
-        ))}
-        <TraceEvent
-          events={[Event.onClick]}
-          name={EventName.TOKEN_IMPORTED}
-          properties={formatAnalyticsEventProperties(tokens)}
-          element={ElementName.IMPORT_TOKEN_BUTTON}
-        >
-          <ButtonPrimary
-            altDisabledStyle={true}
-            $borderRadius="20px"
-            padding="10px 1rem"
-            onClick={() => {
-              tokens.map((token) => addToken(token))
-              handleCurrencySelect && handleCurrencySelect(tokens[0])
-            }}
-            className=".token-dismiss-button"
-          >
-            <Trans>Import</Trans>
-          </ButtonPrimary>
-        </TraceEvent>
-      </AutoColumn>
-    </Wrapper>
-  )
-}

src/components/SearchModal/Manage.tsx

@@ -1,92 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists'
-import { RowBetween } from 'components/Row'
-import { useState } from 'react'
-import { ArrowLeft } from 'react-feather'
-import { Text } from 'rebass'
-import styled from 'styled-components/macro'
-import { CloseIcon } from 'theme'
-
-import { CurrencyModalView } from './CurrencySearchModal'
-import { ManageLists } from './ManageLists'
-import ManageTokens from './ManageTokens'
-import { PaddedColumn, Separator } from './styleds'
-
-const Wrapper = styled.div`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-flow: column;
-`
-
-const ToggleWrapper = styled(RowBetween)`
-  background-color: ${({ theme }) => theme.deprecated_bg3};
-  border-radius: 12px;
-  padding: 6px;
-`
-
-const ToggleOption = styled.div<{ active?: boolean }>`
-  width: 48%;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  font-weight: 600;
-  background-color: ${({ theme, active }) => (active ? theme.deprecated_bg1 : theme.deprecated_bg3)};
-  color: ${({ theme, active }) => (active ? theme.deprecated_text1 : theme.deprecated_text2)};
-  user-select: none;
-
-  :hover {
-    cursor: pointer;
-    opacity: 0.7;
-  }
-`
-
-export default function Manage({
-  onDismiss,
-  setModalView,
-  setImportList,
-  setImportToken,
-  setListUrl,
-}: {
-  onDismiss: () => void
-  setModalView: (view: CurrencyModalView) => void
-  setImportToken: (token: Token) => void
-  setImportList: (list: TokenList) => void
-  setListUrl: (url: string) => void
-}) {
-  // toggle between tokens and lists
-  const [showLists, setShowLists] = useState(true)
-
-  return (
-    <Wrapper>
-      <PaddedColumn>
-        <RowBetween>
-          <ArrowLeft style={{ cursor: 'pointer' }} onClick={() => setModalView(CurrencyModalView.search)} />
-          <Text fontWeight={500} fontSize={20}>
-            <Trans>Manage</Trans>
-          </Text>
-          <CloseIcon onClick={onDismiss} />
-        </RowBetween>
-      </PaddedColumn>
-      <Separator />
-      <PaddedColumn style={{ paddingBottom: 0 }}>
-        <ToggleWrapper>
-          <ToggleOption onClick={() => setShowLists(!showLists)} active={showLists}>
-            <Trans>Lists</Trans>
-          </ToggleOption>
-          <ToggleOption onClick={() => setShowLists(!showLists)} active={!showLists}>
-            <Trans>Tokens</Trans>
-          </ToggleOption>
-        </ToggleWrapper>
-      </PaddedColumn>
-      {showLists ? (
-        <ManageLists setModalView={setModalView} setImportList={setImportList} setListUrl={setListUrl} />
-      ) : (
-        <ManageTokens setModalView={setModalView} setImportToken={setImportToken} />
-      )}
-    </Wrapper>
-  )
-}

src/components/SearchModal/ManageLists.tsx

@@ -1,415 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
-import { TokenList } from '@uniswap/token-lists'
-import { useWeb3React } from '@web3-react/core'
-import { sendEvent } from 'components/analytics'
-import Card from 'components/Card'
-import { UNSUPPORTED_LIST_URLS } from 'constants/lists'
-import { useListColor } from 'hooks/useColor'
-import parseENSAddress from 'lib/utils/parseENSAddress'
-import uriToHttp from 'lib/utils/uriToHttp'
-import { ChangeEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { CheckCircle, Settings } from 'react-feather'
-import { usePopper } from 'react-popper'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { useFetchListCallback } from '../../hooks/useFetchListCallback'
-import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import useToggle from '../../hooks/useToggle'
-import { acceptListUpdate, disableList, enableList, removeList } from '../../state/lists/actions'
-import { useActiveListUrls, useAllLists, useIsListActive } from '../../state/lists/hooks'
-import { ExternalLink, IconWrapper, LinkStyledButton, ThemedText } from '../../theme'
-import listVersionLabel from '../../utils/listVersionLabel'
-import { ButtonEmpty, ButtonPrimary } from '../Button'
-import Column, { AutoColumn } from '../Column'
-import ListLogo from '../ListLogo'
-import Row, { RowBetween, RowFixed } from '../Row'
-import Toggle from '../Toggle'
-import { CurrencyModalView } from './CurrencySearchModal'
-import { PaddedColumn, SearchInput, Separator, SeparatorDark } from './styleds'
-
-const Wrapper = styled(Column)`
-  flex: 1;
-  overflow-y: hidden;
-`
-
-const UnpaddedLinkStyledButton = styled(LinkStyledButton)`
-  padding: 0;
-  font-size: 1rem;
-  opacity: ${({ disabled }) => (disabled ? '0.4' : '1')};
-`
-
-const PopoverContainer = styled.div<{ show: boolean }>`
-  z-index: 100;
-  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
-  opacity: ${(props) => (props.show ? 1 : 0)};
-  transition: visibility 150ms linear, opacity 150ms linear;
-  background: ${({ theme }) => theme.deprecated_bg2};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
-  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);
-  color: ${({ theme }) => theme.deprecated_text2};
-  border-radius: 0.5rem;
-  padding: 1rem;
-  display: grid;
-  grid-template-rows: 1fr;
-  grid-gap: 8px;
-  font-size: 1rem;
-  text-align: left;
-`
-
-const StyledMenu = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  border: none;
-`
-
-const StyledTitleText = styled.div<{ active: boolean }>`
-  font-size: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 600;
-  color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
-`
-
-const StyledListUrlText = styled(ThemedText.DeprecatedMain)<{ active: boolean }>`
-  font-size: 12px;
-  color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
-`
-
-const RowWrapper = styled(Row)<{ bgColor: string; active: boolean; hasActiveTokens: boolean }>`
-  background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.deprecated_bg2)};
-  opacity: ${({ hasActiveTokens }) => (hasActiveTokens ? 1 : 0.4)};
-  transition: 200ms;
-  align-items: center;
-  padding: 1rem;
-  border-radius: 20px;
-`
-
-function listUrlRowHTMLId(listUrl: string) {
-  return `list-row-${listUrl.replace(/\./g, '-')}`
-}
-
-const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
-  const { chainId } = useWeb3React()
-  const listsByUrl = useAppSelector((state) => state.lists.byUrl)
-  const dispatch = useAppDispatch()
-  const { current: list, pendingUpdate: pending } = listsByUrl[listUrl]
-
-  const activeTokensOnThisChain = useMemo(() => {
-    if (!list || !chainId) {
-      return 0
-    }
-    return list.tokens.reduce((acc, cur) => (cur.chainId === chainId ? acc + 1 : acc), 0)
-  }, [chainId, list])
-
-  const theme = useTheme()
-  const listColor = useListColor(list?.logoURI)
-  const isActive = useIsListActive(listUrl)
-
-  const [open, toggle] = useToggle(false)
-  const node = useRef<HTMLDivElement>()
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>()
-  const [popperElement, setPopperElement] = useState<HTMLDivElement>()
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'auto',
-    strategy: 'fixed',
-    modifiers: [{ name: 'offset', options: { offset: [8, 8] } }],
-  })
-
-  useOnClickOutside(node, open ? toggle : undefined)
-
-  const handleAcceptListUpdate = useCallback(() => {
-    if (!pending) return
-    sendEvent({
-      category: 'Lists',
-      action: 'Update List from List Select',
-      label: listUrl,
-    })
-    dispatch(acceptListUpdate(listUrl))
-  }, [dispatch, listUrl, pending])
-
-  const handleRemoveList = useCallback(() => {
-    sendEvent({
-      category: 'Lists',
-      action: 'Start Remove List',
-      label: listUrl,
-    })
-    if (window.prompt(t`Please confirm you would like to remove this list by typing REMOVE`) === `REMOVE`) {
-      sendEvent({
-        category: 'Lists',
-        action: 'Confirm Remove List',
-        label: listUrl,
-      })
-      dispatch(removeList(listUrl))
-    }
-  }, [dispatch, listUrl])
-
-  const handleEnableList = useCallback(() => {
-    sendEvent({
-      category: 'Lists',
-      action: 'Enable List',
-      label: listUrl,
-    })
-    dispatch(enableList(listUrl))
-  }, [dispatch, listUrl])
-
-  const handleDisableList = useCallback(() => {
-    sendEvent({
-      category: 'Lists',
-      action: 'Disable List',
-      label: listUrl,
-    })
-    dispatch(disableList(listUrl))
-  }, [dispatch, listUrl])
-
-  if (!list) return null
-
-  return (
-    <RowWrapper
-      active={isActive}
-      hasActiveTokens={activeTokensOnThisChain > 0}
-      bgColor={listColor}
-      key={listUrl}
-      id={listUrlRowHTMLId(listUrl)}
-    >
-      {list.logoURI ? (
-        <ListLogo size="40px" style={{ marginRight: '1rem' }} logoURI={list.logoURI} alt={`${list.name} list logo`} />
-      ) : (
-        <div style={{ width: '24px', height: '24px', marginRight: '1rem' }} />
-      )}
-      <Column style={{ flex: '1' }}>
-        <Row>
-          <StyledTitleText active={isActive}>{list.name}</StyledTitleText>
-        </Row>
-        <RowFixed mt="4px">
-          <StyledListUrlText active={isActive} mr="6px">
-            <Trans>{activeTokensOnThisChain} tokens</Trans>
-          </StyledListUrlText>
-          <StyledMenu ref={node as any}>
-            <ButtonEmpty onClick={toggle} ref={setReferenceElement} padding="0">
-              <Settings stroke={isActive ? theme.deprecated_bg1 : theme.deprecated_text1} size={12} />
-            </ButtonEmpty>
-            {open && (
-              <PopoverContainer show={true} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
-                <div>{list && listVersionLabel(list.version)}</div>
-                <SeparatorDark />
-                <ExternalLink href={`https://tokenlists.org/token-list?url=${listUrl}`}>
-                  <Trans>View list</Trans>
-                </ExternalLink>
-                <UnpaddedLinkStyledButton onClick={handleRemoveList} disabled={Object.keys(listsByUrl).length === 1}>
-                  <Trans>Remove list</Trans>
-                </UnpaddedLinkStyledButton>
-                {pending && (
-                  <UnpaddedLinkStyledButton onClick={handleAcceptListUpdate}>
-                    <Trans>Update list</Trans>
-                  </UnpaddedLinkStyledButton>
-                )}
-              </PopoverContainer>
-            )}
-          </StyledMenu>
-        </RowFixed>
-      </Column>
-      <Toggle
-        isActive={isActive}
-        bgColor={listColor}
-        toggle={() => {
-          isActive ? handleDisableList() : handleEnableList()
-        }}
-      />
-    </RowWrapper>
-  )
-})
-
-const ListContainer = styled.div`
-  padding: 1rem;
-  height: 100%;
-  overflow: auto;
-  flex: 1;
-`
-
-export function ManageLists({
-  setModalView,
-  setImportList,
-  setListUrl,
-}: {
-  setModalView: (view: CurrencyModalView) => void
-  setImportList: (list: TokenList) => void
-  setListUrl: (url: string) => void
-}) {
-  const { chainId } = useWeb3React()
-  const theme = useTheme()
-
-  const [listUrlInput, setListUrlInput] = useState<string>('')
-
-  const lists = useAllLists()
-
-  const tokenCountByListName = useMemo<Record<string, number>>(
-    () =>
-      Object.values(lists).reduce((acc, { current: list }) => {
-        if (!list) {
-          return acc
-        }
-        return {
-          ...acc,
-          [list.name]: list.tokens.reduce((count: number, token) => (token.chainId === chainId ? count + 1 : count), 0),
-        }
-      }, {}),
-    [chainId, lists]
-  )
-
-  // sort by active but only if not visible
-  const activeListUrls = useActiveListUrls()
-
-  const handleInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setListUrlInput(e.target.value)
-  }, [])
-
-  const fetchList = useFetchListCallback()
-
-  const validUrl: boolean = useMemo(() => {
-    return uriToHttp(listUrlInput).length > 0 || Boolean(parseENSAddress(listUrlInput))
-  }, [listUrlInput])
-
-  const sortedLists = useMemo(() => {
-    const listUrls = Object.keys(lists)
-    return listUrls
-      .filter((listUrl) => {
-        // only show loaded lists, hide unsupported lists
-        return Boolean(lists[listUrl].current) && !Boolean(UNSUPPORTED_LIST_URLS.includes(listUrl))
-      })
-      .sort((listUrlA, listUrlB) => {
-        const { current: listA } = lists[listUrlA]
-        const { current: listB } = lists[listUrlB]
-
-        // first filter on active lists
-        if (activeListUrls?.includes(listUrlA) && !activeListUrls?.includes(listUrlB)) {
-          return -1
-        }
-        if (!activeListUrls?.includes(listUrlA) && activeListUrls?.includes(listUrlB)) {
-          return 1
-        }
-
-        if (listA && listB) {
-          if (tokenCountByListName[listA.name] > tokenCountByListName[listB.name]) {
-            return -1
-          }
-          if (tokenCountByListName[listA.name] < tokenCountByListName[listB.name]) {
-            return 1
-          }
-          return listA.name.toLowerCase() < listB.name.toLowerCase()
-            ? -1
-            : listA.name.toLowerCase() === listB.name.toLowerCase()
-            ? 0
-            : 1
-        }
-        if (listA) return -1
-        if (listB) return 1
-        return 0
-      })
-  }, [lists, activeListUrls, tokenCountByListName])
-
-  // temporary fetched list for import flow
-  const [tempList, setTempList] = useState<TokenList>()
-  const [addError, setAddError] = useState<string | undefined>()
-
-  useEffect(() => {
-    async function fetchTempList() {
-      fetchList(listUrlInput, false)
-        .then((list) => setTempList(list))
-        .catch(() => setAddError(t`Error importing list`))
-    }
-    // if valid url, fetch details for card
-    if (validUrl) {
-      fetchTempList()
-    } else {
-      setTempList(undefined)
-      listUrlInput !== '' && setAddError(t`Enter valid list location`)
-    }
-
-    // reset error
-    if (listUrlInput === '') {
-      setAddError(undefined)
-    }
-  }, [fetchList, listUrlInput, validUrl])
-
-  // check if list is already imported
-  const isImported = Object.keys(lists).includes(listUrlInput)
-
-  // set list values and have parent modal switch to import list view
-  const handleImport = useCallback(() => {
-    if (!tempList) return
-    setImportList(tempList)
-    setModalView(CurrencyModalView.importList)
-    setListUrl(listUrlInput)
-  }, [listUrlInput, setImportList, setListUrl, setModalView, tempList])
-
-  return (
-    <Wrapper>
-      <PaddedColumn gap="14px">
-        <Row>
-          <SearchInput
-            type="text"
-            id="list-add-input"
-            placeholder={t`https:// or ipfs:// or ENS name`}
-            value={listUrlInput}
-            onChange={handleInput}
-          />
-        </Row>
-        {addError ? (
-          <ThemedText.DeprecatedError title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>
-            {addError}
-          </ThemedText.DeprecatedError>
-        ) : null}
-      </PaddedColumn>
-      {tempList && (
-        <PaddedColumn style={{ paddingTop: 0 }}>
-          <Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
-            <RowBetween>
-              <RowFixed>
-                {tempList.logoURI && <ListLogo logoURI={tempList.logoURI} size="40px" />}
-                <AutoColumn gap="4px" style={{ marginLeft: '20px' }}>
-                  <ThemedText.DeprecatedBody fontWeight={600}>{tempList.name}</ThemedText.DeprecatedBody>
-                  <ThemedText.DeprecatedMain fontSize={'12px'}>
-                    <Trans>{tempList.tokens.length} tokens</Trans>
-                  </ThemedText.DeprecatedMain>
-                </AutoColumn>
-              </RowFixed>
-              {isImported ? (
-                <RowFixed>
-                  <IconWrapper stroke={theme.deprecated_text2} size="16px" marginRight={'10px'}>
-                    <CheckCircle />
-                  </IconWrapper>
-                  <ThemedText.DeprecatedBody color={theme.deprecated_text2}>
-                    <Trans>Loaded</Trans>
-                  </ThemedText.DeprecatedBody>
-                </RowFixed>
-              ) : (
-                <ButtonPrimary
-                  style={{ fontSize: '14px' }}
-                  padding="6px 8px"
-                  width="fit-content"
-                  onClick={handleImport}
-                >
-                  <Trans>Import</Trans>
-                </ButtonPrimary>
-              )}
-            </RowBetween>
-          </Card>
-        </PaddedColumn>
-      )}
-      <Separator />
-      <ListContainer>
-        <AutoColumn gap="md">
-          {sortedLists.map((listUrl) => (
-            <ListRow key={listUrl} listUrl={listUrl} />
-          ))}
-        </AutoColumn>
-      </ListContainer>
-    </Wrapper>
-  )
-}

src/components/SearchModal/ManageTokens.tsx

@@ -1,152 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
-import { useWeb3React } from '@web3-react/core'
-import Card from 'components/Card'
-import Column from 'components/Column'
-import CurrencyLogo from 'components/CurrencyLogo'
-import Row, { RowBetween, RowFixed } from 'components/Row'
-import { useToken } from 'hooks/Tokens'
-import { ChangeEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react'
-import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { ButtonText, ExternalLink, ExternalLinkIcon, ThemedText, TrashIcon } from 'theme'
-import { isAddress } from 'utils'
-
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { CurrencyModalView } from './CurrencySearchModal'
-import ImportRow from './ImportRow'
-import { PaddedColumn, SearchInput, Separator } from './styleds'
-
-const Wrapper = styled.div`
-  width: 100%;
-  height: calc(100% - 60px);
-  position: relative;
-  padding-bottom: 80px;
-`
-
-const Footer = styled.div`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  border-radius: 20px;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top: 1px solid ${({ theme }) => theme.deprecated_bg3};
-  padding: 20px;
-  text-align: center;
-`
-
-export default function ManageTokens({
-  setModalView,
-  setImportToken,
-}: {
-  setModalView: (view: CurrencyModalView) => void
-  setImportToken: (token: Token) => void
-}) {
-  const { chainId } = useWeb3React()
-
-  const [searchQuery, setSearchQuery] = useState<string>('')
-  const theme = useTheme()
-
-  // manage focus on modal show
-  const inputRef = useRef<HTMLInputElement>()
-  const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const input = event.target.value
-    const checksummedInput = isAddress(input)
-    setSearchQuery(checksummedInput || input)
-  }, [])
-
-  // if they input an address, use it
-  const isAddressSearch = isAddress(searchQuery)
-  const searchToken = useToken(searchQuery)
-
-  // all tokens for local lisr
-  const userAddedTokens: Token[] = useUserAddedTokens()
-  const removeToken = useRemoveUserAddedToken()
-
-  const handleRemoveAll = useCallback(() => {
-    if (chainId && userAddedTokens) {
-      userAddedTokens.map((token) => {
-        return removeToken(chainId, token.address)
-      })
-    }
-  }, [removeToken, userAddedTokens, chainId])
-
-  const tokenList = useMemo(() => {
-    return (
-      chainId &&
-      userAddedTokens.map((token) => (
-        <RowBetween key={token.address} width="100%">
-          <RowFixed>
-            <CurrencyLogo currency={token} size={'20px'} />
-            <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
-              <ThemedText.DeprecatedMain ml={'10px'} fontWeight={600}>
-                {token.symbol}
-              </ThemedText.DeprecatedMain>
-            </ExternalLink>
-          </RowFixed>
-          <RowFixed>
-            <TrashIcon onClick={() => removeToken(chainId, token.address)} />
-            <ExternalLinkIcon href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)} />
-          </RowFixed>
-        </RowBetween>
-      ))
-    )
-  }, [userAddedTokens, chainId, removeToken])
-
-  return (
-    <Wrapper>
-      <Column style={{ width: '100%', height: '100%', flex: '1 1' }}>
-        <PaddedColumn gap="14px">
-          <Row>
-            <SearchInput
-              type="text"
-              id="token-search-input"
-              placeholder={'0x0000'}
-              value={searchQuery}
-              autoComplete="off"
-              ref={inputRef as RefObject<HTMLInputElement>}
-              onChange={handleInput}
-            />
-          </Row>
-          {searchQuery !== '' && !isAddressSearch && (
-            <ThemedText.DeprecatedError error={true}>
-              <Trans>Enter valid token address</Trans>
-            </ThemedText.DeprecatedError>
-          )}
-          {searchToken && (
-            <Card backgroundColor={theme.deprecated_bg2} padding="10px 0">
-              <ImportRow
-                token={searchToken}
-                showImportView={() => setModalView(CurrencyModalView.importToken)}
-                setImportToken={setImportToken}
-                style={{ height: 'fit-content' }}
-              />
-            </Card>
-          )}
-        </PaddedColumn>
-        <Separator />
-        <PaddedColumn gap="lg" style={{ overflow: 'auto', marginBottom: '10px' }}>
-          <RowBetween>
-            <ThemedText.DeprecatedMain fontWeight={600}>
-              <Trans>{userAddedTokens?.length} Custom Tokens</Trans>
-            </ThemedText.DeprecatedMain>
-            {userAddedTokens.length > 0 && (
-              <ButtonText onClick={handleRemoveAll}>
-                <ThemedText.DeprecatedBlue>
-                  <Trans>Clear all</Trans>
-                </ThemedText.DeprecatedBlue>
-              </ButtonText>
-            )}
-          </RowBetween>
-          {tokenList}
-        </PaddedColumn>
-      </Column>
-      <Footer>
-        <ThemedText.DeprecatedDarkGray>
-          <Trans>Tip: Custom tokens are stored locally in your browser</Trans>
-        </ThemedText.DeprecatedDarkGray>
-      </Footer>
-    </Wrapper>
-  )
-}

src/components/SearchModal/TokenImportCard.tsx

@@ -1,76 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists'
-import { useWeb3React } from '@web3-react/core'
-import Card from 'components/Card'
-import { AutoColumn } from 'components/Column'
-import CurrencyLogo from 'components/CurrencyLogo'
-import ListLogo from 'components/ListLogo'
-import { RowFixed } from 'components/Row'
-import { transparentize } from 'polished'
-import { AlertCircle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText } from 'theme'
-import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
-
-const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
-  background-color: ${({ theme, highWarning }) =>
-    highWarning ? transparentize(0.8, theme.deprecated_red1) : transparentize(0.8, theme.deprecated_yellow2)};
-  width: fit-content;
-`
-
-const AddressText = styled(ThemedText.DeprecatedBlue)`
-  font-size: 12px;
-  word-break: break-all;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    font-size: 10px;
-  `}
-`
-interface TokenImportCardProps {
-  list?: TokenList
-  token: Token
-}
-const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
-  const theme = useTheme()
-  const { chainId } = useWeb3React()
-  return (
-    <Card backgroundColor={theme.deprecated_bg2} padding="2rem">
-      <AutoColumn gap="10px" justify="center">
-        <CurrencyLogo currency={token} size={'32px'} />
-        <AutoColumn gap="4px" justify="center">
-          <ThemedText.DeprecatedBody ml="8px" mr="8px" fontWeight={500} fontSize={20}>
-            {token.symbol}
-          </ThemedText.DeprecatedBody>
-          <ThemedText.DeprecatedDarkGray fontWeight={400} fontSize={14}>
-            {token.name}
-          </ThemedText.DeprecatedDarkGray>
-        </AutoColumn>
-        {chainId && (
-          <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
-            <AddressText fontSize={12}>{token.address}</AddressText>
-          </ExternalLink>
-        )}
-        {list !== undefined ? (
-          <RowFixed>
-            {list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
-            <ThemedText.DeprecatedSmall ml="6px" fontSize={14} color={theme.deprecated_text3}>
-              <Trans>via {list.name} token list</Trans>
-            </ThemedText.DeprecatedSmall>
-          </RowFixed>
-        ) : (
-          <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
-            <RowFixed>
-              <AlertCircle stroke={theme.deprecated_red1} size="10px" />
-              <ThemedText.DeprecatedBody color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
-                <Trans>Unknown Source</Trans>
-              </ThemedText.DeprecatedBody>
-            </RowFixed>
-          </WarningWrapper>
-        )}
-      </AutoColumn>
-    </Card>
-  )
-}
-
-export default TokenImportCard

src/components/SearchModal/styleds.tsx

@@ -22,7 +22,7 @@ export const PaddedColumn = styled(AutoColumn)`
   padding: 20px;
 `
 
-export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boolean }>`
+export const MenuItem = styled(RowBetween)<{ dim?: boolean }>`
   padding: 4px 20px;
   height: 56px;
   display: grid;
@@ -31,13 +31,12 @@ export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boole
   cursor: ${({ disabled }) => !disabled && 'pointer'};
   pointer-events: ${({ disabled }) => disabled && 'none'};
   :hover {
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      (redesignFlag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
+    background-color: ${({ theme }) => theme.hoverDefault};
   }
   opacity: ${({ disabled, selected, dim }) => (dim || disabled || selected ? 0.4 : 1)};
 `
 
-export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
+export const SearchInput = styled.input`
   background: no-repeat scroll 7px 7px;
   background-image: url(${searchIcon});
   background-size: 20px 20px;
@@ -46,37 +45,36 @@ export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
   display: flex;
   padding: 16px;
   padding-left: 40px;
-  height: ${({ redesignFlag }) => redesignFlag && '40px'};
+  height: 40px;
   align-items: center;
   width: 100%;
   white-space: nowrap;
-  background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundModule};
+  background-color: ${({ theme }) => theme.backgroundModule};
   border: none;
   outline: none;
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '12px' : '20px')};
+  border-radius: 12px;
   color: ${({ theme }) => theme.deprecated_text1};
   border-style: solid;
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   -webkit-appearance: none;
 
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '18px')};
+  font-size: 16px;
 
   ::placeholder {
-    color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text3)};
-    font-size: ${({ redesignFlag }) => redesignFlag && '16px'};
+    color: ${({ theme }) => theme.textTertiary};
+    font-size: 16px;
   }
   transition: border 100ms;
   :focus {
-    border: 1px solid
-      ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActiveSoft : theme.deprecated_primary1)};
-    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
+    border: 1px solid ${({ theme }) => theme.accentActiveSoft};
+    background-color: ${({ theme }) => theme.backgroundSurface};
     outline: none;
   }
 `
-export const Separator = styled.div<{ redesignFlag?: boolean }>`
+export const Separator = styled.div`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2)};
+  background-color: ${({ theme }) => theme.backgroundOutline};
 `
 
 export const SeparatorDark = styled.div`

src/components/Settings/index.tsx

@@ -3,7 +3,6 @@ import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
@@ -23,16 +22,16 @@ import { RowBetween, RowFixed } from '../Row'
 import Toggle from '../Toggle'
 import TransactionSettings from '../TransactionSettings'
 
-const StyledMenuIcon = styled(Settings)<{ redesignFlag: boolean }>`
+const StyledMenuIcon = styled(Settings)`
   height: 20px;
   width: 20px;
 
   > * {
-    stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
+    stroke: ${({ theme }) => theme.textSecondary};
   }
 `
 
-const StyledCloseIcon = styled(X)<{ redesignFlag: boolean }>`
+const StyledCloseIcon = styled(X)`
   height: 20px;
   width: 20px;
   :hover {
@@ -40,7 +39,7 @@ const StyledCloseIcon = styled(X)<{ redesignFlag: boolean }>`
   }
 
   > * {
-    stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
+    stroke: ${({ theme }) => theme.textSecondary};
   }
 `
 
@@ -83,10 +82,10 @@ const StyledMenu = styled.div`
   text-align: left;
 `
 
-const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
+const MenuFlyout = styled.span`
   min-width: 20.125rem;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg2)};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   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);
   border-radius: 12px;
@@ -97,7 +96,7 @@ const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
   top: 2rem;
   right: 0rem;
   z-index: 100;
-  color: ${({ theme, redesignFlag }) => redesignFlag && theme.textPrimary};
+  color: ${({ theme }) => theme.textPrimary};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     min-width: 18.125rem;
@@ -123,8 +122,6 @@ const ModalContentWrapper = styled.div`
 
 export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
   const { chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const node = useRef<HTMLDivElement>()
   const open = useModalIsOpen(ApplicationModal.SETTINGS)
@@ -152,7 +149,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
               <Text fontWeight={500} fontSize={20}>
                 <Trans>Are you sure?</Trans>
               </Text>
-              <StyledCloseIcon onClick={() => setShowConfirmation(false)} redesignFlag={redesignFlagEnabled} />
+              <StyledCloseIcon onClick={() => setShowConfirmation(false)} />
             </RowBetween>
             <Break />
             <AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
@@ -167,7 +164,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
               </Text>
               <ButtonError
                 error={true}
-                padding={'12px'}
+                padding="12px"
                 onClick={() => {
                   const confirmWord = t`confirm`
                   if (window.prompt(t`Please type the word "${confirmWord}" to enable expert mode.`) === confirmWord) {
@@ -190,7 +187,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         id="open-settings-dialog-button"
         aria-label={t`Transaction Settings`}
       >
-        <StyledMenuIcon redesignFlag={redesignFlagEnabled} />
+        <StyledMenuIcon />
         {expertMode ? (
           <EmojiWrapper>
             <span role="img" aria-label="wizard-icon">
@@ -200,10 +197,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         ) : null}
       </StyledMenuButton>
       {open && (
-        <MenuFlyout redesignFlag={redesignFlagEnabled}>
+        <MenuFlyout>
           <AutoColumn gap="md" style={{ padding: '1rem' }}>
             <Text fontWeight={600} fontSize={14}>
-              <Trans>{redesignFlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
+              <Trans>Settings</Trans>
             </Text>
             <TransactionSettings placeholderSlippage={placeholderSlippage} />
             <Text fontWeight={600} fontSize={14}>

src/components/TextInput/__snapshots__/index.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`ResizableTextArea renders correctly 1`] = `
   background-color: #F5F6FC;
   -webkit-transition: color 300ms step-start;
   transition: color 300ms step-start;
-  color: #0E111A;
+  color: #0D111C;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -34,19 +34,19 @@ exports[`ResizableTextArea renders correctly 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::-moz-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0:-ms-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 <textarea
@@ -77,7 +77,7 @@ exports[`TextInput renders correctly 1`] = `
   background-color: #F5F6FC;
   -webkit-transition: color 300ms step-start;
   transition: color 300ms step-start;
-  color: #0E111A;
+  color: #0D111C;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -96,19 +96,19 @@ exports[`TextInput renders correctly 1`] = `
 }
 
 .c0::-webkit-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::-moz-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0:-ms-input-placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 .c0::placeholder {
-  color: #99A1BD;
+  color: #98A1C0;
 }
 
 <div

src/components/Toggle/index.tsx

@@ -1,23 +1,16 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled, { keyframes } from 'styled-components/macro'
 
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; redesignFlag: boolean }>`
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
   align-items: center;
-  background: ${({ isActive, theme, redesignFlag }) =>
-    redesignFlag && isActive
-      ? theme.accentActionSoft
-      : redesignFlag && !isActive
-      ? 'transparent'
-      : theme.deprecated_bg1};
-  border: ${({ redesignFlag, theme, isActive }) =>
-    redesignFlag && !isActive ? `1px solid ${theme.backgroundOutline}` : 'none'};
+  background: ${({ isActive, theme }) => (isActive ? theme.accentActionSoft : 'transparent')};
+  border: ${({ theme, isActive }) => (isActive ? 'none' : `1px solid ${theme.backgroundOutline}`)};
   border-radius: 20px;
   cursor: pointer;
   display: flex;
   outline: none;
-  padding: ${({ redesignFlag }) => (redesignFlag ? '4px' : '0.4rem 0.4rem')};
+  padding: 4px;
   width: fit-content;
 `
 
@@ -64,8 +57,8 @@ const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInit
   :hover {
     ${({ bgColor, theme, isActive }) => ToggleElementHoverStyle(!!bgColor, theme, isActive)}
   }
-  margin-left: ${({ isActive }) => (isActive ? '2.2em' : '0em')};
-  margin-right: ${({ isActive }) => (!isActive ? '2.2em' : '0em')};
+  margin-left: ${({ isActive }) => isActive && '2.2em'};
+  margin-right: ${({ isActive }) => !isActive && '2.2em'};
   width: 24px;
 `
 
@@ -78,8 +71,6 @@ interface ToggleProps {
 
 export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const switchToggle = () => {
     toggle()
@@ -87,7 +78,7 @@ export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   }
 
   return (
-    <Wrapper id={id} isActive={isActive} onClick={switchToggle} redesignFlag={redesignFlagEnabled}>
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
       <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
     </Wrapper>
   )

src/components/TokenSafety/TokenSafetyIcon.tsx

@@ -1,5 +1,5 @@
-import { ReactComponent as Verified } from 'assets/svg/verified.svg'
-import { Warning } from 'constants/tokenSafety'
+import { Warning, WARNING_LEVEL } from 'constants/tokenSafety'
+import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 const VerifiedContainer = styled.div`
@@ -8,17 +8,17 @@ const VerifiedContainer = styled.div`
   justify-content: center;
 `
 
-export const VerifiedIcon = styled(Verified)<{ size?: string }>`
+export const WarningIcon = styled(AlertTriangle)<{ size?: string }>`
   width: ${({ size }) => size ?? '1em'};
   height: ${({ size }) => size ?? '1em'};
-  color: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 export default function TokenSafetyIcon({ warning }: { warning: Warning | null }) {
-  if (warning) return null
+  if (warning?.level !== WARNING_LEVEL.UNKNOWN) return null
   return (
     <VerifiedContainer>
-      <VerifiedIcon />
+      <WarningIcon />
     </VerifiedContainer>
   )
 }

src/components/TokenSafety/TokenSafetyLabel.tsx

@@ -4,9 +4,8 @@ import { ReactNode } from 'react'
 import { AlertOctagon, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { Color } from 'theme/styled'
 
-const Label = styled.div<{ color: Color }>`
+const Label = styled.div<{ color: string }>`
   padding: 4px 4px;
   font-size: 12px;
   background-color: ${({ color }) => color + '1F'};

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -5,11 +5,10 @@ import { AlertOctagon, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
-import { Color } from 'theme/styled'
 
-const Label = styled.div<{ color: Color }>`
+const Label = styled.div<{ color: string }>`
   width: 100%;
-  padding: 12px 20px;
+  padding: 12px 20px 16px;
   background-color: ${({ color }) => color + '1F'};
   border-radius: 16px;
   color: ${({ color }) => color};
@@ -31,9 +30,15 @@ const Title = styled(Text)`
 const DetailsRow = styled.div`
   margin-top: 8px;
   font-size: 12px;
+  line-height: 16px;
   color: ${({ theme }) => theme.textSecondary};
 `
 
+const StyledLink = styled(ExternalLink)`
+  color: ${({ theme }) => theme.textSecondary};
+  font-weight: 700;
+`
+
 type TokenWarningMessageProps = {
   warning: Warning
   tokenAddress: string
@@ -46,7 +51,7 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
   return (
     <Label color={color}>
       <TitleRow>
-        {warning.canProceed ? <AlertTriangle size={'16px'} /> : <AlertOctagon size={'16px'} />}
+        {warning.canProceed ? <AlertTriangle size="16px" /> : <AlertOctagon size="16px" />}
         <Title marginLeft="7px">{warning.message}</Title>
       </TitleRow>
 
@@ -56,9 +61,9 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
         {description}
         {Boolean(description) && ' '}
         {tokenAddress && (
-          <ExternalLink href={TOKEN_SAFETY_ARTICLE}>
+          <StyledLink href={TOKEN_SAFETY_ARTICLE}>
             <Trans>Learn more</Trans>
-          </ExternalLink>
+          </StyledLink>
         )}
       </DetailsRow>
     </Label>

src/components/TokenSafety/index.tsx

@@ -244,6 +244,11 @@ export default function TokenSafety({
   }
 
   const { heading, description } = getWarningCopy(displayWarning, plural)
+  const learnMoreUrl = (
+    <StyledExternalLink href={TOKEN_SAFETY_ARTICLE}>
+      <Trans>Learn more</Trans>
+    </StyledExternalLink>
+  )
 
   return (
     displayWarning && (
@@ -255,13 +260,9 @@ export default function TokenSafety({
           <ShortColumn>
             <SafetyLabel warning={displayWarning} />
           </ShortColumn>
-          <ShortColumn>{heading && <InfoText fontSize="20px">{heading}</InfoText>}</ShortColumn>
           <ShortColumn>
             <InfoText>
-              {description}{' '}
-              <StyledExternalLink href={TOKEN_SAFETY_ARTICLE}>
-                <Trans>Learn more</Trans>
-              </StyledExternalLink>
+              {heading} {description} {learnMoreUrl}
             </InfoText>
           </ShortColumn>
           <LinkColumn>{urls}</LinkColumn>

src/components/TokenWarningModal/index.tsx

@@ -1,22 +0,0 @@
-import { Token } from '@uniswap/sdk-core'
-import { ImportToken } from 'components/SearchModal/ImportToken'
-
-import Modal from '../Modal'
-
-export default function TokenWarningModal({
-  isOpen,
-  tokens,
-  onConfirm,
-  onDismiss,
-}: {
-  isOpen: boolean
-  tokens: Token[]
-  onConfirm: () => void
-  onDismiss: () => void
-}) {
-  return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={100}>
-      <ImportToken tokens={tokens} handleCurrencySelect={onConfirm} />
-    </Modal>
-  )
-}

src/components/Tokens/TokenDetails/About.tsx

@@ -3,7 +3,7 @@ import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { textFadeIn } from 'theme/animations'
+import { textFadeIn } from 'theme/styles'
 
 import Resource from './Resource'
 
@@ -99,10 +99,10 @@ export function AboutSection({ address, description, homepageUrl, twitterName }:
         <Trans>Links</Trans>
       </ThemedText.SubHeaderSmall>
       <ResourcesContainer>
-        <Resource name={'Etherscan'} link={`https://etherscan.io/address/${address}`} />
-        <Resource name={'More analytics'} link={`https://info.uniswap.org/#/tokens/${address}`} />
-        {homepageUrl && <Resource name={'Website'} link={homepageUrl} />}
-        {twitterName && <Resource name={'Twitter'} link={`https://twitter.com/${twitterName}`} />}
+        <Resource name="Etherscan" link={`https://etherscan.io/address/${address}`} />
+        <Resource name="More analytics" link={`https://info.uniswap.org/#/tokens/${address}`} />
+        {homepageUrl && <Resource name="Website" link={homepageUrl} />}
+        {twitterName && <Resource name="Twitter" link={`https://twitter.com/${twitterName}`} />}
       </ResourcesContainer>
     </AboutContainer>
   )

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,12 +1,12 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { formatToDecimal } from 'analytics/utils'
+import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { validateUrlChainParam } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
-import { useParams } from 'react-router-dom'
+import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
+import { formatToDecimal } from 'lib/utils/analytics'
+import { useMemo } from 'react'
 import styled from 'styled-components/macro'
-import { StyledInternalLink } from 'theme'
 import { currencyAmountToPreciseFloat, formatDollar } from 'utils/formatNumbers'
 
 const BalancesCard = styled.div`
@@ -29,11 +29,11 @@ const BalancesCard = styled.div`
     display: flex;
   }
 `
-const TotalBalanceSection = styled.div`
+const BalanceSection = styled.div`
   height: fit-content;
   width: 100%;
 `
-const TotalBalance = styled.div`
+const BalanceRow = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -42,99 +42,45 @@ const TotalBalance = styled.div`
   line-height: 28px;
   margin-top: 12px;
 `
-const TotalBalanceItem = styled.div`
+const BalanceItem = styled.div`
   display: flex;
 `
 
-const BalanceRowLink = styled(StyledInternalLink)`
-  color: unset;
-`
-
-function BalanceRow({ currency, formattedBalance, usdValue, href }: BalanceRowData) {
-  const content = (
-    <TotalBalance key={currency.wrapped.address}>
-      <TotalBalanceItem>
-        <CurrencyLogo currency={currency} />
-        &nbsp;{formattedBalance} {currency?.symbol}
-      </TotalBalanceItem>
-      <TotalBalanceItem>{formatDollar({ num: usdValue === 0 ? undefined : usdValue, isPrice: true })}</TotalBalanceItem>
-    </TotalBalance>
+export function useFormatBalance(balance: CurrencyAmount<Currency> | undefined) {
+  return useMemo(
+    () => (balance ? formatToDecimal(balance, Math.min(balance.currency.decimals, 2)) : undefined),
+    [balance]
   )
-  if (href) {
-    return <BalanceRowLink to={href}>{content}</BalanceRowLink>
-  }
-  return content
 }
 
-interface BalanceRowData {
-  currency: Currency
-  formattedBalance: number
-  usdValue: number | undefined
-  href?: string
-}
-export interface BalanceSummaryProps {
-  tokenAmount: CurrencyAmount<Token> | undefined
-  nativeCurrencyAmount: CurrencyAmount<Currency> | undefined
-  isNative: boolean
+export function useFormatUsdValue(usdValue: CurrencyAmount<Token> | null) {
+  return useMemo(() => {
+    const float = usdValue ? currencyAmountToPreciseFloat(usdValue) : undefined
+    if (!float) return undefined
+    return formatDollar({ num: float, isPrice: true })
+  }, [usdValue])
 }
 
-export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNative }: BalanceSummaryProps) {
-  const balanceUsdValue = useStablecoinValue(tokenAmount)
-  const nativeBalanceUsdValue = useStablecoinValue(nativeCurrencyAmount)
-
-  const { chainName } = useParams<{ chainName?: string }>()
-  const pageChainName = validateUrlChainParam(chainName).toLowerCase()
-
-  const tokenIsWrappedNative =
-    tokenAmount &&
-    nativeCurrencyAmount &&
-    tokenAmount.currency.address.toLowerCase() === nativeCurrencyAmount.currency.wrapped.address.toLowerCase()
-
-  if (
-    (!tokenAmount && !nativeCurrencyAmount) ||
-    (!tokenAmount && !tokenIsWrappedNative && !isNative) ||
-    (!isNative && !tokenIsWrappedNative && tokenAmount?.equalTo(0)) ||
-    (isNative && tokenAmount?.equalTo(0) && nativeCurrencyAmount?.equalTo(0))
-  ) {
-    return null
-  }
-  const showNative = tokenIsWrappedNative || isNative
-
-  const currencies = []
-
-  if (tokenAmount) {
-    const tokenData: BalanceRowData = {
-      currency: tokenAmount.currency,
-      formattedBalance: formatToDecimal(tokenAmount, Math.min(tokenAmount.currency.decimals, 2)),
-      usdValue: balanceUsdValue ? currencyAmountToPreciseFloat(balanceUsdValue) : undefined,
-    }
-    if (isNative) {
-      tokenData.href = `/tokens/${pageChainName}/${tokenAmount.currency.address}`
-    }
-    currencies.push(tokenData)
-  }
-  if (showNative && nativeCurrencyAmount) {
-    const nativeData: BalanceRowData = {
-      currency: nativeCurrencyAmount.currency,
-      formattedBalance: formatToDecimal(nativeCurrencyAmount, Math.min(nativeCurrencyAmount.currency.decimals, 2)),
-      usdValue: nativeBalanceUsdValue ? currencyAmountToPreciseFloat(nativeBalanceUsdValue) : undefined,
-    }
-    if (isNative) {
-      currencies.unshift(nativeData)
-    } else {
-      nativeData.href = `/tokens/${pageChainName}/NATIVE`
-      currencies.push(nativeData)
-    }
-  }
+export default function BalanceSummary({ token }: { token: Currency }) {
+  const { account } = useWeb3React()
+  const balance = useCurrencyBalance(account, token)
+  const formattedBalance = useFormatBalance(balance)
+  const usdValue = useStablecoinValue(balance)
+  const formattedUsdValue = useFormatUsdValue(usdValue)
 
+  if (!account || !balance) return null
   return (
     <BalancesCard>
-      <TotalBalanceSection>
+      <BalanceSection>
         <Trans>Your balance</Trans>
-        {currencies.map((props, i) => (
-          <BalanceRow {...props} key={props.currency.wrapped.address + i} />
-        ))}
-      </TotalBalanceSection>
+        <BalanceRow>
+          <BalanceItem>
+            <CurrencyLogo currency={token} />
+            &nbsp;{formattedBalance} {token.symbol}
+          </BalanceItem>
+          <BalanceItem>{formattedUsdValue}</BalanceItem>
+        </BalanceRow>
+      </BalanceSection>
     </BalancesCard>
   )
 }

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -1,136 +1,77 @@
-import { Trans } from '@lingui/macro'
-import { Currency, 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 { PriceDurations, PricePoint, SingleTokenData } from 'graphql/data/Token'
-import { TopToken } from 'graphql/data/TopTokens'
-import { CHAIN_NAME_TO_CHAIN_ID, TimePeriod } from 'graphql/data/util'
+import { ChartContainer, LoadingChart } from 'components/Tokens/TokenDetails/Skeleton'
+import { TokenPriceQuery, tokenPriceQuery } from 'graphql/data/TokenPrice'
+import { isPricePoint, PricePoint } from 'graphql/data/util'
+import { TimePeriod } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
-import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
-import { useMemo } from 'react'
-import styled from 'styled-components/macro'
-import { textFadeIn } from 'theme/animations'
+import { startTransition, Suspense, useMemo, useState } from 'react'
+import { PreloadedQuery, usePreloadedQuery } from 'react-relay'
 
 import { filterTimeAtom } from '../state'
-import { L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
 import PriceChart from './PriceChart'
-import ShareButton from './ShareButton'
+import TimePeriodSelector from './TimeSelector'
 
-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};
-`
+function usePreloadedTokenPriceQuery(priceQueryReference: PreloadedQuery<TokenPriceQuery>): PricePoint[] | undefined {
+  const queryData = usePreloadedQuery(tokenPriceQuery, priceQueryReference)
 
-export function useTokenLogoURI(
-  token: NonNullable<SingleTokenData> | NonNullable<TopToken>,
-  nativeCurrency?: Token | NativeCurrency
-) {
-  const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
-  return [
-    ...useCurrencyLogoURIs(nativeCurrency),
-    ...useCurrencyLogoURIs({ ...token, chainId }),
-    token.project?.logoUrl,
-  ][0]
+  // Appends the current price to the end of the priceHistory array
+  const priceHistory = useMemo(() => {
+    const market = queryData.tokens?.[0]?.market
+    const priceHistory = market?.priceHistory?.filter(isPricePoint)
+    const currentPrice = market?.price?.value
+    if (Array.isArray(priceHistory) && currentPrice !== undefined) {
+      const timestamp = Date.now() / 1000
+      return [...priceHistory, { timestamp, value: currentPrice }]
+    }
+    return priceHistory
+  }, [queryData])
+
+  return priceHistory
 }
-
 export default function ChartSection({
-  token,
-  currency,
-  nativeCurrency,
-  prices,
+  priceQueryReference,
+  refetchTokenPrices,
 }: {
-  token: NonNullable<SingleTokenData>
-  currency?: Currency | null
-  nativeCurrency?: Token | NativeCurrency
-  prices: PriceDurations
+  priceQueryReference: PreloadedQuery<TokenPriceQuery> | null | undefined
+  refetchTokenPrices: RefetchPricesFunction
 }) {
-  const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
-  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
-  const warning = checkWarning(token.address ?? '')
-  const timePeriod = useAtomValue(filterTimeAtom)
-
-  const logoSrc = useTokenLogoURI(token, nativeCurrency)
-
-  // Backend doesn't always return latest price point for every duration.
-  // Thus we need to manually determine latest price point available, and
-  // append it to the prices list for every duration.
-  useMemo(() => {
-    let latestPricePoint: PricePoint = { value: 0, timestamp: 0 }
-    let latestPricePointTimePeriod: TimePeriod
-    Object.keys(prices).forEach((key) => {
-      const latestPricePointForTimePeriod = prices[key as unknown as TimePeriod]?.slice(-1)[0]
-      if (latestPricePointForTimePeriod && latestPricePointForTimePeriod.timestamp > latestPricePoint.timestamp) {
-        latestPricePoint = latestPricePointForTimePeriod
-        latestPricePointTimePeriod = key as unknown as TimePeriod
-      }
-    })
-    Object.keys(prices).forEach((key) => {
-      if ((key as unknown as TimePeriod) !== latestPricePointTimePeriod) {
-        prices[key as unknown as TimePeriod]?.push(latestPricePoint)
-      }
-    })
-  }, [prices])
+  if (!priceQueryReference) {
+    return <LoadingChart />
+  }
 
   return (
-    <ChartHeader>
-      <TokenInfoContainer>
-        <TokenNameCell>
-          <LogoContainer>
-            <CurrencyLogo
-              src={logoSrc}
-              size={'32px'}
-              symbol={nativeCurrency?.symbol ?? token.symbol}
-              currency={nativeCurrency ? undefined : currency}
-            />
-            <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="16px" />}
-        </TokenNameCell>
-        <TokenActions>
-          {token.name && token.symbol && token.address && <ShareButton token={token} isNative={!!nativeCurrency} />}
-        </TokenActions>
-      </TokenInfoContainer>
+    <Suspense fallback={<LoadingChart />}>
       <ChartContainer>
-        <ParentSize>
-          {({ width, height }) => prices && <PriceChart prices={prices[timePeriod]} width={width} height={height} />}
-        </ParentSize>
+        <Chart priceQueryReference={priceQueryReference} refetchTokenPrices={refetchTokenPrices} />
       </ChartContainer>
-    </ChartHeader>
+    </Suspense>
+  )
+}
+
+export type RefetchPricesFunction = (t: TimePeriod) => void
+function Chart({
+  priceQueryReference,
+  refetchTokenPrices,
+}: {
+  priceQueryReference: PreloadedQuery<TokenPriceQuery>
+  refetchTokenPrices: RefetchPricesFunction
+}) {
+  const prices = usePreloadedTokenPriceQuery(priceQueryReference)
+  // Initializes time period to global & maintain separate time period for subsequent changes
+  const [timePeriod, setTimePeriod] = useState(useAtomValue(filterTimeAtom))
+
+  return (
+    <ChartContainer>
+      <ParentSize>
+        {({ width }) => <PriceChart prices={prices ?? null} width={width} height={436} timePeriod={timePeriod} />}
+      </ParentSize>
+      <TimePeriodSelector
+        currentTimePeriod={timePeriod}
+        onTimeChange={(t: TimePeriod) => {
+          startTransition(() => refetchTokenPrices(t))
+          setTimePeriod(t)
+        }}
+      />
+    </ChartContainer>
   )
 }

src/components/Tokens/TokenDetails/LoadingTokenDetails.tsx

@@ -1,163 +0,0 @@
-import { WidgetSkeleton } from 'components/Widget'
-import { 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 { StatPair, StatWrapper, TokenStatsSection } from './StatsSection'
-
-const LoadingChartContainer = styled(ChartContainer)`
-  height: 336px;
-  overflow: hidden;
-`
-
-/* Loading state bubbles */
-const LoadingDetailBubble = styled(LoadingBubble)`
-  height: 16px;
-  width: 180px;
-`
-const TitleLoadingBubble = styled(LoadingDetailBubble)`
-  width: 140px;
-`
-const SquareLoadingBubble = styled(LoadingDetailBubble)`
-  height: 32px;
-  border-radius: 8px;
-  margin-bottom: 10px;
-`
-const PriceLoadingBubble = styled(SquareLoadingBubble)`
-  height: 40px;
-`
-const LongLoadingBubble = styled(LoadingDetailBubble)`
-  margin-top: 6px;
-  width: 100%;
-`
-const HalfLoadingBubble = styled(LoadingDetailBubble)`
-  margin-top: 6px;
-  width: 50%;
-`
-const IconLoadingBubble = styled(LoadingDetailBubble)`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-`
-const StatLoadingBubble = styled(SquareLoadingBubble)`
-  width: 116px;
-`
-const StatsLoadingContainer = styled.div`
-  display: flex;
-  gap: 24px;
-  flex-wrap: wrap;
-`
-const ChartAnimation = styled.div`
-  display: flex;
-  animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
-  overflow: hidden;
-
-  @keyframes wave {
-    0% {
-      margin-left: 0;
-    }
-    100% {
-      margin-left: -800px;
-    }
-  }
-`
-const Space = styled.div<{ heightSize: number }>`
-  height: ${({ heightSize }) => `${heightSize}px`};
-`
-
-export function Wave() {
-  const theme = useTheme()
-  return (
-    <svg width="416" height="160" xmlns="http://www.w3.org/2000/svg">
-      <path d="M 0 80 Q 104 10, 208 80 T 416 80" stroke={theme.backgroundOutline} fill="transparent" strokeWidth="2" />
-    </svg>
-  )
-}
-
-/* Loading State: row component with loading bubbles */
-export default function LoadingTokenDetail() {
-  return (
-    <LeftPanel>
-      <BreadcrumbNavLink to="/explore">
-        <Space heightSize={20} />
-      </BreadcrumbNavLink>
-      <ChartHeader>
-        <TokenInfoContainer>
-          <TokenNameCell>
-            <IconLoadingBubble />
-            <TitleLoadingBubble />
-          </TokenNameCell>
-        </TokenInfoContainer>
-        <TokenPrice>
-          <PriceLoadingBubble />
-        </TokenPrice>
-        <DeltaContainer>
-          <Space heightSize={20} />
-        </DeltaContainer>
-        <LoadingChartContainer>
-          <div>
-            <ChartAnimation>
-              <Wave />
-              <Wave />
-              <Wave />
-              <Wave />
-              <Wave />
-            </ChartAnimation>
-          </div>
-        </LoadingChartContainer>
-        <Space heightSize={32} />
-      </ChartHeader>
-      <TokenStatsSection>
-        <StatsLoadingContainer>
-          <StatPair>
-            <StatWrapper>
-              <HalfLoadingBubble />
-              <StatLoadingBubble />
-            </StatWrapper>
-            <StatWrapper>
-              <HalfLoadingBubble />
-              <StatLoadingBubble />
-            </StatWrapper>
-          </StatPair>
-          <StatPair>
-            <StatWrapper>
-              <HalfLoadingBubble />
-              <StatLoadingBubble />
-            </StatWrapper>
-            <StatWrapper>
-              <HalfLoadingBubble />
-              <StatLoadingBubble />
-            </StatWrapper>
-          </StatPair>
-        </StatsLoadingContainer>
-      </TokenStatsSection>
-      <AboutContainer>
-        <AboutHeader>
-          <SquareLoadingBubble />
-        </AboutHeader>
-        <LongLoadingBubble />
-        <LongLoadingBubble />
-        <HalfLoadingBubble />
-
-        <ResourcesContainer>{null}</ResourcesContainer>
-      </AboutContainer>
-      <ContractAddressSection>{null}</ContractAddressSection>
-    </LeftPanel>
-  )
-}
-
-export function LoadingTokenDetails() {
-  return (
-    <TokenDetailsLayout>
-      <LoadingTokenDetail />
-      <RightPanel>
-        <WidgetSkeleton />
-      </RightPanel>
-    </TokenDetailsLayout>
-  )
-}

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -1,11 +1,14 @@
 import { Trans } from '@lingui/macro'
-import { formatToDecimal } from 'analytics/utils'
+import { Currency } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
+import { NATIVE_CHAIN_ID } from 'constants/tokens'
+import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
+import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
-import { currencyAmountToPreciseFloat, formatDollar } from 'utils/formatNumbers'
 
-import { BalanceSummaryProps } from './BalanceSummary'
+import { useFormatBalance, useFormatUsdValue } from './BalanceSummary'
 
 const Wrapper = styled.div`
   align-content: center;
@@ -41,7 +44,7 @@ const BalanceValue = styled.div`
   display: flex;
   gap: 8px;
 `
-const BalanceTotal = styled.div`
+const Balance = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -78,51 +81,28 @@ const SwapButton = styled(StyledInternalLink)`
   max-width: 100vw;
 `
 
-export default function MobileBalanceSummaryFooter({
-  tokenAmount,
-  nativeCurrencyAmount,
-  isNative,
-  tokenAddress,
-}: BalanceSummaryProps & { tokenAddress: string }) {
-  const balanceUsdValue = useStablecoinValue(tokenAmount)
-  const nativeBalanceUsdValue = useStablecoinValue(nativeCurrencyAmount)
-
-  const formattedBalance = tokenAmount
-    ? formatToDecimal(tokenAmount, Math.min(tokenAmount.currency.decimals, 2))
-    : undefined
-
-  const balanceUsd = balanceUsdValue ? currencyAmountToPreciseFloat(balanceUsdValue) : undefined
-
-  const formattedNativeBalance = nativeCurrencyAmount
-    ? formatToDecimal(nativeCurrencyAmount, Math.min(nativeCurrencyAmount.currency.decimals, 2))
-    : undefined
-  const nativeBalanceUsd = nativeBalanceUsdValue ? currencyAmountToPreciseFloat(nativeBalanceUsdValue) : undefined
+export default function MobileBalanceSummaryFooter({ token }: { token: Currency }) {
+  const { account } = useWeb3React()
+  const balance = useCurrencyBalance(account, token)
+  const formattedBalance = useFormatBalance(balance)
+  const usdValue = useStablecoinValue(balance)
+  const formattedUsdValue = useFormatUsdValue(usdValue)
+  const chain = CHAIN_ID_TO_BACKEND_NAME[token.chainId].toLowerCase()
 
   return (
     <Wrapper>
-      {Boolean(formattedBalance !== undefined && !isNative && tokenAmount?.greaterThan(0)) && (
+      {Boolean(account && balance) && (
         <BalanceInfo>
-          <Trans>Your {tokenAmount?.currency?.symbol} balance</Trans>
-          <BalanceTotal>
+          <Trans>Your {token.symbol} balance</Trans>
+          <Balance>
             <BalanceValue>
-              {formattedBalance} {tokenAmount?.currency?.symbol}
+              {formattedBalance} {token.symbol}
             </BalanceValue>
-            <FiatValue>{formatDollar({ num: balanceUsd, isPrice: true })}</FiatValue>
-          </BalanceTotal>
+            <FiatValue>{formattedUsdValue}</FiatValue>
+          </Balance>
         </BalanceInfo>
       )}
-      {Boolean(isNative && nativeCurrencyAmount?.greaterThan(0)) && (
-        <BalanceInfo>
-          <Trans>Your {nativeCurrencyAmount?.currency?.symbol} balance</Trans>
-          <BalanceTotal>
-            <BalanceValue>
-              {formattedNativeBalance} {nativeCurrencyAmount?.currency?.symbol}
-            </BalanceValue>
-            <FiatValue>{formatDollar({ num: nativeBalanceUsd, isPrice: true })}</FiatValue>
-          </BalanceTotal>
-        </BalanceInfo>
-      )}
-      <SwapButton to={`/swap?outputCurrency=${tokenAddress}`}>
+      <SwapButton to={`/swap?chainName=${chain}&outputCurrency=${token.isNative ? NATIVE_CHAIN_ID : token.address}`}>
         <Trans>Swap</Trans>
       </SwapButton>
     </Wrapper>

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -5,12 +5,10 @@ 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, curveCardinal, NumberValue, scaleLinear, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
-import { PricePoint } from 'graphql/data/Token'
+import { PricePoint } from 'graphql/data/util'
 import { TimePeriod } from 'graphql/data/util'
 import { useActiveLocale } from 'hooks/useActiveLocale'
-import { useAtom } from 'jotai'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight, TrendingUp } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
@@ -24,9 +22,6 @@ import {
 } from 'utils/formatChartTimes'
 import { formatDollar } from 'utils/formatNumbers'
 
-import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
-import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
-
 export const DATA_EMPTY = { value: 0, timestamp: 0 }
 
 export function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
@@ -52,14 +47,14 @@ export function getDeltaArrow(delta: number | null | undefined) {
   if (delta === null || delta === undefined) {
     return null
   } else if (Math.sign(delta) < 0) {
-    return <StyledDownArrow size={16} key="arrow-down" />
+    return <StyledDownArrow size={24} key="arrow-down" />
   }
-  return <StyledUpArrow size={16} key="arrow-up" />
+  return <StyledUpArrow size={24} key="arrow-up" />
 }
 
 export function formatDelta(delta: number | null | undefined) {
   // Null-check not including zero
-  if (delta === null || delta === undefined) {
+  if (delta === null || delta === undefined || delta === Infinity || isNaN(delta)) {
     return '-'
   }
   let formattedDelta = delta.toFixed(2) + '%'
@@ -86,46 +81,6 @@ const ArrowCell = styled.div`
   padding-left: 2px;
   display: flex;
 `
-export const TimeOptionsWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`
-export const TimeOptionsContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 4px;
-  gap: 4px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  border-radius: 16px;
-  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;
-  justify-content: center;
-  background-color: ${({ theme, active }) => (active ? theme.backgroundInteractive : 'transparent')};
-  font-weight: 600;
-  font-size: 16px;
-  padding: 6px 12px;
-  border-radius: 12px;
-  line-height: 20px;
-  border: none;
-  cursor: pointer;
-  color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
-  transition-duration: ${({ theme }) => theme.transition.duration.fast};
-  :hover {
-    ${({ active, theme }) => !active && `opacity: ${theme.opacity.hover};`}
-  }
-`
 
 const margin = { top: 100, bottom: 48, crosshair: 72 }
 const timeOptionsHeight = 44
@@ -133,11 +88,11 @@ const timeOptionsHeight = 44
 interface PriceChartProps {
   width: number
   height: number
-  prices: PricePoint[] | undefined
+  prices: PricePoint[] | undefined | null
+  timePeriod: TimePeriod
 }
 
-export function PriceChart({ width, height, prices }: PriceChartProps) {
-  const [timePeriod, setTimePeriod] = useAtom(filterTimeAtom)
+export function PriceChart({ width, height, prices, timePeriod }: PriceChartProps) {
   const locale = useActiveLocale()
   const theme = useTheme()
 
@@ -281,10 +236,16 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
         <MissingPriceChart
           width={width}
           height={graphHeight}
-          message={prices && prices.length === 0 ? <NoV3DataMessage /> : <MissingDataMessage />}
+          message={
+            prices?.length === 0 ? (
+              <Trans>This token doesn&apos;t have chart data because it hasn&apos;t been traded on Uniswap v3</Trans>
+            ) : (
+              <Trans>Missing chart data</Trans>
+            )
+          }
         />
       ) : (
-        <svg width={width} height={graphHeight}>
+        <svg width={width} height={graphHeight} style={{ minWidth: '100%' }}>
           <AnimatedInLineChart
             data={prices}
             getX={getX}
@@ -302,7 +263,7 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
                 tickStroke={theme.backgroundOutline}
                 tickLength={4}
                 hideTicks={true}
-                tickTransform={'translate(0 -5)'}
+                tickTransform="translate(0 -5)"
                 tickValues={ticks}
                 top={graphHeight - 1}
                 tickLabelProps={() => ({
@@ -341,12 +302,25 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
           ) : (
             <AxisBottom scale={timeScale} stroke={theme.backgroundOutline} top={graphHeight - 1} hideTicks />
           )}
+          {!width && (
+            // Ensures an axis is drawn even if the width is not yet initialized.
+            <line
+              x1={0}
+              y1={graphHeight - 1}
+              x2="100%"
+              y2={graphHeight - 1}
+              fill="transparent"
+              shapeRendering="crispEdges"
+              stroke={theme.backgroundOutline}
+              strokeWidth={1}
+            />
+          )}
           <rect
             x={0}
             y={0}
             width={width}
             height={graphHeight}
-            fill={'transparent'}
+            fill="transparent"
             onTouchStart={handleHover}
             onTouchMove={handleHover}
             onMouseMove={handleHover}
@@ -354,21 +328,6 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
           />
         </svg>
       )}
-      <TimeOptionsWrapper>
-        <TimeOptionsContainer>
-          {ORDERED_TIMES.map((time) => (
-            <TimeButton
-              key={DISPLAYS[time]}
-              active={timePeriod === time}
-              onClick={() => {
-                setTimePeriod(time)
-              }}
-            >
-              {DISPLAYS[time]}
-            </TimeButton>
-          ))}
-        </TimeOptionsContainer>
-      </TimeOptionsWrapper>
     </>
   )
 }
@@ -382,16 +341,11 @@ const StyledMissingChart = styled.svg`
 
 const chartBottomPadding = 15
 
-const NoV3DataMessage = () => (
-  <Trans>This token doesn&apos;t have chart data because it hasn&apos;t been traded on Uniswap v3</Trans>
-)
-const MissingDataMessage = () => <Trans>Missing chart data</Trans>
-
 function MissingPriceChart({ width, height, message }: { width: number; height: number; message: ReactNode }) {
   const theme = useTheme()
   const midPoint = height / 2 + 45
   return (
-    <StyledMissingChart width={width} height={height}>
+    <StyledMissingChart width={width} height={height} style={{ minWidth: '100%' }}>
       <path
         d={`M 0 ${midPoint} Q 104 ${midPoint - 70}, 208 ${midPoint} T 416 ${midPoint}
           M 416 ${midPoint} Q 520 ${midPoint - 70}, 624 ${midPoint} T 832 ${midPoint}`}

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
-import { SingleTokenData } from 'graphql/data/Token'
+import { TokenQueryData } from 'graphql/data/Token'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useRef } from 'react'
 import { Twitter } from 'react-feather'
@@ -64,7 +64,7 @@ const ShareAction = styled.div`
 `
 
 interface TokenInfo {
-  token: NonNullable<SingleTokenData>
+  token: NonNullable<TokenQueryData>
   isNative: boolean
 }
 
@@ -91,7 +91,7 @@ export default function ShareButton(tokenInfo: TokenInfo) {
 
   return (
     <ShareButtonDisplay ref={node}>
-      <Share onClick={toggleShare} aria-label={`ShareOptions`} open={open} />
+      <Share onClick={toggleShare} aria-label="ShareOptions" open={open} />
       {open && (
         <ShareActions>
           <ShareAction onClick={() => copyHelperRef.current?.forceCopy()}>

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -0,0 +1,259 @@
+import { WidgetSkeleton } from 'components/Widget'
+import { WIDGET_WIDTH } from 'components/Widget'
+import { ArrowLeft } from 'react-feather'
+import { useParams } from 'react-router-dom'
+import styled, { useTheme } from 'styled-components/macro'
+import { textFadeIn } from 'theme/styles'
+
+import { LoadingBubble } from '../loading'
+import { LogoContainer } from '../TokenTable/TokenRow'
+import { AboutContainer, AboutHeader } from './About'
+import { BreadcrumbNavLink } from './BreadcrumbNavLink'
+import { DeltaContainer, TokenPrice } from './PriceChart'
+import { StatPair, StatsWrapper, StatWrapper } from './StatsSection'
+
+export const Hr = styled.hr`
+  background-color: ${({ theme }) => theme.backgroundOutline};
+  border: none;
+  height: 0.5px;
+`
+export const TokenDetailsLayout = styled.div`
+  display: flex;
+  padding: 0 8px 52px;
+  justify-content: center;
+  width: 100%;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) {
+    gap: 16px;
+    padding: 0 16px;
+  }
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    gap: 40px;
+    padding: 48px 20px;
+  }
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.xl}px) {
+    gap: 60px;
+  }
+`
+export const LeftPanel = styled.div`
+  flex: 1;
+  max-width: 780px;
+  overflow: hidden;
+`
+export const RightPanel = styled.div`
+  display: none;
+  flex-direction: column;
+  gap: 20px;
+  width: ${WIDGET_WIDTH}px;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
+    display: flex;
+  }
+`
+export const ChartContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 436px;
+  margin-bottom: 24px;
+  align-items: flex-start;
+  width: 100%;
+`
+const LoadingChartContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  height: 100%;
+  margin-bottom: 44px;
+  padding-bottom: 66px;
+  overflow: hidden;
+`
+export const TokenInfoContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+`
+export const TokenNameCell = styled.div`
+  display: flex;
+  gap: 8px;
+  font-size: 20px;
+  line-height: 28px;
+  align-items: center;
+  ${textFadeIn}
+`
+/* Loading state bubbles */
+const DetailBubble = styled(LoadingBubble)`
+  height: 16px;
+  width: 180px;
+`
+const SquaredBubble = styled(DetailBubble)`
+  height: 32px;
+  border-radius: 8px;
+`
+const TokenLogoBubble = styled(DetailBubble)`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+`
+const TitleBubble = styled(DetailBubble)`
+  width: 140px;
+`
+const PriceBubble = styled(SquaredBubble)`
+  margin-top: 2px;
+  height: 38px;
+`
+const DeltaBubble = styled(DetailBubble)`
+  margin-top: 6px;
+  width: 96px;
+  height: 20px;
+`
+const SectionBubble = styled(SquaredBubble)`
+  width: 96px;
+`
+const StatTitleBubble = styled(DetailBubble)`
+  width: 25%;
+  margin-bottom: 4px;
+`
+const StatBubble = styled(SquaredBubble)`
+  width: 50%;
+`
+const WideBubble = styled(DetailBubble)`
+  margin-bottom: 6px;
+  width: 100%;
+`
+const HalfWideBubble = styled(WideBubble)`
+  width: 50%;
+`
+
+const StatsLoadingContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+`
+const ChartAnimation = styled.div`
+  animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+  display: flex;
+  overflow: hidden;
+  margin-top: 90px;
+
+  @keyframes wave {
+    0% {
+      margin-left: 0;
+    }
+    100% {
+      margin-left: -800px;
+    }
+  }
+`
+const Space = styled.div<{ heightSize: number }>`
+  height: ${({ heightSize }) => `${heightSize}px`};
+`
+
+function Wave() {
+  const theme = useTheme()
+  return (
+    <svg width="416" height="160" xmlns="http://www.w3.org/2000/svg">
+      <path d="M 0 80 Q 104 10, 208 80 T 416 80" stroke={theme.backgroundOutline} fill="transparent" strokeWidth="2" />
+    </svg>
+  )
+}
+
+export function LoadingChart() {
+  return (
+    <ChartContainer>
+      <TokenPrice>
+        <PriceBubble />
+      </TokenPrice>
+      <DeltaContainer>
+        <DeltaBubble />
+      </DeltaContainer>
+      <Space heightSize={6} />
+      <LoadingChartContainer>
+        <div>
+          <ChartAnimation>
+            <Wave />
+            <Wave />
+            <Wave />
+            <Wave />
+            <Wave />
+          </ChartAnimation>
+        </div>
+      </LoadingChartContainer>
+    </ChartContainer>
+  )
+}
+
+function LoadingStats() {
+  return (
+    <StatsWrapper>
+      <SectionBubble />
+      <StatsLoadingContainer>
+        <StatPair>
+          <StatWrapper>
+            <StatTitleBubble />
+            <StatBubble />
+          </StatWrapper>
+          <StatWrapper>
+            <StatTitleBubble />
+            <StatBubble />
+          </StatWrapper>
+        </StatPair>
+        <StatPair>
+          <StatWrapper>
+            <StatTitleBubble />
+            <StatBubble />
+          </StatWrapper>
+          <StatWrapper>
+            <StatTitleBubble />
+            <StatBubble />
+          </StatWrapper>
+        </StatPair>
+      </StatsLoadingContainer>
+    </StatsWrapper>
+  )
+}
+
+/* Loading State: row component with loading bubbles */
+export default function TokenDetailsSkeleton() {
+  const { chainName } = useParams<{ chainName?: string }>()
+  return (
+    <LeftPanel>
+      <BreadcrumbNavLink to={{ chainName } ? `/tokens/${chainName}` : `/explore`}>
+        <ArrowLeft size={14} /> Tokens
+      </BreadcrumbNavLink>
+      <TokenInfoContainer>
+        <TokenNameCell>
+          <LogoContainer>
+            <TokenLogoBubble />
+          </LogoContainer>
+          <TitleBubble />
+        </TokenNameCell>
+      </TokenInfoContainer>
+      <LoadingChart />
+
+      <Space heightSize={4} />
+      <LoadingStats />
+      <Hr />
+      <AboutContainer>
+        <AboutHeader>
+          <SectionBubble />
+        </AboutHeader>
+      </AboutContainer>
+      <WideBubble />
+      <WideBubble />
+      <HalfWideBubble />
+    </LeftPanel>
+  )
+}
+
+export function TokenDetailsPageSkeleton() {
+  return (
+    <TokenDetailsLayout>
+      <TokenDetailsSkeleton />
+      <RightPanel>
+        <WidgetSkeleton />
+      </RightPanel>
+    </TokenDetailsLayout>
+  )
+}

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { textFadeIn } from 'theme/animations'
+import { textFadeIn } from 'theme/styles'
 import { formatDollar } from 'utils/formatNumbers'
 
 import { TokenSortMethod } from '../state'
@@ -44,7 +44,7 @@ const StatPrice = styled.span`
 const NoData = styled.div`
   color: ${({ theme }) => theme.textTertiary};
 `
-const Wrapper = styled.div`
+export const StatsWrapper = styled.div`
   gap: 16px;
   ${textFadeIn}
 `
@@ -84,7 +84,7 @@ export default function StatsSection(props: StatsSectionProps) {
   const { priceLow52W, priceHigh52W, TVL, volume24H } = props
   if (TVL || volume24H || priceLow52W || priceHigh52W) {
     return (
-      <Wrapper>
+      <StatsWrapper>
         <Header>
           <Trans>Stats</Trans>
         </Header>
@@ -110,7 +110,7 @@ export default function StatsSection(props: StatsSectionProps) {
             <Stat value={priceHigh52W} title={<Trans>52W high</Trans>} isPrice={true} />
           </StatPair>
         </TokenStatsSection>
-      </Wrapper>
+      </StatsWrapper>
     )
   } else {
     return <NoData>No stats available</NoData>

src/components/Tokens/TokenDetails/TimeSelector.tsx

@@ -0,0 +1,76 @@
+import { TimePeriod } from 'graphql/data/util'
+import { startTransition, useState } from 'react'
+import styled from 'styled-components/macro'
+
+import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
+import { DISPLAYS, ORDERED_TIMES } from '../TokenTable/TimeSelector'
+
+export const TimeOptionsWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+`
+export const TimeOptionsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+  gap: 4px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-radius: 16px;
+  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;
+  justify-content: center;
+  background-color: ${({ theme, active }) => (active ? theme.backgroundInteractive : 'transparent')};
+  font-weight: 600;
+  font-size: 16px;
+  padding: 6px 12px;
+  border-radius: 12px;
+  line-height: 20px;
+  border: none;
+  cursor: pointer;
+  color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  :hover {
+    ${({ active, theme }) => !active && `opacity: ${theme.opacity.hover};`}
+  }
+`
+
+export default function TimePeriodSelector({
+  currentTimePeriod,
+  onTimeChange,
+}: {
+  currentTimePeriod: TimePeriod
+  onTimeChange: (t: TimePeriod) => void
+}) {
+  const [timePeriod, setTimePeriod] = useState(currentTimePeriod)
+  return (
+    <TimeOptionsWrapper>
+      <TimeOptionsContainer>
+        {ORDERED_TIMES.map((time) => (
+          <TimeButton
+            key={DISPLAYS[time]}
+            active={timePeriod === time}
+            onClick={() => {
+              startTransition(() => onTimeChange(time))
+              setTimePeriod(time)
+            }}
+          >
+            {DISPLAYS[time]}
+          </TimeButton>
+        ))}
+      </TimeOptionsContainer>
+    </TimeOptionsWrapper>
+  )
+}

src/components/Tokens/TokenDetails/index.tsx

@@ -0,0 +1,215 @@
+import { Trans } from '@lingui/macro'
+import { Trace } from '@uniswap/analytics'
+import { PageName } from '@uniswap/analytics-events'
+import { Currency, NativeCurrency, Token } from '@uniswap/sdk-core'
+import CurrencyLogo from 'components/CurrencyLogo'
+import { AboutSection } from 'components/Tokens/TokenDetails/About'
+import AddressSection from 'components/Tokens/TokenDetails/AddressSection'
+import BalanceSummary from 'components/Tokens/TokenDetails/BalanceSummary'
+import { BreadcrumbNavLink } from 'components/Tokens/TokenDetails/BreadcrumbNavLink'
+import ChartSection from 'components/Tokens/TokenDetails/ChartSection'
+import MobileBalanceSummaryFooter from 'components/Tokens/TokenDetails/MobileBalanceSummaryFooter'
+import ShareButton from 'components/Tokens/TokenDetails/ShareButton'
+import TokenDetailsSkeleton, {
+  Hr,
+  LeftPanel,
+  RightPanel,
+  TokenDetailsLayout,
+  TokenInfoContainer,
+  TokenNameCell,
+} from 'components/Tokens/TokenDetails/Skeleton'
+import StatsSection from 'components/Tokens/TokenDetails/StatsSection'
+import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
+import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
+import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
+import Widget from 'components/Widget'
+import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { DEFAULT_ERC20_DECIMALS, NATIVE_CHAIN_ID, nativeOnChain } from 'constants/tokens'
+import { checkWarning } from 'constants/tokenSafety'
+import { TokenPriceQuery } from 'graphql/data/__generated__/TokenPriceQuery.graphql'
+import { Chain, TokenQuery } from 'graphql/data/Token'
+import { QueryToken, tokenQuery, TokenQueryData } from 'graphql/data/Token'
+import { TopToken } from 'graphql/data/TopTokens'
+import { CHAIN_NAME_TO_CHAIN_ID } from 'graphql/data/util'
+import { useIsUserAddedTokenOnChain } from 'hooks/Tokens'
+import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
+import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
+import { useCallback, useMemo, useState, useTransition } from 'react'
+import { ArrowLeft } from 'react-feather'
+import { PreloadedQuery, usePreloadedQuery } from 'react-relay'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+import { RefetchPricesFunction } from './ChartSection'
+
+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?: TokenQueryData | TopToken, nativeCurrency?: Token | NativeCurrency) {
+  const chainId = token ? CHAIN_NAME_TO_CHAIN_ID[token.chain] : SupportedChainId.MAINNET
+  return [
+    ...useCurrencyLogoURIs(nativeCurrency),
+    ...useCurrencyLogoURIs({ ...token, chainId }),
+    token?.project?.logoUrl,
+  ][0]
+}
+
+type TokenDetailsProps = {
+  tokenAddress: string | undefined
+  chain: Chain
+  tokenQueryReference: PreloadedQuery<TokenQuery>
+  priceQueryReference: PreloadedQuery<TokenPriceQuery> | null | undefined
+  refetchTokenPrices: RefetchPricesFunction
+}
+export default function TokenDetails({
+  tokenAddress,
+  chain,
+  tokenQueryReference,
+  priceQueryReference,
+  refetchTokenPrices,
+}: TokenDetailsProps) {
+  if (!tokenAddress) {
+    throw new Error(`Invalid token details route: tokenAddress param is undefined`)
+  }
+
+  const pageChainId = CHAIN_NAME_TO_CHAIN_ID[chain]
+  const nativeCurrency = nativeOnChain(pageChainId)
+  const isNative = tokenAddress === NATIVE_CHAIN_ID
+
+  const tokenQueryData = usePreloadedQuery(tokenQuery, tokenQueryReference).tokens?.[0]
+  const token = useMemo(() => {
+    if (isNative) return nativeCurrency
+    if (tokenQueryData) return new QueryToken(tokenQueryData)
+    return new Token(pageChainId, tokenAddress, DEFAULT_ERC20_DECIMALS)
+  }, [isNative, nativeCurrency, pageChainId, tokenAddress, tokenQueryData])
+
+  const tokenWarning = tokenAddress ? checkWarning(tokenAddress) : null
+  const isBlockedToken = tokenWarning?.canProceed === false
+
+  const navigate = useNavigate()
+  // Wrapping navigate in a transition prevents Suspense from unnecessarily showing fallbacks again.
+  const [isPending, startTokenTransition] = useTransition()
+  const navigateToTokenForChain = useCallback(
+    (chain: Chain) => {
+      const chainName = chain.toLowerCase()
+      const token = tokenQueryData?.project?.tokens.find((token) => token.chain === chain && token.address)
+      const address = isNative ? NATIVE_CHAIN_ID : token?.address
+      if (!address) return
+      startTokenTransition(() => navigate(`/tokens/${chainName}/${address}`))
+    },
+    [isNative, navigate, startTokenTransition, tokenQueryData?.project?.tokens]
+  )
+  useOnGlobalChainSwitch(navigateToTokenForChain)
+  const navigateToWidgetSelectedToken = useCallback(
+    (token: Currency) => {
+      const address = token.isNative ? NATIVE_CHAIN_ID : token.address
+      startTokenTransition(() => navigate(`/tokens/${chain.toLowerCase()}/${address}`))
+    },
+    [chain, navigate]
+  )
+
+  const [continueSwap, setContinueSwap] = useState<{ resolve: (value: boolean | PromiseLike<boolean>) => void }>()
+
+  // Show token safety modal if Swap-reviewing a warning token, at all times if the current token is blocked
+  const shouldShowSpeedbump = !useIsUserAddedTokenOnChain(tokenAddress, pageChainId) && tokenWarning !== null
+  const onReviewSwapClick = useCallback(
+    () => new Promise<boolean>((resolve) => (shouldShowSpeedbump ? setContinueSwap({ resolve }) : resolve(true))),
+    [shouldShowSpeedbump]
+  )
+
+  const onResolveSwap = useCallback(
+    (value: boolean) => {
+      continueSwap?.resolve(value)
+      setContinueSwap(undefined)
+    },
+    [continueSwap, setContinueSwap]
+  )
+
+  const logoSrc = useTokenLogoURI(tokenQueryData, isNative ? nativeCurrency : undefined)
+  const L2Icon = getChainInfo(pageChainId)?.circleLogoUrl
+
+  return (
+    <Trace page={PageName.TOKEN_DETAILS_PAGE} properties={{ tokenAddress, tokenName: token?.name }} shouldLogImpression>
+      <TokenDetailsLayout>
+        {tokenQueryData && !isPending ? (
+          <LeftPanel>
+            <BreadcrumbNavLink to={`/tokens/${chain.toLowerCase()}`}>
+              <ArrowLeft size={14} /> Tokens
+            </BreadcrumbNavLink>
+            <TokenInfoContainer>
+              <TokenNameCell>
+                <LogoContainer>
+                  <CurrencyLogo
+                    src={logoSrc}
+                    size="32px"
+                    symbol={isNative ? nativeCurrency?.symbol : token?.symbol}
+                    currency={isNative ? nativeCurrency : token}
+                  />
+                  <L2NetworkLogo networkUrl={L2Icon} size="16px" />
+                </LogoContainer>
+                {token?.name ?? <Trans>Name not found</Trans>}
+                <TokenSymbol>{token?.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
+              </TokenNameCell>
+              <TokenActions>
+                {tokenQueryData?.name && tokenQueryData.symbol && tokenQueryData.address && (
+                  <ShareButton token={tokenQueryData} isNative={!!nativeCurrency} />
+                )}
+              </TokenActions>
+            </TokenInfoContainer>
+            <ChartSection priceQueryReference={priceQueryReference} refetchTokenPrices={refetchTokenPrices} />
+            <StatsSection
+              TVL={tokenQueryData.market?.totalValueLocked?.value}
+              volume24H={tokenQueryData.market?.volume24H?.value}
+              priceHigh52W={tokenQueryData.market?.priceHigh52W?.value}
+              priceLow52W={tokenQueryData.market?.priceLow52W?.value}
+            />
+            {!isNative && (
+              <>
+                <Hr />
+                <AboutSection
+                  address={tokenQueryData.address ?? ''}
+                  description={tokenQueryData.project?.description}
+                  homepageUrl={tokenQueryData.project?.homepageUrl}
+                  twitterName={tokenQueryData.project?.twitterName}
+                />
+                <AddressSection address={tokenQueryData.address ?? ''} />
+              </>
+            )}
+          </LeftPanel>
+        ) : (
+          <TokenDetailsSkeleton />
+        )}
+
+        <RightPanel>
+          <Widget
+            token={token ?? nativeCurrency}
+            onTokenChange={navigateToWidgetSelectedToken}
+            onReviewSwapClick={onReviewSwapClick}
+          />
+          {tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress ?? ''} warning={tokenWarning} />}
+          {token && <BalanceSummary token={token} />}
+        </RightPanel>
+        {token && <MobileBalanceSummaryFooter token={token} />}
+
+        {tokenAddress && (
+          <TokenSafetyModal
+            isOpen={isBlockedToken || !!continueSwap}
+            tokenAddress={tokenAddress}
+            onContinue={() => onResolveSwap(true)}
+            onBlocked={() => navigate(-1)}
+            onCancel={() => onResolveSwap(false)}
+            showCancel={true}
+          />
+        )}
+      </TokenDetailsLayout>
+    </Trace>
+  )
+}

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -103,7 +103,7 @@ export default function NetworkFilter() {
 
   return (
     <StyledMenu ref={node}>
-      <NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
+      <NetworkFilterOption onClick={toggleMenu} aria-label="networkFilter" active={open}>
         <StyledMenuContent>
           <NetworkLabel>
             <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { ElementName, Event, EventName } from 'analytics/constants'
-import { TraceEvent } from 'analytics/TraceEvent'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
 import useDebounce from 'hooks/useDebounce'
@@ -79,7 +79,7 @@ export default function SearchBar() {
       <Trans
         render={({ translation }) => (
           <TraceEvent
-            events={[Event.onFocus]}
+            events={[BrowserEvent.onFocus]}
             name={EventName.EXPLORE_SEARCH_SELECTED}
             element={ElementName.EXPLORE_SEARCH_INPUT}
           >

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -111,7 +111,7 @@ export default function TimeSelector() {
 
   return (
     <StyledMenu ref={node}>
-      <FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}>
+      <FilterOption onClick={toggleMenu} aria-label="timeSelector" active={open}>
         <StyledMenuContent>
           {DISPLAYS[activeTime]}
           <Chevron open={open}>