fix: don't track balances/values (#4539)

* Modify line curve on token price chart to fix inconsistency on steep drops/increases and glyph placement

* Make curve required on LineChart

* Add curve to SparkLine chart

* Remove dependency: d3-curve-circlecornders - no longer used

* Drop d3-curve-circlecorner from react-app-env

Co-authored-by: gbugyis <greg@bugyis.com>

.env

@@ -1,2 +1,7 @@
 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"

.env.production

@@ -1,4 +1,5 @@
-REACT_APP_AMPLITUDE_KEY="1c694b28cd089acc2c386d518f93a775"
+REACT_APP_AMPLITUDE_KEY="b8f7dabddb1c3b03b394619767972160"
+REACT_APP_AMPLITUDE_TEST_KEY="1c694b28cd089acc2c386d518f93a775"
 REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"

.eslintrc.json

@@ -18,7 +18,6 @@
     "src/abis/types",
     "src/locales/**/*.js",
     "src/locales/**/en-US.po",
-    "src/state/data/generated.ts",
     "node_modules",
     "coverage",
     "build",

.gitignore

@@ -1,12 +1,15 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+
 # generated contract types
 /src/types/v3
 /src/abis/types
 /src/locales/**/*.js
 /src/locales/**/en-US.po
 /src/locales/**/pseudo.po
-/src/state/data/generated.ts
+
+# generated graphql types
+__generated__/
 
 # dependencies
 /node_modules
@@ -39,3 +42,4 @@ package-lock.json
 cypress/videos
 cypress/screenshots
 
+.vercel

.npmrc

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

.prettierignore

@@ -1 +1 @@
-/src/state/data/generated.ts
+/src/schema/schema.graphql

codegen.yml

@@ -1,11 +1,6 @@
 overrideExisting: true
 schema: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
-documents: 'src/**/!(*.d).{ts,tsx}'
 generates:
-  ./src/state/data/generated.ts:
+  ./src/graphql/thegraph/schema/schema.graphql:
     plugins:
-      - typescript
-      - typescript-operations
-      - typescript-rtk-query:
-          importBaseApiFrom: './slice'
-          exportHooks: true
+      - schema-ast

craco.config.cjs

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+  babel: {
+    plugins: ['@vanilla-extract/babel-plugin'],
+  },
+  webpack: {
+    plugins: [new VanillaExtractPlugin()],
+    configure: (webpackConfig) => {
+      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
+        (plugin) => plugin instanceof MiniCssExtractPlugin
+      )
+      if (instanceOfMiniCssExtractPlugin !== undefined) instanceOfMiniCssExtractPlugin.options.ignoreOrder = true
+      return webpackConfig
+    },
+  },
+}

cypress/e2e/add-liquidity.test.ts

@@ -37,8 +37,8 @@ describe('Add Liquidity', () => {
   it('loads fee tier distribution', () => {
     cy.fixture('feeTierDistribution.json').then((feeTierDistribution) => {
       cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req: CyHttpMessages.IncomingHttpRequest) => {
-        if (hasQuery(req, 'feeTierDistribution')) {
-          req.alias = 'feeTierDistributionQuery'
+        if (hasQuery(req, 'FeeTierDistributionQuery')) {
+          req.alias = 'FeeTierDistributionQuery'
 
           req.reply({
             body: {
@@ -55,7 +55,7 @@ describe('Add Liquidity', () => {
 
       cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
 
-      cy.wait('@feeTierDistributionQuery')
+      cy.wait('@FeeTierDistributionQuery')
 
       cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
       cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40%')

cypress/e2e/swap.test.ts

@@ -7,7 +7,7 @@ describe('Swap', () => {
     cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
     cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'ETH')
     cy.get('#swap-currency-output .token-amount-input').should('not.have.value')
-    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'Select a token')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'Select token')
   })
 
   it('can enter an amount into input', () => {

cypress/support/e2e.ts

@@ -35,6 +35,7 @@ Cypress.Commands.overwrite(
         onBeforeLoad(win) {
           options?.onBeforeLoad?.(win)
           win.localStorage.clear()
+          win.localStorage.setItem('redux_localstorage_simple_user', '{"selectedWallet":"INJECTED"}')
           win.ethereum = injected
         },
       })

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,19 +8,23 @@
     "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",
-    "graphql:generate": "graphql-codegen --config codegen.yml",
+    "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",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
     "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "craco start",
+    "build": "craco build",
     "serve": "serve build -l 3000",
     "lint": "yarn eslint .",
-    "test": "react-scripts test --coverage",
+    "test": "craco test --coverage",
     "cypress:open": "cypress open --browser chrome --e2e",
-    "cypress:run": "cypress run --browser chrome --e2e"
+    "cypress:run": "cypress run --browser chrome --e2e",
+    "postinstall": "patch-package"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -55,11 +59,8 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "6.4.3",
     "@ethersproject/experimental": "^5.4.0",
-    "@graphql-codegen/cli": "1.21.5",
-    "@graphql-codegen/typescript": "1.22.3",
-    "@graphql-codegen/typescript-operations": "^1.18.2",
-    "@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",
@@ -85,9 +86,13 @@
     "@types/styled-components": "^5.1.25",
     "@types/testing-library__cypress": "^5.0.5",
     "@types/ua-parser-js": "^0.7.35",
+    "@types/uuid": "^8.3.4",
     "@types/wcag-contrast": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4",
     "@typescript-eslint/parser": "^4",
+    "@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",
@@ -100,34 +105,39 @@
     "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",
     "serve": "^11.3.2",
     "typechain": "^5.0.0",
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^0.5.1",
-    "@amplitude/experiment-js-client": "^1.5.4",
+    "@amplitude/analytics-browser": "^1.1.4",
     "@coinbase/wallet-sdk": "^3.3.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
+    "@looksrare/sdk": "^0.7.1",
     "@metamask/jazzicon": "^2.0.0",
+    "@opensea/seaport-js": "^1.0.2",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@types/react-relay": "^13.0.2",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/redux-multicall": "^1.1.5",
-    "@uniswap/router-sdk": "^1.0.6",
+    "@uniswap/router-sdk": "^1.3.0",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.8.2",
+    "@uniswap/smart-order-router": "^2.9.2",
     "@uniswap/token-lists": "^1.0.0-beta.30",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
@@ -135,6 +145,11 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
+    "@uniswap/widgets": "^2.3.1",
+    "@vanilla-extract/css": "^1.7.2",
+    "@vanilla-extract/css-utils": "^0.1.2",
+    "@vanilla-extract/dynamic": "^2.0.2",
+    "@vanilla-extract/sprinkles": "^1.4.1",
     "@visx/axis": "^2.12.2",
     "@visx/event": "^2.6.0",
     "@visx/glyph": "^2.10.0",
@@ -155,14 +170,16 @@
     "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",
-    "fortmatic": "^2.4.0",
-    "graphql": "^15.5.0",
+    "focus-visible": "^5.2.0",
+    "get-graphql-schema": "^2.1.2",
+    "graphql": "^16.5.0",
     "graphql-request": "^3.4.0",
     "immer": "^9.0.6",
     "inter-ui": "^3.13.1",
@@ -182,12 +199,16 @@
     "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",
+    "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
+    "react-relay": "^14.1.0",
     "react-router-dom": "^6.3.0",
     "react-spring": "^8.0.27",
+    "react-table": "^7.8.0",
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
@@ -200,11 +221,19 @@
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "use-resize-observer": "^9.0.2",
+    "uuid": "^8.3.2",
+    "video-extensions": "^1.2.0",
     "wcag-contrast": "^3.0.0",
     "web-vitals": "^2.1.0",
     "workbox-core": "^6.1.0",
     "workbox-navigation-preload": "^6.1.0",
     "workbox-precaching": "^6.1.0",
-    "workbox-routing": "^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/abis/erc1155.json

@@ -1,15 +1,143 @@
 [
   {
-    "constant": true,
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "uri_",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "ApprovalForAll",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256[]",
+        "name": "ids",
+        "type": "uint256[]"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256[]",
+        "name": "values",
+        "type": "uint256[]"
+      }
+    ],
+    "name": "TransferBatch",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "id",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "TransferSingle",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "id",
+        "type": "uint256"
+      }
+    ],
+    "name": "URI",
+    "type": "event"
+  },
+  {
     "inputs": [
       {
         "internalType": "address",
-        "name": "_owner",
+        "name": "account",
         "type": "address"
       },
       {
         "internalType": "uint256",
-        "name": "_id",
+        "name": "id",
         "type": "uint256"
       }
     ],
@@ -21,16 +149,165 @@
         "type": "uint256"
       }
     ],
-    "payable": false,
     "stateMutability": "view",
     "type": "function"
   },
   {
-    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address[]",
+        "name": "accounts",
+        "type": "address[]"
+      },
+      {
+        "internalType": "uint256[]",
+        "name": "ids",
+        "type": "uint256[]"
+      }
+    ],
+    "name": "balanceOfBatch",
+    "outputs": [
+      {
+        "internalType": "uint256[]",
+        "name": "",
+        "type": "uint256[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      }
+    ],
+    "name": "isApprovedForAll",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256[]",
+        "name": "ids",
+        "type": "uint256[]"
+      },
+      {
+        "internalType": "uint256[]",
+        "name": "amounts",
+        "type": "uint256[]"
+      },
+      {
+        "internalType": "bytes",
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "name": "safeBatchTransferFrom",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "id",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes",
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "setApprovalForAll",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "bytes4",
+        "name": "interfaceId",
+        "type": "bytes4"
+      }
+    ],
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
     "inputs": [
       {
         "internalType": "uint256",
-        "name": "_id",
+        "name": "",
         "type": "uint256"
       }
     ],
@@ -42,7 +319,6 @@
         "type": "string"
       }
     ],
-    "payable": false,
     "stateMutability": "view",
     "type": "function"
   }

src/abis/erc721.json

@@ -1,5 +1,320 @@
 [
   {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "punkContract",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "approved",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "ApprovalForAll",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "Paused",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "user",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "proxy",
+        "type": "address"
+      }
+    ],
+    "name": "ProxyRegistered",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "Unpaused",
+    "type": "event"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "baseURI",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "punkIndex",
+        "type": "uint256"
+      }
+    ],
+    "name": "burn",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "getApproved",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
+      }
+    ],
+    "name": "isApprovedForAll",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "punkIndex",
+        "type": "uint256"
+      }
+    ],
+    "name": "mint",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
     "inputs": [
       {
         "internalType": "uint256",
@@ -15,10 +330,263 @@
         "type": "address"
       }
     ],
+    "payable": false,
     "stateMutability": "view",
     "type": "function"
   },
   {
+    "constant": false,
+    "inputs": [],
+    "name": "pause",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "paused",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "user",
+        "type": "address"
+      }
+    ],
+    "name": "proxyInfo",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "punkContract",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "registerProxy",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes",
+        "name": "_data",
+        "type": "bytes"
+      }
+    ],
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
+      }
+    ],
+    "name": "setApprovalForAll",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "baseUri",
+        "type": "string"
+      }
+    ],
+    "name": "setBaseURI",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "bytes4",
+        "name": "interfaceId",
+        "type": "bytes4"
+      }
+    ],
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "index",
+        "type": "uint256"
+      }
+    ],
+    "name": "tokenByIndex",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "index",
+        "type": "uint256"
+      }
+    ],
+    "name": "tokenOfOwnerByIndex",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
     "inputs": [
       {
         "internalType": "uint256",
@@ -34,7 +602,72 @@
         "type": "string"
       }
     ],
+    "payable": false,
     "stateMutability": "view",
     "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "unpause",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
   }
 ]

src/assets/svg/share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#fff">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"/>
+</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/Copy.tsx

@@ -1,64 +0,0 @@
-import { Trans } from '@lingui/macro'
-import useCopyClipboard from 'hooks/useCopyClipboard'
-import React, { useCallback } from 'react'
-import { CheckCircle, Copy } from 'react-feather'
-import styled from 'styled-components/macro'
-import { LinkStyledButton } from 'theme'
-
-const CopyIcon = styled(LinkStyledButton)`
-  color: ${({ color, theme }) => color || theme.accentAction};
-  flex-shrink: 0;
-  display: flex;
-  text-decoration: none;
-  :hover,
-  :active,
-  :focus {
-    text-decoration: none;
-    color: ${({ color, theme }) => color || theme.accentAction};
-  }
-`
-const StyledText = styled.span`
-  margin-left: 0.25rem;
-  ${({ theme }) => theme.flexRowNoWrap};
-  align-items: center;
-`
-
-const Copied = ({ iconSize }: { iconSize?: number }) => (
-  <StyledText>
-    <CheckCircle size={iconSize ?? '16'} />
-    <StyledText>
-      <Trans>Copied</Trans>
-    </StyledText>
-  </StyledText>
-)
-
-const Icon = ({ iconSize }: { iconSize?: number }) => (
-  <StyledText>
-    <Copy size={iconSize ?? '16'} />
-  </StyledText>
-)
-
-interface BaseProps {
-  toCopy: string
-  color?: string
-  iconSize?: number
-  iconPosition?: 'left' | 'right'
-}
-export type CopyHelperProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
-
-export default function CopyHelper({ color, toCopy, children, iconSize, iconPosition }: CopyHelperProps) {
-  const [isCopied, setCopied] = useCopyClipboard()
-  const copy = useCallback(() => {
-    setCopied(toCopy)
-  }, [toCopy, setCopied])
-
-  return (
-    <CopyIcon onClick={copy} color={color}>
-      {iconPosition === 'left' ? isCopied ? <Copied iconSize={iconSize} /> : <Icon iconSize={iconSize} /> : null}
-      {iconPosition === 'left' && <>&nbsp;</>}
-      {isCopied ? '' : children}
-      {iconPosition === 'right' && <>&nbsp;</>}
-      {iconPosition === 'right' ? isCopied ? <Copied iconSize={iconSize} /> : <Icon iconSize={iconSize} /> : null}
-    </CopyIcon>
-  )
-}

src/components/AccountDetails/index.tsx

