chore: merge marketplace and traits (#4645)

* porting of filters

Co-authored-by: Jack Short <john.short.tj@gmail.com>

.env

@@ -1,3 +1,8 @@
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
-REACT_APP_FORTMATIC_KEY="pk_live_357F77728B8EB880"
 REACT_APP_AMPLITUDE_TEST_KEY="add-the-real-test-key-if-you-need-to-test-amplitude-events"
+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"

.eslintrc.json

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

.gitignore

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

.npmrc

@@ -0,0 +1 @@
+engine-strict = true

codegen.yml

@@ -1,7 +1,6 @@
 overrideExisting: true
 schema: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
-documents: 'src/**/!(*.d).{ts,tsx}'
 generates:
-  ./src/graphql/schema/schema.graphql:
+  ./src/graphql/thegraph/schema/schema.graphql:
     plugins:
       - schema-ast

cypress/e2e/wallet-dropdown.test.ts

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

cypress/e2e/wallet.test.ts

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

cypress/support/e2e.ts

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

cypress/support/ethereum.ts

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

cypress/utils/index.ts

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

fetch-schema.js

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

package.json

@@ -8,8 +8,10 @@
     "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
     "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
-    "relay": "relay-compiler",
-    "graphql:generate": "graphql-codegen --config codegen.yml && yarn relay",
+    "relay": "relay-compiler relay.config.js",
+    "relay-thegraph": "relay-compiler relay_thegraph.config.js",
+    "graphql:fetch": "node fetch-schema.js",
+    "graphql:generate": "yarn relay && yarn relay-thegraph",
     "prei18n:extract": "node prei18n-extract.js",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
@@ -21,12 +23,8 @@
     "lint": "yarn eslint .",
     "test": "craco test --coverage",
     "cypress:open": "cypress open --browser chrome --e2e",
-    "cypress:run": "cypress run --browser chrome --e2e"
-  },
-  "relay": {
-    "src": "./src",
-    "language": "typescript",
-    "schema": "./src/graphql/schema/schema.graphql"
+    "cypress:run": "cypress run --browser chrome --e2e",
+    "postinstall": "patch-package"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -63,9 +61,6 @@
   "devDependencies": {
     "@craco/craco": "6.4.3",
     "@ethersproject/experimental": "^5.4.0",
-    "@graphql-codegen/cli": "1.21.5",
-    "@graphql-codegen/schema-ast": "^2.5.1",
-    "@graphql-codegen/typescript-rtk-query": "^1.1.1",
     "@lingui/cli": "^3.9.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1",
@@ -95,9 +90,9 @@
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4",
     "@typescript-eslint/parser": "^4",
-    "babel-plugin-relay": "^14.1.0",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
+    "babel-plugin-relay": "^14.1.0",
     "cypress": "^10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
@@ -110,6 +105,8 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3",
     "relay-compiler": "^14.1.0",
@@ -140,7 +137,7 @@
     "@uniswap/redux-multicall": "^1.1.5",
     "@uniswap/router-sdk": "^1.3.0",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.9.2",
+    "@uniswap/smart-order-router": "^2.10.0",
     "@uniswap/token-lists": "^1.0.0-beta.30",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
@@ -148,7 +145,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.1.1",
+    "@uniswap/widgets": "^2.8.1",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -173,15 +170,15 @@
     "ajv": "^6.12.3",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
+    "aws4fetch": "^1.0.13",
     "cids": "^1.0.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
-    "d3-curve-circlecorners": "^0.1.6",
     "ethers": "^5.1.4",
     "firebase": "^9.1.3",
     "focus-visible": "^5.2.0",
-    "fortmatic": "^2.4.0",
+    "get-graphql-schema": "^2.1.2",
     "graphql": "^16.5.0",
     "graphql-request": "^3.4.0",
     "immer": "^9.0.6",
@@ -202,6 +199,7 @@
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-ga4": "^1.4.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
@@ -217,7 +215,6 @@
     "rebass": "^4.0.7",
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
-    "relay-hooks": "^7.1.0",
     "setimmediate": "^1.0.5",
     "styled-components": "^5.3.5",
     "tiny-invariant": "^1.2.0",
@@ -233,5 +230,10 @@
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0",
     "zustand": "^4.0.0-rc.1"
+  },
+  "engines": {
+    "npm": "please-use-yarn",
+    "node": "14",
+    "yarn": ">=1.22"
   }
 }

