fix: failing cypress test (#5715)

* fix failing cypress test for 404 page

.env

@@ -1,9 +1,7 @@
-# These API keys are intentionally public. Please do not report them - thank you for your concern.
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
-REACT_APP_AWS_API_ACCESS_KEY="AKIAYJJWW6AQ47ODATHN"
-REACT_APP_AWS_API_ACCESS_SECRET="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"
-REACT_APP_AWS_X_API_KEY="z9dReS5UtHu7iTrUsTuWRozLthi3AxOZlvobrIdr14"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
-REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
+REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
+REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
+ESLINT_NO_DEV_ERRORS=true

.eslintignore

@@ -0,0 +1,2 @@
+*.config.ts
+*.d.ts

.eslintrc.json

@@ -11,6 +11,14 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
     }
   },
   "ignorePatterns": [
@@ -38,10 +46,12 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:import/typescript"
   ],
-  "plugins": ["simple-import-sort", "unused-imports"],
+  "plugins": ["import", "simple-import-sort", "unused-imports"],
   "rules": {
+    "import/no-unused-modules": [2, { "unusedExports": true }],
     "unused-imports/no-unused-imports": "error",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
@@ -52,7 +62,7 @@
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/react-in-jsx-scope": "off",
-    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
+    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
     "object-shorthand": ["error", "always"],
     "no-restricted-imports": [
       "error",

.github/workflows/release.yaml

@@ -71,29 +71,6 @@ jobs:
         with:
           cidv0: ${{ steps.pinata.outputs.hash }}
 
-      - uses: actions/cache@v3
-        id: cypress-cache
-        with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
-      - uses: cypress-io/github-action@v4
-        with:
-          install: false
-          browser: chrome
-          config-file: cypress.release.config.ts
-          config: baseUrl=https://cloudflare-ipfs.com/ipfs/${{ steps.pinata.outputs.hash }}
-
-      - name: Update DNS with new IPFS hash
-        env:
-          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
-          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
-          CLOUDFLARE_GATEWAY_ID: ${{ secrets.CLOUDFLARE_GATEWAY_ID }}
-        uses: Uniswap/cloudflare-update-web3-gateway@b3205288b1c6d0acb63fa3bd8fb686c72a9e3f3e
-        with:
-          cid: ${{ steps.pinata.outputs.hash }}
-
       - name: Release
         uses: actions/create-release@v1.1.0
         env:
@@ -119,3 +96,28 @@ jobs:
             - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
 
             ${{ needs.tag.outputs.changelog }}
+
+      - name: Setup node@16 (required by Cloudflare Pages)
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Update Cloudflare Pages deployment
+        uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: build
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload source maps to Sentry
+        uses: getsentry/action-release@bd5f874fcda966ba48139b0140fb3ec0cb3aabdd 
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+        with:
+          environment: production
+          sourcemaps: './build/static/js'
+          url_prefix: '/static/js'

.github/workflows/revert.yaml

@@ -0,0 +1,27 @@
+name: Revert
+on:
+  # manual trigger
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn prepare
+      - run: yarn build
+
+      - name: Setup node@16 (required by Cloudflare Pages)
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Update Cloudflare Pages deployment
+        uses: cloudflare/pages-action@364c7ca09a4b57837c5967871d64a2c31adb8c0d
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: build
+          githubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - run: npx yarn-deduplicate --strategy=highest --list --fail
+      - run: yarn yarn-deduplicate --strategy=highest --list --fail
 
   unit-tests:
     runs-on: ubuntu-latest

.nvmrc

@@ -1 +1 @@
-14
+14.20.0

.snyk

@@ -0,0 +1,25 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.25.0
+# ignores vulnerabilities until expiry date; change duration by modifying expiry date
+ignore:
+  SNYK-JS-OPENZEPPELINCONTRACTS-2964946:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:25:57.347Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2958047:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:09.720Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2958050:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:17.702Z
+  SNYK-JS-OPENZEPPELINCONTRACTS-2965580:
+    - '*':
+        reason: None Given
+        expires: 2099-01-01T00:00:00.000Z
+        created: 2022-12-08T16:26:34.283Z
+patch: {}

cypress.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   projectId: 'yp82ef',
   videoUploadOnPasses: false,
-  defaultCommandTimeout: 10000,
+  defaultCommandTimeout: 24000, // 2x average block time
   chromeWebSecurity: false,
   e2e: {
     setupNodeEvents(on, config) {

cypress/e2e/landing.test.ts

@@ -5,10 +5,6 @@ describe('Landing Page', () => {
     cy.screenshot()
   })
 
-  it('redirects to url /swap', () => {
-    cy.url().should('include', '/swap')
-  })
-
   it('allows navigation to pool', () => {
     cy.get('#pool-nav-link').click()
     cy.url().should('include', '/pool')

cypress/e2e/nfts.test.ts

@@ -0,0 +1,64 @@
+import { getTestSelector } from '../utils'
+
+const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+
+describe('Testing nfts', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load nft leaderboard', () => {
+    cy.get(getTestSelector('nft-nav')).first().click()
+    cy.get(getTestSelector('nft-nav')).first().should('exist')
+    cy.get(getTestSelector('nft-nav')).first().click()
+    cy.get(getTestSelector('nft-trending-collection')).its('length').should('be.gte', 25)
+  })
+
+  it('should load pudgy penguin collection page', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-collection-asset')).should('exist')
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('not.exist')
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('exist')
+  })
+
+  it('should be able to open bag and open sweep', () => {
+    cy.get(getTestSelector('nft-sweep-button')).first().click()
+    cy.get(getTestSelector('nft-empty-bag')).should('exist')
+    cy.get(getTestSelector('nft-sweep-slider')).should('exist')
+  })
+
+  it('should be able to navigate to activity', () => {
+    cy.get(getTestSelector('nft-activity')).first().click()
+    cy.get(getTestSelector('nft-activity-row')).should('exist')
+  })
+
+  it('should go to the details page', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
+    cy.get(getTestSelector('nft-details-link')).first().click()
+    cy.get(getTestSelector('nft-details-traits')).should('exist')
+    cy.get(getTestSelector('nft-details-activity')).should('exist')
+    cy.get(getTestSelector('nft-details-description')).should('exist')
+    cy.get(getTestSelector('nft-details-asset-details')).should('exist')
+  })
+
+  it('should toggle buy now on details page', () => {
+    cy.get(getTestSelector('nft-details-description-text')).should('exist')
+    cy.get(getTestSelector('nft-details-description')).click()
+    cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
+    cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
+    cy.get(getTestSelector('nft-bag')).should('exist')
+  })
+
+  it('should go view my nfts', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('nft-view-self-nfts')).click()
+    cy.get(getTestSelector('nft-explore-nfts-button')).should('exist')
+    cy.get(getTestSelector('nft-no-nfts-selected')).should('exist')
+    cy.get(getTestSelector('nft-bag-close-icon')).click()
+    cy.get(getTestSelector('nft-explore-nfts-button')).click()
+    cy.get(getTestSelector('nft-welcome-modal')).should('exist')
+  })
+})

cypress/e2e/redirects.test.ts

@@ -3,8 +3,8 @@ describe('Redirect', () => {
     cy.visit('/create-proposal')
     cy.url().should('match', /\/vote\/create-proposal/)
   })
-  it('should redirect to /swap when visiting nonexist url', () => {
+  it('should redirect to /not-found when visiting nonexist url', () => {
     cy.visit('/none-exist-url')
-    cy.url().should('match', /\/swap/)
+    cy.url().should('match', /\/not-found/)
   })
 })

cypress/e2e/remove-liquidity.test.ts

@@ -22,10 +22,4 @@ describe('Remove Liquidity', () => {
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'WETH')
   })
-
-  it.skip('token not in storage is loaded', () => {
-    cy.visit('/remove/v2/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'SKL')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
-  })
 })

cypress/e2e/token.test.ts

@@ -0,0 +1,20 @@
+import { getTestSelector, getTestSelectorStartsWith } from '../utils'
+
+describe('Testing tokens on uniswap page', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load token leaderboard', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
+  })
+
+  it('should load go to ethereum token and return to token list page', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('token-table-row-Ether')).click()
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-return-button')).click()
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
+  })
+})

cypress/e2e/wallet-dropdown.test.ts

