fix: getCurrency crash when token not found (#6263)

* fix: getCurrency crash when token not found

* fix: comments and add test

* fix: remove extra whitespace in unit test

* fix: make e2e test pass

.env

@@ -1,12 +1,13 @@
 # These API keys are intentionally public. Please do not report them - thank you for your concern.
+ESLINT_NO_DEV_ERRORS=true
 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_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
-REACT_APP_SENTRY_ENABLED=false
-ESLINT_NO_DEV_ERRORS=true
+REACT_APP_BNB_RPC_URL="https://rough-sleek-hill.bsc.quiknode.pro/413cc98cbc776cda8fdf1d0f47003583ff73d9bf"
 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_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=staging"
 REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_DycfESRid31UaSxhI5yWKe1r5E5kKSz"
+REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
+REACT_APP_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
+REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"

.env.production

@@ -1,11 +1,15 @@
+# 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_ENDPOINT="https://api.uniswap.org/v1/graphql"
+REACT_APP_BNB_RPC_URL="https://old-wispy-arrow.bsc.quiknode.pro/f5c060177236065c1058531a0615ab4f7a34a2fd"
+REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
 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_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=production"
 REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_live_uQG4BJC4w3cxnqpcSqAfohdBFDTsY6E"
-REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
-THE_GRAPH_SCHEMA_ENDPOINT="https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3"
 REACT_APP_SENTRY_ENABLED=true
+REACT_APP_SENTRY_TRACES_SAMPLE_RATE=0.00003
+REACT_APP_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
+THE_GRAPH_SCHEMA_ENDPOINT="https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3"

.github/CODEOWNERS

@@ -1 +1 @@
-@uniswap/web
+@uniswap/web-reviewers

.github/dependabot.yml

@@ -9,3 +9,5 @@ updates:
       - dependency-name: '@uniswap/default-token-list'
       - dependency-name: '@uniswap/token-lists'
       - dependency-name: '@uniswap/widgets'
+    reviewers:
+      - 'Uniswap/dependabot-reviewers'

.github/pull_request_template.md

@@ -1,24 +1,22 @@
-Your PR title must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), and should start with one of the following [types](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type):
+## Description
 
-- build: Changes that affect the build system or external dependencies (example scopes: yarn, eslint, typescript)
-- ci: Changes to our CI configuration files and scripts (example scopes: vercel, github, cypress)
-- docs: Documentation only changes
-- feat: A new feature
-- fix: A bug fix
-- perf: A code change that improves performance
-- refactor: A code change that neither fixes a bug nor adds a feature
-- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- test: Adding missing tests or correcting existing tests
+_[Summary of change, motivation, and context.]_
 
-Example commit messages:
+- _Link to JIRA ticket, slack thread, or relevant docs helpful for providing context to reviewers._
 
-- feat: adds support for gnosis safe wallet
-- fix: removes a polling memory leak
-- chore: bumps redux version
+- _Note: Your PR title must follow conventions [outlined here](https://github.com/Uniswap/interface#contributions)._
 
-Other things to note:
+## Screen Capture
+| Before           | After           |
+| ---------------- |-----------------|
+|  _insert_before_ | _insert_after_  |
 
-- Please describe the change using verb statements (ex: Removes X from Y)
-- PRs with multiple changes should use a list of verb statements
-- Add any relevant unit / integration tests
-- Changes will be previewable via vercel. Non-obvious changes should include instructions for how to reproduce them
+
+## Test Plan
+#### Manual
+
+_[Steps of how you are testing the change and ensuring no regression.]_
+
+#### Automated
+- [ ] Unit test
+- [ ] Integration/E2E test

.github/workflows/release.yaml

@@ -62,7 +62,7 @@ jobs:
         continue-on-error: true
         timeout-minutes: 2
         with:
-          cid: ${{ steps.upload.outputs.hash }}
+          cid: ${{ steps.pinata.outputs.hash }}
           seeds: ${{ secrets.CRUST_SEEDS }}
 
       - name: Convert CIDv0 to CIDv1
@@ -93,7 +93,7 @@ jobs:
             IPFS gateways:
             - https://${{ steps.convert-cidv0.outputs.cidv1 }}.ipfs.dweb.link/
             - https://${{ steps.convert-cidv0.outputs.cidv1 }}.ipfs.cf-ipfs.com/
-            - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
+            - [ipfs://${{ steps.pinata.outputs.hash }}/](ipfs://${{ steps.pinata.outputs.hash }}/)
 
             ${{ needs.tag.outputs.changelog }}
 

.github/workflows/revert.yaml

@@ -1,27 +0,0 @@
-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

@@ -30,14 +30,18 @@ jobs:
       - uses: ./.github/actions/setup
       - run: yarn prepare
       - run: yarn test
+      - uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
+          verbose: true
 
-  cypress-build:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
       - run: yarn prepare
-
       - run: yarn build
       - uses: actions/upload-artifact@v2
         with:
@@ -45,17 +49,39 @@ jobs:
           path: build
           if-no-files-found: error
 
+  size-tests:
+    needs: [build]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - uses: actions/download-artifact@v2
+        with:
+          name: build
+          path: build
+      - run: yarn test:size
+
+
+  cypress-build:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
       - uses: actions/cache@v3
         id: cypress-cache
         with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
+          path: /root/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
       - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
+        run: |
+          yarn cypress install
+          yarn cypress info
 
   cypress-test-matrix:
-    needs: cypress-build
+    needs: [build, cypress-build]
     runs-on: ubuntu-latest
+    container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
     strategy:
       fail-fast: false
       matrix:
@@ -63,17 +89,15 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-
       - uses: actions/download-artifact@v2
         with:
           name: build
           path: build
-
       - uses: actions/cache@v3
         id: cypress-cache
         with:
-          path: /home/runner/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('node_modules/cypress') }}
+          path: /root/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
       - if: steps.cypress-cache.outputs.cache-hit != 'true'
         run: yarn cypress install
 
@@ -89,9 +113,17 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-  # Included as a single job to check against for cypress test success, as cypress runs in a matrix.
+      - uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
+          verbose: true
+
+  # Included as a single job to check for cypress-test-matrix success, as a matrix cannot be checked.
   cypress-tests:
-    needs: cypress-test-matrix
+    if: ${{ always() }}
+    needs: [cypress-test-matrix]
     runs-on: ubuntu-latest
     steps:
-      - run: echo 'Finished cypress tests https\://dashboard.cypress.io/projects/yp82ef'
+      - if: needs.cypress-test-matrix.result != 'success'
+        run: exit 1

.gitignore

@@ -9,6 +9,7 @@
 /src/locales/**/pseudo.po
 
 # generated graphql types
+/src/graphql/**/__generated__
 schema.graphql
 
 # dependencies
@@ -28,6 +29,10 @@ schema.graphql
 .env.test.local
 .env.production.local
 
+instrumented
+.nyc_output
+.nyc_output/**/*
+
 /.netlify
 
 npm-debug.log*

.nycrc

@@ -0,0 +1,7 @@
+{
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "all": true,
+  "report-dir": "coverage",
+  "soureMap": false,
+  "instrument": false
+}

CONTRIBUTING.md

@@ -64,6 +64,14 @@ To run _all_ cypress integration tests _from the command line_:
 yarn cypress:run
 ```
 
+## Adding a new dependency
+
+Adding many new dependencies would cause bloat, so we have a test to guard against this: `scripts/test-size.js`. This will run as part of CI with every PR.
+
+If you *need* to add a new dependency, and it causes the generated build to exceed its size quota, you'll need to increase the quota. Do so in `scripts/test-size.js`.
+
+You can also run the test on your last build using `yarn build && yarn test:size`. If you exceed the size quota, it will let you know what to do :).
+
 ## Engineering standards
 
 Code merged into the `main` branch of this repository should adhere to high standards of correctness and maintainability.

README.md

@@ -1,5 +1,7 @@
 # Uniswap Labs Interface
 
+[![codecov](https://codecov.io/gh/Uniswap/interface/branch/main/graph/badge.svg?token=YVT2Y86O82)](https://codecov.io/gh/Uniswap/interface)
+
 [![Unit Tests](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml)
 [![Integration Tests](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/integration-tests.yaml)
 [![Lint](https://github.com/Uniswap/interface/actions/workflows/lint.yml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/lint.yml)
@@ -36,14 +38,41 @@ You can block an entire list of tokens by passing in a tokenlist like [here](./s
 
 For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
 
+#### PR Title
+Your PR title must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), and should start with one of the following [types](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type):
+
+- build: Changes that affect the build system or external dependencies (example scopes: yarn, eslint, typescript)
+- ci: Changes to our CI configuration files and scripts (example scopes: vercel, github, cypress)
+- docs: Documentation only changes
+- feat: A new feature
+- fix: A bug fix
+- perf: A code change that improves performance
+- refactor: A code change that neither fixes a bug nor adds a feature
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- test: Adding missing tests or correcting existing tests
+
+Example commit messages:
+
+- feat: adds support for gnosis safe wallet
+- fix: removes a polling memory leak
+- chore: bumps redux version
+
+Other things to note:
+
+- Please describe the change using verb statements (ex: Removes X from Y)
+- PRs with multiple changes should use a list of verb statements
+- Add any relevant unit / integration tests
+- Changes will be previewable via vercel. Non-obvious changes should include instructions for how to reproduce them
+
+
 ## Accessing Uniswap V2
 
 The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
-- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
-- View V2 liquidity: https://app.uniswap.org/#/pool/v2
-- Add V2 liquidity: https://app.uniswap.org/#/add/v2
-- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
+- Swap on Uniswap V2: <https://app.uniswap.org/#/swap?use=v2>
+- View V2 liquidity: <https://app.uniswap.org/#/pools/v2>
+- Add V2 liquidity: <https://app.uniswap.org/#/add/v2>
+- Migrate V2 liquidity to V3: <https://app.uniswap.org/#/migrate/v2>
 
 ## Accessing Uniswap V1
 

codecov.yml

@@ -0,0 +1,22 @@
+ignore:
+  - "**/generated/**/*"
+  - "**/generated/*"
+  - "**/cypress/**/*"
+  - "cypress/**/*"
+  - "**/instrumented/**/*"
+  - "**/styles/**/*"
+  - "styles/**/*"
+  - "**/constants/**/*"
+  - "constants/**/*"
+
+coverage:
+  status:
+    project:
+      default:
+        target: auto
+        threshold: 5%
+        if_ci_failed: error
+    patch:
+      default:
+        enabled: no
+        if_not_found: success

craco.config.cjs

@@ -8,10 +8,29 @@ const commitHash = require('child_process').execSync('git rev-parse HEAD')
 module.exports = {
   babel: {
     plugins: ['@vanilla-extract/babel-plugin'],
+    env: {
+      test: {
+        plugins: ['istanbul'],
+      },
+      development: {
+        plugins: ['istanbul'],
+      },
+    },
+  },
+  jest: {
+    configure(jestConfig) {
+      return Object.assign({}, jestConfig, {
+        transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
+        moduleNameMapper: {
+          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
+          '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
+        },
+      })
+    },
   },
   webpack: {
     plugins: [
-      new VanillaExtractPlugin(),
+      new VanillaExtractPlugin({ identifiers: 'short' }),
       new DefinePlugin({
         'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
       }),

cypress.config.ts

@@ -1,3 +1,4 @@
+import codeCoverageTask from '@cypress/code-coverage/task'
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
@@ -7,6 +8,7 @@ export default defineConfig({
   chromeWebSecurity: false,
   e2e: {
     setupNodeEvents(on, config) {
+      codeCoverageTask(on, config)
       return {
         ...config,
         // Only enable Chrome.

cypress/e2e/add-liquidity.test.ts

@@ -10,28 +10,28 @@ describe('Add Liquidity', () => {
   })
 
   it('loads the two correct tokens', () => {
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/500')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/500')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
   })
 
   it('does not crash if ETH is duplicated', () => {
-    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.visit('/add/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'ETH')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('not.contain.text', 'ETH')
   })
 
   it.skip('token not in storage is loaded', () => {
-    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
-    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'MKR')
+    cy.visit('/add/0x07865c6e87b9f70255377e024ace6630c1eaa37f/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'USDC')
+    cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'UNI')
   })
 
   it.skip('single token can be selected', () => {
-    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
+    cy.visit('/add/0x07865c6e87b9f70255377e024ace6630c1eaa37f')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'USDC')
+    cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
   })
 
   it.skip('loads fee tier distribution', () => {
@@ -53,7 +53,7 @@ describe('Add Liquidity', () => {
         }
       })
 
-      cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+      cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
 
       cy.wait('@FeeTierDistributionQuery')
 

cypress/e2e/landing.test.ts

@@ -25,7 +25,8 @@ describe('Landing Page', () => {
   })
 
   it('allows navigation to pool', () => {
-    cy.get('#pool-nav-link').click()
-    cy.url().should('include', '/pool')
+    cy.viewport(2000, 1600)
+    cy.get(getTestSelector('pool-nav-link')).first().click()
+    cy.url().should('include', '/pools')
   })
 })

cypress/e2e/link.test.ts

@@ -1,6 +1,7 @@
 // see https://github.com/Uniswap/interface/pull/4115
 describe('Link', () => {
   it('should update route', () => {
+    cy.viewport(2000, 1600)
     cy.visit('/')
     cy.contains('Pool').click()
     cy.get('[data-cy="join-pool-button"]').should('exist')

cypress/e2e/nfts.test.ts

@@ -1,9 +1,10 @@
 import { getTestSelector } from '../utils'
 
-const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+const PUDGY_COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+const BONSAI_COLLECTION_ADDRESS = '0xec9c519d49856fd2f8133a0741b4dbe002ce211b'
 
 describe('Testing nfts', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/')
   })
 
@@ -15,29 +16,24 @@ describe('Testing nfts', () => {
   })
 
   it('should load pudgy penguin collection page', () => {
-    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.visit(`/#/nfts/collection/${PUDGY_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.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     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.visit(`/#/nfts/collection/${PUDGY_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-collection-asset')).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')
@@ -45,6 +41,7 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
+    cy.visit(`#/nfts/asset/${BONSAI_COLLECTION_ADDRESS}/7580`)
     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')
@@ -52,12 +49,8 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('nft-bag')).should('exist')
   })
 