patches/@vanilla-extract+css+1.7.2.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js b/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js
+index 6e40061..10283a2 100644
+--- a/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js
++++ b/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js
+@@ -177,11 +177,13 @@ function generateIdentifier(debugId) {
+   var fileScopeHash = hash__default["default"](packageName ? "".concat(packageName).concat(filePath) : filePath);
+   var identifier = "".concat(fileScopeHash).concat(refCount);
+ 
+-  if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
+-    var devPrefix = getDevPrefix(debugId);
++  if (process.env.VANILLA_EXTRACT_DEV_PREFIX) {
++    if (adapter_dist_vanillaExtractCssAdapter.getIdentOption() === 'debug') {
++      var devPrefix = getDevPrefix(debugId);
+ 
+-    if (devPrefix) {
+-      identifier = "".concat(devPrefix, "__").concat(identifier);
++      if (devPrefix) {
++        identifier = "".concat(devPrefix, "__").concat(identifier);
++      }
+     }
+   }
+ 

prei18n-extract.js

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

public/index.html

@@ -16,7 +16,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#ff007a" />
-    <meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" />
 
     <!--
       manifest.json provides metadata used when the app is installed as a PWA.

relay.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  src: './src',
+  language: 'typescript',
+  schema: './src/graphql/data/schema.graphql',
+  exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**', '**/thegraph/**'],
+}

relay_thegraph.config.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultConfig = require('./relay.config')
+
+module.exports = {
+  src: defaultConfig.src,
+  language: defaultConfig.language,
+  schema: './src/graphql/thegraph/schema.graphql',
+  exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**', '**/data/**'],
+}

src/analytics/constants.ts

@@ -15,7 +15,8 @@ export enum EventName {
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
   SWAP_PRICE_UPDATE_ACKNOWLEDGED = 'Swap Price Update Acknowledged',
   SWAP_QUOTE_RECEIVED = 'Swap Quote Received',
-  SWAP_SUBMITTED = 'Swap Submitted',
+  SWAP_SIGNED = 'Swap Signed',
+  SWAP_SUBMITTED_BUTTON_CLICKED = 'Swap Submit Button Clicked',
   SWAP_TOKENS_REVERSED = 'Swap Tokens Reversed',
   SWAP_TRANSACTION_COMPLETED = 'Swap Transaction Completed',
   TOKEN_IMPORTED = 'Token Imported',
@@ -37,16 +38,9 @@ export enum CUSTOM_USER_PROPERTIES {
   SCREEN_RESOLUTION_HEIGHT = 'screen_resolution_height',
   SCREEN_RESOLUTION_WIDTH = 'screen_resolution_width',
   WALLET_ADDRESS = 'wallet_address',
-  WALLET_NATIVE_CURRENCY_BALANCE_USD = 'wallet_native_currency_balance_usd',
-  WALLET_TOKENS_ADDRESSES = 'wallet_tokens_addresses',
-  WALLET_TOKENS_SYMBOLS = 'wallet_tokens_symbols',
   WALLET_TYPE = 'wallet_type',
 }
 
-export enum CUSTOM_USER_PROPERTY_SUFFIXES {
-  WALLET_TOKEN_AMOUNT_SUFFIX = '_token_amount',
-}
-
 export enum BROWSER {
   FIREFOX = 'Mozilla Firefox',
   SAMSUNG = 'Samsung Internet',

src/analytics/index.ts

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

src/assets/svg/socks.svg

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

src/assets/svg/x.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#99A1BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

src/components/AccountDetails/index.tsx

@@ -24,7 +24,7 @@ const HeaderRow = styled.div`
   padding: 1rem 1rem;
   font-weight: 500;
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding: 1rem;
   `};
 `
@@ -74,7 +74,7 @@ const AccountGroupingRow = styled.div`
 
 const AccountSection = styled.div`
   padding: 0rem 1rem;
-  ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1.5rem 1rem;`};
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`padding: 0rem 1rem 1.5rem 1rem;`};
 `
 
 const YourAccount = styled.div`
@@ -145,7 +145,7 @@ const CloseIcon = styled.div`
   top: 14px;
   &:hover {
     cursor: pointer;
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
 `
 

src/components/AccountDetailsV2/LogoView.tsx

@@ -0,0 +1,88 @@
+import { useWeb3React } from '@web3-react/core'
+import { UNI_ADDRESS } from 'constants/addresses'
+import { TransactionInfo, TransactionType } from 'state/transactions/types'
+import styled, { css } from 'styled-components/macro'
+
+import { nativeOnChain } from '../../constants/tokens'
+import { useCurrency } from '../../hooks/Tokens'
+import CurrencyLogo from '../CurrencyLogo'
+
+const CurrencyWrap = styled.div`
+  position: relative;
+  width: 36px;
+  height: 36px;
+`
+
+const CurrencyWrapStyles = css`
+  position: absolute;
+  height: 24px;
+`
+
+const CurrencyLogoWrap = styled.span<{ isCentered: boolean }>`
+  ${CurrencyWrapStyles};
+  left: ${({ isCentered }) => (isCentered ? '50%' : '0')};
+  top: ${({ isCentered }) => (isCentered ? '50%' : '0')};
+  transform: ${({ isCentered }) => isCentered && 'translate(-50%, -50%)'};
+`
+const CurrencyLogoWrapTwo = styled.span`
+  ${CurrencyWrapStyles};
+  bottom: 0px;
+  right: 0px;
+`
+
+interface CurrencyPair {
+  currencyId0: string | undefined
+  currencyId1: string | undefined
+}
+
+const getCurrency = ({ info, chainId }: { info: TransactionInfo; chainId: number | undefined }): CurrencyPair => {
+  switch (info.type) {
+    case TransactionType.ADD_LIQUIDITY_V3_POOL:
+    case TransactionType.REMOVE_LIQUIDITY_V3:
+    case TransactionType.CREATE_V3_POOL:
+      const { baseCurrencyId, quoteCurrencyId } = info
+      return { currencyId0: baseCurrencyId, currencyId1: quoteCurrencyId }
+    case TransactionType.SWAP:
+      const { inputCurrencyId, outputCurrencyId } = info
+      return { currencyId0: inputCurrencyId, currencyId1: outputCurrencyId }
+    case TransactionType.WRAP:
+      const { unwrapped } = info
+      const native = info.chainId ? nativeOnChain(info.chainId) : undefined
+      const base = 'ETH'
+      const wrappedCurrency = native?.wrapped.address ?? 'WETH'
+      return { currencyId0: unwrapped ? wrappedCurrency : base, currencyId1: unwrapped ? base : wrappedCurrency }
+    case TransactionType.COLLECT_FEES:
+      const { currencyId0, currencyId1 } = info
+      return { currencyId0, currencyId1 }
+    case TransactionType.APPROVAL:
+      return { currencyId0: info.tokenAddress, currencyId1: undefined }
+    case TransactionType.CLAIM:
+      const uniAddress = chainId ? UNI_ADDRESS[chainId] : undefined
+      return { currencyId0: uniAddress, currencyId1: undefined }
+    default:
+      return { currencyId0: undefined, currencyId1: undefined }
+  }
+}
+
+const LogoView = ({ info }: { info: TransactionInfo }) => {
+  const { chainId } = useWeb3React()
+  const { currencyId0, currencyId1 } = getCurrency({ info, chainId })
+  const currency0 = useCurrency(currencyId0)
+  const currency1 = useCurrency(currencyId1)
+  const isCentered = !(currency0 && currency1)
+
+  return (
+    <CurrencyWrap>
+      <CurrencyLogoWrap isCentered={isCentered}>
+        <CurrencyLogo size="24px" currency={currency0} />
+      </CurrencyLogoWrap>
+      {!isCentered && (
+        <CurrencyLogoWrapTwo>
+          <CurrencyLogo size="24px" currency={currency1} />
+        </CurrencyLogoWrapTwo>
+      )}
+    </CurrencyWrap>
+  )
+}
+
+export default LogoView

src/components/AccountDetailsV2/TransactionBody.tsx

@@ -0,0 +1,337 @@
+import { Trans } from '@lingui/macro'
+import { Fraction, TradeType } from '@uniswap/sdk-core'
+import JSBI from 'jsbi'
+import {
+  AddLiquidityV3PoolTransactionInfo,
+  ApproveTransactionInfo,
+  ClaimTransactionInfo,
+  CollectFeesTransactionInfo,
+  ExactInputSwapTransactionInfo,
+  ExactOutputSwapTransactionInfo,
+  RemoveLiquidityV3TransactionInfo,
+  TransactionInfo,
+  TransactionType,
+  WrapTransactionInfo,
+} from 'state/transactions/types'
+import styled from 'styled-components/macro'
+
+import { nativeOnChain } from '../../constants/tokens'
+import { useCurrency, useToken } from '../../hooks/Tokens'
+import useENSName from '../../hooks/useENSName'
+import { shortenAddress } from '../../utils'
+import { TransactionState } from './index'
+
+const HighlightText = styled.span`
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 600;
+`
+
+const BodyWrap = styled.div`
+  line-height: 20px;
+`
+
+interface ActionProps {
+  pending: JSX.Element
+  success: JSX.Element
+  failed: JSX.Element
+  transactionState: TransactionState
+}
+
+const Action = ({ pending, success, failed, transactionState }: ActionProps) => {
+  switch (transactionState) {
+    case TransactionState.Failed:
+      return failed
+    case TransactionState.Success:
+      return success
+    default:
+      return pending
+  }
+}
+
+const formatAmount = (amountRaw: string, decimals: number, sigFigs: number): string =>
+  new Fraction(amountRaw, JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))).toSignificant(sigFigs)
+
+const FailedText = ({ transactionState }: { transactionState: TransactionState }) =>
+  transactionState === TransactionState.Failed ? <Trans>failed</Trans> : <span />
+
+const FormattedCurrencyAmount = ({
+  rawAmount,
+  currencyId,
+  sigFigs = 2,
+}: {
+  rawAmount: string
+  currencyId: string
+  sigFigs: number
+}) => {
+  const currency = useCurrency(currencyId)
+
+  return currency ? (
+    <HighlightText>
+      {formatAmount(rawAmount, currency.decimals, sigFigs)} {currency.symbol}
+    </HighlightText>
+  ) : null
+}
+
+const getRawAmounts = (
+  info: ExactInputSwapTransactionInfo | ExactOutputSwapTransactionInfo
+): { rawAmountFrom: string; rawAmountTo: string } => {
+  return info.tradeType === TradeType.EXACT_INPUT
+    ? { rawAmountFrom: info.inputCurrencyAmountRaw, rawAmountTo: info.expectedOutputCurrencyAmountRaw }
+    : { rawAmountFrom: info.expectedInputCurrencyAmountRaw, rawAmountTo: info.outputCurrencyAmountRaw }
+}
+
+const SwapSummary = ({
+  info,
+  transactionState,
+}: {
+  info: ExactInputSwapTransactionInfo | ExactOutputSwapTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Swapping</Trans>,
+    success: <Trans>Swapped</Trans>,
+    failed: <Trans>Swap</Trans>,
+  }
+  const { rawAmountFrom, rawAmountTo } = getRawAmounts(info)
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} />{' '}
+      <FormattedCurrencyAmount rawAmount={rawAmountFrom} currencyId={info.inputCurrencyId} sigFigs={2} />{' '}
+      <Trans>for </Trans>{' '}
+      <FormattedCurrencyAmount rawAmount={rawAmountTo} currencyId={info.outputCurrencyId} sigFigs={2} />{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const AddLiquidityV3PoolSummary = ({
+  info,
+  transactionState,
+}: {
+  info: AddLiquidityV3PoolTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const { createPool, quoteCurrencyId, baseCurrencyId } = info
+
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Adding</Trans>,
+    success: <Trans>Added</Trans>,
+    failed: <Trans>Add</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      {createPool ? (
+        <CreateV3PoolSummary info={info} transactionState={transactionState} />
+      ) : (
+        <>
+          <Action {...actionProps} />{' '}
+          <FormattedCurrencyAmount rawAmount={info.expectedAmountBaseRaw} currencyId={baseCurrencyId} sigFigs={2} />{' '}
+          <Trans>and</Trans>{' '}
+          <FormattedCurrencyAmount rawAmount={info.expectedAmountQuoteRaw} currencyId={quoteCurrencyId} sigFigs={2} />
+        </>
+      )}{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const RemoveLiquidityV3Summary = ({
+  info: { baseCurrencyId, quoteCurrencyId, expectedAmountBaseRaw, expectedAmountQuoteRaw },
+  transactionState,
+}: {
+  info: RemoveLiquidityV3TransactionInfo
+  transactionState: TransactionState
+}) => {
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Removing</Trans>,
+    success: <Trans>Removed</Trans>,
+    failed: <Trans>Remove</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} />{' '}
+      <FormattedCurrencyAmount rawAmount={expectedAmountBaseRaw} currencyId={baseCurrencyId} sigFigs={2} />{' '}
+      <Trans>and</Trans>{' '}
+      <FormattedCurrencyAmount rawAmount={expectedAmountQuoteRaw} currencyId={quoteCurrencyId} sigFigs={2} />{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const CreateV3PoolSummary = ({
+  info: { baseCurrencyId, quoteCurrencyId },
+  transactionState,
+}: {
+  info: AddLiquidityV3PoolTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const baseCurrency = useCurrency(baseCurrencyId)
+  const quoteCurrency = useCurrency(quoteCurrencyId)
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Creating</Trans>,
+    success: <Trans>Created</Trans>,
+    failed: <Trans>Create</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} />{' '}
+      <HighlightText>
+        {baseCurrency?.symbol}/{quoteCurrency?.symbol}{' '}
+      </HighlightText>
+      <Trans>Pool</Trans> <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const CollectFeesSummary = ({
+  info,
+  transactionState,
+}: {
+  info: CollectFeesTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const { currencyId0, expectedCurrencyOwed0 = '0', expectedCurrencyOwed1 = '0', currencyId1 } = info
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Collecting</Trans>,
+    success: <Trans>Collected</Trans>,
+    failed: <Trans>Collect</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} />{' '}
+      <FormattedCurrencyAmount rawAmount={expectedCurrencyOwed0} currencyId={currencyId0} sigFigs={2} />{' '}
+      <Trans>and</Trans>{' '}
+      <FormattedCurrencyAmount rawAmount={expectedCurrencyOwed1} currencyId={currencyId1} sigFigs={2} />{' '}
+      <Trans>fees</Trans> <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const ApprovalSummary = ({
+  info,
+  transactionState,
+}: {
+  info: ApproveTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const token = useToken(info.tokenAddress)
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Approving</Trans>,
+    success: <Trans>Approved</Trans>,
+    failed: <Trans>Approve</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} /> <HighlightText>{token?.symbol}</HighlightText>{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const ClaimSummary = ({
+  info: { recipient, uniAmountRaw },
+  transactionState,
+}: {
+  info: ClaimTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const { ENSName } = useENSName()
+  const actionProps = {
+    transactionState,
+    pending: <Trans>Claiming</Trans>,
+    success: <Trans>Claimed</Trans>,
+    failed: <Trans>Claim</Trans>,
+  }
+
+  return (
+    <BodyWrap>
+      {uniAmountRaw && (
+        <>
+          <Action {...actionProps} />{' '}
+          <HighlightText>
+            {formatAmount(uniAmountRaw, 18, 4)}
+            UNI{' '}
+          </HighlightText>{' '}
+          <Trans>for</Trans> <HighlightText>{ENSName ?? shortenAddress(recipient)}</HighlightText>
+        </>
+      )}{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const WrapSummary = ({
+  info: { chainId, currencyAmountRaw, unwrapped },
+  transactionState,
+}: {
+  info: WrapTransactionInfo
+  transactionState: TransactionState
+}) => {
+  const native = chainId ? nativeOnChain(chainId) : undefined
+  const from = unwrapped ? native?.wrapped.symbol ?? 'WETH' : native?.symbol ?? 'ETH'
+  const to = unwrapped ? native?.symbol ?? 'ETH' : native?.wrapped.symbol ?? 'WETH'
+
+  const amount = formatAmount(currencyAmountRaw, 18, 6)
+  const actionProps = unwrapped
+    ? {
+        transactionState,
+        pending: <Trans>Unwrapping</Trans>,
+        success: <Trans>Unwrapped</Trans>,
+        failed: <Trans>Unwrap</Trans>,
+      }
+    : {
+        transactionState,
+        pending: <Trans>Wrapping</Trans>,
+        success: <Trans>Wrapped</Trans>,
+        failed: <Trans>Wrap</Trans>,
+      }
+
+  return (
+    <BodyWrap>
+      <Action {...actionProps} />{' '}
+      <HighlightText>
+        {amount} {from}
+      </HighlightText>{' '}
+      <Trans>to</Trans>{' '}
+      <HighlightText>
+        {amount} {to}
+      </HighlightText>{' '}
+      <FailedText transactionState={transactionState} />
+    </BodyWrap>
+  )
+}
+
+const TransactionBody = ({ info, transactionState }: { info: TransactionInfo; transactionState: TransactionState }) => {
+  switch (info.type) {
+    case TransactionType.SWAP:
+      return <SwapSummary info={info} transactionState={transactionState} />
+    case TransactionType.ADD_LIQUIDITY_V3_POOL:
+      return <AddLiquidityV3PoolSummary info={info} transactionState={transactionState} />
+    case TransactionType.REMOVE_LIQUIDITY_V3:
+      return <RemoveLiquidityV3Summary info={info} transactionState={transactionState} />
+    case TransactionType.WRAP:
+      return <WrapSummary info={info} transactionState={transactionState} />
+    case TransactionType.COLLECT_FEES:
+      return <CollectFeesSummary info={info} transactionState={transactionState} />
+    case TransactionType.APPROVAL:
+      return <ApprovalSummary info={info} transactionState={transactionState} />
+    case TransactionType.CLAIM:
+      return <ClaimSummary info={info} transactionState={transactionState} />
+    default:
+      return <span />
+  }
+}
+
+export default TransactionBody

src/components/AccountDetailsV2/index.tsx

@@ -0,0 +1,90 @@
+import { useWeb3React } from '@web3-react/core'
+import { getChainInfoOrDefault } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { useMemo } from 'react'
+import { AlertTriangle, CheckCircle } from 'react-feather'
+import styled from 'styled-components/macro'
+import { colors } from 'theme/colors'
+
+import { TransactionDetails } from '../../state/transactions/types'
+import Loader from '../Loader'
+import LogoView from './LogoView'
+import TransactionBody from './TransactionBody'
+
+export enum TransactionState {
+  Pending,
+  Success,
+  Failed,
+}
+
+const Grid = styled.a`
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 44px auto 24px;
+  width: 100%;
+  text-decoration: none;
+  border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  padding: 12px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.backgroundModule};
+    transition: 250ms background-color ease;
+  }
+`
+
+const TextContainer = styled.span`
+  font-size: 14px;
+  margin-top: auto;
+  margin-bottom: auto;
+  color: ${({ theme }) => theme.textTertiary};
+`
+
+const IconStyleWrap = styled.span`
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: auto;
+  height: 16px;
+`
+
+export const TransactionSummary = ({ transactionDetails }: { transactionDetails: TransactionDetails }) => {
+  const { chainId = 1 } = useWeb3React()
+  const tx = transactionDetails
+  const { explorer } = getChainInfoOrDefault(chainId ? chainId : SupportedChainId.MAINNET)
+  const { info, receipt, hash } = tx
+
+  const transactionState = useMemo(() => {
+    const pending = !receipt
+    const success = !pending && tx && (receipt?.status === 1 || typeof receipt?.status === 'undefined')
+    const transactionState = pending
+      ? TransactionState.Pending
+      : success
+      ? TransactionState.Success
+      : TransactionState.Failed
+
+    return transactionState
+  }, [receipt, tx])
+
+  const link = `${explorer}tx/${hash}`
+
+  return chainId ? (
+    <Grid href={link} target="_blank">
+      <LogoView info={info} />
+      <TextContainer as="span">
+        <TransactionBody info={info} transactionState={transactionState} />
+      </TextContainer>
+      {transactionState === TransactionState.Pending ? (
+        <IconStyleWrap>
+          <Loader />
+        </IconStyleWrap>
+      ) : transactionState === TransactionState.Success ? (
+        <IconStyleWrap>
+          <CheckCircle color={colors.green200} size="16px" />
+        </IconStyleWrap>
+      ) : (
+        <IconStyleWrap>
+          <AlertTriangle color={colors.gold200} size="16px" />
+        </IconStyleWrap>
+      )}
+    </Grid>
+  ) : null
+}

src/components/Button/index.tsx

@@ -176,23 +176,28 @@ export const ButtonOutlined = styled(BaseButton)`
   }
 `
 
-export const ButtonYellow = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_yellow3};
-  color: white;
+export const ButtonYellow = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3)};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarning : 'white')};
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
+    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)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
+    background: ${({ theme, redesignFlag }) => redesignFlag && theme.stateOverlayHover};
+    mix-blend-mode: ${({ redesignFlag }) => redesignFlag && 'normal'};
+    background-color: ${({ theme, redesignFlag }) => !redesignFlag && darken(0.05, theme.deprecated_yellow3)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
+    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)};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.deprecated_yellow3};
-    opacity: 50%;
+    background-color: ${({ theme, redesignFlag }) =>
+      redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3};
+    opacity: ${({ redesignFlag }) => (redesignFlag ? '60%' : '50%')};
     cursor: auto;
   }
 `

src/components/Charts/LineChart.tsx

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

src/components/Charts/SparklineChart.tsx

@@ -1,48 +1,45 @@
-import { scaleLinear } from 'd3'
+import { curveCardinal, scaleLinear } from 'd3'
+import { SingleTokenData, TimePeriod, useTokenPricesFromFragment } from 'graphql/data/Token'
 import React from 'react'
 import { useTheme } from 'styled-components/macro'
 
-import data from './data.json'
+import { DATA_EMPTY, getPriceBounds } from '../Tokens/TokenDetails/PriceChart'
 import LineChart from './LineChart'
 
 type PricePoint = { value: number; timestamp: number }
 
-function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
-  const prices = pricePoints.map((x) => x.value)
-  const min = Math.min(...prices)
-  const max = Math.max(...prices)
-  return [min, max]
-}
-
 interface SparklineChartProps {
   width: number
   height: number
+  tokenData: SingleTokenData
+  pricePercentChange: number | undefined | null
+  timePeriod: TimePeriod
 }
 
-function SparklineChart({ width, height }: SparklineChartProps) {
+function SparklineChart({ width, height, tokenData, pricePercentChange, timePeriod }: SparklineChartProps) {
   const theme = useTheme()
+  // for sparkline
+  const pricePoints = useTokenPricesFromFragment(tokenData?.prices?.[0]) ?? []
+  const hasData = pricePoints.length !== 0
+  const startingPrice = hasData ? pricePoints[0] : DATA_EMPTY
+  const endingPrice = hasData ? pricePoints[pricePoints.length - 1] : DATA_EMPTY
+  const widthScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, 124])
+  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([42, 0])
 
-  /* TODO: Implement API calls & cache to use here */
-  const pricePoints = data.day
-  const startingPrice = pricePoints[0]
-  const endingPrice = pricePoints[pricePoints.length - 1]
-
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
-  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([height, 0])
-
-  const isPositive = endingPrice.value >= startingPrice.value
+  /* Default curve doesn't look good for the ALL chart */
+  const curveTension = timePeriod === TimePeriod.ALL ? 0.75 : 0.9
 
   return (
     <LineChart
       data={pricePoints}
-      getX={(p: PricePoint) => timeScale(p.timestamp)}
+      getX={(p: PricePoint) => widthScale(p.timestamp)}
       getY={(p: PricePoint) => rdScale(p.value)}
-      marginTop={0}
-      color={isPositive ? theme.accentSuccess : theme.accentFailure}
+      curve={curveCardinal.tension(curveTension)}
+      color={pricePercentChange && pricePercentChange < 0 ? theme.accentFailure : theme.accentSuccess}
       strokeWidth={1.5}
       width={width}
       height={height}
-    ></LineChart>
+    />
   )
 }
 

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -0,0 +1,423 @@
+import { Trans } from '@lingui/macro'
+import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
+import { Pair } from '@uniswap/v2-sdk'
+import { useWeb3React } from '@web3-react/core'
+import { ElementName, Event, EventName } from 'analytics/constants'
+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 { useLocation } from 'react-router-dom'
+import styled, { useTheme } from 'styled-components/macro'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+
+import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
+import { useCurrencyBalance } from '../../state/connection/hooks'
+import { ThemedText } from '../../theme'
+import { ButtonGray } from '../Button'
+import CurrencyLogo from '../CurrencyLogo'
+import DoubleCurrencyLogo from '../DoubleLogo'
+import { Input as NumericalInput } from '../NumericalInput'
+import { RowBetween, RowFixed } from '../Row'
+import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
+import { FiatValue } from './FiatValue'
+
+const InputPanel = styled.div<{ hideInput?: boolean; redesignFlag: 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 }>`
+  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 && '69px'};
+  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)<{
+  visible: boolean
+  selected: boolean
+  hideInput?: boolean
+  disabled?: boolean
+  redesignFlag: boolean
+}>`
+  align-items: center;
+  background-color: ${({ selected, theme, redesignFlag }) =>
+    redesignFlag
+      ? selected
+        ? theme.backgroundSurface
+        : theme.accentAction
+      : selected
+      ? theme.deprecated_bg2
+      : theme.deprecated_primary1};
+  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')};
+  border-radius: 16px;
+  outline: none;
+  user-select: none;
+  border: none;
+  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')};
+  justify-content: space-between;
+  margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
+  :focus,
+  :hover {
+    background-color: ${({ selected, theme, redesignFlag }) =>
+      selected
+        ? redesignFlag
+          ? theme.backgroundSurface
+          : theme.deprecated_bg3
+        : darken(0.05, theme.deprecated_primary1)};
+  }
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
+`
+const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
+  background-color: ${({ theme, selected, redesignFlag }) =>
+    redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
+  :focus,
+  :hover {
+    background-color: ${({ selected, theme, redesignFlag }) =>
+      selected
+        ? redesignFlag
+          ? theme.backgroundInteractive
+          : theme.deprecated_bg3
+        : darken(0.05, theme.deprecated_primary1)};
+  }
+`
+
+const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
+  ${({ theme }) => theme.flexRowNoWrap}
+  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`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  color: ${({ theme }) => theme.deprecated_text1};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0 1rem 1rem;
+
+  span:hover {
+    cursor: pointer;
+    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
+  }
+`
+
+const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
+  justify-content: flex-end;
+  min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
+  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
+  height: ${({ redesignFlag }) => !redesignFlag && '24px'};
+`
+
+const NoBalanceState = styled.div`
+  color: ${({ theme }) => theme.textTertiary};
+  font-weight: 400;
+  justify-content: space-between;
+  padding: 0px 4px 1px 4px;
+`
+const NoBalanceDash = styled.span`
+  color: ${({ theme }) => theme.textTertiary};
+  font-variant: small-caps;
+  font-feature-settings: 'pnum' on, 'lnum' on;
+`
+
+const Aligner = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`
+
+const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boolean }>`
+  margin: 0 0.25rem 0 0.35rem;
+  height: 35%;
+  margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
+
+  path {
+    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+    stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
+  }
+`
+
+const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
+  ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
+  font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+`
+
+const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: 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)};
+  cursor: pointer;
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+  margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
+  opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
+  padding: 4px 6px;
+  pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
+
+  :hover {
+    opacity: ${({ disabled }) => (!disabled ? 0.8 : 0.4)};
+  }
+
+  :focus {
+    outline: none;
+  }
+`
+
+const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
+  ${loadingOpacityMixin};
+  text-align: left;
+  font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
+  font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
+`
+
+interface SwapCurrencyInputPanelProps {
+  value: string
+  onUserInput: (value: string) => void
+  onMax?: () => void
+  showMaxButton: boolean
+  label?: ReactNode
+  onCurrencySelect?: (currency: Currency) => void
+  currency?: Currency | null
+  hideBalance?: boolean
+  pair?: Pair | null
+  hideInput?: boolean
+  otherCurrency?: Currency | null
+  fiatValue?: CurrencyAmount<Token> | null
+  priceImpact?: Percent
+  id: string
+  showCommonBases?: boolean
+  showCurrencyAmount?: boolean
+  disableNonToken?: boolean
+  renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
+  locked?: boolean
+  loading?: boolean
+}
+
+export default function SwapCurrencyInputPanel({
+  value,
+  onUserInput,
+  onMax,
+  showMaxButton,
+  onCurrencySelect,
+  currency,
+  otherCurrency,
+  id,
+  showCommonBases,
+  showCurrencyAmount,
+  disableNonToken,
+  renderBalance,
+  fiatValue,
+  priceImpact,
+  hideBalance = false,
+  pair = null, // used for double token logo
+  hideInput = false,
+  locked = false,
+  loading = false,
+  ...rest
+}: 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()
+  const { pathname } = useLocation()
+  const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2')
+
+  const handleDismissSearch = useCallback(() => {
+    setModalOpen(false)
+  }, [setModalOpen])
+
+  const chainAllowed = isSupportedChain(chainId)
+
+  return (
+    <InputPanel id={id} hideInput={hideInput} {...rest} redesignFlag={redesignFlagEnabled}>
+      {locked && (
+        <FixedContainer redesignFlag={redesignFlagEnabled}>
+          <AutoColumn gap="sm" justify="center">
+            <Lock />
+            <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
+              <Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
+            </ThemedText.DeprecatedLabel>
+          </AutoColumn>
+        </FixedContainer>
+      )}
+      <Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
+        <InputRow
+          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
+          selected={!onCurrencySelect}
+          redesignFlag={redesignFlagEnabled}
+        >
+          {!hideInput && (
+            <StyledNumericalInput
+              className="token-amount-input"
+              value={value}
+              onUserInput={onUserInput}
+              disabled={!chainAllowed}
+              $loading={loading}
+              redesignFlag={redesignFlagEnabled}
+            />
+          )}
+
+          <InputCurrencySelect
+            disabled={!chainAllowed}
+            visible={currency !== undefined}
+            selected={!!currency}
+            hideInput={hideInput}
+            redesignFlag={redesignFlagEnabled}
+            className="open-currency-select-button"
+            onClick={() => {
+              if (onCurrencySelect) {
+                setModalOpen(true)
+              }
+            }}
+          >
+            <Aligner>
+              <RowFixed>
+                {pair ? (
+                  <span style={{ marginRight: '0.5rem' }}>
+                    <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
+                  </span>
+                ) : currency ? (
+                  <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
+                ) : null}
+                {pair ? (
+                  <StyledTokenName className="pair-name-container" redesignFlag={redesignFlagEnabled}>
+                    {pair?.token0.symbol}:{pair?.token1.symbol}
+                  </StyledTokenName>
+                ) : (
+                  <StyledTokenName
+                    className="token-symbol-container"
+                    active={Boolean(currency && currency.symbol)}
+                    redesignFlag={redesignFlagEnabled}
+                  >
+                    {(currency && currency.symbol && currency.symbol.length > 20
+                      ? currency.symbol.slice(0, 4) +
+                        '...' +
+                        currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
+                      : currency?.symbol) || <Trans>Select token</Trans>}
+                  </StyledTokenName>
+                )}
+              </RowFixed>
+              {onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
+            </Aligner>
+          </InputCurrencySelect>
+        </InputRow>
+        {redesignFlagEnabled && !currency && !isAddLiquidityPage && (
+          <NoBalanceState>
+            <FiatRow redesignFlag={redesignFlagEnabled}>
+              <RowBetween>
+                <NoBalanceDash>-</NoBalanceDash>
+                <NoBalanceDash>-</NoBalanceDash>
+              </RowBetween>
+            </FiatRow>
+          </NoBalanceState>
+        )}
+        {!hideInput && !hideBalance && currency && (
+          <FiatRow redesignFlag={redesignFlagEnabled}>
+            <RowBetween>
+              <LoadingOpacityContainer $loading={loading}>
+                <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
+              </LoadingOpacityContainer>
+              {account ? (
+                <RowFixed style={{ height: '17px' }}>
+                  <ThemedText.DeprecatedBody
+                    onClick={onMax}
+                    color={theme.deprecated_text3}
+                    fontWeight={500}
+                    fontSize={14}
+                    style={{ display: 'inline', cursor: 'pointer' }}
+                  >
+                    {!hideBalance && currency && selectedCurrencyBalance ? (
+                      renderBalance ? (
+                        renderBalance(selectedCurrencyBalance)
+                      ) : (
+                        <Trans>Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
+                      )
+                    ) : null}
+                  </ThemedText.DeprecatedBody>
+                  {showMaxButton && selectedCurrencyBalance ? (
+                    <TraceEvent
+                      events={[Event.onClick]}
+                      name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
+                      element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
+                    >
+                      <StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
+                        <Trans>Max</Trans>
+                      </StyledBalanceMax>
+                    </TraceEvent>
+                  ) : null}
+                </RowFixed>
+              ) : (
+                <span />
+              )}
+            </RowBetween>
+          </FiatRow>
+        )}
+      </Container>
+      {onCurrencySelect && (
+        <CurrencySearchModal
+          isOpen={modalOpen}
+          onDismiss={handleDismissSearch}
+          onCurrencySelect={onCurrencySelect}
+          selectedCurrency={currency}
+          otherSelectedCurrency={otherCurrency}
+          showCommonBases={showCommonBases}
+          showCurrencyAmount={showCurrencyAmount}
+          disableNonToken={disableNonToken}
+        />
+      )}
+    </InputPanel>
+  )
+}

src/components/CurrencyInputPanel/index.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
@@ -25,37 +25,35 @@ 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};
+  background-color: ${({ theme, hideInput }) => (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)};
+  background-color: ${({ theme }) => theme.deprecated_bg2};
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
 `
 