@@ -1,19 +1,17 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import CopyHelper from 'components/AccountDetails/Copy'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils'
-import { Context, useCallback, useContext } from 'react'
+import { useCallback } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import { removeConnectedWallet } from 'state/wallets/reducer'
-import { DefaultTheme } from 'styled-components/macro'
-import styled, { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { clearAllTransactions } from '../../state/transactions/reducer'
-import { ExternalLink, LinkStyledButton, ThemedText } from '../../theme'
+import { CopyHelper, ExternalLink, LinkStyledButton, ThemedText } from '../../theme'
 import { shortenAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonSecondary } from '../Button'
@@ -26,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;
   `};
 `
@@ -76,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`
@@ -129,12 +127,13 @@ const AccountControl = styled.div`
   }
 `
 
-const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>`
-  font-size: 0.825rem;
+const AddressLink = styled(ExternalLink)`
   color: ${({ theme }) => theme.deprecated_text3};
   margin-left: 1rem;
   font-size: 0.825rem;
   display: flex;
+  gap: 6px;
+  text-decoration: none !important;
   :hover {
     color: ${({ theme }) => theme.deprecated_text2};
   }
@@ -207,7 +206,7 @@ export default function AccountDetails({
   const { chainId, account, connector } = useWeb3React()
   const connectionType = getConnection(connector).type
 
-  const theme = useContext(ThemeContext as Context<DefaultTheme>)
+  const theme = useTheme()
   const dispatch = useAppDispatch()
 
   const isMetaMask = getIsMetaMask()
@@ -281,59 +280,21 @@ export default function AccountDetails({
                 </AccountControl>
               </AccountGroupingRow>
               <AccountGroupingRow>
-                {ENSName ? (
-                  <>
-                    <AccountControl>
-                      <div>
-                        {account && (
-                          <CopyHelper toCopy={account} iconPosition="left">
-                            <span style={{ marginLeft: '4px' }}>
-                              <Trans>Copy Address</Trans>
-                            </span>
-                          </CopyHelper>
-                        )}
-                        {chainId && account && (
-                          <AddressLink
-                            hasENS={!!ENSName}
-                            isENS={true}
-                            href={getExplorerLink(chainId, ENSName, ExplorerDataType.ADDRESS)}
-                          >
-                            <LinkIcon size={16} />
-                            <span style={{ marginLeft: '4px' }}>
-                              <Trans>View on Explorer</Trans>
-                            </span>
-                          </AddressLink>
-                        )}
-                      </div>
-                    </AccountControl>
-                  </>
-                ) : (
-                  <>
-                    <AccountControl>
-                      <div>
-                        {account && (
-                          <CopyHelper toCopy={account} iconPosition="left">
-                            <span style={{ marginLeft: '4px' }}>
-                              <Trans>Copy Address</Trans>
-                            </span>
-                          </CopyHelper>
-                        )}
-                        {chainId && account && (
-                          <AddressLink
-                            hasENS={!!ENSName}
-                            isENS={false}
-                            href={getExplorerLink(chainId, account, ExplorerDataType.ADDRESS)}
-                          >
-                            <LinkIcon size={16} />
-                            <span style={{ marginLeft: '4px' }}>
-                              <Trans>View on Explorer</Trans>
-                            </span>
-                          </AddressLink>
-                        )}
-                      </div>
-                    </AccountControl>
-                  </>
-                )}
+                <AccountControl>
+                  <div>
+                    {account && (
+                      <CopyHelper toCopy={account} gap={6} iconSize={16} fontSize={14}>
+                        <Trans>Copy Address</Trans>
+                      </CopyHelper>
+                    )}
+                    {chainId && account && (
+                      <AddressLink href={getExplorerLink(chainId, ENSName ?? account, ExplorerDataType.ADDRESS)}>
+                        <LinkIcon size={16} />
+                        <Trans>View on Explorer</Trans>
+                      </AddressLink>
+                    )}
+                  </div>
+                </AccountControl>
               </AccountGroupingRow>
             </InfoCard>
           </YourAccount>

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

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { ChangeEvent, Context, ReactNode, useCallback, useContext } from 'react'
-import styled, { DefaultTheme, ThemeContext } from 'styled-components/macro'
+import { ChangeEvent, ReactNode, useCallback } from 'react'
+import styled, { useTheme } from 'styled-components/macro'
 
 import useENS from '../../hooks/useENS'
 import { ExternalLink, ThemedText } from '../../theme'
@@ -87,7 +87,7 @@ export default function AddressInputPanel({
   onChange: (value: string) => void
 }) {
   const { chainId } = useWeb3React()
-  const theme = useContext(ThemeContext as Context<DefaultTheme>)
+  const theme = useTheme()
 
   const { address, loading, name } = useENS(value)
 

src/components/AmplitudeAnalytics/constants.ts

@@ -23,6 +23,7 @@ export enum EventName {
   TOKEN_SELECTOR_OPENED = 'Token Selector Opened',
   WALLET_CONNECT_TXN_COMPLETED = 'Wallet Connect Transaction Completed',
   WALLET_SELECTED = 'Wallet Selected',
+  WEB_VITALS = 'Web Vitals',
   WRAP_TOKEN_TXN_SUBMITTED = 'Wrap Token Transaction Submitted',
   // alphabetize additional event names.
 }
@@ -36,16 +37,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',
@@ -74,7 +68,7 @@ export enum SWAP_PRICE_UPDATE_USER_RESPONSE {
  * Known pages in the app. Highest order context.
  */
 export enum PageName {
-  EXPLORE_PAGE = 'explore-page',
+  TOKENS_PAGE = 'tokens-page',
   POOL_PAGE = 'pool-page',
   SWAP_PAGE = 'swap-page',
   VOTE_PAGE = 'vote-page',

src/components/AmplitudeAnalytics/index.ts

@@ -1,5 +1,5 @@
 import { Identify, identify, init, track } from '@amplitude/analytics-browser'
-import { isDevelopmentEnv } from 'utils/env'
+import { isProductionEnv } from 'utils/env'
 
 /**
  * Initializes Amplitude with API key for project.
@@ -8,21 +8,19 @@ import { isDevelopmentEnv } from 'utils/env'
  * member of the organization on Amplitude to view details.
  */
 export function initializeAnalytics() {
-  if (isDevelopmentEnv()) return
+  const API_KEY = isProductionEnv() ? process.env.REACT_APP_AMPLITUDE_KEY : process.env.REACT_APP_AMPLITUDE_TEST_KEY
 
-  const API_KEY = process.env.REACT_APP_AMPLITUDE_KEY
   if (typeof API_KEY === 'undefined') {
-    throw new Error(`REACT_APP_AMPLITUDE_KEY must be a defined environment variable`)
+    const keyName = isProductionEnv() ? 'REACT_APP_AMPLITUDE_KEY' : 'REACT_APP_AMPLITUDE_TEST_KEY'
+    console.error(`${keyName} is undefined, Amplitude analytics will not run.`)
+    return
   }
 
   init(
     API_KEY,
     /* userId= */ undefined, // User ID should be undefined to let Amplitude default to Device ID
-    /* options= */ {
-      // See documentation: https://www.docs.developers.amplitude.com/data/sdks/javascript/#track-referrers
-      includeReferrer: true,
-      // See documentation: https://www.docs.developers.amplitude.com/data/sdks/javascript/#track-utm-parameters
-      includeUtm: true,
+    /* options= */
+    {
       // Disable tracking of private user information by Amplitude
       trackingOptions: {
         ipAddress: false,
@@ -35,9 +33,9 @@ export function initializeAnalytics() {
   )
 }
 
-/** Sends an event to Amplitude. */
+/** Sends an approved (finalized) event to Amplitude production project. */
 export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<string, unknown>) {
-  if (isDevelopmentEnv()) {
+  if (!isProductionEnv()) {
     console.log(`[amplitude(${eventName})]: ${JSON.stringify(eventProperties)}`)
     return
   }
@@ -45,6 +43,13 @@ export function sendAnalyticsEvent(eventName: string, eventProperties?: Record<s
   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[]
 
 /**
@@ -60,7 +65,7 @@ class UserModel {
   }
 
   private call(mutate: (event: Identify) => Identify) {
-    if (isDevelopmentEnv()) {
+    if (!isProductionEnv()) {
       const log = (_: Identify, method: string) => this.log.bind(this, method)
       mutate(new Proxy(new Identify(), { get: log }))
       return

src/components/Button/index.tsx

@@ -1,8 +1,7 @@
-import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
 import { Check, ChevronDown } from 'react-feather'
 import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { RowBetween } from '../Row'
 
@@ -51,9 +50,12 @@ export const BaseButton = styled(RebassButton)<
   }
 `
 
-export const ButtonPrimary = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_primary1};
-  color: white;
+export const ButtonPrimary = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
+  font-size: ${({ redesignFlag }) => redesignFlag && '20px'};
+  font-weight: ${({ redesignFlag }) => redesignFlag && '600'};
+  padding: ${({ redesignFlag }) => redesignFlag && '16px'};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentTextLightPrimary : 'white')};
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
     background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
@@ -77,27 +79,35 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
-export const ButtonLight = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.deprecated_primaryText1};
-  font-size: 16px;
-  font-weight: 500;
+export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActionSoft : theme.deprecated_primary5)};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primaryText1)};
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '16px')};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, redesignFlag }) =>
+        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, redesignFlag }) =>
+      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    background-color: ${({ theme, disabled, redesignFlag }) =>
+      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, redesignFlag }) =>
+        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, redesignFlag }) =>
+      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
   }
   :disabled {
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme }) => theme.deprecated_primary5};
+      background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary5)};
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;
@@ -166,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

@@ -0,0 +1,52 @@
+import { Group } from '@visx/group'
+import { LinePath } from '@visx/shape'
+import { CurveFactory } from 'd3'
+import React from 'react'
+import { ReactNode } from 'react'
+import { useTheme } from 'styled-components/macro'
+import { Color } from 'theme/styled'
+
+interface LineChartProps<T> {
+  data: T[]
+  getX: (t: T) => number
+  getY: (t: T) => number
+  marginTop?: number
+  curve: CurveFactory
+  color?: Color
+  strokeWidth: number
+  children?: ReactNode
+  width: number
+  height: number
+}
+
+function LineChart<T>({
+  data,
+  getX,
+  getY,
+  marginTop,
+  curve,
+  color,
+  strokeWidth,
+  width,
+  height,
+  children,
+}: LineChartProps<T>) {
+  const theme = useTheme()
+  return (
+    <svg width={width} height={height}>
+      <Group top={marginTop}>
+        <LinePath
+          curve={curve}
+          stroke={color ?? theme.accentAction}
+          strokeWidth={strokeWidth}
+          data={data}
+          x={getX}
+          y={getY}
+        />
+      </Group>
+      {children}
+    </svg>
+  )
+}
+
+export default React.memo(LineChart) as typeof LineChart

src/components/Charts/PriceChart.tsx

