build: restart daily releases (#5777)

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

.env

@@ -1,5 +1,12 @@
-REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
+# These API keys are intentionally public. Please do not report them - thank you for your concern.
 REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_REGION="us-east-2"
 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"
+REACT_APP_SENTRY_ENABLED=false
+ESLINT_NO_DEV_ERRORS=true
+REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
+REACT_APP_MOONPAY_API="https://api.moonpay.com"
+REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkStaging?platform=web"
+REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_DycfESRid31UaSxhI5yWKe1r5E5kKSz"

.env.production

@@ -1,7 +1,11 @@
 REACT_APP_AMPLITUDE_PROXY_URL="https://api.uniswap.org/v1/amplitude-proxy"
-REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
+REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_MOONPAY_API="https://api.moonpay.com"
+REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLink?platform=web"
+REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_live_uQG4BJC4w3cxnqpcSqAfohdBFDTsY6E"
 REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
-REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"
 THE_GRAPH_SCHEMA_ENDPOINT="https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3"
+REACT_APP_SENTRY_ENABLED=true

.eslintignore

@@ -0,0 +1,5 @@
+*.config.ts
+*.d.ts
+/src/graphql/data/__generated__/types-and-hooks.ts
+/src/graphql/thegraph/__generated__/types-and-hooks.ts
+/src/schema/schema.graphql

.eslintrc.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+
+require('@uniswap/eslint-config/load')
+
+module.exports = {
+  extends: '@uniswap/eslint-config/react',
+}

.eslintrc.json

@@ -1,99 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      // Allows for the parsing of JSX
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "ignorePatterns": [
-    "src/types/v3",
-    "src/abis/types",
-    "src/locales/**/*.js",
-    "src/locales/**/en-US.po",
-    "node_modules",
-    "coverage",
-    "build",
-    "dist",
-    ".DS_Store",
-    ".env.local",
-    ".env.development.local",
-    ".env.test.local",
-    ".env.production.local",
-    ".idea/",
-    ".vscode/",
-    "package-lock.json",
-    "yarn.lock"
-  ],
-  "extends": [
-    "react-app",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["simple-import-sort", "unused-imports"],
-  "rules": {
-    "unused-imports/no-unused-imports": "error",
-    "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "prettier/prettier": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
-    "object-shorthand": ["error", "always"],
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "ethers",
-            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
-          },
-          {
-            "name": "styled-components",
-            "message": "Please import from styled-components/macro."
-          },
-          {
-            "name": "@lingui/macro",
-            "importNames": ["t"],
-            "message": "Please use <Trans> instead of t."
-          }
-        ],
-        "patterns": [
-          {
-            "group": ["**/dist"],
-            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
-          },
-          {
-            "group": ["!styled-components/macro"]
-          }
-        ]
-      }
-    ],
-    "@typescript-eslint/no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "@ethersproject/providers",
-            "message": "Please only use Providers instantiated in constants/providers to improve traceability.",
-            "allowTypeImports": true
-          }
-        ]
-      }
-    ]
-  }
-}

.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,29 @@ 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
+        continue-on-error: true
+        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

@@ -59,7 +59,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup

.gitignore

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

.nvmrc

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

.prettierignore

@@ -1 +0,0 @@
-/src/schema/schema.graphql

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 120
-}

.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: {}

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ],
+  "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -5,15 +5,12 @@
   "editor.formatOnSaveMode": "file",
   "editor.tabCompletion": "on",
   "editor.tabSize": 2,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.inlineSuggest.enabled": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
   "files.eol": "\n",
   "eslint.enable": true,
-  "eslint.debug": true,
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "eslint.debug": true
 }

apollo-codegen.ts

@@ -0,0 +1,25 @@
+/* eslint-env node */
+
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+// Generates TS objects from the schemas returned by graphql queries
+// To learn more: https://www.apollographql.com/docs/react/development-testing/static-typing/#setting-up-your-project
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: './src/graphql/data/schema.graphql',
+  documents: ['./src/graphql/data/**', '!./src/graphql/data/__generated__/**', '!**/thegraph/**'],
+  generates: {
+    'src/graphql/data/__generated__/types-and-hooks.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+      config: {
+        withHooks: true,
+        // This avoid all generated schemas being wrapped in Maybe https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#maybevalue-string-default-value-t--null
+        maybeValue: 'T',
+      },
+    },
+  },
+}
+
+// This is used in package.json when generating apollo schemas however the linter stills flags this as unused
+// eslint-disable-next-line import/no-unused-modules
+export default config

apollo-codegen_thegraph.ts

@@ -0,0 +1,25 @@
+/* eslint-env node */
+
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+// Generates TS objects from the schemas returned by graphql queries
+// To learn more: https://www.apollographql.com/docs/react/development-testing/static-typing/#setting-up-your-project
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: './src/graphql/thegraph/schema.graphql',
+  documents: ['!./src/graphql/data/**', '!./src/graphql/thegraph/__generated__/**', './src/graphql/thegraph/**'],
+  generates: {
+    'src/graphql/thegraph/__generated__/types-and-hooks.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+      config: {
+        withHooks: true,
+        // This avoid all generated schemas being wrapped in Maybe https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#maybevalue-string-default-value-t--null
+        maybeValue: 'T',
+      },
+    },
+  },
+}
+
+// This is used in package.json when generating apollo schemas however the linter stills flags this as unused
+// eslint-disable-next-line import/no-unused-modules
+export default config

babel-plugin-macros.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {

cypress/e2e/landing.test.ts

@@ -1,12 +1,27 @@
+import { getTestSelector } from '../utils'
+
 describe('Landing Page', () => {
-  beforeEach(() => cy.visit('/'))
-  it('loads swap page', () => {
-    cy.get('#swap-page')
+  it('shows landing page when no selectedWallet', () => {
+    cy.visit('/', { noWallet: true })
+    cy.get(getTestSelector('landing-page'))
     cy.screenshot()
   })
 
-  it('redirects to url /swap', () => {
+  it('redirects to swap page when selectedWallet is INJECTED', () => {
+    cy.visit('/', { selectedWallet: 'INJECTED' })
+    cy.get('#swap-page')
     cy.url().should('include', '/swap')
+    cy.screenshot()
+  })
+
+  it('shows landing page when selectedWallet is INJECTED and ?intro=true is in query', () => {
+    cy.visit('/?intro=true', { selectedWallet: 'INJECTED' })
+    cy.get(getTestSelector('landing-page'))
+  })
+
+  it('shows landing page when the unicorn icon in nav is selected', () => {
+    cy.get(getTestSelector('uniswap-logo')).click()
+    cy.get(getTestSelector('landing-page'))
   })
 
   it('allows navigation to pool', () => {

cypress/e2e/nfts.test.ts

@@ -0,0 +1,63 @@
+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()
+  })
+})

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,34 @@
+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)
+  })
+
+  it('should go to native token on ethereum and render description', () => {
+    cy.visit('/tokens/ethereum/NATIVE')
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('Ethereum is a smart contract platform that enables developers').should('exist')
+    cy.contains('Etherscan').should('exist')
+  })
+
+  it('should go to native token on polygon and render description and links', () => {
+    cy.visit('/tokens/polygon/NATIVE')
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('Wrapped Matic on Polygon').should('exist')
+    cy.contains('Block Explorer').should('exist')
+  })
+})

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