-const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
+const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   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)};
+  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.deprecated_bg1};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  ${({ theme, hideInput, disabled, redesignFlag }) =>
-    !redesignFlag &&
+  ${({ theme, hideInput, disabled }) =>
     !disabled &&
     `
     :focus,
@@ -70,65 +68,38 @@ const CurrencySelect = styled(ButtonGray)<{
   selected: boolean
   hideInput?: boolean
   disabled?: boolean
-  redesignFlag: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme, redesignFlag }) =>
-    redesignFlag
-      ? selected
-        ? theme.backgroundSurface
-        : theme.accentAction
-      : selected
-      ? theme.deprecated_bg2
-      : theme.deprecated_primary1};
+  background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
+  box-shadow: 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')};
   border-radius: 16px;
   outline: none;
   user-select: none;
   border: none;
   font-size: 24px;
-  font-weight: 400;
+  font-weight: 500;
+  height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
   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: 0 8px;
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundSurface
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ selected, theme }) =>
+      selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
-const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
-  background-color: ${({ theme, selected, redesignFlag }) =>
-    redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
-  :focus,
-  :hover {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundInteractive
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
-  }
-`
 
-const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
+const InputRow = styled.div<{ selected: boolean }>`
   ${({ 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'};
+  padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
 `
 
 const LabelRow = styled.div`
@@ -138,7 +109,6 @@ const LabelRow = styled.div`
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
-
   span:hover {
     cursor: pointer;
     color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
@@ -147,20 +117,8 @@ const LabelRow = styled.div`
 
 const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
   justify-content: flex-end;
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
-  height: ${({ redesignFlag }) => !redesignFlag && '24px'};
-`
-
-const NoBalanceState = styled.div`
-  color: ${({ theme }) => theme.textTertiary};
-  font-weight: 400;
-  justify-content: space-between;
-  padding: 0px 4px;
-`
-const NoBalanceDash = styled.span`
-  color: ${({ theme }) => theme.textTertiary};
-  font-variant: small-caps;
-  font-feature-settings: 'pnum' on, 'lnum' on;
+  padding: ${({ redesignFlag }) => redesignFlag && '0px 1rem 0.75rem'};
+  height: ${({ redesignFlag }) => (redesignFlag ? '32px' : '16px')};
 `
 
 const Aligner = styled.span`
@@ -170,34 +128,31 @@ 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'};
 
   path {
     stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
-    stroke-width: ${({ redesignFlag }) => (redesignFlag ? '2px' : '1.5px')};
+    stroke-width: 1.5px;
   }
 `
 
-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:  ${({ active }) => (active ? '18px' : '18px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
 `
 
-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};
+  background-color: ${({ theme }) => theme.deprecated_primary5};
   border: none;
-  text-transform: ${({ redesignFlag }) => !redesignFlag && 'uppercase'};
-  border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
+  border-radius: 12px;
+  color: ${({ theme }) => theme.deprecated_primary1};
   cursor: pointer;
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '14px' : '11px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
-  margin-left: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0.25rem')};
+  font-size: 11px;
+  font-weight: 500;
+  margin-left: 0.25rem;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
@@ -211,11 +166,9 @@ 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-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
-  font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
 `
 
 interface CurrencyInputPanelProps {
@@ -265,10 +218,10 @@ export default function CurrencyInputPanel({
 }: CurrencyInputPanelProps) {
   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()
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
@@ -277,9 +230,9 @@ export default function CurrencyInputPanel({
   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">
@@ -288,12 +241,8 @@ export default function CurrencyInputPanel({
           </AutoColumn>
         </FixedContainer>
       )}
-      <Container hideInput={hideInput} disabled={!chainAllowed} redesignFlag={redesignFlagEnabled}>
-        <InputRow
-          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
-          selected={!onCurrencySelect}
-          redesignFlag={redesignFlagEnabled}
-        >
+      <Container hideInput={hideInput} disabled={!chainAllowed}>
+        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           {!hideInput && (
             <StyledNumericalInput
               className="token-amount-input"
@@ -301,16 +250,14 @@ export default function CurrencyInputPanel({
               onUserInput={onUserInput}
               disabled={!chainAllowed}
               $loading={loading}
-              redesignFlag={redesignFlagEnabled}
             />
           )}
 
-          <InputCurrencySelect
+          <CurrencySelect
             disabled={!chainAllowed}
             visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
-            redesignFlag={redesignFlagEnabled}
             className="open-currency-select-button"
             onClick={() => {
               if (onCurrencySelect) {
@@ -325,40 +272,26 @@ export default function CurrencyInputPanel({
                     <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
                   </span>
                 ) : currency ? (
-                  <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
+                  <CurrencyLogo style={{ marginRight: '0.5rem' }} 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) +
                         '...' +
                         currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                      : currency?.symbol) || <Trans>Select token</Trans>}
+                      : currency?.symbol) || <Trans>Select a token</Trans>}
                   </StyledTokenName>
                 )}
               </RowFixed>
-              {onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
+              {onCurrencySelect && <StyledDropDown selected={!!currency} />}
             </Aligner>
-          </InputCurrencySelect>
+          </CurrencySelect>
         </InputRow>
-        {redesignFlagEnabled && !currency && (
-          <NoBalanceState>
-            <FiatRow redesignFlag={redesignFlagEnabled}>
-              <RowBetween>
-                <NoBalanceDash>-</NoBalanceDash>
-                <NoBalanceDash>-</NoBalanceDash>
-              </RowBetween>
-            </FiatRow>
-          </NoBalanceState>
-        )}
         {!hideInput && !hideBalance && currency && (
           <FiatRow redesignFlag={redesignFlagEnabled}>
             <RowBetween>
@@ -388,8 +321,8 @@ export default function CurrencyInputPanel({
                       name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
                       element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >
-                      <StyledBalanceMax onClick={onMax} redesignFlag={redesignFlagEnabled}>
-                        <Trans>Max</Trans>
+                      <StyledBalanceMax onClick={onMax}>
+                        <Trans>MAX</Trans>
                       </StyledBalanceMax>
                     </TraceEvent>
                   ) : null}

src/components/CurrencyLogo/index.tsx

@@ -24,11 +24,13 @@ const StyledNativeLogo = styled(StyledLogo)`
 
 export default function CurrencyLogo({
   currency,
+  symbol,
   size = '24px',
   style,
   ...rest
 }: {
   currency?: Currency | null
+  symbol?: string | null
   size?: string
   style?: React.CSSProperties
 }) {
@@ -36,6 +38,7 @@ export default function CurrencyLogo({
     alt: `${currency?.symbol ?? 'token'} logo`,
     size,
     srcs: useCurrencyLogoURIs(currency),
+    symbol: symbol ?? currency?.symbol,
     style,
     ...rest,
   }

src/components/DoubleLogo/index.tsx

@@ -18,7 +18,7 @@ interface DoubleCurrencyLogoProps {
 }
 
 const HigherLogo = styled(CurrencyLogo)`
-  z-index: 2;
+  z-index: 1;
 `
 const CoveredLogo = styled(CurrencyLogo)<{ sizeraw: number }>`
   position: absolute;

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,11 +1,13 @@
-import { FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
-import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
-import { useAtomValue } from 'jotai/utils'
-import { ReactNode, useState } from 'react'
+import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
+import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
 import { X } from 'react-feather'
 import { useModalIsOpen, useToggleFeatureFlags } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
@@ -44,7 +46,14 @@ const Row = styled.div`
 
 const CloseButton = styled.button`
   cursor: pointer;
-  background: 'transparent';
+  background: transparent;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+`
+
+const ToggleButton = styled.button`
+  cursor: pointer;
+  background: transparent;
   border: none;
   color: ${({ theme }) => theme.textPrimary};
 `
@@ -58,7 +67,6 @@ const Header = styled(Row)`
 const FlagName = styled.span`
   font-size: 16px;
   line-height: 20px;
-  padding-left: 8px;
   color: ${({ theme }) => theme.textPrimary};
 `
 const FlagGroupName = styled.span`
@@ -114,17 +122,53 @@ function Variant({ option }: { option: string }) {
   return <option value={option}>{option}</option>
 }
 
-function FeatureFlagOption({
-  variants,
-  featureFlag,
-  value,
-  label,
-}: {
-  variants: string[]
+interface FeatureFlagProps {
+  variant: Record<string, string>
   featureFlag: FeatureFlag
   value: string
   label: string
-}) {
+}
+
+function FeatureFlagGroup({ name, children }: PropsWithChildren<{ name: string }>) {
+  // type FeatureFlagOption = { props: FeatureFlagProps }
+  const togglableOptions = Children.toArray(children)
+    .filter<ReactElement<FeatureFlagProps>>(
+      (child): child is ReactElement<FeatureFlagProps> =>
+        child instanceof Object && 'type' in child && child.type === FeatureFlagOption
+    )
+    .map(({ props }) => props)
+    .filter(({ variant }) => {
+      const values = Object.values(variant)
+      return values.includes(BaseVariant.Control) && values.includes(BaseVariant.Enabled)
+    })
+
+  const setFeatureFlags = useUpdateAtom(featureFlagSettings)
+  const allEnabled = togglableOptions.every(({ value }) => value === BaseVariant.Enabled)
+  const onToggle = useCallback(() => {
+    setFeatureFlags((flags) => ({
+      ...flags,
+      ...togglableOptions.reduce(
+        (flags, { featureFlag }) => ({
+          ...flags,
+          [featureFlag]: allEnabled ? BaseVariant.Control : BaseVariant.Enabled,
+        }),
+        {}
+      ),
+    }))
+  }, [allEnabled, setFeatureFlags, togglableOptions])
+
+  return (
+    <>
+      <Row key={name}>
+        <FlagGroupName>{name}</FlagGroupName>
+        <ToggleButton onClick={onToggle}>{allEnabled ? 'Disable' : 'Enable'} group</ToggleButton>
+      </Row>
+      {children}
+    </>
+  )
+}
+
+function FeatureFlagOption({ variant, featureFlag, value, label }: FeatureFlagProps) {
   const updateFlag = useUpdateFlag()
   const [count, setCount] = useState(0)
   const featureFlags = useAtomValue(featureFlagSettings)
@@ -143,7 +187,7 @@ function FeatureFlagOption({
         }}
         value={featureFlags[featureFlag]}
       >
-        {variants.map((variant) => (
+        {Object.values(variant).map((variant) => (
           <Variant key={variant} option={variant} />
         ))}
       </FlagVariantSelection>
@@ -163,39 +207,52 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FlagGroupName>Phase 1</FlagGroupName>
-      <FeatureFlagOption
-        variants={Object.values(Phase1Variant)}
-        value={usePhase1Flag()}
-        featureFlag={FeatureFlag.phase1}
-        label="All Phase 1 changes (nft features)."
-      />
-      <FlagGroupName>Phase 0</FlagGroupName>
-      <FeatureFlagOption
-        variants={Object.values(RedesignVariant)}
-        value={useRedesignFlag()}
-        featureFlag={FeatureFlag.redesign}
-        label="Redesign"
-      />
-      <FeatureFlagOption
-        variants={Object.values(NavBarVariant)}
-        value={useNavBarFlag()}
-        featureFlag={FeatureFlag.navBar}
-        label="NavBar"
-      />
-      <FeatureFlagOption
-        variants={Object.values(TokensVariant)}
-        value={useTokensFlag()}
-        featureFlag={FeatureFlag.tokens}
-        label="Tokens"
-      />
-      <FeatureFlagOption
-        variants={Object.values(TokenSafetyVariant)}
-        value={useTokenSafetyFlag()}
-        featureFlag={FeatureFlag.tokenSafety}
-        label="Token Safety"
-      />
-      <SaveButton onClick={() => window.location.reload()}>Save Settings</SaveButton>
+      <FeatureFlagGroup name="Phase 0">
+        <FeatureFlagOption
+          variant={RedesignVariant}
+          value={useRedesignFlag()}
+          featureFlag={FeatureFlag.redesign}
+          label="Redesign"
+        />
+        <FeatureFlagOption
+          variant={NavBarVariant}
+          value={useNavBarFlag()}
+          featureFlag={FeatureFlag.navBar}
+          label="NavBar"
+        />
+        <FeatureFlagOption
+          variant={TokensVariant}
+          value={useTokensFlag()}
+          featureFlag={FeatureFlag.tokens}
+          label="Tokens"
+        />
+        <FeatureFlagOption
+          variant={TokenSafetyVariant}
+          value={useTokenSafetyFlag()}
+          featureFlag={FeatureFlag.tokenSafety}
+          label="Token Safety"
+        />
+      </FeatureFlagGroup>
+      <FeatureFlagGroup name="Phase 0 Follow-ups">
+        <FeatureFlagOption
+          variant={FavoriteTokensVariant}
+          value={useFavoriteTokensFlag()}
+          featureFlag={FeatureFlag.favoriteTokens}
+          label="Favorite Tokens"
+        />
+      </FeatureFlagGroup>
+      <FeatureFlagGroup name="Phase 1">
+        <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
+      </FeatureFlagGroup>
+      <FeatureFlagGroup name="Debug">
+        <FeatureFlagOption
+          variant={TraceJsonRpcVariant}
+          value={useTraceJsonRpcFlag()}
+          featureFlag={FeatureFlag.traceJsonRpc}
+          label="Enables JSON-RPC tracing"
+        />
+      </FeatureFlagGroup>
+      <SaveButton onClick={() => window.location.reload()}>Reload</SaveButton>
     </Modal>
   )
 }

src/components/FeeSelector/FeeOption.tsx

@@ -15,7 +15,7 @@ const ResponsiveText = styled(ThemedText.DeprecatedLabel)`
   line-height: 16px;
   font-size: 14px;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 12px;
     line-height: 12px;
   `};

src/components/Header/ChainConnectivityWarning.tsx

@@ -39,7 +39,7 @@ const Wrapper = styled.div`
   padding: 16px 20px;
   position: absolute;
   right: 16px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium}px) {
     display: block;
   }
 `

src/components/Header/NetworkSelector.tsx

@@ -11,7 +11,6 @@ import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'sta
 import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { isChainAllowed } from 'utils/switchChain'
 import { isMobile } from 'utils/userAgent'
 
 const ActiveRowLinkList = styled.div`
@@ -53,7 +52,7 @@ const FlyoutMenu = styled.div`
   width: 272px;
   z-index: 99;
   padding-top: 10px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     top: 40px;
   }
 `
@@ -112,7 +111,7 @@ const NetworkLabel = styled.div`
 `
 const SelectorLabel = styled(NetworkLabel)`
   display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     display: block;
     margin-right: 8px;
   }
@@ -126,7 +125,7 @@ const NetworkAlertLabel = styled(NetworkLabel)`
   font-size: 1rem;
   width: fit-content;
   font-weight: 500;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     display: block;
   }
 `
@@ -153,12 +152,12 @@ const SelectorControls = styled.div<{ supportedChain: boolean }>`
   }
 `
 const SelectorLogo = styled(Logo)`
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     margin-right: 8px;
   }
 `
 const SelectorWrapper = styled.div`
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     position: relative;
   }
 `
@@ -281,7 +280,7 @@ const NETWORK_SELECTOR_CHAINS = [
 ]
 
 export default function NetworkSelector() {
-  const { chainId, provider, connector } = useWeb3React()
+  const { chainId, provider } = useWeb3React()
 
   const node = useRef<HTMLDivElement>(null)
   const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
@@ -328,18 +327,16 @@ export default function NetworkSelector() {
             <FlyoutHeader>
               <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
             </FlyoutHeader>
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(connector, chainId) ? (
-                <Row
-                  onSelectChain={async (targetChainId: SupportedChainId) => {
-                    await selectChain(targetChainId)
-                    closeModal()
-                  }}
-                  targetChain={chainId}
-                  key={chainId}
-                />
-              ) : null
-            )}
+            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
+              <Row
+                onSelectChain={async (targetChainId: SupportedChainId) => {
+                  await selectChain(targetChainId)
+                  closeModal()
+                }}
+                targetChain={chainId}
+                key={chainId}
+              />
+            ))}
           </FlyoutMenuContents>
         </FlyoutMenu>
       )}

src/components/Header/Polling.tsx

@@ -26,7 +26,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
   color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
   transition: 250ms ease color;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     display: none;
   `}
 `

src/components/Header/index.tsx

@@ -46,16 +46,16 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
   transition: background-position 0.1s, box-shadow 0.1s;
   background-blend-mode: hard-light;
 
-  ${({ theme }) => theme.mediaWidth.upToLarge`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
     grid-template-columns: 48px 1fr 1fr;
   `};
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding:  1rem;
     grid-template-columns: 1fr 1fr;
   `};
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     padding:  1rem;
     grid-template-columns: 36px 1fr;
   `};
@@ -81,7 +81,7 @@ const HeaderElement = styled.div`
     margin-left: 8px;
   }
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     align-items: center;
   `};
 `
@@ -97,13 +97,13 @@ const HeaderLinks = styled(Row)`
   grid-gap: 10px;
   overflow: auto;
   align-items: center;
-  ${({ theme }) => theme.mediaWidth.upToLarge`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
     justify-self: start;
     `};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     justify-self: center;
   `};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     flex-direction: row;
     justify-content: space-between;
     justify-self: center;
@@ -157,7 +157,7 @@ const UNIWrapper = styled.span`
 `
 
 const BalanceText = styled(Text)`
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
     display: none;
   `};
 `
@@ -168,7 +168,7 @@ const Title = styled.a`
   pointer-events: auto;
   justify-self: flex-start;
   margin-right: 12px;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     justify-self: center;
   `};
   :hover {

src/components/Icons/index.tsx

@@ -0,0 +1,32 @@
+import { ChevronDown, ChevronUp } from 'react-feather'
+import styled from 'styled-components/macro'
+
+export const StyledChevronDown = styled(ChevronDown)<{ customColor?: string }>`
+  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
+  height: 20px;
+  width: 20px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast} color ${timing.in}`};
+  }
+`
+
+export const StyledChevronUp = styled(ChevronUp)<{ customColor?: string }>`
+  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
+  height: 20px;
+  width: 20px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast} color ${timing.in}`};
+  }
+`

src/components/Identicon/StatusIcon.tsx

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

src/components/Identicon/index.tsx

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

src/components/InputStepCounter/InputStepCounter.tsx

@@ -48,11 +48,11 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
   font-weight: 500;
   padding: 0 10px;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 16px;
   `};
 
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
     font-size: 12px;
   `};
 `