-  it('should go view my nfts', () => {
+  it('should navigate to the owned nfts page', () => {
     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/pool.test.ts

@@ -1,8 +1,17 @@
 describe('Pool', () => {
-  beforeEach(() => cy.visit('/pool'))
+  beforeEach(() => {
+    cy.visit('/pools').then(() => {
+      cy.wait('@eth_blockNumber')
+    })
+  })
 
   it('add liquidity links to /add/ETH', () => {
-    cy.get('#join-pool-button').click()
-    cy.url().should('contain', '/add/ETH')
+    cy.get('body').then(() => {
+      cy.get('#join-pool-button')
+        .click()
+        .then(() => {
+          cy.url().should('contain', '/add/ETH')
+        })
+    })
   })
 })

cypress/e2e/remove-liquidity.test.ts

@@ -1,24 +1,24 @@
 describe('Remove Liquidity', () => {
   it('eth remove', () => {
-    cy.visit('/remove/v2/ETH/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.visit('/remove/v2/ETH/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'ETH')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
 
   it('eth remove swap order', () => {
-    cy.visit('/remove/v2/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/ETH')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'MKR')
+    cy.visit('/remove/v2/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH')
+    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'UNI')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'ETH')
   })
 
   it('loads the two correct tokens', () => {
-    cy.visit('/remove/v2/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.visit('/remove/v2/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
+    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'UNI')
   })
 
   it('does not crash if ETH is duplicated', () => {
-    cy.visit('/remove/v2/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.visit('/remove/v2/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6/0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6')
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'WETH')
   })

cypress/e2e/swap-widget.cy.ts

@@ -0,0 +1,108 @@
+import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+import { getClassContainsSelector, getTestSelector } from '../utils'
+
+const UNI_GOERLI = '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984'
+const WETH_GOERLI = '0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6'
+
+describe('swap widget integration tests', () => {
+  const verifyInputToken = (inputText: string) => {
+    cy.get(getClassContainsSelector('TokenButtonRow')).first().contains(inputText)
+  }
+
+  const verifyOutputToken = (outputText: string) => {
+    cy.get(getClassContainsSelector('TokenButtonRow')).last().contains(outputText)
+  }
+
+  const selectOutputAndSwitch = (outputText: string) => {
+    // open token selector...
+    cy.contains('Select token').click()
+    // select token...
+    cy.contains(outputText).click({ force: true })
+
+    cy.get('body')
+      .then(($body) => {
+        if ($body.find(getTestSelector('TokenSafetyWrapper')).length) {
+          return 'I understand'
+        }
+
+        return 'You pay' // Just click on a random element as a no-op
+      })
+      .then((selector) => {
+        cy.contains(selector).click()
+      })
+
+    // token selector should close...
+    cy.contains('Search name or paste address').should('not.exist')
+
+    cy.get(getClassContainsSelector('ReverseButton')).first().click()
+  }
+
+  describe('widget on swap page', () => {
+    beforeEach(() => {
+      cy.viewport(1200, 800)
+    })
+
+    it('should have the correct default input/output and token selection should work', () => {
+      cy.visit('/swap', { featureFlags: [FeatureFlag.swapWidget] }).then(() => {
+        cy.wait('@eth_blockNumber')
+        verifyInputToken('ETH')
+        verifyOutputToken('Select token')
+
+        selectOutputAndSwitch('WETH')
+
+        verifyInputToken('WETH')
+        verifyOutputToken('ETH')
+      })
+    })
+
+    it('should have the correct default input from URL params ', () => {
+      cy.visit(`/swap?inputCurrency=${WETH_GOERLI}`, {
+        featureFlags: [FeatureFlag.swapWidget],
+      }).then(() => {
+        cy.wait('@eth_blockNumber')
+      })
+
+      verifyInputToken('WETH')
+      verifyOutputToken('Select token')
+
+      selectOutputAndSwitch('Ether')
+
+      verifyInputToken('ETH')
+      verifyOutputToken('WETH')
+    })
+
+    it('should have the correct default output from URL params ', () => {
+      cy.visit(`/swap?outputCurrency=${WETH_GOERLI}`, {
+        featureFlags: [FeatureFlag.swapWidget],
+      }).then(() => {
+        cy.wait('@eth_blockNumber')
+      })
+
+      verifyInputToken('Select token')
+      verifyOutputToken('WETH')
+
+      cy.get(getClassContainsSelector('ReverseButton')).first().click()
+      verifyInputToken('WETH')
+      verifyOutputToken('Select token')
+
+      selectOutputAndSwitch('Ether')
+
+      verifyInputToken('ETH')
+      verifyOutputToken('WETH')
+    })
+  })
+
+  describe('widget on Token Detail Page', () => {
+    beforeEach(() => {
+      cy.viewport(1200, 800)
+      cy.visit(`/tokens/ethereum/${UNI_GOERLI}`, { featureFlags: [FeatureFlag.swapWidget] }).then(() => {
+        cy.wait('@eth_blockNumber')
+      })
+    })
+
+    it('should have the expected output for a tokens detail page', () => {
+      verifyOutputToken('UNI')
+      cy.contains('Connect to Ethereum').should('exist')
+    })
+  })
+})

cypress/e2e/token-details.test.ts

@@ -0,0 +1,92 @@
+import { getTestSelector } from '../utils'
+
+describe('Token details', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('Uniswap token should have all information populated', () => {
+    // Uniswap token
+    cy.visit('/tokens/ethereum/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+
+    // Price chart should be filled in
+    cy.get('[data-cy="chart-header"]').should('include.text', '$')
+    cy.get('[data-cy="price-chart"]').should('exist')
+
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('include.text', '$')
+      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
+      cy.get('[data-cy="52w-low"]').should('include.text', '$')
+      cy.get('[data-cy="52w-high"]').should('include.text', '$')
+    })
+
+    // About section should have description of token
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('UNI is the governance token for Uniswap').should('exist')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan')
+        .should('have.attr', 'href')
+        .and('include', 'etherscan.io/address/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', 'info.uniswap.org/#/tokens/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+      cy.contains('Website').should('have.attr', 'href').and('include', 'uniswap.org')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/Uniswap')
+    })
+
+    // Contract address should be displayed
+    cy.contains('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984').should('exist')
+
+    // Swap widget should have this token pre-selected as the “destination” token
+    cy.get(getTestSelector('token-select')).should('include.text', 'UNI')
+  })
+
+  it('token with warning and low trading volume should have all information populated', () => {
+    // Shiba predator token, low trading volume and also has warning modal
+    cy.visit('/tokens/ethereum/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+
+    // Should have missing price chart when price unavailable (expected for this token)
+    if (cy.get('[data-cy="chart-header"]').contains('Price Unavailable')) {
+      cy.get('[data-cy="missing-chart"]').should('exist')
+    }
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('exist')
+      cy.get('[data-cy="volume-24h"]').should('exist')
+      cy.get('[data-cy="52w-low"]').should('exist')
+      cy.get('[data-cy="52w-high"]').should('exist')
+    })
+
+    // About section should have description of token
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('QOM is the Shiba Predator').should('exist')
+
+    // Links section should link out to Etherscan, More analytics, Website, Twitter
+    cy.get('[data-cy="resources-container"]').within(() => {
+      cy.contains('Etherscan')
+        .should('have.attr', 'href')
+        .and('include', 'etherscan.io/address/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('More analytics')
+        .should('have.attr', 'href')
+        .and('include', 'info.uniswap.org/#/tokens/0xa71d0588EAf47f12B13cF8eC750430d21DF04974')
+      cy.contains('Website').should('have.attr', 'href').and('include', 'qom')
+      cy.contains('Twitter').should('have.attr', 'href').and('include', 'twitter.com/ShibaPredator1')
+    })
+
+    // Contract address should be displayed
+    cy.contains('0xa71d0588EAf47f12B13cF8eC750430d21DF04974').should('exist')
+
+    // Swap widget should have this token pre-selected as the “destination” token
+    cy.get(getTestSelector('token-select')).should('include.text', 'QOM')
+
+    // Warning label should show if relevant ([spec](https://www.notion.so/3f7fce6f93694be08a94a6984d50298e))
+    cy.get('[data-cy="token-safety-message"]')
+      .should('include.text', 'Warning')
+      .and('include.text', "This token isn't traded on leading U.S. centralized exchanges")
+  })
+})

cypress/e2e/token-explore-filter.test.ts

@@ -0,0 +1,83 @@
+describe.skip('Token explore filter', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should filter correctly by uni search term', () => {
+    cy.visit('/tokens')
+    cy.get('[data-cy="token-name"]').then(($els) => {
+      const tokenNames = Array.from($els, (el) => el.innerText)
+      const filteredByUni = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('uni'))
+      cy.wrap(filteredByUni).as('filteredByUni')
+    })
+
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('uni')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByUni').then((filteredByUni) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByUni.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByUni).to.include(tokenName)
+            })
+          })
+        })
+      })
+  })
+
+  it('should filter correctly by dao search term', () => {
+    cy.visit('/tokens')
+    cy.get('[data-cy="token-name"]').then(($els) => {
+      const tokenNames = Array.from($els, (el) => el.innerText)
+      const filteredByDao = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('dao'))
+      cy.wrap(filteredByDao).as('filteredByDao')
+    })
+
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('dao')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByDao').then((filteredByDao) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByDao.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByDao).to.include(tokenName)
+            })
+          })
+        })
+      })
+  })
+
+  it('should filter correctly by ax search term', () => {
+    cy.visit('/tokens')
+    cy.get('[data-cy="token-name"]').then(($els) => {
+      const tokenNames = Array.from($els, (el) => el.innerText)
+      const filteredByAx = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('ax'))
+      cy.wrap(filteredByAx).as('filteredByAx')
+    })
+
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('ax')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByAx').then((filteredByAx) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByAx.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByAx).to.include(tokenName)
+            })
+          })
+        })
+      })
+  })
+})

cypress/e2e/token-explore.test.ts

@@ -0,0 +1,74 @@
+import { getTestSelector, getTestSelectorStartsWith } from '../utils'
+
+describe('Token explore', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load token leaderboard', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.greaterThan', 0)
+    // check sorted svg icon is present in volume cell, since tokens are sorted by volume by default
+    cy.get(getTestSelector('header-row')).find(getTestSelector('volume-cell')).find('svg').should('exist')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('volume-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('price-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('tvl-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('percent-change-cell'))
+      .should('include.text', '%')
+    cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).click()
+    cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).find('svg').should('exist')
+  })
+
+  it('should update when time window toggled', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('time-selector')).should('contain', '1D')
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('volume-cell'))
+      .then(function ($elem) {
+        cy.wrap($elem.text()).as('dailyEthVol')
+      })
+    cy.get(getTestSelector('time-selector')).click()
+    cy.get(getTestSelector('1Y')).click()
+    cy.get(getTestSelector('token-table-row-ETH'))
+      .find(getTestSelector('volume-cell'))
+      .then(function ($elem) {
+        cy.wrap($elem.text()).as('yearlyEthVol')
+      })
+    expect(cy.get('@dailyEthVol')).to.not.equal(cy.get('@yearlyEthVol'))
+  })
+
+  it('should navigate to token detail page when row clicked', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('token-table-row-ETH')).click()
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-info-container')).should('exist')
+    cy.get(getTestSelector('chart-container')).should('exist')
+    cy.contains('Ethereum is a smart contract platform that enables developers to build tokens').should('exist')
+    cy.contains('Etherscan').should('exist')
+  })
+
+  it('should update when global network changed', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Ethereum')
+    cy.get(getTestSelector('token-table-row-ETH')).should('exist')
+
+    // note: cannot switch global chain via UI because we cannot approve the network switch
+    // in metamask modal using plain cypress. this is a workaround.
+    cy.visit('/tokens/polygon')
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Polygon')
+    cy.get(getTestSelector('token-table-row-MATIC')).should('exist')
+  })
+
+  it('should update when token explore table network changed', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('tokens-network-filter-selected')).click()
+    cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.reload()
+    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
+    cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', 'Ethereum')
+  })
+})

cypress/e2e/token.test.ts

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

cypress/e2e/universal-search.test.ts

@@ -0,0 +1,64 @@
+import { getTestSelector } from '../utils'
+
+describe('Universal search bar', () => {
+  before(() => {
+    cy.visit('/')
+    cy.get('[data-cy="magnifying-icon"]')
+      .parent()
+      .then(($navIcon) => {
+        $navIcon.click()
+      })
+  })
+
+  it('should yield clickable result for regular token or nft collection search term', () => {
+    // Search for uni token by name.
+    cy.get('[data-cy="search-bar-input"]').last().clear().type('uni')
+    cy.get('[data-cy="searchbar-token-row-UNI"]')
+      .should('contain.text', 'Uniswap')
+      .and('contain.text', 'UNI')
+      .and('contain.text', '$')
+      .and('contain.text', '%')
+    cy.get('[data-cy="searchbar-token-row-UNI"]').click()
+
+    cy.get('div').contains('Uniswap').should('exist')
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high.
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('include.text', '$')
+      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
+      cy.get('[data-cy="52w-low"]').should('include.text', '$')
+      cy.get('[data-cy="52w-high"]').should('include.text', '$')
+    })
+
+    // About section should have description of token.
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('UNI is the governance token for Uniswap').should('exist')
+  })
+
+  it.skip('should show recent tokens and popular tokens with empty search term', () => {
+    cy.get('[data-cy="magnifying-icon"]')
+      .parent()
+      .then(($navIcon) => {
+        $navIcon.click()
+      })
+    // Recently searched UNI token should exist.
+    cy.get('[data-cy="search-bar-input"]').last().clear()
+    cy.get('[data-cy="searchbar-dropdown"]')
+      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
+      .find('[data-cy="searchbar-token-row-UNI"]')
+      .should('exist')
+
+    // Most popular 3 tokens should be shown.
+    cy.get('[data-cy="searchbar-dropdown"]')
+      .contains('[data-cy="searchbar-dropdown"]', 'Popular tokens')
+      .find('[data-cy^="searchbar-token-row"]')
+      .its('length')
+      .should('be.eq', 3)
+  })
+
+  it.skip('should show blocked badge when blocked token is searched for', () => {
+    // Search for mTSLA, which is a blocked token.
+    cy.get('[data-cy="search-bar-input"]').last().clear().type('mtsla')
+    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
+  })
+})

cypress/e2e/wallet-dropdown.test.ts

@@ -1,51 +1,80 @@
 import { getTestSelector } from '../utils'
 