@@ -8,7 +8,8 @@ describe(
   },
   () => {
     it('loads swap page', () => {
-      // We *must* wait in order to space out the retry attempts.
+      // TODO: We *must* wait in order to space out the retry attempts. Find a better way to do this.
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(ONE_MINUTE)
         .visit('/', {
           retryOnStatusCodeFailure: true,

cypress/support/e2e.ts

@@ -20,6 +20,8 @@ declare global {
     interface VisitOptions {
       serviceWorker?: true
       featureFlags?: Array<FeatureFlag>
+      selectedWallet?: string
+      noWallet?: boolean
     }
   }
 }
@@ -38,7 +40,12 @@ Cypress.Commands.overwrite(
         onBeforeLoad(win) {
           options?.onBeforeLoad?.(win)
           win.localStorage.clear()
-          win.localStorage.setItem('redux_localstorage_simple_user', '{"selectedWallet":"INJECTED"}')
+
+          const userState = {
+            selectedWallet: options?.noWallet !== true ? options?.selectedWallet || 'INJECTED' : undefined,
+            fiatOnrampDismissed: true,
+          }
+          win.localStorage.setItem('redux_localstorage_simple_user', JSON.stringify(userState))
 
           if (options?.featureFlags) {
             const featureFlags = options.featureFlags.reduce(
@@ -65,10 +72,20 @@ 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) => {
-  // returning false here prevents Cypress from
-  // failing the test
+Cypress.on('uncaught:exception', () => {
+  // returning false here prevents Cypress from failing the test
   return false
 })

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/graphql-test-utils.ts

@@ -1,7 +1,7 @@
 // Utility to match GraphQL mutation based on the query name
 export const hasQuery = (req: any, queryName: string) => {
   const { body } = req
-  return body.hasOwnProperty('query') && body.query.includes(queryName)
+  return Object.prototype.hasOwnProperty.call(body, 'query') && body.query.includes(queryName)
 }
 
 // Alias query if queryName  matches

cypress/utils/index.ts

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

fetch-schema.js

@@ -1,9 +1,10 @@
-/* eslint-disable */
+/* eslint-env node */
+
 require('dotenv').config({ path: '.env.production' })
+
 const { exec } = require('child_process')
-const dataConfig = require('./relay.config')
-const thegraphConfig = require('./relay_thegraph.config')
-/* eslint-enable */
+const dataConfig = require('./graphql.config')
+const thegraphConfig = require('./graphql_thegraph.config')
 
 function fetchSchema(url, outputFile) {
   exec(

graphql.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 module.exports = {
   src: './src',
   language: 'typescript',

graphql_thegraph.config.js

@@ -1,5 +1,6 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const defaultConfig = require('./relay.config')
+/* eslint-env node */
+
+const defaultConfig = require('./graphql.config')
 
 module.exports = {
   src: defaultConfig.src,

package.json

@@ -8,10 +8,10 @@
     "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
     "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
-    "relay": "relay-compiler relay.config.js",
-    "relay-thegraph": "relay-compiler relay_thegraph.config.js",
     "graphql:fetch": "node fetch-schema.js",
-    "graphql:generate": "yarn relay && yarn relay-thegraph",
+    "graphql:generate:data": "graphql-codegen --config apollo-codegen.ts",
+    "graphql:generate:thegraph": "graphql-codegen --config apollo-codegen_thegraph.ts",
+    "graphql:generate": "yarn graphql:generate:data && yarn graphql:generate:thegraph",
     "prei18n:extract": "node prei18n-extract.js",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
@@ -90,37 +90,35 @@
     "@types/ua-parser-js": "^0.7.35",
     "@types/uuid": "^8.3.4",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4",
-    "@typescript-eslint/parser": "^4",
+    "@uniswap/eslint-config": "^1.1.1",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
-    "babel-plugin-relay": "^14.1.0",
     "cypress": "^10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-better-styled-components": "^1.1.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3",
-    "relay-compiler": "^14.1.0",
     "serve": "^11.3.2",
+    "ts-transform-graphql-tag": "^0.2.1",
     "typechain": "^5.0.0",
     "typescript": "^4.4.3",
     "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.2",
     "@coinbase/wallet-sdk": "^3.3.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
+    "@graphql-codegen/cli": "^2.15.0",
+    "@graphql-codegen/client-preset": "^1.2.1",
+    "@graphql-codegen/typescript": "^2.8.3",
+    "@graphql-codegen/typescript-operations": "^2.5.8",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
+    "@graphql-codegen/typescript-resolvers": "^2.7.8",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
@@ -132,26 +130,28 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@types/react-relay": "^13.0.2",
+    "@sentry/react": "7.20.1",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@uniswap/analytics": "1.1.1",
-    "@uniswap/analytics-events": "1.1.0",
-    "@uniswap/conedison": "^1.1.0",
+    "@uniswap/analytics": "1.2.0",
+    "@uniswap/analytics-events": "^1.5.0",
+    "@uniswap/conedison": "^1.1.1",
     "@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.20.0",
+    "@uniswap/widgets": "2.22.11",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -201,7 +201,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",
@@ -211,7 +210,6 @@
     "react-popper": "^2.2.3",
     "react-query": "^3.39.1",
     "react-redux": "^8.0.2",
-    "react-relay": "^14.1.0",
     "react-router-dom": "^6.3.0",
     "react-spring": "^9.5.5",
     "react-table": "^7.8.0",

prei18n-extract.js

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

public/index.html

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

src/components/About/AboutFooter.tsx

@@ -0,0 +1,196 @@
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
+import { Link } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { BREAKPOINTS, ExternalLink } from 'theme'
+
+import { DiscordIcon, GithubIcon, TwitterIcon } from './Icons'
+import darkUnicornImgSrc from './images/unicornEmbossDark.png'
+import lightUnicornImgSrc from './images/unicornEmbossLight.png'
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 48px;
+  max-width: 1440px;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+
+const LogoSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const LogoSectionLeft = styled(LogoSection)`
+  display: none;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: flex;
+  }
+`
+
+const LogoSectionBottom = styled(LogoSection)`
+  display: flex;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: none;
+  }
+`
+
+const StyledLogo = styled.img`
+  width: 72px;
+  height: 72px;
+  display: none;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: block;
+  }
+`
+
+const SocialLinks = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin: 20px 0 0 0;
+`
+
+const SocialLink = styled.a`
+  display: flex;
+`
+
+const FooterLinks = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 24px;
+  }
+`
+
+const LinkGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 200px;
+  margin: 20px 0 0 0;
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    margin: 0;
+  }
+`
+
+const LinkGroupTitle = styled.span`
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+`
+
+const ExternalTextLink = styled(ExternalLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
+`
+
+const TextLink = styled(Link)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const Copyright = styled.span`
+  font-size: 16px;
+  line-height: 20px;
+  margin: 1rem 0 0 0;
+  color: ${({ theme }) => theme.textTertiary};
+`
+
+const LogoSectionContent = () => {
+  const isDarkMode = useIsDarkMode()
+  return (
+    <>
+      <StyledLogo src={isDarkMode ? darkUnicornImgSrc : lightUnicornImgSrc} alt="Uniswap Logo" />
+      <SocialLinks>
+        <SocialLink href="https://github.com/Uniswap" target="_blank" rel="noopener noreferrer">
+          <DiscordIcon size={32} />
+        </SocialLink>
+        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.TWITTER_LINK}>
+          <SocialLink href="https://twitter.com/uniswap" target="_blank" rel="noopener noreferrer">
+            <TwitterIcon size={32} />
+          </SocialLink>
+        </TraceEvent>
+        <SocialLink href="https://discord.gg/FCfyBSbCU5" target="_blank" rel="noopener noreferrer">
+          <GithubIcon size={32} />
+        </SocialLink>
+      </SocialLinks>
+      <Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
+    </>
+  )
+}
+
+export const AboutFooter = () => {
+  return (
+    <Footer>
+      <LogoSectionLeft>
+        <LogoSectionContent />
+      </LogoSectionLeft>
+
+      <FooterLinks>
+        <LinkGroup>
+          <LinkGroupTitle>App</LinkGroupTitle>
+          <TextLink to="/swap">Swap</TextLink>
+          <TextLink to="/tokens">Tokens</TextLink>
+          <TextLink to="/nfts">NFTs</TextLink>
+          <TextLink to="/pool">Pools</TextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Protocol</LinkGroupTitle>
+          <ExternalTextLink href="https://uniswap.org/community" target="_blank" rel="noopener noreferrer">
+            Community
+          </ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/governance" target="_blank" rel="noopener noreferrer">
+            Governance
+          </ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/developers" target="_blank" rel="noopener noreferrer">
+            Developers
+          </ExternalTextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Company</LinkGroupTitle>
+          <ExternalTextLink href="https://boards.greenhouse.io/uniswaplabs" target="_blank" rel="noopener noreferrer">
+            Careers
+          </ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/blog" target="_blank" rel="noopener noreferrer">
+            Blog
+          </ExternalTextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Get Help</LinkGroupTitle>
+          <ExternalTextLink
+            href="https://support.uniswap.org/hc/en-us/requests/new"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Contact Us
+          </ExternalTextLink>
+          <ExternalTextLink href="https://support.uniswap.org/hc/en-us" target="_blank" rel="noopener noreferrer">
+            Help Center
+          </ExternalTextLink>
+        </LinkGroup>
+      </FooterLinks>
+
+      <LogoSectionBottom>
+        <LogoSectionContent />
+      </LogoSectionBottom>
+    </Footer>
+  )
+}

src/components/About/Card.tsx

@@ -0,0 +1,150 @@
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, EventName } from '@uniswap/analytics-events'
+import { Link } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled, { DefaultTheme } from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
+
+export enum CardType {
+  Primary = 'Primary',
+  Secondary = 'Secondary',
+}
+
+const StyledCard = styled.div<{ isDarkMode: boolean; backgroundImgSrc?: string; type: CardType }>`
+  display: flex;
+  background: ${({ isDarkMode, backgroundImgSrc, type, theme }) =>
+    isDarkMode
+      ? `${type === CardType.Primary ? theme.backgroundModule : theme.backgroundSurface} ${
+          backgroundImgSrc ? ` url(${backgroundImgSrc})` : ''
+        }`
+      : `${type === CardType.Primary ? 'white' : theme.backgroundModule} url(${backgroundImgSrc})`};
+  background-size: auto 100%;
+  background-position: right;
+  background-repeat: no-repeat;
+  background-origin: border-box;
+
+  flex-direction: column;
+  justify-content: space-between;
+  text-decoration: none;
+  color: ${({ theme }) => theme.textPrimary};
+  padding: 24px;
+  height: 212px;
+  border-radius: 24px;
+  border: 1px solid ${({ theme, type }) => (type === CardType.Primary ? 'transparent' : theme.backgroundOutline)};
+  box-shadow: 0px 10px 24px 0px rgba(51, 53, 72, 0.04);
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} border`};
+
+  &:hover {
+    border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? theme.backgroundInteractive : theme.textTertiary)};
+  }
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    height: ${({ backgroundImgSrc }) => (backgroundImgSrc ? 360 : 260)}px;
+  }
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    padding: 32px;
+  }
+`
+
+const TitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const CardTitle = styled.div`
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    font-size: 28px;
+    line-height: 36px;
+  }
+`
+
+const getCardDescriptionColor = (type: CardType, theme: DefaultTheme) => {
+  switch (type) {
+    case CardType.Secondary:
+      return theme.textSecondary
+    default:
+      return theme.textPrimary
+  }
+}
+
+const CardDescription = styled.div<{ type: CardType }>`
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme, type }) => getCardDescriptionColor(type, theme)};
+  padding: 0 40px 0 0;
+  max-width: 480px;
+
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    font-size: 20px;
+    line-height: 28px;
+    max-width: 480px;
+  }
+`
+
+const CardCTA = styled(CardDescription)`
+  color: ${({ theme }) => theme.accentAction};
+  font-weight: 500;
+  margin: 24px 0 0;
+  cursor: pointer;
+
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} opacity`};
+
+  &:hover {
+    opacity: 0.6;
+  }
+`
+
+const Card = ({
+  type = CardType.Primary,
+  title,
+  description,
+  cta,
+  to,
+  external,
+  backgroundImgSrc,
+  icon,
+  elementName,
+}: {
+  type?: CardType
+  title: string
+  description: string
+  cta?: string
+  to: string
+  external?: boolean
+  backgroundImgSrc?: string
+  icon?: React.ReactNode
+  elementName?: string
+}) => {
+  const isDarkMode = useIsDarkMode()
+  return (
+    <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={elementName}>
+      <StyledCard
+        type={type}
+        as={external ? 'a' : Link}
+        to={external ? undefined : to}
+        href={external ? to : undefined}
+        target={external ? '_blank' : undefined}
+        rel={external ? 'noopenener noreferrer' : undefined}
+        isDarkMode={isDarkMode}
+        backgroundImgSrc={backgroundImgSrc}
+      >
+        <TitleRow>
+          <CardTitle>{title}</CardTitle>
+          {icon}
+        </TitleRow>
+        <CardDescription type={type}>
+          {description}
+          <CardCTA type={type}>{cta}</CardCTA>
+        </CardDescription>
+      </StyledCard>
+    </TraceEvent>
+  )
+}
+
+export default Card