src/components/LiquidityChartRangeInput/Brush.tsx

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

src/components/ListLogo/index.tsx

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

src/components/Logo/index.tsx

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

src/components/Menu/index.tsx

@@ -110,7 +110,7 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
       : css`
           left: 0rem;
         `};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     bottom: unset;
     right: 0;
     left: unset;
@@ -278,7 +278,7 @@ export default function Menu() {
                     </ToggleMenuItem>
                     <ToggleMenuItem onClick={() => toggleDarkMode()}>
                       <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
-                      {darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
+                      {darkMode ? <Sun opacity={0.6} size={16} /> : <Moon opacity={0.6} size={16} />}
                     </ToggleMenuItem>
                     <MenuItem href="https://docs.uniswap.org/">
                       <div>

src/components/Modal/index.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
 import styled, { css } from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 
 import { isMobile } from '../../utils/userAgent'
 
@@ -11,7 +12,7 @@ const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean }>`
   &[data-reach-dialog-overlay] {
-    z-index: 2;
+    z-index: ${Z_INDEX.modalBackdrop};
     background-color: transparent;
     overflow: hidden;
 
@@ -26,7 +27,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boole
 const AnimatedDialogContent = animated(DialogContent)
 // destructure to not pass custom props to Dialog DOM element
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
+const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, redesignFlag, ...rest }) => (
   <AnimatedDialogContent {...rest} />
 )).attrs({
   'aria-label': 'dialog',
@@ -37,7 +38,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
     margin: 0 0 2rem 0;
     background-color: ${({ theme }) => theme.deprecated_bg0};
     border: 1px solid ${({ theme }) => theme.deprecated_bg1};
-    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
+    box-shadow: ${({ theme, redesignFlag }) =>
+      redesignFlag ? theme.deepShadow : `0 4px 8px 0 ${transparentize(0.95, theme.shadow1)}`};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
@@ -58,11 +60,11 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
       `}
     display: flex;
     border-radius: 20px;
-    ${({ theme }) => theme.mediaWidth.upToMedium`
+    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
       width: 65vw;
       margin: 0;
     `}
-    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
+    ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
       width:  85vw;
       ${
         mobile &&
@@ -139,6 +141,7 @@ export default function Modal({
                 minHeight={minHeight}
                 maxHeight={maxHeight}
                 mobile={isMobile}
+                redesignFlag={redesignFlag}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
                 {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}

src/components/NavBar/ChainSelector.css.ts

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

src/components/NavBar/ChainSelector.tsx

@@ -0,0 +1,109 @@
+import { useWeb3React } from '@web3-react/core'
+import { StyledChevronDown, StyledChevronUp } from 'components/Icons'
+import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import useSelectChain from 'hooks/useSelectChain'
+import useSyncChainQuery from 'hooks/useSyncChainQuery'
+import { Box } from 'nft/components/Box'
+import { Portal } from 'nft/components/common/Portal'
+import { Column, Row } from 'nft/components/Flex'
+import { TokenWarningRedIcon } from 'nft/components/icons'
+import { subhead } from 'nft/css/common.css'
+import { themeVars } from 'nft/css/sprinkles.css'
+import { useIsMobile } from 'nft/hooks'
+import { useCallback, useRef, useState } from 'react'
+
+import * as styles from './ChainSelector.css'
+import ChainSelectorRow from './ChainSelectorRow'
+import { NavDropdown } from './NavDropdown'
+
+const NETWORK_SELECTOR_CHAINS = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.POLYGON,
+  SupportedChainId.OPTIMISM,
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.CELO,
+]
+
+interface ChainSelectorProps {
+  leftAlign?: boolean
+}
+
+export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
+  const { chainId } = useWeb3React()
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const isMobile = useIsMobile()
+
+  const ref = useRef<HTMLDivElement>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(ref, () => setIsOpen(false), [modalRef])
+
+  const info = chainId ? getChainInfo(chainId) : undefined
+
+  const selectChain = useSelectChain()
+  useSyncChainQuery()
+
+  const [pendingChainId, setPendingChainId] = useState<SupportedChainId | undefined>(undefined)
+
+  const onSelectChain = useCallback(
+    async (targetChainId: SupportedChainId) => {
+      setPendingChainId(targetChainId)
+      await selectChain(targetChainId)
+      setPendingChainId(undefined)
+      setIsOpen(false)
+    },
+    [selectChain, setIsOpen]
+  )
+
+  if (!chainId) {
+    return null
+  }
+
+  const isSupported = !!info
+
+  const dropdown = (
+    <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
+      <Column paddingX="8">
+        {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
+          <ChainSelectorRow
+            onSelectChain={onSelectChain}
+            targetChain={chainId}
+            key={chainId}
+            isPending={chainId === pendingChainId}
+          />
+        ))}
+      </Column>
+    </NavDropdown>
+  )
+
+  return (
+    <Box position="relative" ref={ref}>
+      <Row
+        as="button"
+        gap="8"
+        className={styles.ChainSelector}
+        background={isOpen ? 'accentActiveSoft' : 'none'}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {!isSupported ? (
+          <>
+            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
+              Unsupported
+            </Box>
+          </>
+        ) : (
+          <>
+            <img src={info.logoUrl} alt={info.label} className={styles.Image} />
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
+              {info.label}
+            </Box>
+          </>
+        )}
+        {isOpen ? <StyledChevronUp /> : <StyledChevronDown />}
+      </Row>
+      {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
+    </Box>
+  )
+}

src/components/NavBar/ChainSelectorRow.tsx

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

src/components/NavBar/ChainSwitcher.css.ts

@@ -1,49 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-import { sprinkles } from '../../nft/css/sprinkles.css'
-
-export const ChainSwitcher = style([
-  sprinkles({
-    background: 'lightGrayContainer',
-    borderRadius: '8',
-    paddingY: '8',
-    paddingX: '12',
-    cursor: 'pointer',
-    border: 'none',
-  }),
-])
-
-export const ChainSwitcherRow = style([
-  sprinkles({
-    border: 'none',
-    color: 'blackBlue',
-    justifyContent: 'space-between',
-    paddingX: '16',
-    paddingY: '12',
-    cursor: 'pointer',
-  }),
-  {
-    lineHeight: '24px',
-    width: '308px',
-  },
-])
-
-export const Image = style([
-  sprinkles({
-    width: '28',
-    height: '28',
-  }),
-])
-
-export const Icon = style([
-  Image,
-  sprinkles({
-    marginRight: '12',
-  }),
-])
-
-export const Indicator = style([
-  sprinkles({
-    marginLeft: '8',
-  }),
-])

src/components/NavBar/ChainSwitcher.tsx

@@ -1,108 +0,0 @@
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfo } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import useSelectChain from 'hooks/useSelectChain'
-import useSyncChainQuery from 'hooks/useSyncChainQuery'
-import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { NewChevronDownIcon, NewChevronUpIcon } from 'nft/components/icons'
-import { CheckMarkIcon } from 'nft/components/icons'
-import { subhead } from 'nft/css/common.css'
-import { ReactNode, useReducer, useRef } from 'react'
-import { isChainAllowed } from 'utils/switchChain'
-
-import * as styles from './ChainSwitcher.css'
-import { NavDropdown } from './NavDropdown'
-
-const ChainRow = ({
-  targetChain,
-  onSelectChain,
-}: {
-  targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
-}) => {
-  const { chainId } = useWeb3React()
-  const active = chainId === targetChain
-  const { label, logoUrl } = getChainInfo(targetChain)
-
-  return (
-    <Row
-      as="button"
-      background={active ? 'lightGrayContainer' : 'none'}
-      className={`${styles.ChainSwitcherRow} ${subhead}`}
-      onClick={() => onSelectChain(targetChain)}
-    >
-      <ChainDetails>
-        <img src={logoUrl} alt={label} className={styles.Icon} />
-        {label}
-      </ChainDetails>
-      {active && <CheckMarkIcon width={20} height={20} />}
-    </Row>
-  )
-}
-
-const ChainDetails = ({ children }: { children: ReactNode }) => <Row>{children}</Row>
-
-const NETWORK_SELECTOR_CHAINS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-]
-
-interface ChainSwitcherProps {
-  isMobile?: boolean
-}
-
-export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
-  const { chainId, connector } = useWeb3React()
-  const [isOpen, toggleOpen] = useReducer((s) => !s, false)
-
-  const ref = useRef<HTMLDivElement>(null)
-  useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
-
-  const info = chainId ? getChainInfo(chainId) : undefined
-
-  const selectChain = useSelectChain()
-  useSyncChainQuery()
-
-  if (!chainId || !info) {
-    return null
-  }
-
-  return (
-    <Box position="relative" ref={ref}>
-      <Row as="button" gap="8" className={styles.ChainSwitcher} onClick={toggleOpen}>
-        <img src={info.logoUrl} alt={info.label} className={styles.Image} />
-        <Box as="span" className={subhead} color="explicitWhite" style={{ lineHeight: '20px' }}>
-          {info.label}
-        </Box>
-        {isOpen ? (
-          <NewChevronUpIcon width={16} height={16} color="darkGray" />
-        ) : (
-          <NewChevronDownIcon width={16} height={16} color="darkGray" />
-        )}
-      </Row>
-      {isOpen && (
-        <NavDropdown top={60} leftAligned={isMobile}>
-          <Column gap="4">
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) =>
-              isChainAllowed(connector, chainId) ? (
-                <ChainRow
-                  onSelectChain={async (targetChainId: SupportedChainId) => {
-                    await selectChain(targetChainId)
-                    toggleOpen()
-                  }}
-                  targetChain={chainId}
-                  key={chainId}
-                />
-              ) : null
-            )}
-          </Column>
-        </NavDropdown>
-      )}
-    </Box>
-  )
-}

src/components/NavBar/MenuDropdown.css.ts

@@ -1,13 +1,27 @@
 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, themeVars } from '../../nft/css/sprinkles.css'