@@ -1,9 +1,8 @@
-import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
 import { getTestSelector } from '../utils'
 
 describe('Wallet Dropdown', () => {
   before(() => {
-    cy.visit('/', { featureFlags: [FeatureFlag.navBar, FeatureFlag.tokenSafety] })
+    cy.visit('/pool')
   })
 
   it('should change the theme', () => {
@@ -31,6 +30,8 @@ describe('Wallet Dropdown', () => {
     cy.get(getTestSelector('wallet-disconnect')).click()
     cy.get(getTestSelector('wallet-select-theme')).click()
     cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
+    cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
   })
 
   it('should select a language when not connected', () => {

cypress/support/e2e.ts

@@ -65,6 +65,17 @@ beforeEach(() => {
     res.headers['origin'] = 'http://localhost:3000'
     res.continue()
   })
+
+  // Graphql security policies are based on Origin headers.
+  // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
+  cy.intercept('https://api.uniswap.org/v1/graphql', (res) => {
+    res.headers['origin'] = 'https://app.uniswap.org'
+    res.continue()
+  })
+  cy.intercept('https://beta.api.uniswap.org/v1/graphql', (res) => {
+    res.headers['origin'] = 'https://app.uniswap.org'
+    res.continue()
+  })
 })
 
 Cypress.on('uncaught:exception', (_err, _runnable) => {

cypress/support/ethereum.ts

@@ -12,12 +12,7 @@ import { Wallet } from '@ethersproject/wallet'
 const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19'
 
 // address of the above key
-export const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
-
-export const TEST_ADDRESS_NEVER_USE_SHORTENED = `${TEST_ADDRESS_NEVER_USE.substr(
-  0,
-  6
-)}...${TEST_ADDRESS_NEVER_USE.substr(-4, 4)}`
+const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
 
 const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
 const signer = new Wallet(TEST_PRIVATE_KEY, provider)

cypress/utils/index.ts

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

package.json

@@ -20,6 +20,7 @@
     "start": "craco start",
     "build": "craco build",
     "serve": "serve build -l 3000",
+    "deduplicate": "yarn-deduplicate --strategy=highest",
     "lint": "yarn eslint .",
     "test": "craco test --coverage",
     "cypress:open": "cypress open --browser chrome --e2e",
@@ -98,7 +99,9 @@
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-better-styled-components": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -113,7 +116,8 @@
     "relay-compiler": "^14.1.0",
     "serve": "^11.3.2",
     "typechain": "^5.0.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.3.0",
@@ -130,26 +134,29 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@sentry/react": "7.20.1",
     "@types/react-relay": "^13.0.2",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@uniswap/analytics": "1.1.1",
-    "@uniswap/analytics-events": "1.1.0",
+    "@uniswap/analytics": "1.2.0",
+    "@uniswap/analytics-events": "1.3.1",
     "@uniswap/conedison": "^1.1.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
+    "@uniswap/permit2-sdk": "1.2.0",
     "@uniswap/redux-multicall": "^1.1.8",
     "@uniswap/router-sdk": "^1.3.0",
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/smart-order-router": "^2.10.0",
     "@uniswap/token-lists": "^1.0.0-beta.30",
+    "@uniswap/universal-router-sdk": "1.3.0",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.19.2",
+    "@uniswap/widgets": "2.22.11",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -199,7 +206,6 @@
     "qs": "^6.9.4",
     "rc-slider": "^10.0.1",
     "react": "^18.2.0",
-    "react-confetti": "^6.0.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-ga4": "^1.4.1",
@@ -210,6 +216,7 @@
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
     "react-relay": "^14.1.0",
+    "react-relay-network-modern": "^6.2.1",
     "react-router-dom": "^6.3.0",
     "react-spring": "^9.5.5",
     "react-table": "^7.8.0",

public/index.html

@@ -89,7 +89,9 @@
         z-index: -1;
       }
 
-      html {
+      html,
+      body,
+      #root {
         min-height: 100%;
       }
 

src/abis/uniswap-nft-airdrop-claim.json

@@ -0,0 +1,218 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "token_",
+        "type": "address"
+      },
+      {
+        "internalType": "bytes32",
+        "name": "merkleRoot_",
+        "type": "bytes32"
+      },
+      {
+        "internalType": "uint256",
+        "name": "endTime_",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [],
+    "name": "AlreadyClaimed",
+    "type": "error"
+  },
+  {
+    "inputs": [],
+    "name": "ClaimWindowFinished",
+    "type": "error"
+  },
+  {
+    "inputs": [],
+    "name": "EndTimeInPast",
+    "type": "error"
+  },
+  {
+    "inputs": [],
+    "name": "InvalidProof",
+    "type": "error"
+  },
+  {
+    "inputs": [],
+    "name": "NoWithdrawDuringClaim",
+    "type": "error"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "index",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "Claimed",
+    "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"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "index",
+        "type": "uint256"
+      },
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bytes32[]",
+        "name": "merkleProof",
+        "type": "bytes32[]"
+      }
+    ],
+    "name": "claim",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "endTime",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "index",
+        "type": "uint256"
+      }
+    ],
+    "name": "isClaimed",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "merkleRoot",
+    "outputs": [
+      {
+        "internalType": "bytes32",
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "token",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/assets/svg/eye.svg

@@ -0,0 +1,4 @@
+<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 19.9997C1.3335 19.9997 10.6668 1.33301 27.0002 1.33301C43.3335 1.33301 52.6668 19.9997 52.6668 19.9997C52.6668 19.9997 43.3335 38.6663 27.0002 38.6663C10.6668 38.6663 1.3335 19.9997 1.3335 19.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.0002 26.9997C30.8662 26.9997 34.0002 23.8657 34.0002 19.9997C34.0002 16.1337 30.8662 12.9997 27.0002 12.9997C23.1342 12.9997 20.0002 16.1337 20.0002 19.9997C20.0002 23.8657 23.1342 26.9997 27.0002 26.9997Z" stroke="#98A1C0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/AccountDetails/Transaction.tsx

@@ -27,12 +27,12 @@ const TransactionState = styled(ExternalLink)<{ pending: boolean; success?: bool
   padding: 0.25rem 0rem;
   font-weight: 500;
   font-size: 0.825rem;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
 `
 
 const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
   color: ${({ pending, success, theme }) =>
-    pending ? theme.deprecated_primary1 : success ? theme.deprecated_green1 : theme.deprecated_red1};
+    pending ? theme.accentAction : success ? theme.accentSuccess : theme.accentFailure};
 `
 
 export default function Transaction({ hash }: { hash: string }) {

src/components/AccountDetails/index.tsx

@@ -24,7 +24,7 @@ const HeaderRow = styled.div`
   ${flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
-  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.accentAction : 'inherit')};
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     padding: 1rem;
   `};
@@ -65,7 +65,7 @@ const AccountGroupingRow = styled.div`
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 
   div {
     ${flexColumnNoWrap};
@@ -95,14 +95,14 @@ const LowerSection = styled.div`
   padding: 1.5rem;
   flex-grow: 1;
   overflow: auto;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 
   h5 {
     margin: 0;
     font-weight: 400;
-    color: ${({ theme }) => theme.deprecated_text3};
+    color: ${({ theme }) => theme.textTertiary};
   }
 `
 
@@ -129,14 +129,14 @@ const AccountControl = styled.div`
 `
 
 const AddressLink = styled(ExternalLink)`
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   margin-left: 1rem;
   font-size: 0.825rem;
   display: flex;
   gap: 6px;
   text-decoration: none !important;
   :hover {
-    color: ${({ theme }) => theme.deprecated_text2};
+    color: ${({ theme }) => theme.textSecondary};
   }
 `
 
@@ -160,7 +160,7 @@ const WalletName = styled.div`
   width: initial;
   font-size: 0.825rem;
   font-weight: 500;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 const TransactionListWrapper = styled.div`
@@ -316,7 +316,7 @@ export default function AccountDetails({
         </LowerSection>
       ) : (
         <LowerSection>
-          <ThemedText.DeprecatedBody color={theme.deprecated_text1}>
+          <ThemedText.DeprecatedBody color={theme.textPrimary}>
             <Trans>Your transactions will appear here...</Trans>
           </ThemedText.DeprecatedBody>
         </LowerSection>

src/components/AccountDetailsV2/index.tsx

@@ -4,6 +4,7 @@ import { SupportedChainId } from 'constants/chains'
 import { useMemo } from 'react'
 import { AlertTriangle, CheckCircle } from 'react-feather'
 import styled from 'styled-components/macro'
+import { ExternalLink } from 'theme'
 import { colors } from 'theme/colors'
 
 import { TransactionDetails } from '../../state/transactions/types'
@@ -17,13 +18,14 @@ export enum TransactionState {
   Failed,
 }
 
-const Grid = styled.a`
+const Grid = styled(ExternalLink)<{ isLastTransactionInList?: boolean }>`
   cursor: pointer;
   display: grid;
   grid-template-columns: 44px auto 24px;
   width: 100%;
   text-decoration: none;
-  border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  border-bottom: ${({ theme, isLastTransactionInList }) =>
+    isLastTransactionInList ? 'none' : `1px solid ${theme.backgroundOutline}`};
   padding: 12px;
 
   &:hover {
@@ -46,7 +48,13 @@ const IconStyleWrap = styled.span`
   height: 16px;
 `
 
-export const TransactionSummary = ({ transactionDetails }: { transactionDetails: TransactionDetails }) => {
+export const TransactionSummary = ({
+  transactionDetails,
+  isLastTransactionInList = false,
+}: {
+  transactionDetails: TransactionDetails
+  isLastTransactionInList?: boolean
+}) => {
   const { chainId = 1 } = useWeb3React()
   const tx = transactionDetails
   const { explorer } = getChainInfoOrDefault(chainId ? chainId : SupportedChainId.MAINNET)
@@ -67,7 +75,7 @@ export const TransactionSummary = ({ transactionDetails }: { transactionDetails:
   const link = `${explorer}tx/${hash}`
 
   return chainId ? (
-    <Grid href={link} target="_blank">
+    <Grid href={link} target="_blank" isLastTransactionInList={isLastTransactionInList}>
       <LogoView info={info} />
       <TextContainer as="span">
         <TransactionBody info={info} transactionState={transactionState} />

src/components/AddressInputPanel/index.tsx

@@ -26,7 +26,7 @@ const ContainerRow = styled.div<{ error: boolean }>`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  border: 1px solid ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_bg2)};
+  border: 1px solid ${({ error, theme }) => (error ? theme.accentFailure : theme.backgroundInteractive)};
   transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
     color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
   background-color: ${({ theme }) => theme.deprecated_bg1};
@@ -45,7 +45,7 @@ const Input = styled.input<{ error?: boolean }>`
   width: 0;
   background-color: ${({ theme }) => theme.deprecated_bg1};
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -109,7 +109,7 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.DeprecatedBlack color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
+              <ThemedText.DeprecatedBlack color={theme.textSecondary} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.DeprecatedBlack>
               {address && chainId && (

src/components/AidropModal/index.tsx

@@ -1,233 +0,0 @@
-import airdropBackgroundv2 from 'assets/images/airdopBackground.png'
-import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
-import { OpacityHoverState } from 'components/Common'
-import Loader from 'components/Loader'
-import { ChevronRightIcon } from 'nft/components/icons'
-import { useState } from 'react'
-import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import styled from 'styled-components/macro'
-import { CloseIcon, ThemedText } from 'theme'
-
-import Modal from '../Modal'
-
-const ModalWrap = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const Body = styled.div`
-  padding: 28px 20px 20px 20px;
-`
-
-const ClaimButton = styled(ThemeButton)`
-  width: 100%;
-  background-color: ${({ theme }) => theme.accentAction};
-  margin-top: 40px;
-  border-radius: 12px;
-  color: ${({ theme }) => theme.white};
-`
-
-const Line = styled.div`
-  height: 1px;
-  width: 100%;
-  background-color: ${({ theme }) => theme.white};
-  opacity: 0.24;
-  margin-top: 12px;
-  margin-bottom: 12px;
-`
-
-const LinkWrap = styled.a`
-  text-decoration: none;
-  ${OpacityHoverState}
-`
-
-const ImageContainer = styled.div`
-  position: relative;
-  width: 100%;
-`
-
-const StyledImage = styled.img`
-  width: 100%;
-  height: 170px;
-`
-
-const USDCLabel = styled.div`
-  font-weight: 700;
-  font-size: 36px;
-  line-height: 44px;
-  margin-top: 8px;
-  color: white;
-`
-
-const TextContainer = styled.div`
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  right: 16px;
-`
-
-const RewardsDetailsContainer = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-`
-
-const CurrencyText = styled.span`
-  color: white;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 14.5px;
-`
-
-const ClaimContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  height: 380px;
-  padding: 60px 28px;
-  padding-bottom: 20px;
-`
-
-const SuccessText = styled.div`
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  margin-top: 24px;
-  margin-bottom: 8px;
-`
-
-const EtherscanLink = styled.a`
-  text-decoration: none;
-
-  ${OpacityHoverState}
-`
-
-const CloseButton = styled(ThemeButton)`
-  max-width: 68px;
-  margin-top: auto;
-  margin-left: auto;
-  margin-right: auto;
-`
-
-const SyledCloseIcon = styled(CloseIcon)`
-  float: right;
-  height: 24px;
-
-  ${OpacityHoverState}
-`
-
-const RewardsText = styled.span`
-  font-size: 12px;
-  line-height: 16px;
-  color: ${({ theme }) => theme.white};
-
-  &:first-child {
-    margin-bottom: 8px;
-  }
-`
-
-const RewardsInformationText = styled.span`
-  display: inline-block;
-  font-size: 14px;
-  line-height: 20px;
-  color: ${({ theme }) => theme.textPrimary};
-  margin-bottom: 28px;
-`
-
-const MainHeader = styled.span`
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: ${({ theme }) => theme.white};
-`
-
-const AirdropModal = () => {
-  const [isClaimed, setClaimed] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [totalAmount] = useState(300)
-  const isOpen = useModalIsOpen(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
-  const usdcAirdropToggle = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
-  const dismiss = () => {
-    usdcAirdropToggle()
-
-    setTimeout(() => {
-      setClaimed(false)
-    }, 500)
-  }
-
-  const submit = () => {
-    setIsSubmitting(true)
-
-    setTimeout(() => {
-      setIsSubmitting(false)
-      setClaimed(true)
-    }, 1000)
-  }
-
-  return (
-    <Modal hideBorder isOpen={isOpen} onDismiss={dismiss} maxHeight={90} maxWidth={400}>
-      <ModalWrap>
-        {isClaimed ? (
-          <ClaimContainer>
-            <ThemedText.HeadlineSmall>Congratulations!</ThemedText.HeadlineSmall>
-            <SuccessText>
-              You have successfully claimed {totalAmount} USDC. Thank you for supporting Genie.xyz.
-            </SuccessText>
-            <EtherscanLink href="https://etherscan.io/" target="_blank">
-              <ThemedText.Link>
-                <div style={{ display: 'flex', alignItems: 'center', textAlign: 'center', justifyContent: 'center' }}>
-                  <span style={{ marginRight: 8 }}>Etherscan</span>
-                  <ChevronRightIcon />
-                </div>
-              </ThemedText.Link>
-            </EtherscanLink>
-
-            <CloseButton size={ButtonSize.medium} emphasis={ButtonEmphasis.medium} onClick={dismiss}>
-              Close
-            </CloseButton>
-          </ClaimContainer>
-        ) : (
-          <>
-            <ImageContainer>
-              <TextContainer>
-                <SyledCloseIcon onClick={dismiss} stroke="white" />
-                <MainHeader>Uniswap NFT Airdrop</MainHeader>
-                <USDCLabel>{totalAmount} USDC</USDCLabel>
-                <Line />
-                <RewardsDetailsContainer>
-                  <RewardsText>Trading rewards</RewardsText> <CurrencyText>300 USDC</CurrencyText>
-                </RewardsDetailsContainer>
-                <RewardsDetailsContainer>
-                  <RewardsText>Genie NFT holder rewards</RewardsText> <CurrencyText>0</CurrencyText>
-                </RewardsDetailsContainer>
-              </TextContainer>
-              <StyledImage src={airdropBackgroundv2} />
-            </ImageContainer>
-            <Body>
-              <RewardsInformationText>
-                As a long time supporter of Genie you’ve been awarded {totalAmount} USDC tokens. Read more about Uniswap
-                NFT.
-              </RewardsInformationText>
-              <LinkWrap href="https://uniswap.org/blog/uniswap-nft-aggregator-announcement" target="_blank">
-                <ThemedText.Link>Read more about Uniswap NFT.</ThemedText.Link>
-              </LinkWrap>
-
-              <ClaimButton
-                onClick={submit}
-                size={ButtonSize.medium}
-                emphasis={ButtonEmphasis.medium}
-                disabled={isSubmitting}
-              >
-                {isSubmitting && <Loader stroke="white" />}
-                <span>Claim{isSubmitting && 'ing'} USDC</span>
-              </ClaimButton>
-            </Body>
-          </>
-        )}
-      </ModalWrap>
-    </Modal>
-  )
-}
-
-export default AirdropModal

src/components/AirdropModal/index.tsx

@@ -0,0 +1,335 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import type { TransactionResponse } from '@ethersproject/providers'
+import { useWeb3React } from '@web3-react/core'
+import uniswapNftAirdropClaim from 'abis/uniswap-nft-airdrop-claim.json'
+import airdropBackgroundv2 from 'assets/images/airdopBackground.png'
+import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
+import { OpacityHoverState } from 'components/Common'
+import Loader from 'components/Loader'
+import { UNISWAP_NFT_AIRDROP_CLAIM_ADDRESS } from 'constants/addresses'
+import { useContract } from 'hooks/useContract'
+import { ChevronRightIcon } from 'nft/components/icons'
+import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
+import { CollectionRewardsFetcher } from 'nft/queries/genie/GetAirdorpMerkle'
+import { Airdrop, Rewards } from 'nft/types/airdrop'
+import { useEffect, useState } from 'react'
+import { AlertTriangle } from 'react-feather'
+import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
+import styled from 'styled-components/macro'
+import { CloseIcon, ThemedText } from 'theme'
+
+import Modal from '../Modal'
+
+const ModalWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const Body = styled.div`
+  padding: 28px 20px 20px 20px;
+`
+
+const ClaimButton = styled(ThemeButton)`
+  width: 100%;
+  background-color: ${({ theme }) => theme.accentAction};
+  border-radius: 12px;
+  color: ${({ theme }) => theme.white};
+`
+
+const Line = styled.div`
+  height: 1px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.white};
+  opacity: 0.24;
+  margin-top: 12px;
+  margin-bottom: 12px;
+`
+
+const LinkWrap = styled.a`
+  text-decoration: none;
+  ${OpacityHoverState}
+`
+
+const ImageContainer = styled.div`
+  position: relative;
+  width: 100%;
+`
+
+const StyledImage = styled.img`
+  width: 100%;
+  height: 170px;
+`
+
+const USDCLabel = styled.div`
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 44px;
+  margin-top: 8px;
+  color: white;
+`
+
+const TextContainer = styled.div`
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  right: 16px;
+`
+
+const RewardsDetailsContainer = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`
+
+const CurrencyText = styled.span`
+  color: white;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14.5px;
+`
+
+const ClaimContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  height: 380px;
+  padding: 60px 28px;
+  padding-bottom: 20px;
+`
+
+const SuccessText = styled.div`
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 24px;
+  margin-bottom: 8px;
+`
+
+const EtherscanLink = styled.a`
+  text-decoration: none;
+
+  ${OpacityHoverState}
+`
+
+const CloseButton = styled(ThemeButton)`
+  max-width: 68px;
+  margin-top: auto;
+  margin-left: auto;
+  margin-right: auto;
+`
+
+const SyledCloseIcon = styled(CloseIcon)`
+  float: right;
+  height: 24px;
+
+  ${OpacityHoverState}
+`
+
+const Error = styled.div`
+  display: flex;
+  color: ${({ theme }) => theme.accentCritical};
+  font-weight: 500;
+  line-height: 24px;
+  border-radius: 16px;
+  padding: 12px 20px;
+  font-size: 14px;
+  align-items: center;
+  gap: 12px;
+`
+
+const ReactLinkWrap = styled.div`
+  margin-bottom: 40px;
+`
+
+const RewardsText = styled.span`
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme }) => theme.white};
+
+  &:first-child {
+    margin-bottom: 8px;
+  }
+`
+
+const RewardsInformationText = styled.span`
+  display: inline-block;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textPrimary};
+  margin-bottom: 28px;
+`
+
+const MainHeader = styled.span`
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.white};
+`
+
+const EtherscanLinkWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`
+
+enum RewardAmounts {
+  tradingRewardAmount = 300,
+  holderRewardAmount = 1000,
+  combinedAmount = 1300,
+}
+
+const AirdropModal = () => {
+  const { account, provider } = useWeb3React()
+  const [claim, setClaim] = useState<Rewards>()
+  const [isClaimed, setIsClaimed] = useState(false)
+  const [hash, setHash] = useState('')
+  const [error, setError] = useState(false)
+  const setIsClaimAvailable = useIsNftClaimAvailable((state) => state.setIsClaimAvailable)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [totalAmount, setTotalAmount] = useState(0)
+  const isOpen = useModalIsOpen(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
+  const usdcAirdropToggle = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
+  const contract = useContract(UNISWAP_NFT_AIRDROP_CLAIM_ADDRESS, uniswapNftAirdropClaim)
+
+  const displayError = () => {
+    setIsSubmitting(false)
+    setError(true)
+    setTimeout(() => {
+      setError(false)
+    }, 5000)
+  }
+
+  useEffect(() => {
+    if (account && provider && contract) {
+      ;(async () => {
+        try {
+          const { data } = await CollectionRewardsFetcher(account)
+          const claim = data.find((claim) => claim?.rewardType === Airdrop.GENIE_UNISWAP_USDC_AIRDROP)
+
+          if (!claim) return
+
+          const [isClaimed] = await contract.connect(provider).functions.isClaimed(claim?.index)
+
+          if (claim && isClaimed === false) {
+            const usdAmount = BigNumber.from(claim.amount).div(10 ** 6)
+            setClaim(claim)
+            setTotalAmount(usdAmount.toNumber())
+            setIsClaimAvailable(true)
+          }
+        } catch (err) {
+          displayError()
+        }
+      })()
+    }
+  }, [account, contract, provider, setIsClaimAvailable])
+
+  const makeClaim = async () => {
+    try {
+      if (contract && claim && claim.amount && claim.merkleProof && provider) {
+        setIsSubmitting(true)
+
+        const response: TransactionResponse = await contract
+          .connect(provider?.getSigner())
+          .functions.claim(claim.index, account, claim?.amount, claim?.merkleProof)
+
+        await response.wait()
+
+        setHash(response.hash)
+        setIsSubmitting(false)
+        setIsClaimed(true)
+        setIsClaimAvailable(false)
+      }
+    } catch (err) {
+      setIsSubmitting(false)
+      displayError()
+    }
+  }
+
+  return (
+    <>
+      <Modal hideBorder isOpen={isOpen} onDismiss={usdcAirdropToggle} maxHeight={90} maxWidth={400}>
+        <ModalWrap>
+          {isClaimed ? (
+            <ClaimContainer>
+              <ThemedText.HeadlineSmall>Congratulations!</ThemedText.HeadlineSmall>
+              <SuccessText>
+                You have successfully claimed {totalAmount} USDC. Thank you for supporting Genie.xyz.
+              </SuccessText>
+              <EtherscanLink href={`https://etherscan.io/tx/${hash}`} target="_blank">
+                <ThemedText.Link>
+                  <EtherscanLinkWrap>
+                    <span>Etherscan</span>
+                    <ChevronRightIcon />
+                  </EtherscanLinkWrap>
+                </ThemedText.Link>
+              </EtherscanLink>
+
+              <CloseButton size={ButtonSize.medium} emphasis={ButtonEmphasis.medium} onClick={usdcAirdropToggle}>
+                Close
+              </CloseButton>
+            </ClaimContainer>
+          ) : (
+            <>
+              <ImageContainer>
+                <TextContainer>
+                  <SyledCloseIcon onClick={usdcAirdropToggle} stroke="white" />
+                  <MainHeader>Uniswap NFT Airdrop</MainHeader>
+                  <USDCLabel>{totalAmount} USDC</USDCLabel>
+                  <Line />
+                  <RewardsDetailsContainer>
+                    <RewardsText>Trading rewards</RewardsText>{' '}
+                    <CurrencyText>
+                      {totalAmount === RewardAmounts.tradingRewardAmount || totalAmount === RewardAmounts.combinedAmount
+                        ? `${RewardAmounts.tradingRewardAmount} USDC`
+                        : '0'}
+                    </CurrencyText>
+                  </RewardsDetailsContainer>
+                  <RewardsDetailsContainer>
+                    <RewardsText>Genie NFT holder rewards</RewardsText>{' '}
+                    <CurrencyText>
+                      {totalAmount !== RewardAmounts.tradingRewardAmount
+                        ? `${RewardAmounts.holderRewardAmount} USDC`
+                        : '0'}
+                    </CurrencyText>
+                  </RewardsDetailsContainer>
+                </TextContainer>
+                <StyledImage src={airdropBackgroundv2} />
+              </ImageContainer>
+              <Body>
+                <RewardsInformationText>
+                  As a long time supporter of Genie, you’ve been awarded {totalAmount} USDC tokens.
+                </RewardsInformationText>
+                <ReactLinkWrap>
+                  <LinkWrap href="https://uniswap.org/blog/uniswap-nft-aggregator-announcement" target="_blank">
+                    <ThemedText.Link>Read more about Uniswap NFT.</ThemedText.Link>
+                  </LinkWrap>
+                </ReactLinkWrap>
+
+                {error && (
+                  <Error>
+                    <AlertTriangle />
+                    Claim USDC failed. Please try again later
+                  </Error>
+                )}
+
+                <ClaimButton
+                  onClick={makeClaim}
+                  size={ButtonSize.medium}
+                  emphasis={ButtonEmphasis.medium}
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting && <Loader stroke="white" />}
+                  <span>Claim{isSubmitting && 'ing'} USDC</span>
+                </ClaimButton>
+              </Body>
+            </>
+          )}
+        </ModalWrap>
+      </Modal>
+    </>
+  )
+}
+
+export default AirdropModal

src/components/Badge/RangeBadge.tsx

@@ -17,7 +17,7 @@ const BadgeText = styled.div`
 `
 
 const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.deprecated_success};
+  background-color: ${({ theme }) => theme.accentSuccess};
   border-radius: 50%;
   height: 8px;
   width: 8px;

src/components/Badge/index.tsx

