fix: release phase 1 nav bar (#5111)

* init

* just release phase 1 nav bar

* oops

.env

@@ -1,8 +1,9 @@
+# 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"
+REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"

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

.github/workflows/release.yaml

@@ -1,7 +1,7 @@
 name: Release
 on:
   schedule:
-    - cron: '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
+    - cron: '0 12 * * 1-5' # every day 12:00 UTC Monday-Friday
   # manual trigger
   workflow_dispatch:
 

package.json

@@ -146,7 +146,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",
@@ -169,7 +169,6 @@
     "@web3-react/types": "^8.0.20-beta.0",
     "@web3-react/url": "^8.0.25-beta.0",
     "@web3-react/walletconnect": "^8.0.35-beta.0",
-    "ajv": "^6.12.3",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "cids": "^1.0.0",
@@ -195,6 +194,7 @@
     "polyfill-object.fromentries": "^1.0.1",
     "popper-max-size-modifier": "^0.2.0",
     "qs": "^6.9.4",
+    "rc-slider": "^10.0.1",
     "react": "^18.2.0",
     "react-confetti": "^6.0.0",
     "react-dom": "^18.2.0",

public/index.html

@@ -17,6 +17,7 @@
 
   <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.

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/constants.ts

@@ -12,8 +12,19 @@ export enum EventName {
   EXPLORE_SEARCH_SELECTED = 'Explore Search Selected',
   EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
   PAGE_VIEWED = 'Page Viewed',
+  NAVBAR_RESULT_SELECTED = 'Navbar Result Selected',
   NAVBAR_SEARCH_SELECTED = 'Navbar Search Selected',
   NAVBAR_SEARCH_EXITED = 'Navbar Search Exited',
+  NFT_ACTIVITY_SELECTED = 'NFT Activity Selected',
+  NFT_BUY_ADDED = 'NFT Buy Bag Added',
+  NFT_BUY_BAG_CHANGED = 'NFT Buy Bag Changed',
+  NFT_BUY_BAG_PAY = 'NFT Buy Bag Pay Clicked',
+  NFT_BUY_BAG_REFUNDED = 'NFT Buy Bag Refunded',
+  NFT_BUY_BAG_SIGNED = 'NFT Buy Bag Signed',
+  NFT_BUY_BAG_SUCCEEDED = 'NFT Buy Bag Succeeded',
+  NFT_FILTER_OPENED = 'NFT Collection Filter Opened',
+  NFT_FILTER_SELECTED = 'NFT Filter Selected',
+  NFT_TRENDING_ROW_SELECTED = 'Trending Row Selected',
   SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
   SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
@@ -74,6 +85,9 @@ export enum SWAP_PRICE_UPDATE_USER_RESPONSE {
  * Known pages in the app. Highest order context.
  */
 export enum PageName {
+  NFT_COLLECTION_PAGE = 'nft-collection-page',
+  NFT_DETAILS_PAGE = 'nft-details-page',
+  NFT_EXPLORE_PAGE = 'nft-explore-page',
   TOKEN_DETAILS_PAGE = 'token-details',
   TOKENS_PAGE = 'tokens-page',
   POOL_PAGE = 'pool-page',
@@ -90,6 +104,7 @@ export enum PageName {
 export enum SectionName {
   CURRENCY_INPUT_PANEL = 'swap-currency-input',
   CURRENCY_OUTPUT_PANEL = 'swap-currency-output',
+  NAVBAR_SEARCH = 'Navbar Search',
   WIDGET = 'widget',
   // alphabetize additional section names.
 }
@@ -97,6 +112,7 @@ export enum SectionName {
 /** Known modals for analytics purposes. */
 export enum ModalName {
   CONFIRM_SWAP = 'confirm-swap-modal',
+  NFT_TX_COMPLETE = 'nft-tx-complete-modal',
   TOKEN_SELECTOR = 'token-selector-modal',
   // alphabetize additional modal names.
 }
@@ -115,6 +131,11 @@ export enum ElementName {
   IMPORT_TOKEN_BUTTON = 'import-token-button',
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
   NAVBAR_SEARCH_INPUT = 'navbar-search-input',
+  NFT_ACTIVITY_TAB = 'nft-activity-tab',
+  NFT_BUY_BAG_PAY_BUTTON = 'nft-buy-bag-pay-button',
+  NFT_FILTER_BUTTON = 'nft-filter-button',
+  NFT_FILTER_OPTION = 'nft-filter-option',
+  NFT_TRENDING_ROW = 'nft-trending-row',
   PRICE_UPDATE_ACCEPT_BUTTON = 'price-update-accept-button',
   SWAP_BUTTON = 'swap-button',
   SWAP_DETAILS_DROPDOWN = 'swap-details-dropdown',
@@ -136,3 +157,21 @@ export enum Event {
   onSelect = 'onSelect',
   // alphabetize additional events.
 }
+
+/** Known navbar search result types */
+export enum NavBarSearchTypes {
+  COLLECTION_SUGGESTION = 'collection-suggestion',
+  COLLECTION_TRENDING = 'collection-trending',
+  RECENT_SEARCH = 'recent',
+  TOKEN_SUGGESTION = 'token-suggestion',
+  TOKEN_TRENDING = 'token-trending',
+}
+
+/**
+ * Known Filter Types for NFTs
+ */
+export enum FilterTypes {
+  MARKETPLACE = 'Marketplace',
+  PRICE_RANGE = 'Price Range',
+  TRAIT = 'Trait',
+}

src/analytics/index.ts

@@ -1,29 +1,29 @@
 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
+const DUMMY_KEY = '00000000000000000000000000000000'
+const PROXY_URL = process.env.REACT_APP_AMPLITUDE_PROXY_URL
 
 /**
- * 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.
+ * Initializes Amplitude SDK and configures it to send events to a Uniswap reverse proxy,
+ * which relays to events to relevant Amplitude endpoints. You must be a
+ * member of the organization on Amplitude to view logged events.
  */
 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.`)
+  if (typeof PROXY_URL === 'undefined') {
+    console.error('REACT_APP_AMPLITUDE_PROXY_URL is undefined, Amplitude analytics will not run.')
     return
   }
   init(
-    API_KEY,
+    DUMMY_KEY,
     /* userId= */ undefined, // User ID should be undefined to let Amplitude default to Device ID
     /* options= */
     {
+      // Configure the SDK to work with alternate endpoint
+      serverUrl: PROXY_URL,
       // 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,
+        ipAddress: false,
         carrier: false,
         city: false,
         region: false,
@@ -35,8 +35,7 @@ export function initializeAnalytics() {
 
 /** Sends an event to Amplitude. */
 export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
-  const origin = window.location.origin
-  if (!API_KEY) {
+  if (!PROXY_URL) {
     console.log(`[analytics(${eventName})]: ${JSON.stringify(eventProperties)}`)
     return
   }

src/components/Blocklist/index.tsx

@@ -1,51 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { ReactNode, useMemo } from 'react'
-
-const BLOCKED_ADDRESSES: string[] = [
-  '0x7Db418b5D567A4e0E8c59Ad71BE1FcE48f3E6107',
-  '0x72a5843cc08275C8171E582972Aa4fDa8C397B2A',
-  '0x7F19720A857F834887FC9A7bC0a0fBe7Fc7f8102',
-  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
-  '0x1da5821544e25c636c1417Ba96Ade4Cf6D2f9B5A',
-  '0x9F4cda013E354b8fC285BF4b9A60460cEe7f7Ea9',
-  '0x19Aa5Fe80D33a56D56c78e82eA5E50E5d80b4Dff',
-  '0x2f389cE8bD8ff92De3402FFCe4691d17fC4f6535',
-  '0xe7aa314c77F4233C18C6CC84384A9247c0cf367B',
-  '0x7F367cC41522cE07553e823bf3be79A889DEbe1B',
-  '0xd882cFc20F52f2599D84b8e8D58C7FB62cfE344b',
-  '0x901bb9583b24D97e995513C6778dc6888AB6870e',
-  '0x8576aCC5C05D6Ce88f4e49bf65BdF0C62F91353C',
-  '0xC8a65Fadf0e0dDAf421F28FEAb69Bf6E2E589963',
-  '0x308eD4B7b49797e1A98D3818bFF6fe5385410370',
-  '0x67d40EE1A85bf4a4Bb7Ffae16De985e8427B',
-  '0x6f1ca141a28907f78ebaa64fb83a9088b02a83',
-  '0x6acdfba02d390b97ac2b2d42a63e85293bcc1',
-  '0x48549a34ae37b12f6a30566245176994e17c6',
-  '0x5512d943ed1f7c8a43f3435c85f7ab68b30121',
-  '0xC455f7fd3e0e12afd51fba5c106909934D8A0e4a',
-  '0x3CBdeD43EFdAf0FC77b9C55F6fC9988fCC9b757d',
-  '0x67d40EE1A85bf4a4Bb7Ffae16De985e8427B6b45',
-  '0x6F1cA141A28907F78Ebaa64fb83A9088b02A8352',
-  '0x6aCDFBA02D390b97Ac2b2d42A63E85293BCc160e',
-  '0x48549a34ae37b12f6a30566245176994e17c6b4a',
-  '0x5512d943ed1f7c8a43f3435c85f7ab68b30121b0',
-  '0xC455f7fd3e0e12afd51fba5c106909934D8A0e4a',
-  '0x629e7Da20197a5429d30da36E77d06CdF796b71A',
-  '0x7FF9cFad3877F21d41Da833E2F775dB0569eE3D9',
-  '0x098B716B8Aaf21512996dC57EB0615e2383E2f96',
-  '0xfEC8A60023265364D066a1212fDE3930F6Ae8da7',
-]
-
-export default function Blocklist({ children }: { children: ReactNode }) {
-  const { account } = useWeb3React()
-  const blocked: boolean = useMemo(() => Boolean(account && BLOCKED_ADDRESSES.indexOf(account) !== -1), [account])
-  if (blocked) {
-    return (
-      <div>
-        <Trans>Blocked address</Trans>
-      </div>
-    )
-  }
-  return <>{children}</>
-}

src/components/Button/index.tsx

@@ -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;
   }
 `
@@ -378,3 +365,34 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
     )
   }
 }
+
+export const MediumButton = styled.button`
+  align-items: center;
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  border-radius: 16px;
+  border: 0;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-weight: 600;
+  gap: 12px;
+  justify-content: center;
+  padding: 16px;
+  transition: 150ms ease background-color opacity;
+
+  :disabled {
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    cursor: default;
+    opacity: 0.6;
+  }
+  :hover {
+    background-color: ${({ theme }) => theme.stateOverlayHover};
+  }
+  :active {
+    background-color: ${({ theme }) => theme.stateOverlayPressed};
+  }
+  :focus {
+    background-color: ${({ theme }) => theme.stateOverlayPressed};
+  }
+`

src/components/Charts/SparklineChart.tsx

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

src/components/CurrencyInputPanel/FiatValue.tsx

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

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -7,11 +7,10 @@ import { TraceEvent } from 'analytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
-import styled, { css, useTheme } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -25,45 +24,31 @@ import { RowBetween, RowFixed } from '../Row'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
-const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: boolean }>`
+const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, redesignFlag, hideInput }) =>
-    redesignFlag ? 'transparent' : hideInput ? 'transparent' : theme.deprecated_bg2};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
   will-change: height;
 `
 
-const FixedContainer = styled.div<{ redesignFlag: boolean }>`
+const FixedContainer = styled.div`
   width: 100%;
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg2)};
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
 `
 
-const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
-  min-height: ${({ redesignFlag }) => redesignFlag && '44px'};
+const Container = styled.div<{ hideInput: boolean }>`
+  min-height: 44px;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  ${({ theme, hideInput, disabled, redesignFlag }) =>
-    !redesignFlag &&
-    !disabled &&
-    `
-    :focus,
-    :hover {
-      border: 1px solid ${hideInput ? ' transparent' : theme.deprecated_bg3};
-    }
-  `}
 `
 
 const CurrencySelect = styled(ButtonGray)<{
@@ -71,22 +56,14 @@ const CurrencySelect = styled(ButtonGray)<{
   selected: boolean
   hideInput?: boolean
   disabled?: boolean
-  redesignFlag: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme, redesignFlag }) =>
-    redesignFlag
-      ? selected
-        ? theme.backgroundInteractive
-        : theme.accentAction
-      : selected
-      ? theme.deprecated_bg2
-      : theme.deprecated_primary1};
+  background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
   cursor: pointer;
-  height: ${({ hideInput, redesignFlag }) => (redesignFlag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
+  height: unset;
   border-radius: 16px;
   outline: none;
   user-select: none;
@@ -94,72 +71,52 @@ const CurrencySelect = styled(ButtonGray)<{
   font-size: 24px;
   font-weight: 400;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  padding: ${({ selected, redesignFlag }) =>
-    redesignFlag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px'};
-  gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
+  padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')};
+  gap: 8px;
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
 
-  ${({ redesignFlag, selected }) =>
-    !redesignFlag &&
-    css`
-      &:hover {
-        background-color: ${({ theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1))};
-      }
+  &:hover,
+  &:active {
+    background-color: ${({ theme, selected }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
+  }
 
-      &:active {
-        background-color: ${({ theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1))};
-      }
-    `}
+  &:before {
+    background-size: 100%;
+    border-radius: inherit;
 
-  ${({ redesignFlag, selected }) =>
-    redesignFlag &&
-    css`
-      &:hover,
-      &:active {
-        background-color: ${({ theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
-      }
+    position: absolute;
+    top: 0;
+    left: 0;
 
-      &:before {
-        background-size: 100%;
-        border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    content: '';
+  }
 
-        position: absolute;
-        top: 0;
-        left: 0;
+  &:hover:before {
+    background-color: ${({ theme }) => theme.stateOverlayHover};
+  }
 
-        width: 100%;
-        height: 100%;
-        content: '';
-      }
-
-      &:hover:before {
-        background-color: ${({ theme }) => theme.stateOverlayHover};
-      }
-
-      &:active:before {
-        background-color: ${({ theme }) => theme.stateOverlayPressed};
-      }
-    `}
+  &:active:before {
+    background-color: ${({ theme }) => theme.stateOverlayPressed};
+  }
 
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
 
-const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
+const InputRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   justify-content: space-between;
-  padding: ${({ selected, redesignFlag }) =>
-    redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
 `
 
-const LabelRow = styled.div<{ redesignFlag: boolean }>`
+const LabelRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 0.75rem;
   line-height: 1rem;
-  padding: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0 1rem 1rem')};
 
   span:hover {
     cursor: pointer;
@@ -167,11 +124,10 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
   }
 `
 
-const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
+const FiatRow = styled(LabelRow)`
   justify-content: flex-end;
-  min-height: ${({ redesignFlag }) => redesignFlag && '20px'};
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px 0px 0px'};
-  height: ${({ redesignFlag }) => !redesignFlag && '24px'};
+  min-height: 20px;
+  padding: 8px 0px 0px 0px;
 `
 
 const Aligner = styled.span`
@@ -181,34 +137,30 @@ const Aligner = styled.span`
   width: 100%;
 `
 
-const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>`
+const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
-  margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
+  margin-left: 8px;
 
   path {
     stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
-    stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
+    stroke-width: 2px;
   }
 `
 
-const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
+const StyledTokenName = styled.span<{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '18px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+  font-size: 20px;
+  font-weight: 600;
 `
 
-const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boolean }>`
+const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
-  background-color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_primary5};
   border: none;
-  text-transform: ${({ redesignFlag }) => !redesignFlag && 'uppercase'};
-  border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
+  color: ${({ theme }) => theme.accentAction};
   cursor: pointer;
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
-  margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
+  font-size: 14px;
+  font-weight: 600;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
@@ -222,12 +174,12 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
   }
 `
 
-const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
+const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
-  font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
-  line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
-  font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
+  font-size: 36px;
+  line-height: 44px;
+  font-variant: small-caps;
 `
 
 interface SwapCurrencyInputPanelProps {
@@ -277,8 +229,6 @@ export default function SwapCurrencyInputPanel({
 }: SwapCurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
   const { account, chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
 
@@ -289,9 +239,9 @@ export default function SwapCurrencyInputPanel({
   const chainAllowed = isSupportedChain(chainId)
 
   return (
-    <InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}>
+    <InputPanel id={id} hideInput={hideInput} {...rest}>
       {locked && (
-        <FixedContainer redesignFlag={redesignFlagEnabled}>
+        <FixedContainer>
           <AutoColumn gap="sm" justify="center">
             <Lock />
             <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
@@ -300,12 +250,8 @@ export default function SwapCurrencyInputPanel({
           </AutoColumn>
         </FixedContainer>
       )}
-      <Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
-        <InputRow
-          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
-          selected={!onCurrencySelect}
-          redesignFlag={redesignFlagEnabled}
-        >
+      <Container hideInput={hideInput}>
+        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>
           {!hideInput && (
             <StyledNumericalInput
               className="token-amount-input"
@@ -313,7 +259,6 @@ export default function SwapCurrencyInputPanel({
               onUserInput={onUserInput}
               disabled={!chainAllowed}
               $loading={loading}
-              redesignFlag={redesignFlagEnabled}
             />
           )}
 
@@ -322,7 +267,6 @@ export default function SwapCurrencyInputPanel({
             visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
-            redesignFlag={redesignFlagEnabled}
             className="open-currency-select-button"
             onClick={() => {
               if (onCurrencySelect) {
@@ -340,15 +284,11 @@ export default function SwapCurrencyInputPanel({
                   <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
                 ) : null}
                 {pair ? (
-                  <StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}>
+                  <StyledTokenName className="pair-name-container">
                     {pair?.token0.symbol}:{pair?.token1.symbol}
                   </StyledTokenName>
                 ) : (
-                  <StyledTokenName
-                    className="token-symbol-container"
-                    active={Boolean(currency && currency.symbol)}
-                    redesignFlag={redesignFlagEnabled}
-                  >
+                  <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
                     {(currency && currency.symbol && currency.symbol.length > 20
                       ? currency.symbol.slice(0, 4) +
                         '...' +
@@ -357,12 +297,12 @@ export default function SwapCurrencyInputPanel({
                   </StyledTokenName>
                 )}
               </RowFixed>
-              {onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
+              {onCurrencySelect && <StyledDropDown selected={!!currency} />}
             </Aligner>
           </CurrencySelect>
         </InputRow>
         {!hideInput && !hideBalance && currency && (
-          <FiatRow redesignFlag={redesignFlagEnabled}>
+          <FiatRow>
             <RowBetween>
               <LoadingOpacityContainer $loading={loading}>
                 <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
@@ -370,8 +310,8 @@ export default function SwapCurrencyInputPanel({
               {account ? (
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.DeprecatedBody
-                    color={redesignFlag ? theme.textSecondary : theme.deprecated_text3}
-                    fontWeight={redesignFlag ? 400 : 500}
+                    color={theme.textSecondary}
+                    fontWeight={400}
                     fontSize={14}
                     style={{ display: 'inline' }}
                   >
@@ -389,7 +329,7 @@ export default function SwapCurrencyInputPanel({
                       name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
                       element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >
-                      <StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
+                      <StyledBalanceMax onClick={onMax}>
                         <Trans>Max</Trans>
                       </StyledBalanceMax>
                     </TraceEvent>

src/components/CurrencyInputPanel/index.tsx

@@ -7,7 +7,6 @@ import { TraceEvent } from 'analytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
@@ -115,10 +114,10 @@ const LabelRow = styled.div`
   }
 `
 
-const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
+const FiatRow = styled(LabelRow)`
   justify-content: flex-end;
-  padding: ${({ redesignFlag }) => redesignFlag && '0px 1rem 0.75rem'};
-  height: ${({ redesignFlag }) => (redesignFlag ? '32px' : '16px')};
+  padding: 0px 1rem 0.75rem;
+  height: 32px;
 `
 
 const Aligner = styled.span`
@@ -220,8 +219,6 @@ export default function CurrencyInputPanel({
   const { account, chainId } = useWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
@@ -293,7 +290,7 @@ export default function CurrencyInputPanel({
           </CurrencySelect>
         </InputRow>
         {!hideInput && !hideBalance && currency && (
-          <FiatRow redesignFlag={redesignFlagEnabled}>
+          <FiatRow>
             <RowBetween>
               <LoadingOpacityContainer $loading={loading}>
                 <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,6 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 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'
@@ -203,16 +203,14 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FeatureFlagGroup name="Phase 0 Follow-ups">
-        <FeatureFlagOption
-          variant={FavoriteTokensVariant}
-          value={useFavoriteTokensFlag()}
-          featureFlag={FeatureFlag.favoriteTokens}
-          label="Favorite Tokens"
-        />
-      </FeatureFlagGroup>
       <FeatureFlagGroup name="Phase 1">
         <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
+        <FeatureFlagOption
+          variant={NftGraphQlVariant}
+          value={useNftGraphQlFlag()}
+          featureFlag={FeatureFlag.nftGraphQl}
+          label="NFT GraphQL Endpoints"
+        />
       </FeatureFlagGroup>
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption

src/components/Header/HolidayOrnament.tsx

@@ -1,26 +0,0 @@
-import { ReactElement } from 'react'
-import styled from 'styled-components/macro'
-
-import SantaHat from '../../assets/images/santa-hat.png'
-
-const SantaHatImage = styled.img`
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  height: 18px;
-`
-
-const Christmas = <SantaHatImage src={SantaHat} alt="Santa hat" />
-
-const DATE_TO_ORNAMENT: { [date: string]: ReactElement } = {
-  '12-24': Christmas,
-  '12-25': Christmas,
-}
-
-const HolidayOrnament = () => {
-  // months in javascript are 0 indexed...
-  const today = `${new Date().getMonth() + 1}-${new Date().getDate()}`
-  return DATE_TO_ORNAMENT[today] || null
-}
-
-export default HolidayOrnament

src/components/Header/NetworkSelector.tsx

@@ -1,345 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfo } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
-import useSelectChain from 'hooks/useSelectChain'
-import useSyncChainQuery from 'hooks/useSyncChainQuery'
-import { darken } from 'polished'
-import { useRef } from 'react'
-import { AlertTriangle, ArrowDownCircle, ChevronDown } from 'react-feather'
-import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import styled from 'styled-components/macro'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { isMobile } from 'utils/userAgent'
-
-const ActiveRowLinkList = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 8px;
-  & > a {
-    align-items: center;
-    color: ${({ theme }) => theme.deprecated_text2};
-    display: flex;
-    flex-direction: row;
-    font-size: 14px;
-    font-weight: 500;
-    justify-content: space-between;
-    padding: 8px 0 4px;
-    text-decoration: none;
-  }
-  & > a:first-child {
-    margin: 0;
-    margin-top: 0px;
-    padding-top: 10px;
-  }
-`
-const ActiveRowWrapper = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_bg1};
-  border-radius: 8px;
-  cursor: pointer;
-  padding: 8px;
-  width: 100%;
-`
-const FlyoutHeader = styled.div`
-  color: ${({ theme }) => theme.deprecated_text2};
-  cursor: default;
-  font-weight: 400;
-`
-const FlyoutMenu = styled.div`
-  position: absolute;
-  top: 54px;
-  width: 272px;
-  z-index: 99;
-  padding-top: 10px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    top: 40px;
-  }
-`
-const FlyoutMenuContents = styled.div`
-  align-items: flex-start;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  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: 20px;
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  overflow: auto;
-  padding: 16px;
-  & > *:not(:last-child) {
-    margin-bottom: 12px;
-  }
-`
-const FlyoutRow = styled.div<{ active: boolean }>`
-  align-items: center;
-  background-color: ${({ active, theme }) => (active ? theme.deprecated_bg1 : 'transparent')};
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-  padding: 6px 8px;
-  text-align: left;
-  width: 100%;
-`
-const FlyoutRowActiveIndicator = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_green1};
-  border-radius: 50%;
-  height: 9px;
-  width: 9px;
-`
-
-const CircleContainer = styled.div`
-  width: 20px;
-  display: flex;
-  justify-content: center;
-`
-
-const LinkOutCircle = styled(ArrowDownCircle)`
-  transform: rotate(230deg);
-  width: 16px;
-  height: 16px;
-`
-const Logo = styled.img`
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-`
-const NetworkLabel = styled.div`
-  flex: 1 1 auto;
-`
-const SelectorLabel = styled(NetworkLabel)`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: block;
-    margin-right: 8px;
-  }
-`
-const NetworkAlertLabel = styled(NetworkLabel)`
-  display: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: 0 0.5rem 0 0.4rem;
-  font-size: 1rem;
-  width: fit-content;
-  font-weight: 500;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: block;
-  }
-`
-const SelectorControls = styled.div<{ supportedChain: boolean }>`
-  align-items: center;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  border: 2px solid ${({ theme }) => theme.deprecated_bg0};
-  border-radius: 16px;
-  color: ${({ theme }) => theme.deprecated_text1};
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-  padding: 6px 8px;
-  ${({ supportedChain, theme }) =>
-    !supportedChain &&
-    `
-    color: ${theme.deprecated_white};
-    background-color: ${theme.deprecated_red1};
-    border: 2px solid ${theme.deprecated_red1};
-  `}
-  cursor: default;
-  :focus {
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
-  }
-`
-const SelectorLogo = styled(Logo)`
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    margin-right: 8px;
-  }
-`
-const SelectorWrapper = styled.div`
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    position: relative;
-  }
-`
-const StyledChevronDown = styled(ChevronDown)`
-  width: 16px;
-`
-
-const NetworkIcon = styled(AlertTriangle)`
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  width: 16px;
-  height: 16px;
-`
-
-const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
-  switch (chainId) {
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return <Trans>Arbitrum Bridge</Trans>
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return <Trans>Optimism Bridge</Trans>
-    case SupportedChainId.POLYGON:
-    case SupportedChainId.POLYGON_MUMBAI:
-      return <Trans>Polygon Bridge</Trans>
-    case SupportedChainId.CELO:
-    case SupportedChainId.CELO_ALFAJORES:
-      return <Trans>Portal Bridge</Trans>
-    default:
-      return <Trans>Bridge</Trans>
-  }
-}
-const ExplorerLabel = ({ chainId }: { chainId: SupportedChainId }) => {
-  switch (chainId) {
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return <Trans>Arbiscan</Trans>
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return <Trans>Optimistic Etherscan</Trans>
-    case SupportedChainId.POLYGON:
-    case SupportedChainId.POLYGON_MUMBAI:
-      return <Trans>Polygonscan</Trans>
-    case SupportedChainId.CELO:
-    case SupportedChainId.CELO_ALFAJORES:
-      return <Trans>Blockscout</Trans>
-    default:
-      return <Trans>Etherscan</Trans>
-  }
-}
-
-function Row({
-  targetChain,
-  onSelectChain,
-}: {
-  targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
-}) {
-  const { provider, chainId } = useWeb3React()
-  if (!provider || !chainId) {
-    return null
-  }
-  const active = chainId === targetChain
-  const { helpCenterUrl, explorer, bridge, label, logoUrl } = getChainInfo(targetChain)
-
-  const rowContent = (
-    <FlyoutRow onClick={() => onSelectChain(targetChain)} active={active}>
-      <Logo src={logoUrl} />
-      <NetworkLabel>{label}</NetworkLabel>
-      {chainId === targetChain && (
-        <CircleContainer>
-          <FlyoutRowActiveIndicator />
-        </CircleContainer>
-      )}
-    </FlyoutRow>
-  )
-
-  if (active) {
-    return (
-      <ActiveRowWrapper>
-        {rowContent}
-        <ActiveRowLinkList>
-          {bridge && (
-            <ExternalLink href={bridge}>
-              <BridgeLabel chainId={chainId} />
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-          {explorer && (
-            <ExternalLink href={explorer}>
-              <ExplorerLabel chainId={chainId} />
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-          {helpCenterUrl && (
-            <ExternalLink href={helpCenterUrl}>
-              <Trans>Help Center</Trans>
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-        </ActiveRowLinkList>
-      </ActiveRowWrapper>
-    )
-  }
-  return rowContent
-}
-
-const NETWORK_SELECTOR_CHAINS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-]
-
-export default function NetworkSelector() {
-  const { chainId, provider } = useWeb3React()
-
-  const node = useRef<HTMLDivElement>(null)
-  const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
-  const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
-  const closeModal = useCloseModal(ApplicationModal.NETWORK_SELECTOR)
-  const toggleModal = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
-
-  const info = getChainInfo(chainId)
-
-  const selectChain = useSelectChain()
-  useSyncChainQuery()
-
-  if (!chainId || !provider) {
-    return null
-  }
-
-  const onSupportedChain = info !== undefined
-
-  return (
-    <SelectorWrapper
-      ref={node}
-      onMouseEnter={openModal}
-      onMouseLeave={closeModal}
-      onClick={isMobile ? toggleModal : undefined}
-    >
-      <SelectorControls supportedChain={onSupportedChain}>
-        {onSupportedChain ? (
-          <>
-            <SelectorLogo src={info.logoUrl} />
-            <SelectorLabel>{info.label}</SelectorLabel>
-            <StyledChevronDown />
-          </>
-        ) : (
-          <>
-            <NetworkIcon />
-            <NetworkAlertLabel>Switch Network</NetworkAlertLabel>
-            <StyledChevronDown />
-          </>
-        )}
-      </SelectorControls>
-      {isOpen && (
-        <FlyoutMenu>
-          <FlyoutMenuContents>
-            <FlyoutHeader>
-              <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
-            </FlyoutHeader>
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
-              <Row
-                onSelectChain={async (targetChainId: SupportedChainId) => {
-                  await selectChain(targetChainId)
-                  closeModal()
-                }}
-                targetChain={chainId}
-                key={chainId}
-              />
-            ))}
-          </FlyoutMenuContents>
-        </FlyoutMenu>
-      )}
-    </SelectorWrapper>
-  )
-}

src/components/Header/index.tsx

@@ -1,356 +0,0 @@
-import { Trans } from '@lingui/macro'
-import useScrollPosition from '@react-hook/window-scroll'
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfoOrDefault } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
-import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
-import { darken } from 'polished'
-import { NavLink, useLocation } from 'react-router-dom'
-import { Text } from 'rebass'
-import { useShowClaimPopup, useToggleSelfClaimModal } from 'state/application/hooks'
-import { useUserHasAvailableClaim } from 'state/claim/hooks'
-import { useNativeCurrencyBalances } from 'state/connection/hooks'
-import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
-import { useDarkModeManager } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
-import { ExternalLink, ThemedText } from '../../theme'
-import ClaimModal from '../claim/ClaimModal'
-import { CardNoise } from '../earn/styled'
-import Menu from '../Menu'
-import Row from '../Row'
-import { Dots } from '../swap/styleds'
-import Web3Status from '../Web3Status'
-import HolidayOrnament from './HolidayOrnament'
-import NetworkSelector from './NetworkSelector'
-
-const HeaderFrame = styled.div<{ showBackground: boolean }>`
-  display: grid;
-  grid-template-columns: 120px 1fr 120px;
-  align-items: center;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  width: 100%;
-  top: 0;
-  position: relative;
-  padding: 1rem;
-  z-index: 21;
-  position: relative;
-  /* Background slide effect on scroll. */
-  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.deprecated_bg0} 50% )}}`};
-  background-position: ${({ showBackground }) => (showBackground ? '0 -100%' : '0 0')};
-  background-size: 100% 200%;
-  box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.deprecated_bg2 : 'transparent;')};
-  transition: background-position 0.1s, box-shadow 0.1s;
-  background-blend-mode: hard-light;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
-    grid-template-columns: 48px 1fr 1fr;
-  `};
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    padding:  1rem;
-    grid-template-columns: 1fr 1fr;
-  `};
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    padding:  1rem;
-    grid-template-columns: 36px 1fr;
-  `};
-`
-
-const HeaderControls = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-self: flex-end;
-`
-
-const HeaderElement = styled.div`
-  display: flex;
-  align-items: center;
-
-  &:not(:first-child) {
-    margin-left: 0.5em;
-  }
-
-  /* addresses safaris lack of support for "gap" */
-  & > *:not(:first-child) {
-    margin-left: 8px;
-  }
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    align-items: center;
-  `};
-`
-
-const HeaderLinks = styled(Row)`
-  justify-self: center;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  width: max-content;
-  padding: 2px;
-  border-radius: 16px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 10px;
-  overflow: auto;
-  align-items: center;
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
-    justify-self: start;
-    `};
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    justify-self: center;
-  `};
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    flex-direction: row;
-    justify-content: space-between;
-    justify-self: center;
-    z-index: 99;
-    position: fixed;
-    bottom: 0; right: 50%;
-    transform: translate(50%,-50%);
-    margin: 0 auto;
-    background-color: ${({ theme }) => theme.deprecated_bg0};
-    border: 1px solid ${({ theme }) => theme.deprecated_bg2};
-    box-shadow: 0px 6px 10px rgb(0 0 0 / 2%);
-  `};
-`
-
-const AccountElement = styled.div<{ active: boolean }>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.deprecated_bg0 : theme.deprecated_bg0)};
-  border-radius: 16px;
-  white-space: nowrap;
-  width: 100%;
-  height: 40px;
-
-  :focus {
-    border: 1px solid blue;
-  }
-`
-
-const UNIAmount = styled(AccountElement)`
-  color: white;
-  padding: 4px 8px;
-  height: 36px;
-  font-weight: 500;
-  background-color: ${({ theme }) => theme.deprecated_bg3};
-  background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
-`
-
-const UNIWrapper = styled.span`
-  width: fit-content;
-  position: relative;
-  cursor: pointer;
-
-  :hover {
-    opacity: 0.8;
-  }
-
-  :active {
-    opacity: 0.9;
-  }
-`
-
-const BalanceText = styled(Text)`
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
-    display: none;
-  `};
-`
-
-const Title = styled.a`
-  display: flex;
-  align-items: center;
-  pointer-events: auto;
-  justify-self: flex-start;
-  margin-right: 12px;
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    justify-self: center;
-  `};
-  :hover {
-    cursor: pointer;
-  }
-`
-
-const UniIcon = styled.div`
-  transition: transform 0.3s ease;
-  :hover {
-    transform: rotate(-5deg);
-  }
-
-  position: relative;
-`
-
-// can't be customized under react-router-dom v6
-// so we have to persist to the default one, i.e., .active
-const activeClassName = 'active'
-
-const StyledNavLink = styled(NavLink)`
-  ${({ theme }) => theme.flexRowNoWrap}
-  align-items: left;
-  border-radius: 3rem;
-  outline: none;
-  cursor: pointer;
-  text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text2};
-  font-size: 1rem;
-  font-weight: 500;
-  padding: 8px 12px;
-  word-break: break-word;
-  overflow: hidden;
-  white-space: nowrap;
-  &.${activeClassName} {
-    border-radius: 14px;
-    font-weight: 600;
-    justify-content: center;
-    color: ${({ theme }) => theme.deprecated_text1};
-    background-color: ${({ theme }) => theme.deprecated_bg1};
-  }
-
-  :hover,
-  :focus {
-    color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
-  }
-`
-
-const StyledExternalLink = styled(ExternalLink)`
-  ${({ theme }) => theme.flexRowNoWrap}
-  align-items: left;
-  border-radius: 3rem;
-  outline: none;
-  cursor: pointer;
-  text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text2};
-  font-size: 1rem;
-  width: fit-content;
-  margin: 0 12px;
-  font-weight: 500;
-
-  &.${activeClassName} {
-    border-radius: 14px;
-    font-weight: 600;
-    color: ${({ theme }) => theme.deprecated_text1};
-  }
-
-  :hover,
-  :focus {
-    color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
-    text-decoration: none;
-  }
-`
-
-export default function Header() {
-  const tokensFlag = useTokensFlag()
-
-  const { account, chainId } = useWeb3React()
-
-  const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
-  const [darkMode] = useDarkModeManager()
-  const { deprecated_white, deprecated_black } = useTheme()
-
-  const toggleClaimModal = useToggleSelfClaimModal()
-
-  const availableClaim: boolean = useUserHasAvailableClaim(account)
-
-  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
-
-  const showClaimPopup = useShowClaimPopup()
-
-  const scrollY = useScrollPosition()
-
-  const { pathname } = useLocation()
-
-  const {
-    infoLink,
-    nativeCurrency: { symbol: nativeCurrencySymbol },
-  } = getChainInfoOrDefault(chainId)
-
-  // work around https://github.com/remix-run/react-router/issues/8161
-  // as we can't pass function `({isActive}) => ''` to className with styled-components
-  const isPoolActive =
-    pathname.startsWith('/pool') ||
-    pathname.startsWith('/add') ||
-    pathname.startsWith('/remove') ||
-    pathname.startsWith('/increase') ||
-    pathname.startsWith('/find')
-
-  return (
-    <HeaderFrame showBackground={scrollY > 45}>
-      <ClaimModal />
-      <Title href=".">
-        <UniIcon>
-          <Logo fill={darkMode ? deprecated_white : deprecated_black} width="24px" height="100%" title="logo" />
-          <HolidayOrnament />
-        </UniIcon>
-      </Title>
-      <HeaderLinks>
-        <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
-          <Trans>Swap</Trans>
-        </StyledNavLink>
-        {tokensFlag === TokensVariant.Enabled && (
-          <StyledNavLink id={`tokens-nav-link`} to={'/tokens'}>
-            <Trans>Tokens</Trans>
-          </StyledNavLink>
-        )}
-        <StyledNavLink
-          data-cy="pool-nav-link"
-          id={`pool-nav-link`}
-          to={'/pool'}
-          className={isPoolActive ? activeClassName : undefined}
-        >
-          <Trans>Pool</Trans>
-        </StyledNavLink>
-        {(!chainId || chainId === SupportedChainId.MAINNET) && (
-          <StyledNavLink id={`vote-nav-link`} to={'/vote'}>
-            <Trans>Vote</Trans>
-          </StyledNavLink>
-        )}
-        <StyledExternalLink id={`charts-nav-link`} href={infoLink}>
-          <Trans>Charts</Trans>
-          <sup>↗</sup>
-        </StyledExternalLink>
-      </HeaderLinks>
-
-      <HeaderControls>
-        <HeaderElement>
-          <NetworkSelector />
-        </HeaderElement>
-        <HeaderElement>
-          {availableClaim && !showClaimPopup && (
-            <UNIWrapper onClick={toggleClaimModal}>
-              <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
-                <ThemedText.DeprecatedWhite padding="0 2px">
-                  {claimTxn && !claimTxn?.receipt ? (
-                    <Dots>
-                      <Trans>Claiming UNI</Trans>
-                    </Dots>
-                  ) : (
-                    <Trans>Claim UNI</Trans>
-                  )}
-                </ThemedText.DeprecatedWhite>
-              </UNIAmount>
-              <CardNoise />
-            </UNIWrapper>
-          )}
-          <AccountElement active={!!account}>
-            {account && userEthBalance ? (
-              <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr=".4rem" fontWeight={500}>
-                <Trans>
-                  {userEthBalance?.toSignificant(3)} {nativeCurrencySymbol}
-                </Trans>
-              </BalanceText>
-            ) : null}
-            <Web3Status />
-          </AccountElement>
-        </HeaderElement>
-        <HeaderElement>
-          <Menu />
-        </HeaderElement>
-      </HeaderControls>
-    </HeaderFrame>
-  )
-}

src/components/Identicon/StatusIcon.tsx

@@ -1,6 +1,5 @@
 import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
 
@@ -53,9 +52,8 @@ const Socks = () => {
 const useIcon = (connectionType: ConnectionType) => {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
 
-  if ((isNavbarEnabled && avatar) || connectionType === ConnectionType.INJECTED) {
+  if (avatar || connectionType === ConnectionType.INJECTED) {
     return <Identicon />
   } else if (connectionType === ConnectionType.WALLET_CONNECT) {
     return <img src={WalletConnectIcon} alt="WalletConnect" />
@@ -68,12 +66,11 @@ const useIcon = (connectionType: ConnectionType) => {
 
 export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
   const hasSocks = useHasSocks()
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
   const icon = useIcon(connectionType)
 
   return (
     <IconWrapper size={size ?? 16}>
-      {isNavbarEnabled && hasSocks && <Socks />}
+      {hasSocks && <Socks />}
       {icon}
     </IconWrapper>
   )

src/components/Identicon/index.tsx

@@ -1,6 +1,5 @@
 import jazzicon from '@metamask/jazzicon'
 import { useWeb3React } from '@web3-react/core'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
@@ -23,8 +22,7 @@ export default function Identicon({ size }: { size?: number }) {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
   const [fetchable, setFetchable] = useState(true)
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
-  const iconSize = size ? size : isNavbarEnabled ? 24 : 16
+  const iconSize = size ?? 24
 
   const icon = useMemo(() => account && jazzicon(iconSize, parseInt(account.slice(2, 10), 16)), [account, iconSize])
   const iconRef = useRef<HTMLDivElement>(null)

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 }) => 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/NavBar/MenuDropdown.tsx

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

src/components/NavBar/NavIcon.tsx

@@ -18,6 +18,7 @@ export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
       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,7 +1,9 @@
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { sendAnalyticsEvent } from 'analytics'
-import { ElementName, Event, EventName } from 'analytics/constants'
+import { ElementName, Event, EventName, SectionName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
+import { useTrace } from 'analytics/Trace'
 import { TraceEvent } from 'analytics/TraceEvent'
 import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
@@ -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={[Event.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,6 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { sendAnalyticsEvent } from 'analytics'
-import { EventName } from 'analytics/constants'
+import { NavBarSearchTypes, SectionName } from 'analytics/constants'
+import { useTrace } from 'analytics/Trace'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -31,6 +31,7 @@ interface SearchBarDropdownSectionProps {
   startingIndex: number
   setHoveredIndex: (index: number | undefined) => void
   isLoading?: boolean
+  eventProperties: Record<string, unknown>
 }
 
 export const SearchBarDropdownSection = ({
@@ -42,6 +43,7 @@ export const SearchBarDropdownSection = ({
   startingIndex,
   setHoveredIndex,
   isLoading,
+  eventProperties,
 }: SearchBarDropdownSectionProps) => {
   return (
     <Column gap="12">
@@ -60,16 +62,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 +77,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,11 +96,19 @@ 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])
@@ -130,6 +134,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 +197,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 = useTrace({ section: SectionName.NAVBAR_SEARCH })
+
   useEffect(() => {
+    const eventProperties = { total_suggestions: totalSuggestions, query_text: queryText, ...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 +233,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 +252,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 +274,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 +289,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 +305,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 +334,10 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, i
     hasInput,
     isNFTPage,
     isTokenPage,
+    showCollectionsFirst,
+    queryText,
+    totalSuggestions,
+    trace,
   ])
 
   return (

src/components/NavBar/ShoppingBag.tsx

@@ -23,20 +23,20 @@ export const ShoppingBag = () => {
     setSellQuantity(sellAssets.length)
   }, [sellAssets])
 
-  const isProfilePage = location.pathname === '/profile'
+  const isProfilePage = location.pathname === '/nfts/profile'
 
   return (
     <NavIcon onClick={toggleBag}>
       {isProfilePage ? (
         <>
-          <TagIcon width={20} height={20} />
+          <TagIcon viewBox="0 0 20 20" width={24} height={24} />
           {sellQuantity ? (
             <Box className={styles.bagQuantity}>{sellQuantity > 99 ? <HundredsOverflowIcon /> : sellQuantity}</Box>
           ) : null}
         </>
       ) : (
         <>
-          <BagIcon width={20} height={20} />
+          <BagIcon viewBox="0 0 20 20" width={24} height={24} />
           {bagQuantity ? (
             <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
           ) : null}

src/components/NavBar/SuggestionRow.tsx

@@ -1,12 +1,16 @@
 import { useWeb3React } from '@web3-react/core'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
 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

@@ -70,7 +70,7 @@ const PageTabs = () => {
 
 const Navbar = () => {
   const { pathname } = useLocation()
-  const showShoppingBag = pathname.startsWith('/nfts') || pathname.startsWith('/profile')
+  const isNftPage = pathname.startsWith('/nfts')
 
   return (
     <>
@@ -80,9 +80,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 +100,12 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {showShoppingBag && <ShoppingBag />}
-              <Box display={{ sm: 'none', lg: 'flex' }}>
-                <ChainSelector />
-              </Box>
+              {isNftPage && <ShoppingBag />}
+              {!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/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/Popups/PopupItem.tsx

@@ -1,4 +1,3 @@
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
 import { animated } from 'react-spring'
@@ -8,7 +7,6 @@ import styled, { useTheme } from 'styled-components/macro'
 import { useRemovePopup } from '../../state/application/hooks'
 import { PopupContent } from '../../state/application/reducer'
 import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
-import TransactionPopup from './TransactionPopup'
 
 const StyledClose = styled(X)`
   position: absolute;