@@ -1,291 +0,0 @@
-import { AxisBottom, TickFormatter } from '@visx/axis'
-import { localPoint } from '@visx/event'
-import { EventType } from '@visx/event/lib/types'
-import { GlyphCircle } from '@visx/glyph'
-import { Group } from '@visx/group'
-import { Line, LinePath } from '@visx/shape'
-import { bisect, curveBasis, NumberValue, scaleLinear } from 'd3'
-import { radius } from 'd3-curve-circlecorners'
-import { useActiveLocale } from 'hooks/useActiveLocale'
-import useTheme from 'hooks/useTheme'
-import { TimePeriod } from 'hooks/useTopTokens'
-import { useCallback, useState } from 'react'
-import { ArrowDownRight, ArrowUpRight } from 'react-feather'
-import styled from 'styled-components/macro'
-import {
-  dayHourFormatter,
-  hourFormatter,
-  monthDayFormatter,
-  monthFormatter,
-  monthYearDayFormatter,
-  monthYearFormatter,
-  weekFormatter,
-} from 'utils/formatChartTimes'
-
-import data from './data.json'
-
-const TIME_DISPLAYS: [TimePeriod, string][] = [
-  [TimePeriod.hour, '1H'],
-  [TimePeriod.day, '1D'],
-  [TimePeriod.week, '1W'],
-  [TimePeriod.month, '1M'],
-  [TimePeriod.year, '1Y'],
-  [TimePeriod.all, 'ALL'],
-]
-
-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]
-}
-
-const StyledUpArrow = styled(ArrowUpRight)`
-  color: ${({ theme }) => theme.accentSuccess};
-`
-const StyledDownArrow = styled(ArrowDownRight)`
-  color: ${({ theme }) => theme.accentFailure};
-`
-
-function getDelta(start: number, current: number) {
-  const delta = (current / start - 1) * 100
-  const isPositive = Math.sign(delta) > 0
-
-  const formattedDelta = delta.toFixed(2) + '%'
-  if (isPositive) {
-    return ['+' + formattedDelta, <StyledUpArrow size={16} key="arrow-up" />]
-  } else if (delta === 0) {
-    return [formattedDelta, null]
-  }
-  return [formattedDelta, <StyledDownArrow size={16} key="arrow-down" />]
-}
-
-export const ChartWrapper = styled.div`
-  position: relative;
-  overflow: visible;
-`
-
-export const ChartHeader = styled.div`
-  position: absolute;
-`
-
-export const TokenPrice = styled.span`
-  font-size: 36px;
-  line-height: 44px;
-`
-export const DeltaContainer = styled.div`
-  height: 16px;
-  display: flex;
-  align-items: center;
-`
-const ArrowCell = styled.div`
-  padding-left: 2px;
-  display: flex;
-`
-export const TimeOptionsContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 4px;
-  gap: 4px;
-`
-const TimeButton = styled.button<{ active: boolean }>`
-  background-color: ${({ theme, active }) => (active ? theme.accentActive : 'transparent')};
-  font-size: 14px;
-  width: 36px;
-  height: 36px;
-  border-radius: 12px;
-  border: none;
-  cursor: pointer;
-  color: ${({ theme }) => theme.textPrimary};
-`
-
-function getTicks(startTimestamp: number, endTimestamp: number, numTicks = 5) {
-  return Array.from(
-    { length: numTicks },
-    (v, i) => endTimestamp - ((endTimestamp - startTimestamp) / (numTicks + 1)) * (i + 1)
-  )
-}
-
-function tickFormat(
-  startTimestamp: number,
-  endTimestamp: number,
-  activeTimePeriod: TimePeriod,
-  locale: string
-): [TickFormatter<NumberValue>, (v: number) => string, number[]] {
-  switch (activeTimePeriod) {
-    case TimePeriod.hour:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.day:
-      return [hourFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.week:
-      return [weekFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp, 6)]
-    case TimePeriod.month:
-      return [monthDayFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.year:
-      return [monthFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-    case TimePeriod.all:
-      return [monthYearFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
-  }
-}
-
-const margin = { top: 86, bottom: 32, crosshair: 72 }
-const timeOptionsHeight = 44
-const crosshairDateOverhang = 80
-
-interface PriceChartProps {
-  width: number
-  height: number
-}
-
-export function PriceChart({ width, height }: PriceChartProps) {
-  const [activeTimePeriod, setTimePeriod] = useState(TimePeriod.hour)
-  const locale = useActiveLocale()
-  const theme = useTheme()
-
-  /* TODO: Implement API calls & cache to use here */
-  const pricePoints = data[activeTimePeriod]
-  const startingPrice = pricePoints[0]
-  const endingPrice = pricePoints[pricePoints.length - 1]
-  const initialState = { pricePoint: endingPrice, xCoordinate: null }
-  const [selected, setSelected] = useState<{ pricePoint: PricePoint; xCoordinate: number | null }>(initialState)
-
-  const graphWidth = width + crosshairDateOverhang
-  const graphHeight = height - timeOptionsHeight
-  const graphInnerHeight = graphHeight - margin.top - margin.bottom
-
-  // Defining scales
-  // x scale
-  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
-  // y scale
-  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([graphInnerHeight, 0])
-
-  const handleHover = useCallback(
-    (event: Element | EventType) => {
-      const { x } = localPoint(event) || { x: 0 }
-      const x0 = timeScale.invert(x) // get timestamp from the scale
-      const index = bisect(
-        pricePoints.map((x) => x.timestamp),
-        x0,
-        1
-      )
-
-      const d0 = pricePoints[index - 1]
-      const d1 = pricePoints[index]
-      let pricePoint = d0
-
-      const hasPreviousData = d1 && d1.timestamp
-      if (hasPreviousData) {
-        pricePoint = x0.valueOf() - d0.timestamp.valueOf() > d1.timestamp.valueOf() - x0.valueOf() ? d1 : d0
-      }
-
-      setSelected({ pricePoint, xCoordinate: timeScale(pricePoint.timestamp) })
-    },
-    [timeScale, pricePoints]
-  )
-
-  const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(
-    startingPrice.timestamp,
-    endingPrice.timestamp,
-    activeTimePeriod,
-    locale
-  )
-  const [delta, arrow] = getDelta(startingPrice.value, selected.pricePoint.value)
-  const crosshairEdgeMax = width * 0.97
-  const crosshairAtEdge = !!selected.xCoordinate && selected.xCoordinate > crosshairEdgeMax
-
-  return (
-    <ChartWrapper>
-      <ChartHeader>
-        <TokenPrice>${selected.pricePoint.value.toFixed(2)}</TokenPrice>
-        <DeltaContainer>
-          {delta}
-          <ArrowCell>{arrow}</ArrowCell>
-        </DeltaContainer>
-      </ChartHeader>
-      <svg width={graphWidth} height={graphHeight}>
-        <AxisBottom
-          scale={timeScale}
-          stroke={theme.backgroundOutline}
-          tickFormat={tickFormatter}
-          tickStroke={theme.backgroundOutline}
-          tickLength={4}
-          tickTransform={'translate(0 -5)'}
-          tickValues={ticks}
-          top={graphHeight - 1}
-          tickLabelProps={() => ({
-            fill: theme.textSecondary,
-            fontSize: 12,
-            textAnchor: 'middle',
-            transform: 'translate(0 -24)',
-          })}
-        />
-        {selected.xCoordinate !== null && (
-          <g>
-            <text
-              x={selected.xCoordinate + (crosshairAtEdge ? -4 : 4)}
-              y={margin.crosshair + 10}
-              textAnchor={crosshairAtEdge ? 'end' : 'start'}
-              fontSize={12}
-              fill={theme.textSecondary}
-            >
-              {crosshairDateFormatter(selected.pricePoint.timestamp)}
-            </text>
-            <Line
-              from={{ x: selected.xCoordinate, y: margin.crosshair }}
-              to={{ x: selected.xCoordinate, y: graphHeight }}
-              stroke={theme.backgroundOutline}
-              strokeWidth={1}
-              pointerEvents="none"
-              strokeDasharray="4,4"
-            />
-          </g>
-        )}
-        <Group top={margin.top}>
-          <LinePath
-            /* ALL chart renders poorly using circle corners; use d3 curve for ALL instead */
-            curve={activeTimePeriod === TimePeriod.all ? curveBasis : radius(0.25)}
-            stroke={theme.accentActive}
-            strokeWidth={2}
-            data={pricePoints}
-            x={(d: PricePoint) => timeScale(d.timestamp) ?? 0}
-            y={(d: PricePoint) => rdScale(d.value) ?? 0}
-          />
-          {selected.xCoordinate !== null && (
-            <g>
-              <GlyphCircle
-                left={selected.xCoordinate}
-                top={rdScale(selected.pricePoint.value)}
-                size={50}
-                fill={theme.accentActive}
-                stroke={theme.backgroundOutline}
-                strokeWidth={2}
-              />
-            </g>
-          )}
-        </Group>
-        <rect
-          x={0}
-          y={0}
-          width={width}
-          height={graphHeight}
-          fill={'transparent'}
-          onTouchStart={handleHover}
-          onTouchMove={handleHover}
-          onMouseMove={handleHover}
-          onMouseLeave={() => setSelected(initialState)}
-        />
-      </svg>
-      <TimeOptionsContainer>
-        {TIME_DISPLAYS.map(([value, display]) => (
-          <TimeButton key={display} active={activeTimePeriod === value} onClick={() => setTimePeriod(value)}>
-            {display}
-          </TimeButton>
-        ))}
-      </TimeOptionsContainer>
-    </ChartWrapper>
-  )
-}
-
-export default PriceChart

src/components/Charts/SparklineChart.tsx

@@ -0,0 +1,50 @@
+import { curveCardinalOpen, scaleLinear } from 'd3'
+import React from 'react'
+import { useTheme } from 'styled-components/macro'
+
+import data from './data.json'
+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
+}
+
+function SparklineChart({ width, height }: SparklineChartProps) {
+  const theme = useTheme()
+
+  /* TODO: Implement API calls & cache to use here */
+  const pricePoints = data.day
+  const startingPrice = pricePoints[0]
+  const endingPrice = pricePoints[pricePoints.length - 1]
+
+  const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
+  const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([height, 0])
+
+  const isPositive = endingPrice.value >= startingPrice.value
+
+  return (
+    <LineChart
+      data={pricePoints}
+      getX={(p: PricePoint) => timeScale(p.timestamp)}
+      getY={(p: PricePoint) => rdScale(p.value)}
+      curve={curveCardinalOpen.tension(0.9)}
+      marginTop={0}
+      color={isPositive ? theme.accentSuccess : theme.accentFailure}
+      strokeWidth={1.5}
+      width={width}
+      height={height}
+    ></LineChart>
+  )
+}
+
+export default React.memo(SparklineChart)

src/components/ConnectedAccountBlocked/index.tsx

@@ -1,17 +1,17 @@
 import { Trans } from '@lingui/macro'
-import CopyHelper from 'components/AccountDetails/Copy'
 import Column from 'components/Column'
-import useTheme from 'hooks/useTheme'
 import { AlertOctagon } from 'react-feather'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 
+import { CopyHelper } from '../../theme'
 import Modal from '../Modal'
 
 const ContentWrapper = styled(Column)`
   align-items: center;
   margin: 32px;
   text-align: center;
+  font-size: 12px;
 `
 const WarningIcon = styled(AlertOctagon)`
   min-height: 22px;
@@ -49,7 +49,14 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
         <ThemedText.DeprecatedMain fontSize={12}>
           <Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
         </ThemedText.DeprecatedMain>
-        <Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.deprecated_primary1} iconPosition="right">
+        <Copy
+          toCopy="compliance@uniswap.org"
+          fontSize={14}
+          iconSize={16}
+          gap={6}
+          color={theme.deprecated_primary1}
+          iconPosition="right"
+        >
           compliance@uniswap.org
         </Copy>
       </ContentWrapper>

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -4,8 +4,8 @@ import { t } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import HoverInlineText from 'components/HoverInlineText'
 import { useMemo } from 'react'
+import { useTheme } from 'styled-components/macro'
 
-import useTheme from '../../hooks/useTheme'
 import { ThemedText } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
 import { MouseoverTooltip } from '../Tooltip'

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 'components/AmplitudeAnalytics/constants'
+import { TraceEvent } from 'components/AmplitudeAnalytics/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

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

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

@@ -20,7 +20,6 @@ const FallbackWrapper = styled.div`
 const BodyWrapper = styled.div<{ margin?: string }>`
   padding: 1rem;
   width: 100%;
-  white-space: ;
 `
 
 const CodeBlockWrapper = styled.div`

src/components/Explore/TokenDetails/ShareButton.tsx

@@ -1,139 +0,0 @@
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { darken } from 'polished'
-import { useRef, useState } from 'react'
-import { Check, Link, Share, Twitter } from 'react-feather'
-import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import styled, { useTheme } from 'styled-components/macro'
-
-const TWITTER_WIDTH = 560
-const TWITTER_HEIGHT = 480
-
-const ShareButtonDisplay = styled.div`
-  display: flex;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    color: ${({ theme }) => darken(0.1, theme.textSecondary)};
-  }
-`
-const ShareActions = styled.div`
-  position: absolute;
-  top: 28px;
-  right: 0px;
-  padding: 8px 0px;
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-  overflow: auto;
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  box-shadow: ${({ theme }) => theme.flyoutDropShadow};
-  border-radius: 12px;
-`
-const ShareAction = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  font-size: 16px;
-  gap: 8px;
-  width: 200px;
-  height: 48px;
-  color: ${({ theme }) => theme.textPrimary};
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.backgroundContainer};
-  }
-`
-
-const LinkCopied = styled.div<{ show: boolean }>`
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  width: 328px;
-  height: 72px;
-  color: ${({ theme }) => theme.textPrimary};
-  background-color: ${({ theme }) => theme.backgroundBackdrop};
-  justify-content: flex-start;
-  align-items: center;
-  padding: 24px 16px;
-  position: absolute;
-  right: 32px;
-  bottom: 32px;
-  font-size: 14px;
-  gap: 8px;
-  border: 1px solid rgba(153, 161, 189, 0.08);
-  box-shadow: ${({ theme }) => theme.flyoutDropShadow};
-  border-radius: 20px;
-  animation: floatIn 0s ease-in 3s forwards;
-
-  @keyframes floatIn {
-    to {
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      display: none;
-    }
-  }
-`
-interface TokenInfo {
-  tokenName: string
-  tokenSymbol: string
-}
-
-export default function ShareButton(tokenInfo: TokenInfo) {
-  const theme = useTheme()
-  const node = useRef<HTMLDivElement | null>(null)
-  const open = useModalIsOpen(ApplicationModal.SHARE)
-  const toggleShare = useToggleModal(ApplicationModal.SHARE)
-  useOnClickOutside(node, open ? toggleShare : undefined)
-  const [showCopied, setShowCopied] = useState(false)
-  const positionX = (window.screen.width - TWITTER_WIDTH) / 2
-  const positionY = (window.screen.height - TWITTER_HEIGHT) / 2
-
-  const shareTweet = () => {
-    toggleShare()
-    window.open(
-      `https://twitter.com/intent/tweet?text=Check%20out%20${tokenInfo.tokenName}%20(${tokenInfo.tokenSymbol})%20https://app.uniswap.org/%23/tokens/${tokenInfo.tokenSymbol}%20via%20@uniswap`,
-      'newwindow',
-      `left=${positionX}, top=${positionY}, width=${TWITTER_WIDTH}, height=${TWITTER_HEIGHT}`
-    )
-  }
-  const copyLink = () => {
-    navigator.clipboard.writeText(window.location.href).then(
-      function handleClipboardWriteSuccess() {
-        setShowCopied(true)
-        toggleShare()
-        setTimeout(() => setShowCopied(false), 3000)
-      },
-      function error() {
-        console.error('Clipboard copy failed.')
-      }
-    )
-  }
-
-  return (
-    <>
-      <ShareButtonDisplay ref={node}>
-        <Share size={18} onClick={toggleShare} aria-label={`ShareOptions`} />
-        {open && (
-          <ShareActions>
-            <ShareAction onClick={copyLink}>
-              <Link color={theme.textSecondary} size={18} />
-              Copy link
-            </ShareAction>
-
-            <ShareAction onClick={shareTweet}>
-              <Twitter color={theme.textSecondary} size={18} />
-              Share to Twitter
-            </ShareAction>
-          </ShareActions>
-        )}
-      </ShareButtonDisplay>
-      <LinkCopied show={showCopied}>
-        <Check color={theme.accentSuccess} />
-        Link Copied
-      </LinkCopied>
-    </>
-  )
-}

src/components/Explore/TokenDetails/TokenDetail.tsx