+function visit(darkMode: boolean) {
+  cy.visit('/swap', {
+    onBeforeLoad(win) {
+      cy.stub(win, 'matchMedia')
+        .withArgs('(prefers-color-scheme: dark)')
+        .returns({
+          matches: darkMode,
+          addEventListener() {
+            // do nothing
+          },
+        })
+    },
+  })
+}
+
 describe('Wallet Dropdown', () => {
   before(() => {
-    cy.visit('/pool')
+    cy.visit('/pools')
   })
 
   it('should change the theme', () => {
     cy.get(getTestSelector('web3-status-connected')).click()
-    cy.get(getTestSelector('wallet-select-theme')).click()
-    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+    cy.get(getTestSelector('wallet-settings')).click()
+    cy.get(getTestSelector('theme-lightmode')).click()
+
+    cy.get(getTestSelector('theme-lightmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+
+    cy.get(getTestSelector('theme-darkmode')).click()
+    cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-darkmode')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-auto')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+
+    cy.get(getTestSelector('theme-auto')).click()
+    cy.get(getTestSelector('theme-lightmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-darkmode')).should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
+    cy.get(getTestSelector('theme-auto')).should('not.have.css', 'background-color', 'rgba(0, 0, 0, 0)')
   })
 
   it('should select a language', () => {
-    cy.get(getTestSelector('wallet-select-language')).click()
-    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('Deutsch').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Sprache')
     cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
     cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
     cy.get(getTestSelector('wallet-back')).click()
   })
 
-  it('should be able to view transactions', () => {
-    cy.get(getTestSelector('wallet-transactions')).click()
-    cy.get(getTestSelector('wallet-empty-transaction-text')).should('exist')
-    cy.get(getTestSelector('wallet-back')).click()
-  })
-
   it('should change the theme when not connected', () => {
     cy.get(getTestSelector('wallet-disconnect')).click()
-    cy.get(getTestSelector('wallet-select-theme')).click()
-    cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
-    cy.get(getTestSelector('wallet-select-theme')).click()
-    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+    cy.get(getTestSelector('wallet-settings')).click()
+    cy.get(getTestSelector('theme-lightmode')).should('exist')
   })
 
   it('should select a language when not connected', () => {
-    cy.get(getTestSelector('wallet-select-language')).click()
-    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
-    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('Deutsch').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Sprache')
     cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
     cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
     cy.get(getTestSelector('wallet-back')).click()
   })
 
-  it('should open the wallet connect modal from the drop down when not connected', () => {
-    cy.get(getTestSelector('wallet-connect-wallet')).click()
-    cy.get(getTestSelector('wallet-modal')).should('exist')
-    cy.get(getTestSelector('wallet-modal-close')).click()
+  it('should properly use dark system theme when auto theme setting is selected', () => {
+    visit(true)
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-settings')).click()
+    cy.get(getTestSelector('theme-auto')).click()
+    cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(152, 161, 192)')
+  })
+
+  it('should properly use light system theme when auto theme setting is selected', () => {
+    visit(false)
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-settings')).click()
+    cy.get(getTestSelector('theme-auto')).click()
+    cy.get(getTestSelector('wallet-header')).should('have.css', 'color', 'rgb(119, 128, 160)')
   })
 })

cypress/support/e2e.ts

@@ -8,6 +8,7 @@
 // Import commands.ts using ES2015 syntax:
 import { injected } from './ethereum'
 import assert = require('assert')
+import '@cypress/code-coverage/support'
 
 import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
 
@@ -36,7 +37,9 @@ Cypress.Commands.overwrite(
     cy.intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 }).then(() => {
       original({
         ...options,
-        url: (url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url) + '?chain=goerli',
+        url:
+          (url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url) +
+          `${url.includes('?') ? '&' : '?'}chain=goerli`,
         onBeforeLoad(win) {
           options?.onBeforeLoad?.(win)
           win.localStorage.clear()
@@ -70,6 +73,7 @@ beforeEach(() => {
   // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
   cy.intercept(/infura.io/, (res) => {
     res.headers['origin'] = 'http://localhost:3000'
+    res.alias = res.body.method
     res.continue()
   })
 

cypress/support/ethereum.ts

@@ -7,17 +7,21 @@ import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
 
+import { SupportedChainId } from '../../src/constants/chains'
+
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
 const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19'
 
 // address of the above key
 const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
+const CHAIN_ID = SupportedChainId.GOERLI
+const HEXLIFIED_CHAIN_ID = `0x${CHAIN_ID.toString(16)}`
 
-const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
+const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 5)
 const signer = new Wallet(TEST_PRIVATE_KEY, provider)
 export const injected = new (class extends Eip1193Bridge {
-  chainId = /* GOERLI= */ 5
+  chainId = CHAIN_ID
 
   async sendAsync(...args: any[]) {
     console.debug('sendAsync called', ...args)
@@ -46,9 +50,9 @@ export const injected = new (class extends Eip1193Bridge {
     }
     if (method === 'eth_chainId') {
       if (isCallbackForm) {
-        callback(null, { result: '0x4' })
+        callback(null, { result: HEXLIFIED_CHAIN_ID })
       } else {
-        return Promise.resolve('0x4')
+        return Promise.resolve(HEXLIFIED_CHAIN_ID)
       }
     }
     try {

cypress/utils/index.ts

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

fetch-schema.js

@@ -1,23 +0,0 @@
-/* eslint-env node */
-
-require('dotenv').config({ path: '.env.production' })
-
-const { exec } = require('child_process')
-const dataConfig = require('./graphql.config')
-const thegraphConfig = require('./graphql_thegraph.config')
-
-function fetchSchema(url, outputFile) {
-  exec(
-    `get-graphql-schema --h Origin=https://app.uniswap.org ${url} | tee ${outputFile}.temp`,
-    (error, stdout, stderr) => {
-      if (error || stderr) {
-        console.log(`Failed to fetch schema from ${url}`)
-      } else if (stdout) {
-        exec(`mv ${outputFile}.temp ${outputFile}`)
-      }
-    }
-  )
-}
-
-fetchSchema(process.env.THE_GRAPH_SCHEMA_ENDPOINT, thegraphConfig.schema)
-fetchSchema(process.env.REACT_APP_AWS_API_ENDPOINT, dataConfig.schema)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniswap/interface",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Uniswap Interface",
   "homepage": ".",
   "license": "GPL-3.0-or-later",
@@ -8,11 +8,11 @@
     "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
     "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"./node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
     "contracts:compile": "yarn contracts:compile:abi && yarn contracts:compile:v3",
-    "graphql:fetch": "node fetch-schema.js",
+    "graphql:fetch": "node scripts/fetch-schema.js",
     "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",
+    "prei18n:extract": "node scripts/prei18n-extract.js",
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
@@ -23,6 +23,7 @@
     "deduplicate": "yarn-deduplicate --strategy=highest",
     "lint": "yarn eslint .",
     "test": "craco test --coverage",
+    "test:size": "node scripts/test-size.js",
     "cypress:open": "cypress open --browser chrome --e2e",
     "cypress:run": "cypress run --browser chrome --e2e",
     "postinstall": "patch-package"
@@ -96,6 +97,7 @@
     "cypress": "^10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.8",
     "ms.macro": "^2.0.0",
     "patch-package": "^6.4.7",
@@ -110,7 +112,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.2",
-    "@coinbase/wallet-sdk": "^3.3.0",
+    "@coinbase/wallet-sdk": "^3.6.4",
+    "@cypress/code-coverage": "^3.10.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@graphql-codegen/cli": "^2.15.0",
@@ -124,34 +127,34 @@
     "@lingui/react": "^3.14.0",
     "@looksrare/sdk": "^0.10.2",
     "@metamask/jazzicon": "^2.0.0",
-    "@opensea/seaport-js": "^1.0.2",
+    "@opensea/seaport-js": "^1.0.10",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
-    "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@sentry/react": "7.20.1",
+    "@sentry/react": "^7.40.0",
+    "@sentry/tracing": "^7.40.0",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@uniswap/analytics": "1.2.0",
-    "@uniswap/analytics-events": "^1.5.0",
-    "@uniswap/conedison": "^1.1.1",
+    "@uniswap/analytics": "^1.3.1",
+    "@uniswap/analytics-events": "^2.8.0",
+    "@uniswap/conedison": "^1.4.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/permit2-sdk": "1.2.0",
     "@uniswap/redux-multicall": "^1.1.8",
     "@uniswap/router-sdk": "^1.3.0",
-    "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.10.0",
+    "@uniswap/sdk-core": "^3.2.2",
+    "@uniswap/smart-order-router": "^3.6.1",
     "@uniswap/token-lists": "^1.0.0-beta.30",
-    "@uniswap/universal-router-sdk": "1.3.0",
+    "@uniswap/universal-router-sdk": "^1.3.8",
     "@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.22.11",
+    "@uniswap/widgets": "^2.49.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -164,24 +167,24 @@
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.11.1",
     "@walletconnect/ethereum-provider": "^1.8.0",
-    "@web3-react/coinbase-wallet": "8.0.34-beta.0",
-    "@web3-react/core": "8.0.35-beta.0",
-    "@web3-react/eip1193": "8.0.26-beta.0",
-    "@web3-react/empty": "8.0.20-beta.0",
-    "@web3-react/gnosis-safe": "8.0.7-beta.0",
-    "@web3-react/metamask": "8.0.28-beta.0",
-    "@web3-react/network": "8.0.27-beta.0",
-    "@web3-react/types": "8.0.20-beta.0",
-    "@web3-react/url": "8.0.25-beta.0",
-    "@web3-react/walletconnect": "8.0.36-beta.0",
+    "@web3-react/coinbase-wallet": "8.1.2-beta.0",
+    "@web3-react/core": "8.1.2-beta.0",
+    "@web3-react/eip1193": "8.1.2-beta.0",
+    "@web3-react/empty": "8.1.2-beta.0",
+    "@web3-react/gnosis-safe": "8.1.2-beta.0",
+    "@web3-react/metamask": "8.1.2-beta.0",
+    "@web3-react/network": "8.1.2-beta.0",
+    "@web3-react/types": "8.1.2-beta.0",
+    "@web3-react/url": "8.1.2-beta.0",
+    "@web3-react/walletconnect": "8.1.2-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
+    "babel-plugin-istanbul": "^6.1.1",
     "cids": "^1.0.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
-    "ethers": "^5.1.4",
-    "firebase": "^9.1.3",
+    "ethers": "^5.7.2",
     "focus-visible": "^5.2.0",
     "get-graphql-schema": "^2.1.2",
     "graphql": "^16.5.0",
@@ -197,7 +200,7 @@
     "numbro": "^2.3.6",
     "polished": "^3.3.2",
     "polyfill-object.fromentries": "^1.0.1",
-    "popper-max-size-modifier": "^0.2.0",
+    "qrcode.react": "^3.1.0",
     "qs": "^6.9.4",
     "rc-slider": "^10.0.1",
     "react": "^18.2.0",
@@ -220,11 +223,10 @@
     "rebass": "^4.0.7",
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
-    "setimmediate": "^1.0.5",
+    "statsig-react": "^1.22.0",
     "styled-components": "^5.3.5",
     "tiny-invariant": "^1.2.0",
     "ua-parser-js": "^0.7.28",
-    "use-count-up": "^2.2.5",
     "use-resize-observer": "^9.0.2",
     "uuid": "^8.3.2",
     "video-extensions": "^1.2.0",
@@ -234,7 +236,7 @@
     "workbox-navigation-preload": "^6.1.0",
     "workbox-precaching": "^6.1.0",
     "workbox-routing": "^6.1.0",
-    "zustand": "^4.0.0-rc.1"
+    "zustand": "^4.3.6"
   },
   "engines": {
     "npm": "please-use-yarn",

public/index.html

@@ -76,8 +76,8 @@
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
 
+      /* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
       #background-radial-gradient {
-        background: linear-gradient(180deg, #202738 0%, #070816 100%);
         position: fixed;
         top: 0;
         left: 0;
@@ -97,13 +97,13 @@
 
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: #212429;
+          background: linear-gradient(180deg, #202738 0%, #070816 100%);
         }
       }
 
       @media (prefers-color-scheme: light) {
         html {
-          background-color: #f7f8fa;
+          background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
         }
       }
     </style>

scripts/fetch-schema.js

@@ -0,0 +1,28 @@
+/* eslint-env node */
+
+require('dotenv').config({ path: '.env.production' })
+const child_process = require('child_process')
+const fs = require('fs/promises')
+const { promisify } = require('util')
+const dataConfig = require('../graphql.config')
+const thegraphConfig = require('../graphql_thegraph.config')
+
+const exec = promisify(child_process.exec)
+
+function fetchSchema(url, outputFile) {
+  exec(`npx get-graphql-schema --h Origin=https://app.uniswap.org ${url}`)
+    .then(({ stderr, stdout }) => {
+      if (stderr) {
+        throw new Error(stderr)
+      } else {
+        fs.writeFile(outputFile, stdout)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      console.error(`Failed to fetch schema from ${url}`)
+    })
+}
+
+fetchSchema(process.env.THE_GRAPH_SCHEMA_ENDPOINT, thegraphConfig.schema)
+fetchSchema(process.env.REACT_APP_AWS_API_ENDPOINT, dataConfig.schema)

scripts/test-size.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-undef */
+const assert = require('assert')
+const chalk = require('chalk')
+const fs = require('fs')
+const gzipSize = require('gzip-size').sync
+const path = require('path')
+
+const buildDir = path.join(__dirname, '../build')
+
+let entrypoints
+try {
+  entrypoints = require(path.join(buildDir, 'asset-manifest.json')).entrypoints
+} catch (e) {
+  console.log(chalk.yellow('You must build first: `yarn build`'))
+  process.exit(1)
+}
+
+// The last recorded size for these assets, as reported by `yarn build`.
+const LAST_SIZE_MAIN_KB = 420
+
+// This is the async-loaded js, called <number>.<hash>.js, with a matching css file.
+const LAST_SIZE_ENTRY_KB = 1442
+
+const SIZE_TOLERANCE_KB = 10
+
+const jsEntrypoints = entrypoints.filter((entrypoint) => entrypoint.endsWith('js'))
+assert(jsEntrypoints.length === 3)
+
+let fail = false
+console.log('File sizes after gzip:\n')
+jsEntrypoints.forEach((entrypoint) => {
+  const name = entrypoint.match(/\/([\w\d-]*)\./)[1]
+  const size = gzipSize(fs.readFileSync(path.join(buildDir, entrypoint))) / 1024
+
+  let maxSize = LAST_SIZE_ENTRY_KB + SIZE_TOLERANCE_KB
+  if (name === 'runtime-main') {
+    return
+  } else if (name === 'main') {
+    maxSize = LAST_SIZE_MAIN_KB + SIZE_TOLERANCE_KB
+  }
+
+  const report = `\t${size.toFixed(2).padEnd(8)}kB\t${chalk.dim(
+    `max: ${maxSize.toFixed().padEnd(4)} kB`
+  )}\t${entrypoint}`
+  if (maxSize > size) {
+    console.log(chalk.green(report))
+  } else {
+    console.log(chalk.red(report), '\tdid you import an unnecessary dependency?')
+    fail = true
+  }
+})
+if (fail) {
+  console.log(chalk.yellow('\nOne or more of your files has grown too large.'))
+  console.log(chalk.yellow('Reduce the file size or update the size limit (in scripts/test-size.js)'))
+  process.exit(1)
+}

src/abis/permit2.json

@@ -0,0 +1,41 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "internalType": "uint160",
+        "name": "amount",
+        "type": "uint160"
+      },
+      {
+        "internalType": "uint48",
+        "name": "expiration",
+        "type": "uint48"
+      },
+      {
+        "internalType": "uint48",
+        "name": "nonce",
+        "type": "uint48"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/assets/images/arrow-down-blue.svg

@@ -1,3 +0,0 @@
-<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.2981 -1.65714e-07L4.24041 -2.13061e-07L4.24041 7.91103L4.16486 7.91103L1.25623 4.9323L0.538514 5.66731L4.76926 10L9 5.66731L8.28228 4.9323L5.37365 7.91103L5.2981 7.91103L5.2981 -1.65714e-07Z" fill="#2F80ED"/>
-</svg>

src/assets/images/arrow-down-grey.svg

@@ -1,3 +0,0 @@
-<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.2981 -1.65714e-07L4.24041 -2.13061e-07L4.24041 7.91103L4.16486 7.91103L1.25623 4.9323L0.538514 5.66731L4.76926 10L9 5.66731L8.28228 4.9323L5.37365 7.91103L5.2981 7.91103L5.2981 -1.65714e-07Z" fill="#737373"/>
-</svg>

src/assets/images/bnbCircle.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
+<g>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
+		S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
+	<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
+		l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
+		L1084.3,821.4z"/>
+	<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
+		l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
+		L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
+		L1809.2,1578z"/>
+	<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 	"/>
+	<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
+		L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
+		l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
+</g>
+</svg>

src/assets/images/circle-grey.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="#AEAEAE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/images/circle.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="#2F80ED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/images/dropdown-blue.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.97168 1L6.20532 6L11.439 1" stroke="#2F80ED"/>
-</svg>

src/assets/images/dropup-blue.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.4673 6L6.23364 1L0.999995 6" stroke="#388DFF"/>
-</svg>

src/assets/images/link.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" focusable="false" role="presentation" aria-hidden="true" class="css-yyruks"><g fill="none" stroke="currentColor" stroke-linecap="full" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></g></svg>

src/assets/images/metamask.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="8" fill="#F7F9FB"/>
+<path d="M19.6128 4L13.2335 8.73803L14.4132 5.94266L19.6128 4Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.88603 4L11.2141 8.78291L10.0921 5.94266L4.88603 4ZM17.3177 14.9827L15.6187 17.5858L19.254 18.586L20.2991 15.0404L17.3177 14.9827ZM4.21283 15.0404L5.25148 18.586L8.88675 17.5858L7.18772 14.9827L4.21283 15.0404Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.68189 10.5847L7.66888 12.117L11.2785 12.2773L11.1503 8.3984L8.68189 10.5847ZM15.8178 10.5847L13.3173 8.35352L13.234 12.2773L16.8372 12.117L15.8178 10.5847ZM8.88705 17.5859L11.0541 16.5281L9.18198 15.0663L8.88705 17.5859ZM13.4456 16.5281L15.619 17.5859L15.3177 15.0663L13.4456 16.5281Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.6191 17.5857L13.4456 16.5278L13.6187 17.9448L13.5995 18.541L15.6191 17.5857ZM8.88708 17.5857L10.9067 18.541L10.8939 17.9448L11.0541 16.5278L8.88708 17.5857Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9392 14.1297L9.13123 13.5976L10.4071 13.0142L10.9392 14.1297ZM13.5615 14.1297L14.0937 13.0142L15.3759 13.5976L13.5615 14.1297Z" fill="#233447" stroke="#233447" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.88652 17.5856L9.19427 14.9826L7.1875 15.0403L8.88652 17.5856ZM15.3108 14.9826L15.6185 17.5856L17.3175 15.0403L15.3108 14.9826ZM16.8367 12.1167L13.2335 12.277L13.5669 14.1299L14.099 13.0143L15.3813 13.5977L16.8367 12.1167ZM9.13016 13.5977L10.4124 13.0143L10.9382 14.1299L11.278 12.277L7.66836 12.1167L9.13016 13.5977Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66888 12.1167L9.18198 15.0659L9.13069 13.5977L7.66888 12.1167ZM15.3818 13.5977L15.3177 15.0659L16.8372 12.1167L15.3818 13.5977ZM11.2785 12.277L10.9387 14.1299L11.3619 16.3162L11.458 13.4374L11.2785 12.277ZM13.234 12.277L13.0609 13.431L13.1378 16.3162L13.5674 14.1299L13.234 12.277Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5679 14.1298L13.1384 16.3161L13.4461 16.5277L15.3182 15.0659L15.3824 13.5977L13.5679 14.1298ZM9.13123 13.5977L9.18252 15.0659L11.0546 16.5277L11.3624 16.3161L10.9392 14.1298L9.13123 13.5977Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5995 18.5412L13.6187 17.945L13.4584 17.8039H11.0413L10.8939 17.945L10.9067 18.5412L8.88708 17.5859L9.59234 18.163L11.0221 19.1567H13.4777L14.9138 18.163L15.6191 17.5859L13.5995 18.5412Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4455 16.528L13.1377 16.3164H11.3618L11.054 16.528L10.8937 17.9449L11.0412 17.8039H13.4583L13.6186 17.9449L13.4455 16.528Z" fill="#161616" stroke="#161616" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8824 9.04578L20.4273 6.42992L19.6131 4L13.4453 8.57775L15.8175 10.5845L19.1707 11.5655L19.9144 10.6999L19.5939 10.4691L20.1068 10.0011L19.7093 9.69333L20.2222 9.30224L19.8824 9.04578ZM4.07825 6.42992L4.62322 9.04578L4.277 9.30224L4.78991 9.69333L4.39882 10.0011L4.91173 10.4691L4.59116 10.6999L5.32847 11.5655L8.68164 10.5845L11.0539 8.57775L4.88608 4L4.07825 6.42992Z" fill="#763D16" stroke="#763D16" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.1706 11.5657L15.8175 10.5847L16.8369 12.1171L15.3174 15.0663L17.3177 15.0407H20.2991L19.1706 11.5657ZM8.68158 10.5847L5.32841 11.5657L4.21283 15.0407H7.18772L9.18167 15.0663L7.66858 12.1171L8.68158 10.5847ZM13.2337 12.2773L13.4453 8.57796L14.4198 5.94287H10.0921L11.0538 8.57796L11.2782 12.2773L11.3551 13.4442L11.3616 16.3165H13.1375L13.1503 13.4442L13.2337 12.2773Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.0641141" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/plus-blue.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 6H6M11 6L6 6M6 1V6M6 6L6 11" stroke="#2F80ED" stroke-linecap="round"/>
-</svg>

src/assets/images/plus-grey.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 6H6M11 6L6 6M6 1V6M6 6L6 11" stroke="#737373" stroke-linecap="round"/>
-</svg>

src/assets/images/question-mark.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="9" cy="9" r="9" fill="#E1E1E1"/>
-<path d="M8.06493 10.8317H9.15706V10.7592C9.17233 9.88089 9.42436 9.48757 10.0735 9.08662C10.7571 8.67421 11.1771 8.09378 11.1771 7.23459C11.1771 5.99354 10.2377 5.15344 8.83629 5.15344C7.54942 5.15344 6.51839 5.90571 6.46875 7.28041H7.62961C7.67543 6.47086 8.25204 6.11573 8.83629 6.11573C9.48546 6.11573 10.0124 6.54724 10.0124 7.22313C10.0124 7.79211 9.65729 8.19306 9.20288 8.47564C8.49262 8.91096 8.07257 9.34246 8.06493 10.7592V10.8317ZM8.64154 13.1534C9.05777 13.1534 9.40527 12.8136 9.40527 12.3897C9.40527 11.9735 9.05777 11.6298 8.64154 11.6298C8.22149 11.6298 7.87782 11.9735 7.87782 12.3897C7.87782 12.8136 8.22149 13.1534 8.64154 13.1534Z" fill="#737373"/>
-</svg>

src/assets/images/question.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8" cy="8" r="8" fill="#EDEEF2"/>
-<path d="M7.09618 9.67828H8.18831V9.60573C8.20358 8.72745 8.45561 8.33413 9.10477 7.93317C9.78831 7.52076 10.2084 6.94033 10.2084 6.08115C10.2084 4.8401 9.26897 4 7.86754 4C6.58067 4 5.54964 4.75227 5.5 6.12697H6.66086C6.70668 5.31742 7.28329 4.96229 7.86754 4.96229C8.51671 4.96229 9.04368 5.39379 9.04368 6.06969C9.04368 6.63866 8.68854 7.03962 8.23413 7.3222C7.52387 7.75752 7.10382 8.18902 7.09618 9.60573V9.67828ZM7.67279 12C8.08902 12 8.43652 11.6601 8.43652 11.2363C8.43652 10.82 8.08902 10.4764 7.67279 10.4764C7.25274 10.4764 6.90907 10.82 6.90907 11.2363C6.90907 11.6601 7.25274 12 7.67279 12Z" fill="#565A69"/>
-</svg>

src/assets/images/router-icon-grey.svg

@@ -1,12 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_988_5781)">
-<path d="M11.3333 12.5C7.33329 12.5 6.66663 8.5 3.99996 8.5M3.99996 8.5C6.66663 8.5 7.33329 4.5 11.3333 4.5M3.99996 8.5H1.66663" stroke="#888D9B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="13.3334" cy="4.5" r="2" stroke="#888D9B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="13.3334" cy="12.5" r="2" stroke="#888D9B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_988_5781">
-<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>

src/assets/images/spinner.svg

@@ -1,17 +0,0 @@
-<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
-    <g fill="none" fill-rule="evenodd">
-        <g transform="translate(1 1)" stroke-width="2">
-            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
-            <path d="M36 18c0-9.94-8.06-18-18-18">
-                <animateTransform
-                    attributeName="transform"
-                    type="rotate"
-                    from="0 18 18"
-                    to="360 18 18"
-                    dur="1s"
-                    repeatCount="indefinite"/>
-            </path>
-        </g>
-    </g>
-</svg>

src/assets/images/uniwallet.svg

@@ -0,0 +1,88 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_12510_20313)">
+<rect width="24" height="24" rx="8" fill="white"/>
+<g filter="url(#filter0_f_12510_20313)">
+<circle cx="13.0526" cy="14.3159" r="14.7368" fill="url(#paint0_radial_12510_20313)"/>
+</g>
+<g filter="url(#filter1_d_12510_20313)">
+<path d="M17.3968 5.20882C17.422 4.76813 17.482 4.47745 17.6027 4.21199C17.6505 4.10692 17.6952 4.02092 17.7021 4.02092C17.709 4.02092 17.6883 4.09848 17.656 4.19325C17.5682 4.45088 17.5538 4.80325 17.6143 5.21322C17.691 5.7334 17.7346 5.80845 18.2868 6.37036C18.5459 6.63392 18.8472 6.96633 18.9564 7.10904L19.155 7.36853L18.9564 7.18308C18.7135 6.9563 18.155 6.51402 18.0316 6.4508C17.9489 6.40839 17.9366 6.40913 17.8856 6.45969C17.8385 6.50629 17.8286 6.5763 17.8221 6.90727C17.812 7.4231 17.7413 7.7542 17.5709 8.08526C17.4787 8.26432 17.4642 8.2261 17.5476 8.02399C17.6099 7.87309 17.6162 7.80675 17.6157 7.30739C17.6148 6.30405 17.4951 6.06284 16.7935 5.64963C16.6157 5.54495 16.3229 5.39399 16.1427 5.31414C15.9625 5.23428 15.8193 5.16473 15.8245 5.15954C15.8444 5.13985 16.5287 5.33869 16.8041 5.44416C17.2138 5.60105 17.2814 5.62138 17.3311 5.60246C17.3645 5.58977 17.3806 5.49307 17.3968 5.20882Z" fill="url(#paint1_linear_12510_20313)"/>
+<path d="M8.74107 3.74916C8.49804 3.7117 8.48779 3.7073 8.60216 3.68984C8.82133 3.65634 9.33884 3.70199 9.69547 3.78626C10.528 3.98291 11.2856 4.48669 12.0943 5.38141L12.3091 5.6191L12.6165 5.57C13.9112 5.36324 15.2284 5.52756 16.3301 6.0333C16.6331 6.17243 17.111 6.44939 17.1707 6.52056C17.1897 6.54324 17.2246 6.68925 17.2483 6.84505C17.3301 7.38407 17.2892 7.79723 17.1233 8.10582C17.033 8.27375 17.0279 8.32696 17.0886 8.47068C17.1371 8.58536 17.2722 8.67024 17.4059 8.67005C17.6797 8.66969 17.9744 8.2299 18.1109 7.61798L18.1651 7.37491L18.2726 7.49585C18.8619 8.15934 19.3248 9.06419 19.4043 9.70827L19.425 9.87619L19.326 9.72353C19.1555 9.46083 18.9842 9.28201 18.7648 9.13777C18.3694 8.87779 17.9514 8.78931 16.8441 8.73133C15.8441 8.67897 15.2782 8.59409 14.717 8.41224C13.7621 8.10289 13.2808 7.69089 12.1466 6.21216C11.6428 5.55535 11.3314 5.19195 11.0217 4.8993C10.3179 4.23435 9.62632 3.88561 8.74107 3.74916Z" fill="url(#paint2_linear_12510_20313)"/>
+<path d="M9.21314 6.92984C8.71977 6.25487 8.41451 5.21998 8.4806 4.44636L8.50103 4.20696L8.61333 4.22732C8.82423 4.26555 9.18786 4.40004 9.35813 4.50281C9.82539 4.78481 10.0277 5.15608 10.2335 6.10945C10.2938 6.38869 10.3729 6.7047 10.4092 6.81168C10.4678 6.98388 10.6892 7.38612 10.8692 7.64735C10.9989 7.83549 10.9127 7.92464 10.6262 7.89893C10.1885 7.85967 9.59561 7.45307 9.21314 6.92984Z" fill="url(#paint3_linear_12510_20313)"/>
+<path d="M16.7978 11.9533C14.4921 11.0308 13.6801 10.2301 13.6801 8.87901C13.6801 8.68019 13.687 8.51751 13.6954 8.51751C13.7038 8.51751 13.793 8.58313 13.8936 8.66334C14.3611 9.03598 14.8847 9.19514 16.3341 9.40526C17.187 9.52892 17.667 9.62879 18.1097 9.7747C19.517 10.2385 20.3877 11.1797 20.5953 12.4616C20.6557 12.8341 20.6203 13.5327 20.5225 13.9008C20.4452 14.1916 20.2096 14.7157 20.1471 14.7358C20.1298 14.7414 20.1128 14.6754 20.1083 14.5856C20.0846 14.1043 19.8398 13.6356 19.4287 13.2846C18.9613 12.8854 18.3333 12.5677 16.7978 11.9533Z" fill="url(#paint4_linear_12510_20313)"/>
+<path d="M15.1791 12.3366C15.1503 12.1657 15.1002 11.9476 15.0678 11.8518L15.009 11.6776L15.1182 11.7995C15.2695 11.9681 15.389 12.184 15.4902 12.4714C15.5675 12.6908 15.5762 12.7561 15.5757 13.1126C15.5751 13.4626 15.5654 13.536 15.494 13.7335C15.3815 14.0449 15.2418 14.2657 15.0074 14.5027C14.5863 14.9286 14.0448 15.1645 13.2633 15.2623C13.1275 15.2793 12.7316 15.3079 12.3836 15.3259C11.5065 15.3712 10.9292 15.4649 10.4105 15.6459C10.3359 15.6719 10.2693 15.6877 10.2626 15.681C10.2416 15.6603 10.5947 15.4511 10.8864 15.3114C11.2978 15.1145 11.7072 15.0071 12.6246 14.8553C13.0778 14.7803 13.5458 14.6893 13.6646 14.6531C14.7869 14.3111 15.3638 13.4288 15.1791 12.3366Z" fill="url(#paint5_linear_12510_20313)"/>
+<path d="M16.2361 14.2019C15.9298 13.5475 15.8594 12.9156 16.0272 12.3264C16.0452 12.2634 16.0741 12.2119 16.0914 12.2119C16.1088 12.2119 16.1811 12.2507 16.2521 12.2982C16.3932 12.3926 16.6763 12.5517 17.4306 12.9603C18.3719 13.4703 18.9085 13.8652 19.2735 14.3163C19.5931 14.7114 19.7909 15.1614 19.8861 15.7101C19.94 16.0209 19.9084 16.7688 19.8281 17.0818C19.5751 18.0686 18.9869 18.8438 18.148 19.2961C18.0251 19.3624 17.9147 19.4168 17.9028 19.4171C17.8908 19.4173 17.9356 19.3041 18.0023 19.1656C18.2845 18.5794 18.3167 18.0092 18.1033 17.3745C17.9727 16.9858 17.7063 16.5116 17.1685 15.7102C16.5432 14.7784 16.3899 14.5304 16.2361 14.2019Z" fill="url(#paint6_linear_12510_20313)"/>
+<path d="M7.57574 17.7327C8.43136 17.0148 9.49596 16.5048 10.4657 16.3482C10.8836 16.2808 11.5799 16.3075 11.9669 16.406C12.5872 16.5637 13.1421 16.9171 13.4307 17.3381C13.7128 17.7495 13.8338 18.1081 13.9597 18.9058C14.0094 19.2205 14.0635 19.5365 14.0799 19.608C14.1745 20.0215 14.3586 20.3519 14.5867 20.5179C14.9491 20.7815 15.5731 20.7979 16.1869 20.5599C16.2911 20.5195 16.3815 20.4916 16.3879 20.4979C16.4101 20.5199 16.101 20.7255 15.883 20.8337C15.5896 20.9794 15.3563 21.0357 15.0463 21.0357C14.4841 21.0357 14.0173 20.7515 13.6279 20.172C13.5512 20.058 13.379 19.7164 13.2451 19.413C12.8339 18.481 12.6308 18.1971 12.1534 17.8863C11.7379 17.616 11.202 17.5675 10.7989 17.764C10.2694 18.0219 10.1216 18.6944 10.5009 19.1205C10.6516 19.2899 10.9327 19.436 11.1626 19.4644C11.5926 19.5175 11.9621 19.1925 11.9621 18.761C11.9621 18.4809 11.8538 18.3211 11.581 18.1988C11.2085 18.0317 10.808 18.227 10.81 18.5747C10.8108 18.723 10.8758 18.8162 11.0254 18.8834C11.1213 18.9266 11.1235 18.93 11.0453 18.9138C10.7035 18.8434 10.6234 18.4339 10.8982 18.1621C11.2282 17.8357 11.9105 17.9797 12.1448 18.4252C12.2432 18.6123 12.2546 18.9849 12.1688 19.2099C11.9768 19.7136 11.4167 19.9784 10.8486 19.8343C10.4618 19.7361 10.3044 19.6299 9.83802 19.1526C9.02768 18.3231 8.7131 18.1624 7.54487 17.9811L7.32101 17.9464L7.57574 17.7327Z" fill="url(#paint7_linear_12510_20313)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.77354 2.88677C6.47968 6.15059 8.34354 7.49719 8.55067 7.78169C8.72168 8.0166 8.65732 8.2278 8.36434 8.39331C8.20142 8.48533 7.86646 8.57858 7.69875 8.57858C7.50906 8.57858 7.44394 8.50586 7.44394 8.50586C7.33395 8.40221 7.27201 8.42033 6.70721 7.42408C5.92308 6.215 5.26687 5.21202 5.24896 5.19523C5.20757 5.15639 5.20828 5.15771 6.62725 7.68067C6.85652 8.20652 6.67286 8.39954 6.67286 8.47443C6.67286 8.62679 6.63103 8.70687 6.4419 8.91651C6.1266 9.26604 5.98566 9.65877 5.88391 10.4716C5.76985 11.3827 5.44913 12.0263 4.56029 13.1279C4.04 13.7727 3.95486 13.8909 3.82358 14.1508C3.65821 14.478 3.61274 14.6613 3.59431 15.0746C3.57484 15.5116 3.61277 15.7938 3.74711 16.2116C3.86472 16.5774 3.98749 16.8189 4.30133 17.3019C4.57217 17.7188 4.72812 18.0285 4.72812 18.1497C4.72812 18.2461 4.74665 18.2463 5.16634 18.1521C6.17072 17.9267 6.98627 17.5303 7.44495 17.0446C7.72882 16.7439 7.79546 16.5778 7.79762 16.1658C7.79904 15.8963 7.7895 15.8399 7.71619 15.6848C7.59685 15.4325 7.3796 15.2227 6.90076 14.8974C6.27336 14.4712 6.00538 14.1281 5.93136 13.6562C5.87064 13.269 5.94108 12.9958 6.28817 12.273C6.64742 11.5247 6.73645 11.2059 6.79667 10.4517C6.83557 9.9644 6.88943 9.77223 7.03032 9.61798C7.17725 9.45714 7.30953 9.40267 7.67316 9.3533C8.266 9.27282 8.64349 9.1204 8.95378 8.83627C9.22296 8.58978 9.3356 8.35227 9.35288 7.99474L9.366 7.72374L9.21558 7.54946C8.67084 6.9183 3.40873 2.39062 3.37521 2.39062C3.36805 2.39062 3.5473 2.61391 3.77354 2.88677ZM5.03391 15.569C5.15708 15.3523 5.09164 15.0736 4.88562 14.9375C4.69096 14.8089 4.38857 14.8694 4.38857 15.0371C4.38857 15.0882 4.41703 15.1254 4.48117 15.1583C4.58918 15.2135 4.59702 15.2756 4.51204 15.4025C4.42598 15.531 4.43293 15.6441 4.53164 15.7209C4.69074 15.8447 4.91596 15.7766 5.03391 15.569Z" fill="url(#paint8_linear_12510_20313)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.74013 9.49546C9.46182 9.5804 9.19129 9.87351 9.10754 10.1808C9.05645 10.3683 9.08544 10.6972 9.16196 10.7988C9.28559 10.9629 9.40515 11.0061 9.72887 11.0038C10.3627 10.9994 10.9136 10.7293 10.9777 10.3916C11.0302 10.1148 10.7882 9.73123 10.4549 9.56281C10.2829 9.47595 9.91711 9.44148 9.74013 9.49546ZM10.481 10.0712C10.5788 9.93317 10.536 9.78402 10.3698 9.68314C10.0532 9.49106 9.57452 9.65001 9.57452 9.94718C9.57452 10.0951 9.82416 10.2565 10.053 10.2565C10.2053 10.2565 10.4137 10.1662 10.481 10.0712Z" fill="url(#paint9_linear_12510_20313)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_12510_20313" x="-72.277" y="-71.0137" width="170.659" height="170.659" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="35.2964" result="effect1_foregroundBlur_12510_20313"/>
+</filter>
+<filter id="filter1_d_12510_20313" x="-20.2828" y="-21.2671" width="64.5655" height="65.9605" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="11.8289"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.605405 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12510_20313"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12510_20313" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_12510_20313" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.0719 14.2967) rotate(42.4693) scale(16.2421)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FFD8EF" stop-opacity="0.4"/>
+</radialGradient>
+<linearGradient id="paint1_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<linearGradient id="paint9_linear_12510_20313" x1="19.7578" y1="18.1172" x2="4.89844" y2="3.67969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCDF1"/>
+<stop offset="0.380969" stop-color="#F436DA"/>
+<stop offset="1" stop-color="#F356EF"/>
+</linearGradient>
+<clipPath id="clip0_12510_20313">
+<rect width="24" height="24" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/QR.svg

@@ -1,3 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1.5H1.5V7.5H7.5V1.5ZM1.5 0H0V1.5V7.5V9H1.5H7.5H9V7.5V1.5V0H7.5H1.5ZM4.5 3H3V4.5V6H4.5H6V4.5V3H4.5ZM1.5 19.5V13.5H7.5V19.5H1.5ZM0 12H1.5H7.5H9V13.5V19.5V21H7.5H1.5H0V19.5V13.5V12ZM4.5 15H3V16.5V18H4.5H6V16.5V15H4.5ZM13.5 1.5H19.5V7.5H13.5V1.5ZM12 0H13.5H19.5H21V1.5V7.5V9H19.5H13.5H12V7.5V1.5V0ZM16.5 3H15V4.5V6H16.5H18V4.5V3H16.5ZM16.5 12H12V21H13.5V16.5H15V18H21V12H19.5V13.5H16.5V12ZM18 19.5H16.5V21H18V19.5ZM19.5 19.5H21V21H19.5V19.5Z" fill="black"/>
-</svg>

src/assets/svg/apple_logo.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22.773 22.773" style="enable-background:new 0 0 22.773 22.773;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
+			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
+		<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
+			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
+			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
+			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
+			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
+			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/svg/arbitrum_logo.svg

@@ -1,181 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 470.287 514.251" enable-background="new 0 0 470.287 514.251" xml:space="preserve">
-<g id="Background">
-</g>
-<g id="Logos_and_symbols">
-	<g id="SYMBOL_VER_3">
-	</g>
-	<g id="SYMBOL_VER_3_3_">
-	</g>
-	<g id="SYMBOL_VER_4">
-	</g>
-	<g id="SYMBOL_VER_4_1_">
-		<g id="SYMBOL_VER_4_3_">
-		</g>
-	</g>
-	<g id="SYMBOL_VER_5_1_">
-	</g>
-	<g id="off_2_1_">
-	</g>
-	<g id="VER_3_1_">
-		<g id="SYMBOL_VER_2_1_">
-		</g>
-	</g>
-	<g id="VER_3">
-		<g id="SYMBOL_VER_2">
-		</g>
-	</g>
-	<g id="off_2">
-	</g>
-	<g id="SYMBOL_VER_5">
-	</g>
-	<g id="SYMBOL_VER_1">
-	</g>
-	<g id="SYMBOL_VER_1_1_">
-	</g>
-	<g id="SYMBOL_VER_1-1_3_">
-	</g>
-	<g id="SYMBOL_VER_1-1_2_">
-	</g>
-	<g id="SYMBOL_VER_1-1">
-	</g>
-	<g id="SYMBOL_VER_1-1_1_">
-		<g id="_x31_-3">
-		</g>
-		<g id="Symbol_-_Original_14_">
-			<path fill="#2D374B" d="M291.134,237.469l35.654-60.5l96.103,149.684l0.046,28.727l-0.313-197.672
-				c-0.228-4.832-2.794-9.252-6.887-11.859L242.715,46.324c-4.045-1.99-9.18-1.967-13.22,0.063c-0.546,0.272-1.06,0.57-1.548,0.895
-				l-0.604,0.379L59.399,144.983l-0.651,0.296c-0.838,0.385-1.686,0.875-2.48,1.444c-3.185,2.283-5.299,5.66-5.983,9.448
-				c-0.103,0.574-0.179,1.158-0.214,1.749l0.264,161.083l89.515-138.745c11.271-18.397,35.825-24.323,58.62-24.001l26.753,0.706
-				L67.588,409.765l18.582,10.697L245.692,157.22l70.51-0.256L157.091,426.849l66.306,38.138l7.922,4.556
-				c3.351,1.362,7.302,1.431,10.681,0.21l175.453-101.678l-33.544,19.438L291.134,237.469z M304.736,433.395l-66.969-105.108
-				l40.881-69.371l87.952,138.628L304.736,433.395z"/>
-			<polygon fill="#28A0F0" points="237.768,328.286 304.736,433.395 366.601,397.543 278.648,258.915 			"/>
-			<path fill="#28A0F0" d="M422.937,355.379l-0.046-28.727l-96.103-149.684l-35.654,60.5l92.774,150.043l33.544-19.438
-				c3.29-2.673,5.281-6.594,5.49-10.825L422.937,355.379z"/>
-			<path fill="#FFFFFF" d="M20.219,382.469l47.369,27.296l157.634-252.801l-26.753-0.706c-22.795-0.322-47.35,5.604-58.62,24.001
-				L50.334,319.004l-30.115,46.271V382.469z"/>
-			<polygon fill="#FFFFFF" points="316.202,156.964 245.692,157.22 86.17,420.462 141.928,452.565 157.091,426.849 			"/>
-			<path fill="#96BEDC" d="M452.65,156.601c-0.59-14.746-8.574-28.245-21.08-36.104L256.28,19.692
-				c-12.371-6.229-27.825-6.237-40.218-0.004c-1.465,0.739-170.465,98.752-170.465,98.752c-2.339,1.122-4.592,2.458-6.711,3.975
-				c-11.164,8.001-17.969,20.435-18.668,34.095v208.765l30.115-46.271L50.07,157.921c0.035-0.589,0.109-1.169,0.214-1.741
-				c0.681-3.79,2.797-7.171,5.983-9.456c0.795-0.569,172.682-100.064,173.228-100.337c4.04-2.029,9.175-2.053,13.22-0.063
-				l173.022,99.523c4.093,2.607,6.659,7.027,6.887,11.859v199.542c-0.209,4.231-1.882,8.152-5.172,10.825l-33.544,19.438
-				l-17.308,10.031l-61.864,35.852l-62.737,36.357c-3.379,1.221-7.33,1.152-10.681-0.21l-74.228-42.693l-15.163,25.717
-				l66.706,38.406c2.206,1.255,4.171,2.367,5.784,3.272c2.497,1.4,4.199,2.337,4.8,2.629c4.741,2.303,11.563,3.643,17.71,3.643
-				c5.636,0,11.132-1.035,16.332-3.072l182.225-105.531c10.459-8.104,16.612-20.325,17.166-33.564V156.601z"/>
-		</g>
-		<g id="Symbol_-_Original_13_">
-		</g>
-		<g id="Symbol_-_Original_6_">
-		</g>
-		<g id="Symbol_-_Original_4_">
-		</g>
-		<g id="One_color_version_-_White_3_">
-			<g id="Symbol_-_Original_15_">
-			</g>
-		</g>
-		<g id="One_color_version_-_White">
-			<g id="Symbol_-_Original">
-			</g>
-		</g>
-		<g id="Symbol_-_Monochromatic_3_">
-			<g id="_x33__7_">
-			</g>
-		</g>
-		<g id="Symbol_-_Monochromatic">
-			<g id="_x33__3_">
-			</g>
-		</g>
-		<g id="_x33__2_">
-		</g>
-		<g id="_x33__1_">
-		</g>
-		<g id="_x33_">
-		</g>
-		<g id="Symbol_-_Original_10_">
-		</g>
-		<g id="Symbol_-_Original_1_">
-		</g>
-		<g id="Symbol_-_Original_2_">
-		</g>
-		<g id="_x34__1_">
-		</g>
-		<g id="Symbol_-_Monochromatic_2_">
-			<g id="_x33__6_">
-			</g>
-		</g>
-		<g id="One_color_version_-_White_2_">
-			<g id="Symbol_-_Original_11_">
-			</g>
-		</g>
-		<g id="Symbol_-_Original_5_">
-			<g id="Symbol_-_Original_12_">
-			</g>
-		</g>
-		<g id="One_color_version_-_White_1_">
-			<g id="Symbol_-_Original_9_">
-			</g>
-		</g>
-	</g>
-	<g id="SYMBOL_VER_1_2_">
-		<g id="SYMBOL_VER_2_4_">
-		</g>
-		<g id="SYMBOL_VER_2-1-1_1_">
-		</g>
-		<g id="SYMBOL_VER_2-2-1_1_">
-		</g>
-		<g id="SYMBOL_VER_2-3-1_4_">
-		</g>
-		<g id="New_Symbol_1_">
-			<g id="SYMBOL_VER_2-3-1_3_">
-			</g>
-		</g>
-		<g id="New_Symbol">
-			<g id="SYMBOL_VER_2-3-1_1_">
-			</g>
-		</g>
-	</g>
-	<g id="SYMBOL_VER_2_2_">
-	</g>
-	<g id="SYMBOL_VER_4_2_">
-	</g>
-	<g id="SYMBOL_VER_3_2_">
-	</g>
-	<g id="SYMBOL_VER_3_1_">
-	</g>
-	<g id="SYMBOL_VER_1-1-1_1_">
-	</g>
-	<g id="SYMBOL_VER_1-1-1">
-	</g>
-	<g id="SYMBOL_VER_1-1-1_2_2_">
-	</g>
-	<g id="SYMBOL_VER_1-1-1_2">
-	</g>
-	<g id="SYMBOL_VER_1-1-1_2_1_">
-	</g>
-	<g id="Symbol_-_Original_7_">
-	</g>
-	<g id="Symbol_-_Original_8_">
-	</g>
-	<g id="SYMBOL_VER_2-1-1">
-	</g>
-	<g id="SYMBOL_VER_2-2-1">
-	</g>
-	<g id="SYMBOL_VER_2-3-1">
-	</g>
-	<g id="SYMBOL_VER_5-1_1_">
-	</g>
-	<g id="SYMBOL_VER_5-1">
-	</g>
-	<g id="SYMBOL_VER_5-2_1_">
-	</g>
-	<g id="SYMBOL_VER_5-2">
-	</g>
-	<g id="Symbol_-_Monochromatic_1_">
-		<g id="_x33__4_">
-		</g>
-	</g>
-</g>
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.53125 5.04465V10.9554C0.53125 11.3328 0.742546 11.6817 1.08477 11.8698L6.44755 14.8258C6.78977 15.0139 7.21107 15.0139 7.55329 14.8258L12.9161 11.8698C13.2583 11.6817 13.4696 11.3328 13.4696 10.9554V5.04465C13.4696 4.66726 13.2583 4.31833 12.9161 4.13026L7.55329 1.17426C7.21107 0.986184 6.78977 0.986184 6.44755 1.17426L1.08347 4.13026C0.74125 4.31833 0.53125 4.66726 0.53125 5.04465Z" fill="#213147"/>
+<path d="M8.17051 9.14643L7.40569 11.1484C7.38495 11.2041 7.38495 11.2648 7.40569 11.3204L8.72143 14.7652L10.2433 13.9263L8.4168 9.14643C8.37532 9.03631 8.21199 9.03631 8.17051 9.14643Z" fill="#12AAFF"/>
+<path d="M9.70391 5.77961C9.66243 5.66949 9.4991 5.66949 9.45762 5.77961L8.6928 7.78162C8.67206 7.83731 8.67206 7.89793 8.6928 7.95361L10.8485 13.5934L12.3704 12.7545L9.70391 5.77961Z" fill="#12AAFF"/>
+<path d="M7 1.39574C7.03759 1.39574 7.07519 1.40564 7.10889 1.42296L12.9124 4.62147C12.9798 4.65859 13.0213 4.72789 13.0213 4.80089V11.1967C13.0213 11.2709 12.9798 11.339 12.9124 11.3761L7.10889 14.5746C7.07648 14.5932 7.03759 14.6018 7 14.6018C6.96241 14.6018 6.92482 14.5919 6.89111 14.5746L1.08759 11.3786C1.02019 11.3415 0.978704 11.2722 0.978704 11.1992V4.80213C0.978704 4.72789 1.02019 4.65983 1.08759 4.62271L6.89111 1.4242C6.92482 1.40564 6.96241 1.39574 7 1.39574ZM7 0.461548C6.79389 0.461548 6.58648 0.512279 6.40111 0.614978L0.598889 3.81226C0.228148 4.01642 0 4.3938 0 4.80213V11.1979C0 11.6062 0.228148 11.9836 0.598889 12.1878L6.40241 15.3863C6.58778 15.4878 6.79389 15.5397 7.0013 15.5397C7.20741 15.5397 7.41482 15.489 7.60019 15.3863L13.4037 12.1878C13.7744 11.9836 14.0026 11.6062 14.0026 11.1979V4.80213C14.0026 4.3938 13.7744 4.01642 13.4037 3.81226L7.59889 0.614978C7.41352 0.512279 7.20611 0.461548 7 0.461548Z" fill="#9DCCED"/>
+<path d="M3.16162 13.6008L3.6957 12.2051L4.77033 13.0576L3.7657 13.9336L3.16162 13.6008Z" fill="#213147"/>
+<path d="M6.51113 4.3443H5.03983C4.92965 4.3443 4.83113 4.40988 4.79354 4.50887L1.63965 12.7619L3.1615 13.6008L6.63428 4.51258C6.66669 4.43091 6.60317 4.3443 6.51113 4.3443Z" fill="white"/>
+<path d="M9.08579 4.3443H7.6145C7.50431 4.3443 7.40579 4.40988 7.3682 4.50887L3.76709 13.9324L5.28894 14.7713L9.20894 4.51258C9.24005 4.43091 9.17653 4.3443 9.08579 4.3443Z" fill="white"/>
 </svg>

src/assets/svg/blank_token.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="8" cy="8" r="8" stroke-width="3" fill="#98A1C0"></circle>
+</svg>

src/assets/svg/bnb-logo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
+<g>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
+		S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
+	<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
+		l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
+		L1084.3,821.4z"/>
+	<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
+		l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
+		L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
+		L1809.2,1578z"/>
+	<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 	"/>
+	<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
+		L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
+		l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
+</g>
+</svg>

src/assets/svg/bnb_square_logo.svg

@@ -0,0 +1,21 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0" y="0" width="16" height="16" rx="3" fill="#F0B90B"/>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
+<g>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
+		S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
+	<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
+		l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
+		L1084.3,821.4z"/>
+	<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
+		l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
+		L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
+		L1809.2,1578z"/>
+	<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 	"/>
+	<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
+		L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
+		l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
+</g>
+</svg>
+</svg>

src/assets/svg/browser-wallet-dark.svg

@@ -0,0 +1,77 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" fill="#293249" />
+  <g clip-path="url(#clip0_304_15139)">
+    <rect x="3" y="3" width="17" height="17" rx="6" fill="#3375BB" />
+    <g clip-path="url(#clip1_304_15139)">
+      <mask id="mask0_304_15139" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="2"
+        width="17" height="18">
+        <path d="M19.843 2.99976H3.10449V19.7382H19.843V2.99976Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_304_15139)">
+        <path
+          d="M11.4737 19.7382C16.0959 19.7382 19.843 15.9912 19.843 11.369C19.843 6.74679 16.0959 2.99976 11.4737 2.99976C6.85153 2.99976 3.10449 6.74679 3.10449 11.369C3.10449 15.9912 6.85153 19.7382 11.4737 19.7382Z"
+          fill="#3375BB" />
+        <path
+          d="M11.533 6.66125C13.187 8.0426 15.0837 7.95741 15.6257 7.95741C15.5071 15.8135 14.6039 14.2556 11.533 16.4585C8.46215 14.2556 7.5646 15.8135 7.44604 7.95741C7.98233 7.95741 9.87903 8.0426 11.533 6.66125Z"
+          stroke="white" stroke-width="1.04615" stroke-miterlimit="10" stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </g>
+  </g>
+  <rect x="3" y="22" width="17" height="17" rx="6" fill="white" />
+  <path
+    d="M17.9393 30.9431C18.4082 29.8912 16.0762 26.938 13.8455 25.7213C12.4386 24.7707 10.981 24.8975 10.6769 25.3157C10.0305 26.2283 12.8315 27.0141 14.7073 27.914C14.3017 28.0914 13.9215 28.4083 13.706 28.8012C13.0089 28.0407 11.4753 27.3816 9.67558 27.914C8.45883 28.2688 7.45756 29.118 7.06465 30.3855C6.97593 30.3474 6.86186 30.3221 6.76046 30.3221C6.34221 30.3221 6 30.6643 6 31.0826C6 31.5008 6.34221 31.843 6.76046 31.843C6.83651 31.843 7.07732 31.7923 7.07732 31.7923L10.981 31.8177C9.42209 34.3019 8.18 34.6567 8.18 35.0877C8.18 35.5186 9.35872 35.4045 9.80232 35.2398C11.9316 34.4793 14.213 32.0838 14.6059 31.3994C16.2536 31.6149 17.6351 31.6276 17.9393 30.9431Z"
+    fill="url(#paint0_linear_304_15139)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14.7201 27.9138C14.8088 27.8758 14.7961 27.7491 14.7708 27.6477C14.7201 27.4195 13.7695 26.4816 12.8823 26.0634C11.6656 25.493 10.7784 25.5184 10.6516 25.7845C10.8924 26.2915 12.0458 26.7605 13.2372 27.2674C13.7315 27.4702 14.2511 27.6857 14.7201 27.9138Z"
+    fill="url(#paint1_linear_304_15139)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M13.1737 33.0091C12.9328 32.9204 12.654 32.8317 12.3371 32.7556C12.6667 32.1599 12.7427 31.26 12.4259 30.7024C11.9823 29.9165 11.4246 29.4983 10.1191 29.4983C9.40936 29.4983 7.48285 29.7391 7.44482 31.3488C7.44482 31.5135 7.44482 31.6656 7.4575 31.8177H10.981C10.512 32.5655 10.0684 33.1232 9.67552 33.5414C10.1445 33.6555 10.5247 33.7569 10.8796 33.8583C11.2091 33.947 11.526 34.023 11.8428 34.1118C12.3245 33.7569 12.7808 33.3767 13.1737 33.0091Z"
+    fill="url(#paint2_linear_304_15139)" />
+  <path
+    d="M7.01397 31.6276C7.15338 32.8443 7.85048 33.326 9.27001 33.4654C10.6895 33.6048 11.5007 33.5161 12.578 33.6048C13.4779 33.6809 14.2891 34.1498 14.5806 33.985C14.8468 33.8456 14.6947 33.326 14.3398 32.9964C13.8708 32.5655 13.2244 32.274 12.0964 32.1599C12.3245 31.5389 12.2612 30.6644 11.9063 30.1954C11.3993 29.511 10.4614 29.2068 9.27001 29.3335C8.02792 29.4856 6.83652 30.1067 7.01397 31.6276Z"
+    fill="url(#paint3_linear_304_15139)" />
+  <rect x="22" y="3" width="17" height="36" rx="6" fill="#4C82FB" fill-opacity="0.24" />
+  <g clip-path="url(#clip2_304_15139)">
+    <path
+      d="M30.5001 25.0833C33.0314 25.0833 35.0834 23.0313 35.0834 20.5C35.0834 17.9687 33.0314 15.9166 30.5001 15.9166C27.9688 15.9166 25.9167 17.9687 25.9167 20.5C25.9167 23.0313 27.9688 25.0833 30.5001 25.0833Z"
+      stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M25.9167 20.5H35.0834" stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path
+      d="M30.5001 15.9166C31.6465 17.1717 32.298 18.8005 32.3334 20.5C32.298 22.1994 31.6465 23.8282 30.5001 25.0833C29.3537 23.8282 28.7022 22.1994 28.6667 20.5C28.7022 18.8005 29.3537 17.1717 30.5001 15.9166V15.9166Z"
+      stroke="#4C82FB" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" stroke="#1B2236" stroke-width="0.5" />
+  <defs>
+    <linearGradient id="paint0_linear_304_15139" x1="9.54664" y1="29.9616" x2="17.8542" y2="32.3175"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8797FF" />
+      <stop offset="1" stop-color="#AAA8FF" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_304_15139" x1="16.147" y1="30.1475" x2="10.1527" y2="24.1385"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3B22A0" />
+      <stop offset="1" stop-color="#5156D8" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_304_15139" x1="13.3391" y1="33.2263" x2="7.58086" y2="29.9157"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3B1E8F" />
+      <stop offset="1" stop-color="#6A6FFB" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_304_15139" x1="9.14535" y1="30.6449" x2="13.0375" y2="35.5903"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8898FF" />
+      <stop offset="0.9839" stop-color="#5F47F1" />
+    </linearGradient>
+    <clipPath id="clip0_304_15139">
+      <rect x="3" y="3" width="17" height="17" rx="6" fill="white" />
+    </clipPath>
+    <clipPath id="clip1_304_15139">
+      <rect width="17" height="16.7385" fill="white" transform="translate(3 2.99988)" />
+    </clipPath>
+    <clipPath id="clip2_304_15139">
+      <rect width="11" height="11" fill="white" transform="translate(25 15)" />
+    </clipPath>
+  </defs>
+</svg>

src/assets/svg/browser-wallet-light.svg

@@ -0,0 +1,78 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="40" height="40" rx="8" fill="#E8ECFB" />
+  <g clip-path="url(#clip0_304_15192)">
+    <rect x="3" y="3" width="17" height="17" rx="6" fill="#3375BB" />
+    <g clip-path="url(#clip1_304_15192)">
+      <mask id="mask0_304_15192" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="2"
+        width="17" height="18">
+        <path d="M19.843 2.99976H3.10449V19.7382H19.843V2.99976Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_304_15192)">
+        <path
+          d="M11.4737 19.7382C16.0959 19.7382 19.843 15.9912 19.843 11.369C19.843 6.74679 16.0959 2.99976 11.4737 2.99976C6.85153 2.99976 3.10449 6.74679 3.10449 11.369C3.10449 15.9912 6.85153 19.7382 11.4737 19.7382Z"
+          fill="#3375BB" />
+        <path
+          d="M11.533 6.66125C13.187 8.0426 15.0837 7.95741 15.6257 7.95741C15.5071 15.8135 14.6039 14.2556 11.533 16.4585C8.46215 14.2556 7.5646 15.8135 7.44604 7.95741C7.98233 7.95741 9.87903 8.0426 11.533 6.66125Z"
+          stroke="white" stroke-width="1.04615" stroke-miterlimit="10" stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </g>
+  </g>
+  <rect x="3" y="22" width="17" height="17" rx="6" fill="white" />
+  <path
+    d="M17.9393 30.9431C18.4082 29.8912 16.0762 26.938 13.8455 25.7213C12.4386 24.7707 10.981 24.8975 10.6769 25.3157C10.0305 26.2283 12.8315 27.0141 14.7073 27.914C14.3017 28.0914 13.9215 28.4083 13.706 28.8012C13.0089 28.0407 11.4753 27.3816 9.67558 27.914C8.45883 28.2688 7.45756 29.118 7.06465 30.3855C6.97593 30.3474 6.86186 30.3221 6.76046 30.3221C6.34221 30.3221 6 30.6643 6 31.0826C6 31.5008 6.34221 31.843 6.76046 31.843C6.83651 31.843 7.07732 31.7923 7.07732 31.7923L10.981 31.8177C9.42209 34.3019 8.18 34.6567 8.18 35.0877C8.18 35.5186 9.35872 35.4045 9.80232 35.2398C11.9316 34.4793 14.213 32.0838 14.6059 31.3994C16.2536 31.6149 17.6351 31.6276 17.9393 30.9431Z"
+    fill="url(#paint0_linear_304_15192)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14.7201 27.9138C14.8088 27.8758 14.7961 27.7491 14.7708 27.6477C14.7201 27.4195 13.7695 26.4816 12.8823 26.0634C11.6656 25.493 10.7784 25.5184 10.6516 25.7845C10.8924 26.2915 12.0458 26.7605 13.2372 27.2674C13.7315 27.4702 14.2511 27.6857 14.7201 27.9138Z"
+    fill="url(#paint1_linear_304_15192)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M13.1737 33.0091C12.9328 32.9204 12.654 32.8317 12.3371 32.7556C12.6667 32.1599 12.7427 31.26 12.4259 30.7024C11.9823 29.9165 11.4246 29.4983 10.1191 29.4983C9.40936 29.4983 7.48285 29.7391 7.44482 31.3488C7.44482 31.5135 7.44482 31.6656 7.4575 31.8177H10.981C10.512 32.5655 10.0684 33.1232 9.67552 33.5414C10.1445 33.6555 10.5247 33.7569 10.8796 33.8583C11.2091 33.947 11.526 34.023 11.8428 34.1118C12.3245 33.7569 12.7808 33.3767 13.1737 33.0091Z"
+    fill="url(#paint2_linear_304_15192)" />
+  <path
+    d="M7.01397 31.6276C7.15338 32.8443 7.85048 33.326 9.27001 33.4654C10.6895 33.6048 11.5007 33.5161 12.578 33.6048C13.4779 33.6809 14.2891 34.1498 14.5806 33.985C14.8468 33.8456 14.6947 33.326 14.3398 32.9964C13.8708 32.5655 13.2244 32.274 12.0964 32.1599C12.3245 31.5389 12.2612 30.6644 11.9063 30.1954C11.3993 29.511 10.4614 29.2068 9.27001 29.3335C8.02792 29.4856 6.83652 30.1067 7.01397 31.6276Z"
+    fill="url(#paint3_linear_304_15192)" />
+  <rect x="22" y="3" width="17" height="36" rx="6" fill="#FB118E" fill-opacity="0.12" />
+  <g clip-path="url(#clip2_304_15192)">
+    <path
+      d="M30.5001 25.0833C33.0314 25.0833 35.0834 23.0313 35.0834 20.5C35.0834 17.9687 33.0314 15.9166 30.5001 15.9166C27.9688 15.9166 25.9167 17.9687 25.9167 20.5C25.9167 23.0313 27.9688 25.0833 30.5001 25.0833Z"
+      stroke="#FB118E" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M25.9167 20.5H35.0834" stroke="#FB118E" stroke-width="0.825" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path
+      d="M30.5001 15.9166C31.6465 17.1717 32.298 18.8005 32.3334 20.5C32.298 22.1994 31.6465 23.8282 30.5001 25.0833C29.3537 23.8282 28.7022 22.1994 28.6667 20.5C28.7022 18.8005 29.3537 17.1717 30.5001 15.9166V15.9166Z"
+      stroke="#FB118E" stroke-width="0.825" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+  <rect x="0.75" y="0.75" width="40.5" height="40.5" rx="8.25" stroke="#5D6785"
+    stroke-opacity="0.24" stroke-width="0.5" />
+  <defs>
+    <linearGradient id="paint0_linear_304_15192" x1="9.54664" y1="29.9616" x2="17.8542" y2="32.3175"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8797FF" />
+      <stop offset="1" stop-color="#AAA8FF" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_304_15192" x1="16.147" y1="30.1475" x2="10.1527" y2="24.1385"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3B22A0" />
+      <stop offset="1" stop-color="#5156D8" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint2_linear_304_15192" x1="13.3391" y1="33.2263" x2="7.58086" y2="29.9157"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3B1E8F" />
+      <stop offset="1" stop-color="#6A6FFB" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="paint3_linear_304_15192" x1="9.14535" y1="30.6449" x2="13.0375" y2="35.5903"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8898FF" />
+      <stop offset="0.9839" stop-color="#5F47F1" />
+    </linearGradient>
+    <clipPath id="clip0_304_15192">
+      <rect x="3" y="3" width="17" height="17" rx="6" fill="white" />
+    </clipPath>
+    <clipPath id="clip1_304_15192">
+      <rect width="17" height="16.7385" fill="white" transform="translate(3 2.99988)" />
+    </clipPath>
+    <clipPath id="clip2_304_15192">
+      <rect width="11" height="11" fill="white" transform="translate(25 15)" />
+    </clipPath>
+  </defs>
+</svg>

src/assets/svg/celo_logo.svg

@@ -1 +1,11 @@
-<svg id="Celo_Rings" data-name="Celo Rings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 950 950"><defs><style>.cls-1{fill:#fbcc5c;}.cls-2{fill:#35d07f;}.cls-3{fill:#5ea33b;}</style></defs><title>Artboard 1</title><path id="Bottom_Ring" data-name="Bottom Ring" class="cls-1" d="M375,850c151.88,0,275-123.12,275-275S526.88,300,375,300,100,423.12,100,575,223.12,850,375,850Zm0,100C167.9,950,0,782.1,0,575S167.9,200,375,200,750,367.9,750,575,582.1,950,375,950Z"/><path id="Top_Ring" data-name="Top Ring" class="cls-2" d="M575,650c151.88,0,275-123.12,275-275S726.88,100,575,100,300,223.12,300,375,423.12,650,575,650Zm0,100c-207.1,0-375-167.9-375-375S367.9,0,575,0,950,167.9,950,375,782.1,750,575,750Z"/><path id="Rings_Overlap" data-name="Rings Overlap" class="cls-3" d="M587.39,750a274.38,274.38,0,0,0,54.55-108.06A274.36,274.36,0,0,0,750,587.4a373.63,373.63,0,0,1-29.16,133.45A373.62,373.62,0,0,1,587.39,750ZM308.06,308.06A274.36,274.36,0,0,0,200,362.6a373.63,373.63,0,0,1,29.16-133.45A373.62,373.62,0,0,1,362.61,200,274.38,274.38,0,0,0,308.06,308.06Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FCFF52;}
+</style>
+<circle class="st0" cx="125" cy="125" r="125"/>
+<path d="M188.9,60.7H60.7v128.2h128.2v-44.8h-21.3c-7.3,16.3-23.8,27.7-42.7,27.7c-26,0-47.1-21.3-47.1-47.1c0-25.9,21.1-47,47.1-47
+	c19.3,0,35.8,11.7,43.1,28.4h20.9V60.7z"/>
+</svg>

src/assets/svg/celo_square_logo.svg

@@ -0,0 +1,5 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="250" height="250" rx="40" fill="#FCFF52"/>
+<path style="fill:black;" d="M188.9,60.7H60.7v128.2h128.2v-44.8h-21.3c-7.3,16.3-23.8,27.7-42.7,27.7c-26,0-47.1-21.3-47.1-47.1c0-25.9,21.1-47,47.1-47
+	c19.3,0,35.8,11.7,43.1,28.4h20.9V60.7z"/>
+</svg>

src/assets/svg/contract-interaction.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3H7C5 3 4 4 4 6V18C4 20 5 21 7 21H17C19 21 20 20 20 18V6C20 4 19 3 17 3ZM8 16.75C7.586 16.75 7.25 16.414 7.25 16C7.25 15.586 7.586 15.25 8 15.25C8.414 15.25 8.75 15.586 8.75 16C8.75 16.414 8.414 16.75 8 16.75ZM8 12.75C7.586 12.75 7.25 12.414 7.25 12C7.25 11.586 7.586 11.25 8 11.25C8.414 11.25 8.75 11.586 8.75 12C8.75 12.414 8.414 12.75 8 12.75ZM8 8.75C7.586 8.75 7.25 8.414 7.25 8C7.25 7.586 7.586 7.25 8 7.25C8.414 7.25 8.75 7.586 8.75 8C8.75 8.414 8.414 8.75 8 8.75ZM16 16.75H11C10.586 16.75 10.25 16.414 10.25 16C10.25 15.586 10.586 15.25 11 15.25H16C16.414 15.25 16.75 15.586 16.75 16C16.75 16.414 16.414 16.75 16 16.75ZM16 12.75H11C10.586 12.75 10.25 12.414 10.25 12C10.25 11.586 10.586 11.25 11 11.25H16C16.414 11.25 16.75 11.586 16.75 12C16.75 12.414 16.414 12.75 16 12.75ZM16 8.75H11C10.586 8.75 10.25 8.414 10.25 8C10.25 7.586 10.586 7.25 11 7.25H16C16.414 7.25 16.75 7.586 16.75 8C16.75 8.414 16.414 8.75 16 8.75Z" fill="currentColor"/>
+</svg>
+
+
+<!-- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.63 3H6.38C4.13 3 3 4.12 3 6.37V17.62C3 19.87 4.13 21 6.38 21H17.63C19.88 21 21 19.87 21 17.62V6.37C21 4.12 19.88 3 17.63 3ZM9.75 13.69C10.05 13.98 10.05 14.46 9.75 14.75C9.61 14.9 9.41 14.97 9.22 14.97C9.03 14.97 8.84 14.9 8.69 14.75L6.47 12.53C6.18 12.24 6.18 11.76 6.47 11.47L8.69 9.25C8.98 8.95 9.46 8.95 9.75 9.25C10.05 9.54 10.05 10.02 9.75 10.31L8.06 12L9.75 13.69ZM13.73 8.17999L11.73 16.18C11.64 16.52 11.34 16.75 11 16.75C10.94 16.75 10.88 16.74 10.82 16.73C10.42 16.63 10.17 16.22 10.27 15.82L12.27 7.82001C12.37 7.42001 12.78 7.16999 13.18 7.26999C13.58 7.36999 13.83 7.77999 13.73 8.17999ZM17.53 12.53L15.31 14.75C15.16 14.9 14.97 14.97 14.78 14.97C14.59 14.97 14.39 14.9 14.25 14.75C13.95 14.46 13.95 13.98 14.25 13.69L15.94 12L14.25 10.31C13.95 10.02 13.95 9.54 14.25 9.25C14.54 8.95 15.02 8.95 15.31 9.25L17.53 11.47C17.82 11.76 17.82 12.24 17.53 12.53Z" fill="currentColor"/>
+</svg> -->
+
+
+<!-- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.75 6V3.75L19.25 8.25H17C15.42 8.25 14.75 7.58 14.75 6ZM20 9.75V18C20 20 19 21 17 21H8C6 21 5 20 5 18V6C5 4 6 3 8 3H13.25V6C13.25 8.42 14.58 9.75 17 9.75H20ZM9.06104 16L10.531 14.53C10.824 14.237 10.824 13.762 10.531 13.469C10.238 13.176 9.76297 13.176 9.46997 13.469L7.46997 15.469C7.17697 15.762 7.17697 16.237 7.46997 16.53L9.46997 18.53C9.61597 18.676 9.808 18.75 10 18.75C10.192 18.75 10.384 18.677 10.53 18.53C10.823 18.237 10.823 17.762 10.53 17.469L9.06104 16ZM15.53 15.47L13.53 13.47C13.237 13.177 12.762 13.177 12.469 13.47C12.176 13.763 12.176 14.238 12.469 14.531L13.939 16.001L12.469 17.471C12.176 17.764 12.176 18.239 12.469 18.532C12.615 18.678 12.807 18.752 12.999 18.752C13.191 18.752 13.3831 18.679 13.5291 18.532L15.5291 16.532C15.8231 16.238 15.823 15.762 15.53 15.47Z" fill="currentColor"/>
+</svg> -->

src/assets/svg/ethereum_square_logo.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0" y="0" width="16" height="16" rx="3" fill="#627EEA"/>
+<circle cx="8" cy="8" r="8"/>
+<g clip-path="url(#clip0_12246_121533)">
+<circle cx="8" cy="8" r="8" fill="url(#pattern0)"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_12246_121533" transform="scale(0.0078125)"/>
+</pattern>
+<clipPath id="clip0_12246_121533">
+<rect x="0" y="0" width="16" height="16" rx="8" fill="white"/>
+</clipPath>
+<image id="image0_12246_121533" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAADd9JREFUeNrtXdtzE+cV38kweWpm+tI8JZP8EZ0pL+UhferkfyAzFqEpadq0hbRNUlsYQ2ycBEgCgQQIgVxMbC6BAHbEJZg7dW4OpeCWwDTNDOyuLFuybMsXfT2/tWVkWavd1e5K58g6M9+Q8cTS+ju//b5z/R1Nq0F5Ppr46cpm8xcroubyFU3m+oYmY39Do97d0KRfoH/76d/b9K9JP89Yy/pv62f9s/9PN34Hv4vPwGfhM7W68JNVUfWTp9fqv440Ge2RRqOXFHiPFKhCWfTZ+A58F74T313XQIUlGlUP0lv5RCRqtkQa9YukjMnQFO6w8N3WM9Cz4JnwbHUNhSQrovGlkSZ9K216vFoKdwGIOJ4Rz1rXWADyTDTxeCSqv0wbe5Or0kuA4SaeHX9DXZMepSFq/Jw28FBDo5GVpviFy8hafwv9TXXNOh3zzfov6Qjtka90u1NB78HfWNd0gUTWmr+yLPgaVfwCIMCToL+5/sZH44+Qa9W5WBRfxK3sxB4sRlduSSRqrKYjMbVolX//WkhhL7Ani+O4j+rL6Ai8ttgVX+RauIa9qfG3Xm+tDcs+RI+B9qjmToNVLfFHKWJ2vq5gt6eBfr5mbIPIWuNJK9lSV6zXZWLvJB/5D1AApK1+5PsOIrVhL8UlbMiy7agrMKArgfZSTKKpoc14iHLpMUkb/OZHQ6pxa5x5zID2lPaWefIm9TC5M32SlP/MOl0Zg1PqWG9aUY6fu6vY99yG1M94GnsticfozhqQdryeOJ9W09NZ9cU/Rq2TQIBdMIC9ZvfmS1T+39+Kq6mp7BwATl8dVX/caIoAAfaczZ0v7djPrYE7EwqSAwDW/u6UlMhhX9VtAlim0gy+3Np9KKlykg8ArPXvDApJJhmxqnkHlp8v1NV77hVDJUembQHQfSFtGYeCXMTKxwlmgjwy/erevlGVL4UAwHqna1hS+VlbFcK7MiN8698dVNls1hEAWC+8bsqJGFYqbIzEjtTY/oqorn64O6kKxQ4AB0+NIF8vJncA3YSf0hWc1YOFX0zsAIDVvichKosYaip5Jp8vU/l/ftVUY+NZzwCIXRpVz24wBOUN9NbQKnkkZ/a+vD6u7KQUALDeP5KUVlSyLISjX24Z16Z9Q6qUOAEA6+U344KuAuNaoFcBoWqNVOX/pllXOiV7/ALg6NkR9XRUVC3BmsBKtyVX70JxTuIGAFhvfDgkKDagpwIpKyPLskuq8l98I64mJ7OBAeD0lVH1fJshySvo8t2xI7mS5vr3GeVG3AIA6+MTKVF74KsDSXK7FkK5bsULALCatw9KMgh7y27UlKp8+O1DqenQAIAiEhiXYiKg5TSkSu7SxV3tRbwCAGt7p6Rkkd7jze2jXnapysfxDIWGDQCs1a+ZcvbGCz/BDDmDyEZLdefHCeVVygXAgZicZBF06rK+L/G41JDvh8eSqhwpFwBYbbsTYkLEruhqwGsjUfko5hwdm644AGKX0mrVehmxAejWTdh3QCIArvSPqXLFDwCwdh9OSrkGbjqFfZdKVP6rlLP3I34BgPXiFhnJopIUduC4k6b8ldTNc9ecrDoAjpwZsSqOBBjKW+0bOhmTMNqtw6dHlF8JAgBYSDsLuAbiRUvJQXUqTfl/3WyqiYksGwCcogDU71sNAdeA+UQR699skQaA7/6dUUFIUADAgivK3xswW4qlfS9KUv62/cMqKAkSAFjRbbyTRdD1/FJvoj2vJuu217WqxVCDw1NsAXD8XNoyThnbAZPzqO7BfS/p7f/8YloFKUEDAGtrB2+DEDrPj/23S1F+07a452RPNQBwhlrNUYrO+BRoF1n4ceuHiUCVjzax67cy6pOeVOAg6Pw8xdgOyCsUCXXMSoAL9flBSYbcR/QKwHWDsta+PahadyXU3qNJq54gKBBs2MnUICSdW8rHMCQJyod/PTI67VvxQ8lpdfGbsQVKBgByC/wAOw8Mqx6yNfwCAPbKb1t47qk1CAsTsSQA4MLXY74U/6M+qc5SW/gZG0XlAyC31lFxyVtkzKG03A8Idh7kWT0E3dP9bz7FXfk4msuVgTsZetud3+RiAMhfm/YlrDu9XBAgaskwIrgc+f8NrN0VSrDg7fUiE9QL8PUNut8vuz/CnQCQWxupAOSDz5IWoZQXACBnwa16CLrXZocqsgVAVyzlWvGgfbn07ZirN75cAMzZCUQ0sYuO9pgHO+G195lVD5HuWVf/riGGjvGMs89/15hUvV/a3+9hACC3mncMqm1kJxxzYSecujxq8ROxqhbmnAP45sZ4ScX/578ZdSYgl61cAOSvzWQnHIiVthP2HU3yygk0YF4uU/7eYjJJxI7f3oT/ng40aBMEAHKr/b2ElRW0sxMY8RL3a7NDk9nx95qJ+ckexACufDcWaJAmLADk1gayE3YfGlYnL80HKxteYtK9xpHwCdm0nNyLT6lzX83E1sNQfJgAmIsnUGBp+/4hdbz3PhCY8BKb2uz4dHb8vbf/NxG60isFgDmDkQJLW4hj4OCpFA9eYtI9OwAcOzcyF5+v5KoEAObZCXvIaPxgiAEAmF0BSKGCzq3WAfA3KiNn0GFssjQCc02ex3rTNQcAXHG/40I7N2sE9nMOA2+hYxIBFOkAQJ0g7nxm4WDLDbwggd17z6dJsQAA5zDLcTSke5wA3XL6AOIWf68UALxEJFVcawFmVze7ZJBT2hRH6Cs7E6rnAt9IICJ9bhpE/lBtxjErGcQsHbyRwqiXKaPnxL6BaCF6A05f5QOAKC14MU73fO5KA41dVesBmsz1aAlbzu1ogvWPmj3k0J1cJRhWHx1PVR0AuJ5WNjuWYltkk4hzcIgEWgUhHEvCYP3nqn+RE8Cb7vQ7OHaPfjFScQDArXvWBUEE3FqEuPFdqHHg4A1YJWFci0L/sokYP8bvF4HeuJ2xegKcBkKg6OLk5fABALfODWsorrL8knPQz3NpILWKQjmXhReSPaKBA/kBpw3EG7mLsnBhAQCFKk7E0Whfe/fAwmdYt2OQiwt4T0RjCEq4CyVNqWHc+06EDPC/u2KpwAAAo81pmhieCYwlsUsLvRSMqmPZGMK5NQxvkh6fsi31dlNnhzp/sHuWCwDYF25KuWAPgCnEjm5+JSN20XmtYdybQ3FsIkVsJ6gAdoofYPNhedsVlNi5dX9qd3brYAugAsiWZfwqvwlk85pDJbSHoya/lIAWHlY2TgynDiPU5TkBAEaoU4s3XFR0ATvFIl7fy6saeEF7uASCCLyFbujf0fq1y0Unzks0AubTvON6LnxLP3cCERbKvbpdRCM7GNLLLyCIkEIRg+M4lXbXH/g9VRS1OMwABqgQeUT/HlxMN6FZXDUHTrqLNyBczXHiWFGKGCkkUYikeWn9Rk8hgOMUVnbyKJDDf++wt4wko+pfZ5IoSTRxqA/wIpgXCHewHNoW+Pub93mvSeBKJ29LEyeJKBIWfbERsE4Cd9JLDB5eQDlVSchhcJ0wZksUKY0qFj53uRyB/yRGkFJzAJHR6yizLhGJHqcrhy1V7GxQ6KYUEMCd88MLhJxBfn0eijd2dA77yiqilV0sWbREuviv/jXuizgCXgVoYXLegB/lc+r7K5suXtrACIRo/XIGBsEShiCUU55AxMAIiSNjQNrghzpuMdDFux4ZI3Vo1Gdn01UDAJM+v9LLy9AoiWPjVkTL5xD0AwDkKLgPjvI8Nk7q4MgXCqqIwgYAcv4i6OHLGRwpdXSsl5GxfgHAprrHbeHHYhke7ZVTsBwAoORMwl74Gh49Wy/YKQ0ASOfei0+FBgBUH6+UMDuYdKf5FQodPkJGREoaCHA8T05lAwcAij/WCBgZC51Bd1oQEokaqyVeBU5VROUAgB3Xn23Uz1itBSWUPlxCxsQ1aQCwqohuZQIDwMcnUjL+btIVdKYFKRRHXiZxpjAyc2AQ9QsAq7pHxIhYIwtdaWEIfXCrxKsAJBN+AYD0s4yjX2/VwpKZq0A/LxEEpaqInADw9idCXD7STeBHf6Gsaok/ypFb0E8VUSkAHDrFt7qnkPAJutEqIZG1xpMS7QFUAWWKVBHZAQCnRtW5/Nze+6QTrZJC6cU2iVfB3iJVRHYAABOJDG/HaNMqLXTXPEC+ZodEEGBYlBMA9h5JSvH3O6ALrRqC8mLimYlJA0BhFVEhAPhX98xx/MRsS7wrJQ1txkMUeOiTBoK2vCqiQgCA7kVAsKcPe69xkGeiqYfJEBmQBgK0bBcCAJ1HAoy+Aey5xkkiLYnHpIEgV0WUA4CE6h7sMfZa4yhApbTrAH37YBxBdQ+neT52xz67N7+YTSDNMEQfH1i8uBt8bO58N96BVBeRsav3oCZJrDiBFSySFzFkFeGjPayanx9c2Fhe7oBDbL/i4d0wE0hSs4jVyupVLLFTwSthyUw9Qf1KcCjmaA09pVvVK4GqVSSWl1WijCu0Sh6OpwGhfY3EauMwqnexFzX91pcsOW/UuxbxXd8VWOm26GuBulcktqH5adfy3bFTkycCNTFK60r22qVbdqPmYhL0ss+QVNSCx2AFcw557s+vywxdzQxnkbxUs5W1o2d3TctSF0eDcSk47jiTWeLZ8IyOVGx18ZdoAtUp+G5BelxNlnN8t/UM9Cx4JnEJm5oIMxPtObjvMQDB8iTCHH9Dn21Z8PRd+M4FlOt14SEYhoSJWJFG8ylrLiINSIQFPkuJ3z87MNvE+HRrWf9t/ax/5lQhTwS/Q7+Lz8BnzQ1YqjH5P29N0rBVv2N5AAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

src/assets/svg/lightcircle.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52 (66869) - http://www.bohemiancoding.com/sketch -->
-    <title>Path</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="check-circle-(1)" transform="translate(1.000000, 0.000000)" stroke="#D9EAFF" stroke-width="2">
-            <path d="M20,10.08 L20,11 C19.9974678,15.4286859 17.082294,19.328213 12.8353524,20.583901 C8.58841086,21.839589 4.02139355,20.1523121 1.61095509,16.4370663 C-0.799483376,12.7218205 -0.479136554,7.86363898 2.39827419,4.49707214 C5.27568494,1.13050531 10.0247126,0.0575252842 14.07,1.86" id="Path"></path>
-        </g>
-    </g>
-</svg>

src/assets/svg/logo_pink.svg

@@ -1,13 +0,0 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g style="mix-blend-mode:darken">
-<path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2967 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z" fill="#FF007A"/>
-<path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z" fill="#FF007A"/>
-<path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z" fill="#FF007A"/>
-<path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z" fill="#FF007A"/>
-<path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91234 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27859C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z" fill="#FF007A"/>
-<path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79008 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z" fill="#FF007A"/>
-<path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7563 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87091 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z" fill="#FF007A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926352 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z" fill="#FF007A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z" fill="#FF007A"/>
-</g>
-</svg>

src/assets/svg/optimism_logo.svg

@@ -1,5 +0,0 @@
-<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="250" cy="250" r="250" fill="#FF0420"/>
-<path d="M177.133 316.446C162.247 316.446 150.051 312.943 140.544 305.938C131.162 298.808 126.471 288.676 126.471 275.541C126.471 272.789 126.784 269.411 127.409 265.408C129.036 256.402 131.35 245.581 134.352 232.947C142.858 198.547 164.812 181.347 200.213 181.347C209.845 181.347 218.476 182.973 226.107 186.225C233.738 189.352 239.742 194.106 244.12 200.486C248.498 206.74 250.688 214.246 250.688 223.002C250.688 225.629 250.375 228.944 249.749 232.947C247.873 244.08 245.621 254.901 242.994 265.408C238.616 282.546 231.048 295.368 220.29 303.874C209.532 312.255 195.147 316.446 177.133 316.446ZM179.76 289.426C186.766 289.426 192.707 287.362 197.586 283.234C202.59 279.106 206.155 272.789 208.281 264.283C211.158 252.524 213.348 242.266 214.849 233.51C215.349 230.883 215.599 228.194 215.599 225.441C215.599 214.058 209.657 208.366 197.774 208.366C190.768 208.366 184.764 210.43 179.76 214.558C174.882 218.687 171.379 225.004 169.253 233.51C167.001 241.891 164.749 252.149 162.498 264.283C161.997 266.784 161.747 269.411 161.747 272.163C161.747 283.672 167.752 289.426 179.76 289.426Z" fill="white"/>
-<path d="M259.303 314.57C257.927 314.57 256.863 314.132 256.113 313.256C255.487 312.255 255.3 311.13 255.55 309.879L281.444 187.914C281.694 186.538 282.382 185.412 283.508 184.536C284.634 183.661 285.822 183.223 287.073 183.223H336.985C350.87 183.223 362.003 186.1 370.384 191.854C378.891 197.609 383.144 205.927 383.144 216.81C383.144 219.937 382.769 223.19 382.018 226.567C378.891 240.953 372.574 251.586 363.067 258.466C353.685 265.346 340.8 268.786 324.413 268.786H299.082L290.451 309.879C290.2 311.255 289.512 312.38 288.387 313.256C287.261 314.132 286.072 314.57 284.822 314.57H259.303ZM325.727 242.892C330.98 242.892 335.546 241.453 339.424 238.576C343.427 235.699 346.054 231.571 347.305 226.192C347.68 224.065 347.868 222.189 347.868 220.563C347.868 216.935 346.805 214.183 344.678 212.307C342.551 210.305 338.924 209.305 333.795 209.305H311.278L304.148 242.892H325.727Z" fill="white"/>
-</svg>

src/assets/svg/swap-arrows.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.80333 4.8863C7.51044 5.17919 7.51044 5.65406 7.80333 5.94696C8.09622 6.23985 8.5711 6.23985 8.86399 5.94696L7.80333 4.8863ZM12.0837 1.66663L12.614 1.1363C12.3211 0.843403 11.8462 0.843403 11.5533 1.1363L12.0837 1.66663ZM15.3033 5.94696C15.5962 6.23985 16.0711 6.23985 16.364 5.94696C16.6569 5.65406 16.6569 5.17919 16.364 4.8863L15.3033 5.94696ZM11.3337 9.99996C11.3337 10.4142 11.6694 10.75 12.0837 10.75C12.4979 10.75 12.8337 10.4142 12.8337 9.99996H11.3337ZM12.1973 15.1136C12.4902 14.8207 12.4902 14.3459 12.1973 14.053C11.9044 13.7601 11.4296 13.7601 11.1367 14.053L12.1973 15.1136ZM7.91699 18.3333L7.38666 18.8636C7.52731 19.0043 7.71808 19.0833 7.91699 19.0833C8.1159 19.0833 8.30667 19.0043 8.44732 18.8636L7.91699 18.3333ZM4.69732 14.053C4.40443 13.7601 3.92956 13.7601 3.63666 14.053C3.34377 14.3459 3.34377 14.8207 3.63666 15.1136L4.69732 14.053ZM8.66699 10.8333C8.66699 10.4191 8.33121 10.0833 7.91699 10.0833C7.50278 10.0833 7.16699 10.4191 7.16699 10.8333H8.66699ZM8.86399 5.94696L12.614 2.19696L11.5533 1.1363L7.80333 4.8863L8.86399 5.94696ZM11.5533 2.19696L15.3033 5.94696L16.364 4.8863L12.614 1.1363L11.5533 2.19696ZM11.3337 1.66663V9.99996H12.8337V1.66663H11.3337ZM11.1367 14.053L7.38666 17.803L8.44732 18.8636L12.1973 15.1136L11.1367 14.053ZM8.44732 17.803L4.69732 14.053L3.63666 15.1136L7.38666 18.8636L8.44732 17.803ZM8.66699 18.3333L8.66699 10.8333H7.16699L7.16699 18.3333H8.66699Z" fill="currentColor"/>
-</svg>

src/assets/svg/switch.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 2.5L12.5 5L10 7.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3 5L12.3333 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.5 13.5L3 11L5.5 8.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.3333 11L3 11" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/svg/tokenlist.svg

@@ -1,30 +0,0 @@
-<svg width="225" height="225" viewBox="0 0 225 225" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M74.8125 190.529C65.7561 190.513 55.5298 183.748 51.9715 175.42L19.9417 100.456C16.3834 92.1277 20.8404 85.39 29.8968 85.4068L111.417 85.5579C120.473 85.5747 130.699 92.3395 134.258 100.668L166.288 175.632C169.846 183.96 165.389 190.697 156.332 190.681L74.8125 190.529Z" fill="#131313"/>
-<path d="M92.1541 164.065C83.0977 164.049 72.8715 157.284 69.3132 148.956L28.3003 52.9672C24.7419 44.6391 29.199 37.9015 38.2554 37.9182L142.638 38.1117C151.695 38.1285 161.921 44.8933 165.479 53.2214L206.492 149.21C210.051 157.538 205.594 164.276 196.537 164.259L92.1541 164.065Z" fill="white"/>
-<path d="M92.1541 164.065C83.0977 164.049 72.8715 157.284 69.3132 148.956L28.3003 52.9672C24.7419 44.6391 29.199 37.9015 38.2554 37.9182L142.638 38.1117C151.695 38.1285 161.921 44.8933 165.479 53.2214L206.492 149.21C210.051 157.538 205.594 164.276 196.537 164.259L92.1541 164.065Z" fill="url(#paint0_radial)"/>
-<path d="M92.1541 164.065C83.0977 164.049 72.8715 157.284 69.3132 148.956L28.3003 52.9672C24.7419 44.6391 29.199 37.9015 38.2554 37.9182L142.638 38.1117C151.695 38.1285 161.921 44.8933 165.479 53.2214L206.492 149.21C210.051 157.538 205.594 164.276 196.537 164.259L92.1541 164.065Z" fill="url(#paint1_radial)"/>
-<path d="M92.1541 164.065C83.0977 164.049 72.8715 157.284 69.3132 148.956L28.3003 52.9672C24.7419 44.6391 29.199 37.9015 38.2554 37.9182L142.638 38.1117C151.695 38.1285 161.921 44.8933 165.479 53.2214L206.492 149.21C210.051 157.538 205.594 164.276 196.537 164.259L92.1541 164.065Z" fill="url(#paint2_radial)"/>
-<path d="M92.1541 164.065C83.0977 164.049 72.8715 157.284 69.3132 148.956L28.3003 52.9672C24.7419 44.6391 29.199 37.9015 38.2554 37.9182L142.638 38.1117C151.695 38.1285 161.921 44.8933 165.479 53.2214L206.492 149.21C210.051 157.538 205.594 164.276 196.537 164.259L92.1541 164.065Z" fill="url(#paint3_radial)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M92.958 165.95C82.7695 165.931 71.265 158.321 67.2619 148.952L26.2489 52.9632C22.2458 43.5941 27.26 36.0143 37.4485 36.0332L141.832 36.2266C152.02 36.2455 163.525 43.8559 167.528 53.225L208.541 149.214C212.544 158.583 207.53 166.163 197.341 166.144L92.958 165.95ZM71.3614 148.959C74.475 156.246 83.4229 162.166 91.3473 162.18L195.73 162.374C203.655 162.388 207.555 156.493 204.441 149.206L163.428 53.2174C160.315 45.9304 151.367 40.0111 143.442 39.9964L39.0592 39.803C31.1349 39.7883 27.2349 45.6837 30.3485 52.9708L71.3614 148.959Z" fill="#131313"/>
-<path d="M68.565 53.3425C81.1781 53.3659 95.4205 62.7875 100.376 74.3862C105.332 85.985 99.1246 95.3687 86.5115 95.3454C73.8984 95.322 59.6559 85.9004 54.7001 74.3016C49.7443 62.7028 55.9518 53.3191 68.565 53.3425Z" fill="#131313"/>
-<path d="M90.6891 104.981C103.302 105.004 117.545 114.425 122.5 126.024C127.456 137.623 121.249 147.007 108.636 146.983C96.0225 146.96 81.7801 137.538 76.8243 125.94C71.8685 114.341 78.076 104.957 90.6891 104.981Z" fill="#131313"/>
-<path d="M147.538 105.142C160.151 105.166 174.394 114.587 179.349 126.186C184.305 137.785 178.098 147.168 165.485 147.145C152.871 147.122 138.629 137.7 133.673 126.101C128.717 114.503 134.925 105.119 147.538 105.142Z" fill="#131313"/>
-<defs>
-<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(134.41 68.3006) rotate(-33.9533) scale(90.6795 83.3208)">
-<stop offset="0.661458" stop-color="#C4FCF8"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.7873 129.218) rotate(-24.1606) scale(213.359 196.045)">
-<stop stop-color="#FF0099" stop-opacity="0.9"/>
-<stop offset="0.770833" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(176.854 148.655) rotate(-53.4908) scale(107.342 98.6309)">
-<stop stop-color="#FFEC43"/>
-<stop offset="0.805707" stop-color="#FFF6A8" stop-opacity="0"/>
-</radialGradient>
-<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(57.5443 53.4752) rotate(20.3896) scale(137.027 125.907)">
-<stop offset="0.125" stop-color="#5886FE" stop-opacity="0.46"/>
-<stop offset="0.673044" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>

src/assets/svg/verified.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.24453 18.0887C3.24331 19.0467 3.47372 19.7558 3.93576 20.2158C4.39658 20.6771 5.09574 20.904 6.03326 20.8967H8.11975C8.20693 20.8934 8.29386 20.9079 8.37521 20.9395C8.45656 20.9711 8.53062 21.019 8.5928 21.0802L10.0779 22.5484C10.7527 23.2226 11.4139 23.5578 12.0617 23.5541C12.7096 23.5504 13.3709 23.2152 14.0456 22.5484L15.5124 21.0802C15.5767 21.0182 15.6529 20.97 15.7365 20.9385C15.82 20.9069 15.9091 20.8927 15.9982 20.8967H18.0719C19.0192 20.8979 19.7251 20.6673 20.1896 20.2048C20.6541 19.7423 20.8864 19.0333 20.8864 18.0777V16.0021C20.8816 15.8222 20.9474 15.6476 21.0697 15.5157L22.5365 14.0475C23.2198 13.3758 23.559 12.7145 23.5541 12.0636C23.5492 11.4127 23.21 10.7508 22.5365 10.0779L21.0697 8.6097C20.9471 8.47802 20.8812 8.30329 20.8864 8.12336V6.04769C20.8851 5.09092 20.6547 4.3819 20.1951 3.92064C19.7355 3.45939 19.0278 3.22875 18.0719 3.22875H15.9982C15.9091 3.23242 15.8201 3.21807 15.7366 3.18653C15.6532 3.155 15.5769 3.10694 15.5124 3.04523L14.0456 1.57703C13.3709 0.902883 12.7096 0.567648 12.0617 0.571319C11.4139 0.574989 10.7527 0.910224 10.0779 1.57703L8.5928 3.04523C8.53043 3.10622 8.45638 3.15393 8.37508 3.18547C8.29377 3.21701 8.20689 3.23173 8.11975 3.22875H6.03326C5.08718 3.22998 4.38373 3.45877 3.92291 3.91513C3.4621 4.3715 3.23168 5.08235 3.23168 6.04769V8.12887C3.23683 8.3088 3.17096 8.48352 3.04833 8.6152L1.58154 10.0834C0.908042 10.7551 0.571289 11.417 0.571289 12.0691C0.571289 12.7213 0.912332 13.3844 1.59439 14.0585L3.06118 15.5267C3.18346 15.6586 3.24928 15.8332 3.24453 16.0131V18.0887Z" fill="currentColor"/>
-<path d="M11.996 15.9909C11.7795 16.3208 11.4599 16.5064 11.0887 16.5064C10.7072 16.5064 10.4083 16.3517 10.1299 15.9909L7.69677 13.0216C7.5215 12.8051 7.42871 12.5783 7.42871 12.3309C7.42871 11.8154 7.82049 11.4133 8.32567 11.4133C8.63497 11.4133 8.8824 11.5267 9.12984 11.8463L11.0475 14.2897L15.1199 7.75329C15.3364 7.40275 15.6147 7.23779 15.924 7.23779C16.4086 7.23779 16.8622 7.57802 16.8622 8.0832C16.8622 8.32033 16.7385 8.56777 16.6045 8.78427L11.996 15.9909Z" fill="white"/>
-</svg>

src/components/About/AboutFooter.tsx

@@ -1,8 +1,12 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events'
-import { BookOpen, Globe, Heart, Twitter } from 'react-feather'
+import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import styled from 'styled-components/macro'
-import { BREAKPOINTS } from 'theme'
+import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
+
+import { DiscordIcon, GithubIcon, TwitterIcon } from './Icons'
+import darkUnicornImgSrc from './images/unicornEmbossDark.png'
+import lightUnicornImgSrc from './images/unicornEmbossLight.png'
 
 const Footer = styled.div`
   display: flex;
@@ -10,80 +14,194 @@ const Footer = styled.div`
   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;
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
-  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-  }
-  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+  @media screen and (min-width: ${BREAKPOINTS.xl}px) {
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 24px;
   }
 `
 
-const FooterLink = styled.a`
+const LinkGroup = styled.div`
   display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  color: ${({ theme }) => theme.textPrimary};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  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: 600;
-  border-radius: 8px;
-  cursor: pointer;
-  text-decoration: none;
-  svg {
-    color: ${({ theme }) => theme.textSecondary};
-    stroke-width: 1.5;
-  }
-  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} border`};
-  &:hover {
-    border: 1px solid ${({ theme }) => theme.textTertiary};
-  }
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
-    font-size: 20px;
-    line-height: 24px;
-  }
+  font-weight: 700;
+`
+
+const ExternalTextLink = styled(ExternalLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
+`
+
+const TextLink = styled(StyledRouterLink)`
+  font-size: 16px;
+  line-height: 20px;
+  color: ${({ theme }) => theme.textSecondary};
 `
 
 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://discord.gg/FCfyBSbCU5" target="_blank" rel="noopener noreferrer">
+          <DiscordIcon size={32} />
+        </SocialLink>
+        <TraceEvent
+          events={[BrowserEvent.onClick]}
+          name={SharedEventName.ELEMENT_CLICKED}
+          element={InterfaceElementName.TWITTER_LINK}
+        >
+          <SocialLink href="https://twitter.com/uniswap" target="_blank" rel="noopener noreferrer">
+            <TwitterIcon size={32} />
+          </SocialLink>
+        </TraceEvent>
+        <SocialLink href="https://github.com/Uniswap" 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>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.SUPPORT_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://support.uniswap.org">
-            <Globe /> Support
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.TWITTER_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://twitter.com/uniswap">
-            <Twitter /> Twitter
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.BLOG_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://uniswap.org/blog">
-            <BookOpen /> Blog
-          </FooterLink>
-        </TraceEvent>
-        <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={ElementName.CAREERS_LINK}>
-          <FooterLink rel="noopener noreferrer" target="_blank" href="https://boards.greenhouse.io/uniswaplabs">
-            <Heart /> Careers
-          </FooterLink>
-        </TraceEvent>
+        <LinkGroup>
+          <LinkGroupTitle>App</LinkGroupTitle>
+          <TextLink to="/swap">Swap</TextLink>
+          <TextLink to="/tokens">Tokens</TextLink>
+          <TextLink to="/nfts">NFTs</TextLink>
+          <TextLink to="/pools">Pools</TextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Protocol</LinkGroupTitle>
+          <ExternalTextLink href="https://uniswap.org/community">Community</ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/governance">Governance</ExternalTextLink>
+          <ExternalTextLink href="https://uniswap.org/developers">Developers</ExternalTextLink>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Company</LinkGroupTitle>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.CAREERS_LINK}
+          >
+            <ExternalTextLink href="https://boards.greenhouse.io/uniswaplabs">Careers</ExternalTextLink>
+          </TraceEvent>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.BLOG_LINK}
+          >
+            <ExternalTextLink href="https://uniswap.org/blog">Blog</ExternalTextLink>
+          </TraceEvent>
+        </LinkGroup>
+        <LinkGroup>
+          <LinkGroupTitle>Get Help</LinkGroupTitle>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.SUPPORT_LINK}
+          >
+            <ExternalTextLink
+              href="https://support.uniswap.org/hc/en-us/requests/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Contact Us
+            </ExternalTextLink>
+          </TraceEvent>
+          <TraceEvent
+            events={[BrowserEvent.onClick]}
+            name={SharedEventName.ELEMENT_CLICKED}
+            element={InterfaceElementName.SUPPORT_LINK}
+          >
+            <ExternalTextLink href="https://support.uniswap.org/hc/en-us">Help Center</ExternalTextLink>
+          </TraceEvent>
+        </LinkGroup>
       </FooterLinks>
-      <Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
+
+      <LogoSectionBottom>
+        <LogoSectionContent />
+      </LogoSectionBottom>
     </Footer>
   )
 }

src/components/About/Card.tsx

@@ -1,9 +1,9 @@
 import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, EventName } from '@uniswap/analytics-events'
+import { BrowserEvent, SharedEventName } 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'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 export enum CardType {
   Primary = 'Primary',
@@ -123,7 +123,7 @@ const Card = ({
 }) => {
   const isDarkMode = useIsDarkMode()
   return (
-    <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={elementName}>
+    <TraceEvent events={[BrowserEvent.onClick]} name={SharedEventName.ELEMENT_CLICKED} element={elementName}>
       <StyledCard
         type={type}
         as={external ? 'a' : Link}