@@ -58,7 +56,6 @@ export default function PopupItem({
   popKey: string
 }) {
   const removePopup = useRemovePopup()
-  const navbarFlag = useNavBarFlag()
   const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
   useEffect(() => {
     if (removeAfterMs === null) return undefined
@@ -80,22 +77,15 @@ export default function PopupItem({
   })
 
   let popupContent
-  if ('txn' in content) {
-    const {
-      txn: { hash },
-    } = content
-    if (navbarFlag === NavBarVariant.Enabled) return null
-
-    popupContent = <TransactionPopup hash={hash} />
-  } else if ('failedSwitchNetwork' in content) {
+  if ('failedSwitchNetwork' in content) {
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
   }
 
-  return (
+  return popupContent ? (
     <Popup>
       <StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />
       {popupContent}
       {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
     </Popup>
-  )
+  ) : null
 }

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

@@ -1,11 +1,10 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { ReactNode, useCallback, useState } from 'react'
 import { HelpCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import Tooltip from '../Tooltip'
 
-const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
+const QuestionWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -18,8 +17,7 @@ const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
   cursor: default;
   border-radius: 36px;
   font-size: 12px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
-  color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_text2};
+  border-radius: 12px;
 
   :hover,
   :focus {
@@ -27,12 +25,12 @@ const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
   }
 `
 
-const QuestionMark = styled.span<{ redesignFlag?: boolean }>`
+const QuestionMark = styled.span`
   font-size: 14px;
-  margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
-  align-items: ${({ redesignFlag }) => redesignFlag && 'center'};
-  color: ${({ theme, redesignFlag }) => redesignFlag && theme.textSecondary};
-  margin-top: ${({ redesignFlag }) => redesignFlag && '2.5px'};
+  margin-left: 8px;
+  align-items: center;
+  color: ${({ theme }) => theme.textSecondary};
+  margin-top: 2.5px;
 `
 
 export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
@@ -40,14 +38,12 @@ export default function QuestionHelper({ text }: { text: ReactNode; size?: numbe
 
   const open = useCallback(() => setShow(true), [setShow])
   const close = useCallback(() => setShow(false), [setShow])
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   return (
     <span style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       <Tooltip text={text} show={show}>
-        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} redesignFlag={redesignFlagEnabled}>
-          <QuestionMark redesignFlag={redesignFlagEnabled}>
-            {redesignFlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
+          <QuestionMark>
+            <HelpCircle size={16} />
           </QuestionMark>
         </QuestionWrapper>
       </Tooltip>

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/CommonBases.tsx

@@ -6,7 +6,6 @@ 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 { Text } from 'rebass'
 import styled from 'styled-components/macro'
@@ -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">
@@ -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.tsx

@@ -1,12 +1,9 @@
-import { Trans } from '@lingui/macro'
 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 { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { XOctagon } from 'react-feather'
 import { Check } from 'react-feather'
@@ -16,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'
@@ -129,13 +124,9 @@ 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 tokenSafetyFlagEnabled = useTokenSafetyFlag() === TokenSafetyVariant.Enabled
   const isBlockedToken = !!warning && !warning.canProceed
   const blockedTokenOpacity = '0.6'
 
@@ -149,7 +140,6 @@ export function CurrencyRow({
     >
       <MenuItem
         tabIndex={0}
-        redesignFlag={redesignFlagEnabled}
         style={style}
         className={`token-item-${key}`}
         onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect(!!warning) : null)}
@@ -168,15 +158,11 @@ export function CurrencyRow({
         <AutoColumn style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}>
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
-            {tokenSafetyFlagEnabled && <TokenSafetyIcon warning={warning} />}
+            <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
-            )}
+            {currency.symbol}
           </ThemedText.DeprecatedDarkGray>
         </AutoColumn>
         <Column>
@@ -187,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

@@ -5,7 +5,6 @@ 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(
@@ -104,20 +101,17 @@ export function CurrencySearch({
   const filteredSortedTokens = useSortTokensByQuery(debouncedQuery, sortedTokens)
 
   const native = useNativeCurrency()
+  const wrapped = native.wrapped
 
-  const filteredSortedTokensWithETH: Currency[] = useMemo(() => {
-    // Use Celo ERC20 Implementation and exclude the native asset
-    if (!native) {
-      return filteredSortedTokens
-    }
-
+  const searchCurrencies: Currency[] = useMemo(() => {
     const s = debouncedQuery.toLowerCase().trim()
-    if (native.symbol?.toLowerCase()?.indexOf(s) !== -1) {
-      // Always bump the native token to the top of the list.
-      return [native, ...filteredSortedTokens.filter((t) => !t.equals(native))]
-    }
-    return filteredSortedTokens
-  }, [debouncedQuery, native, filteredSortedTokens])
+
+    const tokens = filteredSortedTokens.filter((t) => !(t.equals(wrapped) || (disableNonToken && t.isNative)))
+    const natives = (disableNonToken || native.equals(wrapped) ? [wrapped] : [native, wrapped]).filter(
+      (n) => n.symbol?.toLowerCase()?.indexOf(s) !== -1 || n.name?.toLowerCase()?.indexOf(s) !== -1
+    )
+    return [...natives, ...tokens]
+  }, [debouncedQuery, filteredSortedTokens, wrapped, disableNonToken, native])
 
   const handleCurrencySelect = useCallback(
     (currency: Currency, hasWarning?: boolean) => {
@@ -147,17 +141,17 @@ export function CurrencySearch({
         const s = debouncedQuery.toLowerCase().trim()
         if (s === native?.symbol?.toLowerCase()) {
           handleCurrencySelect(native)
-        } else if (filteredSortedTokensWithETH.length > 0) {
+        } else if (searchCurrencies.length > 0) {
           if (
-            filteredSortedTokensWithETH[0].symbol?.toLowerCase() === debouncedQuery.trim().toLowerCase() ||
-            filteredSortedTokensWithETH.length === 1
+            searchCurrencies[0].symbol?.toLowerCase() === debouncedQuery.trim().toLowerCase() ||
+            searchCurrencies.length === 1
           ) {
-            handleCurrencySelect(filteredSortedTokensWithETH[0])
+            handleCurrencySelect(searchCurrencies[0])
           }
         }
       }
     },
-    [debouncedQuery, native, filteredSortedTokensWithETH, handleCurrencySelect]
+    [debouncedQuery, native, searchCurrencies, handleCurrencySelect]
   )
 
   // menu ui
@@ -179,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>
@@ -194,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}
@@ -211,7 +204,7 @@ export function CurrencySearch({
             />
           )}
         </PaddedColumn>
-        <Separator redesignFlag={redesignFlagEnabled} />
+        <Separator />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
             <CurrencyRow
@@ -229,13 +222,13 @@ export function CurrencySearch({
               )}
             />
           </Column>
-        ) : filteredSortedTokens?.length > 0 || filteredInactiveTokens?.length > 0 || isLoading ? (
+        ) : searchCurrencies?.length > 0 || filteredInactiveTokens?.length > 0 || isLoading ? (
           <div style={{ flex: '1' }}>
             <AutoSizer disableWidth>
               {({ height }) => (
                 <CurrencyList
                   height={height}
-                  currencies={disableNonToken ? filteredSortedTokens : filteredSortedTokensWithETH}
+                  currencies={searchCurrencies}
                   otherListTokens={filteredInactiveTokens}
                   onCurrencySelect={handleCurrencySelect}
                   otherCurrency={otherSelectedCurrency}

src/components/SearchModal/CurrencySearchModal.tsx

@@ -1,19 +1,12 @@
 import { Currency, Token } from '@uniswap/sdk-core'
-import { TokenList } from '@uniswap/token-lists'
 import TokenSafety from 'components/TokenSafety'
-import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/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
@@ -28,9 +21,7 @@ interface CurrencySearchModalProps {
 
 export enum CurrencyModalView {
   search,
-  manage,
   importToken,
-  importList,
   tokenSafety,
 }
 
@@ -59,43 +50,20 @@ export default memo(function CurrencySearchModal({
     setModalView(CurrencyModalView.tokenSafety)
   }
 
-  const tokenSafetyFlag = useTokenSafetyFlag()
-
   const handleCurrencySelect = useCallback(
     (currency: Currency, hasWarning?: boolean) => {
-      if (
-        tokenSafetyFlag === TokenSafetyVariant.Enabled &&
-        hasWarning &&
-        currency.isToken &&
-        !userAddedTokens.find((token) => token.equals(currency))
-      ) {
+      if (hasWarning && currency.isToken && !userAddedTokens.find((token) => token.equals(currency))) {
         showTokenSafetySpeedbump(currency)
       } else {
         onCurrencySelect(currency)
         onDismiss()
       }
     },
-    [onDismiss, onCurrencySelect, tokenSafetyFlag, userAddedTokens]
+    [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
@@ -121,7 +89,7 @@ export default memo(function CurrencySearchModal({
       break
     case CurrencyModalView.tokenSafety:
       modalHeight = undefined
-      if (tokenSafetyFlag === TokenSafetyVariant.Enabled && warningToken) {
+      if (warningToken) {
         content = (
           <TokenSafety
             tokenAddress={warningToken.address}
@@ -132,40 +100,6 @@ export default memo(function CurrencySearchModal({
         )
       }
       break
-    case CurrencyModalView.importToken:
-      if (importToken) {
-        modalHeight = undefined
-        if (tokenSafetyFlag === TokenSafetyVariant.Enabled) {
-          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/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/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' }}>
@@ -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/TokenSafetyMessage.tsx

@@ -9,7 +9,7 @@ import { Color } from 'theme/styled'
 
 const Label = styled.div<{ color: Color }>`
   width: 100%;
-  padding: 12px 20px;
+  padding: 12px 20px 16px;
   background-color: ${({ color }) => color + '1F'};
   border-radius: 16px;
   color: ${({ color }) => color};
@@ -31,9 +31,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
@@ -56,9 +62,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/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,10 +1,13 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
 import { formatToDecimal } from 'analytics/utils'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { validateUrlChainParam } from 'graphql/data/util'
+import { NATIVE_CHAIN_ID } from 'constants/tokens'
+import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
-import { useParams } from 'react-router-dom'
+import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
+import { useMemo } from 'react'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
 import { currencyAmountToPreciseFloat, formatDollar } from 'utils/formatNumbers'
@@ -29,11 +32,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 +45,52 @@ const TotalBalance = styled.div`
   line-height: 28px;
   margin-top: 12px;
 `
-const TotalBalanceItem = styled.div`
+const BalanceItem = styled.div`
   display: flex;
 `
 
-const BalanceRowLink = styled(StyledInternalLink)`
+const BalanceLink = 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)
+  const chain = CHAIN_ID_TO_BACKEND_NAME[token.chainId].toLowerCase()
 
+  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>
+        <BalanceLink to={`/tokens/${chain}/${token.isNative ? NATIVE_CHAIN_ID : token.address}`}>
+          <BalanceRow>
+            <BalanceItem>
+              <CurrencyLogo currency={token} />
+              &nbsp;{formattedBalance} {token.symbol}
+            </BalanceItem>
+            <BalanceItem>{formattedUsdValue}</BalanceItem>
+          </BalanceRow>
+        </BalanceLink>
+      </BalanceSection>
     </BalancesCard>
   )
 }

src/components/Tokens/TokenDetails/ChartSection.tsx

@@ -2,21 +2,18 @@ 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 { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
-import { PriceDurations, PricePoint, SingleTokenData } from 'graphql/data/Token'
+import { TokenQueryData } from 'graphql/data/Token'
+import { PriceDurations } from 'graphql/data/TokenPrice'
 import { TopToken } from 'graphql/data/TopTokens'
-import { CHAIN_NAME_TO_CHAIN_ID, TimePeriod } from 'graphql/data/util'
+import { CHAIN_NAME_TO_CHAIN_ID } 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 { filterTimeAtom, useIsFavorited, useToggleFavorite } from '../state'
-import { ClickFavorited, FavoriteIcon, L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
+import { filterTimeAtom } from '../state'
+import { L2NetworkLogo, LogoContainer } from '../TokenTable/TokenRow'
 import PriceChart from './PriceChart'
 import ShareButton from './ShareButton'
 
@@ -57,7 +54,7 @@ const TokenActions = styled.div`
 `
 
 export function useTokenLogoURI(
-  token: NonNullable<SingleTokenData> | NonNullable<TopToken>,
+  token: NonNullable<TokenQueryData> | NonNullable<TopToken>,
   nativeCurrency?: Token | NativeCurrency
 ) {
   const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
@@ -74,40 +71,17 @@ export default function ChartSection({
   nativeCurrency,
   prices,
 }: {
-  token: NonNullable<SingleTokenData>
+  token: NonNullable<TokenQueryData>
   currency?: Currency | null
   nativeCurrency?: Token | NativeCurrency
-  prices: PriceDurations
+  prices?: PriceDurations
 }) {
-  const isFavorited = useIsFavorited(token.address)
-  const toggleFavorite = useToggleFavorite(token.address)
   const chainId = CHAIN_NAME_TO_CHAIN_ID[token.chain]
-  const L2Icon = getChainInfo(chainId).circleLogoUrl
-  const warning = checkWarning(token.address ?? '')
+  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
   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])
-
   return (
     <ChartHeader>
       <TokenInfoContainer>
@@ -123,20 +97,14 @@ export default function ChartSection({
           </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} />}
-          {useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled && (
-            <ClickFavorited onClick={toggleFavorite}>
-              <FavoriteIcon isFavorited={isFavorited} />
-            </ClickFavorited>
-          )}
         </TokenActions>
       </TokenInfoContainer>
       <ChartContainer>
         <ParentSize>
-          {({ width, height }) => prices && <PriceChart prices={prices[timePeriod]} width={width} height={height} />}
+          {({ width }) => <PriceChart prices={prices ? prices?.[timePeriod] : null} width={width} height={436} />}
         </ParentSize>
       </ChartContainer>
     </ChartHeader>

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

@@ -7,7 +7,7 @@ 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/TokenPrice'
 import { TimePeriod } from 'graphql/data/util'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useAtom } from 'jotai'
@@ -59,7 +59,7 @@ export function getDeltaArrow(delta: number | null | undefined) {
 
 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) + '%'
@@ -133,7 +133,7 @@ const timeOptionsHeight = 44
 interface PriceChartProps {
   width: number
   height: number
-  prices: PricePoint[] | undefined
+  prices: PricePoint[] | undefined | null
 }
 
 export function PriceChart({ width, height, prices }: PriceChartProps) {
@@ -281,10 +281,18 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
         <MissingPriceChart
           width={width}
           height={graphHeight}
-          message={prices && prices.length === 0 ? <NoV3DataMessage /> : <MissingDataMessage />}
+          message={
+            prices === null ? (
+              <Trans>Loading chart data</Trans>
+            ) : 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}
@@ -341,6 +349,19 @@ 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}
@@ -382,16 +403,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
 }
 

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -0,0 +1,225 @@
+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 { LoadingBubble } from '../loading'
+import { AboutContainer, AboutHeader } from './About'
+import { BreadcrumbNavLink } from './BreadcrumbNavLink'
+import { ChartContainer, ChartHeader, TokenInfoContainer, TokenNameCell } from './ChartSection'
+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;
+  }
+`
+const LoadingChartContainer = styled(ChartContainer)`
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  height: 313px; // save 1px for the border-bottom (ie y-axis)
+  overflow: hidden;
+`
+
+/* 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)`
+  height: 40px;
+`
+const DeltaBubble = styled(DetailBubble)`
+  width: 96px;
+`
+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;
+
+  @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>
+  )
+}
+
+function LoadingChart() {
+  return (
+    <ChartHeader>
+      <TokenInfoContainer>
+        <TokenNameCell>
+          <TokenLogoBubble />
+          <TitleBubble />
+        </TokenNameCell>
+      </TokenInfoContainer>
+      <TokenPrice>
+        <PriceBubble />
+      </TokenPrice>
+      <DeltaContainer>
+        <DeltaBubble />
+      </DeltaContainer>
+      <Space heightSize={6} />
+      <LoadingChartContainer>
+        <div>
+          <ChartAnimation>
+            <Wave />
+            <Wave />
+            <Wave />
+            <Wave />
+            <Wave />
+          </ChartAnimation>
+        </div>
+      </LoadingChartContainer>
+    </ChartHeader>
+  )
+}
+
+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>
+      <LoadingChart />
+      <Space heightSize={45} />
+      <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

@@ -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/TokenTable/FavoriteButton.tsx

@@ -1,35 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import { Heart } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants'
-import { showFavoritesAtom } from '../state'
-import FilterOption from './FilterOption'
-
-const FavoriteButtonContent = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-`
-const FavoriteText = styled.span`
-  @media only screen and (max-width: ${SMALLEST_MOBILE_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
-
-export default function FavoriteButton() {
-  const theme = useTheme()
-  const [showFavorites, setShowFavorites] = useAtom(showFavoritesAtom)
-  return (
-    <FilterOption onClick={() => setShowFavorites(!showFavorites)} active={showFavorites} highlight>
-      <FavoriteButtonContent>
-        <Heart size={20} color={showFavorites ? theme.accentActive : theme.textPrimary} />
-        <FavoriteText>
-          <Trans>Favorites</Trans>
-        </FavoriteText>
-      </FavoriteButtonContent>
-    </FilterOption>
-  )
-}

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -99,14 +99,14 @@ export default function NetworkFilter() {
   const { chainName } = useParams<{ chainName?: string }>()
   const currentChainName = validateUrlChainParam(chainName)
 
-  const { label, circleLogoUrl, logoUrl } = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[currentChainName])
+  const chainInfo = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[currentChainName])
 
   return (
     <StyledMenu ref={node}>
       <NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
         <StyledMenuContent>
           <NetworkLabel>
-            <Logo src={logoUrl ?? circleLogoUrl} /> {label}
+            <Logo src={chainInfo?.logoUrl} /> {chainInfo?.label}
           </NetworkLabel>
           <Chevron open={open}>
             {open ? (
@@ -121,6 +121,7 @@ export default function NetworkFilter() {
         <MenuTimeFlyout>
           {BACKEND_CHAIN_NAMES.map((network) => {
             const chainInfo = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[network])
+            if (!chainInfo) return null
             return (
               <InternalLinkMenuItem
                 key={network}
@@ -130,7 +131,7 @@ export default function NetworkFilter() {
                 }}
               >
                 <NetworkLabel>
-                  <Logo src={chainInfo.logoUrl ?? chainInfo.circleLogoUrl} />
+                  <Logo src={chainInfo.logoUrl} />
                   {chainInfo.label}
                 </NetworkLabel>
                 {network === currentChainName && (

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -5,15 +5,13 @@ import { EventName } from 'analytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
-import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
 import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
-import { ArrowDown, ArrowUp, Heart } from 'react-feather'
+import { ArrowDown, ArrowUp } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
-import { Text } from 'rebass'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
 import { formatDollar } from 'utils/formatNumbers'
@@ -31,9 +29,7 @@ import {
   sortAscendingAtom,
   sortMethodAtom,
   TokenSortMethod,
-  useIsFavorited,
   useSetSortMethod,
-  useToggleFavorite,
 } from '../state'
 import { useTokenLogoURI } from '../TokenDetails/ChartSection'
 import InfoTip from '../TokenDetails/InfoTip'
@@ -48,13 +44,11 @@ const StyledTokenRow = styled.div<{
   first?: boolean
   last?: boolean
   loading?: boolean
-  favoriteTokensEnabled?: boolean
 }>`
   background-color: transparent;
   display: grid;
   font-size: 16px;
-  grid-template-columns: ${({ favoriteTokensEnabled }) =>
-    favoriteTokensEnabled ? '1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr' : '1fr 7fr 4fr 4fr 4fr 4fr 5fr'};
+  grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr;
   line-height: 24px;
   max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
   min-width: 390px;
@@ -111,23 +105,6 @@ const StyledTokenRow = styled.div<{
     }
   }
 `
-export const ClickFavorited = styled.span`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 60%;
-  }
-`
-
-export const FavoriteIcon = styled(Heart)<{ isFavorited: boolean }>`
-  ${ClickableStyle}
-  height: 22px;
-  width: 24px;
-  color: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : theme.textSecondary)};
-  fill: ${({ isFavorited, theme }) => (isFavorited ? theme.accentAction : 'transparent')};
-`
 
 const ClickableContent = styled.div`
   display: flex;
@@ -140,15 +117,6 @@ const ClickableName = styled(ClickableContent)`
   gap: 8px;
   max-width: 100%;
 `
-const FavoriteCell = styled(Cell)`
-  min-width: 40px;
-  color: ${({ theme }) => theme.textSecondary};
-  fill: none;
-
-  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
 const StyledHeaderRow = styled(StyledTokenRow)`
   border-bottom: 1px solid;
   border-color: ${({ theme }) => theme.backgroundOutline};
@@ -183,7 +151,6 @@ const DataCell = styled(Cell)<{ sortable: boolean }>`
   justify-content: flex-end;
   min-width: 80px;
   user-select: ${({ sortable }) => (sortable ? 'none' : 'unset')};
-
   transition: ${({
     theme: {
       transition: { duration, timing },
@@ -239,9 +206,10 @@ const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   height: 100%;
   justify-content: flex-end;
   width: 100%;
-`
-const HeaderCellText = styled(Text)`
-  ${ClickableStyle}
+
+  &:hover {
+    ${ClickableStyle}
+  }
 `
 const SparkLineCell = styled(Cell)`
   padding: 0px 24px;
@@ -346,10 +314,8 @@ export const HEADER_DESCRIPTIONS: Record<TokenSortMethod, ReactNode | undefined>
 /* Get singular header cell for header row */
 function HeaderCell({
   category,
-  sortable,
 }: {
   category: TokenSortMethod // TODO: change this to make it work for trans
-  sortable: boolean
 }) {
   const theme = useTheme()
   const sortAscending = useAtomValue(sortAscendingAtom)
@@ -369,7 +335,7 @@ function HeaderCell({
           )}
         </>
       )}
-      <HeaderCellText>{category}</HeaderCellText>
+      {category}
       {description && <InfoTip text={description}></InfoTip>}
     </HeaderCellWrapper>
   )
@@ -377,7 +343,6 @@ function HeaderCell({
 
 /* Token Row: skeleton row component */
 export function TokenRow({
-  favorited,
   header,
   listNumber,
   tokenInfo,
@@ -388,7 +353,6 @@ export function TokenRow({
   sparkLine,
   ...rest
 }: {
-  favorited: ReactNode
   first?: boolean
   header: boolean
   listNumber: ReactNode
@@ -402,7 +366,6 @@ export function TokenRow({
   last?: boolean
   style?: CSSProperties
 }) {
-  const favoriteTokensEnabled = useFavoriteTokensFlag() === FavoriteTokensVariant.Enabled
   const rowCells = (
     <>
       <ListNumberCell header={header}>{listNumber}</ListNumberCell>
@@ -412,15 +375,10 @@ export function TokenRow({
       <TvlCell sortable={header}>{tvl}</TvlCell>
       <VolumeCell sortable={header}>{volume}</VolumeCell>
       <SparkLineCell>{sparkLine}</SparkLineCell>
-      {favoriteTokensEnabled && <FavoriteCell>{favorited}</FavoriteCell>}
     </>
   )
-  if (header) return <StyledHeaderRow favoriteTokensEnabled={favoriteTokensEnabled}>{rowCells}</StyledHeaderRow>
-  return (
-    <StyledTokenRow favoriteTokensEnabled={favoriteTokensEnabled} {...rest}>
-      {rowCells}
-    </StyledTokenRow>
-  )
+  if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
+  return <StyledTokenRow {...rest}>{rowCells}</StyledTokenRow>
 }
 
 /* Header Row: top header row component for table */
@@ -428,23 +386,21 @@ export function HeaderRow() {
   return (
     <TokenRow
       header={true}
-      favorited={null}
       listNumber="#"
       tokenInfo={<Trans>Token name</Trans>}
-      price={<HeaderCell category={TokenSortMethod.PRICE} sortable />}
-      percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} sortable />}
-      tvl={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} sortable />}
-      volume={<HeaderCell category={TokenSortMethod.VOLUME} sortable />}
+      price={<HeaderCell category={TokenSortMethod.PRICE} />}
+      percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} />}
+      tvl={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} />}
+      volume={<HeaderCell category={TokenSortMethod.VOLUME} />}
       sparkLine={null}
     />
   )
 }
 
 /* Loading State: row component with loading bubbles */
-export function LoadingRow() {
+export function LoadingRow(props: { first?: boolean; last?: boolean }) {
   return (
     <TokenRow
-      favorited={null}
       header={false}
       listNumber={<SmallLoadingBubble />}
       loading
@@ -459,6 +415,7 @@ export function LoadingRow() {
       tvl={<LoadingBubble />}
       volume={<LoadingBubble />}
       sparkLine={<SparkLineLoadingBubble />}
+      {...props}
     />
   )
 }
@@ -476,14 +433,12 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const tokenAddress = token.address
   const tokenName = token.name
   const tokenSymbol = token.symbol
-  const isFavorited = useIsFavorited(tokenAddress)
-  const toggleFavorite = useToggleFavorite(tokenAddress)
   const filterString = useAtomValue(filterStringAtom)
   const sortAscending = useAtomValue(sortAscendingAtom)
 
   const lowercaseChainName = useParams<{ chainName?: string }>().chainName?.toUpperCase() ?? 'ethereum'
   const filterNetwork = lowercaseChainName.toUpperCase()
-  const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork]).circleLogoUrl
+  const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork])?.circleLogoUrl
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
   const arrow = getDeltaArrow(delta)
@@ -510,16 +465,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
       >
         <TokenRow
           header={false}
-          favorited={
-            <ClickFavorited
-              onClick={(e) => {
-                e.preventDefault()
-                toggleFavorite()
-              }}
-            >
-              <FavoriteIcon isFavorited={isFavorited} />
-            </ClickFavorited>
-          }
           listNumber={rank}
           tokenInfo={
             <ClickableName>

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -1,8 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { showFavoritesAtom } from 'components/Tokens/state'
 import { PAGE_SIZE, useTopTokens } from 'graphql/data/TopTokens'
 import { validateUrlChainParam } from 'graphql/data/util'
-import { useAtomValue } from 'jotai/utils'
 import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useParams } from 'react-router-dom'
@@ -56,32 +54,28 @@ function NoTokensState({ message }: { message: ReactNode }) {
   )
 }
 
-const LoadingRowsWrapper = styled.div`
-  margin-top: 8px;
-`
-
-const LoadingRows = (rowCount?: number) => (
-  <LoadingRowsWrapper>
-    {Array(rowCount ?? PAGE_SIZE)
+const LoadingRows = ({ rowCount }: { rowCount: number }) => (
+  <>
+    {Array(rowCount)
       .fill(null)
       .map((_, index) => {
-        return <LoadingRow key={index} />
+        return <LoadingRow key={index} first={index === 0} last={index === rowCount - 1} />
       })}
-  </LoadingRowsWrapper>
+  </>
 )
 
-export function LoadingTokenTable({ rowCount }: { rowCount?: number }) {
+export function LoadingTokenTable({ rowCount = PAGE_SIZE }: { rowCount?: number }) {
   return (
     <GridContainer>
       <HeaderRow />
-      <TokenDataContainer>{LoadingRows(rowCount)}</TokenDataContainer>
+      <TokenDataContainer>
+        <LoadingRows rowCount={rowCount} />
+      </TokenDataContainer>
     </GridContainer>
   )
 }
 
 export default function TokenTable({ setRowCount }: { setRowCount: (c: number) => void }) {
-  const showFavorites = useAtomValue<boolean>(showFavoritesAtom)
-
   // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
   const { tokens, sparklines } = useTopTokens(chainName)
@@ -100,11 +94,7 @@ export default function TokenTable({ setRowCount }: { setRowCount: (c: number) =
       />
     )
   } else if (tokens?.length === 0) {
-    return showFavorites ? (
-      <NoTokensState message={<Trans>You have no favorited tokens</Trans>} />
-    ) : (
-      <NoTokensState message={<Trans>No tokens found</Trans>} />
-    )
+    return <NoTokensState message={<Trans>No tokens found</Trans>} />
   } else {
     return (
       <GridContainer>

src/components/Tokens/state.ts

@@ -1,7 +1,7 @@
 import { TimePeriod } from 'graphql/data/util'
 import { atom, useAtom } from 'jotai'
-import { atomWithReset, atomWithStorage, useAtomValue } from 'jotai/utils'
-import { useCallback, useMemo } from 'react'
+import { atomWithReset } from 'jotai/utils'
+import { useCallback } from 'react'
 
 export enum TokenSortMethod {
   PRICE = 'Price',
@@ -10,31 +10,11 @@ export enum TokenSortMethod {
   VOLUME = 'Volume',
 }
 
-export const favoritesAtom = atomWithStorage<string[]>('favorites', [])
-export const showFavoritesAtom = atomWithStorage<boolean>('showFavorites', false)
 export const filterStringAtom = atomWithReset<string>('')
 export const filterTimeAtom = atom<TimePeriod>(TimePeriod.DAY)
 export const sortMethodAtom = atom<TokenSortMethod>(TokenSortMethod.VOLUME)
 export const sortAscendingAtom = atom<boolean>(false)
 
-/* for favoriting tokens */
-export function useToggleFavorite(tokenAddress: string | undefined | null) {
-  const [favoriteTokens, updateFavoriteTokens] = useAtom(favoritesAtom)
-
-  return useCallback(() => {
-    if (!tokenAddress) return
-    let updatedFavoriteTokens
-    if (favoriteTokens.includes(tokenAddress.toLocaleLowerCase())) {
-      updatedFavoriteTokens = favoriteTokens.filter((address: string) => {
-        return address !== tokenAddress.toLocaleLowerCase()
-      })
-    } else {
-      updatedFavoriteTokens = [...favoriteTokens, tokenAddress.toLocaleLowerCase()]
-    }
-    updateFavoriteTokens(updatedFavoriteTokens)
-  }, [favoriteTokens, tokenAddress, updateFavoriteTokens])
-}
-
 /* keep track of sort category for token table */
 export function useSetSortMethod(newSortMethod: TokenSortMethod) {
   const [sortMethod, setSortMethod] = useAtom(sortMethodAtom)
@@ -49,12 +29,3 @@ export function useSetSortMethod(newSortMethod: TokenSortMethod) {
     }
   }, [sortMethod, setSortMethod, setSortAscending, sortAscending, newSortMethod])
 }
-
-export function useIsFavorited(tokenAddress: string | null | undefined) {
-  const favoritedTokens = useAtomValue<string[]>(favoritesAtom)
-
-  return useMemo(
-    () => (tokenAddress ? favoritedTokens.includes(tokenAddress.toLocaleLowerCase()) : false),
-    [favoritedTokens, tokenAddress]
-  )
-}

src/components/TopLevelModals/index.tsx

@@ -3,7 +3,6 @@ import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import TokensBanner from 'components/Tokens/TokensBanner'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
-import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
 import { lazy } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -27,8 +26,7 @@ export default function TopLevelModals() {
     <>
       <AddressClaimModal isOpen={addressClaimOpen} onDismiss={addressClaimToggle} />
       <ConnectedAccountBlocked account={account} isOpen={open} />
-      {useTokensFlag() === TokensVariant.Enabled &&
-        (location.pathname.includes('/pool') || location.pathname.includes('/swap')) && <TokensBanner />}
+      {(location.pathname.includes('/pool') || location.pathname.includes('/swap')) && <TokensBanner />}
       <Bag />
       {useNftFlag() === NftVariant.Enabled && <TransactionCompleteModal />}
     </>

src/components/TransactionConfirmationModal/index.tsx

@@ -4,7 +4,6 @@ import { useWeb3React } from '@web3-react/core'
 import Badge from 'components/Badge'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedL2ChainId } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
 import { ReactNode, useCallback, useState } from 'react'
 import { AlertCircle, AlertTriangle, ArrowUpCircle, CheckCircle } from 'react-feather'
@@ -24,9 +23,9 @@ import Modal from '../Modal'
 import { RowBetween, RowFixed } from '../Row'
 import AnimatedConfirmation from './AnimatedConfirmation'
 
-const Wrapper = styled.div<{ redesignFlag?: boolean }>`
-  background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface};
-  outline: ${({ redesignFlag, theme }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   width: 100%;
   padding: 1rem;
 `
@@ -59,11 +58,9 @@ function ConfirmationPendingContent({
   pendingText: ReactNode
   inline?: boolean // not in modal
 }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const theme = useTheme()
 
-  return redesignFlagEnabled ? (
+  return (
     <Wrapper>
       <AutoColumn gap="md">
         {!inline && (
@@ -88,31 +85,6 @@ function ConfirmationPendingContent({
         </AutoColumn>
       </AutoColumn>
     </Wrapper>
-  ) : (
-    <Wrapper>
-      <AutoColumn gap="md">
-        {!inline && (
-          <RowBetween>
-            <div />
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-        )}
-        <ConfirmedIcon inline={inline}>
-          <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
-        </ConfirmedIcon>
-        <AutoColumn gap="12px" justify={'center'}>
-          <Text fontWeight={500} fontSize={20} textAlign="center">
-            <Trans>Waiting For Confirmation</Trans>
-          </Text>
-          <Text fontWeight={400} fontSize={16} textAlign="center">
-            {pendingText}
-          </Text>
-          <Text fontWeight={500} fontSize={14} color="#565A69" textAlign="center" marginBottom="12px">
-            <Trans>Confirm this transaction in your wallet</Trans>
-          </Text>
-        </AutoColumn>
-      </AutoColumn>
-    </Wrapper>
   )
 }
 function TransactionSubmittedContent({
@@ -135,9 +107,6 @@ function TransactionSubmittedContent({
   const token = currencyToAdd?.wrapped
   const logoURL = useCurrencyLogoURIs(token)[0]
 
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
   const [success, setSuccess] = useState<boolean | undefined>()
 
   const addToken = useCallback(() => {
@@ -153,7 +122,7 @@ function TransactionSubmittedContent({
       .catch(() => setSuccess(false))
   }, [connector, logoURL, token])
 
-  return redesignFlagEnabled ? (
+  return (
     <Wrapper>
       <Section inline={inline}>
         {!inline && (
@@ -198,51 +167,6 @@ function TransactionSubmittedContent({
         </AutoColumn>
       </Section>
     </Wrapper>
-  ) : (
-    <Wrapper>
-      <Section inline={inline}>
-        {!inline && (
-          <RowBetween>
-            <div />
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-        )}
-        <ConfirmedIcon inline={inline}>
-          <ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.deprecated_primary1} />
-        </ConfirmedIcon>
-        <AutoColumn gap="12px" justify={'center'}>
-          <Text fontWeight={500} fontSize={20} textAlign="center">
-            <Trans>Transaction Submitted</Trans>
-          </Text>
-          {chainId && hash && (
-            <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-              <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
-                <Trans>View on Explorer</Trans>
-              </Text>
-            </ExternalLink>
-          )}
-          {currencyToAdd && connector.watchAsset && (
-            <ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={addToken}>
-              {!success ? (
-                <RowFixed>
-                  <Trans>Add {currencyToAdd.symbol}</Trans>
-                </RowFixed>
-              ) : (
-                <RowFixed>
-                  <Trans>Added {currencyToAdd.symbol} </Trans>
-                  <CheckCircle size={'16px'} stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
-                </RowFixed>
-              )}
-            </ButtonLight>
-          )}
-          <ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
-            <Text fontWeight={500} fontSize={20}>
-              {inline ? <Trans>Return</Trans> : <Trans>Close</Trans>}
-            </Text>
-          </ButtonPrimary>
-        </AutoColumn>
-      </Section>
-    </Wrapper>
   )
 }
 
@@ -274,50 +198,21 @@ export function ConfirmationModalContent({
 }
 
 export function TransactionErrorContent({ message, onDismiss }: { message: ReactNode; onDismiss: () => void }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const theme = useTheme()
-  return redesignFlagEnabled ? (
-    <Wrapper redesignFlag={true}>
+  return (
+    <Wrapper>
       <Section>
         <RowBetween>
           <Text fontWeight={600} fontSize={16}>
             <Trans>Error</Trans>
           </Text>
-          <CloseIcon onClick={onDismiss} redesignFlag={true} />
+          <CloseIcon onClick={onDismiss} />
         </RowBetween>
         <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
           <AlertTriangle color={theme.accentCritical} style={{ strokeWidth: 1 }} size={90} />
           <ThemedText.MediumHeader textAlign="center">{message}</ThemedText.MediumHeader>
         </AutoColumn>
       </Section>
-      <BottomSection gap="12px">
-        <ButtonPrimary onClick={onDismiss} redesignFlag={true}>
-          <Trans>Dismiss</Trans>
-        </ButtonPrimary>
-      </BottomSection>
-    </Wrapper>
-  ) : (
-    <Wrapper>
-      <Section>
-        <RowBetween>
-          <Text fontWeight={500} fontSize={20}>
-            <Trans>Error</Trans>
-          </Text>
-          <CloseIcon onClick={onDismiss} />
-        </RowBetween>
-        <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
-          <AlertTriangle color={theme.deprecated_red1} style={{ strokeWidth: 1.5 }} size={64} />
-          <Text
-            fontWeight={500}
-            fontSize={16}
-            color={theme.deprecated_red1}
-            style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}
-          >
-            {message}
-          </Text>
-        </AutoColumn>
-      </Section>
       <BottomSection gap="12px">
         <ButtonPrimary onClick={onDismiss}>
           <Trans>Dismiss</Trans>
@@ -447,14 +342,12 @@ export default function TransactionConfirmationModal({
   currencyToAdd,
 }: ConfirmationModalProps) {
   const { chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   if (!chainId) return null
 
   // confirmation screen
   return (
-    <Modal isOpen={isOpen} scrollOverlay={true} onDismiss={onDismiss} maxHeight={90} redesignFlag={redesignFlagEnabled}>
+    <Modal isOpen={isOpen} scrollOverlay={true} onDismiss={onDismiss} maxHeight={90}>
       {isL2ChainId(chainId) && (hash || attemptingTxn) ? (
         <L2Content chainId={chainId} hash={hash} onDismiss={onDismiss} pendingText={pendingText} />
       ) : attemptingTxn ? (

src/components/TransactionSettings/index.tsx

@@ -3,7 +3,6 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import ms from 'ms.macro'
 import { darken } from 'polished'
 import { useState } from 'react'
@@ -42,9 +41,9 @@ const FancyButton = styled.button`
   }
 `
 
-const Option = styled(FancyButton)<{ active: boolean; redesignFlag: boolean }>`
+const Option = styled(FancyButton)<{ active: boolean }>`
   margin-right: 8px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   :hover {
     cursor: pointer;
   }
@@ -52,10 +51,10 @@ const Option = styled(FancyButton)<{ active: boolean; redesignFlag: boolean }>`
   color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
 `
 
-const Input = styled.input<{ redesignFlag: boolean }>`
+const Input = styled.input`
   background: ${({ theme }) => theme.deprecated_bg1};
   font-size: 16px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   width: auto;
   outline: none;
   &::-webkit-outer-spin-button,
@@ -66,15 +65,15 @@ const Input = styled.input<{ redesignFlag: boolean }>`
   text-align: right;
 
   ::placeholder {
-    color: ${({ theme, redesignFlag }) => redesignFlag && theme.textTertiary};
+    color: ${({ theme }) => theme.textTertiary};
   }
 `
 
-const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; redesignFlag: boolean }>`
+const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }>`
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   flex: 1;
   border: ${({ theme, active, warning }) =>
     active
@@ -109,8 +108,6 @@ const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
   const { chainId } = useWeb3React()
   const theme = useTheme()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const [userSlippageTolerance, setUserSlippageTolerance] = useUserSlippageTolerance()
 
@@ -185,7 +182,6 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
         </RowFixed>
         <RowBetween>
           <Option
-            redesignFlag={redesignFlagEnabled}
             onClick={() => {
               parseSlippageInput('')
             }}
@@ -193,12 +189,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
           >
             <Trans>Auto</Trans>
           </Option>
-          <OptionCustom
-            redesignFlag={redesignFlagEnabled}
-            active={userSlippageTolerance !== 'auto'}
-            warning={!!slippageError}
-            tabIndex={-1}
-          >
+          <OptionCustom active={userSlippageTolerance !== 'auto'} warning={!!slippageError} tabIndex={-1}>
             <RowBetween>
               {tooLow || tooHigh ? (
                 <SlippageEmojiContainer>
@@ -208,7 +199,6 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 </SlippageEmojiContainer>
               ) : null}
               <Input
-                redesignFlag={redesignFlagEnabled}
                 placeholder={placeholderSlippage.toFixed(2)}
                 value={
                   slippageInput.length > 0
@@ -258,14 +248,8 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
             />
           </RowFixed>
           <RowFixed>
-            <OptionCustom
-              style={{ width: '80px' }}
-              warning={!!deadlineError}
-              tabIndex={-1}
-              redesignFlag={redesignFlagEnabled}
-            >
+            <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
               <Input
-                redesignFlag={redesignFlagEnabled}
                 placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
                 value={
                   deadlineInput.length > 0

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -35,7 +35,7 @@ const WalletButton = styled(ButtonPrimary)`
 `
 
 const ProfileButton = styled(WalletButton)`
-  background: ${({ theme }) => theme.backgroundInteractive};
+  background: ${({ theme }) => theme.accentAction};
   transition: ${({ theme }) => theme.transition.duration.fast} ${({ theme }) => theme.transition.timing.ease}
     background-color;
 `
@@ -133,7 +133,7 @@ const AuthenticatedHeader = () => {
   }, [balanceString, nativeCurrencyPrice])
 
   const navigateToProfile = () => {
-    navigate('/profile')
+    navigate('/nfts/profile')
     closeModal()
   }
 

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -6,6 +6,7 @@ const Menu = styled.div`
   height: 100%;
   font-size: 16px;
   overflow: auto;
+  max-height: 450px;
 
   // Firefox scrollbar styling
   scrollbar-width: thin;

src/components/WalletModal/Option.tsx

@@ -1,26 +1,22 @@
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
 import { Check } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import { ExternalLink } from '../../theme'
 
-const InfoCard = styled.button<{ isActive?: boolean; redesignFlag?: boolean }>`
-  background-color: ${({ theme, isActive, redesignFlag }) =>
-    redesignFlag ? theme.backgroundInteractive : isActive ? theme.deprecated_bg3 : theme.deprecated_bg2};
+const InfoCard = styled.button<{ isActive?: boolean }>`
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   padding: 1rem;
   outline: none;
   border: 1px solid;
   border-radius: 12px;
   width: 100% !important;
   &:focus {
-    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1px ${theme.deprecated_primary1}`};
-    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
+    background-color: ${({ theme }) => theme.hoverState};
   }
-  border-color: ${({ theme, isActive, redesignFlag }) =>
-    redesignFlag ? (isActive ? theme.accentActive : 'transparent') : isActive ? 'transparent' : theme.deprecated_bg3};
+  border-color: ${({ theme, isActive }) => (isActive ? theme.accentActive : 'transparent')};
 `
 
 const CheckIcon = styled(Check)`
@@ -53,48 +49,24 @@ const OptionCardLeft = styled.div`
 const OptionCardClickable = styled(OptionCard as any)<{
   active?: boolean
   clickable?: boolean
-  redesignFlag?: boolean
 }>`
   margin-top: 0;
   border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`};
   &:hover {
     cursor: ${({ clickable }) => clickable && 'pointer'};
-    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
-    border: ${({ clickable, redesignFlag, theme }) =>
-      clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`};
+    background-color: ${({ theme }) => theme.hoverState};
   }
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `
 
-const GreenCircle = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
-  justify-content: center;
-  align-items: center;
-
-  &:first-child {
-    height: 8px;
-    width: 8px;
-    margin-right: 8px;
-    background-color: ${({ theme }) => theme.deprecated_green1};
-    border-radius: 50%;
-  }
-`
-
-const CircleWrapper = styled.div`
-  color: ${({ theme }) => theme.deprecated_green1};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-const HeaderText = styled.div<{ redesignFlag?: boolean }>`
+const HeaderText = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
   justify-content: center;
   color: ${(props) =>
     props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '1rem')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+  font-size: 16px;
+  font-weight: 600;
 `
 
 const SubHeader = styled.div`
@@ -103,20 +75,6 @@ const SubHeader = styled.div`
   font-size: 12px;
 `
 
-const IconWrapperDeprecated = styled.div<{ size?: number | null }>`
-  ${({ theme }) => theme.flexColumnNoWrap};
-  align-items: center;
-  justify-content: center;
-  & > img,
-  span {
-    height: ${({ size }) => (size ? size + 'px' : '24px')};
-    width: ${({ size }) => (size ? size + 'px' : '24px')};
-  }
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    align-items: flex-end;
-  `};
-`
-
 const IconWrapper = styled.div<{ size?: number | null }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
@@ -155,9 +113,6 @@ export default function Option({
   isActive?: boolean
   id: string
 }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
   const content = (
     <TraceEvent
       events={[Event.onClick]}
@@ -165,53 +120,24 @@ export default function Option({
       properties={{ wallet_type: header }}
       element={ElementName.WALLET_TYPE_OPTION}
     >
-      {redesignFlagEnabled ? (
-        <OptionCardClickable
-          id={id}
-          onClick={onClick}
-          clickable={clickable && !isActive}
-          active={isActive}
-          redesignFlag={true}
-          data-testid="wallet-modal-option"
-        >
-          <OptionCardLeft>
-            <HeaderText color={color} redesignFlag={true}>
-              <IconWrapper size={size}>
-                <img src={icon} alt={'Icon'} />
-              </IconWrapper>
-              {header}
-            </HeaderText>
-            {subheader && <SubHeader>{subheader}</SubHeader>}
-          </OptionCardLeft>
-          {isActive && <CheckIcon />}
-        </OptionCardClickable>
-      ) : (
-        <OptionCardClickable
-          id={id}
-          onClick={onClick}
-          clickable={clickable && !isActive}
-          active={isActive}
-          redesignFlag={false}
-          data-testid="wallet-modal-option"
-        >
-          <OptionCardLeft>
-            <HeaderText color={color} redesignFlag={false}>
-              {isActive && (
-                <CircleWrapper>
-                  <GreenCircle>
-                    <div />
-                  </GreenCircle>
-                </CircleWrapper>
-              )}
-              {header}
-            </HeaderText>
-            {subheader && <SubHeader>{subheader}</SubHeader>}
-          </OptionCardLeft>
-          <IconWrapperDeprecated size={size}>
-            <img src={icon} alt={'Icon'} />
-          </IconWrapperDeprecated>
-        </OptionCardClickable>
-      )}
+      <OptionCardClickable
+        id={id}
+        onClick={onClick}
+        clickable={clickable && !isActive}
+        active={isActive}
+        data-testid="wallet-modal-option"
+      >
+        <OptionCardLeft>
+          <HeaderText color={color}>
+            <IconWrapper size={size}>
+              <img src={icon} alt={'Icon'} />
+            </IconWrapper>
+            {header}
+          </HeaderText>
+          {subheader && <SubHeader>{subheader}</SubHeader>}
+        </OptionCardLeft>
+        {isActive && <CheckIcon />}
+      </OptionCardClickable>
     </TraceEvent>
   )
   if (link) {

src/components/WalletModal/PendingView.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Connector } from '@web3-react/types'
 import { ButtonEmpty, ButtonPrimary } from 'components/Button'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
@@ -74,10 +73,7 @@ export default function PendingView({
   tryActivation: (connector: Connector) => void
   openOptions: () => void
 }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
-  return redesignFlagEnabled ? (
+  return (
     <PendingSection>
       <LoadingMessage>
         <LoadingWrapper>
@@ -94,7 +90,6 @@ export default function PendingView({
               </ThemedText.BodyPrimary>
               <ButtonPrimary
                 $borderRadius="12px"
-                redesignFlag={true}
                 onClick={() => {
                   tryActivation(connector)
                 }}
@@ -111,7 +106,7 @@ export default function PendingView({
             <>
               <WaitingToConnectSection>
                 <LoaderContainer style={{ padding: '16px 0px' }}>
-                  <Loader redesignFlag={true} strokeWidth={0.8} size="100px" />
+                  <Loader strokeWidth={0.8} size="100px" />
                 </LoaderContainer>
                 <ThemedText.MediumHeader>
                   <Trans>Waiting to connect</Trans>
@@ -125,47 +120,5 @@ export default function PendingView({
         </LoadingWrapper>
       </LoadingMessage>
     </PendingSection>
-  ) : (
-    <PendingSection>
-      <LoadingMessage>
-        <LoadingWrapper>
-          {error ? (
-            <ErrorGroup>
-              <ThemedText.DeprecatedMediumHeader marginBottom={12}>
-                <Trans>Error connecting</Trans>
-              </ThemedText.DeprecatedMediumHeader>
-              <ThemedText.DeprecatedBody fontSize={14} marginBottom={36} textAlign="center">
-                <Trans>
-                  The connection attempt failed. Please click try again and follow the steps to connect in your wallet.
-                </Trans>
-              </ThemedText.DeprecatedBody>
-              <ButtonPrimary
-                $borderRadius="12px"
-                padding="12px"
-                onClick={() => {
-                  tryActivation(connector)
-                }}
-              >
-                <Trans>Try Again</Trans>
-              </ButtonPrimary>
-              <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
-                <ThemedText.DeprecatedLink fontSize={12} onClick={openOptions}>
-                  <Trans>Back to wallet selection</Trans>
-                </ThemedText.DeprecatedLink>
-              </ButtonEmpty>
-            </ErrorGroup>
-          ) : (
-            <>
-              <ThemedText.DeprecatedBlack fontSize={20} marginY={16}>
-                <LoaderContainer>
-                  <Loader stroke="currentColor" size="32px" />
-                </LoaderContainer>
-                <Trans>Connecting...</Trans>
-              </ThemedText.DeprecatedBlack>
-            </>
-          )}
-        </LoadingWrapper>
-      </LoadingMessage>
-    </PendingSection>
   )
 }

src/components/WalletModal/index.tsx

@@ -6,9 +6,9 @@ import { CUSTOM_USER_PROPERTIES, EventName, WALLET_CONNECTION_RESULT } from 'ana
 import { sendEvent } from 'components/analytics'
 import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
+import { networkConnection } from 'connection'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import usePrevious from 'hooks/usePrevious'
 import { useCallback, useEffect, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
@@ -47,30 +47,29 @@ const CloseColor = styled(Close)`
   }
 `
 
-const Wrapper = styled.div<{ redesignFlag?: boolean }>`
+const Wrapper = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface};
-  outline: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
-  box-shadow: ${({ redesignFlag, theme }) => redesignFlag && theme.deepShadow};
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  box-shadow: ${({ theme }) => theme.deepShadow};
   margin: 0;
   padding: 0;
   width: 100%;
 `
 
-const HeaderRow = styled.div<{ redesignFlag?: boolean }>`
+const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
-  size: ${({ redesignFlag }) => redesignFlag && '16px'};
+  font-weight: 600;
+  size: 16px;
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding: 1rem;
   `};
 `
 
-const ContentWrapper = styled.div<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
-  border: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
+const ContentWrapper = styled.div`
+  background-color: ${({ theme }) => theme.backgroundSurface};
   padding: 0 1rem 1rem 1rem;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
@@ -155,8 +154,6 @@ export default function WalletModal({
 
   const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets()
 
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const nftFlagEnabled = useNftFlag() === NftVariant.Enabled
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
   const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
@@ -192,6 +189,13 @@ export default function WalletModal({
     }
   }, [pendingConnector, walletView])
 
+  // Keep the network connector in sync with any active user connector to prevent chain-switching on wallet disconnection.
+  useEffect(() => {
+    if (chainId && connector !== networkConnection.connector) {
+      networkConnection.connector.activate(chainId)
+    }
+  }, [chainId, connector])
+
   // When new wallet is successfully set by the user, trigger logging of Amplitude analytics event.
   useEffect(() => {
     if (account && account !== lastActiveWalletAddress) {
@@ -301,7 +305,7 @@ export default function WalletModal({
       )
     } else {
       headerRow = (
-        <HeaderRow redesignFlag={redesignFlagEnabled}>
+        <HeaderRow>
           <HoverText>
             <Trans>Connect a wallet</Trans>
           </HoverText>
@@ -367,16 +371,8 @@ export default function WalletModal({
   }
 
   return (
-    <Modal
-      isOpen={walletModalOpen}
-      onDismiss={toggleWalletModal}
-      minHeight={false}
-      maxHeight={90}
-      redesignFlag={redesignFlagEnabled}
-    >
-      <Wrapper data-testid="wallet-modal" redesignFlag={redesignFlagEnabled}>
-        {getModalContent()}
-      </Wrapper>
+    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
+      <Wrapper data-testid="wallet-modal">{getModalContent()}</Wrapper>
     </Modal>
   )
 }

src/components/Web3Status/index.tsx

@@ -1,11 +1,9 @@
-// eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
 import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Portal } from 'nft/components/common/Portal'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
@@ -13,10 +11,9 @@ import { useMemo, useRef } from 'react'
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
-import styled, { css, useTheme } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useHasSocks } from '../../hooks/useSocksBalance'
 import {
   useCloseModal,
   useModalIsOpen,
@@ -95,33 +92,6 @@ const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>`
   }
 `
 
-const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
-  background-color: ${({ theme }) => theme.deprecated_primary4};
-  border: none;
-  color: ${({ theme }) => theme.deprecated_primaryText1};
-  font-weight: 500;
-
-  :hover,
-  :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
-    color: ${({ theme }) => theme.deprecated_primaryText1};
-  }
-
-  ${({ faded }) =>
-    faded &&
-    css`
-      background-color: ${({ theme }) => theme.deprecated_primary5};
-      border: 1px solid ${({ theme }) => theme.deprecated_primary5};
-      color: ${({ theme }) => theme.deprecated_primaryText1};
-
-      :hover,
-      :focus {
-        border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
-        color: ${({ theme }) => darken(0.05, theme.deprecated_primaryText1)};
-      }
-    `}
-`
-
 const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
   background-color: ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
@@ -162,14 +132,6 @@ function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
   return b.addedTime - a.addedTime
 }
 
-function Sock() {
-  return (
-    <span role="img" aria-label={t`has socks emoji`} style={{ marginTop: -4, marginBottom: -4 }}>
-      🧦
-    </span>
-  )
-}
-
 const VerticalDivider = styled.div`
   height: 20px;
   margin: 0px;
@@ -217,11 +179,10 @@ function Web3StatusInner() {
     inputError: swapInputError,
   } = useDerivedSwapInfo()
   const validSwapQuote = getIsValidSwapQuote(trade, tradeState, swapInputError)
-  const navbarFlagEnabled = useNavBarFlag() === NavBarVariant.Enabled
   const theme = useTheme()
   const toggleWalletDropdown = useToggleWalletDropdown()
   const toggleWalletModal = useToggleWalletModal()
-  const walletIsOpen = useIsOpen()
+  const walletIsOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
 
@@ -235,8 +196,7 @@ function Web3StatusInner() {
   const pending = sortedRecentTransactions.filter((tx) => !tx.receipt).map((tx) => tx.hash)
 
   const hasPendingTransactions = !!pending.length
-  const hasSocks = useHasSocks()
-  const toggleWallet = navbarFlagEnabled ? toggleWalletDropdown : toggleWalletModal
+  const toggleWallet = toggleWalletDropdown
 
   if (!chainId) {
     return null
@@ -256,7 +216,7 @@ function Web3StatusInner() {
     }
     return (
       <Web3StatusConnected data-testid="web3-status-connected" onClick={toggleWallet} pending={hasPendingTransactions}>
-        {navbarFlagEnabled && !hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
+        {!hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
@@ -266,18 +226,10 @@ function Web3StatusInner() {
           </RowBetween>
         ) : (
           <>
-            {hasSocks && !navbarFlagEnabled ? <Sock /> : null}
             <Text>{ENSName || shortenAddress(account)}</Text>
-            {navbarFlagEnabled ? (
-              walletIsOpen ? (
-                <ChevronUp {...chevronProps} />
-              ) : (
-                <ChevronDown {...chevronProps} />
-              )
-            ) : null}
+            {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
           </>
         )}
-        {!navbarFlagEnabled && !hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
       </Web3StatusConnected>
     )
   } else {
@@ -293,35 +245,20 @@ function Web3StatusInner() {
         properties={{ received_swap_quote: validSwapQuote }}
         element={ElementName.CONNECT_WALLET_BUTTON}
       >
-        {navbarFlagEnabled ? (
-          <Web3StatusConnectWrapper faded={!account}>
-            <StyledConnectButton data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
-              <Trans>Connect</Trans>
-            </StyledConnectButton>
-            <VerticalDivider />
-            <ChevronWrapper onClick={toggleWalletDropdown}>
-              {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
-            </ChevronWrapper>
-          </Web3StatusConnectWrapper>
-        ) : (
-          <Web3StatusConnect onClick={toggleWallet} faded={!account}>
-            <Text>
-              <Trans>Connect Wallet</Trans>
-            </Text>
-          </Web3StatusConnect>
-        )}
+        <Web3StatusConnectWrapper faded={!account}>
+          <StyledConnectButton data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
+            <Trans>Connect</Trans>
+          </StyledConnectButton>
+          <VerticalDivider />
+          <ChevronWrapper onClick={toggleWalletDropdown}>
+            {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
+          </ChevronWrapper>
+        </Web3StatusConnectWrapper>
       </TraceEvent>
     )
   }
 }
 
-const useIsOpen = () => {
-  const walletDropdownOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
-  const navbarFlag = useNavBarFlag()
-
-  return useMemo(() => navbarFlag === NavBarVariant.Enabled && walletDropdownOpen, [navbarFlag, walletDropdownOpen])
-}
-
 export default function Web3Status() {
   const { ENSName } = useWeb3React()
 
@@ -329,7 +266,7 @@ export default function Web3Status() {
   const ref = useRef<HTMLDivElement>(null)
   const walletRef = useRef<HTMLDivElement>(null)
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
-  const isOpen = useIsOpen()
+  const isOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
 
   useOnClickOutside(ref, isOpen ? closeModal : undefined, [walletRef])
 

src/components/Widget/index.tsx

@@ -1,7 +1,3 @@
-// Import fonts.css for the side-effect of loading fonts for @uniswap/widgets.
-// eslint-disable-next-line no-restricted-imports
-import '@uniswap/widgets/dist/fonts.css'
-
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import {
@@ -13,17 +9,18 @@ import {
 } from '@uniswap/widgets'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'analytics'
-import { EventName, SectionName } from 'analytics/constants'
-import { SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
+import { EventName, SectionName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
 import { useTrace } from 'analytics/Trace'
 import {
   formatPercentInBasisPointsNumber,
+  formatSwapQuoteReceivedEventProperties,
   formatToDecimal,
+  getDurationFromDateMilliseconds,
   getPriceUpdateBasisPoints,
   getTokenAddress,
 } from 'analytics/utils'
 import { useActiveLocale } from 'hooks/useActiveLocale'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { useIsDarkMode } from 'state/user/hooks'
 import { DARK_THEME, LIGHT_THEME } from 'theme/widget'
 import { computeRealizedPriceImpact } from 'utils/prices'
@@ -37,25 +34,48 @@ export const WIDGET_WIDTH = 360
 
 const WIDGET_ROUTER_URL = 'https://api.uniswap.org/v1/'
 
+function useWidgetTheme() {
+  return useIsDarkMode() ? DARK_THEME : LIGHT_THEME
+}
+
 export interface WidgetProps {
-  defaultToken?: Currency
+  token?: Currency
+  onTokenChange?: (token: Currency) => void
   onReviewSwapClick?: OnReviewSwapClick
 }
 
-export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps) {
-  const locale = useActiveLocale()
-  const theme = useIsDarkMode() ? DARK_THEME : LIGHT_THEME
+export default function Widget({ token, onTokenChange, onReviewSwapClick }: WidgetProps) {
   const { connector, provider } = useWeb3React()
-
-  const { inputs, tokenSelector } = useSyncWidgetInputs(defaultToken)
+  const locale = useActiveLocale()
+  const theme = useWidgetTheme()
+  const { inputs, tokenSelector } = useSyncWidgetInputs({ token, onTokenChange })
   const { settings } = useSyncWidgetSettings()
   const { transactions } = useSyncWidgetTransactions()
 
+  const onSwitchChain = useCallback(
+    // TODO(WEB-1757): Widget should not break if this rejects - upstream the catch to ignore it.
+    ({ chainId }: AddEthereumChainParameter) => switchChain(connector, Number(chainId)).catch(() => undefined),
+    [connector]
+  )
+
   const trace = useTrace({ section: SectionName.WIDGET })
-
-  // TODO(lynnshaoyu): add back onInitialSwapQuote logging once widget side logic is fixed
-  // in onInitialSwapQuote handler.
-
+  const [initialQuoteDate, setInitialQuoteDate] = useState<Date>()
+  const onInitialSwapQuote = useCallback(
+    (trade: Trade<Currency, Currency, TradeType>) => {
+      setInitialQuoteDate(new Date())
+      const eventProperties = {
+        // TODO(1416): Include undefined values.
+        ...formatSwapQuoteReceivedEventProperties(
+          trade,
+          /* gasUseEstimateUSD= */ undefined,
+          /* fetchingSwapQuoteStartTime= */ undefined
+        ),
+        ...trace,
+      }
+      sendAnalyticsEvent(EventName.SWAP_QUOTE_RECEIVED, eventProperties)
+    },
+    [trace]
+  )
   const onApproveToken = useCallback(() => {
     const input = inputs.value.INPUT
     if (!input) return
@@ -67,11 +87,9 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
     }
     sendAnalyticsEvent(EventName.APPROVE_TOKEN_TXN_SUBMITTED, eventProperties)
   }, [inputs.value.INPUT, trace])
-
   const onExpandSwapDetails = useCallback(() => {
     sendAnalyticsEvent(EventName.SWAP_DETAILS_EXPANDED, { ...trace })
   }, [trace])
-
   const onSwapPriceUpdateAck = useCallback(
     (stale: Trade<Currency, Currency, TradeType>, update: Trade<Currency, Currency, TradeType>) => {
       const eventProperties = {
@@ -86,7 +104,6 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
     },
     [trace]
   )
-
   const onSubmitSwapClick = useCallback(
     (trade: Trade<Currency, Currency, TradeType>) => {
       const eventProperties = {
@@ -106,23 +123,16 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
         is_auto_router_api: undefined,
         is_auto_slippage: undefined,
         chain_id: trade.inputAmount.currency.chainId,
-        // duration should be getDurationFromDateMilliseconds(initialQuoteDate) once initialQuoteDate
-        // is made available from TODO above for onInitialSwapQuote logging.
-        duration_from_first_quote_to_swap_submission_milliseconds: undefined,
+        duration_from_first_quote_to_swap_submission_milliseconds: getDurationFromDateMilliseconds(initialQuoteDate),
         swap_quote_block_number: undefined,
         ...trace,
       }
       sendAnalyticsEvent(EventName.SWAP_SUBMITTED_BUTTON_CLICKED, eventProperties)
     },
-    [trace]
-  )
-  const onSwitchChain = useCallback(
-    // TODO: Widget should not break if this rejects - upstream the catch to ignore it.
-    ({ chainId }: AddEthereumChainParameter) => switchChain(connector, Number(chainId)).catch(() => undefined),
-    [connector]
+    [initialQuoteDate, trace]
   )
 
-  if (!inputs.value.INPUT && !inputs.value.OUTPUT) {
+  if (!(inputs.value.INPUT || inputs.value.OUTPUT)) {
     return <WidgetSkeleton />
   }
 
@@ -132,9 +142,9 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
         disableBranding
         hideConnectionUI
         routerUrl={WIDGET_ROUTER_URL}
-        width={WIDGET_WIDTH}
         locale={locale}
         theme={theme}
+        width={WIDGET_WIDTH}
         // defaultChainId is excluded - it is always inferred from the passed provider
         provider={provider}
         onSwitchChain={onSwitchChain}
@@ -146,6 +156,7 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
         onReviewSwapClick={onReviewSwapClick}
         onSubmitSwapClick={onSubmitSwapClick}
         onSwapApprove={onApproveToken}
+        onInitialSwapQuote={onInitialSwapQuote}
         onSwapPriceUpdateAck={onSwapPriceUpdateAck}
       />
       {tokenSelector}
@@ -154,5 +165,6 @@ export default function Widget({ defaultToken, onReviewSwapClick }: WidgetProps)
 }
 
 export function WidgetSkeleton() {
-  return <SwapWidgetSkeleton theme={useIsDarkMode() ? DARK_THEME : LIGHT_THEME} width={WIDGET_WIDTH} />
+  const theme = useWidgetTheme()
+  return <SwapWidgetSkeleton theme={theme} width={WIDGET_WIDTH} />
 }

src/components/Widget/inputs.tsx

@@ -7,15 +7,42 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 
 const EMPTY_AMOUNT = ''
 
+type SwapValue = Required<SwapController>['value']
+type SwapTokens = Pick<SwapValue, Field.INPUT | Field.OUTPUT> & { default?: Currency }
+
+function includesDefaultToken(tokens: SwapTokens) {
+  if (!tokens.default) return true
+  return tokens[Field.INPUT]?.equals(tokens.default) || tokens[Field.OUTPUT]?.equals(tokens.default)
+}
+
 /**
  * Integrates the Widget's inputs.
  * Treats the Widget as a controlled component, using the app's own token selector for selection.
+ * Enforces that token is a part of the returned value.
  */
-export function useSyncWidgetInputs(defaultToken?: Currency) {
+export function useSyncWidgetInputs({
+  token,
+  onTokenChange,
+}: {
+  token?: Currency
+  onTokenChange?: (token: Currency) => void
+}) {
   const trace = useTrace({ section: SectionName.WIDGET })
 
-  const [type, setType] = useState(TradeType.EXACT_INPUT)
-  const [amount, setAmount] = useState(EMPTY_AMOUNT)
+  const [type, setType] = useState<SwapValue['type']>(TradeType.EXACT_INPUT)
+  const [amount, setAmount] = useState<SwapValue['amount']>(EMPTY_AMOUNT)
+  const [tokens, setTokens] = useState<SwapTokens>({ [Field.OUTPUT]: token, default: token })
+
+  useEffect(() => {
+    setTokens((tokens) => {
+      const update = { ...tokens, default: token }
+      if (!includesDefaultToken(update)) {
+        return { [Field.OUTPUT]: update.default, default: update.default }
+      }
+      return update
+    })
+  }, [token])
+
   const onAmountChange = useCallback(
     (field: Field, amount: string, origin?: 'max') => {
       if (origin === 'max') {
@@ -27,70 +54,79 @@ export function useSyncWidgetInputs(defaultToken?: Currency) {
     [trace]
   )
 
-  const [tokens, setTokens] = useState<{ [Field.INPUT]?: Currency; [Field.OUTPUT]?: Currency }>({
-    [Field.OUTPUT]: defaultToken,
-  })
-
-  useEffect(() => {
-    // Avoid overwriting tokens if none are specified, so that a loading token does not cause layout flashing.
-    if (!defaultToken) return
-    setTokens({
-      [Field.OUTPUT]: defaultToken,
-    })
-    setAmount(EMPTY_AMOUNT)
-  }, [defaultToken])
-
   const onSwitchTokens = useCallback(() => {
     sendAnalyticsEvent(EventName.SWAP_TOKENS_REVERSED, { ...trace })
     setType((type) => invertTradeType(type))
     setTokens((tokens) => ({
       [Field.INPUT]: tokens[Field.OUTPUT],
       [Field.OUTPUT]: tokens[Field.INPUT],
+      default: tokens.default,
     }))
   }, [trace])
 
   const [selectingField, setSelectingField] = useState<Field>()
-  const otherField = useMemo(() => (selectingField === Field.INPUT ? Field.OUTPUT : Field.INPUT), [selectingField])
-  const [selectingToken, otherToken] = useMemo(() => {
-    if (selectingField === undefined) return [undefined, undefined]
-    return [tokens[selectingField], tokens[otherField]]
-  }, [otherField, selectingField, tokens])
   const onTokenSelectorClick = useCallback((field: Field) => {
     setSelectingField(field)
     return false
   }, [])
+
   const onTokenSelect = useCallback(
     (token: Currency) => {
       if (selectingField === undefined) return
-      setType(TradeType.EXACT_INPUT)
-      setTokens(() => {
-        return {
-          [otherField]: otherToken?.equals(token) ? selectingToken : otherToken,
-          [selectingField]: token,
-        }
-      })
+      setType(toTradeType(selectingField))
+
+      const otherField = invertField(selectingField)
+      let otherToken = tokens[otherField]
+      otherToken = otherToken?.equals(token) ? tokens[selectingField] : otherToken
+      const update = {
+        [selectingField]: token,
+        [otherField]: otherToken,
+        default: tokens.default,
+      }
+      if (!includesDefaultToken(update)) {
+        onTokenChange?.(update[Field.OUTPUT] || update[Field.INPUT] || token)
+      }
+      setTokens(update)
     },
-    [otherField, otherToken, selectingField, selectingToken]
+    [onTokenChange, selectingField, tokens]
   )
   const tokenSelector = (
     <CurrencySearchModal
       isOpen={selectingField !== undefined}
       onDismiss={() => setSelectingField(undefined)}
-      selectedCurrency={selectingToken}
-      otherSelectedCurrency={otherToken}
+      selectedCurrency={selectingField && tokens[selectingField]}
+      otherSelectedCurrency={selectingField && tokens[invertField(selectingField)]}
       onCurrencySelect={onTokenSelect}
     />
   )
 
-  const value: SwapController['value'] = useMemo(() => ({ type, amount, ...tokens }), [amount, tokens, type])
+  const value: SwapValue = useMemo(
+    () => ({
+      type,
+      amount,
+      // If the default has not yet been handled, preemptively disable the widget by passing no tokens. Effectively,
+      // this resets the widget - avoiding rendering stale state - because with no tokens the skeleton will be rendered.
+      ...(token && tokens.default?.equals(token) ? tokens : undefined),
+    }),
+    [amount, token, tokens, type]
+  )
   const valueHandlers: SwapEventHandlers = useMemo(
     () => ({ onAmountChange, onSwitchTokens, onTokenSelectorClick }),
     [onAmountChange, onSwitchTokens, onTokenSelectorClick]
   )
-
   return { inputs: { value, ...valueHandlers }, tokenSelector }
 }
 
+// TODO(zzmp): Move to @uniswap/widgets.
+function invertField(field: Field) {
+  switch (field) {
+    case Field.INPUT:
+      return Field.OUTPUT
+    case Field.OUTPUT:
+      return Field.INPUT
+  }
+}
+
 // TODO(zzmp): Move to @uniswap/widgets.
 function toTradeType(modifiedField: Field) {
   switch (modifiedField) {

src/components/swap/AdvancedSwapDetails.tsx

@@ -4,7 +4,6 @@ import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
@@ -55,8 +54,6 @@ export function AdvancedSwapDetails({
   const theme = useTheme()
   const { chainId } = useWeb3React()
   const nativeCurrency = useNativeCurrency()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const { expectedOutputAmount, priceImpact } = useMemo(() => {
     return {
@@ -109,7 +106,7 @@ export function AdvancedSwapDetails({
             </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
-        <Separator redesignFlag={redesignFlagEnabled} />
+        <Separator />
         <RowBetween>
           <RowFixed style={{ marginRight: '20px' }}>
             <MouseoverTooltip

src/components/swap/SwapDetailsDropdown.tsx

@@ -10,7 +10,6 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { MouseoverTooltipContent } from 'components/Tooltip'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useState } from 'react'
 import { ChevronDown, Info } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -23,13 +22,13 @@ import { ResponsiveTooltipContainer } from './styleds'
 import SwapRoute from './SwapRoute'
 import TradePrice from './TradePrice'
 
-const Wrapper = styled(Row)<{ redesignFlag: boolean }>`
+const Wrapper = styled(Row)`
   width: 100%;
   justify-content: center;
-  border-radius: ${({ redesignFlag }) => redesignFlag && 'inherit'};
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 12px'};
-  margin-top: ${({ redesignFlag }) => (redesignFlag ? '0px' : '4px')};
-  min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
+  border-radius: inherit;
+  padding: 8px 12px;
+  margin-top: 0;
+  min-height: 32px;
 `
 
 const StyledInfoIcon = styled(Info)`
@@ -39,18 +38,15 @@ const StyledInfoIcon = styled(Info)`
   color: ${({ theme }) => theme.deprecated_text3};
 `
 
-const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
+const StyledCard = styled(OutlineCard)`
   padding: 12px;
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
 `
 
-const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
-  padding: ${({ redesignFlag }) => (redesignFlag ? '0' : '4px 8px')};
-  background-color: ${({ open, theme, redesignFlag }) =>
-    open && !redesignFlag ? theme.deprecated_bg1 : 'transparent'};
+const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
+  padding: 0;
   align-items: center;
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
-  border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
 `
 
 const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>`
@@ -130,11 +126,9 @@ export default function SwapDetailsDropdown({
   const theme = useTheme()
   const { chainId } = useWeb3React()
   const [showDetails, setShowDetails] = useState(false)
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   return (
-    <Wrapper style={{ marginTop: redesignFlagEnabled ? '0' : '8px' }} redesignFlag={redesignFlagEnabled}>
+    <Wrapper style={{ marginTop: '0' }}>
       <AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[Event.onClick]}
@@ -142,12 +136,7 @@ export default function SwapDetailsDropdown({
           element={ElementName.SWAP_DETAILS_DROPDOWN}
           shouldLogImpression={!showDetails}
         >
-          <StyledHeaderRow
-            redesignFlag={redesignFlagEnabled}
-            onClick={() => setShowDetails(!showDetails)}
-            disabled={!trade}
-            open={showDetails}
-          >
+          <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
             <RowFixed style={{ position: 'relative' }}>
               {loading || syncing ? (
                 <StyledPolling>
@@ -214,7 +203,7 @@ export default function SwapDetailsDropdown({
         <AnimatedDropdown open={showDetails}>
           <AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (
-              <StyledCard redesignFlag={redesignFlagEnabled}>
+              <StyledCard>
                 <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
               </StyledCard>
             ) : null}

src/components/swap/SwapModalHeader.tsx

@@ -3,7 +3,6 @@ import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { sendAnalyticsEvent } from 'analytics'
 import { EventName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'analytics/constants'
 import { getPriceUpdateBasisPoints } from 'analytics/utils'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useEffect, useState } from 'react'
 import { AlertTriangle, ArrowDown } from 'react-feather'
 import { Text } from 'rebass'
@@ -24,11 +23,11 @@ import TradePrice from '../swap/TradePrice'
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import { SwapShowAcceptChanges, TruncatedText } from './styleds'
 
-const ArrowWrapper = styled.div<{ redesignFlag: boolean }>`
+const ArrowWrapper = styled.div`
   padding: 4px;
   border-radius: 12px;
-  height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
-  width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
+  height: 40px;
+  width: 40px;
   position: relative;
   margin-top: -18px;
   margin-bottom: -18px;
@@ -36,9 +35,9 @@ const ArrowWrapper = styled.div<{ redesignFlag: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   border: 4px solid;
-  border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
+  border-color: ${({ theme }) => theme.backgroundModule};
   z-index: 2;
 `
 
@@ -75,8 +74,6 @@ export default function SwapModalHeader({
   onAcceptChanges: () => void
 }) {
   const theme = useTheme()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const [showInverted, setShowInverted] = useState<boolean>(false)
   const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
@@ -127,8 +124,8 @@ export default function SwapModalHeader({
           </RowBetween>
         </AutoColumn>
       </LightCard>
-      <ArrowWrapper redesignFlag={redesignFlagEnabled}>
-        <ArrowDown size="16" color={redesignFlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
+      <ArrowWrapper>
+        <ArrowDown size="16" color={theme.textPrimary} />
       </ArrowWrapper>
       <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
         <AutoColumn gap={'8px'}>

src/components/swap/SwapRoute.tsx

@@ -12,7 +12,6 @@ import { LoadingRows } from 'components/Loader/styled'
 import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { AutoRow, RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import { memo, useState } from 'react'
 import { Plus } from 'react-feather'
@@ -23,12 +22,10 @@ import { Separator, ThemedText } from 'theme'
 
 import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
 
-const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; redesignFlag: boolean }>`
+const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
   padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
   border-radius: 16px;
-  border: 1px solid
-    ${({ theme, fixedOpen, redesignFlag }) =>
-      fixedOpen ? 'transparent' : redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2};
+  border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.backgroundOutline)};
   cursor: pointer;
 `
 
@@ -56,8 +53,6 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
   const routes = getTokenPath(trade)
   const [open, setOpen] = useState(false)
   const { chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const [darkMode] = useDarkModeManager()
 
@@ -68,7 +63,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     : undefined
 
   return (
-    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} redesignFlag={redesignFlagEnabled}>
+    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
       <TraceEvent
         events={[Event.onClick]}
         name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}

src/components/swap/styleds.tsx

@@ -8,45 +8,42 @@ import { Z_INDEX } from 'theme/zIndex'
 
 import { AutoColumn } from '../Column'
 
-export const PageWrapper = styled.div<{ redesignFlag: boolean; navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px 8px')};
+export const PageWrapper = styled.div`
+  padding: 68px 8px 0px;
   max-width: 480px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '48px' : '0px')};
+    padding-top: 48px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
-export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag: boolean }>`
+export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
   position: relative;
-  background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
+  background: ${({ theme }) => theme.backgroundSurface};
+  border-radius: 16px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   padding: 8px;
   z-index: ${Z_INDEX.deprecated_content};
-  box-shadow: ${({ redesignFlag }) =>
-    !redesignFlag &&
-    '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)'};
 `
 
-export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`
+export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   border-radius: 12px;
-  height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
-  width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
+  height: 40px;
+  width: 40px;
   position: relative;
-  margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
-  margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
+  margin-top: -18px;
+  margin-bottom: -18px;
   margin-left: auto;
   margin-right: auto;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border: 4px solid;
-  border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
+  border-color: ${({ theme }) => theme.backgroundSurface};
 
   z-index: 2;
   ${({ clickable }) =>

src/connection/index.ts

@@ -52,17 +52,25 @@ export const gnosisSafeConnection: Connection = {
   type: ConnectionType.GNOSIS_SAFE,
 }
 
-const [web3WalletConnect, web3WalletConnectHooks] = initializeConnector<WalletConnect>(
-  (actions) =>
-    new WalletConnect({
-      actions,
-      options: {
-        rpc: RPC_URLS,
-        qrcode: true,
-      },
-      onError,
-    })
-)
+const [web3WalletConnect, web3WalletConnectHooks] = initializeConnector<WalletConnect>((actions) => {
+  // Avoid testing for the best URL by only passing a single URL per chain.
+  // Otherwise, WC will not initialize until all URLs have been tested (see getBestUrl in web3-react).
+  const RPC_URLS_WITHOUT_FALLBACKS = Object.entries(RPC_URLS).reduce(
+    (map, [chainId, urls]) => ({
+      ...map,
+      [chainId]: urls[0],
+    }),
+    {}
+  )
+  return new WalletConnect({
+    actions,
+    options: {
+      rpc: RPC_URLS_WITHOUT_FALLBACKS,
+      qrcode: true,
+    },
+    onError,
+  })
+})
 export const walletConnectConnection: Connection = {
   connector: web3WalletConnect,
   hooks: web3WalletConnectHooks,

src/constants/lists.ts

@@ -1,6 +1,6 @@
 export const UNI_LIST = 'https://tokens.uniswap.org'
 export const UNI_EXTENDED_LIST = 'https://extendedtokens.uniswap.org/'
-const UNI_UNSUPPORTED_LISTS = 'https://unsupportedtokens.uniswap.org/'
+const UNI_UNSUPPORTED_LIST = 'https://unsupportedtokens.uniswap.org/'
 const AAVE_LIST = 'tokenlist.aave.eth'
 const BA_LIST = 'https://raw.githubusercontent.com/The-Blockchain-Association/sec-notice-list/master/ba-sec-list.json'
 const CMC_ALL_LIST = 'https://api.coinmarketcap.com/data-api/v3/uniswap/all.json'
@@ -16,12 +16,11 @@ export const OPTIMISM_LIST = 'https://static.optimism.io/optimism.tokenlist.json
 export const ARBITRUM_LIST = 'https://bridge.arbitrum.io/token-list-42161.json'
 export const CELO_LIST = 'https://celo-org.github.io/celo-token-list/celo.tokenlist.json'
 
-export const UNSUPPORTED_LIST_URLS: string[] = [BA_LIST, UNI_UNSUPPORTED_LISTS]
+export const UNSUPPORTED_LIST_URLS: string[] = [BA_LIST, UNI_UNSUPPORTED_LIST]
 
-// this is the default list of lists that are exposed to users
-// lower index == higher priority for token import
-const DEFAULT_LIST_OF_LISTS_TO_DISPLAY: string[] = [
-  UNI_LIST,
+// default lists to be 'active' aka searched across
+export const DEFAULT_ACTIVE_LIST_URLS: string[] = [UNI_LIST]
+export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   UNI_EXTENDED_LIST,
   COMPOUND_LIST,
   AAVE_LIST,
@@ -37,10 +36,11 @@ const DEFAULT_LIST_OF_LISTS_TO_DISPLAY: string[] = [
   CELO_LIST,
 ]
 
+// this is the default list of lists that are exposed to users
+// lower index == higher priority for token import
+const DEFAULT_LIST_OF_LISTS_TO_DISPLAY: string[] = [...DEFAULT_ACTIVE_LIST_URLS, ...DEFAULT_INACTIVE_LIST_URLS]
+
 export const DEFAULT_LIST_OF_LISTS: string[] = [
   ...DEFAULT_LIST_OF_LISTS_TO_DISPLAY,
   ...UNSUPPORTED_LIST_URLS, // need to load dynamic unsupported tokens as well
 ]
-
-// default lists to be 'active' aka searched across
-export const DEFAULT_ACTIVE_LIST_URLS: string[] = [UNI_LIST, GEMINI_LIST]

src/constants/tokenSafety.tsx

@@ -1,5 +1,7 @@
 import { Plural, Trans } from '@lingui/macro'
 
+import { ZERO_ADDRESS } from './misc'
+import { NATIVE_CHAIN_ID } from './tokens'
 import WarningCache, { TOKEN_LIST_TYPES } from './TokenSafetyLookupTable'
 
 export const TOKEN_SAFETY_ARTICLE = 'https://support.uniswap.org/hc/en-us/articles/8723118437133'
@@ -14,17 +16,36 @@ export function getWarningCopy(warning: Warning | null, plural = false) {
   let heading = null,
     description = null
   if (warning) {
-    if (warning.canProceed) {
-      heading = <Plural value={plural ? 2 : 1} _1="This token isn't verified." other="These tokens aren't verified." />
-      description = <Trans>Please do your own research before trading.</Trans>
-    } else {
-      description = (
-        <Plural
-          value={plural ? 2 : 1}
-          _1="You can't trade this token using the Uniswap App."
-          other="You can't trade these tokens using the Uniswap App."
-        />
-      )
+    switch (warning.level) {
+      case WARNING_LEVEL.MEDIUM:
+        heading = (
+          <Plural
+            value={plural ? 2 : 1}
+            _1="This token isn't traded on leading U.S. centralized exchanges."
+            other="These tokens aren't traded on leading U.S. centralized exchanges."
+          />
+        )
+        description = <Trans>Always conduct your own research before trading.</Trans>
+        break
+      case WARNING_LEVEL.UNKNOWN:
+        heading = (
+          <Plural
+            value={plural ? 2 : 1}
+            _1="This token isn't traded on leading U.S. centralized exchanges or frequently swapped on Uniswap."
+            other="These tokens aren't traded on leading U.S. centralized exchanges or frequently swapped on Uniswap."
+          />
+        )
+        description = <Trans>Always conduct your own research before trading.</Trans>
+        break
+      case WARNING_LEVEL.BLOCKED:
+        description = (
+          <Plural
+            value={plural ? 2 : 1}
+            _1="You can't trade this token using the Uniswap App."
+            other="You can't trade these tokens using the Uniswap App."
+          />
+        )
+        break
     }
   }
   return { heading, description }
@@ -57,6 +78,9 @@ const BlockedWarning: Warning = {
 }
 
 export function checkWarning(tokenAddress: string) {
+  if (tokenAddress === NATIVE_CHAIN_ID || tokenAddress === ZERO_ADDRESS) {
+    return null
+  }
   switch (WarningCache.checkToken(tokenAddress.toLowerCase())) {
     case TOKEN_LIST_TYPES.UNI_DEFAULT:
       return null

src/constants/tokens.ts

@@ -6,6 +6,11 @@ import { SupportedChainId } from './chains'
 
 export const NATIVE_CHAIN_ID = 'NATIVE'
 
+// When decimals are not specified for an ERC20 token
+// use default ERC20 token decimals as specified here:
+// https://docs.openzeppelin.com/contracts/3.x/erc20
+export const DEFAULT_ERC20_DECIMALS = 18
+
 export const USDC_MAINNET = new Token(
   SupportedChainId.MAINNET,
   '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',

src/featureFlags/flags/featureFlags.ts

@@ -3,4 +3,5 @@ export enum FeatureFlag {
   nft = 'nfts',
   traceJsonRpc = 'traceJsonRpc',
   multiNetworkBalances = 'multiNetworkBalances',
+  nftGraphQl = 'nftGraphQl',
 }

src/featureFlags/flags/navBar.ts

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

src/featureFlags/flags/nftGraphQl.ts

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

src/featureFlags/flags/redesign.ts

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

src/featureFlags/flags/tokenSafety.ts

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

src/featureFlags/flags/tokens.ts

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

src/graphql/data/RelayEnvironment.ts

@@ -1,43 +1,16 @@
 import ms from 'ms.macro'
-import { Variables } from 'react-relay'
-import { Environment, Network, RecordSource, RequestParameters, Store } from 'relay-runtime'
-import RelayQueryResponseCache from 'relay-runtime/lib/network/RelayQueryResponseCache'
+import { Environment, Network, RecordSource, Store } from 'relay-runtime'
 
 import fetchGraphQL from './fetchGraphQL'
 
-// max number of request in cache, least-recently updated entries purged first
-const size = 250
-// number in milliseconds, how long records stay valid in cache
-const ttl = ms`5m`
-export const cache = new RelayQueryResponseCache({ size, ttl })
+// This makes it possible (and more likely) to be able to reuse data when navigating back to a page,
+// tab or piece of content that has been visited before. These settings together configure the cache
+// to serve the last 250 records, so long as they are less than 5 minutes old:
+const gcReleaseBufferSize = 250
+const queryCacheExpirationTime = ms`5m`
 
-const fetchQuery = async function wrappedFetchQuery(params: RequestParameters, variables: Variables) {
-  const queryID = params.name
-  const cachedData = cache.get(queryID, variables)
-
-  if (cachedData !== null) return cachedData
-
-  return fetchGraphQL(params, variables).then((data) => {
-    if (params.operationKind !== 'mutation') {
-      cache.set(queryID, variables, data)
-    }
-    return data
-  })
-}
-
-// This property tells Relay to not immediately clear its cache when the user
-// navigates around the app. Relay will hold onto the specified number of
-// query results, allowing the user to return to recently visited pages
-// and reusing cached data if its available/fresh.
-const gcReleaseBufferSize = 10
-
-const queryCacheExpirationTime = ms`1m`
-
-const store = new Store(new RecordSource(), { gcReleaseBufferSize, queryCacheExpirationTime })
-const network = Network.create(fetchQuery)
-
-// Export a singleton instance of Relay Environment configured with our network function:
-export default new Environment({
-  network,
-  store,
+export const CachingEnvironment = new Environment({
+  network: Network.create(fetchGraphQL),
+  store: new Store(new RecordSource(), { gcReleaseBufferSize, queryCacheExpirationTime }),
 })
+export default CachingEnvironment

src/graphql/data/Token.ts

@@ -1,11 +1,12 @@
 import graphql from 'babel-plugin-relay/macro'
-import { useMemo, useState } from 'react'
-import { fetchQuery, useLazyLoadQuery } from 'react-relay'
+import { DEFAULT_ERC20_DECIMALS } from 'constants/tokens'
+import { useMemo } from 'react'
+import { useLazyLoadQuery } from 'react-relay'
+import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 
-import { Chain, TokenPriceQuery } from './__generated__/TokenPriceQuery.graphql'
-import { ContractInput, HistoryDuration, TokenQuery, TokenQuery$data } from './__generated__/TokenQuery.graphql'
-import environment from './RelayEnvironment'
-import { TimePeriod, toHistoryDuration } from './util'
+import { Chain } from './__generated__/TokenPriceQuery.graphql'
+import { TokenQuery, TokenQuery$data } from './__generated__/TokenQuery.graphql'
+import { CHAIN_NAME_TO_CHAIN_ID } from './util'
 
 /*
 The difference between Token and TokenProject:
@@ -16,9 +17,10 @@ The difference between Token and TokenProject:
     TokenProjectMarket is aggregated market data (aggregated over multiple dexes and centralized exchanges) that we get from coingecko.
 */
 const tokenQuery = graphql`
-  query TokenQuery($contract: ContractInput!, $duration: HistoryDuration!) {
+  query TokenQuery($contract: ContractInput!) {
     tokens(contracts: [$contract]) {
       id @required(action: LOG)
+      decimals
       name
       chain @required(action: LOG)
       address @required(action: LOG)
@@ -28,10 +30,6 @@ const tokenQuery = graphql`
           value
           currency
         }
-        priceHistory(duration: $duration) {
-          timestamp
-          value
-        }
         price {
           value
           currency
@@ -61,113 +59,24 @@ const tokenQuery = graphql`
   }
 `
 
-export type PricePoint = { value: number; timestamp: number }
-export function filterPrices(prices: NonNullable<NonNullable<SingleTokenData>['market']>['priceHistory'] | undefined) {
-  return prices?.filter((p): p is PricePoint => Boolean(p && p.value))
+export type TokenQueryData = NonNullable<TokenQuery$data['tokens']>[number]
+
+export function useTokenQuery(address: string, chain: Chain): TokenQueryData | undefined {
+  const contract = useMemo(() => ({ address: address.toLowerCase(), chain }), [address, chain])
+  const token = useLazyLoadQuery<TokenQuery>(tokenQuery, { contract }).tokens?.[0]
+  return token
 }
 
-export type PriceDurations = Record<TimePeriod, PricePoint[] | undefined>
-function fetchAllPriceDurations(contract: ContractInput, originalDuration: HistoryDuration) {
-  return fetchQuery<TokenPriceQuery>(environment, tokenPriceQuery, {
-    contract,
-    skip1H: originalDuration === 'HOUR',
-    skip1D: originalDuration === 'DAY',
-    skip1W: originalDuration === 'WEEK',
-    skip1M: originalDuration === 'MONTH',
-    skip1Y: originalDuration === 'YEAR',
-  })
-}
-
-export type SingleTokenData = NonNullable<TokenQuery$data['tokens']>[number]
-export function useTokenQuery(
-  address: string,
-  chain: Chain,
-  timePeriod: TimePeriod
-): [SingleTokenData | undefined, PriceDurations] {
-  const [prices, setPrices] = useState<PriceDurations>({
-    [TimePeriod.HOUR]: undefined,
-    [TimePeriod.DAY]: undefined,
-    [TimePeriod.WEEK]: undefined,
-    [TimePeriod.MONTH]: undefined,
-    [TimePeriod.YEAR]: undefined,
-  })
-
-  const contract = useMemo(() => {
-    return { address: address.toLowerCase(), chain }
-  }, [address, chain])
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const originalTimePeriod = useMemo(() => timePeriod, [contract])
-
-  const updatePrices = (response: TokenPriceQuery['response']) => {
-    const priceData = response.tokens?.[0]?.market
-    if (priceData) {
-      setPrices((current) => {
-        return {
-          [TimePeriod.HOUR]: filterPrices(priceData.priceHistory1H) ?? current[TimePeriod.HOUR],
-          [TimePeriod.DAY]: filterPrices(priceData.priceHistory1D) ?? current[TimePeriod.DAY],
-          [TimePeriod.WEEK]: filterPrices(priceData.priceHistory1W) ?? current[TimePeriod.WEEK],
-          [TimePeriod.MONTH]: filterPrices(priceData.priceHistory1M) ?? current[TimePeriod.MONTH],
-          [TimePeriod.YEAR]: filterPrices(priceData.priceHistory1Y) ?? current[TimePeriod.YEAR],
-        }
-      })
-    }
+// TODO: Return a QueryToken from useTokenQuery instead of TokenQueryData to make it more usable in Currency-centric interfaces.
+export class QueryToken extends WrappedTokenInfo {
+  constructor(data: NonNullable<TokenQueryData>) {
+    super({
+      chainId: CHAIN_NAME_TO_CHAIN_ID[data.chain],
+      address: data.address,
+      decimals: data.decimals ?? DEFAULT_ERC20_DECIMALS,
+      symbol: data.symbol ?? '',
+      name: data.name ?? '',
+      logoURI: data.project?.logoUrl ?? undefined,
+    })
   }
-
-  // Fetch prices & token info in tandem so we can render faster
-  useMemo(
-    () => fetchAllPriceDurations(contract, toHistoryDuration(originalTimePeriod)).subscribe({ next: updatePrices }),
-    [contract, originalTimePeriod]
-  )
-  const token = useLazyLoadQuery<TokenQuery>(tokenQuery, {
-    contract,
-    duration: toHistoryDuration(originalTimePeriod),
-  }).tokens?.[0]
-
-  useMemo(
-    () =>
-      setPrices((current) => {
-        current[originalTimePeriod] = filterPrices(token?.market?.priceHistory)
-        return current
-      }),
-    [token, originalTimePeriod]
-  )
-
-  return [token, prices]
 }
-
-const tokenPriceQuery = graphql`
-  query TokenPriceQuery(
-    $contract: ContractInput!
-    $skip1H: Boolean!
-    $skip1D: Boolean!
-    $skip1W: Boolean!
-    $skip1M: Boolean!
-    $skip1Y: Boolean!
-  ) {
-    tokens(contracts: [$contract]) {
-      market(currency: USD) {
-        priceHistory1H: priceHistory(duration: HOUR) @skip(if: $skip1H) {
-          timestamp
-          value
-        }
-        priceHistory1D: priceHistory(duration: DAY) @skip(if: $skip1D) {
-          timestamp
-          value
-        }
-        priceHistory1W: priceHistory(duration: WEEK) @skip(if: $skip1W) {
-          timestamp
-          value
-        }
-        priceHistory1M: priceHistory(duration: MONTH) @skip(if: $skip1M) {
-          timestamp
-          value
-        }
-        priceHistory1Y: priceHistory(duration: YEAR) @skip(if: $skip1Y) {
-          timestamp
-          value
-        }
-      }
-    }
-  }
-`

src/graphql/data/TokenPrice.ts

@@ -0,0 +1,84 @@
+import graphql from 'babel-plugin-relay/macro'
+import { useEffect, useMemo, useState } from 'react'
+import { fetchQuery } from 'react-relay'
+
+import { Chain, TokenPriceQuery } from './__generated__/TokenPriceQuery.graphql'
+import environment from './RelayEnvironment'
+import { TimePeriod } from './util'
+
+const tokenPriceQuery = graphql`
+  query TokenPriceQuery($contract: ContractInput!) {
+    tokens(contracts: [$contract]) {
+      market(currency: USD) {
+        priceHistory1H: priceHistory(duration: HOUR) {
+          timestamp
+          value
+        }
+        priceHistory1D: priceHistory(duration: DAY) {
+          timestamp
+          value
+        }
+        priceHistory1W: priceHistory(duration: WEEK) {
+          timestamp
+          value
+        }
+        priceHistory1M: priceHistory(duration: MONTH) {
+          timestamp
+          value
+        }
+        priceHistory1Y: priceHistory(duration: YEAR) {
+          timestamp
+          value
+        }
+      }
+    }
+  }
+`
+
+export type PricePoint = { timestamp: number; value: number }
+export type PriceDurations = Partial<Record<TimePeriod, PricePoint[]>>
+
+export function isPricePoint(p: { timestamp: number; value: number | null } | null): p is PricePoint {
+  return Boolean(p && p.value)
+}
+
+export function useTokenPriceQuery(address: string, chain: Chain): PriceDurations | undefined {
+  const contract = useMemo(() => ({ address: address.toLowerCase(), chain }), [address, chain])
+  const [prices, setPrices] = useState<PriceDurations>()
+
+  useEffect(() => {
+    const subscription = fetchQuery<TokenPriceQuery>(environment, tokenPriceQuery, { contract }).subscribe({
+      next: (response: TokenPriceQuery['response']) => {
+        const priceData = response.tokens?.[0]?.market
+        const prices = {
+          [TimePeriod.HOUR]: priceData?.priceHistory1H?.filter(isPricePoint),
+          [TimePeriod.DAY]: priceData?.priceHistory1D?.filter(isPricePoint),
+          [TimePeriod.WEEK]: priceData?.priceHistory1W?.filter(isPricePoint),
+          [TimePeriod.MONTH]: priceData?.priceHistory1M?.filter(isPricePoint),
+          [TimePeriod.YEAR]: priceData?.priceHistory1Y?.filter(isPricePoint),
+        }
+
+        // Ensure the latest price available is available for every TimePeriod.
+        const latests = Object.values(prices)
+          .map((prices) => prices?.slice(-1)?.[0] ?? null)
+          .filter(isPricePoint)
+        if (latests.length) {
+          const latest = latests.reduce((latest, pricePoint) =>
+            latest.timestamp > pricePoint.timestamp ? latest : pricePoint
+          )
+          Object.values(prices)
+            .filter((prices) => prices && prices.slice(-1)[0] !== latest)
+            .forEach((prices) => prices?.push(latest))
+        }
+
+        setPrices(prices)
+      },
+    })
+    return () => {
+      setPrices(undefined)
+      subscription.unsubscribe()
+    }
+  }, [contract])
+
+  return prices
+}

src/graphql/data/TopTokens.ts

@@ -1,9 +1,7 @@
 import graphql from 'babel-plugin-relay/macro'
 import {
-  favoritesAtom,
   filterStringAtom,
   filterTimeAtom,
-  showFavoritesAtom,
   sortAscendingAtom,
   sortMethodAtom,
   TokenSortMethod,
@@ -14,7 +12,7 @@ import { fetchQuery, useLazyLoadQuery, useRelayEnvironment } from 'react-relay'
 
 import type { Chain, TopTokens100Query } from './__generated__/TopTokens100Query.graphql'
 import { TopTokensSparklineQuery } from './__generated__/TopTokensSparklineQuery.graphql'
-import { filterPrices, PricePoint } from './Token'
+import { isPricePoint, PricePoint } from './TokenPrice'
 import { CHAIN_NAME_TO_CHAIN_ID, toHistoryDuration, unwrapToken } from './util'
 
 const topTokens100Query = graphql`
@@ -97,16 +95,11 @@ function useSortedTokens(tokens: NonNullable<TopTokens100Query['response']['topT
 
 function useFilteredTokens(tokens: NonNullable<TopTokens100Query['response']['topTokens']>) {
   const filterString = useAtomValue(filterStringAtom)
-  const favorites = useAtomValue(favoritesAtom)
-  const showFavorites = useAtomValue(showFavoritesAtom)
 
   const lowercaseFilterString = useMemo(() => filterString.toLowerCase(), [filterString])
 
   return useMemo(() => {
     let returnTokens = tokens
-    if (showFavorites) {
-      returnTokens = returnTokens?.filter((token) => token?.address && favorites.includes(token.address))
-    }
     if (lowercaseFilterString) {
       returnTokens = returnTokens?.filter((token) => {
         const addressIncludesFilterString = token?.address?.toLowerCase().includes(lowercaseFilterString)
@@ -116,7 +109,7 @@ function useFilteredTokens(tokens: NonNullable<TopTokens100Query['response']['to
       })
     }
     return returnTokens
-  }, [tokens, showFavorites, lowercaseFilterString, favorites])
+  }, [tokens, lowercaseFilterString])
 }
 
 // Number of items to render in each fetch in infinite scroll.
@@ -144,7 +137,8 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
         next(data) {
           const map: SparklineMap = {}
           data.topTokens?.forEach(
-            (current) => current?.address && (map[current.address] = filterPrices(current?.market?.priceHistory))
+            (current) =>
+              current?.address && (map[current.address] = current?.market?.priceHistory?.filter(isPricePoint))
           )
           setSparklines(map)
         },

src/graphql/data/fetchGraphQL.ts

@@ -1,22 +1,41 @@
 import { Variables } from 'react-relay'
 import { GraphQLResponse, RequestParameters } from 'relay-runtime'
 
-const URL = process.env.REACT_APP_AWS_API_ENDPOINT
+const TOKEN_URL = process.env.REACT_APP_AWS_API_ENDPOINT
+const NFT_URL = process.env.REACT_APP_NFT_AWS_API_ENDPOINT ?? ''
 
-if (!URL) {
+if (!TOKEN_URL) {
   throw new Error('AWS URL MISSING FROM ENVIRONMENT')
 }
 
-const headers = {
+const baseHeaders = {
   'Content-Type': 'application/json',
 }
+const nftHeaders = {
+  'Content-Type': 'application/json',
+  'x-api-key': process.env.REACT_APP_NFT_AWS_X_API_KEY ?? '',
+}
+
+// The issue below prevented using a custom var in metadata to gate which queries are for the nft endpoint vs base endpoint
+// This is a temporary solution before the two endpoints merge
+// https://github.com/relay-tools/relay-hooks/issues/215
+const NFT_QUERIES = ['AssetQuery', 'AssetPaginationQuery', 'CollectionQuery', 'DetailsQuery']
+
 const fetchQuery = (params: RequestParameters, variables: Variables): Promise<GraphQLResponse> => {
+  const isNFT = NFT_QUERIES.includes(params.name)
   const body = JSON.stringify({
     query: params.text, // GraphQL text from input
     variables,
   })
+  const url = isNFT ? NFT_URL : TOKEN_URL
+  const headers = isNFT ? nftHeaders : baseHeaders
 
-  return fetch(URL, { method: 'POST', body, headers }).then((res) => res.json())
+  return fetch(url, { method: 'POST', body, headers })
+    .then((res) => res.json())
+    .catch((e) => {
+      console.error(e)
+      return { data: [] }
+    })
 }
 
 export default fetchQuery

src/graphql/data/nft/Asset.ts

@@ -0,0 +1,213 @@
+import graphql from 'babel-plugin-relay/macro'
+import { parseEther } from 'ethers/lib/utils'
+import useInterval from 'lib/hooks/useInterval'
+import ms from 'ms.macro'
+import { GenieAsset, Rarity, SellOrder } from 'nft/types'
+import { useCallback, useMemo, useState } from 'react'
+import { fetchQuery, useLazyLoadQuery, usePaginationFragment, useRelayEnvironment } from 'react-relay'
+
+import { AssetPaginationQuery } from './__generated__/AssetPaginationQuery.graphql'
+import { AssetQuery, NftAssetsFilterInput, NftAssetSortableField } from './__generated__/AssetQuery.graphql'
+
+const assetPaginationQuery = graphql`
+  fragment AssetQuery_nftAssets on Query @refetchable(queryName: "AssetPaginationQuery") {
+    nftAssets(
+      address: $address
+      orderBy: $orderBy
+      asc: $asc
+      filter: $filter
+      first: $first
+      after: $after
+      last: $last
+      before: $before
+    ) @connection(key: "AssetQuery_nftAssets") {
+      edges {
+        node {
+          id
+          name
+          ownerAddress
+          image {
+            url
+          }
+          smallImage {
+            url
+          }
+          originalImage {
+            url
+          }
+          tokenId
+          description
+          animationUrl
+          suspiciousFlag
+          collection {
+            name
+            isVerified
+            image {
+              url
+            }
+            creator {
+              address
+              profileImage {
+                url
+              }
+              isVerified
+            }
+            nftContracts {
+              address
+              standard
+            }
+          }
+          listings(first: 1) {
+            edges {
+              node {
+                address
+                createdAt
+                endAt
+                id
+                maker
+                marketplace
+                marketplaceUrl
+                orderHash
+                price {
+                  currency
+                  value
+                }
+                quantity
+                startAt
+                status
+                taker
+                tokenId
+                type
+                protocolParameters
+              }
+              cursor
+            }
+          }
+          rarities {
+            provider
+            rank
+            score
+          }
+          metadataUrl
+        }
+      }
+    }
+  }
+`
+
+const assetQuery = graphql`
+  query AssetQuery(
+    $address: String!
+    $orderBy: NftAssetSortableField
+    $asc: Boolean
+    $filter: NftAssetsFilterInput
+    $first: Int
+    $after: String
+    $last: Int
+    $before: String
+  ) {
+    ...AssetQuery_nftAssets
+  }
+`
+
+export function useAssetsQuery(
+  address: string,
+  orderBy: NftAssetSortableField,
+  asc: boolean,
+  filter: NftAssetsFilterInput,
+  first?: number,
+  after?: string,
+  last?: number,
+  before?: string
+) {
+  const vars = useMemo(
+    () => ({ address, orderBy, asc, filter, first, after, last, before }),
+    [address, after, asc, before, filter, first, last, orderBy]
+  )
+  const [queryOptions, setQueryOptions] = useState({ fetchKey: 0 })
+  const queryData = useLazyLoadQuery<AssetQuery>(assetQuery, vars, queryOptions)
+
+  const { data, hasNext, loadNext, isLoadingNext } = usePaginationFragment<AssetPaginationQuery, any>(
+    assetPaginationQuery,
+    queryData
+  )
+
+  // Poll for updates.
+  const POLLING_INTERVAL = ms`5s`
+  const environment = useRelayEnvironment()
+  const refresh = useCallback(async () => {
+    const length = data.nftAssets?.edges?.length
+    // Initiate a network request. When it resolves, refresh the UI from store (to avoid re-triggering Suspense);
+    // see: https://relay.dev/docs/guided-tour/refetching/refreshing-queries/#if-you-need-to-avoid-suspense-1.
+    await fetchQuery<AssetQuery>(environment, assetQuery, { ...vars, first: length }).toPromise()
+    setQueryOptions(({ fetchKey }) => ({
+      fetchKey: fetchKey + 1,
+      fetchPolicy: 'store-only',
+    }))
+  }, [data.nftAssets?.edges?.length, environment, vars])
+  // NB: This will poll every POLLING_INTERVAL, *not* every POLLING_INTERVAL from the last successful poll.
+  // TODO(WEB-2004): Update useInterval to wait for the fn to complete before rescheduling.
+  useInterval(refresh, POLLING_INTERVAL)
+
+  // It is especially important for this to be memoized to avoid re-rendering from polling if data is unchanged.
+  const assets: GenieAsset[] = useMemo(
+    () =>
+      data.nftAssets?.edges?.map((queryAsset: { node: any }) => {
+        const asset = queryAsset.node
+        const ethPrice = parseEther(
+          asset.listings?.edges[0]?.node.price.value?.toLocaleString('fullwide', { useGrouping: false }) ?? '0'
+        ).toString()
+        return {
+          id: asset.id,
+          address: asset.collection.nftContracts[0]?.address,
+          notForSale: asset.listings?.edges.length === 0,
+          collectionName: asset.collection?.name,
+          collectionSymbol: asset.collection?.image?.url,
+          imageUrl: asset.image?.url,
+          animationUrl: asset.animationUrl,
+          marketplace: asset.listings?.edges[0]?.node.marketplace.toLowerCase(),
+          name: asset.name,
+          priceInfo: asset.listings
+            ? {
+                ETHPrice: ethPrice,
+                baseAsset: 'ETH',
+                baseDecimals: '18',
+                basePrice: ethPrice,
+              }
+            : undefined,
+          susFlag: asset.suspiciousFlag,
+          sellorders: asset.listings?.edges.map((listingNode: { node: SellOrder }) => {
+            return {
+              ...listingNode.node,
+              protocolParameters: listingNode.node.protocolParameters
+                ? JSON.parse(listingNode.node.protocolParameters.toString())
+                : undefined,
+            }
+          }),
+          smallImageUrl: asset.smallImage?.url,
+          tokenId: asset.tokenId,
+          tokenType: asset.collection.nftContracts[0]?.standard,
+          // totalCount?: number, // TODO waiting for BE changes
+          collectionIsVerified: asset.collection?.isVerified,
+          rarity: {
+            primaryProvider: 'Rarity Sniper', // TODO update when backend adds more providers
+            providers: asset.rarities.map((rarity: Rarity) => {
+              return {
+                ...rarity,
+                provider: 'Rarity Sniper',
+              }
+            }),
+          },
+          owner: asset.ownerAddress,
+          creator: {
+            profile_img_url: asset.collection?.creator?.profileImage?.url,
+            address: asset.collection?.creator?.address,
+          },
+          metadataUrl: asset.metadataUrl,
+        }
+      }),
+    [data.nftAssets?.edges]
+  )
+
+  return { assets, hasNext, isLoadingNext, loadNext }
+}