@@ -1,271 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { ParentSize } from '@visx/responsive'
-import PriceChart from 'components/Charts/PriceChart'
-import CurrencyLogo from 'components/CurrencyLogo'
-import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
-import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
-import { getChainInfo } from 'constants/chainInfo'
-import { checkWarning } from 'constants/tokenSafety'
-import { useCurrency, useIsUserAddedToken, useToken } from 'hooks/Tokens'
-import { useAtomValue } from 'jotai/utils'
-import { darken } from 'polished'
-import { useCallback } from 'react'
-import { useState } from 'react'
-import { ArrowLeft, Copy, Heart } from 'react-feather'
-import { Link, useNavigate } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { MOBILE_MEDIA_BREAKPOINT } from '../constants'
-import { favoritesAtom, useToggleFavorite } from '../state'
-import { ClickFavorited } from '../TokenTable/TokenRow'
-import Resource from './Resource'
-import ShareButton from './ShareButton'
-
-export const AboutSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px 0px;
-`
-export const AboutHeader = styled.span`
-  font-size: 28px;
-  line-height: 36px;
-`
-export const BreadcrumbNavLink = styled(Link)`
-  display: flex;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  line-height: 20px;
-  align-items: center;
-  gap: 4px;
-  text-decoration: none;
-  margin-bottom: 16px;
-
-  &:hover {
-    color: ${({ theme }) => theme.textTertiary};
-  }
-`
-export const ChartHeader = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textPrimary};
-  gap: 4px;
-  margin-bottom: 24px;
-`
-const ContractAddress = styled.button`
-  display: flex;
-  color: ${({ theme }) => theme.textPrimary};
-  gap: 10px;
-  align-items: center;
-  background: transparent;
-  border: none;
-  padding: 0px;
-  cursor: pointer;
-
-  &:hover {
-    color: ${({ theme }) => darken(0.1, theme.textPrimary)};
-  }
-`
-export const ContractAddressSection = styled.div`
-  padding: 24px 0px;
-`
-const Contract = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  gap: 4px;
-`
-export const ChartContainer = styled.div`
-  display: flex;
-  height: 436px;
-  align-items: center;
-`
-export const Stat = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 14px;
-  min-width: 168px;
-  flex: 1;
-  gap: 4px;
-  padding: 24px 0px;
-`
-const StatPrice = styled.span`
-  font-size: 28px;
-  color: ${({ theme }) => theme.textPrimary};
-`
-export const StatsSection = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-export const StatPair = styled.div`
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-`
-export const TokenNameCell = styled.div`
-  display: flex;
-  gap: 8px;
-  font-size: 20px;
-  line-height: 28px;
-  align-items: center;
-`
-const TokenActions = styled.div`
-  display: flex;
-  gap: 24px;
-  color: ${({ theme }) => theme.textSecondary};
-`
-export const TokenInfoContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-const TokenSymbol = styled.span`
-  color: ${({ theme }) => theme.textSecondary};
-`
-export const TopArea = styled.div`
-  max-width: 832px;
-`
-export const ResourcesContainer = styled.div`
-  display: flex;
-  gap: 14px;
-`
-const FullAddress = styled.span`
-  @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
-const TruncatedAddress = styled.span`
-  display: none;
-  @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
-    display: flex;
-  }
-`
-const NetworkBadge = styled.div<{ networkColor?: string; backgroundColor?: string }>`
-  border-radius: 5px;
-  padding: 4px 8px;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-  color: ${({ theme, networkColor }) => networkColor ?? theme.textPrimary};
-  background-color: ${({ theme, backgroundColor }) => backgroundColor ?? theme.backgroundSurface};
-`
-
-export default function LoadedTokenDetail({ address }: { address: string }) {
-  const theme = useTheme()
-  const token = useToken(address)
-  const currency = useCurrency(address)
-  const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
-  const isFavorited = favoriteTokens.includes(address)
-  const toggleFavorite = useToggleFavorite(address)
-  const warning = checkWarning(address)
-  const navigate = useNavigate()
-  const isUserAddedToken = useIsUserAddedToken(token)
-  const [warningModalOpen, setWarningModalOpen] = useState(!!warning && !isUserAddedToken)
-
-  const handleDismissWarning = useCallback(() => {
-    setWarningModalOpen(false)
-  }, [setWarningModalOpen])
-  const chainInfo = getChainInfo(token?.chainId)
-  const networkLabel = chainInfo?.label
-  const networkBadgebackgroundColor = chainInfo?.backgroundColor
-
-  // catch token error and loading state
-  if (!token || !token.name || !token.symbol) {
-    return <div>No Token</div>
-  }
-  const tokenName = token.name
-  const tokenSymbol = token.symbol
-
-  // TODO: format price, add sparkline
-  const aboutToken =
-    'Ethereum is a decentralized computing platform that uses ETH (Ether) to pay transaction fees (gas). Developers can use Ethereum to run decentralized applications (dApps) and issue new crypto assets, known as Ethereum tokens.'
-  const tokenMarketCap = '23.02B'
-  const tokenVolume = '1.6B'
-  const truncatedTokenAddress = `${address.slice(0, 4)}...${address.slice(-3)}`
-
-  return (
-    <TopArea>
-      <BreadcrumbNavLink to="/explore">
-        <ArrowLeft size={14} /> Explore
-      </BreadcrumbNavLink>
-      <ChartHeader>
-        <TokenInfoContainer>
-          <TokenNameCell>
-            <CurrencyLogo currency={currency} size={'32px'} />
-            {tokenName} <TokenSymbol>{tokenSymbol}</TokenSymbol>
-            {!warning && <VerifiedIcon size="24px" />}
-            {networkBadgebackgroundColor && (
-              <NetworkBadge networkColor={chainInfo?.color} backgroundColor={networkBadgebackgroundColor}>
-                {networkLabel}
-              </NetworkBadge>
-            )}
-          </TokenNameCell>
-          <TokenActions>
-            <ShareButton tokenName={tokenName} tokenSymbol={tokenSymbol} />
-            <ClickFavorited onClick={toggleFavorite}>
-              <Heart
-                size={15}
-                color={isFavorited ? theme.accentAction : theme.textSecondary}
-                fill={isFavorited ? theme.accentAction : theme.none}
-              />
-            </ClickFavorited>
-          </TokenActions>
-        </TokenInfoContainer>
-        <ChartContainer>
-          <ParentSize>{({ width, height }) => <PriceChart width={width} height={height} />}</ParentSize>
-        </ChartContainer>
-      </ChartHeader>
-      <AboutSection>
-        <AboutHeader>
-          <Trans>About</Trans>
-        </AboutHeader>
-        {aboutToken}
-        <ResourcesContainer>
-          <Resource name={'Etherscan'} link={'https://etherscan.io/'} />
-          <Resource name={'Protocol Info'} link={`https://info.uniswap.org/#/tokens/${address}`} />
-        </ResourcesContainer>
-      </AboutSection>
-      <StatsSection>
-        <StatPair>
-          <Stat>
-            Market cap<StatPrice>${tokenMarketCap}</StatPrice>
-          </Stat>
-          <Stat>
-            {/* TODO: connect to chart's selected time */}
-            1h volume
-            <StatPrice>${tokenVolume}</StatPrice>
-          </Stat>
-        </StatPair>
-        <StatPair>
-          <Stat>
-            52W low
-            <StatPrice>$1,790.01</StatPrice>
-          </Stat>
-          <Stat>
-            52W high
-            <StatPrice>$4,420.71</StatPrice>
-          </Stat>
-        </StatPair>
-      </StatsSection>
-      <ContractAddressSection>
-        <Contract>
-          Contract Address
-          <ContractAddress onClick={() => navigator.clipboard.writeText(address)}>
-            <FullAddress>{address}</FullAddress>
-            <TruncatedAddress>{truncatedTokenAddress}</TruncatedAddress>
-            <Copy size={13} color={theme.textSecondary} />
-          </ContractAddress>
-        </Contract>
-      </ContractAddressSection>
-      <TokenSafetyModal
-        isOpen={warningModalOpen}
-        tokenAddress={address}
-        onCancel={() => navigate(-1)}
-        onContinue={handleDismissWarning}
-      />
-    </TopArea>
-  )
-}

src/components/Explore/TokenTable/SearchBar.tsx

@@ -1,77 +0,0 @@
-import searchIcon from 'assets/svg/search.svg'
-import xIcon from 'assets/svg/x.svg'
-import { useAtom } from 'jotai'
-import { useState } from 'react'
-import styled from 'styled-components/macro'
-
-import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
-import { filterStringAtom } from '../state'
-const ICON_SIZE = '20px'
-
-const SearchBarContainer = styled.div`
-  display: flex;
-  flex: 1;
-`
-const SearchInput = styled.input<{ expanded: boolean }>`
-  background: no-repeat scroll 7px 7px;
-  background-image: ${({ expanded }) => !expanded && `url(${searchIcon})`};
-  background-size: 20px 20px;
-  background-position: 11px center;
-  background-color: ${({ theme }) => theme.none};
-  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  height: 100%;
-  width: ${({ expanded }) => (expanded ? '100%' : '44px')};
-  font-size: 16px;
-  padding-left: 18px;
-  color: ${({ theme }) => theme.textPrimary};
-  transition: width 0.75s cubic-bezier(0, 0.795, 0, 1);
-
-  :hover {
-    cursor: ${({ expanded }) => !expanded && 'pointer'};
-    background-color: ${({ theme }) => theme.backgroundContainer};
-  }
-
-  :focus {
-    outline: none;
-    background-color: ${({ theme }) => theme.accentActionSoft};
-    border: none;
-  }
-  ::placeholder {
-    color: ${({ expanded, theme }) => expanded && theme.textTertiary};
-  }
-  ::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-    height: ${ICON_SIZE};
-    width: ${ICON_SIZE};
-    background-image: url(${xIcon});
-    margin-right: 10px;
-    background-size: ${ICON_SIZE} ${ICON_SIZE};
-    cursor: pointer;
-  }
-
-  @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
-    width: 100%;
-  }
-`
-
-export default function SearchBar() {
-  const [filterString, setFilterString] = useAtom(filterStringAtom)
-  const [isExpanded, setExpanded] = useState(false)
-  return (
-    <SearchBarContainer>
-      <SearchInput
-        expanded={isExpanded}
-        type="search"
-        placeholder="Search by name or token address"
-        id="searchBar"
-        onBlur={() => isExpanded && filterString.length === 0 && setExpanded(false)}
-        onFocus={() => setExpanded(true)}
-        autoComplete="off"
-        value={filterString}
-        onChange={({ target: { value } }) => setFilterString(value)}
-      />
-    </SearchBarContainer>
-  )
-}

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,12 @@
-import { FeatureFlag, useUpdateFlag } from 'featureFlags'
-import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
-import { ReactNode } from 'react'
+import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
+import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
+import { TokensNetworkFilterVariant, useTokensNetworkFilterFlag } from 'featureFlags/flags/tokensNetworkFilter'
+import { 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'
@@ -10,7 +16,7 @@ const StyledModal = styled.div`
   position: fixed;
   display: flex;
   left: 50%;
-  top: 50%;
+  top: 50vh;
   transform: translate(-50%, -50%);
   width: 400px;
   height: fit-content;
@@ -39,49 +45,151 @@ const Row = styled.div`
 
 const CloseButton = styled.button`
   cursor: pointer;
-  background: ${({ theme }) => theme.none};
+  background: transparent;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+`
+
+const ToggleButton = styled.button`
+  cursor: pointer;
+  background: transparent;
   border: none;
   color: ${({ theme }) => theme.textPrimary};
 `
 
 const Header = styled(Row)`
   font-weight: 600;
-  font-size: 20px;
+  font-size: 16px;
   border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
   margin-bottom: 8px;
 `
+const FlagName = styled.span`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textPrimary};
+`
+const FlagGroupName = styled.span`
+  font-size: 20px;
+  line-height: 24px;
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 600;
+`
+const FlagDescription = styled.span`
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+  display: flex;
+  align-items: center;
+`
+const FlagVariantSelection = styled.select`
+  border-radius: 12px;
+  padding: 8px;
+  background: ${({ theme }) => theme.backgroundInteractive};
+  font-weight: 600;
+  font-size: 16px;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+
+  :hover {
+    background: ${({ theme }) => theme.backgroundOutline};
+  }
+`
+
+const FlagInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 8px;
+`
+
+const SaveButton = styled.button`
+  border-radius: 12px;
+  padding: 8px;
+  background: ${({ theme }) => theme.backgroundInteractive};
+  font-weight: 600;
+  font-size: 16px;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+
+  :hover {
+    background: ${({ theme }) => theme.backgroundOutline};
+  }
+`
 
 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)
+
   return (
     <Row key={featureFlag}>
-      {featureFlag}: {label}
-      <select
+      <FlagInfo>
+        <FlagName>{featureFlag}</FlagName>
+        <FlagDescription>{label}</FlagDescription>
+      </FlagInfo>
+      <FlagVariantSelection
         id={featureFlag}
-        value={value}
         onChange={(e) => {
           updateFlag(featureFlag, e.target.value)
-          window.location.reload()
+          setCount(count + 1)
         }}
+        value={featureFlags[featureFlag]}
       >
-        {variants.map((variant) => (
+        {Object.values(variant).map((variant) => (
           <Variant key={variant} option={variant} />
         ))}
-      </select>
+      </FlagVariantSelection>
     </Row>
   )
 }
@@ -98,13 +206,42 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-
-      <FeatureFlagOption
-        variants={Object.values(Phase0Variant)}
-        value={usePhase0Flag()}
-        featureFlag={FeatureFlag.phase0}
-        label="All Phase 0 changes (redesign, explore, header)."
-      />
+      <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={TokensNetworkFilterVariant}
+          value={useTokensNetworkFilterFlag()}
+          featureFlag={FeatureFlag.tokensNetworkFilter}
+          label="Tokens Network Filter"
+        />
+        <FeatureFlagOption
+          variant={TokenSafetyVariant}
+          value={useTokenSafetyFlag()}
+          featureFlag={FeatureFlag.tokenSafety}
+          label="Token Safety"
+        />
+      </FeatureFlagGroup>
+      <FeatureFlagGroup name="Phase 1">
+        <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
+      </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

@@ -1,23 +1,16 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { getConnection } from 'connection/utils'
 import { getChainInfo } from 'constants/chainInfo'
-import { CHAIN_IDS_TO_NAMES, SupportedChainId } from 'constants/chains'
-import useParsedQueryString from 'hooks/useParsedQueryString'
-import usePrevious from 'hooks/usePrevious'
+import { SupportedChainId } from 'constants/chains'
+import useSelectChain from 'hooks/useSelectChain'
+import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { darken } from 'polished'
-import { ParsedQs } from 'qs'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useRef } from 'react'
 import { AlertTriangle, ArrowDownCircle, ChevronDown } from 'react-feather'
-import { useLocation, useNavigate } from 'react-router-dom'
 import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
-import { addPopup, ApplicationModal } from 'state/application/reducer'
-import { updateConnectionError } from 'state/connection/reducer'
-import { useAppDispatch } from 'state/hooks'
+import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { replaceURLParam } from 'utils/routes'
-import { isChainAllowed, switchChain } from 'utils/switchChain'
 import { isMobile } from 'utils/userAgent'
 
 const ActiveRowLinkList = styled.div`
@@ -50,6 +43,7 @@ const ActiveRowWrapper = styled.div`
 `
 const FlyoutHeader = styled.div`
   color: ${({ theme }) => theme.deprecated_text2};
+  cursor: default;
   font-weight: 400;
 `
 const FlyoutMenu = styled.div`
@@ -58,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;
   }
 `
@@ -114,11 +108,10 @@ const Logo = styled.img`
 `
 const NetworkLabel = styled.div`
   flex: 1 1 auto;
-  cursor: default;
 `
 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;
   }
@@ -132,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,17 +146,18 @@ const SelectorControls = styled.div<{ supportedChain: boolean }>`
     background-color: ${theme.deprecated_red1};
     border: 2px solid ${theme.deprecated_red1};
   `}
+  cursor: default;
   :focus {
     background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
   }
 `
 const SelectorLogo = styled(Logo)`