+import { sprinkles, themeVars, vars } from '../../nft/css/sprinkles.css'
+
+export const hover = style([
+  sprinkles({
+    transition: '250',
+    borderRadius: '12',
+  }),
+  {
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
+  },
+])
 
 export const MenuRow = style([
+  hover,
   sprinkles({
     color: 'blackBlue',
-    paddingY: '12',
-    width: 'max',
-    marginRight: '52',
+    paddingY: '8',
+    paddingX: '8',
+    width: 'full',
+    whiteSpace: 'nowrap',
   }),
   {
     lineHeight: '24px',
@@ -22,9 +36,12 @@ export const PrimaryText = style([
 ])
 
 export const SecondaryText = style([
+  hover,
   sprinkles({
     paddingY: '8',
+    paddingX: '8',
     color: 'darkGray',
+    width: 'full',
   }),
   {
     lineHeight: '20px',
@@ -34,6 +51,7 @@ export const SecondaryText = style([
 export const Separator = style([
   sprinkles({
     height: '0',
+    marginX: '16',
   }),
   {
     borderTop: 'solid',
@@ -45,6 +63,6 @@ export const Separator = style([
 export const IconRow = style([
   sprinkles({
     paddingX: '16',
-    paddingY: '8',
+    justifyContent: { sm: 'center', md: 'flex-start' },
   }),
 ])

src/components/NavBar/MenuDropdown.tsx

@@ -1,5 +1,7 @@
+import { Trans } from '@lingui/macro'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -9,6 +11,7 @@ import {
   EllipsisIcon,
   GithubIconMenu,
   GovernanceIcon,
+  ThinTagIcon,
   TwitterIconMenu,
 } from 'nft/components/icons'
 import { body, bodySmall } from 'nft/css/common.css'
@@ -114,6 +117,7 @@ export const MenuDropdown = () => {
   const [isOpen, toggleOpen] = useReducer((s) => !s, false)
   const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
+  const nftFlag = useNftFlag()
 
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
@@ -121,50 +125,78 @@ export const MenuDropdown = () => {
   return (
     <>
       <Box position="relative" ref={ref}>
-        <NavIcon onClick={toggleOpen}>
-          <EllipsisIcon width={28} height={28} />
+        <NavIcon isActive={isOpen} onClick={toggleOpen}>
+          <EllipsisIcon width={20} height={20} />
         </NavIcon>
 
         {isOpen && (
-          <NavDropdown top={60}>
-            <Column gap="12">
-              <Column paddingX="16" gap="4">
+          <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '56', lg: 'unset' }} right="0">
+            <Column gap="16">
+              <Column paddingX="8" gap="4">
+                {nftFlag === NftVariant.Enabled && (
+                  <PrimaryMenuRow to="/nfts/sell" close={toggleOpen}>
+                    <Icon>
+                      <ThinTagIcon width={24} height={24} />
+                    </Icon>
+                    <PrimaryMenuRow.Text>
+                      <Trans>Sell NFTs</Trans>
+                    </PrimaryMenuRow.Text>
+                  </PrimaryMenuRow>
+                )}
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} />
                   </Icon>
-                  <PrimaryMenuRow.Text>Vote in governance</PrimaryMenuRow.Text>
+                  <PrimaryMenuRow.Text>
+                    <Trans>Vote in governance</Trans>
+                  </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
                 <PrimaryMenuRow href="https://info.uniswap.org/#/">
                   <Icon>
                     <BarChartIcon width={24} height={24} />
                   </Icon>
-                  <PrimaryMenuRow.Text>View token analytics ↗</PrimaryMenuRow.Text>
+                  <PrimaryMenuRow.Text>
+                    <Trans>View token analytics</Trans>
+                  </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
               </Column>
               <Separator />
-              <Column paddingX="16" gap="4">
-                <SecondaryLinkedText href="https://help.uniswap.org/en/">Help center ↗</SecondaryLinkedText>
-                <SecondaryLinkedText href="https://docs.uniswap.org/">Documentation ↗</SecondaryLinkedText>
+              <Box
+                display="flex"
+                flexDirection={{ sm: 'row', md: 'column' }}
+                flexWrap="wrap"
+                alignItems={{ sm: 'center', md: 'flex-start' }}
+                paddingX="8"
+              >
+                <SecondaryLinkedText href="https://help.uniswap.org/en/">
+                  <Trans>Help center</Trans> ↗
+                </SecondaryLinkedText>
+                <SecondaryLinkedText href="https://docs.uniswap.org/">
+                  <Trans>Documentation</Trans> ↗
+                </SecondaryLinkedText>
                 <SecondaryLinkedText
                   onClick={() => {
                     toggleOpen()
                     togglePrivacyPolicy()
                   }}
-                >{`Legal & Privacy`}</SecondaryLinkedText>
+                >
+                  <Trans>Legal & Privacy</Trans> ↗
+                </SecondaryLinkedText>
                 {(isDevelopmentEnv() || isStagingEnv()) && (
-                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>{`Feature Flags`}</SecondaryLinkedText>
+                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>
+                    <Trans>Feature Flags</Trans>
+                  </SecondaryLinkedText>
                 )}
-              </Column>
+              </Box>
               <IconRow>
                 <Icon href="https://discord.com/invite/FCfyBSbCU5">
-                  <DiscordIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <DiscordIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
                 <Icon href="https://twitter.com/Uniswap">
-                  <TwitterIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <TwitterIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
                 <Icon href="https://github.com/Uniswap">
-                  <GithubIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <GithubIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
               </IconRow>
             </Column>

src/components/NavBar/MobileSidebar.css.ts

@@ -1,121 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { subhead } from 'nft/css/common.css'
-
-import { sprinkles } from '../../nft/css/sprinkles.css'
-
-export const sidebar = style([
-  sprinkles({
-    display: 'flex',
-    position: 'fixed',
-    background: 'white',
-    height: 'full',
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    paddingBottom: '16',
-    justifyContent: 'space-between',
-  }),
-  {
-    zIndex: 20,
-  },
-])
-
-export const icon = style([
-  sprinkles({
-    width: '32',
-    height: '32',
-  }),
-])
-
-export const iconContainer = style([
-  sprinkles({
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    color: 'darkGray',
-    background: 'none',
-    border: 'none',
-    justifyContent: 'flex-end',
-    textAlign: 'center',
-    cursor: 'pointer',
-    padding: '6',
-  }),
-])
-
-export const linkRow = style([
-  subhead,
-  sprinkles({
-    color: 'blackBlue',
-    width: 'full',
-    paddingLeft: '16',
-    paddingY: '12',
-    cursor: 'pointer',
-  }),
-  {
-    lineHeight: '24px',
-    textDecoration: 'none',
-  },
-])
-
-export const activeLinkRow = style([
-  linkRow,
-  sprinkles({
-    background: 'lightGrayButton',
-  }),
-])
-
-export const separator = style([
-  sprinkles({
-    height: '0',
-    borderStyle: 'solid',
-    borderColor: 'medGray',
-    borderWidth: '1px',
-    marginY: '8',
-    marginX: '16',
-  }),
-])
-
-export const extraLinkRow = style([
-  subhead,
-  sprinkles({
-    width: 'full',
-    color: 'blackBlue',
-    paddingY: '12',
-    paddingLeft: '16',
-    cursor: 'pointer',
-  }),
-  {
-    lineHeight: '24px',
-    textDecoration: 'none',
-  },
-])
-
-export const bottomExternalLinks = style([
-  sprinkles({
-    gap: '4',
-    paddingX: '4',
-    width: 'max',
-    flexWrap: 'wrap',
-  }),
-])
-
-export const bottomJointExternalLinksContainer = style([
-  sprinkles({
-    paddingX: '8',
-    paddingY: '4',
-    color: 'darkGray',
-    fontWeight: 'medium',
-    fontSize: '12',
-  }),
-  {
-    lineHeight: '20px',
-  },
-])
-
-export const IconRow = style([
-  sprinkles({
-    gap: '12',
-    width: 'max',
-  }),
-])

src/components/NavBar/MobileSidebar.tsx

@@ -1,233 +0,0 @@
-import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
-import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-import { Box } from 'nft/components/Box'
-import { Portal } from 'nft/components/common/Portal'
-import { Column, Row } from 'nft/components/Flex'
-import {
-  BarChartIconMobile,
-  BulletIcon,
-  CloseIcon,
-  DiscordIconMenuMobile,
-  GithubIconMenuMobile,
-  GovernanceIconMobile,
-  HamburgerIcon,
-  TwitterIconMenuMobile,
-} from 'nft/components/icons'
-import { themeVars } from 'nft/css/sprinkles.css'
-import { ReactNode, useReducer } from 'react'
-import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
-import { useToggleModal, useTogglePrivacyPolicy } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
-
-import * as styles from './MobileSidebar.css'
-import { NavIcon } from './NavIcon'
-
-interface NavLinkRowProps {
-  href: string
-  id?: NavLinkProps['id']
-  isActive?: boolean
-  close: () => void
-  children: ReactNode
-}
-
-const NavLinkRow = ({ href, id, isActive, close, children }: NavLinkRowProps) => {
-  return (
-    <NavLink to={href} className={isActive ? styles.activeLinkRow : styles.linkRow} id={id} onClick={close}>
-      {children}
-    </NavLink>
-  )
-}
-
-const ExtraLinkRow = ({
-  to,
-  href,
-  close,
-  children,
-}: {
-  to?: NavLinkProps['to']
-  href?: string
-  close: () => void
-  children: ReactNode
-}) => {
-  return (
-    <>
-      {to ? (
-        <NavLink to={to} className={styles.extraLinkRow}>
-          <Row gap="12" onClick={close}>
-            {children}
-          </Row>
-        </NavLink>
-      ) : (
-        <Row
-          as="a"
-          href={href}
-          target={'_blank'}
-          rel={'noopener noreferrer'}
-          gap="12"
-          onClick={close}
-          className={styles.extraLinkRow}
-        >
-          {children}
-        </Row>
-      )}
-    </>
-  )
-}
-
-const BottomExternalLink = ({
-  href,
-  onClick,
-  children,
-}: {
-  href?: string
-  onClick?: () => void
-  children: ReactNode
-}) => {
-  return (
-    <Box
-      as={href ? 'a' : 'div'}
-      href={href ?? undefined}
-      target={href ? '_blank' : undefined}
-      rel={href ? 'noopener noreferrer' : undefined}
-      className={`${styles.bottomJointExternalLinksContainer}`}
-      onClick={onClick}
-      cursor="pointer"
-    >
-      {children}
-    </Box>
-  )
-}
-
-const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
-  return (
-    <>
-      <Box
-        as={href ? 'a' : 'div'}
-        href={href ?? undefined}
-        target={href ? '_blank' : undefined}
-        rel={href ? 'noopener noreferrer' : undefined}
-        display="flex"
-        flexDirection="column"
-        color="blackBlue"
-        background="none"
-        border="none"
-        justifyContent="center"
-        textAlign="center"
-      >
-        {children}
-      </Box>
-    </>
-  )
-}
-
-const IconRow = ({ children }: { children: ReactNode }) => {
-  return <Row className={styles.IconRow}>{children}</Row>
-}
-
-const Seperator = () => {
-  return <Box className={styles.separator} />
-}
-
-export const MobileSideBar = () => {
-  const [isOpen, toggleOpen] = useReducer((s) => !s, false)
-  const togglePrivacyPolicy = useTogglePrivacyPolicy()
-  const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
-  const { pathname } = useLocation()
-  const isPoolActive =
-    pathname.startsWith('/pool') ||
-    pathname.startsWith('/add') ||
-    pathname.startsWith('/remove') ||
-    pathname.startsWith('/increase') ||
-    pathname.startsWith('/find')
-
-  return (
-    <>
-      <NavIcon onClick={toggleOpen}>
-        <HamburgerIcon width={28} height={28} />
-      </NavIcon>
-      {isOpen && (
-        <Portal>
-          <Column className={styles.sidebar}>
-            <Column>
-              <Row justifyContent="flex-end" marginTop="14" marginBottom="20" marginRight="8">
-                <Box as="button" onClick={toggleOpen} className={styles.iconContainer}>
-                  <CloseIcon className={styles.icon} />
-                </Box>
-              </Row>
-              <Column gap="4">
-                <NavLinkRow href="/swap" close={toggleOpen} isActive={pathname.startsWith('/swap')}>
-                  Swap
-                </NavLinkRow>
-                <NavLinkRow href="/tokens" close={toggleOpen} isActive={pathname.startsWith('/tokens')}>
-                  Tokens
-                </NavLinkRow>
-                <NavLinkRow href="/pool" id={'pool-nav-link'} isActive={isPoolActive} close={toggleOpen}>
-                  Pool
-                </NavLinkRow>
-              </Column>
-              <Seperator />
-              <Column gap="4">
-                <ExtraLinkRow to="/vote" close={toggleOpen}>
-                  <Icon>
-                    <GovernanceIconMobile width={24} height={24} />
-                  </Icon>
-                  Vote in governance
-                </ExtraLinkRow>
-                <ExtraLinkRow href="https://info.uniswap.org/#/" close={toggleOpen}>
-                  <Icon>
-                    <BarChartIconMobile width={24} height={24} />
-                  </Icon>
-                  View token analytics ↗
-                </ExtraLinkRow>
-              </Column>
-            </Column>
-            <Column>
-              <Row justifyContent="center" marginBottom="12" flexWrap="wrap">
-                <Row className={styles.bottomExternalLinks}>
-                  <BottomExternalLink href="https://help.uniswap.org/en/" onClick={toggleOpen}>
-                    Help center ↗
-                  </BottomExternalLink>
-                  <BulletIcon />
-                  <BottomExternalLink href="https://docs.uniswap.org/" onClick={toggleOpen}>
-                    Documentation ↗
-                  </BottomExternalLink>
-                  <BulletIcon />
-                  <BottomExternalLink
-                    onClick={() => {
-                      toggleOpen()
-                      togglePrivacyPolicy()
-                    }}
-                  >
-                    {`Legal & Privacy`}
-                  </BottomExternalLink>
-                </Row>
-                {(isDevelopmentEnv() || isStagingEnv()) && (
-                  <>
-                    <BulletIcon />
-                    <BottomExternalLink onClick={openFeatureFlagsModal}>{`Feature Flags`}</BottomExternalLink>
-                  </>
-                )}
-              </Row>
-              <Row justifyContent="center">
-                <IconRow>
-                  <Icon href="https://discord.com/invite/FCfyBSbCU5">
-                    <DiscordIconMenuMobile width={32} height={32} color={themeVars.colors.darkGray} />
-                  </Icon>
-                  <Icon href="https://twitter.com/Uniswap">
-                    <TwitterIconMenuMobile width={32} height={32} color={themeVars.colors.darkGray} />
-                  </Icon>
-                  <Icon href="https://github.com/Uniswap">
-                    <GithubIconMenuMobile width={32} height={32} color={themeVars.colors.darkGray} />
-                  </Icon>
-                </IconRow>
-              </Row>
-            </Column>
-          </Column>
-        </Portal>
-      )}
-      <PrivacyPolicyModal />
-      <FeatureFlagModal />
-    </>
-  )
-}

src/components/NavBar/NavDropdown.css.ts

@@ -2,18 +2,44 @@ import { style } from '@vanilla-extract/css'
 
 import { sprinkles } from '../../nft/css/sprinkles.css'
 
-export const NavDropdown = style([
+const baseNavDropdown = style([
   sprinkles({
-    position: 'absolute',
-    background: 'white95',
-    borderRadius: '12',
+    background: 'lightGray',
     borderStyle: 'solid',
     borderColor: 'medGray',
-    paddingY: '20',
     borderWidth: '1px',
+    paddingBottom: '8',
+    paddingTop: '8',
+    zIndex: '2',
   }),
   {
     boxShadow: '0px 4px 12px 0px #00000026',
-    zIndex: 10,
+  },
+])
+
+export const NavDropdown = style([
+  baseNavDropdown,
+  sprinkles({
+    position: 'absolute',
+    borderRadius: '12',
+  }),
+  {},
+])
+
+export const mobileNavDropdown = style([
+  baseNavDropdown,
+  sprinkles({
+    position: 'fixed',
+    borderTopRightRadius: '12',
+    borderTopLeftRadius: '12',
+    top: 'unset',
+    bottom: '56',
+    left: '0',
+    right: '0',
+    width: 'full',
+  }),
+  {
+    borderRightWidth: '0px',
+    borderLeftWidth: '0px',
   },
 ])

src/components/NavBar/NavDropdown.tsx

@@ -1,37 +1,12 @@
-import { Box } from 'nft/components/Box'
-import { ReactNode } from 'react'
+import { Box, BoxProps } from 'nft/components/Box'
+import { useIsMobile } from 'nft/hooks'
+import { ForwardedRef, forwardRef } from 'react'
 
 import * as styles from './NavDropdown.css'
 
-interface NavDropdownProps {
-  top: number
-  right?: number
-  leftAligned?: boolean
-  horizontalPadding?: boolean
-  centerHorizontally?: boolean
-  children: ReactNode
-}
+export const NavDropdown = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
+  const isMobile = useIsMobile()
+  return <Box ref={ref} className={isMobile ? styles.mobileNavDropdown : styles.NavDropdown} {...props} />
+})
 
-export const NavDropdown = ({
-  top,
-  centerHorizontally,
-  leftAligned,
-  horizontalPadding,
-  children,
-}: NavDropdownProps) => {
-  return (
-    <Box
-      paddingX={horizontalPadding ? '16' : undefined}
-      style={{
-        top: `${top}px`,
-        left: centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
-        right: centerHorizontally || leftAligned ? 'auto' : '10px',
-        transform: centerHorizontally ? 'translateX(-50%)' : 'unset',
-        zIndex: 3,
-      }}
-      className={styles.NavDropdown}
-    >
-      {children}
-    </Box>
-  )
-}
+NavDropdown.displayName = 'NavDropdown'

src/components/NavBar/NavIcon.css.ts

@@ -1,25 +1,24 @@
 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, themeVars } from '../../nft/css/sprinkles.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const navIcon = style([
   sprinkles({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    color: 'blackBlue',
-    background: 'none',
     border: 'none',
     justifyContent: 'center',
     textAlign: 'center',
     cursor: 'pointer',
-    padding: '8',
+    padding: '10',
     borderRadius: '8',
+    transition: '250',
   }),
   {
     ':hover': {
-      background: themeVars.colors.lightGrayContainer,
+      background: vars.color.lightGrayOverlay,
     },
-    zIndex: 2,
+    zIndex: 1,
   },
 ])

src/components/NavBar/NavIcon.tsx

@@ -5,12 +5,20 @@ import * as styles from './NavIcon.css'
 
 interface NavIconProps {
   children: ReactNode
+  isActive?: boolean
   onClick: () => void
 }
 
-export const NavIcon = ({ children, onClick }: NavIconProps) => {
+export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
   return (
-    <Box as="button" className={styles.navIcon} onClick={onClick}>
+    <Box
+      as="button"
+      className={styles.navIcon}
+      background={isActive ? 'accentActiveSoft' : 'none'}
+      color={isActive ? 'blackBlue' : 'darkGray'}
+      onClick={onClick}
+      height="40"
+    >
       {children}
     </Box>
   )

src/components/NavBar/Navbar.tsx

@@ -1,108 +0,0 @@
-import Web3Status from 'components/Web3Status'
-import { useWindowSize } from 'hooks/useWindowSize'
-import { ReactNode } from 'react'
-import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
-
-import { Box } from '../../nft/components/Box'
-import { Row } from '../../nft/components/Flex'
-import { UniIcon, UniIconMobile } from '../../nft/components/icons'
-import { breakpoints } from '../../nft/css/sprinkles.css'
-import { ChainSwitcher } from './ChainSwitcher'
-import { MenuDropdown } from './MenuDropdown'
-import { MobileSideBar } from './MobileSidebar'
-import * as styles from './Navbar.css'
-
-interface MenuItemProps {
-  href: string
-  id?: NavLinkProps['id']
-  isActive?: boolean
-  children: ReactNode
-}
-
-const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
-  return (
-    <NavLink
-      to={href}
-      className={isActive ? styles.activeMenuItem : styles.menuItem}
-      id={id}
-      style={{ textDecoration: 'none' }}
-    >
-      {children}
-    </NavLink>
-  )
-}
-
-const MobileNavbar = () => {
-  return (
-    <>
-      <nav className={styles.nav}>
-        <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
-          <Box className={styles.leftSideMobileContainer}>
-            <Box as="a" href="#/swap" className={styles.logoContainer}>
-              <UniIconMobile width="44" height="44" className={styles.logo} />
-            </Box>
-            <ChainSwitcher isMobile={true} />
-          </Box>
-          <Box className={styles.rightSideMobileContainer}>
-            <Row gap="16">
-              {/* TODO add Searchbar */}
-              <MobileSideBar />
-            </Row>
-          </Box>
-        </Box>
-      </nav>
-      <Box className={styles.mobileWalletContainer}>
-        <Web3Status />
-      </Box>
-    </>
-  )
-}
-
-const Navbar = () => {
-  const { width: windowWidth } = useWindowSize()
-  const { pathname } = useLocation()
-
-  if (windowWidth && windowWidth < breakpoints.desktopXl) {
-    return <MobileNavbar />
-  }
-
-  const isPoolActive =
-    pathname.startsWith('/pool') ||
-    pathname.startsWith('/add') ||
-    pathname.startsWith('/remove') ||
-    pathname.startsWith('/increase') ||
-    pathname.startsWith('/find')
-
-  return (
-    <nav className={styles.nav}>
-      <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
-        <Box className={styles.leftSideContainer}>
-          <Box as="a" href="#/swap" className={styles.logoContainer}>
-            <UniIcon width="48" height="48" className={styles.logo} />
-          </Box>
-          <Row gap="8">
-            <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
-              Swap
-            </MenuItem>
-            <MenuItem href="/tokens" isActive={pathname.startsWith('/explore')}>
-              Tokens
-            </MenuItem>
-            <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
-              Pool
-            </MenuItem>
-          </Row>
-        </Box>
-        <Box className={styles.middleContainer}>{/* TODO add Searchbar */}</Box>
-        <Box className={styles.rightSideContainer}>
-          <Row gap="12">
-            <MenuDropdown />
-            <ChainSwitcher />
-            <Web3Status />
-          </Row>
-        </Box>
-      </Box>
-    </nav>
-  )
-}
-
-export default Navbar

src/components/NavBar/SearchBar.css.ts

@@ -0,0 +1,216 @@
+import { style } from '@vanilla-extract/css'
+import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css'
+
+import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css'
+
+const DESKTOP_NAVBAR_WIDTH = 360
+const MAGNIFYING_GLASS_ICON_WIDTH = 28
+
+const baseSearchStyle = style([
+  sprinkles({
+    paddingY: '12',
+    width: { sm: 'viewWidth' },
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'medGray',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH}px`,
+      },
+    },
+  },
+])
+
+export const searchBarContainer = style([
+  sprinkles({
+    right: '0',
+    top: '0',
+    zIndex: '3',
+    display: 'inline-block',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.lg}px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH / 2 - MAGNIFYING_GLASS_ICON_WIDTH}px`,
+        top: '-5px',
+      },
+    },
+  },
+])
+
+export const searchBar = style([
+  baseSearchStyle,
+  sprinkles({
+    color: 'placeholder',
+    paddingX: '16',
+    cursor: 'pointer',
+    background: 'lightGray',
+  }),
+])
+
+export const searchBarInput = style([
+  sprinkles({
+    padding: '0',
+    fontWeight: 'normal',
+    fontSize: '16',
+    color: { default: 'blackBlue', placeholder: 'placeholder' },
+    border: 'none',
+    background: 'none',
+  }),
+  {
+    lineHeight: '24px',
+  },
+])
+
+export const searchBarDropdown = style([
+  baseSearchStyle,
+  sprinkles({
+    borderBottomLeftRadius: '12',
+    borderBottomRightRadius: '12',
+    background: 'lightGray',
+    height: { sm: 'viewHeight', md: 'auto' },
+  }),
+  {
+    borderTop: 'none',
+  },
+])
+
+export const suggestionRow = style([
+  sprinkles({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingY: '8',
+    paddingX: '16',
+  }),
+  {
+    ':hover': {
+      cursor: 'pointer',
+      background: vars.color.lightGrayOverlay,
+    },
+    textDecoration: 'none',
+  },
+])
+
+export const suggestionImage = sprinkles({
+  width: '36',
+  height: '36',
+  borderRadius: 'round',
+  marginRight: '8',
+})
+
+export const suggestionPrimaryContainer = style([
+  sprinkles({
+    alignItems: 'flex-start',
+    width: 'full',
+  }),
+])
+
+export const suggestionSecondaryContainer = sprinkles({
+  textAlign: 'right',
+  alignItems: 'flex-end',
+})
+
+export const primaryText = style([
+  subhead,
+  sprinkles({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    color: 'blackBlue',
+  }),
+  {
+    lineHeight: '24px',
+  },
+])
+
+export const secondaryText = style([
+  buttonTextSmall,
+  sprinkles({
+    color: 'darkGray',
+  }),
+  {
+    lineHeight: '20px',
+  },
+])
+
+export const imageHolder = style([
+  suggestionImage,
+  sprinkles({
+    background: 'loading',
+    flexShrink: '0',
+  }),
+])
+
+export const suggestionIcon = sprinkles({
+  display: 'flex',
+  flexShrink: '0',
+})
+
+export const sectionHeader = style([
+  subheadSmall,
+  sprinkles({
+    color: 'darkGray',
+  }),
+  {
+    lineHeight: '20px',
+  },
+])
+
+export const notFoundContainer = style([
+  sectionHeader,
+  sprinkles({
+    paddingY: '4',
+    paddingLeft: '16',
+  }),
+])
+
+const visibilityTransition = `visibility ${vars.time[125]}, opacity ${vars.time[125]}`
+const delayedTransitionProperties = `padding 0s ${vars.time[125]}, height 0s ${vars.time[125]}`
+
+export const hidden = style([
+  sprinkles({
+    visibility: 'hidden',
+    opacity: '0',
+    padding: '0',
+    height: '0',
+  }),
+  {
+    transition: `${visibilityTransition}, ${delayedTransitionProperties}`,
+    transitionTimingFunction: 'ease-in',
+  },
+])
+export const visible = style([
+  sprinkles({
+    visibility: 'visible',
+    opacity: '1',
+    height: 'full',
+  }),
+  {
+    transition: `${visibilityTransition}`,
+    transitionTimingFunction: 'ease-out',
+  },
+])
+
+export const searchContentCentered = style({
+  '@media': {
+    [`screen and (min-width: ${breakpoints.lg}px)`]: {
+      transform: `translateX(${DESKTOP_NAVBAR_WIDTH / 4}px)`,
+      transition: `transform ${vars.time[125]}`,
+      transitionTimingFunction: 'ease-out',
+    },
+  },
+})
+
+export const searchContentLeftAlign = style({
+  '@media': {
+    [`screen and (min-width: ${breakpoints.lg}px)`]: {
+      transform: 'translateX(0)',
+      transition: `transform ${vars.time[125]}`,
+      transitionTimingFunction: 'ease-in',
+    },
+  },
+})

src/components/NavBar/SearchBar.tsx

@@ -0,0 +1,439 @@
+// eslint-disable-next-line no-restricted-imports
+import { t, Trans } from '@lingui/macro'
+import clsx from 'clsx'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import useDebounce from 'hooks/useDebounce'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import { organizeSearchResults } from 'lib/utils/searchBar'
+import { Box } from 'nft/components/Box'
+import { Column, Row } from 'nft/components/Flex'
+import { magicalGradientOnHover, subheadSmall } from 'nft/css/common.css'
+import { useIsMobile, useIsTablet, useSearchHistory } from 'nft/hooks'
+import { fetchSearchCollections, fetchTrendingCollections } from 'nft/queries'
+import { fetchSearchTokens } from 'nft/queries/genie/SearchTokensFetcher'
+import { fetchTrendingTokens } from 'nft/queries/genie/TrendingTokensFetcher'
+import { FungibleToken, GenieCollection, TimePeriod, TrendingCollection } from 'nft/types'
+import { formatEthPrice } from 'nft/utils/currency'
+import { ChangeEvent, ReactNode, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { useQuery } from 'react-query'
+import { useLocation } from 'react-router-dom'
+
+import {
+  ChevronLeftIcon,
+  ClockIcon,
+  MagnifyingGlassIcon,
+  NavMagnifyingGlassIcon,
+  TrendingArrow,
+} from '../../nft/components/icons'
+import { NavIcon } from './NavIcon'
+import * as styles from './SearchBar.css'
+import { CollectionRow, SkeletonRow, TokenRow } from './SuggestionRow'
+
+interface SearchBarDropdownSectionProps {
+  toggleOpen: () => void
+  suggestions: (GenieCollection | FungibleToken)[]
+  header: JSX.Element
+  headerIcon?: JSX.Element
+  hoveredIndex: number | undefined
+  startingIndex: number
+  setHoveredIndex: (index: number | undefined) => void
+  isLoading?: boolean
+}
+
+export const SearchBarDropdownSection = ({
+  toggleOpen,
+  suggestions,
+  header,
+  headerIcon = undefined,
+  hoveredIndex,
+  startingIndex,
+  setHoveredIndex,
+  isLoading,
+}: SearchBarDropdownSectionProps) => {
+  return (
+    <Column gap="12">
+      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
+        {headerIcon ? headerIcon : null}
+        <Box>{header}</Box>
+      </Row>
+      <Column gap="12">
+        {suggestions.map((suggestion, index) =>
+          isLoading ? (
+            <SkeletonRow key={index} />
+          ) : isCollection(suggestion) ? (
+            <CollectionRow
+              key={suggestion.address}
+              collection={suggestion as GenieCollection}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              index={index + startingIndex}
+            />
+          ) : (
+            <TokenRow
+              key={suggestion.address}
+              token={suggestion as FungibleToken}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              index={index + startingIndex}
+            />
+          )
+        )}
+      </Column>
+    </Column>
+  )
+}
+
+interface SearchBarDropdownProps {
+  toggleOpen: () => void
+  tokens: FungibleToken[]
+  collections: GenieCollection[]
+  hasInput: boolean
+  isLoading: boolean
+}
+
+export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput, isLoading }: SearchBarDropdownProps) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(0)
+  const searchHistory = useSearchHistory((state: { history: (FungibleToken | GenieCollection)[] }) => state.history)
+  const shortenedHistory = useMemo(() => searchHistory.slice(0, 2), [searchHistory])
+  const { pathname } = useLocation()
+  const isNFTPage = pathname.includes('/nfts')
+  const isTokenPage = pathname.includes('/tokens')
+  const phase1Flag = useNftFlag()
+  const [resultsState, setResultsState] = useState<ReactNode>()
+
+  const tokenSearchResults =
+    tokens.length > 0 ? (
+      <SearchBarDropdownSection
+        hoveredIndex={hoveredIndex}
+        startingIndex={isNFTPage ? collections.length : 0}
+        setHoveredIndex={setHoveredIndex}
+        toggleOpen={toggleOpen}
+        suggestions={tokens}
+        header={<Trans>Tokens</Trans>}
+      />
+    ) : (
+      <Box className={styles.notFoundContainer}>
+        <Trans>No tokens found.</Trans>
+      </Box>
+    )
+
+  const collectionSearchResults =
+    phase1Flag === NftVariant.Enabled ? (
+      collections.length > 0 ? (
+        <SearchBarDropdownSection
+          hoveredIndex={hoveredIndex}
+          startingIndex={isNFTPage ? 0 : tokens.length}
+          setHoveredIndex={setHoveredIndex}
+          toggleOpen={toggleOpen}
+          suggestions={collections}
+          header={<Trans>NFT Collections</Trans>}
+        />
+      ) : (
+        <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
+      )
+    ) : null
+
+  const { data: trendingCollectionResults, isLoading: trendingCollectionsAreLoading } = useQuery(
+    ['trendingCollections', 'eth', 'twenty_four_hours'],
+    () => fetchTrendingCollections({ volumeType: 'eth', timePeriod: 'ONE_DAY' as TimePeriod, size: 3 })
+  )
+
+  const trendingCollections = useMemo(
+    () =>
+      trendingCollectionResults
+        ? trendingCollectionResults
+            .map((collection) => ({
+              ...collection,
+              collectionAddress: collection.address,
+              floorPrice: formatEthPrice(collection.floor?.toString()),
+              stats: {
+                total_supply: collection.totalSupply,
+                one_day_change: collection.floorChange,
+              },
+            }))
+            .slice(0, isNFTPage ? 3 : 2)
+        : [...Array<GenieCollection>(isNFTPage ? 3 : 2)],
+    [isNFTPage, trendingCollectionResults]
+  )
+
+  const { data: trendingTokenResults, isLoading: trendingTokensAreLoading } = useQuery(
+    ['trendingTokens'],
+    () => fetchTrendingTokens(4),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    }
+  )
+
+  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
+
+  const trendingTokens = useMemo(
+    () =>
+      trendingTokenResults
+        ? trendingTokenResults.slice(0, trendingTokensLength)
+        : [...Array<FungibleToken>(trendingTokensLength)],
+    [trendingTokenResults, trendingTokensLength]
+  )
+
+  const totalSuggestions = hasInput
+    ? tokens.length + collections.length
+    : Math.min(shortenedHistory.length, 2) +
+      (isNFTPage || !isTokenPage ? trendingCollections?.length ?? 0 : 0) +
+      (isTokenPage || !isNFTPage ? trendingTokens?.length ?? 0 : 0)
+
+  // Navigate search results via arrow keys
+  useEffect(() => {
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (!hoveredIndex) {
+          setHoveredIndex(totalSuggestions - 1)
+        } else {
+          setHoveredIndex(hoveredIndex - 1)
+        }
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (hoveredIndex && hoveredIndex === totalSuggestions - 1) {
+          setHoveredIndex(0)
+        } else {
+          setHoveredIndex((hoveredIndex ?? -1) + 1)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', keyDownHandler)
+
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [toggleOpen, hoveredIndex, totalSuggestions])
+
+  useEffect(() => {
+    if (!isLoading) {
+      const currentState = () =>
+        hasInput ? (
+          // Empty or Up to 8 combined tokens and nfts
+          <Column gap="20">
+            {isNFTPage ? (
+              <>
+                {collectionSearchResults}
+                {tokenSearchResults}
+              </>
+            ) : (
+              <>
+                {tokenSearchResults}
+                {collectionSearchResults}
+              </>
+            )}
+          </Column>
+        ) : (
+          // Recent Searches, Trending Tokens, Trending Collections
+          <Column gap="20">
+            {shortenedHistory.length > 0 && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={0}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={shortenedHistory}
+                header={<Trans>Recent searches</Trans>}
+                headerIcon={<ClockIcon />}
+              />
+            )}
+            {!isNFTPage && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={shortenedHistory.length}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={trendingTokens}
+                header={<Trans>Popular tokens</Trans>}
+                headerIcon={<TrendingArrow />}
+                isLoading={trendingTokensAreLoading}
+              />
+            )}
+            {!isTokenPage && phase1Flag === NftVariant.Enabled && (
+              <SearchBarDropdownSection
+                hoveredIndex={hoveredIndex}
+                startingIndex={shortenedHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
+                setHoveredIndex={setHoveredIndex}
+                toggleOpen={toggleOpen}
+                suggestions={trendingCollections as unknown as GenieCollection[]}
+                header={<Trans>Popular NFT collections</Trans>}
+                headerIcon={<TrendingArrow />}
+                isLoading={trendingCollectionsAreLoading}
+              />
+            )}
+          </Column>
+        )
+
+      setResultsState(currentState)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    isLoading,
+    tokens,
+    collections,
+    trendingCollections,
+    trendingCollectionsAreLoading,
+    trendingTokens,
+    trendingTokensAreLoading,
+    hoveredIndex,
+    phase1Flag,
+    toggleOpen,
+    shortenedHistory,
+    hasInput,
+    isNFTPage,
+    isTokenPage,
+  ])
+
+  return (
+    <Box className={styles.searchBarDropdown}>
+      <Box opacity={isLoading ? '0.3' : '1'} transition="125">
+        {resultsState}
+      </Box>
+    </Box>
+  )
+}
+
+function isCollection(suggestion: GenieCollection | FungibleToken | TrendingCollection) {
+  return (suggestion as FungibleToken).decimals === undefined
+}
+
+export const SearchBar = () => {
+  const [isOpen, toggleOpen] = useReducer((state: boolean) => !state, false)
+  const [searchValue, setSearchValue] = useState('')
+  const debouncedSearchValue = useDebounce(searchValue, 300)
+  const searchRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { pathname } = useLocation()
+  const phase1Flag = useNftFlag()
+  const isMobile = useIsMobile()
+  const isTablet = useIsTablet()
+
+  useOnClickOutside(searchRef, () => {
+    isOpen && toggleOpen()
+  })
+
+  const { data: collections, isLoading: collectionsAreLoading } = useQuery(
+    ['searchCollections', debouncedSearchValue],
+    () => fetchSearchCollections(debouncedSearchValue),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    }
+  )
+
+  const { data: tokens, isLoading: tokensAreLoading } = useQuery(
+    ['searchTokens', debouncedSearchValue],
+    () => fetchSearchTokens(debouncedSearchValue),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    }
+  )
+
+  const isNFTPage = pathname.includes('/nfts')
+
+  const [reducedTokens, reducedCollections] = organizeSearchResults(isNFTPage, tokens ?? [], collections ?? [])
+
+  // close dropdown on escape
+  useEffect(() => {
+    const escapeKeyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        event.preventDefault()
+        toggleOpen()
+      }
+    }
+
+    document.addEventListener('keydown', escapeKeyDownHandler)
+
+    return () => {
+      document.removeEventListener('keydown', escapeKeyDownHandler)
+    }
+  }, [isOpen, toggleOpen, collections])
+
+  // clear searchbar when changing pages
+  useEffect(() => {
+    setSearchValue('')
+  }, [pathname])
+
+  // auto set cursor when searchbar is opened
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus()
+    }
+  }, [isOpen])
+
+  const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
+  const isMobileOrTablet = isMobile || isTablet
+  const showCenteredSearchContent = !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet
+
+  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"
+        >
+          <Box className={showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign}>
+            <Box display={{ sm: 'none', md: 'flex' }}>
+              <MagnifyingGlassIcon />
+            </Box>
+            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+              <ChevronLeftIcon />
+            </Box>
+          </Box>
+          <Box
+            as="input"
+            placeholder={placeholderText}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              !isOpen && toggleOpen()
+              setSearchValue(event.target.value)
+            }}
+            className={`${styles.searchBarInput} ${
+              showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
+            }`}
+            value={searchValue}
+            ref={inputRef}
+            width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
+          />
+        </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>
+      </Box>
+      <NavIcon onClick={toggleOpen}>
+        <NavMagnifyingGlassIcon />
+      </NavIcon>
+    </Box>
+  )
+}