src/components/About/Icons.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components/macro'
+
+import { ReactComponent as DiscordI } from './images/discord.svg'
+import { ReactComponent as GithubI } from './images/github.svg'
+import { ReactComponent as TwitterI } from './images/twitter-safe.svg'
+
+export const DiscordIcon = styled(DiscordI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`
+
+export const TwitterIcon = styled(TwitterI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`
+
+export const GithubIcon = styled(GithubI)<{ size?: number; fill?: string }>`
+  height: ${({ size }) => (size ? size + 'px' : '32px')};
+  width: ${({ size }) => (size ? size + 'px' : '32px')};
+  fill: ${({ fill }) => fill ?? '#98A1C0'};
+  opacity: 1;
+`

src/components/About/ProtocolBanner.tsx

@@ -0,0 +1,106 @@
+import { ButtonEmpty } from 'components/Button'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
+
+import meshSrc from './images/Mesh.png'
+
+const DARK_MODE_GRADIENT = 'radial-gradient(101.8% 4091.31% at 0% 0%, #4673FA 0%, #9646FA 100%)'
+
+const Banner = styled.div<{ isDarkMode: boolean }>`
+  height: 340px;
+  width: 100%;
+  border-radius: 32px;
+  max-width: 1440px;
+  margin: 80px 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px 48px;
+
+  box-shadow: 0px 10px 24px rgba(51, 53, 72, 0.04);
+
+  background: ${({ isDarkMode }) =>
+    isDarkMode
+      ? `url(${meshSrc}), ${DARK_MODE_GRADIENT}`
+      : `url(${meshSrc}), linear-gradient(93.06deg, #FF00C7 2.66%, #FF9FFB 98.99%);`};
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    height: 140px;
+    flex-direction: row;
+  }
+`
+
+const TextContainer = styled.div`
+  color: white;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`
+
+const HeaderText = styled.div`
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 36px;
+
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    font-size: 28px;
+    line-height: 36px;
+  }
+`
+
+const DescriptionText = styled.div`
+  margin: 10px 10px 0 0;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
+    font-size: 20px;
+    line-height: 28px;
+  }
+`
+
+const BannerButtonContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} opacity`};
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    width: auto;
+  }
+`
+
+const BannerButton = styled(ButtonEmpty)`
+  color: white;
+  border: 1px solid white;
+`
+
+const ProtocolBanner = () => {
+  const isDarkMode = useIsDarkMode()
+  return (
+    <Banner isDarkMode={isDarkMode}>
+      <TextContainer>
+        <HeaderText>Powered by the Uniswap Protocol</HeaderText>
+        <DescriptionText>
+          The leading decentralized crypto trading protocol, governed by a global community.
+        </DescriptionText>
+      </TextContainer>
+      <BannerButtonContainer>
+        <BannerButton width="200px" as="a" href="https://uniswap.org" rel="noopener noreferrer" target="_blank">
+          Learn more
+        </BannerButton>
+      </BannerButtonContainer>
+    </Banner>
+  )
+}
+
+export default ProtocolBanner

src/components/About/constants.tsx

@@ -0,0 +1,71 @@
+import { ElementName } from '@uniswap/analytics-events'
+import { DollarSign, Terminal } from 'react-feather'
+import styled from 'styled-components/macro'
+import { lightTheme } from 'theme/colors'
+
+import darkArrowImgSrc from './images/aboutArrowDark.png'
+import lightArrowImgSrc from './images/aboutArrowLight.png'
+import darkDollarImgSrc from './images/aboutDollarDark.png'
+import darkTerminalImgSrc from './images/aboutTerminalDark.png'
+import nftCardImgSrc from './images/nftCard.png'
+import swapCardImgSrc from './images/swapCard.png'
+
+export const MAIN_CARDS = [
+  {
+    to: '/swap',
+    title: 'Swap tokens',
+    description: 'Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.',
+    cta: 'Trade Tokens',
+    darkBackgroundImgSrc: swapCardImgSrc,
+    lightBackgroundImgSrc: swapCardImgSrc,
+    elementName: ElementName.ABOUT_PAGE_SWAP_CARD,
+  },
+  {
+    to: '/nfts',
+    title: 'Trade NFTs',
+    description: 'Buy and sell NFTs across marketplaces to find more listings at better prices.',
+    cta: 'Explore NFTs',
+    darkBackgroundImgSrc: nftCardImgSrc,
+    lightBackgroundImgSrc: nftCardImgSrc,
+    elementName: ElementName.ABOUT_PAGE_NFTS_CARD,
+  },
+]
+
+const StyledCardLogo = styled.img`
+  min-width: 20px;
+  min-height: 20px;
+  max-height: 48px;
+  max-width: 48px;
+`
+
+export const MORE_CARDS = [
+  {
+    to: 'https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-',
+    external: true,
+    title: 'Buy crypto',
+    description: 'Buy crypto with your credit card or bank account at the best rates.',
+    lightIcon: <DollarSign color={lightTheme.textTertiary} size={48} />,
+    darkIcon: <StyledCardLogo src={darkDollarImgSrc} alt="Earn" />,
+    cta: 'Buy now',
+    elementName: ElementName.ABOUT_PAGE_BUY_CRYPTO_CARD,
+  },
+  {
+    to: '/pool',
+    title: 'Earn',
+    description: 'Provide liquidity to pools on Uniswap and earn fees on swaps.',
+    lightIcon: <StyledCardLogo src={lightArrowImgSrc} alt="Analytics" />,
+    darkIcon: <StyledCardLogo src={darkArrowImgSrc} alt="Analytics" />,
+    cta: 'Provide liquidity',
+    elementName: ElementName.ABOUT_PAGE_EARN_CARD,
+  },
+  {
+    to: 'https://docs.uniswap.org',
+    external: true,
+    title: 'Build dApps',
+    description: 'Build apps and tools on the largest DeFi protocol on Ethereum.',
+    lightIcon: <Terminal color={lightTheme.textTertiary} size={48} />,
+    darkIcon: <StyledCardLogo src={darkTerminalImgSrc} alt="Developers" />,
+    cta: 'Developer docs',
+    elementName: ElementName.ABOUT_PAGE_DEV_DOCS_CARD,
+  },
+]

src/components/About/images/discord.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 71 55" xmlns="http://www.w3.org/2000/svg">
+  <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" />
+</svg>

src/components/About/images/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

src/components/About/images/twitter-safe.svg

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 32 32" role="img"  xmlns="http://www.w3.org/2000/svg">
+    <path d="M31.2746 5.92398C30.7719 6.14694 30.2551 6.33512 29.727 6.4879C30.3522 5.7808 30.8289 4.9488 31.1199 4.03835C31.1851 3.83427 31.1175 3.61089 30.9498 3.47742C30.7822 3.34385 30.5495 3.32785 30.365 3.43716C29.2434 4.10235 28.0334 4.58039 26.7647 4.85993C25.4866 3.6111 23.7508 2.90039 21.9563 2.90039C18.1684 2.90039 15.0867 5.98199 15.0867 9.76975C15.0867 10.0681 15.1056 10.3647 15.143 10.6573C10.4426 10.2446 6.07276 7.9343 3.07198 4.25337C2.96504 4.12217 2.80029 4.05146 2.63162 4.06498C2.46285 4.0782 2.31121 4.17337 2.22595 4.31964C1.61733 5.36398 1.29557 6.5584 1.29557 7.77368C1.29557 9.4289 1.88654 10.9994 2.93046 12.2265C2.61304 12.1166 2.30502 11.9792 2.01103 11.816C1.8532 11.7282 1.66058 11.7295 1.50378 11.8194C1.34687 11.9093 1.2485 12.0747 1.24437 12.2554C1.24365 12.2859 1.24365 12.3163 1.24365 12.3472C1.24365 14.8179 2.5734 17.0423 4.60644 18.2547C4.43178 18.2373 4.25722 18.212 4.0838 18.1788C3.90502 18.1447 3.72117 18.2073 3.6006 18.3437C3.47983 18.4799 3.43988 18.6699 3.49552 18.8433C4.24804 21.1927 6.18548 22.9208 8.52767 23.4477C6.58507 24.6644 4.36355 25.3017 2.03147 25.3017C1.54486 25.3017 1.05547 25.2731 0.5765 25.2165C0.338565 25.1882 0.111055 25.3287 0.0300229 25.5549C-0.0510093 25.7813 0.0348745 26.0337 0.2373 26.1634C3.23322 28.0844 6.69738 29.0997 10.2551 29.0997C17.249 29.0997 21.6242 25.8016 24.063 23.0349C27.104 19.585 28.8481 15.0186 28.8481 10.5067C28.8481 10.3182 28.8452 10.1278 28.8394 9.93812C30.0392 9.03417 31.0722 7.94018 31.9128 6.68279C32.0404 6.49182 32.0266 6.23943 31.8787 6.06364C31.731 5.88774 31.4848 5.83087 31.2746 5.92398Z" />
+</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/TransactionSummary.tsx

@@ -14,18 +14,15 @@ import {
   CollectFeesTransactionInfo,
   CreateV3PoolTransactionInfo,
   DelegateTransactionInfo,
-  DepositLiquidityStakingTransactionInfo,
   ExactInputSwapTransactionInfo,
   ExactOutputSwapTransactionInfo,
   ExecuteTransactionInfo,
   MigrateV2LiquidityToV3TransactionInfo,
   QueueTransactionInfo,
   RemoveLiquidityV3TransactionInfo,
-  SubmitProposalTransactionInfo,
   TransactionInfo,
   TransactionType,
   VoteTransactionInfo,
-  WithdrawLiquidityStakingTransactionInfo,
   WrapTransactionInfo,
 } from '../../state/transactions/types'
 
@@ -83,7 +80,7 @@ function ClaimSummary({ info: { recipient, uniAmountRaw } }: { info: ClaimTransa
   )
 }
 
-function SubmitProposalTransactionSummary(_: { info: SubmitProposalTransactionInfo }) {
+function SubmitProposalTransactionSummary() {
   return <Trans>Submit new proposal</Trans>
 }
 
@@ -175,13 +172,13 @@ function WrapSummary({ info: { chainId, currencyAmountRaw, unwrapped } }: { info
   }
 }
 
-function DepositLiquidityStakingSummary(_: { info: DepositLiquidityStakingTransactionInfo }) {
+function DepositLiquidityStakingSummary() {
   // not worth rendering the tokens since you can should no longer deposit liquidity in the staking contracts
   // todo: deprecate and delete the code paths that allow this, show user more information
   return <Trans>Deposit liquidity</Trans>
 }
 
-function WithdrawLiquidityStakingSummary(_: { info: WithdrawLiquidityStakingTransactionInfo }) {
+function WithdrawLiquidityStakingSummary() {
   return <Trans>Withdraw deposited liquidity</Trans>
 }
 
@@ -319,10 +316,10 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
       return <ClaimSummary info={info} />
 
     case TransactionType.DEPOSIT_LIQUIDITY_STAKING:
-      return <DepositLiquidityStakingSummary info={info} />
+      return <DepositLiquidityStakingSummary />
 
     case TransactionType.WITHDRAW_LIQUIDITY_STAKING:
-      return <WithdrawLiquidityStakingSummary info={info} />
+      return <WithdrawLiquidityStakingSummary />
 
     case TransactionType.SWAP:
       return <SwapSummary info={info} />
@@ -358,6 +355,6 @@ export function TransactionSummary({ info }: { info: TransactionInfo }) {
       return <ExecuteSummary info={info} />
 
     case TransactionType.SUBMIT_PROPOSAL:
-      return <SubmitProposalTransactionSummary info={info} />
+      return <SubmitProposalTransactionSummary />
   }
 }

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

@@ -39,26 +39,32 @@ const getCurrency = ({ info, chainId }: { info: TransactionInfo; chainId: number
   switch (info.type) {
     case TransactionType.ADD_LIQUIDITY_V3_POOL:
     case TransactionType.REMOVE_LIQUIDITY_V3:
-    case TransactionType.CREATE_V3_POOL:
+    case TransactionType.CREATE_V3_POOL: {
       const { baseCurrencyId, quoteCurrencyId } = info
       return { currencyId0: baseCurrencyId, currencyId1: quoteCurrencyId }
-    case TransactionType.SWAP:
+    }
+    case TransactionType.SWAP: {
       const { inputCurrencyId, outputCurrencyId } = info
       return { currencyId0: inputCurrencyId, currencyId1: outputCurrencyId }
-    case TransactionType.WRAP:
+    }
+    case TransactionType.WRAP: {
       const { unwrapped } = info
       const native = info.chainId ? nativeOnChain(info.chainId) : undefined
       const base = 'ETH'
       const wrappedCurrency = native?.wrapped.address ?? 'WETH'
       return { currencyId0: unwrapped ? wrappedCurrency : base, currencyId1: unwrapped ? base : wrappedCurrency }
-    case TransactionType.COLLECT_FEES:
+    }
+    case TransactionType.COLLECT_FEES: {
       const { currencyId0, currencyId1 } = info
       return { currencyId0, currencyId1 }
-    case TransactionType.APPROVAL:
+    }
+    case TransactionType.APPROVAL: {
       return { currencyId0: info.tokenAddress, currencyId1: undefined }
-    case TransactionType.CLAIM:
+    }
+    case TransactionType.CLAIM: {
       const uniAddress = chainId ? UNI_ADDRESS[chainId] : undefined
       return { currencyId0: uniAddress, currencyId1: undefined }
+    }
     default:
       return { currencyId0: undefined, currencyId1: undefined }
   }

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

@@ -0,0 +1,13 @@
+import { SpinnerSVG } from 'theme'
+
+const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => (
+  <SpinnerSVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      opacity="0.1"
+      d="M18.8334 10.0003C18.8334 14.6027 15.1025 18.3337 10.5001 18.3337C5.89771 18.3337 2.16675 14.6027 2.16675 10.0003C2.16675 5.39795 5.89771 1.66699 10.5001 1.66699C15.1025 1.66699 18.8334 5.39795 18.8334 10.0003ZM4.66675 10.0003C4.66675 13.222 7.27842 15.8337 10.5001 15.8337C13.7217 15.8337 16.3334 13.222 16.3334 10.0003C16.3334 6.77867 13.7217 4.16699 10.5001 4.16699C7.27842 4.16699 4.66675 6.77867 4.66675 10.0003Z"
+    />
+    <path d="M17.5834 10.0003C18.2738 10.0003 18.843 9.4376 18.7398 8.755C18.6392 8.0891 18.458 7.43633 18.1991 6.8113C17.7803 5.80025 17.1665 4.88159 16.3926 4.10777C15.6188 3.33395 14.7002 2.72012 13.6891 2.30133C13.0641 2.04243 12.4113 1.86121 11.7454 1.76057C11.0628 1.6574 10.5001 2.22664 10.5001 2.91699C10.5001 3.60735 11.066 4.15361 11.7405 4.30041C12.0789 4.37406 12.4109 4.47786 12.7324 4.61103C13.4401 4.90418 14.0832 5.33386 14.6249 5.87554C15.1665 6.41721 15.5962 7.06027 15.8894 7.76801C16.0225 8.08949 16.1264 8.42147 16.2 8.75986C16.3468 9.43443 16.8931 10.0003 17.5834 10.0003Z" />
+  </SpinnerSVG>
+)
+
+export default ButtonLoadingSpinner

src/components/Button/index.tsx

@@ -5,16 +5,31 @@ import styled, { DefaultTheme, useTheme } from 'styled-components/macro'
 
 import { RowBetween } from '../Row'
 
+export { default as LoadingButtonSpinner } from './LoadingButtonSpinner'
+
 type ButtonProps = Omit<ButtonPropsOriginal, 'css'>
 
-export const BaseButton = styled(RebassButton)<
-  {
-    padding?: string
-    width?: string
-    $borderRadius?: string
-    altDisabledStyle?: boolean
-  } & ButtonProps
->`
+const ButtonOverlay = styled.div`
+  background-color: transparent;
+  bottom: 0;
+  border-radius: inherit;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 150ms ease background-color;
+  width: 100%;
+`
+
+type BaseButtonProps = {
+  padding?: string
+  width?: string
+  $borderRadius?: string
+  altDisabledStyle?: boolean
+} & ButtonProps
+
+export const BaseButton = styled(RebassButton)<BaseButtonProps>`
   padding: ${({ padding }) => padding ?? '16px'};
   width: ${({ width }) => width ?? '100%'};
   font-weight: 500;
@@ -22,7 +37,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 +72,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,7 +94,14 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
-export const ButtonLight = styled(BaseButton)`
+export const SmallButtonPrimary = styled(ButtonPrimary)`
+  width: auto;
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
+const BaseButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.accentActionSoft};
   color: ${({ theme }) => theme.accentAction};
   font-size: 20px;
@@ -96,6 +118,19 @@ export const ButtonLight = styled(BaseButton)`
     box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
     background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
   }