-  @media screen and (min-width: ${MEDIA_WIDTHS.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;
   }
 `
@@ -277,24 +271,6 @@ function Row({
   return rowContent
 }
 
-const getParsedChainId = (parsedQs?: ParsedQs) => {
-  const chain = parsedQs?.chain
-  if (!chain || typeof chain !== 'string') return
-
-  return getChainIdFromName(chain)
-}
-
-const getChainIdFromName = (name: string) => {
-  const entry = Object.entries(CHAIN_IDS_TO_NAMES).find(([_, n]) => n === name)
-  const chainId = entry?.[0]
-  return chainId ? parseInt(chainId) : undefined
-}
-
-const getChainNameFromId = (id: string | number) => {
-  // casting here may not be right but fine to return undefined if it's not a supported chain ID
-  return CHAIN_IDS_TO_NAMES[id as SupportedChainId] || ''
-}
-
 const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.MAINNET,
   SupportedChainId.POLYGON,
@@ -304,24 +280,7 @@ const NETWORK_SELECTOR_CHAINS = [
 ]
 
 export default function NetworkSelector() {
-  const dispatch = useAppDispatch()
-
-  const { chainId, provider, connector, isActive } = useWeb3React()
-  const [previousChainId, setPreviousChainId] = useState<number | undefined>(undefined)
-
-  // Can't use `usePrevious` because `chainId` can be undefined while activating.
-  useEffect(() => {
-    if (chainId && chainId !== previousChainId) {
-      setPreviousChainId(chainId)
-    }
-  }, [chainId, previousChainId])
-
-  const parsedQs = useParsedQueryString()
-  const urlChainId = getParsedChainId(parsedQs)
-  const previousUrlChainId = usePrevious(urlChainId)
-
-  const navigate = useNavigate()
-  const { search } = useLocation()
+  const { chainId, provider } = useWeb3React()
 
   const node = useRef<HTMLDivElement>(null)
   const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
@@ -331,62 +290,8 @@ export default function NetworkSelector() {
 
   const info = getChainInfo(chainId)
 
-  const replaceURLChainParam = useCallback(() => {
-    if (chainId) {
-      navigate({ search: replaceURLParam(search, 'chain', getChainNameFromId(chainId)) }, { replace: true })
-    }
-  }, [chainId, search, navigate])
-
-  const onSelectChain = useCallback(
-    async (targetChain: SupportedChainId, skipClose?: boolean) => {
-      if (!connector) return
-
-      const connectionType = getConnection(connector).type
-
-      try {
-        dispatch(updateConnectionError({ connectionType, error: undefined }))
-        await switchChain(connector, targetChain)
-      } catch (error) {
-        console.error('Failed to switch networks', error)
-
-        dispatch(updateConnectionError({ connectionType, error: error.message }))
-        dispatch(addPopup({ content: { failedSwitchNetwork: targetChain }, key: `failed-network-switch` }))
-
-        // If we activate a chain and it fails, reset the query param to the current chainId
-        replaceURLChainParam()
-      }
-
-      if (!skipClose) {
-        closeModal()
-      }
-    },
-    [connector, closeModal, dispatch, replaceURLChainParam]
-  )
-
-  // If there is no chain query param, set it to the current chain
-  useEffect(() => {
-    const chainQueryUnpopulated = !urlChainId
-    if (chainQueryUnpopulated && chainId) {
-      replaceURLChainParam()
-    }
-  }, [chainId, urlChainId, replaceURLChainParam])
-
-  // If the chain changed but the query param is stale, update to the current chain
-  useEffect(() => {
-    const chainChanged = chainId !== previousChainId
-    const chainQueryStale = urlChainId !== chainId
-    if (chainChanged && chainQueryStale) {
-      replaceURLChainParam()
-    }
-  }, [chainId, previousChainId, replaceURLChainParam, urlChainId])
-
-  // If the query param changed, and the chain didn't change, then activate the new chain
-  useEffect(() => {
-    const chainQueryManuallyUpdated = urlChainId && urlChainId !== previousUrlChainId
-    if (chainQueryManuallyUpdated && isActive) {
-      onSelectChain(urlChainId, true)
-    }
-  }, [onSelectChain, urlChainId, previousUrlChainId, isActive])
+  const selectChain = useSelectChain()
+  useSyncChainQuery()
 
   if (!chainId || !provider) {
     return null
@@ -422,11 +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={onSelectChain} 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

@@ -5,12 +5,11 @@ import { getChainInfo } from 'constants/chainInfo'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import useGasPrice from 'hooks/useGasPrice'
 import useMachineTimeMs from 'hooks/useMachineTime'
-import useTheme from 'hooks/useTheme'
 import JSBI from 'jsbi'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
 import { useEffect, useState } from 'react'
-import styled, { keyframes } from 'styled-components/macro'
+import styled, { keyframes, useTheme } from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
@@ -27,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

@@ -3,8 +3,7 @@ import useScrollPosition from '@react-hook/window-scroll'
 import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
-import useTheme from 'hooks/useTheme'
+import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import { darken } from 'polished'
 import { NavLink, useLocation } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -13,7 +12,7 @@ import { useUserHasAvailableClaim } from 'state/claim/hooks'
 import { useNativeCurrencyBalances } from 'state/connection/hooks'
 import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
 import { ExternalLink, ThemedText } from '../../theme'
@@ -47,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;
   `};
@@ -82,7 +81,7 @@ const HeaderElement = styled.div`
     margin-left: 8px;
   }
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     align-items: center;
   `};
 `
@@ -90,7 +89,7 @@ const HeaderElement = styled.div`
 const HeaderLinks = styled(Row)`
   justify-self: center;
   background-color: ${({ theme }) => theme.deprecated_bg0};
-  width: fit-content;
+  width: max-content;
   padding: 2px;
   border-radius: 16px;
   display: grid;
@@ -98,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;
@@ -158,7 +157,7 @@ const UNIWrapper = styled.span`
 `
 
 const BalanceText = styled(Text)`
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
     display: none;
   `};
 `