@@ -19,24 +19,24 @@ interface BadgeProps {
 function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
-      return theme.deprecated_error
+      return theme.accentFailure
     case BadgeVariant.POSITIVE:
-      return theme.deprecated_success
+      return theme.accentSuccess
     case BadgeVariant.PRIMARY:
-      return theme.deprecated_primary1
+      return theme.accentAction
     case BadgeVariant.WARNING:
-      return theme.deprecated_warning
+      return theme.accentWarning
     case BadgeVariant.WARNING_OUTLINE:
       return 'transparent'
     default:
-      return theme.deprecated_bg2
+      return theme.backgroundInteractive
   }
 }
 
 function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.WARNING_OUTLINE:
-      return `1px solid ${theme.deprecated_warning}`
+      return `1px solid ${theme.accentWarning}`
     default:
       return 'unset'
   }
@@ -45,15 +45,15 @@ function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): str
 function pickFontColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
   switch (variant) {
     case BadgeVariant.NEGATIVE:
-      return readableColor(theme.deprecated_error)
+      return readableColor(theme.accentFailure)
     case BadgeVariant.POSITIVE:
-      return readableColor(theme.deprecated_success)
+      return readableColor(theme.accentSuccess)
     case BadgeVariant.WARNING:
-      return readableColor(theme.deprecated_warning)
+      return readableColor(theme.accentWarning)
     case BadgeVariant.WARNING_OUTLINE:
-      return theme.deprecated_warning
+      return theme.accentWarning
     default:
-      return readableColor(theme.deprecated_bg2)
+      return readableColor(theme.backgroundInteractive)
   }
 }
 

src/components/Button/index.tsx

@@ -22,7 +22,7 @@ export const BaseButton = styled(RebassButton)<
   border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
   outline: none;
   border: 1px solid transparent;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
   display: flex;
   justify-content: center;
@@ -57,21 +57,21 @@ export const ButtonPrimary = styled(BaseButton)`
   padding: 16px;
   color: ${({ theme }) => theme.accentTextLightPrimary};
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.accentAction)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentAction)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentAction)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.accentAction)};
+    background-color: ${({ theme }) => darken(0.1, theme.accentAction)};
   }
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
-      altDisabledStyle ? (disabled ? theme.deprecated_primary1 : theme.deprecated_bg2) : theme.deprecated_bg2};
+      altDisabledStyle ? (disabled ? theme.accentAction : theme.backgroundInteractive) : theme.backgroundInteractive};
     color: ${({ altDisabledStyle, disabled, theme }) =>
-      altDisabledStyle ? (disabled ? theme.deprecated_white : theme.deprecated_text2) : theme.deprecated_text2};
+      altDisabledStyle ? (disabled ? theme.white : theme.textSecondary) : theme.textSecondary};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
@@ -79,6 +79,13 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
+export const SmallButtonPrimary = styled(ButtonPrimary)`
+  width: auto;
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
 export const ButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.accentActionSoft};
   color: ${({ theme }) => theme.accentAction};
@@ -110,21 +117,21 @@ export const ButtonLight = styled(BaseButton)`
 
 export const ButtonGray = styled(BaseButton)`
   background-color: ${({ theme }) => theme.deprecated_bg1};
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 16px;
   font-weight: 500;
 
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.backgroundInteractive)};
   }
   &:active {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.deprecated_bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.backgroundInteractive)};
   }
 `
 
 export const ButtonSecondary = styled(BaseButton)`
   border: 1px solid ${({ theme }) => theme.deprecated_primary4};
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   background-color: transparent;
   font-size: 16px;
   border-radius: 12px;
@@ -151,14 +158,14 @@ export const ButtonSecondary = styled(BaseButton)`
 `
 
 export const ButtonOutlined = styled(BaseButton)`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   background-color: transparent;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   &:focus {
     box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
   }
   &:hover {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
+    box-shadow: 0 0 0 1px ${({ theme }) => theme.textTertiary};
   }
   &:active {
     box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
@@ -191,7 +198,7 @@ export const ButtonYellow = styled(BaseButton)`
 
 export const ButtonEmpty = styled(BaseButton)`
   background-color: transparent;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -217,11 +224,9 @@ export const ButtonText = styled(BaseButton)`
   background: none;
   text-decoration: none;
   &:focus {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     text-decoration: underline;
   }
   &:hover {
-    // text-decoration: underline;
     opacity: 0.9;
   }
   &:active {
@@ -235,38 +240,38 @@ export const ButtonText = styled(BaseButton)`
 
 const ButtonConfirmedStyle = styled(BaseButton)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
-  color: ${({ theme }) => theme.deprecated_text1};
-  /* border: 1px solid ${({ theme }) => theme.deprecated_green1}; */
+  color: ${({ theme }) => theme.textPrimary};
+  /* border: 1px solid ${({ theme }) => theme.accentSuccess}; */
 
   &:disabled {
     opacity: 50%;
-    background-color: ${({ theme }) => theme.deprecated_bg2};
-    color: ${({ theme }) => theme.deprecated_text2};
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    color: ${({ theme }) => theme.textSecondary};
     cursor: auto;
   }
 `
 
 const ButtonErrorStyle = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_red1};
-  border: 1px solid ${({ theme }) => theme.deprecated_red1};
+  background-color: ${({ theme }) => theme.accentFailure};
+  border: 1px solid ${({ theme }) => theme.accentFailure};
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_red1)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.accentFailure)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentFailure)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
+    background-color: ${({ theme }) => darken(0.05, theme.accentFailure)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_red1)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.accentFailure)};
+    background-color: ${({ theme }) => darken(0.1, theme.accentFailure)};
   }
   &:disabled {
     opacity: 50%;
     cursor: auto;
     box-shadow: none;
-    background-color: ${({ theme }) => theme.deprecated_red1};
-    border: 1px solid ${({ theme }) => theme.deprecated_red1};
+    background-color: ${({ theme }) => theme.accentFailure};
+    border: 1px solid ${({ theme }) => theme.accentFailure};
   }
 `
 
@@ -314,14 +319,14 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
 
 const ActiveOutlined = styled(ButtonOutlined)`
   border: 1px solid;
-  border-color: ${({ theme }) => theme.deprecated_primary1};
+  border-color: ${({ theme }) => theme.accentAction};
 `
 
 const Circle = styled.div`
   height: 17px;
   width: 17px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.deprecated_primary1};
+  background-color: ${({ theme }) => theme.accentAction};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -355,7 +360,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
           {children}
           <CheckboxWrapper>
             <Circle>
-              <ResponsiveCheck size={13} stroke={theme.deprecated_white} />
+              <ResponsiveCheck size={13} stroke={theme.white} />
             </Circle>
           </CheckboxWrapper>
         </RowBetween>

src/components/Card/index.tsx

@@ -10,24 +10,20 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
 export default Card
 
 export const LightCard = styled(Card)`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
   background-color: ${({ theme }) => theme.deprecated_bg1};
 `
 
-export const LightGrayCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-`
-
 export const GrayCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
 `
 
 export const DarkGrayCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
 `
 
 export const DarkCard = styled(Card)`
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
 `
 
 export const OutlineCard = styled(Card)`
@@ -42,6 +38,6 @@ export const YellowCard = styled(Card)`
 
 export const BlueCard = styled(Card)`
   background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.deprecated_blue2};
+  color: ${({ theme }) => theme.accentAction};
   border-radius: 12px;
 `

src/components/Charts/AnimatedInLineChart.tsx

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group'
 import { LinePath } from '@visx/shape'
-import { easeCubicInOut } from 'd3'
+import { easeSinOut } from 'd3'
+import ms from 'ms.macro'
 import React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { animated, useSpring } from 'react-spring'
@@ -11,8 +12,8 @@ import { LineChartProps } from './LineChart'
 type AnimatedInLineChartProps<T> = Omit<LineChartProps<T>, 'height' | 'width' | 'children'>
 
 const config = {
-  duration: 800,
-  easing: easeCubicInOut,
+  duration: ms`0.8s`,
+  easing: easeSinOut,
 }
 
 // code reference: https://airbnb.io/visx/lineradial
@@ -91,4 +92,4 @@ function AnimatedInLineChart<T>({
   )
 }
 
-export default AnimatedInLineChart
+export default React.memo(AnimatedInLineChart) as typeof AnimatedInLineChart

src/components/Charts/FadeInLineChart.tsx

@@ -0,0 +1,86 @@
+import { Group } from '@visx/group'
+import { LinePath } from '@visx/shape'
+import { easeCubicInOut } from 'd3'
+import React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { animated, useSpring } from 'react-spring'
+import { useTheme } from 'styled-components/macro'
+
+import { LineChartProps } from './LineChart'
+
+type FadedInLineChartProps<T> = Omit<LineChartProps<T>, 'height' | 'width' | 'children'> & { dashed?: boolean }
+
+const config = {
+  duration: 3000,
+  easing: easeCubicInOut,
+}
+
+// code reference: https://airbnb.io/visx/lineradial
+
+function FadedInLineChart<T>({
+  data,
+  getX,
+  getY,
+  marginTop,
+  curve,
+  color,
+  strokeWidth,
+  dashed,
+}: FadedInLineChartProps<T>) {
+  const lineRef = useRef<SVGPathElement>(null)
+  const [lineLength, setLineLength] = useState(0)
+  const [shouldAnimate, setShouldAnimate] = useState(false)
+  const [hasAnimatedIn, setHasAnimatedIn] = useState(false)
+
+  const spring = useSpring({
+    frame: shouldAnimate ? 0 : 1,
+    config,
+    onRest: () => {
+      setShouldAnimate(false)
+      setHasAnimatedIn(true)
+    },
+  })
+
+  // We need to check to see after the "invisble" line has been drawn
+  // what the length is to be able to animate in the line for the first time
+  // This will run on each render to see if there is a new line length
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (lineRef.current) {
+      const length = lineRef.current.getTotalLength()
+      if (length !== lineLength) {
+        setLineLength(length)
+      }
+      if (length > 0 && !shouldAnimate && !hasAnimatedIn) {
+        setShouldAnimate(true)
+      }
+    }
+  })
+  const theme = useTheme()
+  const lineColor = color ?? theme.accentAction
+
+  return (
+    <Group top={marginTop}>
+      <LinePath curve={curve} x={getX} y={getY}>
+        {({ path }) => {
+          const d = path(data) || ''
+          return (
+            <>
+              <animated.path
+                d={d}
+                ref={lineRef}
+                strokeWidth={strokeWidth}
+                strokeOpacity={hasAnimatedIn ? 1 : spring.frame.to((v) => 1 - v)}
+                fill="none"
+                stroke={lineColor}
+                strokeDasharray={dashed ? '4,4' : undefined}
+              />
+            </>
+          )
+        }}
+      </LinePath>
+    </Group>
+  )
+}
+
+export default React.memo(FadedInLineChart) as typeof FadedInLineChart

src/components/Column/index.tsx

@@ -1,9 +1,14 @@
-import styled from 'styled-components/macro'
+import styled, { DefaultTheme } from 'styled-components/macro'
 
-const Column = styled.div`
+type Gap = keyof DefaultTheme['grids']
+
+export const Column = styled.div<{
+  gap?: Gap
+}>`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  gap: ${({ gap, theme }) => gap && theme.grids[gap]};
 `
 export const ColumnCenter = styled(Column)`
   width: 100%;
@@ -11,12 +16,12 @@ export const ColumnCenter = styled(Column)`
 `
 
 export const AutoColumn = styled.div<{
-  gap?: 'sm' | 'md' | 'lg' | string
+  gap?: Gap | string
   justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'space-between'
 }>`
   display: grid;
   grid-auto-rows: auto;
-  grid-row-gap: ${({ gap }) => (gap === 'sm' && '8px') || (gap === 'md' && '12px') || (gap === 'lg' && '24px') || gap};
+  grid-row-gap: ${({ gap, theme }) => (gap && theme.grids[gap as Gap]) || gap};
   justify-items: ${({ justify }) => justify && justify};
 `
 

src/components/Confetti/index.tsx

@@ -1,32 +0,0 @@
-import ReactConfetti from 'react-confetti'
-
-import { useWindowSize } from '../../hooks/useWindowSize'
-
-// eslint-disable-next-line react/prop-types
-export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {
-  const { width, height } = useWindowSize()
-
-  const _variant = variant ? variant : height && width && height > 1.5 * width ? 'bottom' : variant
-
-  return start && width && height ? (
-    <ReactConfetti
-      style={{ zIndex: 1401 }}
-      numberOfPieces={400}
-      recycle={false}
-      run={true}
-      width={width}
-      height={height}
-      confettiSource={{
-        h: height,
-        w: width,
-        x: 0,
-        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5,
-      }}
-      initialVelocityX={15}
-      initialVelocityY={30}
-      gravity={0.45}
-      tweenDuration={100}
-      wind={0.05}
-    />
-  ) : null
-}

src/components/ConnectedAccountBlocked/index.tsx

@@ -49,7 +49,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
           fontSize={14}
           iconSize={16}
           gap={6}
-          color={theme.deprecated_primary1}
+          color={theme.accentAction}
           iconPosition="right"
         >
           compliance@uniswap.org

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -1,45 +1,72 @@
 import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import { useMemo } from 'react'
-import { useTheme } from 'styled-components/macro'
+import { LoadingBubble } from 'components/Tokens/loading'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { useEffect, useMemo, useState } from 'react'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
-import { MouseoverTooltip } from '../Tooltip'
+
+const FiatLoadingBubble = styled(LoadingBubble)`
+  border-radius: 4px;
+  width: 4rem;
+  height: 1rem;
+`
 
 export function FiatValue({
   fiatValue,
   priceImpact,
+  isLoading = false,
 }: {
   fiatValue: CurrencyAmount<Currency> | null | undefined
   priceImpact?: Percent
+  isLoading?: boolean
 }) {
   const theme = useTheme()
+  const [showLoadingPlaceholder, setShowLoadingPlaceholder] = useState(false)
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
-    if (priceImpact.lessThan('0')) return theme.deprecated_green1
+    if (priceImpact.lessThan('0')) return theme.accentSuccess
     const severity = warningSeverity(priceImpact)
-    if (severity < 1) return theme.deprecated_text3
+    if (severity < 1) return theme.textTertiary
     if (severity < 3) return theme.deprecated_yellow1
-    return theme.deprecated_red1
-  }, [priceImpact, theme.deprecated_green1, theme.deprecated_red1, theme.deprecated_text3, theme.deprecated_yellow1])
+    return theme.accentFailure
+  }, [priceImpact, theme.accentSuccess, theme.accentFailure, theme.textTertiary, theme.deprecated_yellow1])
 
-  const p = Number(fiatValue?.toFixed())
-  const visibleDecimalPlaces = p < 1.05 ? 4 : 2
+  useEffect(() => {
+    const stale = false
+    let timeoutId = 0
+    if (isLoading && !fiatValue) {
+      timeoutId = setTimeout(() => {
+        if (!stale) setShowLoadingPlaceholder(true)
+      }, 200) as unknown as number
+    } else {
+      setShowLoadingPlaceholder(false)
+    }
+    return () => clearTimeout(timeoutId)
+  }, [isLoading, fiatValue])
 
   return (
     <ThemedText.DeprecatedBody fontSize={14} color={theme.textSecondary}>
-      {fiatValue && <>${fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}</>}
-      {priceImpact ? (
-        <span style={{ color: priceImpactColor }}>
-          {' '}
-          <MouseoverTooltip text={t`The estimated difference between the USD values of input and output amounts.`}>
-            (<Trans>{priceImpact.multiply(-1).toSignificant(3)}%</Trans>)
-          </MouseoverTooltip>
-        </span>
-      ) : null}
+      {showLoadingPlaceholder ? (
+        <FiatLoadingBubble />
+      ) : (
+        <div>
+          {fiatValue && <>{formatCurrencyAmount(fiatValue, NumberType.FiatTokenPrice)}</>}
+          {priceImpact && (
+            <span style={{ color: priceImpactColor }}>
+              {' '}
+              <MouseoverTooltip text={t`The estimated difference between the USD values of input and output amounts.`}>
+                (<Trans>{formatPriceImpact(priceImpact)}</Trans>)
+              </MouseoverTooltip>
+            </span>
+          )}
+        </div>
+      )}
     </ThemedText.DeprecatedBody>
   )
 }

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -9,7 +9,7 @@ import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { isSupportedChain } from 'constants/chains'
 import { darken } from 'polished'
-import { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
@@ -62,7 +62,7 @@ const CurrencySelect = styled(ButtonGray)<{
   background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
-  color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
   cursor: pointer;
   height: unset;
   border-radius: 16px;
@@ -121,7 +121,7 @@ const LabelRow = styled.div`
 
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
+    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
   }
 `
 
@@ -144,7 +144,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   margin-left: 8px;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
     stroke-width: 2px;
   }
 `