src/components/NavBar/ShoppingBag.css.ts

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

src/components/NavBar/ShoppingBag.tsx

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

src/components/NavBar/SuggestionRow.tsx

@@ -0,0 +1,195 @@
+import clsx from 'clsx'
+import uriToHttp from 'lib/utils/uriToHttp'
+import { Box } from 'nft/components/Box'
+import { Column, Row } from 'nft/components/Flex'
+import { vars } from 'nft/css/sprinkles.css'
+import { useSearchHistory } from 'nft/hooks'
+import { FungibleToken, GenieCollection } from 'nft/types'
+import { ethNumberStandardFormatter } from 'nft/utils/currency'
+import { putCommas } from 'nft/utils/putCommas'
+import { useCallback, useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+
+import { VerifiedIcon } from '../../nft/components/icons'
+import * as styles from './SearchBar.css'
+
+interface CollectionRowProps {
+  collection: GenieCollection
+  isHovered: boolean
+  setHoveredIndex: (index: number | undefined) => void
+  toggleOpen: () => void
+  index: number
+}
+
+export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOpen, index }: CollectionRowProps) => {
+  const [brokenImage, setBrokenImage] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const addToSearchHistory = useSearchHistory(
+    (state: { addItem: (item: FungibleToken | GenieCollection) => void }) => state.addItem
+  )
+  const navigate = useNavigate()
+
+  const handleClick = useCallback(() => {
+    addToSearchHistory(collection)
+    toggleOpen()
+  }, [addToSearchHistory, collection, toggleOpen])
+
+  useEffect(() => {
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Enter' && isHovered) {
+        event.preventDefault()
+        navigate(`/nfts/collection/${collection.address}`)
+        handleClick()
+      }
+    }
+    document.addEventListener('keydown', keyDownHandler)
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [toggleOpen, isHovered, collection, navigate, handleClick])
+
+  return (
+    <Link
+      to={`/nfts/collection/${collection.address}`}
+      onClick={handleClick}
+      onMouseEnter={() => !isHovered && setHoveredIndex(index)}
+      onMouseLeave={() => isHovered && setHoveredIndex(undefined)}
+      className={styles.suggestionRow}
+      style={{ background: isHovered ? vars.color.lightGrayOverlay : 'none' }}
+    >
+      <Row style={{ width: '60%' }}>
+        {!brokenImage && collection.imageUrl ? (
+          <Box
+            as="img"
+            src={collection.imageUrl}
+            alt={collection.name}
+            className={clsx(loaded ? styles.suggestionImage : styles.imageHolder)}
+            onError={() => setBrokenImage(true)}
+            onLoad={() => setLoaded(true)}
+          />
+        ) : (
+          <Box className={styles.imageHolder} />
+        )}
+        <Column className={styles.suggestionPrimaryContainer}>
+          <Row gap="4" width="full">
+            <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>
+        </Column>
+      </Row>
+      {collection.floorPrice ? (
+        <Column className={styles.suggestionSecondaryContainer}>
+          <Row gap="4">
+            <Box className={styles.primaryText}>{ethNumberStandardFormatter(collection.floorPrice)} ETH</Box>
+          </Row>
+          <Box className={styles.secondaryText}>Floor</Box>
+        </Column>
+      ) : null}
+    </Link>
+  )
+}
+
+interface TokenRowProps {
+  token: FungibleToken
+  isHovered: boolean
+  setHoveredIndex: (index: number | undefined) => void
+  toggleOpen: () => void
+  index: number
+}
+
+export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index }: TokenRowProps) => {
+  const [brokenImage, setBrokenImage] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const addToSearchHistory = useSearchHistory(
+    (state: { addItem: (item: FungibleToken | GenieCollection) => void }) => state.addItem
+  )
+  const navigate = useNavigate()
+
+  const handleClick = useCallback(() => {
+    addToSearchHistory(token)
+    toggleOpen()
+  }, [addToSearchHistory, toggleOpen, token])
+
+  // Close the modal on escape
+  useEffect(() => {
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Enter' && isHovered) {
+        event.preventDefault()
+        navigate(`/tokens/${token.address}`)
+        handleClick()
+      }
+    }
+    document.addEventListener('keydown', keyDownHandler)
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [toggleOpen, isHovered, token, navigate, handleClick])
+
+  return (
+    <Link
+      to={`/tokens/${token.address}`}
+      onClick={handleClick}
+      onMouseEnter={() => !isHovered && setHoveredIndex(index)}
+      onMouseLeave={() => isHovered && setHoveredIndex(undefined)}
+      className={styles.suggestionRow}
+      style={{ background: isHovered ? vars.color.lightGrayOverlay : 'none' }}
+    >
+      <Row style={{ width: '65%' }}>
+        {!brokenImage && token.logoURI ? (
+          <Box
+            as="img"
+            src={token.logoURI.includes('ipfs://') ? uriToHttp(token.logoURI)[0] : token.logoURI}
+            alt={token.name}
+            className={clsx(loaded ? styles.suggestionImage : styles.imageHolder)}
+            onError={() => setBrokenImage(true)}
+            onLoad={() => setLoaded(true)}
+          />
+        ) : (
+          <Box className={styles.imageHolder} />
+        )}
+        <Column className={styles.suggestionPrimaryContainer}>
+          <Row gap="4" width="full">
+            <Box className={styles.primaryText}>{token.name}</Box>
+            {token.onDefaultList && <VerifiedIcon className={styles.suggestionIcon} />}
+          </Row>
+          <Box className={styles.secondaryText}>{token.symbol}</Box>
+        </Column>
+      </Row>
+
+      <Column className={styles.suggestionSecondaryContainer}>
+        {token.priceUsd && (
+          <Row gap="4">
+            <Box className={styles.primaryText}>{ethNumberStandardFormatter(token.priceUsd, true)}</Box>
+          </Row>
+        )}
+        {token.price24hChange && (
+          <Box className={styles.secondaryText} color={token.price24hChange >= 0 ? 'green400' : 'red400'}>
+            {token.price24hChange.toFixed(2)}%
+          </Box>
+        )}
+      </Column>
+    </Link>
+  )
+}
+
+export const SkeletonRow = () => {
+  return (
+    <Row className={styles.suggestionRow}>
+      <Row width="full">
+        <Box className={styles.imageHolder} />
+        <Column gap="4" width="full">
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="20" background="loading" style={{ width: '180px' }} />
+            <Box borderRadius="round" height="20" width="48" background="loading" />
+          </Row>
+
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="16" width="120" background="loading" />
+            <Box borderRadius="round" height="16" width="48" background="loading" />
+          </Row>
+        </Column>
+      </Row>
+    </Row>
+  )
+}