@@ -169,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 {
@@ -245,7 +244,7 @@ const StyledExternalLink = styled(ExternalLink)`
 `
 
 export default function Header() {
-  const phase0Flag = usePhase0Flag()
+  const tokensFlag = useTokensFlag()
 
   const { account, chainId } = useWeb3React()
 
@@ -292,9 +291,9 @@ export default function Header() {
         <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
           <Trans>Swap</Trans>
         </StyledNavLink>
-        {phase0Flag === Phase0Variant.Enabled && (
-          <StyledNavLink id={`explore-nav-link`} to={'/explore'}>
-            <Trans>Explore</Trans>
+        {tokensFlag === TokensVariant.Enabled && (
+          <StyledNavLink id={`tokens-nav-link`} to={'/tokens'}>
+            <Trans>Tokens</Trans>
           </StyledNavLink>
         )}
         <StyledNavLink

src/components/Identicon/StatusIcon.tsx

@@ -2,7 +2,6 @@ import { ConnectionType } from 'connection'
 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 Identicon from '../Identicon'
 
@@ -16,12 +15,12 @@ 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 }) {
+export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
   let image
   switch (connectionType) {
     case ConnectionType.INJECTED:
@@ -33,10 +32,7 @@ export default function StatusIcon({ connectionType }: { connectionType: Connect
     case ConnectionType.COINBASE_WALLET:
       image = <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
       break
-    case ConnectionType.FORTMATIC:
-      image = <img src={FortmaticIcon} alt="Fortmatic" />
-      break
   }
 
-  return <IconWrapper size={16}>{image}</IconWrapper>
+  return <IconWrapper size={size ?? 16}>{image}</IconWrapper>
 }

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

@@ -14,7 +14,7 @@ export function useDensityChartData({
   currencyB: Currency | undefined
   feeAmount: FeeAmount | undefined
 }) {
-  const { isLoading, isUninitialized, isError, error, data } = usePoolActiveLiquidity(currencyA, currencyB, feeAmount)
+  const { isLoading, error, data } = usePoolActiveLiquidity(currencyA, currencyB, feeAmount)
 
   const formatData = useCallback(() => {
     if (!data?.length) {
@@ -42,10 +42,8 @@ export function useDensityChartData({
   return useMemo(() => {
     return {
       isLoading,
-      isUninitialized,
-      isError,
       error,
-      formattedData: !isLoading && !isUninitialized ? formatData() : undefined,
+      formattedData: !isLoading ? formatData() : undefined,
     }
-  }, [isLoading, isUninitialized, isError, error, formatData])
+  }, [isLoading, error, formatData])
 }

src/components/LiquidityChartRangeInput/index.tsx

@@ -6,13 +6,12 @@ import { AutoColumn, ColumnCenter } from 'components/Column'
 import Loader from 'components/Loader'
 import { format } from 'd3'
 import { useColor } from 'hooks/useColor'
-import useTheme from 'hooks/useTheme'
 import { saturate } from 'polished'
 import React, { ReactNode, useCallback, useMemo } from 'react'
 import { BarChart2, CloudOff, Inbox } from 'react-feather'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
 import { Chart } from './Chart'
@@ -96,7 +95,7 @@ export default function LiquidityChartRangeInput({
 
   const isSorted = currencyA && currencyB && currencyA?.wrapped.sortsBefore(currencyB?.wrapped)
 
-  const { isLoading, isUninitialized, isError, error, formattedData } = useDensityChartData({
+  const { isLoading, error, formattedData } = useDensityChartData({
     currencyA,
     currencyB,
     feeAmount,
@@ -157,10 +156,12 @@ export default function LiquidityChartRangeInput({
     [isSorted, price, ticksAtLimit]
   )
 
-  if (isError) {
+  if (error) {
     sendEvent('exception', { description: error.toString(), fatal: false })
   }
 
+  const isUninitialized = !currencyA || !currencyB || (formattedData === undefined && !isLoading)
+
   return (
     <AutoColumn gap="md" style={{ minHeight: '200px' }}>
       {isUninitialized ? (
@@ -170,7 +171,7 @@ export default function LiquidityChartRangeInput({
         />
       ) : isLoading ? (
         <InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
-      ) : isError ? (
+      ) : error ? (
         <InfoBox
           message={<Trans>Liquidity data not available.</Trans>}
           icon={<CloudOff size={56} stroke={theme.deprecated_text4} />}

src/components/Loader/index.tsx

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

src/components/Logo/index.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react'
 import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
-
-import useTheme from '../../hooks/useTheme'
+import { useTheme } from 'styled-components/macro'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 

src/components/Menu/index.tsx

@@ -14,6 +14,7 @@ import {
   ChevronLeft,
   Coffee,
   FileText,
+  Flag,
   Globe,
   HelpCircle,
   Info,
@@ -109,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;
@@ -291,6 +292,11 @@ export default function Menu() {
                       </div>
                       <FileText opacity={0.6} size={16} />
                     </ToggleMenuItem>
+                    {(isDevelopmentEnv() || isStagingEnv()) && (
+                      <ToggleMenuItem onClick={openFeatureFlagsModal}>
+                        Feature Flags <Flag opacity={0.6} size={16} />
+                      </ToggleMenuItem>
+                    )}
                     {showUNIClaimOption && (
                       <UNIbutton
                         onClick={openClaimModal}
@@ -302,9 +308,6 @@ export default function Menu() {
                         <Trans>Claim UNI</Trans>
                       </UNIbutton>
                     )}
-                    {(isDevelopmentEnv() || isStagingEnv()) && (
-                      <ToggleMenuItem onClick={openFeatureFlagsModal}>Feature Flags</ToggleMenuItem>
-                    )}
                   </MenuFlyout>
                 )
             }

src/components/Modal/index.tsx

@@ -9,7 +9,7 @@ import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: 2;
     background-color: transparent;
@@ -19,14 +19,14 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
     align-items: center;
     justify-content: center;
 
-    background-color: ${({ theme }) => theme.deprecated_modalBG};
+    background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundScrim : theme.deprecated_modalBG)};
   }
 `
 
 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 +37,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 +59,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 &&
@@ -84,6 +85,7 @@ interface ModalProps {
   maxHeight?: number
   initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
+  redesignFlag?: boolean
 }
 
 export default function Modal({
@@ -93,6 +95,7 @@ export default function Modal({
   maxHeight = 90,
   initialFocusRef,
   children,
+  redesignFlag,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, null, {
     config: { duration: 200 },
@@ -124,6 +127,7 @@ export default function Modal({
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
               unstable_lockFocusAcrossFrames={false}
+              redesignFlag={redesignFlag}
             >
               <StyledDialogContent
                 {...(isMobile
@@ -136,6 +140,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/ModalViews/index.tsx

@@ -1,8 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { useContext } from 'react'
 import { ArrowUpCircle } from 'react-feather'
-import styled, { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import { CloseIcon, CustomLightSpinner, ThemedText } from '../../theme'
@@ -49,7 +48,7 @@ export function SubmittedView({
   onDismiss: () => void
   hash: string | undefined
 }) {
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
   const { chainId } = useWeb3React()
 
   return (

src/components/NavBar/ChainSwitcher.css.ts

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

src/components/NavBar/ChainSwitcher.tsx

@@ -0,0 +1,132 @@
+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 { Portal } from 'nft/components/common/Portal'
+import { Column, Row } from 'nft/components/Flex'
+import { CheckMarkIcon, NewChevronDownIcon, NewChevronUpIcon, TokenWarningRedIcon } from 'nft/components/icons'
+import { subhead } from 'nft/css/common.css'
+import { themeVars, vars } from 'nft/css/sprinkles.css'
+import { useIsMobile } from 'nft/hooks'
+import { ReactNode, useReducer, useRef } from 'react'
+
+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 (
+    <Column borderRadius="12">
+      <Row
+        as="button"
+        background="none"
+        className={`${styles.ChainSwitcherRow} ${subhead}`}
+        onClick={() => onSelectChain(targetChain)}
+      >
+        <ChainDetails>
+          <img src={logoUrl} alt={label} className={styles.Icon} />
+          {label}
+        </ChainDetails>
+        {active && <CheckMarkIcon width={20} height={20} color={vars.color.blue400} />}
+      </Row>
+    </Column>
+  )
+}
+
+const ChainDetails = ({ children }: { children: ReactNode }) => <Row>{children}</Row>
+
+const NETWORK_SELECTOR_CHAINS = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.POLYGON,
+  SupportedChainId.OPTIMISM,
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.CELO,
+]
+
+interface ChainSwitcherProps {
+  leftAlign?: boolean
+}
+
+export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
+  const { chainId } = useWeb3React()
+  const [isOpen, toggleOpen] = useReducer((s) => !s, false)
+  const isMobile = useIsMobile()
+
+  const ref = useRef<HTMLDivElement>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(ref, isOpen ? toggleOpen : undefined, [modalRef])
+
+  const info = chainId ? getChainInfo(chainId) : undefined
+
+  const selectChain = useSelectChain()
+  useSyncChainQuery()
+
+  if (!chainId) {
+    return null
+  }
+
+  const isSupported = !!info
+
+  const dropdown = (
+    <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
+      <Column marginX="8">
+        {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
+          <ChainRow
+            onSelectChain={async (targetChainId: SupportedChainId) => {
+              await selectChain(targetChainId)
+              toggleOpen()
+            }}
+            targetChain={chainId}
+            key={chainId}
+          />
+        ))}
+      </Column>
+    </NavDropdown>
+  )
+
+  return (
+    <Box position="relative" ref={ref}>
+      <Row
+        as="button"
+        gap="8"
+        className={styles.ChainSwitcher}
+        background={isOpen ? 'accentActiveSoft' : 'none'}
+        onClick={toggleOpen}
+      >
+        {!isSupported ? (
+          <>
+            <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
+            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+              Unsupported
+            </Box>
+          </>
+        ) : (
+          <>
+            <img src={info.logoUrl} alt={info.label} className={styles.Image} />
+            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+              {info.label}
+            </Box>
+          </>
+        )}
+        {isOpen ? (
+          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
+        ) : (
+          <NewChevronDownIcon width={16} height={16} color="blackBlue" />
+        )}
+      </Row>
+      {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
+    </Box>
+  )
+}

src/components/NavBar/MenuDropdown.css.ts

@@ -0,0 +1,67 @@
+import { style } from '@vanilla-extract/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: '8',
+    paddingX: '8',
+    width: 'full',
+    whiteSpace: 'nowrap',
+  }),
+  {
+    lineHeight: '24px',
+    textDecoration: 'none',
+  },
+])
+
+export const PrimaryText = style([
+  {
+    lineHeight: '24px',
+  },
+])
+
+export const SecondaryText = style([
+  hover,
+  sprinkles({
+    paddingY: '8',
+    paddingX: '8',
+    color: 'darkGray',
+  }),
+  {
+    lineHeight: '20px',
+  },
+])
+
+export const Separator = style([
+  sprinkles({
+    height: '0',
+    marginX: '16',
+  }),
+  {
+    borderTop: 'solid',
+    borderColor: themeVars.colors.medGray,
+    borderWidth: '1px',
+  },
+])
+
+export const IconRow = style([
+  sprinkles({
+    paddingX: '16',
+    justifyContent: { sm: 'center', md: 'flex-start' },
+  }),
+])

src/components/NavBar/MenuDropdown.tsx

@@ -0,0 +1,210 @@
+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'
+import {
+  BarChartIcon,
+  DiscordIconMenu,
+  EllipsisIcon,
+  GithubIconMenu,
+  GovernanceIcon,
+  ThinTagIcon,
+  TwitterIconMenu,
+} from 'nft/components/icons'
+import { body, bodySmall } from 'nft/css/common.css'
+import { themeVars } from 'nft/css/sprinkles.css'
+import { ReactNode, useReducer, useRef } from 'react'
+import { NavLink, NavLinkProps } from 'react-router-dom'
+import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
+
+import { useToggleModal } from '../../state/application/hooks'
+import { ApplicationModal } from '../../state/application/reducer'
+import * as styles from './MenuDropdown.css'
+import { NavDropdown } from './NavDropdown'
+import { NavIcon } from './NavIcon'
+
+const PrimaryMenuRow = ({
+  to,
+  href,
+  close,
+  children,
+}: {
+  to?: NavLinkProps['to']
+  href?: string
+  close?: () => void
+  children: ReactNode
+}) => {
+  return (
+    <>
+      {to ? (
+        <NavLink to={to} className={styles.MenuRow}>
+          <Row onClick={close}>{children}</Row>
+        </NavLink>
+      ) : (
+        <Row as="a" href={href} target={'_blank'} rel={'noopener noreferrer'} className={styles.MenuRow}>
+          {children}
+        </Row>
+      )}
+    </>
+  )
+}
+
+const PrimaryMenuRowText = ({ children }: { children: ReactNode }) => {
+  return <Box className={`${styles.PrimaryText} ${body}`}>{children}</Box>
+}
+
+PrimaryMenuRow.Text = PrimaryMenuRowText
+
+const SecondaryLinkedText = ({
+  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.SecondaryText} ${bodySmall}`}
+      onClick={onClick}
+      cursor="pointer"
+    >
+      {children}
+    </Box>
+  )
+}
+
+const Separator = () => {
+  return <Box className={styles.Separator} />
+}
+
+const IconRow = ({ children }: { children: ReactNode }) => {
+  return <Row className={styles.IconRow}>{children}</Row>
+}
+
+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"
+        marginRight="12"
+      >
+        {children}
+      </Box>
+    </>
+  )
+}
+
+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)
+
+  return (
+    <>
+      <Box position="relative" ref={ref}>
+        <NavIcon isActive={isOpen} onClick={toggleOpen}>
+          <EllipsisIcon width={28} height={28} />
+        </NavIcon>
+
+        {isOpen && (
+          <NavDropdown top={{ sm: 'unset', xxl: '56' }} bottom={{ sm: '56', xxl: 'unset' }} right="0">
+            <Column gap="16">
+              <Column paddingX="8" gap="4">
+                {nftFlag === NftVariant.Enabled && (
+                  <PrimaryMenuRow to="/nft/sell" close={toggleOpen}>
+                    <Icon>
+                      <ThinTagIcon width={24} height={24} />
+                    </Icon>
+                    <PrimaryMenuRow.Text>
+                      <Trans>Sell NFTs</Trans>
+                    </PrimaryMenuRow.Text>
+                  </PrimaryMenuRow>
+                )}
+                <PrimaryMenuRow to="/vote" close={toggleOpen}>
+                  <Icon>
+                    <GovernanceIcon width={24} height={24} />
+                  </Icon>
+                  <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>
+                    <Trans>View token analytics</Trans>
+                  </PrimaryMenuRow.Text>
+                </PrimaryMenuRow>
+              </Column>
+              <Separator />
+              <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()
+                  }}
+                >
+                  <Trans>Legal & Privacy</Trans> ↗
+                </SecondaryLinkedText>
+                {(isDevelopmentEnv() || isStagingEnv()) && (
+                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>
+                    <Trans>Feature Flags</Trans>
+                  </SecondaryLinkedText>
+                )}
+              </Box>
+              <IconRow>
+                <Icon href="https://discord.com/invite/FCfyBSbCU5">
+                  <DiscordIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                </Icon>
+                <Icon href="https://twitter.com/Uniswap">
+                  <TwitterIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                </Icon>
+                <Icon href="https://github.com/Uniswap">
+                  <GithubIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
+                </Icon>
+              </IconRow>
+            </Column>
+          </NavDropdown>
+        )}
+      </Box>
+      <PrivacyPolicyModal />
+      <FeatureFlagModal />
+    </>
+  )
+}

src/components/NavBar/NavDropdown.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css'
+
+import { sprinkles } from '../../nft/css/sprinkles.css'
+
+const baseNavDropdown = style([
+  sprinkles({
+    background: 'lightGray',
+    borderStyle: 'solid',
+    borderColor: 'medGray',
+    borderWidth: '1px',
+    paddingBottom: '8',
+    paddingTop: '8',
+    zIndex: '2',
+  }),
+  {
+    boxShadow: '0px 4px 12px 0px #00000026',
+  },
+])
+
+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',
+  }),
+])

src/components/NavBar/NavDropdown.tsx

@@ -0,0 +1,12 @@
+import { Box, BoxProps } from 'nft/components/Box'
+import { useIsMobile } from 'nft/hooks'
+import { ForwardedRef, forwardRef } from 'react'
+
+import * as styles from './NavDropdown.css'
+
+export const NavDropdown = forwardRef((props: BoxProps, ref: ForwardedRef<HTMLElement>) => {
+  const isMobile = useIsMobile()
+  return <Box ref={ref} className={isMobile ? styles.mobileNavDropdown : styles.NavDropdown} {...props} />
+})
+
+NavDropdown.displayName = 'NavDropdown'

src/components/NavBar/NavIcon.css.ts

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

src/components/NavBar/NavIcon.tsx

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

src/components/NavBar/Navbar.css.ts

@@ -0,0 +1,122 @@
+import { style } from '@vanilla-extract/css'
+
+import { subhead } from '../../nft/css/common.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
+
+export const nav = style([
+  sprinkles({
+    paddingX: '20',
+    paddingY: '12',
+    width: 'full',
+    height: '72',
+    zIndex: '2',
+    background: 'white08',
+  }),
+  {
+    backdropFilter: 'blur(24px)',
+  },
+])
+
+export const logoContainer = style([
+  sprinkles({
+    display: 'flex',
+    marginRight: { sm: '12', xxl: '20' },
+    alignItems: 'center',
+  }),
+])
+
+export const logo = style([
+  sprinkles({
+    display: 'block',
+    color: 'blackBlue',
+  }),
+])
+
+export const baseContainer = style([
+  sprinkles({
+    alignItems: 'center',
+  }),
+])
+
+export const baseSideContainer = style([
+  baseContainer,
+  sprinkles({
+    display: 'flex',
+    width: 'full',
+    flex: '1',
+    flexShrink: '2',
+  }),
+])
+
+export const leftSideContainer = style([
+  baseSideContainer,
+  sprinkles({
+    justifyContent: 'flex-start',
+  }),
+])
+
+export const middleContainer = style([
+  baseContainer,
+  sprinkles({
+    flex: '1',
+    flexShrink: '1',
+    justifyContent: 'center',
+    display: { sm: 'none', lg: 'flex' },
+  }),
+])
+
+export const rightSideContainer = style([
+  baseSideContainer,
+  sprinkles({
+    justifyContent: 'flex-end',
+  }),
+])
+
+const baseMenuItem = style([
+  subhead,
+  sprinkles({
+    paddingY: '8',
+    paddingX: '16',
+    marginY: '4',
+    borderRadius: '12',
+    transition: '250',
+    height: 'min',
+  }),
+  {
+    lineHeight: '24px',
+    textDecoration: 'none',
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
+  },
+])
+
+export const menuItem = style([
+  baseMenuItem,
+  sprinkles({
+    color: 'darkGray',
+  }),
+])
+
+export const activeMenuItem = style([
+  baseMenuItem,
+  sprinkles({
+    color: 'blackBlue',
+    background: 'backgroundFloating',
+  }),
+])
+
+export const mobileBottomBar = style([
+  sprinkles({
+    position: 'fixed',
+    display: { sm: 'flex', xxl: 'none' },
+    bottom: '0',
+    right: '0',
+    left: '0',
+    justifyContent: 'space-between',
+    paddingY: '4',
+    paddingX: '8',
+    height: '56',
+    background: 'lightGray',
+  }),
+])

src/components/NavBar/Navbar.tsx

@@ -0,0 +1,110 @@
+import { Trans } from '@lingui/macro'
+import Web3Status from 'components/Web3Status'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { ReactNode } from 'react'
+import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
+
+import { Box } from '../../nft/components/Box'
+import { Row } from '../../nft/components/Flex'
+import { UniIcon } from '../../nft/components/icons'
+import { ChainSwitcher } from './ChainSwitcher'
+import { MenuDropdown } from './MenuDropdown'
+import * as styles from './Navbar.css'
+import { SearchBar } from './SearchBar'
+
+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 = () => {
+  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', xxl: 'none' }}>
+              <ChainSwitcher leftAlign={true} />
+            </Box>
+            <Row gap="8" display={{ sm: 'none', xxl: 'flex' }}>
+              <PageTabs />
+            </Row>
+          </Box>
+          <Box className={styles.middleContainer}>
+            <SearchBar />
+          </Box>
+          <Box className={styles.rightSideContainer}>
+            <Row gap="12">
+              <Box display={{ sm: 'flex', lg: 'none' }}>
+                <SearchBar />
+              </Box>
+              <Box display={{ sm: 'none', xxl: 'flex' }}>
+                <MenuDropdown />
+              </Box>
+              <Box display={{ sm: 'none', xxl: 'flex' }}>
+                <ChainSwitcher />
+              </Box>
+
+              <Web3Status />
+            </Row>
+          </Box>
+        </Box>
+      </nav>
+      <Box className={styles.mobileBottomBar}>
+        <PageTabs />
+        <MenuDropdown />
+      </Box>
+    </>
+  )
+}
+
+export default Navbar

src/components/NavBar/SearchBar.css.ts

@@ -0,0 +1,153 @@
+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 = '360px'
+
+const baseSearchStyle = style([
+  sprinkles({
+    paddingY: '12',
+    width: { sm: 'viewWidth' },
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'medGray',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.md}px)`]: {
+        width: DESKTOP_NAVBAR_WIDTH,
+      },
+    },
+  },
+])
+
+export const searchBar = style([
+  baseSearchStyle,
+  sprinkles({
+    height: 'full',
+    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({
+    position: 'absolute',
+    left: '0',
+    top: '48',
+    borderBottomLeftRadius: '12',
+    borderBottomRightRadius: '12',
+    background: 'lightGray',
+  }),
+  {
+    borderTop: 'none',
+  },
+])
+
+export const suggestionRow = style([
+  sprinkles({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingY: '8',
+    paddingX: '16',
+    transition: '250',
+  }),
+  {
+    ':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',
+  }),
+])

src/components/NavBar/SearchBar.tsx

@@ -0,0 +1,384 @@
+// 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 { Overlay } from 'nft/components/modals/Overlay'
+import { magicalGradientOnHover, subheadSmall } from 'nft/css/common.css'
+import { useIsMobile, useSearchHistory } from 'nft/hooks'
+import { fetchSearchCollections, fetchTrendingCollections } from 'nft/queries'
+import { fetchSearchTokens } from 'nft/queries/genie/SearchTokensFetcher'
+import { fetchTrendingTokens } from 'nft/queries/genie/TrendingTokensFetcher'
+import { FungibleToken, GenieCollection, TimePeriod, TrendingCollection } from 'nft/types'
+import { formatEthPrice } from 'nft/utils/currency'
+import { ChangeEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { 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
+}
+
+export const SearchBarDropdownSection = ({
+  toggleOpen,
+  suggestions,
+  header,
+  headerIcon = undefined,
+  hoveredIndex,
+  startingIndex,
+  setHoveredIndex,
+}: SearchBarDropdownSectionProps) => {
+  return (
+    <Column gap="12">
+      <Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}>
+        {headerIcon ? headerIcon : null}
+        <Box>{header}</Box>
+      </Row>
+      <Column gap="12">
+        {suggestions?.map((suggestion, index) =>
+          isCollection(suggestion) ? (
+            <CollectionRow
+              key={suggestion.address}
+              collection={suggestion as GenieCollection}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              index={index + startingIndex}
+            />
+          ) : (
+            <TokenRow
+              key={suggestion.address}
+              token={suggestion as FungibleToken}
+              isHovered={hoveredIndex === index + startingIndex}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              index={index + startingIndex}
+            />
+          )
+        )}
+      </Column>
+    </Column>
+  )
+}
+
+interface SearchBarDropdownProps {
+  toggleOpen: () => void
+  tokens: FungibleToken[]
+  collections: GenieCollection[]
+  hasInput: boolean
+}
+
+export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }: SearchBarDropdownProps) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(undefined)
+  const searchHistory = useSearchHistory(
+    (state: { history: (FungibleToken | GenieCollection)[] }) => state.history
+  ).slice(0, 2)
+  const { pathname } = useLocation()
+  const isNFTPage = pathname.includes('/nfts')
+  const isTokenPage = pathname.includes('/tokens')
+  const phase1Flag = useNftFlag()
+
+  const tokenSearchResults =
+    tokens.length > 0 ? (
+      <SearchBarDropdownSection
+        hoveredIndex={hoveredIndex}
+        startingIndex={isNFTPage ? collections.length : 0}
+        setHoveredIndex={setHoveredIndex}
+        toggleOpen={toggleOpen}
+        suggestions={tokens}
+        header={<Trans>Tokens</Trans>}
+      />
+    ) : (
+      <Box className={styles.notFoundContainer}>
+        <Trans>No tokens found.</Trans>
+      </Box>
+    )
+
+  const collectionSearchResults =
+    phase1Flag === NftVariant.Enabled ? (
+      collections.length > 0 ? (
+        <SearchBarDropdownSection
+          hoveredIndex={hoveredIndex}
+          startingIndex={isNFTPage ? 0 : tokens.length}
+          setHoveredIndex={setHoveredIndex}
+          toggleOpen={toggleOpen}
+          suggestions={collections}
+          header={<Trans>NFT Collections</Trans>}
+        />
+      ) : (
+        <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
+      )
+    ) : null
+
+  const { data: trendingCollectionResults } = useQuery(['trendingCollections', 'eth', 'twenty_four_hours'], () =>
+    fetchTrendingCollections({ volumeType: 'eth', timePeriod: 'ONE_DAY' as TimePeriod, size: 3 })
+  )
+
+  const trendingCollections = useMemo(() => {
+    return trendingCollectionResults
+      ?.map((collection) => {
+        return {
+          ...collection,
+          collectionAddress: collection.address,
+          floorPrice: formatEthPrice(collection.floor?.toString()),
+          stats: {
+            total_supply: collection.totalSupply,
+            one_day_change: collection.floorChange,
+          },
+        }
+      })
+      .slice(0, isNFTPage ? 3 : 2)
+  }, [isNFTPage, trendingCollectionResults])
+
+  const showTrendingCollections: boolean = useMemo(
+    () => (trendingCollections?.length ?? 0) > 0 && !isTokenPage && phase1Flag === NftVariant.Enabled,
+    [trendingCollections?.length, isTokenPage, phase1Flag]
+  )
+
+  const { data: trendingTokenResults } = useQuery([], () => fetchTrendingTokens(4), {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  })
+
+  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
+
+  const trendingTokens = useMemo(() => {
+    return trendingTokenResults?.slice(0, trendingTokensLength)
+  }, [trendingTokenResults, trendingTokensLength])
+
+  const totalSuggestions = hasInput
+    ? tokens.length + collections.length
+    : Math.min(searchHistory.length, 2) +
+      (isNFTPage || !isTokenPage ? trendingCollections?.length ?? 0 : 0) +
+      (isTokenPage || !isNFTPage ? trendingTokens?.length ?? 0 : 0)
+
+  // Close the modal on escape
+  useEffect(() => {
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (!hoveredIndex) {
+          setHoveredIndex(totalSuggestions - 1)
+        } else {
+          setHoveredIndex(hoveredIndex - 1)
+        }
+      } else if (event.key === 'ArrowDown') {
+        if (hoveredIndex && hoveredIndex === totalSuggestions - 1) {
+          setHoveredIndex(0)
+        } else {
+          setHoveredIndex((hoveredIndex ?? -1) + 1)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', keyDownHandler)
+
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [toggleOpen, hoveredIndex, totalSuggestions])
+
+  return (
+    <Box className={styles.searchBarDropdown}>
+      {hasInput ? (
+        // Empty or Up to 8 combined tokens and nfts
+        <Column gap="20">
+          {isNFTPage ? (
+            <>
+              {collectionSearchResults}
+              {tokenSearchResults}
+            </>
+          ) : (
+            <>
+              {tokenSearchResults}
+              {collectionSearchResults}
+            </>
+          )}
+        </Column>
+      ) : (
+        // Recent Searches, Trending Tokens, Trending Collections
+        <Column gap="20">
+          {searchHistory.length > 0 && (
+            <SearchBarDropdownSection
+              hoveredIndex={hoveredIndex}
+              startingIndex={0}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              suggestions={searchHistory}
+              header={<Trans>Recent searches</Trans>}
+              headerIcon={<ClockIcon />}
+            />
+          )}
+          {(trendingTokens?.length ?? 0) > 0 && !isNFTPage && (
+            <SearchBarDropdownSection
+              hoveredIndex={hoveredIndex}
+              startingIndex={searchHistory.length}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              suggestions={trendingTokens ?? []}
+              header={<Trans>Popular tokens</Trans>}
+              headerIcon={<TrendingArrow />}
+            />
+          )}
+          {showTrendingCollections && (
+            <SearchBarDropdownSection
+              hoveredIndex={hoveredIndex}
+              startingIndex={searchHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
+              setHoveredIndex={setHoveredIndex}
+              toggleOpen={toggleOpen}
+              suggestions={trendingCollections as unknown as GenieCollection[]}
+              header={<Trans>Popular NFT collections</Trans>}
+              headerIcon={<TrendingArrow />}
+            />
+          )}
+        </Column>
+      )}
+    </Box>
+  )
+}
+
+function isCollection(suggestion: GenieCollection | FungibleToken | TrendingCollection) {
+  return (suggestion as FungibleToken).decimals === undefined
+}
+
+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 { pathname } = useLocation()
+  const phase1Flag = useNftFlag()
+  const isMobile = useIsMobile()
+
+  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 ?? [])
+
+  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])
+
+  const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
+
+  return (
+    <>
+      <Box
+        position={{ sm: isOpen ? 'absolute' : 'relative', lg: 'relative' }}
+        top={{ sm: '0', lg: 'unset' }}
+        left={{ sm: '0', lg: 'unset' }}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', lg: 'auto' }}
+        ref={searchRef}
+        style={{ zIndex: '1000' }}
+      >
+        <Row
+          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
+          borderRadius={isOpen ? undefined : '12'}
+          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+          display={{ sm: isOpen ? 'flex' : 'none', lg: 'flex' }}
+          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
+          onFocus={() => !isOpen && toggleOpen()}
+          onClick={() => !isOpen && toggleOpen()}
+          gap="12"
+        >
+          <Box display={{ sm: 'none', lg: 'flex' }}>
+            <MagnifyingGlassIcon />
+          </Box>
+          <Box display={{ sm: 'flex', lg: 'none' }} color="placeholder" onClick={toggleOpen}>
+            <ChevronLeftIcon />
+          </Box>
+          <Box
+            as="input"
+            placeholder={placeholderText}
+            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              !isOpen && toggleOpen()
+              setSearchValue(event.target.value)
+            }}
+            className={styles.searchBarInput}
+            value={searchValue}
+          />
+        </Row>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', lg: 'none' }}>
+          <NavIcon onClick={toggleOpen}>
+            <NavMagnifyingGlassIcon width={28} height={28} />
+          </NavIcon>
+        </Box>
+        {isOpen &&
+          (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
+            <SkeletonRow />
+          ) : (
+            <SearchBarDropdown
+              toggleOpen={toggleOpen}
+              tokens={reducedTokens}
+              collections={reducedCollections}
+              hasInput={debouncedSearchValue.length > 0}
+            />
+          ))}
+      </Box>
+      {isOpen && <Overlay />}
+    </>
+  )
+}

src/components/NavBar/SuggestionRow.tsx

@@ -0,0 +1,191 @@
+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 { TokenWarningRedIcon, 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} />
+            ) : (
+              <TokenWarningRedIcon 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 (
+    <Box className={styles.searchBarDropdown}>
+      <Row className={styles.suggestionRow}>
+        <Row>
+          <Box className={styles.imageHolder} />
+          <Box borderRadius="round" height="16" width="160" background="loading" />
+        </Row>
+      </Row>
+    </Box>
+  )
+}

src/components/NavBar/index.ts

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

src/components/NavigationTabs/index.tsx

@@ -1,6 +1,5 @@
 import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
-import useTheme from 'hooks/useTheme'
 import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { Link as HistoryLink, useLocation } from 'react-router-dom'
@@ -8,7 +7,7 @@ import { Box } from 'rebass'
 import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import Row, { RowBetween } from '../Row'
@@ -24,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/NumericalInput/index.tsx

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

src/components/Popups/FailedNetworkSwitchPopup.tsx

@@ -1,9 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { useContext } from 'react'
 import { AlertCircle } from 'react-feather'
-import styled, { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
 import { AutoColumn } from '../Column'
@@ -15,7 +14,7 @@ const RowNoFlex = styled(AutoRow)`
 
 export default function FailedNetworkSwitchPopup({ chainId }: { chainId: SupportedChainId }) {
   const chainInfo = getChainInfo(chainId)
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
 
   return (
     <RowNoFlex>

src/components/Popups/PopupItem.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useContext, useEffect } from 'react'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
+import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
 import { animated } from 'react-spring'
 import { useSpring } from 'react-spring/web'
-import styled, { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useRemovePopup } from '../../state/application/hooks'
 import { PopupContent } from '../../state/application/reducer'
@@ -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
@@ -70,24 +72,25 @@ export default function PopupItem({
     }
   }, [removeAfterMs, removeThisPopup])
 
-  const theme = useContext(ThemeContext)
+  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

@@ -6,11 +6,10 @@ import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { useEffect } from 'react'
 import { MessageCircle, X } from 'react-feather'
 import { useShowSurveyPopup } from 'state/user/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
 
 import BGImage from '../../assets/images/survey-orb.svg'
-import useTheme from '../../hooks/useTheme'
 
 const Wrapper = styled(AutoColumn)`
   background: #edeef2;
@@ -22,7 +21,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/TransactionPopup.tsx

@@ -1,7 +1,6 @@
 import { useWeb3React } from '@web3-react/core'
-import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
-import styled, { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useTransaction } from '../../state/transactions/hooks'
 import { ThemedText } from '../../theme'
@@ -19,7 +18,7 @@ export default function TransactionPopup({ hash }: { hash: string }) {
   const { chainId } = useWeb3React()
 
   const tx = useTransaction(hash)
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
 
   if (!tx) return null
   const success = Boolean(tx.receipt && tx.receipt.status === 1)

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,8 +35,8 @@ 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 }>`
@@ -47,7 +47,7 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding:
   width: 100%;
   z-index: 3;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
 

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;
@@ -55,7 +55,7 @@ const ToggleLabel = styled.div`
 `
 
 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/PositionPreview/index.tsx

@@ -10,9 +10,9 @@ import { Break } from 'components/earn/styled'
 import RateToggle from 'components/RateToggle'
 import { RowBetween, RowFixed } from 'components/Row'
 import JSBI from 'jsbi'
-import { ReactNode, useCallback, useContext, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
-import { ThemeContext } from 'styled-components/macro'
+import { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
@@ -30,7 +30,7 @@ export const PositionPreview = ({
   baseCurrencyDefault?: Currency | undefined
   ticksAtLimit: { [bound: string]: boolean | undefined }
 }) => {
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
 
   const currency0 = unwrappedToken(position.pool.token0)
   const currency1 = unwrappedToken(position.pool.token1)

src/components/ProgressSteps/index.tsx

@@ -1,6 +1,4 @@
-import { useContext } from 'react'
-import styled from 'styled-components/macro'
-import { ThemeContext } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
 import { AutoColumn } from '../Column'
@@ -54,7 +52,7 @@ interface ProgressCirclesProps {
  * @param steps  array of booleans where true means step is complete
  */
 export default function ProgressCircles({ steps, disabled = false, ...rest }: ProgressCirclesProps) {
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
 
   return (
     <Wrapper justify={'center'} {...rest}>

src/components/QuestionHelper/index.tsx

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

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -1,4 +1,5 @@
 import { Trans } from '@lingui/macro'
+import { Protocol } from '@uniswap/router-sdk'
 import { Currency } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
@@ -73,6 +74,10 @@ const ProtocolBadge = styled(Badge)`
   z-index: ${Z_INDEX.sticky + 1};
 `
 
+const MixedProtocolBadge = styled(ProtocolBadge)`
+  width: 60px;
+`
+
 const BadgeText = styled(ThemedText.DeprecatedSmall)`
   word-break: normal;
 `
@@ -109,9 +114,15 @@ function Route({ entry: { percent, path, protocol } }: { entry: RoutingDiagramEn
         <DotColor />
       </DottedLine>
       <OpaqueBadge>
-        <ProtocolBadge>
-          <BadgeText fontSize={12}>{protocol.toUpperCase()}</BadgeText>
-        </ProtocolBadge>
+        {protocol === Protocol.MIXED ? (
+          <MixedProtocolBadge>
+            <BadgeText fontSize={12}>{'V3 + V2'}</BadgeText>
+          </MixedProtocolBadge>
+        ) : (
+          <ProtocolBadge>
+            <BadgeText fontSize={12}>{protocol.toUpperCase()}</BadgeText>
+          </ProtocolBadge>
+        )}
         <BadgeText fontSize={14} style={{ minWidth: 'auto' }}>
           {percent.toSignificant(2)}%
         </BadgeText>

src/components/SearchModal/CommonBases.tsx

@@ -6,32 +6,45 @@ import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { currencyId } from 'utils/currencyId'
 
 const MobileWrapper = styled(AutoColumn)`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
 `
 
-const BaseWrapper = styled.div<{ disable?: boolean }>`
-  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.deprecated_bg3)};
-  border-radius: 10px;
+const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
+  border: 1px solid
+    ${({ theme, disable, redesignFlag }) =>
+      disable
+        ? redesignFlag
+          ? theme.accentAction
+          : 'transparent'
+        : redesignFlag
+        ? theme.backgroundOutline
+        : theme.deprecated_bg3};
+  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '10px')};
   display: flex;
   padding: 6px;
+  padding-right: 12px;
 
   align-items: center;
   :hover {
     cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable }) => !disable && theme.deprecated_bg2};
+    background-color: ${({ theme, disable, redesignFlag }) =>
+      (redesignFlag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
   }
 
-  color: ${({ theme, disable }) => disable && theme.deprecated_text3};
-  background-color: ${({ theme, disable }) => disable && theme.deprecated_bg3};
-  filter: ${({ disable }) => disable && 'grayscale(1)'};
+  color: ${({ theme, disable, redesignFlag }) =>
+    disable && (redesignFlag ? theme.accentAction : theme.deprecated_text3)};
+  background-color: ${({ theme, disable, redesignFlag }) =>
+    disable && (redesignFlag ? theme.accentActionSoft : theme.deprecated_bg3)};
+  filter: ${({ disable, redesignFlag }) => disable && !redesignFlag && 'grayscale(1)'};
 `
 
 const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({
@@ -60,6 +73,8 @@ export default function CommonBases({
   isAddressSearch: string | false
 }) {
   const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   return bases.length > 0 ? (
     <MobileWrapper gap="md">
@@ -80,6 +95,7 @@ export default function CommonBases({
                 onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
                 onClick={() => !isSelected && onSelect(currency)}
                 disable={isSelected}
+                redesignFlag={redesignFlagEnabled}
                 key={currencyId(currency)}
               >
                 <CurrencyLogoFromList currency={currency} />

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

@@ -26,6 +26,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: flex-start;
 }
 
+.c5 {
+  display: grid;
+  grid-auto-rows: auto;
+}
+
 .c1 {
   width: 100%;
   display: -webkit-box;
@@ -50,6 +55,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: space-between;
 }
 
+.c8 {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .c3 {
   padding: 4px 20px;
   height: 56px;
@@ -65,24 +76,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 }
 
 .c6 {
-  max-width: 90%;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <div
     style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
   >
@@ -94,12 +93,16 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=DAI
         <div
           class="c4"
+        >
+          CurrencyLogo currency=DAI
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -114,19 +117,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             DAI
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
       <div
         class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=USDC
         <div
           class="c4"
+        >
+          CurrencyLogo currency=USDC
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -141,19 +155,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             USDC
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
       <div
         class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
         style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
         tabindex="0"
       >
-        CurrencyLogo currency=WBTC
         <div
           class="c4"
+        >
+          CurrencyLogo currency=WBTC
+        </div>
+        <div
+          class="c5"
         >
           <div
-            class="c5"
+            class="c0 c1"
           >
             <div
               class="c6 css-vurnku"
@@ -168,7 +193,14 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             WBTC
           </div>
         </div>
-        <span />
+        <div
+          class="c4"
+        >
+          <div
+            class="c0 c1 c8"
+            style="justify-self: flex-end;"
+          />
+        </div>
       </div>
     </div>
   </div>

src/components/SearchModal/CurrencyList/index.tsx

@@ -7,12 +7,13 @@ import { LightGreyCard } from 'components/Card'
 import QuestionHelper from 'components/QuestionHelper'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
-import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
-import useTheme from 'hooks/useTheme'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
+import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import TokenListLogo from '../../../assets/svg/tokenlist.svg'
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
@@ -21,10 +22,10 @@ import { useCombinedActiveList } from '../../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
 import { ThemedText } from '../../../theme'
 import { isTokenOnList } from '../../../utils'
-import Column from '../../Column'
+import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../CurrencyLogo'
 import Loader from '../../Loader'
-import { RowBetween, RowFixed } from '../../Row'
+import Row, { RowBetween, RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
 import ImportRow from '../ImportRow'
 import { LoadingRows, MenuItem } from '../styleds'
@@ -33,6 +34,13 @@ function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
 }
 
+const CheckIcon = styled(Check)`
+  height: 20px;
+  width: 20px;
+  margin-left: 4px;
+  color: ${({ theme }) => theme.accentAction};
+`
+
 const StyledBalanceText = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
@@ -41,7 +49,6 @@ const StyledBalanceText = styled(Text)`
 `
 
 const CurrencyName = styled(Text)`
-  max-width: 90%;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -82,14 +89,9 @@ const TokenListLogoWrapper = styled.img`
   height: 20px;
 `
 
-const NameContainer = styled.div`
-  display: flex;
-  align-items: center;
-`
-
 function TokenTags({ currency }: { currency: Currency }) {
   if (!(currency instanceof WrappedTokenInfo)) {
-    return <span />
+    return null
   }
 
   const tags = currency.tags
@@ -126,7 +128,7 @@ function CurrencyRow({
   eventProperties,
 }: {
   currency: Currency
-  onSelect: () => void
+  onSelect: (hasWarning: boolean) => void
   isSelected: boolean
   otherSelected: boolean
   style: CSSProperties
@@ -140,7 +142,9 @@ function CurrencyRow({
   const customAdded = useIsUserAddedToken(currency)
   const balance = useCurrencyBalance(account ?? undefined, currency)
   const warning = currency.isNative ? null : checkWarning(currency.address)
-  const phase0Flag = usePhase0Flag()
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+  const tokenSafetyFlag = useTokenSafetyFlag()
 
   // only show add or remove buttons if not on selected list
   return (
@@ -152,19 +156,23 @@ function CurrencyRow({
     >
       <MenuItem
         tabIndex={0}
+        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}
       >
-        <CurrencyLogo currency={currency} size={'24px'} />
         <Column>
-          <NameContainer>
+          <CurrencyLogo currency={currency} size={'24px'} />
+        </Column>
+        <AutoColumn>
+          <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
-            {phase0Flag === Phase0Variant.Enabled && <TokenSafetyIcon warning={warning} />}
-          </NameContainer>
+
+            {tokenSafetyFlag === TokenSafetyVariant.Enabled && <TokenSafetyIcon warning={warning} />}
+          </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (
               <Trans>{currency.symbol} • Added by user</Trans>
@@ -172,12 +180,24 @@ function CurrencyRow({
               currency.symbol
             )}
           </ThemedText.DeprecatedDarkGray>
+        </AutoColumn>
+        <Column>
+          <RowFixed style={{ justifySelf: 'flex-end' }}>
+            <TokenTags currency={currency} />
+          </RowFixed>
         </Column>
-        <TokenTags currency={currency} />
-        {showCurrencyAmount && (
+        {showCurrencyAmount ? (
           <RowFixed style={{ justifySelf: 'flex-end' }}>
             {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
+            {redesignFlagEnabled && isSelected && <CheckIcon />}
           </RowFixed>
+        ) : (
+          redesignFlagEnabled &&
+          isSelected && (
+            <RowFixed style={{ justifySelf: 'flex-end' }}>
+              <CheckIcon />
+            </RowFixed>
+          )
         )}
       </MenuItem>
     </TraceEvent>
@@ -259,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
@@ -288,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

@@ -5,9 +5,9 @@ import { useWeb3React } from '@web3-react/core'
 import { EventName, ModalName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { sendEvent } from 'components/analytics'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import useTheme from 'hooks/useTheme'
 import useToggle from 'hooks/useToggle'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
@@ -18,7 +18,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import { useAllTokenBalances } from 'state/connection/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useAllTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
 import { ButtonText, CloseIcon, IconWrapper, ThemedText } from '../../theme'
@@ -30,7 +30,8 @@ import CurrencyList from './CurrencyList'
 import ImportRow from './ImportRow'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 
-const ContentWrapper = styled(Column)`
+const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
   width: 100%;
   flex: 1 1;
   position: relative;
@@ -50,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
@@ -73,6 +74,9 @@ export function CurrencySearch({
   showImportView,
   setImportToken,
 }: CurrencySearchProps) {
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+
   const { chainId } = useWeb3React()
   const theme = useTheme()
 
@@ -132,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]
   )
@@ -191,7 +195,7 @@ export function CurrencySearch({
   }, [])
 
   return (
-    <ContentWrapper>
+    <ContentWrapper redesignFlag={redesignFlagEnabled}>
       <Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
         <PaddedColumn gap="16px">
           <RowBetween>
@@ -206,6 +210,7 @@ export function CurrencySearch({
               id="token-search-input"
               placeholder={t`Search name or paste address`}
               autoComplete="off"
+              redesignFlag={redesignFlagEnabled}
               value={searchQuery}
               ref={inputRef as RefObject<HTMLInputElement>}
               onChange={handleInput}
@@ -222,7 +227,7 @@ export function CurrencySearch({
             />
           )}
         </PaddedColumn>
-        <Separator />
+        <Separator redesignFlag={redesignFlagEnabled} />
         {searchToken && !searchTokenIsAdded ? (
           <Column style={{ padding: '20px 0', height: '100%' }}>
             <ImportRow token={searchToken} showImportView={showImportView} setImportToken={setImportToken} />
@@ -256,20 +261,26 @@ export function CurrencySearch({
             </ThemedText.DeprecatedMain>
           </Column>
         )}
-        <Footer>
-          <Row justify="center">
-            <ButtonText onClick={showManageView} color={theme.deprecated_primary1} className="list-token-manage-button">
-              <RowFixed>
-                <IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
-                  <Edit />
-                </IconWrapper>
-                <ThemedText.DeprecatedMain color={theme.deprecated_primaryText1}>
-                  <Trans>Manage Token Lists</Trans>
-                </ThemedText.DeprecatedMain>
-              </RowFixed>
-            </ButtonText>
-          </Row>
-        </Footer>
+        {!redesignFlagEnabled && (
+          <Footer>
+            <Row justify="center">
+              <ButtonText
+                onClick={showManageView}
+                color={theme.deprecated_primary1}
+                className="list-token-manage-button"
+              >
+                <RowFixed>
+                  <IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
+                    <Edit />
+                  </IconWrapper>
+                  <ThemedText.DeprecatedMain color={theme.deprecated_primaryText1}>
+                    <Trans>Manage Token Lists</Trans>
+                  </ThemedText.DeprecatedMain>
+                </RowFixed>
+              </ButtonText>
+            </Row>
+          </Footer>
+        )}
       </Trace>
     </ContentWrapper>
   )

src/components/SearchModal/CurrencySearchModal.tsx

@@ -1,13 +1,17 @@
 import { Currency, Token } from '@uniswap/sdk-core'
 import { TokenList } from '@uniswap/token-lists'
 import TokenSafety from 'components/TokenSafety'
+import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
 import usePrevious from 'hooks/usePrevious'
-import { 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 Modal from '../Modal'
 import { CurrencySearch } from './CurrencySearch'
 import { ImportList } from './ImportList'
+import { ImportToken } from './ImportToken'
 import Manage from './Manage'
 
 interface CurrencySearchModalProps {
@@ -26,9 +30,10 @@ export enum CurrencyModalView {
   manage,
   importToken,
   importList,
+  tokenSafety,
 }
 
-export default function CurrencySearchModal({
+export default memo(function CurrencySearchModal({
   isOpen,
   onDismiss,
   onCurrencySelect,
@@ -40,6 +45,7 @@ export default function CurrencySearchModal({
 }: CurrencySearchModalProps) {
   const [modalView, setModalView] = useState<CurrencyModalView>(CurrencyModalView.manage)
   const lastOpen = useLast(isOpen)
+  const userAddedTokens = useUserAddedTokens()
 
   useEffect(() => {
     if (isOpen && !lastOpen) {
@@ -47,12 +53,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
@@ -65,6 +87,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(
@@ -93,14 +118,32 @@ export default function CurrencySearchModal({
         />
       )
       break
+    case CurrencyModalView.tokenSafety:
+      minHeight = 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
+        if (tokenSafetyFlag === TokenSafetyVariant.Enabled) {
+          showTokenSafetySpeedbump(importToken)
+        }
         content = (
-          <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}
           />
         )
       }
@@ -128,4 +171,4 @@ export default function CurrencySearchModal({
       {content}
     </Modal>
   )
-}
+})

src/components/SearchModal/ImportList.tsx

@@ -8,14 +8,13 @@ import ListLogo from 'components/ListLogo'
 import { AutoRow, RowBetween, RowFixed } from 'components/Row'
 import { SectionBreak } from 'components/swap/styleds'
 import { useFetchListCallback } from 'hooks/useFetchListCallback'
-import useTheme from 'hooks/useTheme'
 import { transparentize } from 'polished'
 import { useCallback, useState } from 'react'
 import { AlertTriangle, ArrowLeft } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import { enableList, removeList } from 'state/lists/actions'
 import { useAllLists } from 'state/lists/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { CloseIcon, ThemedText } from 'theme'
 
 import { ExternalLink } from '../../theme'

src/components/SearchModal/ImportRow.tsx

@@ -6,10 +6,9 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import ListLogo from 'components/ListLogo'
 import { AutoRow, RowFixed } from 'components/Row'
 import { useIsTokenActive, useIsUserAddedToken } from 'hooks/Tokens'
-import useTheme from 'hooks/useTheme'
 import { CSSProperties } from 'react'
 import { CheckCircle } from 'react-feather'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/SearchModal/ImportToken.tsx

@@ -8,10 +8,9 @@ import { AutoColumn } from 'components/Column'
 import { RowBetween } from 'components/Row'
 import { SectionBreak } from 'components/swap/styleds'
 import { useUnsupportedTokens } from 'hooks/Tokens'
-import useTheme from 'hooks/useTheme'
 import { AlertCircle, ArrowLeft } from 'react-feather'
 import { useAddUserToken } from 'state/user/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 import { CloseIcon, ThemedText } from 'theme'
 
 import BlockedToken from './BlockedToken'

src/components/SearchModal/ManageLists.tsx

@@ -12,11 +12,10 @@ import { ChangeEvent, memo, useCallback, useEffect, useMemo, useRef, useState }
 import { CheckCircle, Settings } from 'react-feather'
 import { usePopper } from 'react-popper'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
-import styled from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import useTheme from '../../hooks/useTheme'
 import useToggle from '../../hooks/useToggle'
 import { acceptListUpdate, disableList, enableList, removeList } from '../../state/lists/actions'
 import { useActiveListUrls, useAllLists, useIsListActive } from '../../state/lists/hooks'