@@ -229,6 +229,7 @@ export default function SwapCurrencyInputPanel({
   ...rest
 }: SwapCurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
+  const [fiatValueIsLoading, setFiatValueIsLoading] = useState(false)
   const { account, chainId } = useWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
@@ -239,6 +240,10 @@ export default function SwapCurrencyInputPanel({
 
   const chainAllowed = isSupportedChain(chainId)
 
+  useEffect(() => {
+    !!value && !fiatValue ? setFiatValueIsLoading(true) : setFiatValueIsLoading(false)
+  }, [fiatValueIsLoading, value, fiatValue])
+
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {locked && (
@@ -306,7 +311,7 @@ export default function SwapCurrencyInputPanel({
           <FiatRow>
             <RowBetween>
               <LoadingOpacityContainer $loading={loading}>
-                <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
+                <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} isLoading={fiatValueIsLoading} />
               </LoadingOpacityContainer>
               {account ? (
                 <RowFixed style={{ height: '17px' }}>

src/components/CurrencyInputPanel/index.tsx

@@ -29,7 +29,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
+  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.backgroundInteractive)};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
@@ -41,7 +41,7 @@ const FixedContainer = styled.div`
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -50,7 +50,7 @@ const FixedContainer = styled.div`
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.backgroundSurface};
   background-color: ${({ theme }) => theme.deprecated_bg1};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   ${({ theme, hideInput, disabled }) =>
@@ -70,11 +70,11 @@ const CurrencySelect = styled(ButtonGray)<{
   disabled?: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
-  color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+  color: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
   cursor: pointer;
   border-radius: 16px;
   outline: none;
@@ -89,8 +89,7 @@ const CurrencySelect = styled(ButtonGray)<{
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) =>
-      selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg3 : darken(0.05, theme.accentAction))};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
@@ -105,13 +104,13 @@ const InputRow = styled.div<{ selected: boolean }>`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
   span:hover {
     cursor: pointer;
-    color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
+    color: ${({ theme }) => darken(0.2, theme.textSecondary)};
   }
 `
 
@@ -133,7 +132,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   height: 35%;
 
   path {
-    stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
+    stroke: ${({ selected, theme }) => (selected ? theme.textPrimary : theme.white)};
     stroke-width: 1.5px;
   }
 `
@@ -148,7 +147,7 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: ${({ theme }) => theme.deprecated_primary5};
   border: none;
   border-radius: 12px;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  color: ${({ theme }) => theme.accentAction};
   cursor: pointer;
   font-size: 11px;
   font-weight: 500;
@@ -300,7 +299,7 @@ export default function CurrencyInputPanel({
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.DeprecatedBody
                     onClick={onMax}
-                    color={theme.deprecated_text3}
+                    color={theme.textTertiary}
                     fontWeight={500}
                     fontSize={14}
                     style={{ display: 'inline', cursor: 'pointer' }}

src/components/DowntimeWarning/index.tsx

@@ -1,82 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { SupportedChainId } from 'constants/chains'
-import { AlertOctagon } from 'react-feather'
-import styled from 'styled-components/macro'
-import { ExternalLink } from 'theme'
-
-import { isL2ChainId } from '../../utils/chains'
-
-const Root = styled.div`
-  background-color: ${({ theme }) => (theme.darkMode ? '#888D9B' : '#CED0D9')};
-  border-radius: 18px;
-  color: black;
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  margin: 12px auto;
-  padding: 16px;
-  width: 100%;
-  max-width: 880px;
-`
-const WarningIcon = styled(AlertOctagon)`
-  margin: auto 16px auto 0;
-  min-height: 22px;
-  min-width: 22px;
-`
-const ReadMoreLink = styled(ExternalLink)`
-  color: black;
-  text-decoration: underline;
-`
-
-function Wrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <Root>
-      <WarningIcon />
-      <div>{children}</div>
-    </Root>
-  )
-}
-
-/**
- * Shows a downtime warning for the network if it's relevant
- */
-export default function DowntimeWarning() {
-  const { chainId } = useWeb3React()
-  if (!isL2ChainId(chainId)) {
-    return null
-  }
-
-  switch (chainId) {
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return (
-        <Wrapper>
-          <Trans>
-            Optimism is in Beta and may experience downtime. Optimism expects planned downtime to upgrade the network in
-            the near future. During downtime, your position will not earn fees and you will be unable to remove
-            liquidity.{' '}
-            <ReadMoreLink href="https://help.uniswap.org/en/articles/5406082-what-happens-if-the-optimistic-ethereum-network-experiences-downtime">
-              Read more.
-            </ReadMoreLink>
-          </Trans>
-        </Wrapper>
-      )
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return (
-        <Wrapper>
-          <Trans>
-            Arbitrum is in Beta and may experience downtime. During downtime, your position will not earn fees and you
-            will be unable to remove liquidity.{' '}
-            <ReadMoreLink href="https://help.uniswap.org/en/articles/5576122-arbitrum-network-downtime">
-              Read more.
-            </ReadMoreLink>
-          </Trans>
-        </Wrapper>
-      )
-
-    default:
-      return null
-  }
-}

src/components/ErrorBoundary/index.tsx

@@ -1,53 +1,156 @@
 import { Trans } from '@lingui/macro'
-import { sendEvent } from 'components/analytics'
-import React, { ErrorInfo, PropsWithChildren } from 'react'
+import * as Sentry from '@sentry/react'
+import { ButtonLight, SmallButtonPrimary } from 'components/Button'
+import { ChevronUpIcon } from 'nft/components/icons'
+import { useIsMobile } from 'nft/hooks'
+import React, { PropsWithChildren, useState } from 'react'
+import { Copy } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import store, { AppState } from '../../state'
-import { ExternalLink, ThemedText } from '../../theme'
-import { userAgent } from '../../utils/userAgent'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
+import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
+import { Column } from '../Column'
 
 const FallbackWrapper = styled.div`
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  align-items: center;
-  z-index: 1;
+  width: 100vw;
+  height: 100vh;
 `
 
 const BodyWrapper = styled.div<{ margin?: string }>`
-  padding: 1rem;
   width: 100%;
+  max-width: 500px;
+  margin: auto;
+  padding: 1rem;
+`
+
+const SmallButtonLight = styled(ButtonLight)`
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
+const StretchedRow = styled.div`
+  display: flex;
+  gap: 24px;
+
+  > * {
+    display: flex;
+    flex: 1;
+  }
+`
+
+const Code = styled.code`
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 16px;
+  word-wrap: break-word;
+  width: 100%;
+  color: ${({ theme }) => theme.textPrimary};
+  font-family: ${({ theme }) => theme.fonts.code};
+  overflow: scroll;
+  max-height: calc(100vh - 450px);
+`
+
+const Separator = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 `
 
 const CodeBlockWrapper = styled.div`
-  background: ${({ theme }) => theme.deprecated_bg0};
-  overflow: auto;
-  white-space: pre;
+  display: flex;
+  flex-direction: column;
+  background: ${({ theme }) => theme.backgroundModule};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 24px;
-  padding: 18px 24px;
-  color: ${({ theme }) => theme.deprecated_text1};
+  padding: 24px;
+  gap: 10px;
+  color: ${({ theme }) => theme.textPrimary};
 `
 
-const LinkWrapper = styled.div`
-  color: ${({ theme }) => theme.deprecated_blue1};
-  padding: 6px 24px;
+const ShowMoreButton = styled.div`
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
 `
 
-const SomethingWentWrongWrapper = styled.div`
-  padding: 6px 24px;
+const CopyIcon = styled(Copy)`
+  stroke: ${({ theme }) => theme.textSecondary};
 `
 
-type ErrorBoundaryState = {
-  error: Error | null
+const ShowMoreIcon = styled(ChevronUpIcon)<{ $isExpanded?: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'none' : 'rotate(180deg)')};
+`
+
+const CodeTitle = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  word-break: break-word;
+`
+
+const Fallback = ({ error, eventId }: { error: Error; eventId: string | null }) => {
+  const [isExpanded, setExpanded] = useState(false)
+  const isMobile = useIsMobile()
+
+  const errorId = eventId || 'unknown-error'
+
+  // @todo: ThemedText components should be responsive by default
+  const [Title, Description] = isMobile
+    ? [ThemedText.HeadlineSmall, ThemedText.BodySmall]
+    : [ThemedText.HeadlineLarge, ThemedText.BodySecondary]
+
+  return (
+    <FallbackWrapper>
+      <BodyWrapper>
+        <Column gap="xl">
+          <Column gap="sm">
+            <Title textAlign="center">
+              <Trans>Something went wrong</Trans>
+            </Title>
+            <Description textAlign="center" color="textSecondary">
+              <Trans>
+                Sorry, an error occured while processing your request. If you request support, be sure to provide your
+                error ID.
+              </Trans>
+            </Description>
+          </Column>
+          <CodeBlockWrapper>
+            <CodeTitle>
+              <ThemedText.SubHeader fontWeight={500}>Error ID: {errorId}</ThemedText.SubHeader>
+              <CopyToClipboard toCopy={errorId}>
+                <CopyIcon />
+              </CopyToClipboard>
+            </CodeTitle>
+            <Separator />
+            {isExpanded && (
+              <>
+                <Code>{error.stack}</Code>
+                <Separator />
+              </>
+            )}
+            <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
+              <ThemedText.Link color="textSecondary">
+                <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
+              </ThemedText.Link>
+              <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
+            </ShowMoreButton>
+          </CodeBlockWrapper>
+          <StretchedRow>
+            <SmallButtonPrimary onClick={() => window.location.reload()}>
+              <Trans>Reload the app</Trans>
+            </SmallButtonPrimary>
+            <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
+              <SmallButtonLight>
+                <Trans>Get support</Trans>
+              </SmallButtonLight>
+            </ExternalLink>
+          </StretchedRow>
+        </Column>
+      </BodyWrapper>
+    </FallbackWrapper>
+  )
 }
 
-const IS_UNISWAP = window.location.hostname === 'app.uniswap.org'
-
 async function updateServiceWorker(): Promise<ServiceWorkerRegistration> {
   const ready = await navigator.serviceWorker.ready
   // the return type of update is incorrectly typed as Promise<void>. See
@@ -55,157 +158,34 @@ async function updateServiceWorker(): Promise<ServiceWorkerRegistration> {
   return ready.update() as unknown as Promise<ServiceWorkerRegistration>
 }
 
-export default class ErrorBoundary extends React.Component<PropsWithChildren<unknown>, ErrorBoundaryState> {
-  constructor(props: PropsWithChildren<unknown>) {
-    super(props)
-    this.state = { error: null }
-  }
+const updateServiceWorkerInBackground = async () => {
+  try {
+    const registration = await updateServiceWorker()
 
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    updateServiceWorker()
-      .then(async (registration) => {
-        // We want to refresh only if we detect a new service worker is waiting to be activated.
-        // See details about it: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
-        if (registration?.waiting) {
-          await registration.unregister()
+    // We want to refresh only if we detect a new service worker is waiting to be activated.
+    // See details about it: https://web.dev/service-worker-lifecycle/
+    if (registration?.waiting) {
+      await registration.unregister()
 
-          // Makes Workbox call skipWaiting(). For more info on skipWaiting see: https://developer.chrome.com/docs/workbox/handling-service-worker-updates/
-          registration.waiting.postMessage({ type: 'SKIP_WAITING' })
-
-          // Once the service worker is unregistered, we can reload the page to let
-          // the browser download a fresh copy of our app (invalidating the cache)
-          window.location.reload()
-        }
-      })
-      .catch((error) => {
-        console.error('Failed to update service worker', error)
-      })
-    return { error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    sendEvent('exception', {
-      description: error.toString() + errorInfo.toString(),
-      fatal: true,
-    })
-  }
-
-  render() {
-    const { error } = this.state
-
-    if (error !== null) {
-      const encodedBody = encodeURIComponent(issueBody(error))
-      return (
-        <FallbackWrapper>
-          <BodyWrapper>
-            <AutoColumn gap="md">
-              <SomethingWentWrongWrapper>
-                <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
-                  <Trans>Something went wrong</Trans>
-                </ThemedText.DeprecatedLabel>
-              </SomethingWentWrongWrapper>
-              <CodeBlockWrapper>
-                <code>
-                  <ThemedText.DeprecatedMain fontSize={10}>{error.stack}</ThemedText.DeprecatedMain>
-                </code>
-              </CodeBlockWrapper>
-              {IS_UNISWAP ? (
-                <AutoRow>
-                  <LinkWrapper>
-                    <ExternalLink
-                      id="create-github-issue-link"
-                      href={`https://github.com/Uniswap/uniswap-interface/issues/new?assignees=&labels=bug&body=${encodedBody}&title=${encodeURIComponent(
-                        `Crash report: \`${error.name}${error.message && `: ${error.message}`}\``
-                      )}`}
-                      target="_blank"
-                    >
-                      <ThemedText.DeprecatedLink fontSize={16}>
-                        <Trans>Create an issue on GitHub</Trans>
-                        <span>↗</span>
-                      </ThemedText.DeprecatedLink>
-                    </ExternalLink>
-                  </LinkWrapper>
-                  <LinkWrapper>
-                    <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
-                      <ThemedText.DeprecatedLink fontSize={16}>
-                        <Trans>Get support on Discord</Trans>
-                        <span>↗</span>
-                      </ThemedText.DeprecatedLink>
-                    </ExternalLink>
-                  </LinkWrapper>
-                </AutoRow>
-              ) : null}
-            </AutoColumn>
-          </BodyWrapper>
-        </FallbackWrapper>
-      )
+      // Makes Workbox call skipWaiting().
+      // For more info on skipWaiting see: https://web.dev/service-worker-lifecycle/#skip-the-waiting-phase
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
     }
-    return this.props.children
+  } catch (error) {
+    console.error('Failed to update service worker', error)
   }
 }
 
-function getRelevantState(): null | keyof AppState {
-  const path = window.location.hash
-  if (!path.startsWith('#/')) {
-    return null
-  }
-  const pieces = path.substring(2).split(/[/\\?]/)
-  switch (pieces[0]) {
-    case 'swap':
-      return 'swap'
-    case 'add':
-      if (pieces[1] === 'v2') return 'mint'
-      else return 'mintV3'
-    case 'remove':
-      if (pieces[1] === 'v2') return 'burn'
-      else return 'burnV3'
-  }
-  return null
-}
-
-function issueBody(error: Error): string {
-  const relevantState = getRelevantState()
-  const deviceData = userAgent
-  return `## URL
-  
-${window.location.href}
-
-${
-  relevantState
-    ? `## \`${relevantState}\` state
-    
-\`\`\`json
-${JSON.stringify(store.getState()[relevantState], null, 2)}
-\`\`\`
-`
-    : ''
-}
-${
-  error.name &&
-  `## Error
-
-\`\`\`
-${error.name}${error.message && `: ${error.message}`}
-\`\`\`
-`
-}
-${
-  error.stack &&
-  `## Stacktrace
-
-\`\`\`
-${error.stack}
-\`\`\`
-`
-}
-${
-  deviceData &&
-  `## Device data
-
-\`\`\`json
-${JSON.stringify(deviceData, null, 2)}
-\`\`\`
-`
-}
-`
+export default function ErrorBoundary({ children }: PropsWithChildren): JSX.Element {
+  return (
+    <Sentry.ErrorBoundary
+      fallback={({ error, eventId }) => <Fallback error={error} eventId={eventId} />}
+      beforeCapture={(scope) => {
+        scope.setLevel('fatal')
+      }}
+      onError={updateServiceWorkerInBackground}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  )
 }

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,5 +1,5 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { Permit2Variant, usePermit2Flag } from 'featureFlags/flags/permit2'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
@@ -202,9 +202,12 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-      <FeatureFlagGroup name="Phase 1">
-        <FeatureFlagOption variant={NftVariant} value={useNftFlag()} featureFlag={FeatureFlag.nft} label="NFTs" />
-      </FeatureFlagGroup>
+      <FeatureFlagOption
+        variant={Permit2Variant}
+        value={usePermit2Flag()}
+        featureFlag={FeatureFlag.permit2}
+        label="Permit 2 / Universal Router"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/FeeSelector/index.tsx

@@ -34,8 +34,8 @@ const pulse = (color: string) => keyframes`
   }
 `
 const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_primary1)} 0.6s linear;
+  border: 1px solid ${({ theme }) => theme.backgroundInteractive};
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.6s linear;
   align-self: center;
 `
 

src/components/InputStepCounter/InputStepCounter.tsx

@@ -36,9 +36,9 @@ const SmallButton = styled(ButtonGray)`
 `
 
 const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
-  border-color: ${({ active, theme }) => active && theme.deprecated_blue1};
+  border-color: ${({ active, theme }) => active && theme.accentAction};
   padding: 12px;
-  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_blue1)} 0.8s linear;
+  animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accentAction)} 0.8s linear;
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
@@ -58,13 +58,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
 `
 
 const InputTitle = styled(ThemedText.DeprecatedSmall)`
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 12px;
   font-weight: 500;
 `
 
 const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
-  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
+  color: ${({ theme, disabled }) => (disabled ? theme.textSecondary : theme.textPrimary)} !important;
 `
 
 interface StepCounterProps {

src/components/LiquidityChartRangeInput/Area.tsx

@@ -6,8 +6,8 @@ import { ChartEntry } from './types'
 
 const Path = styled.path<{ fill: string | undefined }>`
   opacity: 0.5;
-  stroke: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
-  fill: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
+  stroke: ${({ fill, theme }) => fill ?? theme.accentAction};
+  fill: ${({ fill, theme }) => fill ?? theme.accentAction};
 `
 
 export const Area = ({

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -8,7 +8,7 @@ const StyledGroup = styled.g`
   }
 
   text {
-    color: ${({ theme }) => theme.deprecated_text2};
+    color: ${({ theme }) => theme.textSecondary};
     transform: translateY(5px);
   }
 `

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -18,7 +18,7 @@ const HandleAccent = styled.path`
   pointer-events: none;
 
   stroke-width: 1.5;
-  stroke: ${({ theme }) => theme.deprecated_white};
+  stroke: ${({ theme }) => theme.white};
   opacity: ${({ theme }) => theme.opacity.hover};
 `
 
@@ -28,13 +28,13 @@ const LabelGroup = styled.g<{ visible: boolean }>`
 `
 
 const TooltipBackground = styled.rect`
-  fill: ${({ theme }) => theme.deprecated_bg2};
+  fill: ${({ theme }) => theme.backgroundInteractive};
 `
 
 const Tooltip = styled.text`
   text-anchor: middle;
   font-size: 13px;
-  fill: ${({ theme }) => theme.deprecated_text1};
+  fill: ${({ theme }) => theme.textPrimary};
 `
 
 // flips the handles draggers when close to the container edges

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -9,8 +9,8 @@ import { Line } from './Line'
 import { ChartEntry, LiquidityChartRangeInputProps } from './types'
 import Zoom, { ZoomOverlay } from './Zoom'
 
-export const xAccessor = (d: ChartEntry) => d.price0
-export const yAccessor = (d: ChartEntry) => d.activeLiquidity
+const xAccessor = (d: ChartEntry) => d.price0
+const yAccessor = (d: ChartEntry) => d.activeLiquidity
 
 export function Chart({
   id = 'liquidityChartRangeInput',

src/components/LiquidityChartRangeInput/Line.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 const StyledLine = styled.line`
   opacity: 0.5;
   stroke-width: 2;
-  stroke: ${({ theme }) => theme.deprecated_text1};
+  stroke: ${({ theme }) => theme.textPrimary};
   fill: none;
 `
 

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -18,8 +18,8 @@ const Wrapper = styled.div<{ count: number }>`
 
 const Button = styled(ButtonGray)`
   &:hover {
-    background-color: ${({ theme }) => theme.deprecated_bg2};
-    color: ${({ theme }) => theme.deprecated_text1};
+    background-color: ${({ theme }) => theme.backgroundInteractive};
+    color: ${({ theme }) => theme.textPrimary};
   }
 
   width: 32px;

src/components/LiquidityChartRangeInput/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
+import * as Sentry from '@sentry/react'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { sendEvent } from 'components/analytics'
 import { AutoColumn, ColumnCenter } from 'components/Column'
 import Loader from 'components/Loader'
 import { format } from 'd3'
@@ -157,7 +157,7 @@ export default function LiquidityChartRangeInput({
   )
 
   if (error) {
-    sendEvent('exception', { description: error.toString(), fatal: false })
+    Sentry.captureMessage(error.toString(), 'log')
   }
 
   const isUninitialized = !currencyA || !currencyB || (formattedData === undefined && !isLoading)
@@ -167,7 +167,7 @@ export default function LiquidityChartRangeInput({
       {isUninitialized ? (
         <InfoBox
           message={<Trans>Your position will appear here.</Trans>}
-          icon={<Inbox size={56} stroke={theme.deprecated_text1} />}
+          icon={<Inbox size={56} stroke={theme.textPrimary} />}
         />
       ) : isLoading ? (
         <InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
@@ -189,12 +189,12 @@ export default function LiquidityChartRangeInput({
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
             styles={{
               area: {
-                selection: theme.deprecated_blue1,
+                selection: theme.accentAction,
               },
               brush: {
                 handle: {
-                  west: saturate(0.1, tokenAColor) ?? theme.deprecated_red1,
-                  east: saturate(0.1, tokenBColor) ?? theme.deprecated_blue1,
+                  west: saturate(0.1, tokenAColor) ?? theme.accentFailure,
+                  east: saturate(0.1, tokenBColor) ?? theme.accentAction,
                 },
               },
             }}

src/components/LiquidityChartRangeInput/types.ts

@@ -5,12 +5,12 @@ export interface ChartEntry {
   price0: number
 }
 
-export interface Dimensions {
+interface Dimensions {
   width: number
   height: number
 }
 
-export interface Margins {
+interface Margins {
   top: number
   right: number
   bottom: number

src/components/Loader/styled.tsx

@@ -18,7 +18,7 @@ export const LoadingRows = styled.div`
     background: linear-gradient(
       to left,
       ${({ theme }) => theme.deprecated_bg1} 25%,
-      ${({ theme }) => theme.deprecated_bg2} 50%,
+      ${({ theme }) => theme.backgroundInteractive} 50%,
       ${({ theme }) => theme.deprecated_bg1} 75%
     );
     background-size: 400%;

src/components/Logo/AssetLogo.tsx

@@ -3,7 +3,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React from 'react'
 import styled from 'styled-components/macro'
 
-export const MissingImageLogo = styled.div<{ size?: string }>`
+const MissingImageLogo = styled.div<{ size?: string }>`
   --size: ${({ size }) => size};
   border-radius: 100px;
   color: ${({ theme }) => theme.textPrimary};

src/components/Menu/index.tsx

@@ -1,38 +1,12 @@
-// eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
-import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-import { L2_CHAIN_IDS } from 'constants/chains'
-import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
-import { useActiveLocale } from 'hooks/useActiveLocale'
-import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
-import { FunctionComponent, PropsWithChildren, useEffect, useRef, useState } from 'react'
-import {
-  BookOpen,
-  Check,
-  ChevronLeft,
-  Coffee,
-  FileText,
-  Flag,
-  Globe,
-  HelpCircle,
-  Info,
-  MessageCircle,
-  Moon,
-  Sun,
-} from 'react-feather'
+import { FunctionComponent, PropsWithChildren, useRef } from 'react'
 import { Link } from 'react-router-dom'
-import { useDarkModeManager } from 'state/user/hooks'
 import styled, { css } from 'styled-components/macro'
-import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink } from '../../theme'
-import { ButtonPrimary } from '../Button'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',
@@ -41,41 +15,10 @@ export enum FlyoutAlignment {
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme }) => theme.textPrimary};
   }
 `
 
-const StyledMenuButton = styled.button`
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  height: 40px;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
-  padding: 0.15rem 0.5rem;
-  border-radius: 16px;
-
-  :hover,
-  :focus {
-    cursor: pointer;
-    outline: none;
-    border: 1px solid ${({ theme }) => theme.deprecated_bg3};
-  }
-
-  svg {
-    margin-top: 2px;
-  }
-`
-
-const UNIbutton = styled(ButtonPrimary)`
-  background-color: ${({ theme }) => theme.deprecated_bg3};
-  background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
-  border: none;
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -92,7 +35,7 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
   background-color: ${({ theme }) => theme.deprecated_bg1};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
+  border: 1px solid ${({ theme }) => theme.backgroundSurface};
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
@@ -124,9 +67,9 @@ const MenuItem = styled(ExternalLink)`
   align-items: center;
   padding: 0.5rem 0.5rem;
   justify-content: space-between;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     cursor: pointer;
     text-decoration: none;
   }
@@ -135,9 +78,11 @@ const MenuItem = styled(ExternalLink)`
 const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
+  width: max-content;
+  text-decoration: none;
   :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
+    color: ${({ theme }) => theme.textPrimary};
     cursor: pointer;
     text-decoration: none;
   }
@@ -146,180 +91,7 @@ const InternalMenuItem = styled(Link)`
   }
 `
 
-const InternalLinkMenuItem = styled(InternalMenuItem)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 0.5rem;
-  justify-content: space-between;
-  text-decoration: none;
-  :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
-    cursor: pointer;
-    text-decoration: none;
-  }
-`
-
-const ToggleMenuItem = styled.button`
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  border: none;
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 0.5rem;
-  justify-content: space-between;
-  font-size: 1rem;
-  font-weight: 500;
-  color: ${({ theme }) => theme.deprecated_text2};
-  :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
-    cursor: pointer;
-    text-decoration: none;
-  }
-`
-
-function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) {
-  const { to, onClick } = useLocationLinkProps(locale)
-
-  if (!to) return null
-
-  return (
-    <InternalLinkMenuItem onClick={onClick} key={key} to={to}>
-      <div>{LOCALE_LABEL[locale]}</div>
-      {active && <Check opacity={0.6} size={16} />}
-    </InternalLinkMenuItem>
-  )
-}
-
-function LanguageMenu({ close }: { close: () => void }) {
-  const activeLocale = useActiveLocale()
-
-  return (
-    <MenuFlyout>
-      <ToggleMenuItem onClick={close}>
-        <ChevronLeft size={16} />
-      </ToggleMenuItem>
-      {SUPPORTED_LOCALES.map((locale) => (
-        <LanguageMenuItem locale={locale} active={activeLocale === locale} key={locale} />
-      ))}
-    </MenuFlyout>
-  )
-}
-
-export default function Menu() {
-  const { account, chainId } = useWeb3React()
-
-  const node = useRef<HTMLDivElement>()
-  const open = useModalIsOpen(ApplicationModal.MENU)
-  const toggleMenu = useToggleModal(ApplicationModal.MENU)
-  useOnClickOutside(node, open ? toggleMenu : undefined)
-  const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
-  const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
-  const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
-  const showUNIClaimOption = Boolean(!!account && !!chainId && !L2_CHAIN_IDS.includes(chainId))
-
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
-
-  const [menu, setMenu] = useState<'main' | 'lang'>('main')
-
-  useEffect(() => {
-    setMenu('main')
-  }, [open])
-
-  return (
-    <>
-      {/* // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */}
-      <StyledMenu ref={node as any}>
-        <StyledMenuButton onClick={toggleMenu} aria-label={t`Menu`}>
-          <StyledMenuIcon />
-        </StyledMenuButton>
-
-        {open &&
-          (() => {
-            switch (menu) {
-              case 'lang':
-                return <LanguageMenu close={() => setMenu('main')} />
-              case 'main':
-              default:
-                return (
-                  <MenuFlyout>
-                    <MenuItem href="https://uniswap.org/">
-                      <div>
-                        <Trans>About</Trans>
-                      </div>
-                      <Info opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://help.uniswap.org/">
-                      <div>
-                        <Trans>Help Center</Trans>
-                      </div>
-                      <HelpCircle opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://uniswap.canny.io/feature-requests">
-                      <div>
-                        <Trans>Request Features</Trans>
-                      </div>
-                      <Coffee opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://discord.gg/FCfyBSbCU5">
-                      <div>
-                        <Trans>Discord</Trans>
-                      </div>
-                      <MessageCircle opacity={0.6} size={16} />
-                    </MenuItem>
-                    <ToggleMenuItem onClick={() => setMenu('lang')}>
-                      <div>
-                        <Trans>Language</Trans>
-                      </div>
-                      <Globe opacity={0.6} size={16} />
-                    </ToggleMenuItem>
-                    <ToggleMenuItem onClick={() => toggleDarkMode()}>
-                      <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
-                      {darkMode ? <Sun opacity={0.6} size={16} /> : <Moon opacity={0.6} size={16} />}
-                    </ToggleMenuItem>
-                    <MenuItem href="https://docs.uniswap.org/">
-                      <div>
-                        <Trans>Docs</Trans>
-                      </div>
-                      <BookOpen opacity={0.6} size={16} />
-                    </MenuItem>
-                    <ToggleMenuItem onClick={() => togglePrivacyPolicy()}>
-                      <div>
-                        <Trans>Legal & Privacy</Trans>
-                      </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}
-                        padding="8px 16px"
-                        width="100%"
-                        $borderRadius="12px"
-                        mt="0.5rem"
-                      >
-                        <Trans>Claim UNI</Trans>
-                      </UNIbutton>
-                    )}
-                  </MenuFlyout>
-                )
-            }
-          })()}
-      </StyledMenu>
-      <PrivacyPolicyModal />
-      <FeatureFlagModal />
-    </>
-  )
-}
-
-interface NewMenuProps {
+interface MenuProps {
   flyoutAlignment?: FlyoutAlignment
   ToggleUI?: FunctionComponent<PropsWithChildren<unknown>>
   menuItems: {
@@ -329,20 +101,12 @@ interface NewMenuProps {
   }[]
 }
 
-const NewMenuFlyout = styled(MenuFlyout)`
-  top: 3rem !important;
-`
-const NewMenuItem = styled(InternalMenuItem)`
-  width: max-content;
-  text-decoration: none;
-`
-
 const ExternalMenuItem = styled(MenuItem)`
   width: max-content;
   text-decoration: none;
 `
 
-export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => {
+export const Menu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: MenuProps) => {
   const node = useRef<HTMLDivElement>()
   const open = useModalIsOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS)
@@ -352,19 +116,19 @@ export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, men
     <StyledMenu ref={node as any} {...rest}>
       <ToggleElement onClick={toggle} />
       {open && (
-        <NewMenuFlyout flyoutAlignment={flyoutAlignment}>
+        <MenuFlyout flyoutAlignment={flyoutAlignment}>
           {menuItems.map(({ content, link, external }, i) =>
             external ? (
               <ExternalMenuItem href={link} key={i}>
                 {content}
               </ExternalMenuItem>
             ) : (
-              <NewMenuItem to={link} key={i}>
+              <InternalMenuItem to={link} key={i}>
                 {content}
-              </NewMenuItem>
+              </InternalMenuItem>
             )
           )}
-        </NewMenuFlyout>
+        </MenuFlyout>
       )}
     </StyledMenu>
   )

src/components/Modal/index.tsx

@@ -8,7 +8,7 @@ import { Z_INDEX } from 'theme/zIndex'
 import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: ${Z_INDEX.modalBackdrop};
@@ -24,50 +24,51 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: bool
   }
 `
 
+type StyledDialogProps = {
+  $minHeight?: number | false
+  $maxHeight?: number
+  $isBottomSheet?: boolean
+  $scrollOverlay?: boolean
+  $hideBorder?: boolean
+  $maxWidth: number
+}
+
 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(
-  ({ hideBorder, maxWidth, minHeight, maxHeight, mobile, isOpen, scrollOverlay, ...rest }) => (
-    <AnimatedDialogContent {...rest} />
-  )
-).attrs({
-  'aria-label': 'dialog',
-})`
+const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
   overflow-y: auto;
 
   &[data-reach-dialog-content] {
     margin: auto;
-    background-color: ${({ theme }) => theme.deprecated_bg0};
-    border: ${({ theme, hideBorder }) => !hideBorder && `1px solid ${theme.deprecated_bg1}`};
+    background-color: ${({ theme }) => theme.backgroundSurface};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
     width: 50vw;
     overflow-y: auto;
     overflow-x: hidden;
 
-    align-self: ${({ mobile }) => mobile && 'flex-end'};
-    max-width: ${({ maxWidth }) => maxWidth}px;
-    ${({ maxHeight }) =>
-      maxHeight &&
+    align-self: ${({ $isBottomSheet }) => $isBottomSheet && 'flex-end'};
+    max-width: ${({ $maxWidth }) => $maxWidth}px;
+    ${({ $maxHeight }) =>
+      $maxHeight &&
       css`
-        max-height: ${maxHeight}vh;
+        max-height: ${$maxHeight}vh;
       `}
-    ${({ minHeight }) =>
-      minHeight &&
+    ${({ $minHeight }) =>
+      $minHeight &&
       css`
-        min-height: ${minHeight}vh;
+        min-height: ${$minHeight}vh;
       `}
-    display: ${({ scrollOverlay }) => (scrollOverlay ? 'inline-table' : 'flex')};
+    display: ${({ $scrollOverlay }) => ($scrollOverlay ? 'inline-table' : 'flex')};
     border-radius: 20px;
     ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
       width: 65vw;
       margin: auto;
     `}
-    ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
+    ${({ theme, $isBottomSheet }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
       width:  85vw;
       ${
-        mobile &&
+        $isBottomSheet &&
         css`
           width: 100vw;
           border-radius: 20px;
@@ -81,7 +82,8 @@ const StyledDialogContent = styled(
 
 interface ModalProps {
   isOpen: boolean
-  onDismiss: () => void
+  onDismiss?: () => void
+  onSwipe?: () => void
   minHeight?: number | false
   maxHeight?: number
   maxWidth?: number
@@ -89,6 +91,7 @@ interface ModalProps {
   children?: React.ReactNode
   scrollOverlay?: boolean
   hideBorder?: boolean
+  isBottomSheet?: boolean
 }
 
 export default function Modal({
@@ -99,7 +102,9 @@ export default function Modal({
   maxWidth = 420,
   initialFocusRef,
   children,
+  onSwipe = onDismiss,
   scrollOverlay,
+  isBottomSheet = isMobile,
   hideBorder = false,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, {
@@ -116,7 +121,7 @@ export default function Modal({
         y: state.down ? state.movement[1] : 0,
       })
       if (state.movement[1] > 300 || (state.velocity > 3 && state.direction[1] > 0)) {
-        onDismiss()
+        onSwipe?.()
       }
     },
   })
@@ -127,7 +132,6 @@ export default function Modal({
         ({ opacity }, item) =>
           item && (
             <StyledDialogOverlay
-              as={AnimatedDialogOverlay}
               style={{ opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }) }}
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
@@ -141,13 +145,13 @@ export default function Modal({
                       style: { transform: y.interpolate((y) => `translateY(${(y as number) > 0 ? y : 0}px)`) },
                     }
                   : {})}
-                aria-label="dialog content"
-                minHeight={minHeight}
-                maxHeight={maxHeight}
-                mobile={isMobile}
-                scrollOverlay={scrollOverlay}
-                hideBorder={hideBorder}
-                maxWidth={maxWidth}
+                aria-label="dialog"
+                $minHeight={minHeight}
+                $maxHeight={maxHeight}
+                $isBottomSheet={isBottomSheet}
+                $scrollOverlay={scrollOverlay}
+                $hideBorder={hideBorder}
+                $maxWidth={maxWidth}
               >
                 {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
                 {!initialFocusRef && isMobile ? <div tabIndex={1} /> : null}

src/components/ModalViews/index.tsx

@@ -58,7 +58,7 @@ export function SubmittedView({
         <CloseIcon onClick={onDismiss} />
       </RowBetween>
       <ConfirmedIcon>
-        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
+        <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.accentAction} />
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify="center">
         {children}

src/components/NavBar/SearchBar.css.ts

@@ -3,11 +3,11 @@ import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css'
 
 import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css'
 
-const DESKTOP_NAVBAR_WIDTH = 360
-const DESKTOP_NAVBAR_WIDTH_L = 440
-const DESKTOP_NAVBAR_WIDTH_XL = 540
+const DESKTOP_NAVBAR_WIDTH = 330
+const DESKTOP_NAVBAR_WIDTH_MD = 360
+const DESKTOP_NAVBAR_WIDTH_L = 480
+const DESKTOP_NAVBAR_WIDTH_XL = 520
 const DESKTOP_NAVBAR_WIDTH_XXL = 640
-const MAGNIFYING_GLASS_ICON_WIDTH = 28
 
 const baseSearchStyle = style([
   sprinkles({
@@ -15,12 +15,13 @@ const baseSearchStyle = style([
     width: { sm: 'viewWidth' },
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'backgroundOutline',
+    borderColor: 'searchOutline',
   }),
   {
+    backdropFilter: 'blur(60px)',
     '@media': {
       [`screen and (min-width: ${breakpoints.sm}px)`]: {
-        width: `${DESKTOP_NAVBAR_WIDTH}px`,
+        width: `${DESKTOP_NAVBAR_WIDTH_MD}px`,
       },
     },
   },
@@ -29,18 +30,20 @@ const baseSearchStyle = style([
 const baseSearchNftStyle = style([
   baseSearchStyle,
   {
-    borderWidth: '2px',
     '@media': {
-      [`screen and (min-width: 1024px) and (max-width: 1080px)`]: {
-        width: `${330}px`,
+      [`screen and (min-width: ${breakpoints.md}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH}px`,
       },
-      [`screen and (min-width: 1190px) and (max-width: 1380px)`]: {
+      [`screen and (min-width: ${breakpoints.lg}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH_MD}px`,
+      },
+      [`screen and (min-width: ${breakpoints.xl}px)`]: {
         width: `${DESKTOP_NAVBAR_WIDTH_L}px`,
       },
-      [`screen and (min-width: 1380px) and (max-width: 1479px)`]: {
+      [`screen and (min-width: ${breakpoints.xxl}px)`]: {
         width: `${DESKTOP_NAVBAR_WIDTH_XL}px`,
       },
-      [`screen and (min-width: ${1480}px)`]: {
+      [`screen and (min-width: ${breakpoints.xxxl}px)`]: {
         width: `${DESKTOP_NAVBAR_WIDTH_XXL}px`,
       },
     },
@@ -54,14 +57,6 @@ export const searchBarContainer = style([
     zIndex: '3',
     display: 'inline-block',
   }),
-  {
-    '@media': {
-      [`screen and (min-width: ${breakpoints.lg}px)`]: {
-        right: `-${DESKTOP_NAVBAR_WIDTH / 2 - MAGNIFYING_GLASS_ICON_WIDTH}px`,
-        top: '-3px',
-      },
-    },
-  },
 ])
 
 export const searchBarContainerNft = style([
@@ -72,43 +67,28 @@ export const searchBarContainerNft = style([
     display: 'inline-block',
   }),
   {
-    '@media': {
-      [`screen and (min-width: ${breakpoints.lg}px)`]: {
-        right: `-${DESKTOP_NAVBAR_WIDTH / 2}px`,
-        top: '-6px',
-      },
-      [`screen and (min-width: 1024px) and (max-width: 1080px)`]: {
-        right: `-${300 / 2}px`,
-      },
-      [`screen and (min-width: 1190px) and (max-width: 1380px)`]: {
-        right: `-${DESKTOP_NAVBAR_WIDTH_L / 2}px`,
-      },
-      [`screen and (min-width: 1380px) and (max-width: 1479px)`]: {
-        right: `-${DESKTOP_NAVBAR_WIDTH_XL / 2}px`,
-      },
-      [`screen and (min-width: ${1480}px)`]: {
-        right: `-${DESKTOP_NAVBAR_WIDTH_XXL / 2}px`,
-      },
-    },
+    backdropFilter: 'blur(60px)',
+    borderRadius: '12px',
   },
 ])
 
 export const searchBar = style([
   baseSearchStyle,
   sprinkles({
-    color: 'textTertiary',
+    color: 'textSecondary',
     paddingX: '16',
-    background: 'backgroundSurface',
   }),
 ])
 
 export const nftSearchBar = style([
   baseSearchNftStyle,
   sprinkles({
-    color: 'textTertiary',
+    color: 'textSecondary',
     paddingX: '16',
-    background: 'backgroundSurface',
   }),
+  {
+    backdropFilter: 'blur(60px)',
+  },
 ])
 
 export const searchBarInput = style([
@@ -116,7 +96,7 @@ export const searchBarInput = style([
     padding: '0',
     fontWeight: 'normal',
     fontSize: '16',
-    color: { default: 'textPrimary', placeholder: 'textTertiary' },
+    color: { default: 'textPrimary', placeholder: 'textSecondary' },
     border: 'none',
     background: 'none',
     lineHeight: '24',
@@ -124,28 +104,16 @@ export const searchBarInput = style([
   }),
 ])
 
-export const searchBarDropdown = style([
-  baseSearchStyle,
-  sprinkles({
-    borderBottomLeftRadius: '12',
-    borderBottomRightRadius: '12',
-    background: 'backgroundSurface',
-    height: { sm: 'viewHeight', md: 'auto' },
-  }),
-  {
-    borderTop: 'none',
-  },
-])
-
 export const searchBarDropdownNft = style([
   baseSearchNftStyle,
   sprinkles({
     borderBottomLeftRadius: '12',
     borderBottomRightRadius: '12',
-    background: 'backgroundSurface',
     height: { sm: 'viewHeight', md: 'auto' },
+    backgroundColor: 'backgroundSurface',
   }),
   {
+    backdropFilter: 'blur(60px)',
     borderTop: 'none',
   },
 ])
@@ -243,9 +211,6 @@ export const notFoundContainer = style([
   }),
 ])
 
-const visibilityTransition = `visibility ${vars.time[125]}, opacity ${vars.time[125]}`
-const delayedTransitionProperties = `padding 0s ${vars.time[125]}, height 0s ${vars.time[125]}`
-
 export const hidden = style([
   sprinkles({
     visibility: 'hidden',
@@ -253,10 +218,6 @@ export const hidden = style([
     padding: '0',
     height: '0',
   }),
-  {
-    transition: `${visibilityTransition}, ${delayedTransitionProperties}`,
-    transitionTimingFunction: 'ease-in',
-  },
 ])
 export const visible = style([
   sprinkles({
@@ -264,22 +225,8 @@ export const visible = style([
     opacity: '1',
     height: 'full',
   }),
-  {
-    transition: `${visibilityTransition}`,
-    transitionTimingFunction: 'ease-out',
-  },
 ])
 
-export const searchContentCentered = style({
-  '@media': {
-    [`screen and (min-width: ${breakpoints.lg}px)`]: {
-      transform: `translateX(${DESKTOP_NAVBAR_WIDTH / 4}px)`,
-      transition: `transform ${vars.time[125]}`,
-      transitionTimingFunction: 'ease-out',
-    },
-  },
-})
-
 export const searchContentLeftAlign = style({
   '@media': {
     [`screen and (min-width: ${breakpoints.lg}px)`]: {

src/components/NavBar/SearchBar.tsx

@@ -1,9 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
-import { t } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
 import { BrowserEvent, ElementName, EventName, SectionName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -14,15 +13,32 @@ import { magicalGradientOnHover } from 'nft/css/common.css'
 import { useIsMobile, useIsTablet } from 'nft/hooks'
 import { fetchSearchCollections } from 'nft/queries'
 import { fetchSearchTokens } from 'nft/queries/genie/SearchTokensFetcher'
-import { ChangeEvent, useEffect, useReducer, useRef, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { useQuery } from 'react-query'
 import { useLocation } from 'react-router-dom'
+import styled from 'styled-components/macro'
 
 import { ChevronLeftIcon, MagnifyingGlassIcon, NavMagnifyingGlassIcon } from '../../nft/components/icons'
 import { NavIcon } from './NavIcon'
 import * as styles from './SearchBar.css'
 import { SearchBarDropdown } from './SearchBarDropdown'
 
+const KeyShortCut = styled.div`
+  background-color: ${({ theme }) => theme.hoverState};
+  color: ${({ theme }) => theme.textSecondary};
+  padding: 0px 8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+  backdrop-filter: blur(60px);
+`
+
 export const SearchBar = () => {
   const [isOpen, toggleOpen] = useReducer((state: boolean) => !state, false)
   const [searchValue, setSearchValue] = useState('')
@@ -30,10 +46,8 @@ export const SearchBar = () => {
   const searchRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const { pathname } = useLocation()
-  const phase1Flag = useNftFlag()
   const isMobile = useIsMobile()
   const isTablet = useIsTablet()
-  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   useOnClickOutside(searchRef, () => {
     isOpen && toggleOpen()
@@ -46,7 +60,7 @@ export const SearchBar = () => {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
-      enabled: !!debouncedSearchValue.length && isPhase1,
+      enabled: !!debouncedSearchValue.length,
     }
   )
 
@@ -93,10 +107,7 @@ export const SearchBar = () => {
     }
   }, [isOpen])
 
-  const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
   const isMobileOrTablet = isMobile || isTablet
-  const showCenteredSearchContent =
-    !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0
 
   const trace = useTrace({ section: SectionName.NAVBAR_SEARCH })
 
@@ -105,78 +116,111 @@ export const SearchBar = () => {
     hasInput: debouncedSearchValue && debouncedSearchValue.length > 0,
     ...trace,
   }
+  const placeholderText = useMemo(() => {
+    return isMobileOrTablet ? t`Search` : t`Search tokens and NFT collections`
+  }, [isMobileOrTablet])
+
+  const handleKeyPress = useCallback(
+    (event: any) => {
+      if (event.key === '/') {
+        event.preventDefault()
+        !isOpen && toggleOpen()
+      }
+    },
+    [isOpen]
+  )
+
+  useEffect(() => {
+    const innerRef = inputRef.current
+
+    if (innerRef !== null) {
+      //only mount the listener when input available as ref
+      document.addEventListener('keydown', handleKeyPress)
+    }
+
+    return () => {
+      if (innerRef !== null) {
+        document.removeEventListener('keydown', handleKeyPress)
+      }
+    }
+  }, [handleKeyPress, inputRef])
 
   return (
-    <Box position="relative">
-      <Trace section={SectionName.NAVBAR_SEARCH}>
-        <Box
-          position={{ sm: 'fixed', md: 'absolute' }}
-          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-          ref={searchRef}
-          className={isPhase1 ? styles.searchBarContainerNft : styles.searchBarContainer}
-          display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
+    <Trace section={SectionName.NAVBAR_SEARCH}>
+      <Box
+        position={{ sm: 'fixed', md: 'absolute', xl: 'relative' }}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+        ref={searchRef}
+        className={styles.searchBarContainerNft}
+        display={{ sm: isOpen ? 'inline-block' : 'none', xl: 'inline-block' }}
+      >
+        <Row
+          className={clsx(
+            styles.nftSearchBar,
+            !isOpen && !isMobile && magicalGradientOnHover,
+            isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
+          )}
+          borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
+          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+          borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : '1px'}
+          backgroundColor={isOpen ? 'backgroundSurface' : 'searchBackground'}
+          onClick={() => !isOpen && toggleOpen()}
+          gap="12"
         >
-          <Row
-            className={clsx(
-              ` ${isPhase1 ? styles.nftSearchBar : styles.searchBar} ${
-                !isOpen && !isMobile && magicalGradientOnHover
-              } ${isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)}`
-            )}
-            borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
-            borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-            borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-            borderBottomWidth={isOpen || isMobileOrTablet ? '0px' : isPhase1 ? '2px' : '1px'}
-            onClick={() => !isOpen && toggleOpen()}
-            gap="12"
-          >
-            <Box className={showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign}>
-              <Box display={{ sm: 'none', md: 'flex' }}>
-                <MagnifyingGlassIcon />
-              </Box>
-              <Box display={{ sm: 'flex', md: 'none' }} color="textTertiary" onClick={toggleOpen}>
-                <ChevronLeftIcon />
-              </Box>
+          <Box className={styles.searchContentLeftAlign}>
+            <Box display={{ sm: 'none', md: 'flex' }}>
+              <MagnifyingGlassIcon />
+            </Box>
+            <Box display={{ sm: 'flex', md: 'none' }} color="textTertiary" onClick={toggleOpen}>
+              <ChevronLeftIcon />
             </Box>
-            <TraceEvent
-              events={[BrowserEvent.onFocus]}
-              name={EventName.NAVBAR_SEARCH_SELECTED}
-              element={ElementName.NAVBAR_SEARCH_INPUT}
-              properties={{ ...trace }}
-            >
-              <Box
-                as="input"
-                placeholder={placeholderText}
-                onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                  !isOpen && toggleOpen()
-                  setSearchValue(event.target.value)
-                }}
-                onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
-                className={`${styles.searchBarInput} ${
-                  showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
-                }`}
-                value={searchValue}
-                ref={inputRef}
-                width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
-              />
-            </TraceEvent>
-          </Row>
-          <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
-            {isOpen && (
-              <SearchBarDropdown
-                toggleOpen={toggleOpen}
-                tokens={reducedTokens}
-                collections={reducedCollections}
-                queryText={debouncedSearchValue}
-                hasInput={debouncedSearchValue.length > 0}
-                isLoading={tokensAreLoading || (collectionsAreLoading && phase1Flag === NftVariant.Enabled)}
-              />
-            )}
           </Box>
+          <TraceEvent
+            events={[BrowserEvent.onFocus]}
+            name={EventName.NAVBAR_SEARCH_SELECTED}
+            element={ElementName.NAVBAR_SEARCH_INPUT}
+            properties={{ ...trace }}
+          >
+            <Trans
+              id={placeholderText}
+              render={({ translation }) => (
+                <Box
+                  as="input"
+                  placeholder={translation as string}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    !isOpen && toggleOpen()
+                    setSearchValue(event.target.value)
+                  }}
+                  onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
+                  className={`${styles.searchBarInput} ${styles.searchContentLeftAlign}`}
+                  value={searchValue}
+                  ref={inputRef}
+                  width="full"
+                />
+              )}
+            />
+          </TraceEvent>
+          {!isOpen && <KeyShortCut>/</KeyShortCut>}
+        </Row>
+        <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
+          {isOpen && (
+            <SearchBarDropdown
+              toggleOpen={toggleOpen}
+              tokens={reducedTokens}
+              collections={reducedCollections}
+              queryText={debouncedSearchValue}
+              hasInput={debouncedSearchValue.length > 0}
+              isLoading={tokensAreLoading || collectionsAreLoading}
+            />
+          )}
         </Box>
+      </Box>
+      {isMobileOrTablet && (
         <NavIcon onClick={toggleOpen}>
           <NavMagnifyingGlassIcon />
         </NavIcon>
-      </Trace>
-    </Box>
+      )}
+    </Trace>
   )
 }

src/components/NavBar/SearchBarDropdown.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { useTrace } from '@uniswap/analytics'
 import { NavBarSearchTypes, SectionName } from '@uniswap/analytics-events'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -35,7 +34,7 @@ interface SearchBarDropdownSectionProps {
   eventProperties: Record<string, unknown>
 }
 
-export const SearchBarDropdownSection = ({
+const SearchBarDropdownSection = ({
   toggleOpen,
   suggestions,
   header,
@@ -116,9 +115,7 @@ export const SearchBarDropdown = ({
   const { pathname } = useLocation()
   const isNFTPage = useIsNftPage()
   const isTokenPage = pathname.includes('/tokens')
-  const phase1Flag = useNftFlag()
   const [resultsState, setResultsState] = useState<ReactNode>()
-  const isPhase1 = phase1Flag === NftVariant.Enabled
 
   const { data: trendingCollectionResults, isLoading: trendingCollectionsAreLoading } = useQuery(
     ['trendingCollections', 'eth', 'twenty_four_hours'],
@@ -157,7 +154,7 @@ export const SearchBarDropdown = ({
     trendingTokenResults?.forEach(updateSearchHistory)
   }, [trendingTokenResults, updateSearchHistory])
 
-  const trendingTokensLength = phase1Flag === NftVariant.Enabled ? (isTokenPage ? 3 : 2) : 4
+  const trendingTokensLength = isTokenPage ? 3 : 2
   const trendingTokens = useMemo(
     () =>
       trendingTokenResults
@@ -231,24 +228,22 @@ export const SearchBarDropdown = ({
         )
 
       const collectionSearchResults =
-        phase1Flag === NftVariant.Enabled ? (
-          collections.length > 0 ? (
-            <SearchBarDropdownSection
-              hoveredIndex={hoveredIndex}
-              startingIndex={showCollectionsFirst ? 0 : tokens.length}
-              setHoveredIndex={setHoveredIndex}
-              toggleOpen={toggleOpen}
-              suggestions={collections}
-              eventProperties={{
-                suggestion_type: NavBarSearchTypes.COLLECTION_SUGGESTION,
-                ...eventProperties,
-              }}
-              header={<Trans>NFT Collections</Trans>}
-            />
-          ) : (
-            <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
-          )
-        ) : null
+        collections.length > 0 ? (
+          <SearchBarDropdownSection
+            hoveredIndex={hoveredIndex}
+            startingIndex={showCollectionsFirst ? 0 : tokens.length}
+            setHoveredIndex={setHoveredIndex}
+            toggleOpen={toggleOpen}
+            suggestions={collections}
+            eventProperties={{
+              suggestion_type: NavBarSearchTypes.COLLECTION_SUGGESTION,
+              ...eventProperties,
+            }}
+            header={<Trans>NFT Collections</Trans>}
+          />
+        ) : (
+          <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
+        )
 
       const currentState = () =>
         hasInput ? (
@@ -300,7 +295,7 @@ export const SearchBarDropdown = ({
                 isLoading={trendingTokensAreLoading}
               />
             )}
-            {!isTokenPage && phase1Flag === NftVariant.Enabled && (
+            {!isTokenPage && (
               <SearchBarDropdownSection
                 hoveredIndex={hoveredIndex}
                 startingIndex={shortenedHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
@@ -330,7 +325,6 @@ export const SearchBarDropdown = ({
     trendingTokens,
     trendingTokensAreLoading,
     hoveredIndex,
-    phase1Flag,
     toggleOpen,
     shortenedHistory,
     hasInput,
@@ -343,7 +337,7 @@ export const SearchBarDropdown = ({
   ])
 
   return (
-    <Box className={isPhase1 ? styles.searchBarDropdownNft : styles.searchBarDropdown}>
+    <Box className={styles.searchBarDropdownNft}>
       <Box opacity={isLoading ? '0.3' : '1'} transition="125">
         {resultsState}
       </Box>

src/components/NavBar/SuggestionRow.tsx

@@ -22,11 +22,27 @@ import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
+import { getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
 import * as styles from './SearchBar.css'
 
 const StyledLogoContainer = styled(LogoContainer)`
   margin-right: 8px;
 `
+const PriceChangeContainer = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const PriceChangeText = styled.span<{ isNegative: boolean }>`
+  font-size: 14px;
+  line-height: 20px;
+  color: ${({ theme, isNegative }) => (isNegative ? theme.accentFailure : theme.accentSuccess)};
+`
+
+const ArrowCell = styled.span`
+  padding-top: 5px;
+  padding-right: 3px;
+`
 
 interface CollectionRowProps {
   collection: GenieCollection
@@ -161,6 +177,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
     }
   }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
+  const arrow = getDeltaArrow(token.price24hChange, 18)
+
   return (
     <Link
       to={tokenDetailsPath}
@@ -198,9 +216,12 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
           </Row>
         )}
         {token.price24hChange && (
-          <Box className={styles.secondaryText} color={token.price24hChange >= 0 ? 'green400' : 'red400'}>
-            {token.price24hChange.toFixed(2)}%
-          </Box>
+          <PriceChangeContainer>
+            <ArrowCell>{arrow}</ArrowCell>
+            <PriceChangeText isNegative={token.price24hChange < 0}>
+              {Math.abs(token.price24hChange).toFixed(2)}%
+            </PriceChangeText>
+          </PriceChangeContainer>
         )}
       </Column>
     </Link>

src/components/NavBar/index.tsx

@@ -1,14 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
-import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
+import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
+import styled from 'styled-components/macro'
 
 import { Bag } from './Bag'
 import { ChainSelector } from './ChainSelector'
@@ -16,29 +16,37 @@ import { MenuDropdown } from './MenuDropdown'
 import { SearchBar } from './SearchBar'
 import * as styles from './style.css'
 
+const Nav = styled.nav`
+  padding: 20px 12px;
+  width: 100%;
+  height: ${({ theme }) => theme.navHeight}px;
+  z-index: 2;
+`
+
 interface MenuItemProps {
   href: string
   id?: NavLinkProps['id']
   isActive?: boolean
   children: ReactNode
+  dataTestId?: string
 }
 
-const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
+const MenuItem = ({ href, dataTestId, id, isActive, children }: MenuItemProps) => {
   return (
     <NavLink
       to={href}
       className={isActive ? styles.activeMenuItem : styles.menuItem}
       id={id}
       style={{ textDecoration: 'none' }}
+      data-testid={dataTestId}
     >
       {children}
     </NavLink>
   )
 }
 
-const PageTabs = () => {
+export const PageTabs = () => {
   const { pathname } = useLocation()
-  const nftFlag = useNftFlag()
   const { chainId: connectedChainId } = useWeb3React()
   const chainName = chainIdToBackendName(connectedChainId)
 
@@ -59,11 +67,9 @@ const PageTabs = () => {
       <MenuItem href={`/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/tokens')}>
         <Trans>Tokens</Trans>
       </MenuItem>
-      {nftFlag === NftVariant.Enabled && (
-        <MenuItem href="/nfts" isActive={isNftPage}>
-          <Trans>NFTs</Trans>
-        </MenuItem>
-      )}
+      <MenuItem dataTestId="nft-nav" href="/nfts" isActive={isNftPage}>
+        <Trans>NFTs</Trans>
+      </MenuItem>
       <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
         <Trans>Pool</Trans>
       </MenuItem>
@@ -73,30 +79,38 @@ const PageTabs = () => {
 
 const Navbar = () => {
   const isNftPage = useIsNftPage()
+  const navigate = useNavigate()
 
   return (
     <>
-      <nav className={styles.nav}>
-        <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
+      <Nav>
+        <Box display="flex" height="full" flexWrap="nowrap">
           <Box className={styles.leftSideContainer}>
-            <Box as="a" href="#/swap" className={styles.logoContainer}>
-              <UniIcon width="48" height="48" className={styles.logo} />
+            <Box className={styles.logoContainer}>
+              <UniIcon
+                width="48"
+                height="48"
+                className={styles.logo}
+                onClick={() => {
+                  navigate('/')
+                }}
+              />
             </Box>
             {!isNftPage && (
               <Box display={{ sm: 'flex', lg: 'none' }}>
                 <ChainSelector leftAlign={true} />
               </Box>
             )}
-            <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
+            <Row gap={{ xl: '0', xxl: '8' }} display={{ sm: 'none', lg: 'flex' }}>
               <PageTabs />
             </Row>
           </Box>
-          <Box className={styles.middleContainer}>
+          <Box className={styles.searchContainer}>
             <SearchBar />
           </Box>
           <Box className={styles.rightSideContainer}>
             <Row gap="12">
-              <Box display={{ sm: 'flex', xl: 'none' }}>
+              <Box position="relative" display={{ sm: 'flex', xl: 'none' }}>
                 <SearchBar />
               </Box>
               <Box display={{ sm: 'none', lg: 'flex' }}>
@@ -113,13 +127,7 @@ const Navbar = () => {
             </Row>
           </Box>
         </Box>
-      </nav>
-      <Box className={styles.mobileBottomBar}>
-        <PageTabs />
-        <Box marginY="4">
-          <MenuDropdown />
-        </Box>
-      </Box>
+      </Nav>
     </>
   )
 }

src/components/NavBar/style.css.ts

@@ -3,22 +3,11 @@ 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: 'backgroundFloating',
-  }),
-])
-
 export const logoContainer = style([
   sprinkles({
     display: 'flex',
     marginRight: { sm: '12', xxl: '20' },
-    alignItems: 'center',
+    cursor: 'pointer',
   }),
 ])
 
@@ -29,14 +18,7 @@ export const logo = style([
   }),
 ])
 
-export const baseContainer = style([
-  sprinkles({
-    alignItems: 'center',
-  }),
-])
-
 export const baseSideContainer = style([
-  baseContainer,
   sprinkles({
     display: 'flex',
     width: 'full',
@@ -48,23 +30,27 @@ export const baseSideContainer = style([
 export const leftSideContainer = style([
   baseSideContainer,
   sprinkles({
+    alignItems: 'center',
     justifyContent: 'flex-start',
   }),
 ])
 
-export const middleContainer = style([
-  baseContainer,
+export const searchContainer = style([
   sprinkles({
     flex: '1',
     flexShrink: '1',
-    justifyContent: 'center',
+    justifyContent: { lg: 'flex-end', xl: 'center' },
     display: { sm: 'none', xl: 'flex' },
+    alignSelf: 'center',
+    height: '48',
+    alignItems: 'flex-start',
   }),
 ])
 
 export const rightSideContainer = style([
   baseSideContainer,
   sprinkles({
+    alignItems: 'center',
     justifyContent: 'flex-end',
   }),
 ])
@@ -104,18 +90,3 @@ export const activeMenuItem = style([
     background: 'backgroundFloating',
   }),
 ])
-
-export const mobileBottomBar = style([
-  sprinkles({
-    position: 'fixed',
-    display: { sm: 'flex', lg: 'none' },
-    bottom: '0',
-    right: '0',
-    left: '0',
-    justifyContent: 'space-between',
-    paddingY: '4',
-    paddingX: '8',
-    height: '56',
-    background: 'backgroundSurface',
-  }),
-])

src/components/NavigationTabs/index.tsx

@@ -36,7 +36,7 @@ const ActiveText = styled.div`
 `
 
 const StyledArrowLeft = styled(ArrowLeft)`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
 `
 
 export function FindPoolTabs({ origin }: { origin: string }) {
@@ -92,7 +92,7 @@ export function AddRemoveTabs({
           }}
           flex={children ? '1' : undefined}
         >
-          <StyledArrowLeft stroke={theme.deprecated_text2} />
+          <StyledArrowLeft stroke={theme.textSecondary} />
         </StyledHistoryLink>
         <ThemedText.DeprecatedMediumHeader
           fontWeight={500}

src/components/NetworkAlert/NetworkAlert.tsx

@@ -15,13 +15,6 @@ const L2Icon = styled.img`
   margin-right: 16px;
 `
 
-export const Controls = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  padding: 0 20px 20px 20px;
-`
-
 const BodyText = styled.div`
   color: ${({ color }) => color};
   display: flex;
@@ -46,7 +39,7 @@ const SHOULD_SHOW_ALERT = {
   [SupportedChainId.CELO_ALFAJORES]: true,
 }
 
-export type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
+type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
 
 const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
   [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }

src/components/NumericalInput/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components/macro'
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
-  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
+  color: ${({ error, theme }) => (error ? theme.accentFailure : theme.textPrimary)};
   width: 0;
   position: relative;
   font-weight: 400;

src/components/Polling/ChainConnectivityWarning.tsx

@@ -17,7 +17,7 @@ const CautionTriangle = styled(AlertTriangle)`
   color: ${({ theme }) => theme.accentWarning};
 `
 const Link = styled(ExternalLink)`
-  color: ${({ theme }) => theme.deprecated_black};
+  color: ${({ theme }) => theme.black};
   text-decoration: underline;
 `
 const TitleRow = styled.div`

src/components/Polling/index.tsx

@@ -9,29 +9,42 @@ import useMachineTimeMs from 'hooks/useMachineTime'
 import JSBI from 'jsbi'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
-import { useEffect, useState } from 'react'
-import styled, { keyframes, useTheme } from 'styled-components/macro'
+import { useEffect, useMemo, useState } from 'react'
+import styled, { keyframes } from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import { MouseoverTooltip } from '../Tooltip'
 import { ChainConnectivityWarning } from './ChainConnectivityWarning'
 
-const StyledPolling = styled.div<{ warning: boolean }>`
-  position: fixed;
-  display: flex;
+const StyledPolling = styled.div`
   align-items: center;
-  right: 0;
   bottom: 0;
+  color: ${({ theme }) => theme.textTertiary};
+  display: none;
   padding: 1rem;
-  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  position: fixed;
+  right: 0;
   transition: 250ms ease color;
 
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    display: none;
-  `}
+  a {
+    color: unset;
+  }
+  a:hover {
+    color: unset;
+    text-decoration: none;
+  }
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    display: flex;
+  }
 `
-const StyledPollingNumber = styled(ThemedText.DeprecatedSmall)<{ breathe: boolean; hovering: boolean }>`
+const StyledPollingBlockNumber = styled(ThemedText.DeprecatedSmall)<{
+  breathe: boolean
+  hovering: boolean
+  warning: boolean
+}>`
+  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   transition: opacity 0.25s ease;
   opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
@@ -53,12 +66,12 @@ const StyledPollingDot = styled.div<{ warning: boolean }>`
   min-width: 8px;
   border-radius: 50%;
   position: relative;
-  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   transition: 250ms ease background-color;
 `
 
 const StyledGasDot = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_text3};
+  background-color: ${({ theme }) => theme.textTertiary};
   border-radius: 50%;
   height: 4px;
   min-height: 4px;
@@ -84,7 +97,7 @@ const Spinner = styled.div<{ warning: boolean }>`
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.accentSuccess)};
   background: transparent;
   width: 14px;
   height: 14px;
@@ -106,7 +119,6 @@ export default function Polling() {
   const [isHover, setIsHover] = useState(false)
   const machineTime = useMachineTimeMs(NETWORK_HEALTH_CHECK_MS)
   const blockTime = useCurrentBlockTimestamp()
-  const theme = useTheme()
   const isNftPage = useIsNftPage()
 
   const ethGasPrice = useGasPrice()
@@ -137,46 +149,49 @@ export default function Polling() {
 
   //TODO - chainlink gas oracle is really slow. Can we get a better data source?
 
-  return isNftPage ? null : (
-    <>
-      <RowFixed>
-        <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
-          <ExternalLink href="https://etherscan.io/gastracker">
-            {priceGwei ? (
-              <RowFixed style={{ marginRight: '8px' }}>
-                <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>
-                  <MouseoverTooltip
-                    text={
-                      <Trans>
-                        The current fast gas amount for sending a transaction on L1. Gas fees are paid in
-                        Ethereum&apos;s native currency Ether (ETH) and denominated in GWEI.
-                      </Trans>
-                    }
-                  >
-                    {priceGwei.toString()} <Trans>gwei</Trans>
-                  </MouseoverTooltip>
-                </ThemedText.DeprecatedMain>
-                <StyledGasDot />
-              </RowFixed>
-            ) : null}
-          </ExternalLink>
-          <StyledPollingNumber breathe={isMounting} hovering={isHover}>
-            <ExternalLink
-              href={
-                chainId && blockNumber ? getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK) : ''
-              }
+  const blockExternalLinkHref = useMemo(() => {
+    if (!chainId || !blockNumber) return ''
+    return getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK)
+  }, [blockNumber, chainId])
+
+  if (isNftPage) {
+    return null
+  }
+
+  return (
+    <RowFixed>
+      <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+        <ExternalLink href="https://etherscan.io/gastracker">
+          {!!priceGwei && (
+            <RowFixed style={{ marginRight: '8px' }}>
+              <ThemedText.DeprecatedMain fontSize="11px" mr="8px">
+                <MouseoverTooltip
+                  text={
+                    <Trans>
+                      The current fast gas amount for sending a transaction on L1. Gas fees are paid in Ethereum&apos;s
+                      native currency Ether (ETH) and denominated in GWEI.
+                    </Trans>
+                  }
+                >
+                  {priceGwei.toString()} <Trans>gwei</Trans>
+                </MouseoverTooltip>
+              </ThemedText.DeprecatedMain>
+              <StyledGasDot />
+            </RowFixed>
+          )}
+        </ExternalLink>
+        <StyledPollingBlockNumber breathe={isMounting} hovering={isHover} warning={warning}>
+          <ExternalLink href={blockExternalLinkHref}>
+            <MouseoverTooltip
+              text={<Trans>The most recent block number on this network. Prices update on every block.</Trans>}
             >
-              <MouseoverTooltip
-                text={<Trans>The most recent block number on this network. Prices update on every block.</Trans>}
-              >
-                {blockNumber}&ensp;
-              </MouseoverTooltip>
-            </ExternalLink>
-          </StyledPollingNumber>
-          <StyledPollingDot warning={warning}>{isMounting && <Spinner warning={warning} />}</StyledPollingDot>{' '}
-        </StyledPolling>
-        {warning && <ChainConnectivityWarning />}
-      </RowFixed>
-    </>
+              {blockNumber}&ensp;
+            </MouseoverTooltip>
+          </ExternalLink>
+        </StyledPollingBlockNumber>
+        <StyledPollingDot warning={warning}>{isMounting && <Spinner warning={warning} />}</StyledPollingDot>{' '}
+      </StyledPolling>
+      {warning && <ChainConnectivityWarning />}
+    </RowFixed>
   )
 }

src/components/Popover/index.tsx

@@ -12,7 +12,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 const ReferenceElement = styled.div`
@@ -33,9 +33,9 @@ const Arrow = styled.div`
     z-index: 9998;
 
     content: '';
-    border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+    border: 1px solid ${({ theme }) => theme.backgroundInteractive};
     transform: rotate(45deg);
-    background: ${({ theme }) => theme.deprecated_bg0};
+    background: ${({ theme }) => theme.backgroundSurface};
   }
 
   &.arrow-top {

src/components/Popups/FailedNetworkSwitchPopup.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { AlertCircle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
@@ -18,16 +18,19 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
 
   return (
     <RowNoFlex>
-      <div style={{ paddingRight: 16 }}>
-        <AlertCircle color={theme.deprecated_red1} size={24} />
-      </div>
-      <AutoColumn gap="8px">
-        <ThemedText.DeprecatedBody fontWeight={500}>
-          <Trans>
-            Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must
-            change the network in your wallet.
-          </Trans>
-        </ThemedText.DeprecatedBody>
+      <AutoColumn gap="sm">
+        <RowNoFlex style={{ alignItems: 'center' }}>
+          <div style={{ paddingRight: 13 }}>
+            <AlertTriangle color={theme.accentWarning} size={24} display="flex" />
+          </div>
+          <ThemedText.SubHeader>
+            <Trans>Failed to switch networks</Trans>
+          </ThemedText.SubHeader>
+        </RowNoFlex>
+
+        <ThemedText.BodySmall>
+          <Trans>To use Uniswap on {chainInfo.label}, switch the network in your wallet’s settings.</Trans>
+        </ThemedText.BodySmall>
       </AutoColumn>
     </RowNoFlex>
   )

src/components/Popups/PopupItem.tsx

@@ -10,8 +10,8 @@ import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
 
 const StyledClose = styled(X)`
   position: absolute;
-  right: 10px;
-  top: 10px;
+  right: 20px;
+  top: 20px;
 
   :hover {
     cursor: pointer;
@@ -21,7 +21,7 @@ const Popup = styled.div`
   display: inline-block;
   width: 100%;
   padding: 1em;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   position: relative;
   border-radius: 10px;
   padding: 20px;
@@ -83,7 +83,7 @@ export default function PopupItem({
 
   return popupContent ? (
     <Popup>
-      <StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />
+      <StyledClose color={theme.textSecondary} onClick={removeThisPopup} />
       {popupContent}
       {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
     </Popup>

src/components/Popups/SurveyPopup.tsx

@@ -1,111 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { sendEvent } from 'components/analytics'
-import { AutoColumn } from 'components/Column'
-import { RowFixed } from 'components/Row'
-import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
-import { useEffect } from 'react'
-import { MessageCircle, X } from 'react-feather'
-import { useShowSurveyPopup } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText } from 'theme'
-import { Z_INDEX } from 'theme/zIndex'
-
-import BGImage from '../../assets/images/survey-orb.svg'
-
-const Wrapper = styled(AutoColumn)`
-  background: #edeef2;
-  position: relative;
-  border-radius: 12px;
-  padding: 18px;
-  max-width: 360px;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  color: ${({ theme }) => theme.deprecated_text1};
-  overflow: hidden;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    max-width: 100%;
-  `}
-`
-
-const BGOrb = styled.img`
-  position: absolute;
-  right: -64px;
-  top: -64px;
-  width: 180px;
-  z-index: ${Z_INDEX.sticky};
-`
-
-const WrappedCloseIcon = styled(X)`
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 20px;
-  height: 20px;
-  stroke: #7c7c80;
-  z-index: ${Z_INDEX.fixed};
-  :hover {
-    cursor: pointer;
-    opacity: 0.8;
-  }
-`
-
-const END_TIMESTAMP = 1642272346 // Jan 15th
-
-export default function SurveyPopup() {
-  const theme = useTheme()
-  const [showPopup, setShowSurveyPopup] = useShowSurveyPopup()
-
-  // show popup to 1% of users
-  useEffect(() => {
-    // has not visited page during A/B testing if undefined
-    if (showPopup === undefined) {
-      if (Math.random() < 0.01) {
-        setShowSurveyPopup(true)
-        // log a case of succesful view
-        sendEvent({
-          category: 'Survey',
-          action: 'Saw Survey',
-        })
-      }
-    }
-  }, [setShowSurveyPopup, showPopup])
-
-  // limit survey to 24 hours based on timestamps
-  const timestamp = useCurrentBlockTimestamp()
-  const durationOver = timestamp ? timestamp.toNumber() > END_TIMESTAMP : false
-
-  return (
-    <>
-      {!showPopup || durationOver ? null : (
-        <Wrapper gap="10px">
-          <WrappedCloseIcon
-            onClick={() => {
-              sendEvent({
-                category: 'Survey',
-                action: 'Clicked Survey Link',
-              })
-              setShowSurveyPopup(false)
-            }}
-          />
-          <BGOrb src={BGImage} />
-          <ExternalLink href="https://www.surveymonkey.com/r/YGWV9VD">
-            <RowFixed>
-              <MessageCircle stroke={theme.deprecated_black} size="20px" strokeWidth="1px" />
-              <ThemedText.DeprecatedWhite fontWeight={600} color={theme.deprecated_black} ml="6px">
-                <Trans>Tell us what you think ↗</Trans>
-              </ThemedText.DeprecatedWhite>
-            </RowFixed>
-          </ExternalLink>
-          <ThemedText.DeprecatedBlack
-            style={{ zIndex: Z_INDEX.fixed }}
-            fontWeight={400}
-            fontSize="12px"
-            color={theme.deprecated_black}
-          >
-            <Trans>Take a 10 minute survey to help us improve your experience in the Uniswap app.</Trans>
-          </ThemedText.DeprecatedBlack>
-        </Wrapper>
-      )}
-    </>
-  )
-}

src/components/Popups/TransactionPopup.tsx

@@ -1,47 +0,0 @@
-import { useWeb3React } from '@web3-react/core'
-import { AlertCircle, CheckCircle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { useTransaction } from '../../state/transactions/hooks'
-import { ThemedText } from '../../theme'
-import { ExternalLink } from '../../theme'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { TransactionSummary } from '../AccountDetails/TransactionSummary'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
-
-const RowNoFlex = styled(AutoRow)`
-  flex-wrap: nowrap;
-`
-
-export default function TransactionPopup({ hash }: { hash: string }) {
-  const { chainId } = useWeb3React()
-
-  const tx = useTransaction(hash)
-  const theme = useTheme()
-
-  if (!tx) return null
-  const success = Boolean(tx.receipt && tx.receipt.status === 1)
-
-  return (
-    <RowNoFlex>
-      <div style={{ paddingRight: 16 }}>
-        {success ? (
-          <CheckCircle color={theme.deprecated_green1} size={24} />
-        ) : (
-          <AlertCircle color={theme.deprecated_red1} size={24} />
-        )}
-      </div>
-      <AutoColumn gap="8px">
-        <ThemedText.DeprecatedBody fontWeight={500}>
-          <TransactionSummary info={tx.info} />
-        </ThemedText.DeprecatedBody>
-        {chainId && (
-          <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-            View on Explorer
-          </ExternalLink>
-        )}
-      </AutoColumn>
-    </RowNoFlex>
-  )
-}

src/components/Popups/index.tsx

@@ -9,14 +9,12 @@ import { AutoColumn } from '../Column'
 import ClaimPopup from './ClaimPopup'
 import PopupItem from './PopupItem'
 
-const MobilePopupWrapper = styled.div<{ height: string | number }>`
+const MobilePopupWrapper = styled.div`
   position: relative;
   max-width: 100%;
-  height: ${({ height }) => height};
-  margin: ${({ height }) => (height ? '0 auto;' : 0)};
-  margin-bottom: ${({ height }) => (height ? '20px' : 0)};
-
+  margin: 0 auto;
   display: none;
+
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: block;
     padding-top: 20px;
@@ -74,16 +72,18 @@ export default function Popups() {
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
         ))}
       </FixedPopupColumn>
-      <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
-        <MobilePopupInner>
-          {activePopups // reverse so new items up front
-            .slice(0)
-            .reverse()
-            .map((item) => (
-              <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
-            ))}
-        </MobilePopupInner>
-      </MobilePopupWrapper>
+      {activePopups?.length > 0 && (
+        <MobilePopupWrapper>
+          <MobilePopupInner>
+            {activePopups // reverse so new items up front
+              .slice(0)
+              .reverse()
+              .map((item) => (
+                <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
+              ))}
+          </MobilePopupInner>
+        </MobilePopupWrapper>
+      )}
     </>
   )
 }

src/components/PositionCard/Sushi.tsx

@@ -41,7 +41,7 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />

src/components/PositionCard/V2.tsx

@@ -79,7 +79,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
@@ -116,7 +116,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
         </FixedHeightRow>
 
         {showMore && (
-          <AutoColumn gap="8px">
+          <AutoColumn gap="sm">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
                 <Trans>Your total pool tokens:</Trans>

src/components/PositionCard/index.tsx

@@ -79,7 +79,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
     <>
       {userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
         <GrayCard border={border}>
-          <AutoColumn gap="12px">
+          <AutoColumn gap="md">
             <FixedHeightRow>
               <RowFixed>
                 <Text fontWeight={500} fontSize={16}>
@@ -195,7 +195,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px" style={{ marginLeft: '8px' }}>
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
@@ -227,7 +227,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
         </FixedHeightRow>
 
         {showMore && (
-          <AutoColumn gap="8px">
+          <AutoColumn gap="sm">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
                 <Trans>Your total pool tokens:</Trans>

src/components/PositionListItem/index.tsx

@@ -29,7 +29,7 @@ const LinkRow = styled(Link)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   padding: 16px;
   text-decoration: none;
   font-weight: 500;
@@ -73,7 +73,7 @@ const RangeLineItem = styled(DataLineItem)`
 
 const DoubleArrow = styled.span`
   margin: 0 2px;
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
 `
 
 const RangeText = styled.span`
@@ -82,7 +82,7 @@ const RangeText = styled.span`
 `
 
 const ExtentsText = styled.span`
-  color: ${({ theme }) => theme.deprecated_text3};
+  color: ${({ theme }) => theme.textTertiary};
   font-size: 14px;
   margin-right: 4px;
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`

src/components/PositionPreview/index.tsx

@@ -135,11 +135,7 @@ export const PositionPreview = ({
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedSmall
-                textAlign="center"
-                color={theme.deprecated_text3}
-                style={{ marginTop: '4px' }}
-              >
+              <ThemedText.DeprecatedSmall textAlign="center" color={theme.textTertiary} style={{ marginTop: '4px' }}>
                 <Trans>Your position will be 100% composed of {baseCurrency?.symbol} at this price</Trans>
               </ThemedText.DeprecatedSmall>
             </AutoColumn>
@@ -160,11 +156,7 @@ export const PositionPreview = ({
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </ThemedText.DeprecatedMain>
-              <ThemedText.DeprecatedSmall
-                textAlign="center"
-                color={theme.deprecated_text3}
-                style={{ marginTop: '4px' }}
-              >
+              <ThemedText.DeprecatedSmall textAlign="center" color={theme.textTertiary} style={{ marginTop: '4px' }}>
                 <Trans>Your position will be 100% composed of {quoteCurrency?.symbol} at this price</Trans>
               </ThemedText.DeprecatedSmall>
             </AutoColumn>

src/components/PrivacyPolicy/index.tsx

@@ -33,7 +33,7 @@ const StyledExternalCard = styled(Card)`
 
 const HoverText = styled.div`
   text-decoration: none;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   display: flex;
   align-items: center;
 
@@ -95,7 +95,7 @@ export function PrivacyPolicyModal() {
 
   return (
     <Modal isOpen={open} onDismiss={() => toggle()}>
-      <AutoColumn gap="12px" ref={node as any}>
+      <AutoColumn gap="md" ref={node as any}>
         <RowBetween padding="1rem 1rem 0.5rem 1rem">
           <ThemedText.DeprecatedMediumHeader>
             <Trans>Legal & Privacy</Trans>
@@ -110,7 +110,7 @@ export function PrivacyPolicyModal() {
   )
 }
 
-export function PrivacyPolicy() {
+function PrivacyPolicy() {
   return (
     <Wrapper
       draggable="true"
@@ -122,13 +122,13 @@ export function PrivacyPolicy() {
       }}
     >
       <AutoColumn gap="16px">
-        <AutoColumn gap="8px" style={{ width: '100%' }}>
+        <AutoColumn gap="sm" style={{ width: '100%' }}>
           <StyledExternalCard>
             <ExternalLink href="https://uniswap.org/terms-of-service">
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="accentAction">
                     <Trans>Uniswap Labs&apos; Terms of Service</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
@@ -141,7 +141,7 @@ export function PrivacyPolicy() {
               <RowBetween>
                 <AutoRow gap="4px">
                   <Info size={20} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_primaryText1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="accentAction">
                     <Trans>Privacy Policy</Trans>
                   </ThemedText.DeprecatedMain>
                 </AutoRow>
@@ -153,13 +153,13 @@ export function PrivacyPolicy() {
         <ThemedText.DeprecatedMain fontSize={14}>
           <Trans>This app uses the following third-party APIs:</Trans>
         </ThemedText.DeprecatedMain>
-        <AutoColumn gap="12px">
+        <AutoColumn gap="md">
           {EXTERNAL_APIS.map(({ name, description }, i) => (
             <DarkGrayCard key={i}>
-              <AutoColumn gap="8px">
+              <AutoColumn gap="sm">
                 <AutoRow gap="4px">
                   <Info size={18} />
-                  <ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">
+                  <ThemedText.DeprecatedMain fontSize={14} color="textPrimary">
                     {name}
                   </ThemedText.DeprecatedMain>
                 </AutoRow>

src/components/ProgressSteps/index.tsx

@@ -11,7 +11,7 @@ const Wrapper = styled(AutoColumn)`
 const Grouping = styled(AutoColumn)`
   width: fit-content;
   padding: 4px;
-  /* background-color: ${({ theme }) => theme.deprecated_bg2}; */
+  /* background-color: ${({ theme }) => theme.backgroundInteractive}; */
   border-radius: 16px;
 `
 
@@ -19,9 +19,9 @@ const Circle = styled.div<{ confirmed?: boolean; disabled?: boolean }>`
   width: 48px;
   height: 48px;
   background-color: ${({ theme, confirmed, disabled }) =>
-    disabled ? theme.deprecated_bg3 : confirmed ? theme.deprecated_green1 : theme.deprecated_primary1};
+    disabled ? theme.deprecated_bg3 : confirmed ? theme.accentSuccess : theme.accentAction};
   border-radius: 50%;
-  color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text3 : theme.deprecated_text1)};
+  color: ${({ theme, disabled }) => (disabled ? theme.textTertiary : theme.textPrimary)};
   display: flex;
   align-items: center;
   justify-content: center;

src/components/RangeSelector/PresetsButtons.tsx

@@ -10,7 +10,7 @@ const Button = styled(ButtonOutlined).attrs(() => ({
   padding: '8px',
   $borderRadius: '8px',
 }))`
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme }) => theme.textPrimary};
   flex: 1;
 `
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -55,7 +55,7 @@ const DotColor = styled(DotLine)`
 `
 
 const OpaqueBadge = styled(Badge)`
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   border-radius: 8px;
   display: grid;
   font-size: 12px;
@@ -69,7 +69,7 @@ const OpaqueBadge = styled(Badge)`
 const ProtocolBadge = styled(Badge)`
   background-color: ${({ theme }) => theme.deprecated_bg3};
   border-radius: 4px;
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 10px;
   padding: 2px 4px;
   z-index: ${Z_INDEX.sticky + 1};

src/components/SearchModal/CommonBases.tsx

@@ -18,7 +18,7 @@ const MobileWrapper = styled(AutoColumn)`
 `
 
 const BaseWrapper = styled.div<{ disable?: boolean }>`
-  border: 1px solid ${({ theme, disable }) => (disable ? theme.accentAction : theme.backgroundOutline)};
+  border: 1px solid ${({ theme, disable }) => (disable ? theme.accentActive : theme.backgroundOutline)};
   border-radius: 16px;
   display: flex;
   padding: 6px;
@@ -30,8 +30,8 @@ const BaseWrapper = styled.div<{ disable?: boolean }>`
     background-color: ${({ theme }) => theme.hoverDefault};
   }
 
-  color: ${({ theme, disable }) => disable && theme.accentAction};
-  background-color: ${({ theme, disable }) => disable && theme.accentActionSoft};
+  color: ${({ theme, disable }) => disable && theme.accentActive};
+  background-color: ${({ theme, disable }) => disable && theme.accentActiveSoft};
 `
 
 const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({

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

@@ -171,7 +171,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             </div>
           </div>
           <div
-            class="c10 css-1j6a53a"
+            class="c10 css-yfjwjl"
           >
             DAI
           </div>
@@ -246,7 +246,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             </div>
           </div>
           <div
-            class="c10 css-1j6a53a"
+            class="c10 css-yfjwjl"
           >
             USDC
           </div>
@@ -321,7 +321,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             </div>
           </div>
           <div
-            class="c10 css-1j6a53a"
+            class="c10 css-yfjwjl"
           >
             WBTC
           </div>

src/components/SearchModal/CurrencyList/index.tsx

@@ -48,7 +48,7 @@ const CurrencyName = styled(Text)`
 
 const Tag = styled.div`
   background-color: ${({ theme }) => theme.deprecated_bg3};
-  color: ${({ theme }) => theme.deprecated_text2};
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   border-radius: 4px;
   padding: 0.25rem 0.3rem 0.25rem 0.3rem;
@@ -60,7 +60,7 @@ const Tag = styled.div`
   margin-right: 4px;
 `
 
-export const WarningContainer = styled.div`
+const WarningContainer = styled.div`
   margin-left: 0.3em;
 `
 

src/components/SearchModal/CurrencySearch.tsx

@@ -251,7 +251,7 @@ export function CurrencySearch({
           </div>
         ) : (
           <Column style={{ padding: '20px', height: '100%' }}>
-            <ThemedText.DeprecatedMain color={theme.deprecated_text3} textAlign="center" mb="20px">
+            <ThemedText.DeprecatedMain color={theme.textTertiary} textAlign="center" mb="20px">
               <Trans>No results found.</Trans>
             </ThemedText.DeprecatedMain>
           </Column>

src/components/SearchModal/CurrencySearchModal.tsx

@@ -19,7 +19,7 @@ interface CurrencySearchModalProps {
   disableNonToken?: boolean
 }
 
-export enum CurrencyModalView {
+enum CurrencyModalView {
   search,
   importToken,
   tokenSafety,