+
+  :hover {
+    ${ButtonOverlay} {
+      background-color: ${({ theme }) => theme.stateOverlayHover};
+    }
+  }
+
+  :active {
+    ${ButtonOverlay} {
+      background-color: ${({ theme }) => theme.stateOverlayPressed};
+    }
+  }
+
   :disabled {
     opacity: 0.4;
     :hover {
@@ -110,21 +145,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 +186,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 +226,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 +252,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 +268,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 +347,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 +388,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>
@@ -364,18 +397,6 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
   }
 }
 
-const ButtonOverlay = styled.div`
-  background-color: transparent;
-  bottom: 0;
-  border-radius: 16px;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: 150ms ease background-color;
-  width: 100%;
-`
 export enum ButtonSize {
   small,
   medium,
@@ -390,7 +411,7 @@ export enum ButtonEmphasis {
   warning,
   destructive,
 }
-interface BaseButtonProps {
+interface BaseThemeButtonProps {
   size: ButtonSize
   emphasis: ButtonEmphasis
 }
@@ -469,7 +490,7 @@ function pickThemeButtonTextColor({ theme, emphasis }: { theme: DefaultTheme; em
   }
 }
 
-const BaseThemeButton = styled.button<BaseButtonProps>`
+const BaseThemeButton = styled.button<BaseThemeButtonProps>`
   align-items: center;
   background-color: ${pickThemeButtonBackgroundColor};
   border-radius: 16px;
@@ -486,16 +507,13 @@ const BaseThemeButton = styled.button<BaseButtonProps>`
   padding: ${pickThemeButtonPadding};
   position: relative;
   transition: 150ms ease opacity;
+  user-select: none;
 
   :active {
     ${ButtonOverlay} {
       background-color: ${({ theme }) => theme.stateOverlayPressed};
     }
   }
-  :disabled {
-    cursor: default;
-    opacity: 0.6;
-  }
   :focus {
     ${ButtonOverlay} {
       background-color: ${({ theme }) => theme.stateOverlayPressed};
@@ -506,9 +524,20 @@ const BaseThemeButton = styled.button<BaseButtonProps>`
       background-color: ${({ theme }) => theme.stateOverlayHover};
     }
   }