src/components/NavBar/index.ts

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

src/components/NavBar/index.tsx

@@ -0,0 +1,117 @@
+import { Trans } from '@lingui/macro'
+import Web3Status from 'components/Web3Status'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { Box } from 'nft/components/Box'
+import { Row } from 'nft/components/Flex'
+import { UniIcon } from 'nft/components/icons'
+import { ReactNode } from 'react'
+import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
+
+import { ChainSelector } from './ChainSelector'
+import { MenuDropdown } from './MenuDropdown'
+import { SearchBar } from './SearchBar'
+import { ShoppingBag } from './ShoppingBag'
+import * as styles from './style.css'
+
+interface MenuItemProps {
+  href: string
+  id?: NavLinkProps['id']
+  isActive?: boolean
+  children: ReactNode
+}
+
+const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
+  return (
+    <NavLink
+      to={href}
+      className={isActive ? styles.activeMenuItem : styles.menuItem}
+      id={id}
+      style={{ textDecoration: 'none' }}
+    >
+      {children}
+    </NavLink>
+  )
+}
+
+const PageTabs = () => {
+  const { pathname } = useLocation()
+  const nftFlag = useNftFlag()
+
+  const isPoolActive =
+    pathname.startsWith('/pool') ||
+    pathname.startsWith('/add') ||
+    pathname.startsWith('/remove') ||
+    pathname.startsWith('/increase') ||
+    pathname.startsWith('/find')
+
+  return (
+    <>
+      <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
+        <Trans>Swap</Trans>
+      </MenuItem>
+      <MenuItem href="/tokens" isActive={pathname.startsWith('/tokens')}>
+        <Trans>Tokens</Trans>
+      </MenuItem>
+      {nftFlag === NftVariant.Enabled && (
+        <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
+          <Trans>NFTs</Trans>
+        </MenuItem>
+      )}
+      <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
+        <Trans>Pool</Trans>
+      </MenuItem>
+    </>
+  )
+}
+
+const Navbar = () => {
+  const { pathname } = useLocation()
+  const isNftPage = pathname.startsWith('/nfts')
+
+  return (
+    <>
+      <nav className={styles.nav}>
+        <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
+          <Box className={styles.leftSideContainer}>
+            <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>
+            <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
+              <PageTabs />
+            </Row>
+          </Box>
+          <Box className={styles.middleContainer}>
+            <SearchBar />
+          </Box>
+          <Box className={styles.rightSideContainer}>
+            <Row gap="12">
+              <Box display={{ sm: 'flex', xl: 'none' }}>
+                <SearchBar />
+              </Box>
+              <Box display={{ sm: 'none', lg: 'flex' }}>
+                <MenuDropdown />
+              </Box>
+              {isNftPage && <ShoppingBag />}
+              <Box display={{ sm: 'none', lg: 'flex' }}>
+                <ChainSelector />
+              </Box>
+
+              <Web3Status />
+            </Row>
+          </Box>
+        </Box>
+      </nav>
+      <Box className={styles.mobileBottomBar}>
+        <PageTabs />
+        <Box marginY="4">
+          <MenuDropdown />
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default Navbar

src/components/NavBar/style.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
 import { subhead } from '../../nft/css/common.css'
-import { sprinkles } from '../../nft/css/sprinkles.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const nav = style([
   sprinkles({
@@ -20,7 +20,7 @@ export const nav = style([
 export const logoContainer = style([
   sprinkles({
     display: 'flex',
-    marginRight: { mobile: '12', desktopXl: '20' },
+    marginRight: { sm: '12', xxl: '20' },
     alignItems: 'center',
   }),
 ])
@@ -34,23 +34,14 @@ export const logo = style([
 
 export const baseContainer = style([
   sprinkles({
-    display: 'flex',
     alignItems: 'center',
   }),
 ])
 
-export const baseMobileContainer = style([
-  sprinkles({
-    display: 'flex',
-    width: 'full',
-    alignItems: 'center',
-    marginY: '2',
-  }),
-])
-
 export const baseSideContainer = style([
   baseContainer,
   sprinkles({
+    display: 'flex',
     width: 'full',
     flex: '1',
     flexShrink: '2',
@@ -64,19 +55,13 @@ export const leftSideContainer = style([
   }),
 ])
 
-export const leftSideMobileContainer = style([
-  baseMobileContainer,
-  sprinkles({
-    justifyContent: 'flex-start',
-  }),
-])
-
 export const middleContainer = style([
   baseContainer,
   sprinkles({
     flex: '1',
     flexShrink: '1',
     justifyContent: 'center',
+    display: { sm: 'none', xl: 'flex' },
   }),
 ])
 
@@ -94,10 +79,17 @@ const baseMenuItem = style([
     paddingX: '16',
     marginY: '4',
     borderRadius: '12',
+    transition: '250',
+    height: 'min',
+    width: 'full',
+    textAlign: 'center',
   }),
   {
     lineHeight: '24px',
     textDecoration: 'none',
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
   },
 ])
 
@@ -108,30 +100,25 @@ export const menuItem = style([
   }),
 ])
 
-export const rightSideMobileContainer = style([
-  baseMobileContainer,
-  sprinkles({
-    justifyContent: 'flex-end',
-  }),
-])
-
 export const activeMenuItem = style([
   baseMenuItem,
   sprinkles({
     color: 'blackBlue',
+    background: 'backgroundFloating',
   }),
 ])
 
-export const mobileWalletContainer = style([
+export const mobileBottomBar = style([
   sprinkles({
     position: 'fixed',
-    display: 'flex',
+    display: { sm: 'flex', lg: 'none' },
     bottom: '0',
-    right: '1/2',
-    marginY: '0',
-    marginX: 'auto',
+    right: '0',
+    left: '0',
+    justifyContent: 'space-between',
+    paddingY: '4',
+    paddingX: '8',
+    height: '56',
+    background: 'lightGray',
   }),
-  {
-    transform: 'translate(50%,-50%)',
-  },
 ])

src/components/NavigationTabs/index.tsx

@@ -23,7 +23,7 @@ const Tabs = styled.div`
 const StyledHistoryLink = styled(HistoryLink)<{ flex: string | undefined }>`
   flex: ${({ flex }) => flex ?? 'none'};
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     flex: none;
     margin-right: 10px;
   `};

src/components/Popover/index.tsx

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

src/components/Popups/PopupItem.tsx

@@ -1,3 +1,4 @@
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
 import { animated } from 'react-spring'
@@ -29,7 +30,7 @@ const Popup = styled.div`
   padding-right: 35px;
   overflow: hidden;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     min-width: 290px;
     &:not(:last-of-type) {
       margin-right: 20px;
@@ -57,6 +58,7 @@ 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
@@ -71,23 +73,24 @@ export default function PopupItem({
   }, [removeAfterMs, removeThisPopup])
 
   const theme = useTheme()
+  const faderStyle = useSpring({
+    from: { width: '100%' },
+    to: { width: '0%' },
+    config: { duration: removeAfterMs ?? undefined },
+  })
 
   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) {
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
   }
 
-  const faderStyle = useSpring({
-    from: { width: '100%' },
-    to: { width: '0%' },
-    config: { duration: removeAfterMs ?? undefined },
-  })
-
   return (
     <Popup>
       <StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />

src/components/Popups/SurveyPopup.tsx

@@ -7,7 +7,8 @@ import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
 import { useShowSurveyPopup } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
+import { ExternalLink, ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
 import BGImage from '../../assets/images/survey-orb.svg'
 
@@ -21,7 +22,7 @@ const Wrapper = styled(AutoColumn)`
   color: ${({ theme }) => theme.deprecated_text1};
   overflow: hidden;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     max-width: 100%;
   `}
 `

src/components/Popups/index.tsx

@@ -17,7 +17,7 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
   margin-bottom: ${({ height }) => (height ? '20px' : 0)};
 
   display: none;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: block;
     padding-top: 20px;
   `};
@@ -35,24 +35,24 @@ const MobilePopupInner = styled.div`
   }
 `
 
-const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${
-  MEDIA_WIDTHS.upToMedium + 500
+const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium + 1}px) and (max-width: ${
+  MEDIA_WIDTHS.deprecated_upToMedium + 500
 }px)`
 
 const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
   position: fixed;
-  top: ${({ extraPadding }) => (extraPadding ? '64px' : '56px')};
+  top: ${({ extraPadding }) => (extraPadding ? '72px' : '64px')};
   right: 1rem;
   max-width: 355px !important;
   width: 100%;
   z-index: 3;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
 
   ${StopOverflowQuery} {
-    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '64px' : extraPadding ? '64px' : '56px')};
+    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '72px' : extraPadding ? '72px' : '64px')};
   }
 `
 

src/components/PositionList/index.tsx

@@ -12,7 +12,7 @@ const DesktopHeader = styled.div`
   font-weight: 500;
   padding: 8px;
 
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -32,11 +32,11 @@ const MobileHeader = styled.div`
   justify-content: space-between;
   align-items: center;
 
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     display: none;
   }
 
-  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+  @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
     display: flex;
     flex-direction: column;
     align-items: start;
@@ -50,12 +50,12 @@ const ToggleWrap = styled.div`
 `
 
 const ToggleLabel = styled.div`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   margin-right: 10px;
 `
 
 const MobileTogglePosition = styled.div`
-  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+  @media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
     position: absolute;
     right: 20px;
   }

src/components/PositionListItem/index.tsx

@@ -48,11 +48,11 @@ const LinkRow = styled(Link)`
     background-color: ${({ theme }) => theme.deprecated_bg2};
   }
 
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
     /* flex-direction: row; */
   }
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     flex-direction: column;
     row-gap: 12px;
   `};
@@ -61,7 +61,7 @@ const LinkRow = styled(Link)`
 const BadgeText = styled.div`
   font-weight: 500;
   font-size: 14px;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 12px;
   `};
 `
@@ -78,7 +78,7 @@ const RangeLineItem = styled(DataLineItem)`
   margin-top: 4px;
   width: 100%;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
   background-color: ${({ theme }) => theme.deprecated_bg2};
     border-radius: 12px;
     padding: 8px 0;
@@ -88,7 +88,7 @@ const RangeLineItem = styled(DataLineItem)`
 const DoubleArrow = styled.span`
   margin: 0 2px;
   color: ${({ theme }) => theme.deprecated_text3};
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     margin: 4px;
     padding: 20px;
   `};
@@ -104,7 +104,7 @@ const ExtentsText = styled.span`
   color: ${({ theme }) => theme.deprecated_text3};
   font-size: 14px;
   margin-right: 4px;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
 `
@@ -122,7 +122,7 @@ const DataText = styled.div`
   font-weight: 600;
   font-size: 18px;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 14px;
   `};
 `

src/components/RoutingDiagram/RoutingDiagram.tsx

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

src/components/SearchModal/CommonBases.tsx

@@ -1,7 +1,7 @@
 import { Currency } from '@uniswap/sdk-core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
-import { getTokenAddress } from 'components/AmplitudeAnalytics/utils'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
+import { getTokenAddress } from 'analytics/utils'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { AutoRow } from 'components/Row'
@@ -13,7 +13,7 @@ import styled from 'styled-components/macro'
 import { currencyId } from 'utils/currencyId'
 
 const MobileWrapper = styled(AutoColumn)`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
 `

src/components/SearchModal/CurrencyList/index.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
-import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import { LightGreyCard } from 'components/Card'
 import QuestionHelper from 'components/QuestionHelper'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
@@ -128,7 +128,7 @@ function CurrencyRow({
   eventProperties,
 }: {
   currency: Currency
-  onSelect: () => void
+  onSelect: (hasWarning: boolean) => void
   isSelected: boolean
   otherSelected: boolean
   style: CSSProperties
@@ -159,13 +159,13 @@ function CurrencyRow({
         redesignFlag={redesignFlagEnabled}
         style={style}
         className={`token-item-${key}`}
-        onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect() : null)}
-        onClick={() => (isSelected ? null : onSelect())}
+        onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect(!!warning) : null)}
+        onClick={() => (isSelected ? null : onSelect(!!warning))}
         disabled={isSelected}
         selected={otherSelected}
       >
         <Column>
-          <CurrencyLogo currency={currency} size={'24px'} />
+          <CurrencyLogo currency={currency} size={'36px'} />
         </Column>
         <AutoColumn>
           <Row>
@@ -279,7 +279,7 @@ export default function CurrencyList({
   currencies: Currency[]
   otherListTokens?: WrappedTokenInfo[]
   selectedCurrency?: Currency | null
-  onCurrencySelect: (currency: Currency) => void
+  onCurrencySelect: (currency: Currency, hasWarning?: boolean) => void
   otherCurrency?: Currency | null
   fixedListRef?: MutableRefObject<FixedSizeList | undefined>
   showImportView: () => void
@@ -308,7 +308,7 @@ export default function CurrencyList({
 
       const isSelected = Boolean(currency && selectedCurrency && selectedCurrency.equals(currency))
       const otherSelected = Boolean(currency && otherCurrency && otherCurrency.equals(currency))
-      const handleSelect = () => currency && onCurrencySelect(currency)
+      const handleSelect = (hasWarning: boolean) => currency && onCurrencySelect(currency, hasWarning)
 
       const token = currency?.wrapped
 

src/components/SearchModal/CurrencySearch.tsx

@@ -2,8 +2,8 @@
 import { t, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { EventName, ModalName } from 'components/AmplitudeAnalytics/constants'
-import { Trace } from 'components/AmplitudeAnalytics/Trace'
+import { EventName, ModalName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
 import { sendEvent } from 'components/analytics'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useDebounce from 'hooks/useDebounce'
@@ -51,7 +51,7 @@ interface CurrencySearchProps {
   isOpen: boolean
   onDismiss: () => void
   selectedCurrency?: Currency | null
-  onCurrencySelect: (currency: Currency) => void
+  onCurrencySelect: (currency: Currency, hasWarning?: boolean) => void
   otherSelectedCurrency?: Currency | null
   showCommonBases?: boolean
   showCurrencyAmount?: boolean
@@ -136,9 +136,9 @@ export function CurrencySearch({
   }, [debouncedQuery, native, filteredSortedTokens])
 
   const handleCurrencySelect = useCallback(
-    (currency: Currency) => {
-      onCurrencySelect(currency)
-      onDismiss()
+    (currency: Currency, hasWarning?: boolean) => {
+      onCurrencySelect(currency, hasWarning)
+      if (!hasWarning) onDismiss()
     },
     [onDismiss, onCurrencySelect]
   )

src/components/SearchModal/CurrencySearchModal.tsx

@@ -3,10 +3,12 @@ import { TokenList } from '@uniswap/token-lists'
 import TokenSafety from 'components/TokenSafety'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import usePrevious from 'hooks/usePrevious'
-import { useCallback, useEffect, useState } from 'react'
+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'
@@ -29,9 +31,10 @@ export enum CurrencyModalView {
   manage,
   importToken,
   importList,
+  tokenSafety,
 }
 
-export default function CurrencySearchModal({
+export default memo(function CurrencySearchModal({
   isOpen,
   onDismiss,
   onCurrencySelect,
@@ -43,6 +46,7 @@ export default function CurrencySearchModal({
 }: CurrencySearchModalProps) {
   const [modalView, setModalView] = useState<CurrencyModalView>(CurrencyModalView.manage)
   const lastOpen = useLast(isOpen)
+  const userAddedTokens = useUserAddedTokens()
 
   useEffect(() => {
     if (isOpen && !lastOpen) {
@@ -50,12 +54,28 @@ export default function CurrencySearchModal({
     }
   }, [isOpen, lastOpen])
 
+  const showTokenSafetySpeedbump = (token: Token) => {
+    setWarningToken(token)
+    setModalView(CurrencyModalView.tokenSafety)
+  }
+
+  const tokenSafetyFlag = useTokenSafetyFlag()
+
   const handleCurrencySelect = useCallback(
-    (currency: Currency) => {
-      onCurrencySelect(currency)
-      onDismiss()
+    (currency: Currency, hasWarning?: boolean) => {
+      if (
+        tokenSafetyFlag === TokenSafetyVariant.Enabled &&
+        hasWarning &&
+        currency.isToken &&
+        !userAddedTokens.find((token) => token.equals(currency))
+      ) {
+        showTokenSafetySpeedbump(currency)
+      } else {
+        onCurrencySelect(currency)
+        onDismiss()
+      }
     },
-    [onDismiss, onCurrencySelect]
+    [onDismiss, onCurrencySelect, tokenSafetyFlag, userAddedTokens]
   )
 
   // for token import view
@@ -68,6 +88,9 @@ export default function CurrencySearchModal({
   const [importList, setImportList] = useState<TokenList | undefined>()
   const [listURL, setListUrl] = useState<string | undefined>()
 
+  // used for token safety
+  const [warningToken, setWarningToken] = useState<Token | undefined>()
+
   const showImportView = useCallback(() => setModalView(CurrencyModalView.importToken), [setModalView])
   const showManageView = useCallback(() => setModalView(CurrencyModalView.manage), [setModalView])
   const handleBackImport = useCallback(
@@ -75,13 +98,16 @@ export default function CurrencySearchModal({
     [setModalView, prevView]
   )
 
-  const tokenSafetyFlag = useTokenSafetyFlag()
-
+  const { height: windowHeight } = useWindowSize()
   // change min height if not searching
-  let minHeight: number | undefined = 80
+  let modalHeight: number | undefined = 80
   let content = null
   switch (modalView) {
     case CurrencyModalView.search:
+      if (windowHeight) {
+        // Converts pixel units to vh for Modal component
+        modalHeight = Math.min(Math.round((680 / windowHeight) * 100), 80)
+      }
       content = (
         <CurrencySearch
           isOpen={isOpen}
@@ -98,29 +124,38 @@ export default function CurrencySearchModal({
         />
       )
       break
+    case CurrencyModalView.tokenSafety:
+      modalHeight = undefined
+      if (tokenSafetyFlag === TokenSafetyVariant.Enabled && warningToken) {
+        content = (
+          <TokenSafety
+            tokenAddress={warningToken.address}
+            onContinue={() => handleCurrencySelect(warningToken)}
+            onCancel={() => setModalView(CurrencyModalView.search)}
+            showCancel={true}
+          />
+        )
+      }
+      break
     case CurrencyModalView.importToken:
       if (importToken) {
-        minHeight = undefined
-        content =
-          tokenSafetyFlag === TokenSafetyVariant.Enabled ? (
-            <TokenSafety
-              tokenAddress={importToken.address}
-              onContinue={() => handleCurrencySelect(importToken)}
-              onCancel={handleBackImport}
-            />
-          ) : (
-            <ImportToken
-              tokens={[importToken]}
-              onDismiss={onDismiss}
-              list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
-              onBack={handleBackImport}
-              handleCurrencySelect={handleCurrencySelect}
-            />
-          )
+        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:
-      minHeight = 40
+      modalHeight = 40
       if (importList && listURL) {
         content = <ImportList list={importList} listURL={listURL} onDismiss={onDismiss} setModalView={setModalView} />
       }
@@ -138,8 +173,8 @@ export default function CurrencySearchModal({
       break
   }
   return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={80} minHeight={minHeight}>
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={modalHeight} minHeight={modalHeight}>
       {content}
     </Modal>
   )
-}
+})

src/components/SearchModal/ImportToken.tsx

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

src/components/SearchModal/TokenImportCard.tsx

@@ -23,7 +23,7 @@ const AddressText = styled(ThemedText.DeprecatedBlue)`
   font-size: 12px;
   word-break: break-all;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     font-size: 10px;
   `}
 `

src/components/SearchModal/styleds.tsx

@@ -1,3 +1,4 @@
+import searchIcon from 'assets/svg/search.svg'
 import { LoadingRows as BaseLoadingRows } from 'components/Loader/styled'
 import styled from 'styled-components/macro'
 
@@ -37,14 +38,18 @@ export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
 `
 
 export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
+  background: no-repeat scroll 7px 7px;
+  background-image: url(${searchIcon});
+  background-size: 20px 20px;
+  background-position: 12px center;
   position: relative;
   display: flex;
   padding: 16px;
+  padding-left: 40px;
   height: ${({ redesignFlag }) => redesignFlag && '40px'};
   align-items: center;
   width: 100%;
   white-space: nowrap;
-  background: none;
   background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundModule};
   border: none;
   outline: none;
@@ -62,8 +67,9 @@ export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
   }
   transition: border 100ms;
   :focus {
-    border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary1)};
-    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.accentActionSoft};
+    border: 1px solid
+      ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActiveSoft : theme.deprecated_primary1)};
+    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
     outline: none;
   }
 `

src/components/Settings/index.tsx

@@ -99,7 +99,7 @@ const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
   z-index: 100;
   color: ${({ theme, redesignFlag }) => redesignFlag && theme.textPrimary};
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     min-width: 18.125rem;
   `};
 

src/components/SwitchLocaleLink/index.tsx

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

src/components/Toggle/index.tsx

@@ -6,13 +6,18 @@ import styled, { keyframes } from 'styled-components/macro'
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; redesignFlag: boolean }>`
   align-items: center;
   background: ${({ isActive, theme, redesignFlag }) =>
-    redesignFlag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
-  border: none;
+    redesignFlag && isActive
+      ? theme.accentActionSoft
+      : redesignFlag && !isActive
+      ? 'transparent'
+      : theme.deprecated_bg1};
+  border: ${({ redesignFlag, theme, isActive }) =>
+    redesignFlag && !isActive ? `1px solid ${theme.backgroundOutline}` : 'none'};
   border-radius: 20px;
   cursor: pointer;
   display: flex;
   outline: none;
-  padding: 0.4rem 0.4rem;
+  padding: ${({ redesignFlag }) => (redesignFlag ? '4px' : '0.4rem 0.4rem')};
   width: fit-content;
 `
 

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -8,7 +8,7 @@ import { ExternalLink } from 'theme'
 import { Color } from 'theme/styled'
 
 const Label = styled.div<{ color: Color }>`
-  width: 284px;
+  width: 100%;
   padding: 12px 20px;
   background-color: ${({ color }) => color + '1F'};
   border-radius: 16px;

src/components/TokenSafety/TokenSafetyModal.tsx

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

src/components/TokenSafety/index.tsx

@@ -4,14 +4,13 @@ import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import TokenSafetyLabel from 'components/TokenSafety/TokenSafetyLabel'
-import { checkWarning, getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning, WARNING_LEVEL } from 'constants/tokenSafety'
+import { checkWarning, getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
 import { useToken } from 'hooks/Tokens'
 import { ExternalLink as LinkIconFeather } from 'react-feather'
 import { Text } from 'rebass'
 import { useAddUserToken } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme'
-import { Color } from 'theme/styled'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 const Wrapper = styled.div`
@@ -46,61 +45,54 @@ const InfoText = styled(Text)`
   text-align: center;
 `
 
-const StyledButton = styled(ButtonPrimary)<{ buttonColor: Color; textColor: Color }>`
-  color: ${({ textColor }) => textColor};
-  background-color: ${({ buttonColor }) => buttonColor};
+const StyledButton = styled(ButtonPrimary)`
   margin-top: 24px;
   width: 100%;
-  :hover {
-    background-color: ${({ buttonColor, theme }) => buttonColor ?? theme.accentAction};
-  }
+  font-weight: 600;
 `
 
-const StyledCancelButton = styled(ButtonText)<{ color?: Color }>`
+const StyledCancelButton = styled(ButtonText)`
   margin-top: 16px;
-  color: ${({ color, theme }) => color ?? theme.accentAction};
+  color: ${({ theme }) => theme.textSecondary};
+  font-weight: 600;
+  font-size: 14px;
+`
+
+const StyledCloseButton = styled(StyledButton)`
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  color: ${({ theme }) => theme.textPrimary};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    opacity: ${({ theme }) => theme.opacity.hover};
+    transition: opacity 250ms ease;
+  }
 `
 
 const Buttons = ({
   warning,
   onContinue,
   onCancel,
+  onBlocked,
+  showCancel,
 }: {
   warning: Warning
   onContinue: () => void
   onCancel: () => void
+  onBlocked?: () => void
+  showCancel?: boolean
 }) => {
-  const theme = useTheme()
-  let textColor, buttonColor, cancelColor
-  switch (warning.level) {
-    case WARNING_LEVEL.MEDIUM:
-      textColor = theme.white
-      buttonColor = theme.accentAction
-      cancelColor = theme.accentAction
-      break
-    case WARNING_LEVEL.UNKNOWN:
-      textColor = theme.accentFailure
-      buttonColor = theme.accentFailureSoft
-      cancelColor = theme.textPrimary
-      break
-    case WARNING_LEVEL.BLOCKED:
-      textColor = theme.textPrimary
-      buttonColor = theme.backgroundInteractive
-      break
-  }
   return warning.canProceed ? (
     <>
-      <StyledButton buttonColor={buttonColor} textColor={textColor} onClick={onContinue}>
-        <Trans>I Understand</Trans>
+      <StyledButton onClick={onContinue}>
+        <Trans>I understand</Trans>
       </StyledButton>
-      <StyledCancelButton color={cancelColor} onClick={onCancel}>
-        Cancel
-      </StyledCancelButton>
+      {showCancel && <StyledCancelButton onClick={onCancel}>Cancel</StyledCancelButton>}
     </>
   ) : (
-    <StyledButton buttonColor={buttonColor} textColor={textColor} onClick={onCancel}>
+    <StyledCloseButton onClick={onBlocked ?? onCancel}>
       <Trans>Close</Trans>
-    </StyledButton>
+    </StyledCloseButton>
   )
 }
 
@@ -124,8 +116,8 @@ const ExplorerContainer = styled.div`
   height: 32px;
   margin-top: 10px;
   font-size: 20px;
-  background-color: ${({ theme }) => theme.accentActiveSoft};
-  color: ${({ theme }) => theme.accentActive};
+  background-color: ${({ theme }) => theme.accentActionSoft};
+  color: ${({ theme }) => theme.accentAction};
   border-radius: 8px;
   padding: 2px 12px;
   display: flex;
@@ -140,10 +132,10 @@ const ExplorerLinkWrapper = styled.div`
   cursor: pointer;
 
   :hover {
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
   :active {
-    opacity: 0.4;
+    opacity: ${({ theme }) => theme.opacity.click};
   }
 `
 
@@ -190,14 +182,27 @@ function ExplorerView({ token }: { token: Token }) {
   }
 }
 
-interface TokenSafetyProps {
+const StyledExternalLink = styled(ExternalLink)`
+  font-weight: 600;
+`
+
+export interface TokenSafetyProps {
   tokenAddress: string | null
   secondTokenAddress?: string
   onContinue: () => void
   onCancel: () => void
+  onBlocked?: () => void
+  showCancel?: boolean
 }
 
-export default function TokenSafety({ tokenAddress, secondTokenAddress, onContinue, onCancel }: TokenSafetyProps) {
+export default function TokenSafety({
+  tokenAddress,
+  secondTokenAddress,
+  onContinue,
+  onCancel,
+  onBlocked,
+  showCancel,
+}: TokenSafetyProps) {
   const logos = []
   const urls = []
 
@@ -254,13 +259,19 @@ export default function TokenSafety({ tokenAddress, secondTokenAddress, onContin
           <ShortColumn>
             <InfoText>
               {description}{' '}
-              <ExternalLink href={TOKEN_SAFETY_ARTICLE}>
-                <Trans>Learn More</Trans>
-              </ExternalLink>
+              <StyledExternalLink href={TOKEN_SAFETY_ARTICLE}>
+                <Trans>Learn more</Trans>
+              </StyledExternalLink>
             </InfoText>
           </ShortColumn>
           <LinkColumn>{urls}</LinkColumn>
-          <Buttons warning={displayWarning} onContinue={acknowledge} onCancel={onCancel} />
+          <Buttons
+            warning={displayWarning}
+            onContinue={acknowledge}
+            onCancel={onCancel}
+            onBlocked={onBlocked}
+            showCancel={showCancel}
+          />
         </Container>
       </Wrapper>
     )

src/components/Tokens/TokenDetails/About.tsx

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

src/components/Tokens/TokenDetails/AddressSection.tsx

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

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,12 +1,12 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { getChainInfoOrDefault } from 'constants/chainInfo'
+import { formatToDecimal } from 'analytics/utils'
 import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
+import { useStablecoinValue } from 'hooks/useStablecoinPrice'
+import { useTokenBalance } from 'lib/hooks/useCurrencyBalance'
 import { AlertTriangle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import NetworkBalance from './NetworkBalance'
+import styled from 'styled-components/macro'
 
 const BalancesCard = styled.div`
   width: 100%;
@@ -15,7 +15,9 @@ const BalancesCard = styled.div`
   font-size: 12px;
   line-height: 16px;
   padding: 20px;
+  box-shadow: ${({ theme }) => theme.shallowShadow};
   background-color: ${({ theme }) => theme.backgroundSurface};
+  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   border-radius: 16px;
 `
 const ErrorState = styled.div`
@@ -31,14 +33,9 @@ const ErrorText = styled.span`
   display: flex;
   flex-wrap: wrap;
 `
-const NetworkBalancesSection = styled.div`
-  height: fit-content;
-`
+
 const TotalBalanceSection = styled.div`
   height: fit-content;
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
-  margin-bottom: 20px;
-  padding-bottom: 20px;
 `
 const TotalBalance = styled.div`
   display: flex;
@@ -52,58 +49,35 @@ const TotalBalanceItem = styled.div`
   display: flex;
 `
 
-export default function BalanceSummary({
-  address,
-  networkBalances,
-  totalBalance,
-}: {
-  address: string
-  networkBalances: (JSX.Element | null)[] | null
-  totalBalance: number
-}) {
-  const theme = useTheme()
-  const tokenSymbol = useToken(address)?.symbol
-  const { loading, error, data } = useNetworkTokenBalances({ address })
+export default function BalanceSummary({ address }: { address: string }) {
+  const token = useToken(address)
+  const { loading, error } = useNetworkTokenBalances({ address })
 
-  const { chainId: connectedChainId } = useWeb3React()
+  const { account } = useWeb3React()
+  const balance = useTokenBalance(account, token ?? undefined)
+  const balanceNumber = balance ? formatToDecimal(balance, Math.min(balance.currency.decimals, 6)) : undefined
+  const balanceUsd = useStablecoinValue(balance)?.toFixed(2)
+  const balanceUsdNumber = balanceUsd ? parseFloat(balanceUsd) : undefined
 
-  const { label: connectedLabel, logoUrl: connectedLogoUrl } = getChainInfoOrDefault(connectedChainId)
-  const connectedFiatValue = 1
-  const multipleBalances = true // for testing purposes
-
-  if (loading) return null
+  if (loading || (!error && !balanceNumber && !balanceUsdNumber)) return null
   return (
     <BalancesCard>
       {error ? (
         <ErrorState>
           <AlertTriangle size={24} />
           <ErrorText>
-            <Trans>There was an error loading your {tokenSymbol} balance</Trans>
+            <Trans>There was an error loading your {token?.symbol} balance</Trans>
           </ErrorText>
         </ErrorState>
-      ) : multipleBalances ? (
-        <>
-          <TotalBalanceSection>
-            Your balance across all networks
-            <TotalBalance>
-              <TotalBalanceItem>{`${totalBalance} ${tokenSymbol}`}</TotalBalanceItem>
-              <TotalBalanceItem>$4,210.12</TotalBalanceItem>
-            </TotalBalance>
-          </TotalBalanceSection>
-          <NetworkBalancesSection>Your balances by network</NetworkBalancesSection>
-          {data && networkBalances}
-        </>
       ) : (
         <>
-          Your balance on {connectedLabel}
-          <NetworkBalance
-            logoUrl={connectedLogoUrl}
-            balance={'1'}
-            tokenSymbol={tokenSymbol ?? 'XXX'}
-            fiatValue={connectedFiatValue}
-            label={connectedLabel}
-            networkColor={theme.textPrimary}
-          />
+          <TotalBalanceSection>
+            Your balance
+            <TotalBalance>
+              <TotalBalanceItem>{`${balanceNumber} ${token?.symbol}`}</TotalBalanceItem>
+              <TotalBalanceItem>{`$${balanceUsdNumber}`}</TotalBalanceItem>
+            </TotalBalance>
+          </TotalBalanceSection>
         </>
       )}
     </BalancesCard>

src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx

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