+  :disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+  :disabled:active,
+  :disabled:focus,
+  :disabled:hover {
+    ${ButtonOverlay} {
+      background-color: transparent;
+    }
+  }
 `
 
-interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseButtonProps {}
+interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseThemeButtonProps {}
 
 export const ThemeButton = ({ children, ...rest }: ThemeButtonProps) => {
   return (
@@ -518,3 +547,12 @@ export const ThemeButton = ({ children, ...rest }: ThemeButtonProps) => {
     </BaseThemeButton>
   )
 }
+
+export const ButtonLight = ({ children, ...rest }: BaseButtonProps) => {
+  return (
+    <BaseButtonLight {...rest}>
+      <ButtonOverlay />
+      {children}
+    </BaseButtonLight>
+  )
+}

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/Charts/SparklineChart.tsx

@@ -2,7 +2,6 @@ import { SparkLineLoadingBubble } from 'components/Tokens/TokenTable/TokenRow'
 import { curveCardinal, scaleLinear } from 'd3'
 import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
 import { PricePoint } from 'graphql/data/util'
-import { TimePeriod } from 'graphql/data/util'
 import { memo } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
 
@@ -21,18 +20,10 @@ interface SparklineChartProps {
   height: number
   tokenData: TopToken
   pricePercentChange: number | undefined | null
-  timePeriod: TimePeriod
   sparklineMap: SparklineMap
 }
 
-function _SparklineChart({
-  width,
-  height,
-  tokenData,
-  pricePercentChange,
-  timePeriod,
-  sparklineMap,
-}: SparklineChartProps) {
+function _SparklineChart({ width, height, tokenData, pricePercentChange, sparklineMap }: SparklineChartProps) {
   const theme = useTheme()
   // for sparkline
   const pricePoints = tokenData?.address ? sparklineMap[tokenData.address] : null

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,196 @@
 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 { isSentryEnabled } from 'utils/env'
 
-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;
+  justify-content: space-between;
+  word-break: break-word;
+`
+
+const Fallback = ({ error, eventId }: { error: Error; eventId: string | null }) => {
+  const [isExpanded, setExpanded] = useState(false)
+  const isMobile = useIsMobile()
+
+  // @todo: ThemedText components should be responsive by default
+  const [Title, Description] = isMobile
+    ? [ThemedText.HeadlineSmall, ThemedText.BodySmall]
+    : [ThemedText.HeadlineLarge, ThemedText.BodySecondary]
+
+  const showErrorId = isSentryEnabled() && eventId
+
+  const showMoreButton = (
+    <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>
+  )
+
+  const errorDetails = error.stack || error.message
+
+  return (
+    <FallbackWrapper>
+      <BodyWrapper>
+        <Column gap="xl">
+          {showErrorId ? (
+            <>
+              <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}>
+                    <Trans>Error ID: {eventId}</Trans>
+                  </ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={eventId}>
+                    <CopyIcon />
+                  </CopyToClipboard>
+                </CodeTitle>
+                <Separator />
+                {isExpanded && (
+                  <>
+                    <Code>{errorDetails}</Code>
+                    <Separator />
+                  </>
+                )}
+                {showMoreButton}
+              </CodeBlockWrapper>
+            </>
+          ) : (
+            <>
+              <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 copy the
+                    details of this error.
+                  </Trans>
+                </Description>
+              </Column>
+              <CodeBlockWrapper>
+                <CodeTitle>
+                  <ThemedText.SubHeader fontWeight={500}>Error details</ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={errorDetails}>
+                    <CopyIcon />
+                  </CopyToClipboard>
+                </CodeTitle>
+                <Separator />
+                <Code>{errorDetails.split('\n').slice(0, isExpanded ? undefined : 4)}</Code>
+                <Separator />
+                {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 +198,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,6 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
-import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
+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'
@@ -163,7 +164,7 @@ function FeatureFlagGroup({ name, children }: PropsWithChildren<{ name: string }
   )
 }
 
-function FeatureFlagOption({ variant, featureFlag, value, label }: FeatureFlagProps) {
+function FeatureFlagOption({ variant, featureFlag, label }: FeatureFlagProps) {
   const updateFlag = useUpdateFlag()
   const [count, setCount] = useState(0)
   const featureFlags = useAtomValue(featureFlagSettings)
@@ -202,9 +203,18 @@ 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"
+      />
+      <FeatureFlagOption
+        variant={BaseVariant}
+        value={useFiatOnrampFlag()}
+        featureFlag={FeatureFlag.fiatOnramp}
+        label="Fiat on-ramp"
+      />
       <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/FiatOnrampAnnouncement/index.tsx

@@ -0,0 +1,149 @@
+import { Trans } from '@lingui/macro'
+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { useWeb3React } from '@web3-react/core'
+import fiatMaskUrl from 'assets/svg/fiat_mask.svg'
+import { BaseVariant } from 'featureFlags'
+import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
+import { useCallback, useEffect } from 'react'
+import { X } from 'react-feather'
+import { useDispatch } from 'react-redux'
+import { useToggleWalletDropdown } from 'state/application/hooks'
+import { useAppSelector } from 'state/hooks'
+import { useFiatOnrampAck } from 'state/user/hooks'
+import { dismissFiatOnramp } from 'state/user/reducer'
+import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
+import { isMobile } from 'utils/userAgent'
+
+const Arrow = styled.div`
+  top: -4px;
+  height: 16px;
+  position: absolute;
+  right: 16px;
+  width: 16px;
+
+  ::before {
+    background: hsl(315.75, 93%, 83%);
+    border-top: none;
+    border-left: none;
+    box-sizing: border-box;
+    content: '';
+    height: 16px;
+    position: absolute;
+    transform: rotate(45deg);
+    width: 16px;
+  }
+`
+const ArrowWrapper = styled.div`
+  position: absolute;
+  right: 16px;
+  top: 90%;
+  width: 100%;
+  max-width: 320px;
+  min-height: 92px;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
+    right: 36px;
+  }
+`
+
+const CloseIcon = styled(X)`
+  color: white;
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+`
+const Wrapper = styled.button`
+  background: radial-gradient(105% 250% at 100% 5%, hsla(318, 95%, 85%) 1%, hsla(331, 80%, 75%, 0.1) 84%),
+    linear-gradient(180deg, hsla(296, 92%, 67%, 0.5) 0%, hsla(313, 96%, 60%, 0.5) 130%);
+  background-color: hsla(297, 93%, 68%, 1);
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  text-align: start;
+  max-width: 320px;
+  min-height: 92px;
+  width: 100%;
+
+  :before {
+    background-image: url(${fiatMaskUrl});
+    background-repeat: no-repeat;
+    content: '';
+    height: 100%;
+    position: absolute;
+    right: -154px; // roughly width of fiat mask image
+    top: 0;
+    width: 100%;
+  }
+`
+
+const Header = styled(ThemedText.SubHeader)`
+  color: white;
+  margin: 0;
+  padding: 12px 12px 4px;
+  position: relative;
+`
+const Body = styled(ThemedText.BodySmall)`
+  color: white;
+  margin: 0 12px 12px 12px !important;
+  position: relative;
+`
+
+const MAX_RENDER_COUNT = 3
+
+export function FiatOnrampAnnouncement() {
+  const { account } = useWeb3React()
+  const [acks, acknowledge] = useFiatOnrampAck()
+  const fiatOnrampDismissed = useAppSelector((state) => state.user.fiatOnrampDismissed)
+
+  useEffect(() => {
+    acknowledge({ renderCount: acks?.renderCount + 1 })
+    // The dependency list is empty so this is only run once on mount
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const dispatch = useDispatch()
+  const handleClose = useCallback(() => {
+    dispatch(dismissFiatOnramp())
+  }, [dispatch])
+
+  const toggleWalletDropdown = useToggleWalletDropdown()
+  const handleClick = useCallback(() => {
+    sendAnalyticsEvent('FOR Banner Click')
+    toggleWalletDropdown()
+    acknowledge({ user: true })
+  }, [acknowledge, toggleWalletDropdown])
+
+  const fiatOnrampFlag = useFiatOnrampFlag()
+  const openModal = useAppSelector((state) => state.application.openModal)
+
+  if (
+    !account ||
+    acks?.user ||
+    fiatOnrampFlag === BaseVariant.Control ||
+    fiatOnrampDismissed ||
+    acks?.renderCount >= MAX_RENDER_COUNT ||
+    isMobile ||
+    openModal !== null
+  ) {
+    return null
+  }
+  return (
+    <ArrowWrapper>
+      <Arrow />
+      <CloseIcon onClick={handleClose} />
+      <Wrapper onClick={handleClick}>
+        <Header>
+          <Trans>Buy crypto</Trans>
+        </Header>
+        <Body>
+          <Trans>Get tokens at the best prices in web3 on Uniswap, powered by Moonpay.</Trans>
+        </Body>
+      </Wrapper>
+    </ArrowWrapper>
+  )
+}

src/components/FiatOnrampModal/index.tsx

@@ -0,0 +1,143 @@
+import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
+import { useCallback, useEffect, useState } from 'react'
+import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
+import styled, { useTheme } from 'styled-components/macro'
+import { CustomLightSpinner, ThemedText } from 'theme'
+
+import Circle from '../../assets/images/blue-loader.svg'
+import Modal from '../Modal'
+
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.white};
+  border-radius: 20px;
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 0;
+  min-height: 720px;
+  min-width: 375px;
+  position: relative;
+  width: 100%;
+`
+
+const ErrorText = styled(ThemedText.BodyPrimary)`
+  color: ${({ theme }) => theme.accentFailure};
+  margin: auto !important;
+  text-align: center;
+  width: 90%;
+`
+const StyledIframe = styled.iframe`
+  background-color: ${({ theme }) => theme.white};
+  border-radius: 12px;
+  bottom: 0;
+  left: 0;
+  height: calc(100% - 16px);
+  margin: 8px;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: calc(100% - 16px);
+`
+const StyledSpinner = styled(CustomLightSpinner)`
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+`
+
+const MOONPAY_SUPPORTED_CURRENCY_CODES = [
+  'eth',
+  'eth_arbitrum',
+  'eth_optimism',
+  'eth_polygon',
+  'weth',
+  'wbtc',
+  'matic_polygon',
+  'polygon',
+  'usdc_arbitrum',
+  'usdc_optimism',
+  'usdc_polygon',
+]
+
+export default function FiatOnrampModal() {
+  const { account } = useWeb3React()
+  const theme = useTheme()
+  const closeModal = useCloseModal()
+  const fiatOnrampModalOpen = useModalIsOpen(ApplicationModal.FIAT_ONRAMP)
+
+  const [signedIframeUrl, setSignedIframeUrl] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchSignedIframeUrl = useCallback(async () => {
+    if (!account) {
+      setError('Please connect an account before making a purchase.')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const signedIframeUrlFetchEndpoint = process.env.REACT_APP_MOONPAY_LINK as string
+      const res = await fetch(signedIframeUrlFetchEndpoint, {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          colorCode: theme.accentAction,
+          defaultCurrencyCode: 'eth',
+          redirectUrl: 'https://app.uniswap.org/#/swap',
+          walletAddresses: JSON.stringify(
+            MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
+              (acc, currencyCode) => ({
+                ...acc,
+                [currencyCode]: account,
+              }),
+              {}
+            )
+          ),
+        }),
+      })
+      const { url } = await res.json()
+      setSignedIframeUrl(url)
+    } catch (e) {
+      console.log('there was an error fetching the link', e)
+      setError(e.toString())
+    } finally {
+      setLoading(false)
+    }
+  }, [account, theme.accentAction])
+
+  useEffect(() => {
+    fetchSignedIframeUrl()
+  }, [fetchSignedIframeUrl])
+
+  return (
+    <Modal isOpen={fiatOnrampModalOpen} onDismiss={closeModal} maxHeight={720}>
+      <Wrapper data-testid="fiat-onramp-modal">
+        {error ? (
+          <>
+            <ThemedText.MediumHeader>
+              <Trans>Moonpay Fiat On-ramp iframe</Trans>
+            </ThemedText.MediumHeader>
+            <ErrorText>
+              <Trans>something went wrong!</Trans>
+              <br />
+              {error}
+            </ErrorText>
+          </>
+        ) : loading ? (
+          <StyledSpinner src={Circle} alt="loading spinner" size="90px" />
+        ) : (
+          <StyledIframe src={signedIframeUrl ?? ''} frameBorder="0" title="fiat-onramp-iframe" />
+        )}
+      </Wrapper>
+    </Modal>
+  )
+}

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

@@ -9,7 +9,7 @@ import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: boolean }>`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: ${Z_INDEX.modalBackdrop};
     background-color: transparent;
@@ -17,7 +17,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: bool
 
     display: flex;
     align-items: center;
-    overflow-y: ${({ scrollOverlay }) => scrollOverlay && 'scroll'};
+    overflow-y: ${({ $scrollOverlay }) => $scrollOverlay && 'scroll'};
     justify-content: center;
 
     background-color: ${({ theme }) => theme.backgroundScrim};
@@ -39,7 +39,7 @@ const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
 
   &[data-reach-dialog-content] {
     margin: auto;
-    background-color: ${({ theme }) => theme.deprecated_bg0};
+    background-color: ${({ theme }) => theme.backgroundSurface};
     border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.deprecated_bg1}`};
     box-shadow: ${({ theme }) => theme.deepShadow};
     padding: 0px;
@@ -89,7 +89,7 @@ interface ModalProps {
   maxWidth?: number
   initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
-  scrollOverlay?: boolean
+  $scrollOverlay?: boolean
   hideBorder?: boolean
   isBottomSheet?: boolean
 }
@@ -103,7 +103,7 @@ export default function Modal({
   initialFocusRef,
   children,
   onSwipe = onDismiss,
-  scrollOverlay,
+  $scrollOverlay,
   isBottomSheet = isMobile,
   hideBorder = false,
 }: ModalProps) {
@@ -136,7 +136,7 @@ export default function Modal({
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
               unstable_lockFocusAcrossFrames={false}
-              scrollOverlay={scrollOverlay}
+              $scrollOverlay={$scrollOverlay}
             >
               <StyledDialogContent
                 {...(isMobile
@@ -149,7 +149,7 @@ export default function Modal({
                 $minHeight={minHeight}
                 $maxHeight={maxHeight}
                 $isBottomSheet={isBottomSheet}
-                $scrollOverlay={scrollOverlay}
+                $scrollOverlay={$scrollOverlay}
                 $hideBorder={hideBorder}
                 $maxWidth={maxWidth}
               >

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}