feat: add arbitrum goerli (#5457)

* chore: add ARBITRUM_GOERLI

* chore: add arb goerli custom deployment

* fix: typo

* chore: add arbitrum goerli rpc

* fix: add rpc url for arb goerli

* chore: update providers.ts

* fix: arb goerli everywhere

* fix: declare ARBITRUM_GOERLI as testnet

* chore: add ARBITRUM_GOERLI to theme

* Merge remote-tracking branch 'upstream/main'

* chore: add todos

* fix: patch router

* fix: use bridged goerli usdc

* chore: remove patch

* feat: add usdc to arb goerli default

* chore: bump smart-order-router to 3.4.0

* fix: yarn-deduplicate

* chore: bump sdk-core to 3.1.1

* revert: smart-order-router 2.10.0

* Revert "chore: remove patch"

This reverts commit 84311c1828.

* fix: remove debug log in patch file

* fix: use bridged official Goerli USDC in patch

* fix: revert unnecessary change to yarn.lock

* fix: yarn yarn-deduplicate

* docs: fix comments

* remove patch

* rm rink

* link

---------

Co-authored-by: Vignesh Mohankumar <me@vig.xyz>

.env

@@ -1,5 +1,6 @@
 # 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_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-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"
@@ -10,4 +11,3 @@ REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"
 REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkStaging?platform=web"
 REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_test_DycfESRid31UaSxhI5yWKe1r5E5kKSz"
-REACT_APP_STATSIG_API_KEY="client-1rY92WZGidd2hgW4x1lsZ7afqm1Qfr3sJfH3A5b8eJa"

.env.production

@@ -1,4 +1,6 @@
+# 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_STATSIG_PROXY_URL="https://api.uniswap.org/v1/statsig-proxy"
 REACT_APP_AWS_API_ENDPOINT="https://api.uniswap.org/v1/graphql"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
@@ -9,4 +11,3 @@ 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=false
-REACT_APP_STATSIG_API_KEY="client-1rY92WZGidd2hgW4x1lsZ7afqm1Qfr3sJfH3A5b8eJa"

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

craco.config.cjs

@@ -22,7 +22,7 @@ module.exports = {
   },
   webpack: {
     plugins: [
-      new VanillaExtractPlugin(),
+      new VanillaExtractPlugin({ identifiers: 'short' }),
       new DefinePlugin({
         'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
       }),

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,7 @@ describe('Landing Page', () => {
   })
 
   it('allows navigation to pool', () => {
-    cy.get('#pool-nav-link').click()
+    cy.get(getTestSelector('pool-nav-link')).first().click()
     cy.url().should('include', '/pool')
   })
 })

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

@@ -4,7 +4,7 @@ describe('Send', () => {
     cy.url().should('include', '/swap')
   })
 
-  it('should redirect with url params', () => {
+  it.skip('should redirect with url params', () => {
     cy.visit('/send?outputCurrency=ETH&recipient=bob.argent.xyz')
     cy.url().should('contain', '/swap?outputCurrency=ETH&recipient=bob.argent.xyz')
   })

cypress/e2e/universal-search.test.ts

@@ -35,7 +35,7 @@ describe('Universal search bar', () => {
     cy.contains('UNI is the governance token for Uniswap').should('exist')
   })
 
-  it('should show recent tokens and popular tokens with empty search term', () => {
+  it.skip('should show recent tokens and popular tokens with empty search term', () => {
     cy.get('[data-cy="magnifying-icon"]')
       .parent()
       .then(($navIcon) => {

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 {

package.json

@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.2",
-    "@coinbase/wallet-sdk": "^3.3.0",
+    "@coinbase/wallet-sdk": "^3.6.4",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@graphql-codegen/cli": "^2.15.0",
@@ -133,17 +133,17 @@
     "@reduxjs/toolkit": "^1.6.1",
     "@sentry/react": "^7.29.0",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@uniswap/analytics": "^1.3.0",
-    "@uniswap/analytics-events": "^2.3.0",
-    "@uniswap/conedison": "^1.3.0",
+    "@uniswap/analytics": "^1.3.1",
+    "@uniswap/analytics-events": "^2.4.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.0",
+    "@uniswap/smart-order-router": "^3.6.0",
     "@uniswap/token-lists": "^1.0.0-beta.30",
     "@uniswap/universal-router-sdk": "^1.3.6",
     "@uniswap/v2-core": "1.0.0",
@@ -152,7 +152,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.29.3",
+    "@uniswap/widgets": "^2.43.2",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",
@@ -181,7 +181,7 @@
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.2.0",
     "d3": "^7.6.1",
-    "ethers": "^5.1.4",
+    "ethers": "^5.7.2",
     "firebase": "^9.1.3",
     "focus-visible": "^5.2.0",
     "get-graphql-schema": "^2.1.2",

src/components/About/images/discord.svg

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

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

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

src/components/ErrorBoundary/index.tsx

@@ -1,10 +1,13 @@
 import { Trans } from '@lingui/macro'
 import * as Sentry from '@sentry/react'
+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { SwapEventName } from '@uniswap/analytics-events'
 import { ButtonLight, SmallButtonPrimary } from 'components/Button'
 import { ChevronUpIcon } from 'nft/components/icons'
 import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
 import { Copy } from 'react-feather'
+import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { isSentryEnabled } from 'utils/env'
 
@@ -217,13 +220,19 @@ const updateServiceWorkerInBackground = async () => {
 }
 
 export default function ErrorBoundary({ children }: PropsWithChildren): JSX.Element {
+  const { pathname } = useLocation()
   return (
     <Sentry.ErrorBoundary
       fallback={({ error, eventId }) => <Fallback error={error} eventId={eventId} />}
       beforeCapture={(scope) => {
         scope.setLevel('fatal')
       }}
-      onError={updateServiceWorkerInBackground}
+      onError={(error) => {
+        updateServiceWorkerInBackground()
+        if (pathname === '/swap') {
+          sendAnalyticsEvent(SwapEventName.SWAP_ERROR, { error })
+        }
+      }}
     >
       {children}
     </Sentry.ErrorBoundary>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,6 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { GqlRoutingVariant, useGqlRoutingFlag } from 'featureFlags/flags/gqlRouting'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
+import { NftGraphqlVariant, useNftGraphqlFlag } from 'featureFlags/flags/nftlGraphql'
 import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { Permit2Variant, usePermit2Flag } from 'featureFlags/flags/permit2'
 import { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
@@ -212,12 +212,6 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.permit2}
         label="Permit 2 / Universal Router"
       />
-      <FeatureFlagOption
-        variant={NftListV2Variant}
-        value={useNftListV2Flag()}
-        featureFlag={FeatureFlag.nftListV2}
-        label="NFT Listing Page v2"
-      />
       <FeatureFlagOption
         variant={PayWithAnyTokenVariant}
         value={usePayWithAnyTokenFlag()}
@@ -236,6 +230,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.gqlRouting}
         label="GraphQL NFT Routing"
       />
+      <FeatureFlagOption
+        variant={NftGraphqlVariant}
+        value={useNftGraphqlFlag()}
+        featureFlag={FeatureFlag.nftGraphql}
+        label="Migrate NFT read endpoints to GQL"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/FiatOnrampModal/index.tsx

@@ -10,8 +10,10 @@ import { CustomLightSpinner, ThemedText } from 'theme'
 import Circle from '../../assets/images/blue-loader.svg'
 import Modal from '../Modal'
 
-const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.white};
+const MOONPAY_DARK_BACKGROUND = '#1c1c1e'
+const Wrapper = styled.div<{ isDarkMode: boolean }>`
+  // #1c1c1e is the background color for the darkmode moonpay iframe as of 2/16/2023
+  background-color: ${({ isDarkMode, theme }) => (isDarkMode ? MOONPAY_DARK_BACKGROUND : theme.white)};
   border-radius: 20px;
   box-shadow: ${({ theme }) => theme.deepShadow};
   display: flex;
@@ -29,8 +31,9 @@ const ErrorText = styled(ThemedText.BodyPrimary)`
   text-align: center;
   width: 90%;
 `
-const StyledIframe = styled.iframe`
-  background-color: ${({ theme }) => theme.white};
+const StyledIframe = styled.iframe<{ isDarkMode: boolean }>`
+  // #1c1c1e is the background color for the darkmode moonpay iframe as of 2/16/2023
+  background-color: ${({ isDarkMode, theme }) => (isDarkMode ? MOONPAY_DARK_BACKGROUND : theme.white)};
   border-radius: 12px;
   bottom: 0;
   left: 0;
@@ -123,7 +126,7 @@ export default function FiatOnrampModal() {
 
   return (
     <Modal isOpen={fiatOnrampModalOpen} onDismiss={closeModal} maxHeight={720}>
-      <Wrapper data-testid="fiat-onramp-modal">
+      <Wrapper data-testid="fiat-onramp-modal" isDarkMode={isDarkMode}>
         {error ? (
           <>
             <ThemedText.MediumHeader>
@@ -138,7 +141,12 @@ export default function FiatOnrampModal() {
         ) : loading ? (
           <StyledSpinner src={Circle} alt="loading spinner" size="90px" />
         ) : (
-          <StyledIframe src={signedIframeUrl ?? ''} frameBorder="0" title="fiat-onramp-iframe" />
+          <StyledIframe
+            src={signedIframeUrl ?? ''}
+            frameBorder="0"
+            title="fiat-onramp-iframe"
+            isDarkMode={isDarkMode}
+          />
         )}
       </Wrapper>
     </Modal>

src/components/Identicon/StatusIcon.tsx

@@ -1,7 +1,13 @@
+import { getWalletMeta } from '@uniswap/conedison/provider/meta'
 import { useWeb3React } from '@web3-react/core'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { Unicon } from 'components/Unicon'
 import { ConnectionType } from 'connection'
 import useENSAvatar from 'hooks/useENSAvatar'
+import ms from 'ms.macro'
+import { PropsWithChildren } from 'react'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
@@ -50,14 +56,53 @@ const Socks = () => {
   )
 }
 
-const useIcon = (connectionType: ConnectionType) => {
-  const { account } = useWeb3React()
+const Divider = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
+  margin: 12px 0;
+`
+
+function UniconTooltip({ children, enabled }: PropsWithChildren<{ enabled?: boolean }>) {
+  return (
+    <MouseoverTooltip
+      timeout={ms`3s`}
+      offsetY={8}
+      disableHover={!enabled}
+      text={
+        // TODO(cartcrom): add Learn More link when unicon microsite is polished
+        <>
+          <ThemedText.SubHeaderSmall color="textPrimary" paddingTop="4px">
+            This is your Unicon
+          </ThemedText.SubHeaderSmall>
+          <Divider />
+          <ThemedText.Caption paddingBottom="4px">
+            Unicons are avatars for your wallet, generated from your address.
+          </ThemedText.Caption>
+        </>
+      }
+      placement="bottom"
+    >
+      <div>{children}</div>
+    </MouseoverTooltip>
+  )
+}
+
+const useIcon = (connectionType: ConnectionType, size?: number, enableInfotips?: boolean) => {
+  const { account, provider } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
+  const isUniswapWallet = Boolean(provider && getWalletMeta(provider)?.name === 'Uniswap Wallet')
+
+  if (!account) return null
 
   if (avatar || connectionType === ConnectionType.INJECTED) {
     return <Identicon />
   } else if (connectionType === ConnectionType.WALLET_CONNECT) {
-    return <img src={WalletConnectIcon} alt="WalletConnect" />
+    return isUniswapWallet ? (
+      <UniconTooltip enabled={enableInfotips}>
+        <Unicon address={account} size={size} />
+      </UniconTooltip>
+    ) : (
+      <img src={WalletConnectIcon} alt="WalletConnect" />
+    )
   } else if (connectionType === ConnectionType.COINBASE_WALLET) {
     return <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
   }
@@ -65,9 +110,17 @@ const useIcon = (connectionType: ConnectionType) => {
   return undefined
 }
 
-export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
+export default function StatusIcon({
+  connectionType,
+  size,
+  enableInfotips,
+}: {
+  connectionType: ConnectionType
+  size?: number
+  enableInfotips?: boolean
+}) {
   const hasSocks = useHasSocks()
-  const icon = useIcon(connectionType)
+  const icon = useIcon(connectionType, size, enableInfotips)
 
   return (
     <IconWrapper size={size ?? 16}>

src/components/NavBar/MenuDropdown.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -127,7 +127,7 @@ export const MenuDropdown = () => {
   return (
     <>
       <Box position="relative" ref={ref}>
-        <NavIcon isActive={isOpen} onClick={toggleOpen}>
+        <NavIcon isActive={isOpen} onClick={toggleOpen} label={isOpen ? t`Show resources` : t`Hide resources`}>
           <EllipsisIcon viewBox="0 0 20 20" width={24} height={24} />
         </NavIcon>
 

src/components/NavBar/NavIcon.tsx

@@ -1,3 +1,4 @@
+import { t } from '@lingui/macro'
 import { Box } from 'nft/components/Box'
 import { ReactNode } from 'react'
 
@@ -6,10 +7,11 @@ import * as styles from './NavIcon.css'
 interface NavIconProps {
   children: ReactNode
   isActive?: boolean
+  label?: string
   onClick: () => void
 }
 
-export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
+export const NavIcon = ({ children, isActive, label = t`Navigation button`, onClick }: NavIconProps) => {
   return (
     <Box
       as="button"
@@ -18,6 +20,7 @@ export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
       onClick={onClick}
       height="40"
       width="40"
+      aria-label={label}
     >
       {children}
     </Box>

src/components/NavBar/SearchBar.tsx

@@ -214,7 +214,7 @@ export const SearchBar = () => {
         </Box>
       </Box>
       {isMobileOrTablet && (
-        <NavIcon onClick={toggleOpen}>
+        <NavIcon onClick={toggleOpen} label={placeholderText}>
           <NavMagnifyingGlassIcon />
         </NavIcon>
       )}

src/components/NavBar/SearchBarDropdown.tsx

@@ -2,7 +2,9 @@ import { Trans } from '@lingui/macro'
 import { useTrace } from '@uniswap/analytics'
 import { InterfaceSectionName, NavBarSearchTypes } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
-import { SafetyLevel } from 'graphql/data/__generated__/types-and-hooks'
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
+import { HistoryDuration, SafetyLevel } from 'graphql/data/__generated__/types-and-hooks'
+import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
 import { SearchToken } from 'graphql/data/SearchTokens'
 import useTrendingTokens from 'graphql/data/TrendingTokens'
 import { useIsNftPage } from 'hooks/useIsNftPage'
@@ -56,7 +58,7 @@ const SearchBarDropdownSection = ({
       </Row>
       <Column gap="12">
         {suggestions.map((suggestion, index) =>
-          isLoading ? (
+          isLoading || !suggestion ? (
             <SkeletonRow key={index} />
           ) : isCollection(suggestion) ? (
             <CollectionRow
@@ -123,6 +125,7 @@ export const SearchBarDropdown = ({
 
   const { pathname } = useLocation()
   const isNFTPage = useIsNftPage()
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
   const isTokenPage = pathname.includes('/tokens')
   const [resultsState, setResultsState] = useState<ReactNode>()
 
@@ -131,24 +134,25 @@ export const SearchBarDropdown = ({
     () => fetchTrendingCollections({ volumeType: 'eth', timePeriod: 'ONE_DAY' as TimePeriod, size: 3 })
   )
 
-  const trendingCollections = useMemo(
-    () =>
-      trendingCollectionResults
-        ? trendingCollectionResults
-            .map((collection) => ({
-              ...collection,
-              collectionAddress: collection.address,
-              floorPrice: formatEthPrice(collection.floor?.toString()),
-              stats: {
-                total_supply: collection.totalSupply,
-                one_day_change: collection.floorChange,
-                floor_price: formatEthPrice(collection.floor?.toString()),
-              },
-            }))
-            .slice(0, isNFTPage ? 3 : 2)
-        : [...Array<GenieCollection>(isNFTPage ? 3 : 2)],
-    [isNFTPage, trendingCollectionResults]
-  )
+  const { data: gqlData, loading } = useTrendingCollections(3, HistoryDuration.Day)
+
+  const trendingCollections = useMemo(() => {
+    const gatedTrendingCollections = isNftGraphqlEnabled ? gqlData : trendingCollectionResults
+    return gatedTrendingCollections && (!isNftGraphqlEnabled || !loading)
+      ? gatedTrendingCollections
+          .map((collection) => ({
+            ...collection,
+            collectionAddress: collection.address,
+            floorPrice: isNftGraphqlEnabled ? collection.floor : formatEthPrice(collection.floor?.toString()),
+            stats: {
+              total_supply: collection.totalSupply,
+              one_day_change: collection.floorChange,
+              floor_price: isNftGraphqlEnabled ? collection.floor : formatEthPrice(collection.floor?.toString()),
+            },
+          }))
+          .slice(0, isNFTPage ? 3 : 2)
+      : [...Array<GenieCollection>(isNFTPage ? 3 : 2)]
+  }, [gqlData, isNFTPage, isNftGraphqlEnabled, loading, trendingCollectionResults])
 
   const { data: trendingTokenData } = useTrendingTokens(useWeb3React().chainId)
 

src/components/NavBar/SuggestionRow.tsx

@@ -18,8 +18,9 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
 
-import { getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
+import { DeltaText, getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
 import { useAddRecentlySearchedAsset } from './RecentlySearchedAssets'
 import * as styles from './SearchBar.css'
 
@@ -28,12 +29,6 @@ const PriceChangeContainer = styled.div`
   align-items: center;
 `
 
-const PriceChangeText = styled.span<{ isNegative: boolean }>`
-  font-size: 14px;
-  line-height: 20px;
-  color: ${({ theme, isNegative }) => (isNegative ? theme.accentFailure : theme.accentSuccess)};
-`
-
 const ArrowCell = styled.span`
   padding-top: 5px;
   padding-right: 3px;
@@ -191,18 +186,20 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
       </Row>
 
       <Column className={styles.suggestionSecondaryContainer}>
-        {token.market?.price?.value && (
-          <Row gap="4">
-            <Box className={styles.primaryText}>{formatUSDPrice(token.market.price.value)}</Box>
-          </Row>
-        )}
-        {token.market?.pricePercentChange?.value && (
-          <PriceChangeContainer>
-            <ArrowCell>{arrow}</ArrowCell>
-            <PriceChangeText isNegative={token.market.pricePercentChange.value < 0}>
-              {Math.abs(token.market.pricePercentChange.value).toFixed(2)}%
-            </PriceChangeText>
-          </PriceChangeContainer>
+        {!!token.market?.price?.value && (
+          <>
+            <Row gap="4">
+              <Box className={styles.primaryText}>{formatUSDPrice(token.market.price.value)}</Box>
+            </Row>
+            <PriceChangeContainer>
+              <ArrowCell>{arrow}</ArrowCell>
+              <ThemedText.BodySmall>
+                <DeltaText delta={token.market?.pricePercentChange?.value}>
+                  {Math.abs(token.market?.pricePercentChange?.value ?? 0).toFixed(2)}%
+                </DeltaText>
+              </ThemedText.BodySmall>
+            </PriceChangeContainer>
+          </>
         )}
       </Column>
     </Link>

src/components/NavBar/index.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
@@ -72,7 +71,7 @@ export const PageTabs = () => {
       <MenuItem dataTestId="nft-nav" href="/nfts" isActive={isNftPage}>
         <Trans>NFTs</Trans>
       </MenuItem>
-      <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>
+      <MenuItem href="/pool" dataTestId="pool-nav-link" isActive={isPoolActive}>
         <Trans>Pool</Trans>
       </MenuItem>
     </>
@@ -82,7 +81,6 @@ export const PageTabs = () => {
 const Navbar = () => {
   const isNftPage = useIsNftPage()
   const sellPageState = useProfilePageState((state) => state.state)
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const navigate = useNavigate()
 
   return (
@@ -124,7 +122,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {isNftPage && (!isNftListV2 || sellPageState !== ProfilePageStateType.LISTING) && <Bag />}
+              {isNftPage && sellPageState !== ProfilePageStateType.LISTING && <Bag />}
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />

src/components/NetworkAlert/NetworkAlert.tsx

@@ -32,7 +32,7 @@ const SHOULD_SHOW_ALERT = {
   [SupportedChainId.OPTIMISM]: true,
   [SupportedChainId.OPTIMISM_GOERLI]: true,
   [SupportedChainId.ARBITRUM_ONE]: true,
-  [SupportedChainId.ARBITRUM_RINKEBY]: true,
+  [SupportedChainId.ARBITRUM_GOERLI]: true,
   [SupportedChainId.POLYGON]: true,
   [SupportedChainId.POLYGON_MUMBAI]: true,
   [SupportedChainId.CELO]: true,
@@ -59,7 +59,7 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
       'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.04) 0%, rgba(235, 0, 255, 0.01 96%)',
     [SupportedChainId.ARBITRUM_ONE]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)',
-    [SupportedChainId.ARBITRUM_RINKEBY]:
+    [SupportedChainId.ARBITRUM_GOERLI]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)',
   },
   light: {
@@ -77,7 +77,7 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
       'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
     [SupportedChainId.ARBITRUM_ONE]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
-    [SupportedChainId.ARBITRUM_RINKEBY]:
+    [SupportedChainId.ARBITRUM_GOERLI]:
       'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
   },
 }
@@ -137,7 +137,7 @@ const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
   [SupportedChainId.OPTIMISM]: '#ff3856',
   [SupportedChainId.OPTIMISM_GOERLI]: '#ff3856',
   [SupportedChainId.ARBITRUM_ONE]: '#0490ed',
-  [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed',
+  [SupportedChainId.ARBITRUM_GOERLI]: '#0490ed',
 }
 
 function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {

src/components/Tokens/TokenDetails/About.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { SupportedChainId } from '@uniswap/sdk-core'
 import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components/macro'

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/macro'
 import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
-import { Currency, SupportedChainId } from '@uniswap/sdk-core'
+import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
 import { isSupportedChain } from 'constants/chains'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -3,11 +3,10 @@ import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { NATIVE_CHAIN_ID } from 'constants/tokens'
-import { FeatureGate } from 'featureFlags/flags/featureFlags'
+import { useDummyGateEnabled } from 'featureFlags/flags/dummyFeatureGate'
 import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
-import { useGate } from 'statsig-react'
 import styled from 'styled-components/macro'
 import { StyledInternalLink } from 'theme'
 
@@ -89,7 +88,7 @@ export default function MobileBalanceSummaryFooter({ token }: { token: Currency
   const formattedBalance = formatCurrencyAmount(balance, NumberType.TokenNonTx)
   const formattedUsdValue = formatCurrencyAmount(useStablecoinValue(balance), NumberType.FiatTokenStats)
   const chain = CHAIN_ID_TO_BACKEND_NAME[token.chainId].toLowerCase()
-  const { value: isDummyGateFlagEnabled } = useGate(FeatureGate.DUMMY)
+  const isDummyGateFlagEnabled = useDummyGateEnabled()
 
   return (
     <Wrapper>

src/components/Unicon/Emblem.ts

@@ -0,0 +1,626 @@
+export const svgPaths: React.SVGProps<SVGPathElement>[][] = [
+  [
+    {
+      d: 'M0 8C0 3.58172 3.58172 0 8 0V4C5.79086 4 4 5.79086 4 8H0ZM8 8L4 8C4 10.2091 5.79086 12 8 12V16C12.4183 16 16 12.4183 16 8H12C12 5.79086 10.2091 4 8 4L8 8ZM8 8L12 8C12 10.2091 10.2091 12 8 12L8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M6.61962 1.57177C7.38198 0.809409 8.61802 0.80941 9.38038 1.57177L14.4282 6.61962C15.1906 7.38198 15.1906 8.61802 14.4282 9.38038L9.38038 14.4282C8.61802 15.1906 7.38198 15.1906 6.61962 14.4282L1.57177 9.38038C0.809409 8.61802 0.80941 7.38198 1.57177 6.61962L6.61962 1.57177Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 4.33253L4.33253 8L8 11.6675L11.6675 8L8 4.33253ZM9.38038 1.57177C8.61802 0.80941 7.38198 0.809409 6.61962 1.57177L1.57177 6.61962C0.80941 7.38198 0.809409 8.61802 1.57177 9.38038L6.61962 14.4282C7.38198 15.1906 8.61802 15.1906 9.38038 14.4282L14.4282 9.38038C15.1906 8.61802 15.1906 7.38198 14.4282 6.61962L9.38038 1.57177Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z',
+    },
+    {
+      d: 'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4 5C4 4.44772 4.44772 4 5 4H11C11.5523 4 12 4.44772 12 5V11C12 11.5523 11.5523 12 11 12H5C4.44772 12 4 11.5523 4 11V5Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M16 8C12.2937 6.62854 9.37146 3.70632 8 0C6.62854 3.70632 3.70632 6.62854 0 8C3.70632 9.37146 6.62854 12.2937 8 16C9.37146 12.2937 12.2937 9.37146 16 8ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M9.38038 1.57177C8.61802 0.80941 7.38198 0.809409 6.61962 1.57177L1.57177 6.61962C0.80941 7.38198 0.809409 8.61802 1.57177 9.38038L6.61962 14.4282C7.38198 15.1906 8.61802 15.1906 9.38038 14.4282L14.4282 9.38038C15.1906 8.61802 15.1906 7.38198 14.4282 6.61962L9.38038 1.57177ZM8 11.1716C9.65685 11.1716 11 9.82842 11 8.17157C11 6.51472 9.65685 5.17157 8 5.17157C6.34315 5.17157 5 6.51472 5 8.17157C5 9.82842 6.34315 11.1716 8 11.1716Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M15 2C15 1.44772 14.5523 1 14 1H9C8.44772 1 8 1.44772 8 2V8H14C14.5523 8 15 7.55228 15 7V2Z',
+    },
+    {
+      d: 'M8 8H2C1.44771 8 1 8.44772 1 9V14C1 14.5523 1.44772 15 2 15H7C7.55228 15 8 14.5523 8 14V8Z',
+    },
+  ],
+  [
+    {
+      d: 'M0 8C0 3.58172 3.58172 0 8 0L8 4.41421C7.74408 4.41421 7.48816 4.51184 7.29289 4.70711L4.70711 7.29289C4.51184 7.48816 4.41421 7.74408 4.41421 8L0 8ZM8 8H4.41421C4.41421 8.25592 4.51184 8.51184 4.70711 8.70711L7.29289 11.2929C7.48816 11.4882 7.74408 11.5858 8 11.5858L8 16C12.4183 16 16 12.4183 16 8L11.5858 8C11.5858 7.74408 11.4882 7.48816 11.2929 7.29289L8.70711 4.70711C8.51184 4.51184 8.25592 4.41421 8 4.41421L8 8ZM8 8H11.5858C11.5858 8.25592 11.4882 8.51184 11.2929 8.70711L8.70711 11.2929C8.51184 11.4882 8.25592 11.5858 8 11.5858L8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V8H2C1.44772 8 1 7.55228 1 7V2Z',
+    },
+    {
+      d: 'M8 8H14C14.5523 8 15 8.44772 15 9V14C15 14.5523 14.5523 15 14 15H9C8.44772 15 8 14.5523 8 14V8Z',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 2.34315C10.5327 -0.781049 5.46734 -0.781049 2.34315 2.34315L8 8L2.34315 13.6569C5.46734 16.781 10.5327 16.781 13.6569 13.6569L8 8L13.6569 2.34315Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 0C3.58172 0 0 3.58172 0 8L8 8L8 16C12.4183 16 16 12.4183 16 8L8 8L8 0Z',
+    },
+  ],
+  [
+    {
+      d: 'M16 8C12.2937 6.62854 9.37146 3.70632 8 0C6.62854 3.70632 3.70632 6.62854 0 8C3.70632 9.37146 6.62854 12.2937 8 16C9.37146 12.2937 12.2937 9.37146 16 8ZM11 8L8 5L5 8L8 11L11 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M2 4.4C2 3.07452 3.07452 2 4.4 2H11.6C12.9255 2 14 3.07452 14 4.4V11.6C14 12.9255 12.9255 14 11.6 14H4.4C3.07452 14 2 12.9255 2 11.6V4.4Z',
+    },
+  ],
+  [
+    {
+      d: 'M5.17158 2.34315C4.39053 1.5621 3.1242 1.5621 2.34315 2.34315C1.5621 3.12419 1.5621 4.39052 2.34315 5.17157L4.46447 7.29289C4.85499 7.68342 4.85499 8.31658 4.46447 8.70711L2.34315 10.8284C1.5621 11.6095 1.5621 12.8758 2.34315 13.6569C3.1242 14.4379 4.39053 14.4379 5.17158 13.6569L7.2929 11.5355C7.68342 11.145 8.31659 11.145 8.70711 11.5355L10.8284 13.6569C11.6095 14.4379 12.8758 14.4379 13.6569 13.6569C14.4379 12.8758 14.4379 11.6095 13.6569 10.8284L11.5355 8.70711C11.145 8.31658 11.145 7.68342 11.5355 7.29289L13.6569 5.17157C14.4379 4.39052 14.4379 3.12419 13.6569 2.34315C12.8758 1.5621 11.6095 1.5621 10.8284 2.34315L8.70711 4.46447C8.31659 4.85499 7.68342 4.85499 7.2929 4.46447L5.17158 2.34315Z',
+    },
+  ],
+  [
+    {
+      d: 'M7 2C7 1.44772 7.44772 1 8 1C8.55228 1 9 1.44772 9 2V5C9 5.55228 8.55228 6 8 6C7.44772 6 7 5.55228 7 5V2Z',
+    },
+    {
+      d: 'M7 11C7 10.4477 7.44772 10 8 10C8.55228 10 9 10.4477 9 11V14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14V11Z',
+    },
+    {
+      d: 'M14 7C14.5523 7 15 7.44772 15 8C15 8.55228 14.5523 9 14 9H11C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7H14Z',
+    },
+    {
+      d: 'M5 7C5.55228 7 6 7.44772 6 8C6 8.55228 5.55228 9 5 9H2C1.44772 9 1 8.55228 1 8C1 7.44772 1.44772 7 2 7H5Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.9585 8.81981C15.9166 9.23189 15.5183 9.49613 15.112 9.41574L11.7175 8.74421C10.9132 8.5851 10.4734 9.64707 11.1547 10.1032L14.0293 12.0277C14.3735 12.2581 14.4683 12.7266 14.2068 13.0478C13.861 13.4725 13.4725 13.861 13.0478 14.2068C12.7266 14.4683 12.2581 14.3735 12.0277 14.0293L10.1032 11.1547C9.64707 10.4734 8.5851 10.9132 8.74421 11.7175L9.41574 15.112C9.49613 15.5183 9.23189 15.9166 8.81981 15.9585C8.55027 15.9859 8.27678 16 8 16C7.72322 16 7.44973 15.9859 7.18019 15.9585C6.76811 15.9166 6.50387 15.5183 6.58426 15.112L7.25579 11.7175C7.4149 10.9132 6.35293 10.4734 5.89682 11.1547L3.97232 14.0293C3.74188 14.3735 3.27344 14.4683 2.95224 14.2068C2.52755 13.861 2.13902 13.4725 1.79322 13.0478C1.53168 12.7266 1.62651 12.2581 1.9707 12.0277L4.84532 10.1032C5.52661 9.64707 5.08681 8.5851 4.28253 8.74421L0.888013 9.41574C0.481675 9.49613 0.0834376 9.23189 0.0414916 8.81981C0.0140555 8.55027 0 8.27678 0 8C0 7.72322 0.0140554 7.44973 0.0414915 7.18019C0.0834375 6.76811 0.481675 6.50387 0.888013 6.58426L4.28253 7.25579C5.08681 7.4149 5.52661 6.35293 4.84532 5.89683L1.9707 3.97232C1.6265 3.74188 1.53168 3.27344 1.79322 2.95224C2.13902 2.52755 2.52755 2.13902 2.95224 1.79322C3.27344 1.53168 3.74188 1.62651 3.97231 1.9707L5.89683 4.84533C6.35293 5.52661 7.4149 5.08681 7.25579 4.28253L6.58426 0.888013C6.50387 0.481675 6.76811 0.0834376 7.18019 0.0414915C7.44973 0.0140555 7.72322 0 8 0C8.27678 0 8.55027 0.0140554 8.81981 0.0414915C9.23189 0.0834375 9.49613 0.481675 9.41574 0.888013L8.74421 4.28253C8.5851 5.08681 9.64707 5.52661 10.1032 4.84532L12.0277 1.9707C12.2581 1.6265 12.7266 1.53168 13.0478 1.79322C13.4725 2.13902 13.861 2.52755 14.2068 2.95223C14.4683 3.27344 14.3735 3.74188 14.0293 3.97231L11.1547 5.89683C10.4734 6.35294 10.9132 7.4149 11.7175 7.25579L15.112 6.58426C15.5183 6.50387 15.9166 6.76811 15.9585 7.18019C15.9859 7.44973 16 7.72322 16 8C16 8.27678 15.9859 8.55027 15.9585 8.81981Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M10 2C10 0.895431 9.10457 0 8 0C6.89543 0 6 0.89543 6 2V5C6 5.55228 5.55228 6 5 6H2C0.895431 6 0 6.89543 0 8C0 9.10457 0.895431 10 2 10H5C5.55228 10 6 10.4477 6 11V14C6 15.1046 6.89543 16 8 16C9.10457 16 10 15.1046 10 14V11C10 10.4477 10.4477 10 11 10H14C15.1046 10 16 9.10457 16 8C16 6.89543 15.1046 6 14 6H11C10.4477 6 10 5.55228 10 5V2Z',
+    },
+  ],
+  [
+    {
+      d: 'M12 1.07026C9.60879 2.4535 8 5.03887 8 8V0C5.03887 0 2.4535 1.60879 1.07026 4C2.4535 6.39121 5.03887 8 8 8H0C0 10.9611 1.6088 13.5465 4 14.9297C6.39121 13.5465 8 10.9611 8 8L8 16C10.9611 16 13.5465 14.3912 14.9297 12C13.5469 9.60955 10.9628 8.00101 8.00279 8H16C16 5.03887 14.3912 2.4535 12 1.07026Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.9831 8.52372L12.9894 8.33026C12.9964 8.22148 13 8.11137 13 8C13 7.88863 12.9964 7.77852 12.9894 7.66974L15.9831 7.47627C15.9943 7.64941 16 7.82404 16 8C16 8.17596 15.9943 8.35059 15.9831 8.52372ZM15.8477 6.4387L12.9048 7.02091C12.8622 6.80567 12.8058 6.59565 12.7366 6.39168L15.5774 5.42754C15.6887 5.75556 15.7794 6.09313 15.8477 6.4387ZM15.1766 4.46092L12.487 5.78982C12.3902 5.59393 12.2808 5.40497 12.1596 5.22403L14.6525 3.55507C14.8461 3.84425 15.0214 4.14676 15.1766 4.46092ZM14.0148 2.72519L11.7601 4.70411C11.6156 4.5395 11.4605 4.3844 11.2959 4.23992L13.2748 1.98518C13.5372 2.21551 13.7845 2.46275 14.0148 2.72519ZM12.4449 1.34748L10.776 3.84038C10.595 3.71924 10.4061 3.60981 10.2102 3.51302L11.5391 0.823408C11.8532 0.978631 12.1557 1.15388 12.4449 1.34748ZM10.5725 0.422581L9.60832 3.26343C9.40435 3.19421 9.19433 3.13782 8.97909 3.09524L9.5613 0.152272C9.90687 0.220637 10.2444 0.311259 10.5725 0.422581ZM8.52373 0.0168691L8.33026 3.01062C8.22148 3.0036 8.11137 3 8 3C7.88863 3 7.77852 3.0036 7.66974 3.01062L7.47627 0.0168691C7.64941 0.00568084 7.82404 0 8 0C8.17596 0 8.35059 0.00568083 8.52373 0.0168691ZM6.4387 0.152272L7.02091 3.09524C6.80567 3.13782 6.59565 3.19421 6.39168 3.26343L5.42754 0.422581C5.75556 0.311259 6.09313 0.220638 6.4387 0.152272ZM4.46092 0.823408L5.78982 3.51302C5.59393 3.60981 5.40497 3.71925 5.22403 3.84038L3.55507 1.34748C3.84425 1.15388 4.14676 0.978631 4.46092 0.823408ZM2.72519 1.98518L4.70411 4.23992C4.5395 4.3844 4.3844 4.5395 4.23992 4.70412L1.98517 2.7252C2.21551 2.46275 2.46275 2.21551 2.72519 1.98518ZM1.34748 3.55508L3.84038 5.22403C3.71924 5.40497 3.60981 5.59393 3.51302 5.78982L0.823408 4.46092C0.978631 4.14676 1.15388 3.84425 1.34748 3.55508ZM0.422581 5.42754L3.26343 6.39168C3.19421 6.59565 3.13782 6.80567 3.09524 7.02091L0.152272 6.4387C0.220637 6.09313 0.311259 5.75556 0.422581 5.42754ZM0.0168691 7.47627C0.00568083 7.64941 0 7.82404 0 8C0 8.17596 0.00568084 8.35059 0.0168691 8.52373L3.01062 8.33026C3.0036 8.22148 3 8.11137 3 8C3 7.88863 3.0036 7.77852 3.01062 7.66974L0.0168691 7.47627ZM0.152272 9.5613L3.09524 8.97909C3.13782 9.19433 3.19421 9.40435 3.26343 9.60832L0.422581 10.5725C0.311259 10.2444 0.220637 9.90687 0.152272 9.5613ZM0.823408 11.5391L3.51302 10.2102C3.60981 10.4061 3.71925 10.595 3.84038 10.776L1.34748 12.4449C1.15388 12.1557 0.978631 11.8532 0.823408 11.5391ZM1.98518 13.2748L4.23992 11.2959C4.3844 11.4605 4.5395 11.6156 4.70412 11.7601L2.7252 14.0148C2.46275 13.7845 2.21551 13.5372 1.98518 13.2748ZM3.55508 14.6525L5.22403 12.1596C5.40497 12.2808 5.59393 12.3902 5.78982 12.487L4.46092 15.1766C4.14676 15.0214 3.84425 14.8461 3.55508 14.6525ZM5.42754 15.5774L6.39168 12.7366C6.59565 12.8058 6.80567 12.8622 7.02091 12.9048L6.4387 15.8477C6.09313 15.7794 5.75556 15.6887 5.42754 15.5774ZM7.47628 15.9831L7.66974 12.9894C7.77852 12.9964 7.88863 13 8 13C8.11137 13 8.22148 12.9964 8.33026 12.9894L8.52373 15.9831C8.35059 15.9943 8.17596 16 8 16C7.82404 16 7.64941 15.9943 7.47628 15.9831ZM9.5613 15.8477L8.97909 12.9048C9.19433 12.8622 9.40435 12.8058 9.60832 12.7366L10.5725 15.5774C10.2444 15.6887 9.90687 15.7794 9.5613 15.8477ZM11.5391 15.1766L10.2102 12.487C10.4061 12.3902 10.595 12.2808 10.776 12.1596L12.4449 14.6525C12.1557 14.8461 11.8532 15.0214 11.5391 15.1766ZM13.2748 14.0148L11.2959 11.7601C11.4605 11.6156 11.6156 11.4605 11.7601 11.2959L14.0148 13.2748C13.7845 13.5372 13.5372 13.7845 13.2748 14.0148ZM14.6525 12.4449L12.1596 10.776C12.2808 10.595 12.3902 10.4061 12.487 10.2102L15.1766 11.5391C15.0214 11.8532 14.8461 12.1557 14.6525 12.4449ZM15.5774 10.5725L12.7366 9.60832C12.8058 9.40435 12.8622 9.19433 12.9048 8.97909L15.8477 9.5613C15.7794 9.90687 15.6887 10.2444 15.5774 10.5725Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+    {
+      d: 'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.9026 9.25189L12.939 8.78615C12.979 8.53177 13 8.26937 13 8C13 7.73063 12.979 7.46823 12.939 7.21385L15.9026 6.74811C15.9667 7.15599 16 7.57411 16 8C16 8.42589 15.9667 8.84401 15.9026 9.25189ZM15.4706 5.13214L12.6701 6.20789C12.4812 5.7162 12.2158 5.26012 11.8871 4.85468L14.2174 2.96533C14.7416 3.61188 15.167 4.34182 15.4706 5.13214ZM13.0347 1.78258L11.1453 4.11289C10.7399 3.78417 10.2838 3.51876 9.79211 3.32989L10.8679 0.529397C11.6582 0.832983 12.3881 1.25837 13.0347 1.78258ZM9.25189 0.0973803L8.78615 3.06101C8.53177 3.02103 8.26937 3 8 3C7.73063 3 7.46823 3.02103 7.21385 3.06101L6.74811 0.0973805C7.15599 0.0332797 7.57411 0 8 0C8.42589 0 8.84401 0.0332797 9.25189 0.0973803ZM5.13214 0.529397L6.20789 3.32989C5.7162 3.51876 5.26012 3.78417 4.85468 4.11289L2.96533 1.78258C3.61188 1.25837 4.34182 0.832983 5.13214 0.529397ZM1.78258 2.96533L4.11289 4.85468C3.78417 5.26012 3.51876 5.7162 3.32989 6.20789L0.529397 5.13214C0.832983 4.34182 1.25837 3.61188 1.78258 2.96533ZM0.0973804 6.74811C0.0332797 7.15599 0 7.57411 0 8C0 8.42589 0.0332797 8.84401 0.0973805 9.25189L3.06101 8.78615C3.02103 8.53177 3 8.26937 3 8C3 7.73063 3.02103 7.46823 3.06101 7.21386L0.0973804 6.74811ZM0.529397 10.8679L3.32989 9.79211C3.51876 10.2838 3.78417 10.7399 4.11289 11.1453L1.78258 13.0347C1.25837 12.3881 0.832983 11.6582 0.529397 10.8679ZM2.96533 14.2174L4.85468 11.8871C5.26012 12.2158 5.7162 12.4812 6.20789 12.6701L5.13214 15.4706C4.34182 15.167 3.61188 14.7416 2.96533 14.2174ZM6.74811 15.9026L7.21386 12.939C7.46823 12.979 7.73063 13 8 13C8.26937 13 8.53177 12.979 8.78615 12.939L9.25189 15.9026C8.84401 15.9667 8.42589 16 8 16C7.57411 16 7.15599 15.9667 6.74811 15.9026ZM10.8679 15.4706L9.79211 12.6701C10.2838 12.4812 10.7399 12.2158 11.1453 11.8871L13.0347 14.2174C12.3881 14.7416 11.6582 15.167 10.8679 15.4706ZM14.2174 13.0347L11.8871 11.1453C12.2158 10.7399 12.4812 10.2838 12.6701 9.79211L15.4706 10.8679C15.167 11.6582 14.7416 12.3881 14.2174 13.0347Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+    {
+      d: 'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M2 14C2 10.6863 4.68629 8 8 8C4.68629 8 2 5.31371 2 2H5C6.65685 2 8 3.34315 8 5C8 3.34315 9.34315 2 11 2H14C14 5.31352 11.3134 7.99969 8 8C11.3134 8.00031 14 10.6865 14 14H11C9.34315 14 8 12.6569 8 11C8 12.6569 6.65685 14 5 14L2 14Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 8C11.3137 8 14 4.86599 14 1H2C2 4.86567 4.68667 7.99948 8 8C4.68667 8.00053 2 11.1343 2 15H14C14 11.134 11.3137 8 8 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.9026 9.25189L12.939 8.78615C12.979 8.53177 13 8.26937 13 8C13 7.73063 12.979 7.46823 12.939 7.21385L15.9026 6.74811C15.9667 7.15599 16 7.57411 16 8C16 8.42589 15.9667 8.84401 15.9026 9.25189ZM15.4706 5.13214L12.6701 6.20789C12.4812 5.7162 12.2158 5.26012 11.8871 4.85468L14.2174 2.96533C14.7416 3.61188 15.167 4.34182 15.4706 5.13214ZM13.0347 1.78258L11.1453 4.11289C10.7399 3.78417 10.2838 3.51876 9.79211 3.32989L10.8679 0.529397C11.6582 0.832983 12.3881 1.25837 13.0347 1.78258ZM9.25189 0.0973803L8.78615 3.06101C8.53177 3.02103 8.26937 3 8 3C7.73063 3 7.46823 3.02103 7.21385 3.06101L6.74811 0.0973805C7.15599 0.0332797 7.57411 0 8 0C8.42589 0 8.84401 0.0332797 9.25189 0.0973803ZM5.13214 0.529397L6.20789 3.32989C5.7162 3.51876 5.26012 3.78417 4.85468 4.11289L2.96533 1.78258C3.61188 1.25837 4.34182 0.832983 5.13214 0.529397ZM1.78258 2.96533L4.11289 4.85468C3.78417 5.26012 3.51876 5.7162 3.32989 6.20789L0.529397 5.13214C0.832983 4.34182 1.25837 3.61188 1.78258 2.96533ZM0.0973804 6.74811C0.0332797 7.15599 0 7.57411 0 8C0 8.42589 0.0332797 8.84401 0.0973805 9.25189L3.06101 8.78615C3.02103 8.53177 3 8.26937 3 8C3 7.73063 3.02103 7.46823 3.06101 7.21386L0.0973804 6.74811ZM0.529397 10.8679L3.32989 9.79211C3.51876 10.2838 3.78417 10.7399 4.11289 11.1453L1.78258 13.0347C1.25837 12.3881 0.832983 11.6582 0.529397 10.8679ZM2.96533 14.2174L4.85468 11.8871C5.26012 12.2158 5.7162 12.4812 6.20789 12.6701L5.13214 15.4706C4.34182 15.167 3.61188 14.7416 2.96533 14.2174ZM6.74811 15.9026L7.21386 12.939C7.46823 12.979 7.73063 13 8 13C8.26937 13 8.53177 12.979 8.78615 12.939L9.25189 15.9026C8.84401 15.9667 8.42589 16 8 16C7.57411 16 7.15599 15.9667 6.74811 15.9026ZM10.8679 15.4706L9.79211 12.6701C10.2838 12.4812 10.7399 12.2158 11.1453 11.8871L13.0347 14.2174C12.3881 14.7416 11.6582 15.167 10.8679 15.4706ZM14.2174 13.0347L11.8871 11.1453C12.2158 10.7399 12.4812 10.2838 12.6701 9.79211L15.4706 10.8679C15.167 11.6582 14.7416 12.3881 14.2174 13.0347Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+    {
+      d: 'M8 5C8.64911 6.29822 9.70178 7.35089 11 8C9.70178 8.64911 8.64911 9.70178 8 11C7.35089 9.70178 6.29822 8.64911 5 8C6.29822 7.35089 7.35089 6.29822 8 5Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.9831 8.52372L12.9894 8.33026C12.9964 8.22148 13 8.11137 13 8C13 7.88863 12.9964 7.77852 12.9894 7.66974L15.9831 7.47627C15.9943 7.64941 16 7.82404 16 8C16 8.17596 15.9943 8.35059 15.9831 8.52372ZM15.8477 6.4387L12.9048 7.02091C12.8622 6.80567 12.8058 6.59565 12.7366 6.39168L15.5774 5.42754C15.6887 5.75556 15.7794 6.09313 15.8477 6.4387ZM15.1766 4.46092L12.487 5.78982C12.3902 5.59393 12.2808 5.40497 12.1596 5.22403L14.6525 3.55507C14.8461 3.84425 15.0214 4.14676 15.1766 4.46092ZM14.0148 2.72519L11.7601 4.70411C11.6156 4.5395 11.4605 4.3844 11.2959 4.23992L13.2748 1.98518C13.5372 2.21551 13.7845 2.46275 14.0148 2.72519ZM12.4449 1.34748L10.776 3.84038C10.595 3.71924 10.4061 3.60981 10.2102 3.51302L11.5391 0.823408C11.8532 0.978631 12.1557 1.15388 12.4449 1.34748ZM10.5725 0.422581L9.60832 3.26343C9.40435 3.19421 9.19433 3.13782 8.97909 3.09524L9.5613 0.152272C9.90687 0.220637 10.2444 0.311259 10.5725 0.422581ZM8.52373 0.0168691L8.33026 3.01062C8.22148 3.0036 8.11137 3 8 3C7.88863 3 7.77852 3.0036 7.66974 3.01062L7.47627 0.0168691C7.64941 0.00568084 7.82404 0 8 0C8.17596 0 8.35059 0.00568083 8.52373 0.0168691ZM6.4387 0.152272L7.02091 3.09524C6.80567 3.13782 6.59565 3.19421 6.39168 3.26343L5.42754 0.422581C5.75556 0.311259 6.09313 0.220638 6.4387 0.152272ZM4.46092 0.823408L5.78982 3.51302C5.59393 3.60981 5.40497 3.71925 5.22403 3.84038L3.55507 1.34748C3.84425 1.15388 4.14676 0.978631 4.46092 0.823408ZM2.72519 1.98518L4.70411 4.23992C4.5395 4.3844 4.3844 4.5395 4.23992 4.70412L1.98517 2.7252C2.21551 2.46275 2.46275 2.21551 2.72519 1.98518ZM1.34748 3.55508L3.84038 5.22403C3.71924 5.40497 3.60981 5.59393 3.51302 5.78982L0.823408 4.46092C0.978631 4.14676 1.15388 3.84425 1.34748 3.55508ZM0.422581 5.42754L3.26343 6.39168C3.19421 6.59565 3.13782 6.80567 3.09524 7.02091L0.152272 6.4387C0.220637 6.09313 0.311259 5.75556 0.422581 5.42754ZM0.0168691 7.47627C0.00568083 7.64941 0 7.82404 0 8C0 8.17596 0.00568084 8.35059 0.0168691 8.52373L3.01062 8.33026C3.0036 8.22148 3 8.11137 3 8C3 7.88863 3.0036 7.77852 3.01062 7.66974L0.0168691 7.47627ZM0.152272 9.5613L3.09524 8.97909C3.13782 9.19433 3.19421 9.40435 3.26343 9.60832L0.422581 10.5725C0.311259 10.2444 0.220637 9.90687 0.152272 9.5613ZM0.823408 11.5391L3.51302 10.2102C3.60981 10.4061 3.71925 10.595 3.84038 10.776L1.34748 12.4449C1.15388 12.1557 0.978631 11.8532 0.823408 11.5391ZM1.98518 13.2748L4.23992 11.2959C4.3844 11.4605 4.5395 11.6156 4.70412 11.7601L2.7252 14.0148C2.46275 13.7845 2.21551 13.5372 1.98518 13.2748ZM3.55508 14.6525L5.22403 12.1596C5.40497 12.2808 5.59393 12.3902 5.78982 12.487L4.46092 15.1766C4.14676 15.0214 3.84425 14.8461 3.55508 14.6525ZM5.42754 15.5774L6.39168 12.7366C6.59565 12.8058 6.80567 12.8622 7.02091 12.9048L6.4387 15.8477C6.09313 15.7794 5.75556 15.6887 5.42754 15.5774ZM7.47628 15.9831L7.66974 12.9894C7.77852 12.9964 7.88863 13 8 13C8.11137 13 8.22148 12.9964 8.33026 12.9894L8.52373 15.9831C8.35059 15.9943 8.17596 16 8 16C7.82404 16 7.64941 15.9943 7.47628 15.9831ZM9.5613 15.8477L8.97909 12.9048C9.19433 12.8622 9.40435 12.8058 9.60832 12.7366L10.5725 15.5774C10.2444 15.6887 9.90687 15.7794 9.5613 15.8477ZM11.5391 15.1766L10.2102 12.487C10.4061 12.3902 10.595 12.2808 10.776 12.1596L12.4449 14.6525C12.1557 14.8461 11.8532 15.0214 11.5391 15.1766ZM13.2748 14.0148L11.2959 11.7601C11.4605 11.6156 11.6156 11.4605 11.7601 11.2959L14.0148 13.2748C13.7845 13.5372 13.5372 13.7845 13.2748 14.0148ZM14.6525 12.4449L12.1596 10.776C12.2808 10.595 12.3902 10.4061 12.487 10.2102L15.1766 11.5391C15.0214 11.8532 14.8461 12.1557 14.6525 12.4449ZM15.5774 10.5725L12.7366 9.60832C12.8058 9.40435 12.8622 9.19433 12.9048 8.97909L15.8477 9.5613C15.7794 9.90687 15.6887 10.2444 15.5774 10.5725Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+    {
+      d: 'M8 5C8.64911 6.29822 9.70178 7.35089 11 8C9.70178 8.64911 8.64911 9.70178 8 11C7.35089 9.70178 6.29822 8.64911 5 8C6.29822 7.35089 7.35089 6.29822 8 5Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.8477 9.5613L8.03733 8.01617L14.6525 12.4449C14.0685 13.3173 13.3173 14.0685 12.4449 14.6525L8.01617 8.03733L9.5613 15.8477C9.05633 15.9476 8.53428 16 8 16C7.46572 16 6.94367 15.9476 6.4387 15.8477L7.98383 8.03733L3.55508 14.6525C2.68266 14.0685 1.93154 13.3173 1.34748 12.4449L7.96267 8.01617L0.152272 9.5613C0.0523756 9.05633 0 8.53428 0 8C0 7.46572 0.0523755 6.94367 0.152272 6.4387L7.96267 7.98383L1.34748 3.55508C1.93154 2.68266 2.68266 1.93154 3.55507 1.34748L7.98383 7.96267L6.4387 0.152272C6.94367 0.0523755 7.46572 0 8 0C8.53428 0 9.05633 0.0523755 9.5613 0.152272L8.01617 7.96267L12.4449 1.34748C13.3173 1.93154 14.0685 2.68266 14.6525 3.55507L8.03733 7.98383L15.8477 6.4387C15.9476 6.94367 16 7.46572 16 8C16 8.53428 15.9476 9.05633 15.8477 9.5613Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M2.34314 2.34314C3.12419 1.5621 4.39052 1.5621 5.17157 2.34314L7.29289 4.46447C7.68342 4.85499 8.31658 4.85499 8.70711 4.46447L10.8284 2.34314C11.6095 1.5621 12.8758 1.5621 13.6569 2.34314C14.4379 3.12419 14.4379 4.39052 13.6569 5.17157L11.5355 7.29289C11.145 7.68342 11.145 8.31658 11.5355 8.70711L13.6569 10.8284C14.4379 11.6095 14.4379 12.8758 13.6569 13.6569C12.8758 14.4379 11.6095 14.4379 10.8284 13.6569L8.70711 11.5355C8.31658 11.145 7.68342 11.145 7.29289 11.5355L5.17157 13.6569C4.39052 14.4379 3.12419 14.4379 2.34314 13.6569C1.5621 12.8758 1.5621 11.6095 2.34314 10.8284L4.46447 8.70711C4.85499 8.31658 4.85499 7.68342 4.46447 7.29289L2.34314 5.17157C1.5621 4.39052 1.5621 3.12419 2.34314 2.34314ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8 8C8 8 5.5 3.82101 5.5 2.46154C5.5 1.10207 6.61929 0 8 0C9.38071 0 10.5 1.10207 10.5 2.46154C10.5 3.82101 8 8 8 8Z',
+    },
+    {
+      d: 'M8 8C8 8 12.179 5.5 13.5385 5.5C14.8979 5.5 16 6.61929 16 8C16 9.38071 14.8979 10.5 13.5385 10.5C12.1803 10.5 8.00807 8.00483 8 8Z',
+    },
+    {
+      d: 'M8 8C8 8 10.5 12.179 10.5 13.5385C10.5 14.8979 9.38071 16 8 16C6.61929 16 5.5 14.8979 5.5 13.5385C5.5 12.1808 7.99339 8.01105 8 8Z',
+    },
+    {
+      d: 'M2.46154 5.5C3.82101 5.5 8 8 8 8C8 8 3.82101 10.5 2.46154 10.5C1.10207 10.5 0 9.38071 0 8C0 6.61929 1.10207 5.5 2.46154 5.5Z',
+    },
+  ],
+  [
+    {
+      d: 'M10.3195 2.46119C10.3195 3.82047 8.00012 7.99888 8.00012 7.99888C8.00012 7.99888 5.68069 3.82047 5.68069 2.46119C5.68069 1.10191 6.71913 0 8.00012 0C9.28111 0 10.3195 1.10191 10.3195 2.46119Z',
+    },
+    {
+      d: 'M2.20488 7.30932C3.34269 7.98896 8.00002 8 8.00002 8C7.97235 8.00007 3.33929 8.01307 2.20488 8.69068C1.06707 9.37032 0.66391 10.8517 1.3044 11.9994C1.9449 13.1472 3.3865 13.5267 4.52431 12.847C5.66058 12.1683 7.9937 8.01126 8.00002 8C8.0094 8.01672 10.3402 12.1687 11.4757 12.847C12.6135 13.5266 14.0551 13.1472 14.6956 11.9994C15.3361 10.8517 14.9329 9.37029 13.7951 8.69065C12.6833 8.02652 8.21072 8.00083 8.00717 8C8.21072 7.99917 12.6833 7.97348 13.7951 7.30935C14.9329 6.62971 15.3361 5.14833 14.6956 4.00059C14.0551 2.85285 12.6135 2.47337 11.4757 3.15301C10.3434 3.82938 8.02234 7.96026 8.00002 8C7.99376 7.98884 5.66059 3.83171 4.52431 3.15299C3.3865 2.47335 1.9449 2.85282 1.3044 4.00056C0.66391 5.1483 1.06707 6.62968 2.20488 7.30932Z',
+    },
+    {
+      d: 'M8.00012 8.00112C8.00012 8.00112 10.3195 12.1795 10.3195 13.5388C10.3195 14.8981 9.28111 16 8.00012 16C6.71913 16 5.68069 14.8981 5.68069 13.5388C5.68069 12.1795 8.00012 8.00112 8.00012 8.00112Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 0C9.10457 0 10 0.895431 10 2V5C10 5.55228 10.4477 6 11 6H14C15.1046 6 16 6.89543 16 8C16 9.10457 15.1046 10 14 10H11C10.4477 10 10 10.4477 10 11V14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14V11C6 10.4477 5.55228 10 5 10H2C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6H5C5.55228 6 6 5.55228 6 5V2C6 0.89543 6.89543 0 8 0ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M15.9026 9.25189L12.939 8.78615C12.979 8.53177 13 8.26937 13 8C13 7.73063 12.979 7.46823 12.939 7.21385L15.9026 6.74811C15.9667 7.15599 16 7.57411 16 8C16 8.42589 15.9667 8.84401 15.9026 9.25189ZM15.4706 5.13214L12.6701 6.20789C12.4812 5.7162 12.2158 5.26012 11.8871 4.85468L14.2174 2.96533C14.7416 3.61188 15.167 4.34182 15.4706 5.13214ZM13.0347 1.78258L11.1453 4.11289C10.7399 3.78417 10.2838 3.51876 9.79211 3.32989L10.8679 0.529397C11.6582 0.832983 12.3881 1.25837 13.0347 1.78258ZM9.25189 0.0973803L8.78615 3.06101C8.53177 3.02103 8.26937 3 8 3C7.73063 3 7.46823 3.02103 7.21385 3.06101L6.74811 0.0973805C7.15599 0.0332797 7.57411 0 8 0C8.42589 0 8.84401 0.0332797 9.25189 0.0973803ZM5.13214 0.529397L6.20789 3.32989C5.7162 3.51876 5.26012 3.78417 4.85468 4.11289L2.96533 1.78258C3.61188 1.25837 4.34182 0.832983 5.13214 0.529397ZM1.78258 2.96533L4.11289 4.85468C3.78417 5.26012 3.51876 5.7162 3.32989 6.20789L0.529397 5.13214C0.832983 4.34182 1.25837 3.61188 1.78258 2.96533ZM0.0973804 6.74811C0.0332797 7.15599 0 7.57411 0 8C0 8.42589 0.0332797 8.84401 0.0973805 9.25189L3.06101 8.78615C3.02103 8.53177 3 8.26937 3 8C3 7.73063 3.02103 7.46823 3.06101 7.21386L0.0973804 6.74811ZM0.529397 10.8679L3.32989 9.79211C3.51876 10.2838 3.78417 10.7399 4.11289 11.1453L1.78258 13.0347C1.25837 12.3881 0.832983 11.6582 0.529397 10.8679ZM2.96533 14.2174L4.85468 11.8871C5.26012 12.2158 5.7162 12.4812 6.20789 12.6701L5.13214 15.4706C4.34182 15.167 3.61188 14.7416 2.96533 14.2174ZM6.74811 15.9026L7.21386 12.939C7.46823 12.979 7.73063 13 8 13C8.26937 13 8.53177 12.979 8.78615 12.939L9.25189 15.9026C8.84401 15.9667 8.42589 16 8 16C7.57411 16 7.15599 15.9667 6.74811 15.9026ZM10.8679 15.4706L9.79211 12.6701C10.2838 12.4812 10.7399 12.2158 11.1453 11.8871L13.0347 14.2174C12.3881 14.7416 11.6582 15.167 10.8679 15.4706ZM14.2174 13.0347L11.8871 11.1453C12.2158 10.7399 12.4812 10.2838 12.6701 9.79211L15.4706 10.8679C15.167 11.6582 14.7416 12.3881 14.2174 13.0347Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M11.923 8.78487L15.8477 9.5613C15.9476 9.05633 16 8.53428 16 8C16 7.46572 15.9476 6.94367 15.8477 6.4387L11.923 7.21513C11.8192 6.6932 11.6138 6.20786 11.3283 5.78059L14.6525 3.55507C14.0685 2.68266 13.3173 1.93154 12.4449 1.34748L10.2194 4.6717C9.79214 4.38621 9.3068 4.18081 8.78487 4.07697L9.5613 0.152272C9.05633 0.0523755 8.53428 0 8 0C7.46572 0 6.94367 0.0523755 6.4387 0.152272L7.21513 4.07697C6.6932 4.18082 6.20786 4.38621 5.78059 4.6717L3.55507 1.34748C2.68266 1.93154 1.93154 2.68266 1.34748 3.55508L4.6717 5.78059C4.38621 6.20786 4.18081 6.6932 4.07697 7.21513L0.152272 6.4387C0.0523755 6.94367 0 7.46572 0 8C0 8.53428 0.0523756 9.05633 0.152272 9.5613L4.07697 8.78487C4.18082 9.3068 4.38621 9.79214 4.6717 10.2194L1.34748 12.4449C1.93154 13.3173 2.68266 14.0685 3.55508 14.6525L5.78059 11.3283C6.20786 11.6138 6.6932 11.8192 7.21513 11.923L6.4387 15.8477C6.94367 15.9476 7.46572 16 8 16C8.53428 16 9.05633 15.9476 9.5613 15.8477L8.78487 11.923C9.3068 11.8192 9.79214 11.6138 10.2194 11.3283L12.4449 14.6525C13.3173 14.0685 14.0685 13.3173 14.6525 12.4449L11.3283 10.2194C11.6138 9.79214 11.8192 9.3068 11.923 8.78487ZM11.923 8.78487C11.9735 8.53108 12 8.26863 12 8C12 7.73137 11.9735 7.46892 11.923 7.21513L8.03733 7.98383L11.3283 5.78059C11.0353 5.34206 10.6579 4.9647 10.2194 4.6717L8.01617 7.96267L8.78487 4.07697C8.53108 4.02648 8.26863 4 8 4C7.73137 4 7.46892 4.02648 7.21513 4.07697L7.98383 7.96267L5.78059 4.6717C5.34206 4.9647 4.9647 5.34207 4.6717 5.78059L7.96267 7.98383L4.07697 7.21513C4.02648 7.46892 4 7.73137 4 8C4 8.26863 4.02648 8.53108 4.07697 8.78487L7.96267 8.01617L4.6717 10.2194C4.9647 10.6579 5.34207 11.0353 5.78059 11.3283L7.98383 8.03733L7.21513 11.923C7.46892 11.9735 7.73137 12 8 12C8.26863 12 8.53108 11.9735 8.78487 11.923L8.01617 8.03733L10.2194 11.3283C10.6579 11.0353 11.0353 10.6579 11.3283 10.2194L8.03733 8.01617L11.923 8.78487Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M10.9418 8.59077L15.8477 9.5613C15.9476 9.05633 16 8.53428 16 8C16 7.46572 15.9476 6.94367 15.8477 6.4387L10.9418 7.40923C10.98 7.60024 11 7.79778 11 8C11 8.20222 10.98 8.39977 10.9418 8.59077ZM10.4972 9.66303C10.277 9.99308 9.99308 10.277 9.66303 10.4972L12.4449 14.6525C13.3173 14.0685 14.0685 13.3173 14.6525 12.4449L10.4972 9.66303ZM8.59077 10.9418C8.39977 10.98 8.20222 11 8 11C7.79778 11 7.60024 10.98 7.40923 10.9418L6.4387 15.8477C6.94367 15.9476 7.46572 16 8 16C8.53428 16 9.05633 15.9476 9.5613 15.8477L8.59077 10.9418ZM6.33697 10.4972C6.00692 10.277 5.72299 9.99308 5.50276 9.66303L1.34748 12.4449C1.93154 13.3173 2.68266 14.0685 3.55508 14.6525L6.33697 10.4972ZM5.05815 8.59077C5.02001 8.39977 5 8.20222 5 8C5 7.79778 5.02001 7.60024 5.05815 7.40923L0.152272 6.4387C0.0523755 6.94367 0 7.46572 0 8C0 8.53428 0.0523756 9.05633 0.152272 9.5613L5.05815 8.59077ZM5.50276 6.33697C5.72299 6.00692 6.00692 5.72299 6.33697 5.50276L3.55507 1.34748C2.68266 1.93154 1.93154 2.68266 1.34748 3.55508L5.50276 6.33697ZM7.40923 5.05815C7.60024 5.02001 7.79778 5 8 5C8.20222 5 8.39977 5.02001 8.59077 5.05815L9.5613 0.152272C9.05633 0.0523755 8.53428 0 8 0C7.46572 0 6.94367 0.0523755 6.4387 0.152272L7.40923 5.05815ZM9.66303 5.50276L12.4449 1.34748C13.3173 1.93154 14.0685 2.68266 14.6525 3.55507L10.4972 6.33697C10.277 6.00692 9.99308 5.72299 9.66303 5.50276Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M6.65494 5.34506L8 4L9.34522 5.34522C9.85712 4.23711 10.3195 3.06813 10.3195 2.46119C10.3195 1.10191 9.28111 0 8.00012 0C6.71913 0 5.68069 1.10191 5.68069 2.46119C5.68069 3.0681 6.14307 4.237 6.65494 5.34506Z',
+    },
+    {
+      d: 'M6.48343 5.51657L4.20992 7.79008C3.35262 7.68776 2.58369 7.5356 2.20488 7.30932C1.06707 6.62968 0.66391 5.1483 1.3044 4.00056C1.9449 2.85282 3.3865 2.47335 4.52431 3.15299C5.04047 3.4613 5.80362 4.48739 6.48343 5.51657Z',
+    },
+    {
+      d: 'M4.20992 8.20992C3.35262 8.31224 2.58369 8.4644 2.20488 8.69068C1.06707 9.37032 0.66391 10.8517 1.3044 11.9994C1.9449 13.1472 3.3865 13.5267 4.52431 12.847C5.04047 12.5387 5.80362 11.5126 6.48343 10.4834L4.20992 8.20992Z',
+    },
+    {
+      d: 'M6.65494 10.6549C6.14307 11.763 5.68069 12.9319 5.68069 13.5388C5.68069 14.8981 6.71913 16 8.00012 16C9.28111 16 10.3195 14.8981 10.3195 13.5388C10.3195 12.9319 9.85712 11.7629 9.34522 10.6548L8 12L6.65494 10.6549Z',
+    },
+    {
+      d: 'M9.51659 10.4834C10.1964 11.5126 10.9595 12.5387 11.4757 12.847C12.6135 13.5266 14.0551 13.1472 14.6956 11.9994C15.3361 10.8517 14.9329 9.37029 13.7951 8.69065C13.4163 8.46437 12.6474 8.31221 11.7901 8.20989L9.51659 10.4834Z',
+    },
+    {
+      d: 'M11.7901 7.79011L9.5166 5.5166C10.1964 4.4874 10.9596 3.46132 11.4757 3.15301C12.6135 2.47337 14.0551 2.85285 14.6956 4.00059C15.3361 5.14833 14.9329 6.62971 13.7951 7.30935C13.4163 7.53563 12.6474 7.68779 11.7901 7.79011Z',
+    },
+    {
+      d: 'M8 6L10 8L8 10L6 8L8 6Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.4055 4.96811C14.5941 2.98825 13.0118 1.40593 11.0319 0.5945C10.9114 0.68356 10.796 0.782639 10.6869 0.891746C10.2922 1.28636 9.86718 2.18783 9.47419 3.22087C9.00818 3.07729 8.51312 3 8 3C7.48688 3 6.99182 3.07729 6.52581 3.22087C6.13282 2.18783 5.70776 1.28636 5.31315 0.891746C5.20404 0.782638 5.08865 0.683558 4.96811 0.594498C2.98825 1.40593 1.40593 2.98825 0.594501 4.96812C0.68356 5.08865 0.78264 5.20404 0.891747 5.31315C1.28636 5.70776 2.18783 6.13282 3.22087 6.52581C3.07729 6.99182 3 7.48688 3 8C3 8.51312 3.07729 9.00818 3.22087 9.47419C2.18783 9.86718 1.28636 10.2922 0.891747 10.6869C0.782642 10.796 0.683564 10.9113 0.594506 11.0319C1.40594 13.0117 2.98825 14.5941 4.96812 15.4055C5.08866 15.3164 5.20404 15.2174 5.31315 15.1083C5.70776 14.7136 6.13282 13.8122 6.52581 12.7791C6.99182 12.9227 7.48688 13 8 13C8.51312 13 9.00818 12.9227 9.47419 12.7791C9.86718 13.8122 10.2922 14.7136 10.6869 15.1083C10.796 15.2174 10.9113 15.3164 11.0319 15.4055C13.0117 14.5941 14.5941 13.0117 15.4055 11.0319C15.3164 10.9113 15.2174 10.796 15.1083 10.6869C14.7136 10.2922 13.8122 9.86718 12.7791 9.47419C12.9227 9.00818 13 8.51312 13 8C13 7.48688 12.9227 6.99182 12.7791 6.52581C13.8122 6.13282 14.7136 5.70776 15.1083 5.31315C15.2174 5.20404 15.3164 5.08865 15.4055 4.96811ZM8 8C8 8 8.66996 5.33492 9.47419 3.22087C11.0501 3.70641 12.2936 4.94995 12.7791 6.52581C10.6651 7.33004 8 8 8 8ZM8 8C8 8 5.33492 8.66996 3.22087 9.47419C3.70641 11.0501 4.94995 12.2936 6.52581 12.7791C7.33004 10.6651 8 8 8 8ZM8 8C8 8 10.6651 8.66996 12.7791 9.47419C12.2936 11.0501 11.0501 12.2936 9.47419 12.7791C8.66996 10.6651 8 8 8 8ZM8 8C8 8 5.33492 7.33004 3.22087 6.52581C3.70641 4.94994 4.94995 3.7064 6.52581 3.22087C7.33004 5.33492 8 8 8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 8C8 8 12.7852 6.79708 13.7592 5.82309C13.8476 5.73469 13.9278 5.64121 14 5.54355C13.3426 3.93944 12.0606 2.65743 10.4565 2C10.3588 2.07216 10.2653 2.15243 10.1769 2.24083C9.20292 3.21483 8 8 8 8ZM8 8C8 8 9.20292 12.7852 10.1769 13.7592C10.2653 13.8476 10.3588 13.9278 10.4565 14C12.0606 13.3426 13.3426 12.0606 14 10.4565C13.9278 10.3588 13.8476 10.2653 13.7592 10.1769C12.7852 9.20292 8 8 8 8ZM8 8C8 8 6.79708 12.7852 5.82309 13.7592C5.73469 13.8476 5.64121 13.9278 5.54355 14C3.93944 13.3426 2.65743 12.0606 2 10.4565C2.07216 10.3588 2.15243 10.2653 2.24083 10.1769C3.21483 9.20292 8 8 8 8ZM8 8C8 8 3.21483 6.79708 2.24083 5.82309C2.15243 5.73469 2.07216 5.6412 2 5.54354C2.65743 3.93944 3.93944 2.65743 5.54354 2C5.6412 2.07216 5.73469 2.15243 5.82309 2.24083C6.79708 3.21483 8 8 8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M9.17157 1.17157C7.60948 2.73367 7.60948 5.26633 9.17157 6.82843C10.7337 8.39052 13.2663 8.39052 14.8284 6.82843C16.3905 5.26633 16.3905 2.73367 14.8284 1.17157C13.2663 -0.390524 10.7337 -0.390524 9.17157 1.17157Z',
+    },
+    {
+      d: 'M1.17157 14.8284C2.73367 16.3905 5.26633 16.3905 6.82843 14.8284C8.39052 13.2663 8.39052 10.7337 6.82843 9.17157C5.26633 7.60948 2.73367 7.60948 1.17157 9.17157C-0.390524 10.7337 -0.390524 13.2663 1.17157 14.8284Z',
+    },
+    {
+      d: 'M6.82843 1.17157C8.39052 2.73367 8.39052 5.26633 6.82843 6.82843C5.26633 8.39052 2.73367 8.39052 1.17157 6.82843C-0.390524 5.26633 -0.390524 2.73367 1.17157 1.17157C2.73367 -0.390524 5.26633 -0.390524 6.82843 1.17157Z',
+    },
+    {
+      d: 'M9.17157 14.8284C10.7337 16.3905 13.2663 16.3905 14.8284 14.8284C16.3905 13.2663 16.3905 10.7337 14.8284 9.17157C13.2663 7.60948 10.7337 7.60948 9.17157 9.17157C7.60948 10.7337 7.60948 13.2663 9.17157 14.8284Z',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 2.34313C12.0059 5.93367 12.0059 10.0663 13.6569 13.6568C10.0663 12.0058 5.93368 12.0058 2.34315 13.6568C3.99414 10.0663 3.99414 5.93367 2.34315 2.34313C5.93368 3.99413 10.0663 3.99413 13.6569 2.34313Z',
+    },
+  ],
+  [
+    {
+      d: 'M15.1083 5.31314C13.9061 6.5153 8 8 8 8C8 8 9.4847 2.09389 10.6869 0.891741C10.796 0.782636 10.9113 0.683558 11.0319 0.594499C13.0117 1.40593 14.5941 2.98825 15.4055 4.96812C15.3164 5.08865 15.2174 5.20404 15.1083 5.31314Z',
+    },
+    {
+      d: 'M15.4055 11.0319C15.3164 10.9113 15.2174 10.796 15.1083 10.6868C13.9061 9.48469 8 8 8 8C8 8 6.5153 2.09389 5.31315 0.891741C5.20404 0.782635 5.08866 0.683557 4.96812 0.594498C2.98825 1.40593 1.40593 2.98824 0.594501 4.96812C0.683561 5.08865 0.782639 5.20404 0.891746 5.31314C2.0939 6.5153 8 8 8 8C8 8 2.0939 9.48469 0.891746 10.6868C0.78264 10.796 0.683561 10.9113 0.594502 11.0319C1.40593 13.0117 2.98825 14.5941 4.96812 15.4055C5.08866 15.3164 5.20404 15.2174 5.31315 15.1082C6.5153 13.9061 8 8 8 8C8 8 9.4847 13.9061 10.6869 15.1082C10.796 15.2174 10.9113 15.3164 11.0319 15.4055C13.0117 14.5941 14.5941 13.0117 15.4055 11.0319Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 0C8.33735 2.71168 11.5009 4.02205 13.6569 2.34315C11.9779 4.49913 13.2883 7.66266 16 8C13.2883 8.33735 11.9779 11.5009 13.6569 13.6569C11.5009 11.9779 8.33735 13.2883 8 16C7.66266 13.2883 4.49913 11.9779 2.34315 13.6569C4.02205 11.5009 2.71168 8.33735 0 8C2.71168 7.66266 4.02205 4.49913 2.34315 2.34315C4.49913 4.02205 7.66266 2.71168 8 0Z',
+    },
+  ],
+  [
+    {
+      d: 'M6.24244 4.40581C6.77293 4.14591 7.36943 4 8 4C8.63065 4 9.22722 4.14595 9.75776 4.40591C10.0814 3.6217 10.3195 2.89673 10.3195 2.46119C10.3195 1.10191 9.28111 0 8.00012 0C6.71913 0 5.68069 1.10191 5.68069 2.46119C5.68069 2.89671 5.9188 3.62164 6.24244 4.40581Z',
+    },
+    {
+      d: 'M5.86339 4.61784C4.80568 5.28742 4.08369 6.43949 4.00681 7.76466C3.23255 7.66304 2.55351 7.51757 2.20488 7.30932C1.06707 6.62968 0.66391 5.1483 1.3044 4.00056C1.9449 2.85282 3.3865 2.47335 4.52431 3.15299C4.88694 3.3696 5.37149 3.94049 5.86339 4.61784Z',
+    },
+    {
+      d: 'M4.00681 8.23534C3.23255 8.33696 2.5535 8.48244 2.20488 8.69068C1.06707 9.37032 0.66391 10.8517 1.3044 11.9994C1.9449 13.1472 3.3865 13.5267 4.52431 12.847C4.88694 12.6304 5.37149 12.0595 5.86339 11.3822C4.80568 10.7126 4.0837 9.56051 4.00681 8.23534Z',
+    },
+    {
+      d: 'M6.24244 11.5942C5.9188 12.3784 5.68069 13.1033 5.68069 13.5388C5.68069 14.8981 6.71913 16 8.00012 16C9.28111 16 10.3195 14.8981 10.3195 13.5388C10.3195 13.1033 10.0814 12.3783 9.75776 11.5941C9.22722 11.8541 8.63065 12 8 12C7.36943 12 6.77293 11.8541 6.24244 11.5942Z',
+    },
+    {
+      d: 'M10.1366 11.3821C10.6285 12.0595 11.1131 12.6304 11.4757 12.847C12.6135 13.5266 14.0551 13.1472 14.6956 11.9994C15.3361 10.8517 14.9329 9.37029 13.7951 8.69065C13.4465 8.4824 12.7675 8.33693 11.9932 8.23531C11.9163 9.56048 11.1943 10.7126 10.1366 11.3821Z',
+    },
+    {
+      d: 'M11.9932 7.76469C11.9163 6.43952 11.1943 5.28745 10.1366 4.61786C10.6285 3.94051 11.1131 3.36962 11.4757 3.15301C12.6135 2.47337 14.0551 2.85285 14.6956 4.00059C15.3361 5.14833 14.9329 6.62971 13.7951 7.30935C13.4465 7.5176 12.7675 7.66307 11.9932 7.76469Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 0C9.37146 3.70632 12.2937 6.62854 16 8C12.2937 9.37146 9.37146 12.2937 8 16C6.62854 12.2937 3.70632 9.37146 0 8C3.70632 6.62854 6.62854 3.70632 8 0Z',
+    },
+  ],
+  [
+    {
+      d: 'M12 4C12 6.20914 10.2091 8 8 8C5.79086 8 4 6.20914 4 4C4 1.79086 5.79086 0 8 0C10.2091 0 12 1.79086 12 4Z',
+    },
+    {
+      d: 'M8 11C8 13.2091 6.20914 15 4 15C1.79086 15 0 13.2091 0 11C0 8.79086 1.79086 7 4 7C6.20914 7 8 8.79086 8 11Z',
+    },
+    {
+      d: 'M8 11C8 8.79086 9.79086 7 12 7C14.2091 7 16 8.79086 16 11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5 4C4.44772 4 4 4.44772 4 5V11C4 11.5523 4.44772 12 5 12H11C11.5523 12 12 11.5523 12 11V5C12 4.44772 11.5523 4 11 4H5Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.7207 7.32562L8.67438 3.27934C8.30193 2.90689 7.69807 2.90689 7.32562 3.27934L3.27934 7.32562C2.90689 7.69807 2.90689 8.30193 3.27934 8.67438L7.32562 12.7207C7.69807 13.0931 8.30193 13.0931 8.67438 12.7207L12.7207 8.67438C13.0931 8.30193 13.0931 7.69807 12.7207 7.32562Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M10.3438 10.3438C10.9434 10.9431 11.7715 11.3137 12.6863 11.3137C14.5164 11.3137 16 9.83012 16 8.00001C16 6.1699 14.5164 4.6863 12.6863 4.6863C10.8562 4.6863 9.37259 6.1699 9.37259 8.00001C9.37259 8.91475 9.74323 9.74292 10.3425 10.3425C9.74292 9.74323 8.91475 9.37258 8 9.37258C7.08525 9.37258 6.25708 9.74323 5.65746 10.3425C6.25677 9.74292 6.62741 8.91475 6.62741 8.00001C6.62741 6.1699 5.14382 4.6863 3.31371 4.6863C1.4836 4.6863 -3.70335e-07 6.1699 0 8.00001C-4.9378e-07 9.83012 1.4836 11.3137 3.31371 11.3137C4.22845 11.3137 5.05663 10.9431 5.65625 10.3438C5.05695 10.9434 4.68629 11.7715 4.68629 12.6863C4.68629 14.5164 6.16989 16 8 16C9.83011 16 11.3137 14.5164 11.3137 12.6863C11.3137 11.7715 10.9431 10.9434 10.3438 10.3438Z',
+    },
+    {
+      d: 'M8 6.62742C6.16989 6.62742 4.68629 5.14382 4.68629 3.31371C4.68629 1.4836 6.16989 -7.40671e-08 8 0C9.83011 -7.40671e-08 11.3137 1.4836 11.3137 3.31371C11.3137 5.14382 9.83011 6.62742 8 6.62742Z',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 2.34315C11.5009 4.02205 8.33735 2.71168 8 0C7.66266 2.71168 4.49913 4.02205 2.34315 2.34315C4.02205 4.49913 2.71168 7.66266 0 8C2.71168 8.33735 4.02205 11.5009 2.34315 13.6569C4.49913 11.9779 7.66266 13.2883 8 16C8.33735 13.2883 11.5009 11.9779 13.6569 13.6569C11.9779 11.5009 13.2883 8.33735 16 8C13.2883 7.66266 11.9779 4.49913 13.6569 2.34315ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M11.9916 2.34459C12.451 1.88514 13.1959 1.88514 13.6554 2.34459C14.1149 2.80405 14.1149 3.54899 13.6554 4.00845L11.1596 6.50422C10.7002 6.96368 9.95524 6.96368 9.49578 6.50422C9.03632 6.04476 9.03632 5.29983 9.49578 4.84037L11.9916 2.34459Z',
+    },
+    {
+      d: 'M4.84037 9.49578C5.29983 9.03632 6.04476 9.03632 6.50422 9.49578C6.96368 9.95524 6.96368 10.7002 6.50422 11.1596L4.00845 13.6554C3.54899 14.1149 2.80405 14.1149 2.3446 13.6554C1.88514 13.1959 1.88514 12.451 2.3446 11.9916L4.84037 9.49578Z',
+    },
+    {
+      d: 'M13.6554 11.9916C14.1149 12.451 14.1149 13.1959 13.6554 13.6554C13.1959 14.1149 12.451 14.1149 11.9916 13.6554L9.49578 11.1596C9.03632 10.7002 9.03632 9.95524 9.49578 9.49578C9.95524 9.03632 10.7002 9.03632 11.1596 9.49578L13.6554 11.9916Z',
+    },
+    {
+      d: 'M6.50422 4.84037C6.96368 5.29983 6.96368 6.04476 6.50422 6.50422C6.04476 6.96368 5.29983 6.96368 4.84037 6.50422L2.34459 4.00845C1.88513 3.54899 1.88514 2.80405 2.3446 2.34459C2.80405 1.88513 3.54899 1.88514 4.00845 2.34459L6.50422 4.84037Z',
+    },
+  ],
+  [
+    {
+      d: 'M15 2C15 5.86599 11.866 9 8 9C4.13401 9 1 5.86599 1 2H4.5C6.433 2 8 3.567 8 5.5C8 3.567 9.567 2 11.5 2H15Z',
+    },
+    {
+      d: 'M1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9H11.5C9.567 9 8 10.567 8 12.5C8 10.567 6.433 9 4.5 9H1Z',
+    },
+  ],
+  [
+    {
+      d: 'M7.99948 0C6.89491 7.11679e-05 5.99954 0.895559 5.99961 2.00013C5.99968 3.1047 6.8957 4.00007 8.00027 4C9.10484 4.00007 10.0003 3.1047 10.0004 2.00013C10.0005 0.895559 9.1051 7.11679e-05 8.00053 0H7.99948Z',
+    },
+    {
+      d: 'M4.00001 7.99973C4.00008 6.89516 3.10471 5.99968 2.00014 5.9996C0.895567 5.99953 7.87973e-05 6.89491 7.62939e-06 7.99948V8.00052C7.87973e-05 9.10509 0.895567 10.0005 2.00014 10.0004C3.10471 10.0003 4.00008 9.1043 4.00001 7.99973Z',
+    },
+    {
+      d: 'M16 7.99948C15.9999 6.89491 15.1044 5.99953 13.9999 5.99961C12.8953 5.99968 11.9999 6.8957 12 8.00027C11.9999 9.10484 12.8953 10.0003 13.9999 10.0004C15.1044 10.0005 15.9999 9.10509 16 8.00052V7.99948Z',
+    },
+    {
+      d: 'M7.99974 12C6.89517 11.9999 5.99968 12.8953 5.99961 13.9999C5.99954 15.1044 6.89491 15.9999 7.99948 16H8.00053C9.1051 15.9999 10.0005 15.1044 10.0004 13.9999C10.0003 12.8953 9.10431 11.9999 7.99974 12Z',
+    },
+    {
+      d: 'M8.00001 11C9.65686 11 11 9.65685 11 8C11 6.34315 9.65686 5 8.00001 5C6.34315 5 5.00001 6.34315 5.00001 8C5.00001 9.65685 6.34315 11 8.00001 11Z',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 2.34315C11.5009 4.02205 8.33735 2.71168 8 0C7.66266 2.71168 4.49913 4.02205 2.34315 2.34315C4.02205 4.49913 2.71168 7.66266 0 8C2.71168 8.33735 4.02205 11.5009 2.34315 13.6569C4.49913 11.9779 7.66266 13.2883 8 16C8.33735 13.2883 11.5009 11.9779 13.6569 13.6569C11.9779 11.5009 13.2883 8.33735 16 8C13.2883 7.66266 11.9779 4.49913 13.6569 2.34315ZM12 8L8 4L4 8L8 12L12 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 13.6568C12.0059 10.0663 12.0059 5.93368 13.6569 2.34314C10.0663 3.99414 5.93368 3.99414 2.34315 2.34314C3.99414 5.93368 3.99414 10.0663 2.34315 13.6568C5.93368 12.0059 10.0663 12.0059 13.6569 13.6568ZM11 8L8 5L5 8L8 11L11 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M7.99948 0C6.89491 7.11679e-05 5.99954 0.895559 5.99961 2.00013C5.99968 3.1047 6.8957 4.00007 8.00027 4C9.10484 4.00007 10.0003 3.1047 10.0004 2.00013C10.0005 0.895559 9.1051 7.11679e-05 8.00053 0H7.99948Z',
+    },
+    {
+      d: 'M13.6565 2.34278C12.8754 1.56178 11.6091 1.56186 10.8281 2.34296C10.0471 3.12406 10.0475 4.39076 10.8286 5.17176C11.6096 5.95286 12.8759 5.95294 13.657 5.17194C14.4381 4.39094 14.4382 3.12461 13.6572 2.34352L13.6565 2.34278Z',
+    },
+    {
+      d: 'M5.17177 5.17139C5.95287 4.39039 5.95295 3.12406 5.17195 2.34296C4.39095 1.56186 3.12462 1.56178 2.34352 2.34278L2.34278 2.34352C1.56179 3.12462 1.56187 4.39094 2.34297 5.17194C3.12407 5.95294 4.39077 5.95249 5.17177 5.17139Z',
+    },
+    {
+      d: 'M4.00001 7.99973C4.00008 6.89516 3.10471 5.99968 2.00014 5.9996C0.895567 5.99953 7.87973e-05 6.89491 7.62939e-06 7.99948V8.00052C7.87973e-05 9.10509 0.895567 10.0005 2.00014 10.0004C3.10471 10.0003 4.00008 9.1043 4.00001 7.99973Z',
+    },
+    {
+      d: 'M16 7.99948C15.9999 6.89491 15.1044 5.99953 13.9999 5.99961C12.8953 5.99968 11.9999 6.8957 12 8.00027C11.9999 9.10484 12.8953 10.0003 13.9999 10.0004C15.1044 10.0005 15.9999 9.10509 16 8.00052V7.99948Z',
+    },
+    {
+      d: 'M5.1714 10.8282C4.3904 10.0471 3.12407 10.0471 2.34297 10.8281C1.56187 11.6091 1.56179 12.8754 2.34278 13.6565L2.34352 13.6572C3.12462 14.4382 4.39095 14.4381 5.17195 13.657C5.95295 12.8759 5.95249 11.6092 5.1714 10.8282Z',
+    },
+    {
+      d: 'M13.6572 13.6565C14.4382 12.8754 14.4381 11.6091 13.657 10.8281C12.8759 10.0471 11.6092 10.0475 10.8282 10.8286C10.0471 11.6096 10.0471 12.8759 10.8281 13.657C11.6091 14.4381 12.8754 14.4382 13.6565 13.6572L13.6572 13.6565Z',
+    },
+    {
+      d: 'M7.99974 12C6.89517 11.9999 5.99968 12.8953 5.99961 13.9999C5.99954 15.1044 6.89491 15.9999 7.99948 16H8.00053C9.1051 15.9999 10.0005 15.1044 10.0004 13.9999C10.0003 12.8953 9.10431 11.9999 7.99974 12Z',
+    },
+    {
+      d: 'M8.00001 11C9.65686 11 11 9.65685 11 8C11 6.34315 9.65686 5 8.00001 5C6.34315 5 5.00001 6.34315 5.00001 8C5.00001 9.65685 6.34315 11 8.00001 11Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 8C8 8 13.1678 6.70089 14.2197 5.649C15.2716 4.59712 15.2583 2.87836 14.19 1.81004C13.1216 0.741719 11.4029 0.728395 10.351 1.78028C9.29911 2.83216 8 8 8 8Z',
+    },
+    {
+      d: 'M8 8C8 8 13.1678 9.29911 14.2197 10.351C15.2716 11.4029 15.2583 13.1216 14.19 14.19C13.1216 15.2583 11.4029 15.2716 10.351 14.2197C9.29911 13.1678 8 8 8 8Z',
+    },
+    {
+      d: 'M1.78028 10.351C2.83216 9.29911 8 8 8 8C8 8 6.70089 13.1678 5.649 14.2197C4.59712 15.2716 2.87836 15.2583 1.81004 14.19C0.741719 13.1216 0.728395 11.4029 1.78028 10.351Z',
+    },
+    {
+      d: 'M8 8C8 8 2.83216 6.70089 1.78028 5.649C0.728395 4.59712 0.741719 2.87836 1.81004 1.81004C2.87836 0.741719 4.59712 0.728395 5.649 1.78028C6.70089 2.83216 8 8 8 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M13.6569 13.6568C12.0059 10.0663 12.0059 5.93368 13.6569 2.34314C10.0663 3.99414 5.93368 3.99414 2.34315 2.34314C3.99414 5.93368 3.99414 10.0663 2.34315 13.6568C5.93368 12.0059 10.0663 12.0059 13.6569 13.6568ZM8 11C9.65685 11 11 9.65686 11 8.00001C11 6.34315 9.65685 5.00001 8 5.00001C6.34315 5.00001 5 6.34315 5 8.00001C5 9.65686 6.34315 11 8 11Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M5.34749 1.59629C5.85108 0.646843 6.8496 0.000111103 7.99922 0H8.00078C9.1504 0.000111103 10.1489 0.646843 10.6525 1.59628C11.68 1.28102 12.8433 1.52977 13.6563 2.34259L13.6574 2.3437C14.4702 3.15668 14.719 4.32005 14.4037 5.34749C15.3532 5.85108 15.9999 6.8496 16 7.99922V8.00078C15.9999 9.1504 15.3532 10.1489 14.4037 10.6525C14.719 11.68 14.4702 12.8433 13.6574 13.6563L13.6563 13.6574C12.8433 14.4702 11.68 14.719 10.6525 14.4037C10.1489 15.3532 9.1504 15.9999 8.00078 16H7.99922C6.8496 15.9999 5.85108 15.3532 5.3475 14.4037C4.32005 14.719 3.15668 14.4702 2.3437 13.6574L2.34259 13.6563C1.52977 12.8433 1.28102 11.68 1.59629 10.6525C0.646843 10.1489 0.000111103 9.1504 0 8.00078V7.99922C0.000111103 6.8496 0.646843 5.85108 1.59628 5.34749C1.28102 4.32005 1.52977 3.15668 2.34259 2.3437L2.3437 2.34259C3.15668 1.52977 4.32005 1.28102 5.34749 1.59629ZM7.11693 5.86807C6.98022 6.12611 6.80322 6.3684 6.58593 6.58565C6.36868 6.80294 6.12611 6.98022 5.86807 7.11693C5.95387 7.39605 6.00003 7.69253 6 7.9998C6.00003 8.30706 5.95387 8.60395 5.86807 8.88307C6.12611 9.01978 6.3684 9.19678 6.58565 9.41407C6.80294 9.63132 6.98022 9.87389 7.11693 10.1319C7.39605 10.0461 7.69253 9.99997 7.9998 10C8.30706 9.99997 8.60394 10.0461 8.88307 10.1319C9.01978 9.87389 9.19678 9.6316 9.41407 9.41435C9.63132 9.19706 9.87389 9.01978 10.1319 8.88307C10.0461 8.60395 9.99997 8.30747 10 8.0002C9.99997 7.69294 10.0461 7.39605 10.1319 7.11693C9.87389 6.98022 9.6316 6.80322 9.41435 6.58593C9.19706 6.36868 9.01978 6.12611 8.88307 5.86807C8.60395 5.95387 8.30747 6.00003 8.0002 6C7.69294 6.00003 7.39605 5.95387 7.11693 5.86807Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M12.6045 11.8471C13.4757 10.8056 14 9.46402 14 8C14 6.53598 13.4756 5.19442 12.6045 4.15289L13.6832 2.76772C13.9157 2.46917 13.5308 2.08434 13.2323 2.31683L11.8471 3.39548C10.8056 2.52434 9.46402 2 8 2C6.53598 2 5.19443 2.52434 4.1529 3.39548L2.76773 2.31682C2.46918 2.08434 2.08435 2.46917 2.31684 2.76772L3.39549 4.15289C2.52435 5.19442 2 6.53598 2 8C2 9.46402 2.52435 10.8056 3.39548 11.8471L2.31684 13.2323C2.08435 13.5308 2.46918 13.9156 2.76773 13.6832L4.15289 12.6045C5.19442 13.4756 6.53598 14 8 14C9.46402 14 10.8056 13.4756 11.8471 12.6045L13.2323 13.6832C13.5308 13.9156 13.9156 13.5308 13.6832 13.2323L12.6045 11.8471ZM12.6045 11.8471L10.3747 8.9836L12.89 8.31882C13.2654 8.2721 13.2654 7.72787 12.8899 7.68116L10.3747 7.01637L12.6045 4.15289C12.375 3.87852 12.1215 3.62497 11.8471 3.39548L8.98361 5.62533L8.31883 3.11004C8.27212 2.73454 7.72788 2.73454 7.68117 3.11004L7.01639 5.62533L4.1529 3.39548C3.87853 3.62497 3.62498 3.87852 3.39549 4.15289L5.62535 7.01637L3.11005 7.68116C2.73455 7.72787 2.73455 8.27211 3.11005 8.31882L5.62535 8.9836L3.39548 11.8471C3.62497 12.1215 3.87852 12.375 4.15289 12.6045L7.01639 10.3746L7.68117 12.8899C7.72788 13.2654 8.27212 13.2654 8.31883 12.8899L8.98361 10.3746L11.8471 12.6045C12.1215 12.375 12.375 12.1215 12.6045 11.8471Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8.53781 0.379548C8.35784 -0.126516 7.64216 -0.126516 7.4622 0.379548L6.25252 3.78121L2.99181 2.23124C2.50672 2.00065 2.00065 2.50672 2.23124 2.99181L3.78121 6.25252L0.379548 7.4622C-0.126516 7.64216 -0.126516 8.35784 0.379548 8.53781L3.78121 9.74748L2.23124 13.0082C2.00065 13.4933 2.50672 13.9993 2.99181 13.7688L6.25252 12.2188L7.4622 15.6205C7.64216 16.1265 8.35784 16.1265 8.53781 15.6205L9.74748 12.2188L13.0082 13.7688C13.4933 13.9993 13.9993 13.4933 13.7688 13.0082L12.2188 9.74748L15.6205 8.53781C16.1265 8.35784 16.1265 7.64216 15.6205 7.4622L12.2188 6.25252L13.7688 2.99181C13.9993 2.50672 13.4933 2.00065 13.0082 2.23124L9.74748 3.78121L8.53781 0.379548ZM7.99994 10.9999C9.65679 10.9999 10.9999 9.65679 10.9999 7.99994C10.9999 6.34308 9.65679 4.99994 7.99994 4.99994C6.34308 4.99994 4.99994 6.34308 4.99994 7.99994C4.99994 9.65679 6.34308 10.9999 7.99994 10.9999Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M7.4622 0.379548C7.64216 -0.126516 8.35784 -0.126516 8.53781 0.379548L9.74748 3.78121L13.0082 2.23124C13.4933 2.00065 13.9993 2.50672 13.7688 2.99181L12.2188 6.25252L15.6205 7.4622C16.1265 7.64216 16.1265 8.35784 15.6205 8.53781L12.2188 9.74748L13.7688 13.0082C13.9993 13.4933 13.4933 13.9993 13.0082 13.7688L9.74748 12.2188L8.53781 15.6205C8.35784 16.1265 7.64216 16.1265 7.4622 15.6205L6.25252 12.2188L2.99181 13.7688C2.50672 13.9993 2.00065 13.4933 2.23124 13.0082L3.78121 9.74748L0.379548 8.53781C-0.126516 8.35784 -0.126516 7.64216 0.379548 7.4622L3.78121 6.25252L2.23124 2.99181C2.00065 2.50672 2.50672 2.00065 2.99181 2.23124L6.25252 3.78121L7.4622 0.379548Z',
+    },
+  ],
+  [
+    {
+      d: 'M4.4 2C3.07452 2 2 3.07452 2 4.4V11.6C2 12.9255 3.07452 14 4.4 14H11.6C12.9255 14 14 12.9255 14 11.6V4.4C14 3.07452 12.9255 2 11.6 2H4.4ZM8.70711 4.70711C8.31658 4.31658 7.68342 4.31658 7.29289 4.70711L4.70711 7.29289C4.31658 7.68342 4.31658 8.31658 4.70711 8.70711L7.29289 11.2929C7.68342 11.6834 8.31658 11.6834 8.70711 11.2929L11.2929 8.70711C11.6834 8.31658 11.6834 7.68342 11.2929 7.29289L8.70711 4.70711Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M15 1C11.134 1 8 4.13401 8 8H15V1Z',
+    },
+    {
+      d: 'M1 15C4.86599 15 8 11.866 8 8H1V15Z',
+    },
+    {
+      d: 'M15 15C15 11.134 11.866 8 8 8L8 15H15Z',
+    },
+    {
+      d: 'M1 1C1 4.86599 4.13401 8 8 8V1L1 1Z',
+    },
+  ],
+  [
+    {
+      d: 'M8.31883 0.281623C8.27212 -0.0938759 7.72788 -0.0938737 7.68117 0.281626L7.46446 2.02358C4.57807 2.27888 2.27889 4.57807 2.02358 7.46446L0.281623 7.68117C-0.0938759 7.72788 -0.0938737 8.27212 0.281626 8.31883L2.02358 8.53554C2.27889 11.4219 4.57807 13.7211 7.46446 13.9764L7.68117 15.7184C7.72788 16.0939 8.27212 16.0939 8.31883 15.7184L8.53554 13.9764C11.4219 13.7211 13.7211 11.4219 13.9764 8.53554L15.7184 8.31883C16.0939 8.27212 16.0939 7.72788 15.7184 7.68117L13.9764 7.46446C13.7211 4.57806 11.4219 2.27888 8.53554 2.02357L8.31883 0.281623ZM8.53554 2.02357C8.35911 2.00797 8.18049 2 8.00001 2C7.81952 2 7.64089 2.00797 7.46446 2.02358L7.01639 5.62535L4.76773 4.31684C4.46918 4.08435 4.08435 4.46918 4.31684 4.76773L5.62535 7.01639L2.02358 7.46446C2.00798 7.64089 2.00001 7.81951 2.00001 8C2.00001 8.18048 2.00798 8.35911 2.02358 8.53554L5.62535 8.98361L4.31684 11.2323C4.08435 11.5308 4.46918 11.9157 4.76773 11.6832L7.01639 10.3747L7.46446 13.9764C7.64089 13.992 7.81952 14 8.00001 14C8.18049 14 8.35911 13.992 8.53554 13.9764L8.98361 10.3747L11.2323 11.6832C11.5308 11.9157 11.9157 11.5308 11.6832 11.2323L10.3747 8.98361L13.9764 8.53554C13.992 8.35911 14 8.18048 14 8C14 7.81952 13.992 7.64089 13.9764 7.46446L10.3747 7.01639L11.6832 4.76773C11.9157 4.46918 11.5308 4.08435 11.2323 4.31684L8.98361 5.62535L8.53554 2.02357Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M2.34315 2.34315C5.46734 -0.781049 10.5327 -0.781049 13.6569 2.34315L10 6L8.70711 4.70711C8.31658 4.31658 7.68342 4.31658 7.2929 4.70711L6 6L2.34315 2.34315ZM8 8L6 6L4.70711 7.29289C4.31658 7.68342 4.31658 8.31658 4.70711 8.70711L6 10L2.34315 13.6569C5.46734 16.781 10.5327 16.781 13.6569 13.6569L10 10L11.2929 8.70711C11.6834 8.31658 11.6834 7.68342 11.2929 7.29289L10 6L8 8ZM8 8L10 10L8.70711 11.2929C8.31658 11.6834 7.68342 11.6834 7.2929 11.2929L6 10L8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8.53781 0.379548C8.35784 -0.126516 7.64216 -0.126516 7.4622 0.379548L6.25252 3.78121L2.99181 2.23124C2.50672 2.00065 2.00065 2.50672 2.23124 2.99181L3.78121 6.25252L0.379548 7.4622C-0.126516 7.64216 -0.126516 8.35784 0.379548 8.53781L3.78121 9.74748L2.23124 13.0082C2.00065 13.4933 2.50672 13.9993 2.99181 13.7688L6.25252 12.2188L7.4622 15.6205C7.64216 16.1265 8.35784 16.1265 8.53781 15.6205L9.74748 12.2188L13.0082 13.7688C13.4933 13.9993 13.9993 13.4933 13.7688 13.0082L12.2188 9.74748L15.6205 8.53781C16.1265 8.35784 16.1265 7.64216 15.6205 7.4622L12.2188 6.25252L13.7688 2.99181C13.9993 2.50672 13.4933 2.00065 13.0082 2.23124L9.74748 3.78121L8.53781 0.379548ZM10.9999 7.99994L7.99994 4.99994L4.99994 7.99994L7.99994 10.9999L10.9999 7.99994Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M2.34315 2.34315C5.46734 -0.781049 10.5327 -0.781049 13.6569 2.34315L10.8284 5.17157C10.1046 4.44772 9.10457 4 8 4C6.89543 4 5.89543 4.44772 5.17157 5.17157L2.34315 2.34315ZM8 8L5.17157 5.17157C4.44772 5.89543 4 6.89543 4 8C4 9.10457 4.44772 10.1046 5.17157 10.8284L2.34315 13.6569C5.46734 16.781 10.5327 16.781 13.6569 13.6569L10.8284 10.8284C11.5523 10.1046 12 9.10457 12 8C12 6.89543 11.5523 5.89543 10.8284 5.17157L8 8ZM8 8L10.8284 10.8284C10.1046 11.5523 9.10457 12 8 12C6.89543 12 5.89543 11.5523 5.17157 10.8284L8 8Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8.31882 0.281623C8.27211 -0.0938759 7.72788 -0.0938737 7.68116 0.281626L7.34298 2.99999H3V7.34299L0.281616 7.68117C-0.0938835 7.72788 -0.0938814 8.27212 0.281618 8.31883L3 8.65701V13H7.34298L7.68116 15.7184C7.72788 16.0939 8.27211 16.0939 8.31882 15.7184L8.657 13H13V8.65701L15.7184 8.31883C16.0939 8.27212 16.0939 7.72788 15.7184 7.68117L13 7.34299V2.99999H8.657L8.31882 0.281623ZM8.657 2.99999H7.34298L7.01638 5.62535L4.76772 4.31684C4.46917 4.08435 4.08434 4.46918 4.31683 4.76773L5.62534 7.01639L3 7.34299V8.65701L5.62534 8.98361L4.31683 11.2323C4.08434 11.5308 4.46917 11.9157 4.76772 11.6832L7.01638 10.3747L7.34298 13H8.657L8.98361 10.3747L11.2323 11.6832C11.5308 11.9157 11.9156 11.5308 11.6832 11.2323L10.3746 8.98361L13 8.65701V7.34299L10.3746 7.01639L11.6832 4.76773C11.9156 4.46918 11.5308 4.08435 11.2323 4.31684L8.98361 5.62535L8.657 2.99999Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M4.4 2C3.07452 2 2 3.07452 2 4.4V11.6C2 12.9255 3.07452 14 4.4 14H11.6C12.9255 14 14 12.9255 14 11.6V4.4C14 3.07452 12.9255 2 11.6 2H4.4ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+    {
+      d: 'M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z',
+    },
+  ],
+  [
+    {
+      d: 'M2 3C5.31371 3 8 5.68629 8 9C8 5.68629 10.6863 3 14 3L14 9C14 12.3137 11.3137 15 8 15C4.68629 15 2 12.3137 2 9V3Z',
+    },
+  ],
+  [
+    {
+      d: 'M7.46226 0.379609C7.64222 -0.126455 8.3579 -0.126455 8.53787 0.379609L9.74754 3.78127L13.0082 2.2313C13.4933 2.00071 13.9994 2.50678 13.7688 2.99187L12.2189 6.25258L15.6205 7.46226C16.1266 7.64222 16.1266 8.3579 15.6205 8.53787L12.2189 9.74754L13.7688 13.0082C13.9994 13.4933 13.4933 13.9994 13.0082 13.7688L9.74754 12.2189L8.53787 15.6205C8.3579 16.1266 7.64222 16.1266 7.46226 15.6205L6.25258 12.2189L2.99187 13.7688C2.50678 13.9994 2.00071 13.4933 2.2313 13.0082L3.78127 9.74754L0.379609 8.53787C-0.126455 8.3579 -0.126455 7.64222 0.379609 7.46226L3.78127 6.25258L2.2313 2.99187C2.00071 2.50678 2.50678 2.00071 2.99187 2.2313L6.25258 3.78127L7.46226 0.379609Z',
+    },
+  ],
+  [
+    {
+      d: 'M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z',
+    },
+    {
+      d: 'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8.67438 3.27934L12.7207 7.32562C13.0931 7.69807 13.0931 8.30193 12.7207 8.67438L8.67438 12.7207C8.30193 13.0931 7.69807 13.0931 7.32562 12.7207L3.27934 8.67438C2.90689 8.30193 2.90689 7.69807 3.27934 7.32562L7.32562 3.27934C7.69807 2.90689 8.30193 2.90689 8.67438 3.27934Z',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+    },
+  ],
+  [
+    {
+      d: 'M13.2323 2.31683C13.5308 2.08434 13.9156 2.46917 13.6832 2.76772L10.3747 7.01637L12.8899 7.68116C13.2654 7.72787 13.2654 8.2721 12.89 8.31882L10.3747 8.9836L13.6832 13.2323C13.9156 13.5308 13.5308 13.9156 13.2323 13.6832L8.98361 10.3746L8.31883 12.8899C8.27212 13.2654 7.72788 13.2654 7.68117 12.8899L7.01639 10.3746L2.76773 13.6832C2.46918 13.9156 2.08435 13.5308 2.31684 13.2323L5.62535 8.9836L3.11005 8.31882C2.73455 8.27211 2.73455 7.72787 3.11005 7.68116L5.62535 7.01637L2.31684 2.76772C2.08435 2.46917 2.46918 2.08434 2.76773 2.31682L7.01639 5.62533L7.68117 3.11004C7.72788 2.73454 8.27212 2.73454 8.31883 3.11004L8.98361 5.62533L13.2323 2.31683Z',
+    },
+  ],
+  [
+    {
+      d: 'M7.68116 0.281626C7.72788 -0.0938737 8.27211 -0.0938759 8.31882 0.281623L8.98361 5.62535L11.2323 4.31684C11.5308 4.08435 11.9156 4.46918 11.6832 4.76773L10.3746 7.01639L15.7184 7.68117C16.0939 7.72788 16.0939 8.27212 15.7184 8.31883L10.3746 8.98361L11.6832 11.2323C11.9156 11.5308 11.5308 11.9157 11.2323 11.6832L8.98361 10.3747L8.31882 15.7184C8.27211 16.0939 7.72788 16.0939 7.68116 15.7184L7.01638 10.3747L4.76772 11.6832C4.46917 11.9157 4.08434 11.5308 4.31683 11.2323L5.62534 8.98361L0.281618 8.31883C-0.0938814 8.27212 -0.0938835 7.72788 0.281616 7.68117L5.62534 7.01639L4.31683 4.76773C4.08434 4.46918 4.46917 4.08435 4.76772 4.31684L7.01638 5.62535L7.68116 0.281626Z',
+    },
+  ],
+  [
+    {
+      d: 'M14 13C10.6863 13 8 10.3137 8 7C8 10.3137 5.31371 13 2 13L2 7C2 3.68629 4.68629 0.999999 8 1C11.3137 0.999999 14 3.68629 14 7L14 13Z',
+    },
+  ],
+]

src/components/Unicon/index.tsx

@@ -0,0 +1,162 @@
+import React, { memo, useMemo } from 'react'
+import { useIsDarkMode } from 'state/user/hooks'
+
+import { blurs, UniconAttributeData, UniconAttributes, UniconAttributesToIndices } from './types'
+import { deriveUniconAttributeIndices, getUniconAttributeData, isEthAddress } from './utils'
+
+const ORIGINAL_CONTAINER_SIZE = 36
+const EMBLEM_XY_SHIFT = 10
+
+function PathMask({
+  id,
+  paths,
+  scale,
+  shift = 0,
+}: {
+  id: string
+  paths: React.SVGProps<SVGPathElement>[]
+  scale: number
+  shift?: number
+}) {
+  return (
+    <mask id={id}>
+      <rect x="0" y="0" width="100%" height="100%" fill="white" />
+      <g transform={`scale(${scale}) \n translate(${shift}, ${shift})`}>
+        {paths.map((pathProps) => (
+          <path key={pathProps.d as string} {...pathProps} fill="black" />
+        ))}
+      </g>
+    </mask>
+  )
+}
+
+type UniconMaskProps = { maskId: string; attributeData: UniconAttributeData; size: number }
+function UniconMask({ maskId, attributeData, size }: UniconMaskProps) {
+  const shapeMaskId = `shape-${maskId}`
+  const containerMaskId = `container-${maskId}`
+
+  return (
+    <defs>
+      <PathMask
+        id={containerMaskId}
+        paths={attributeData[UniconAttributes.Container]}
+        scale={size / ORIGINAL_CONTAINER_SIZE}
+      />
+      <PathMask
+        id={shapeMaskId}
+        paths={attributeData[UniconAttributes.Shape]}
+        scale={size / ORIGINAL_CONTAINER_SIZE}
+        shift={EMBLEM_XY_SHIFT}
+      />
+      <mask id={maskId}>
+        <g fill="white">
+          <g mask={`url(#${shapeMaskId})`}>
+            <g transform={`scale(${size / ORIGINAL_CONTAINER_SIZE})`}>
+              {attributeData[UniconAttributes.Container].map((pathProps) => (
+                <path key={pathProps.d as string} {...pathProps} />
+              ))}
+            </g>
+          </g>
+          <g mask={`url(#${containerMaskId})`}>
+            <g
+              transform={`scale(${size / ORIGINAL_CONTAINER_SIZE})
+        translate(10, 10)`}
+            >
+              {attributeData[UniconAttributes.Shape].map((pathProps) => (
+                <path key={pathProps.d as string} {...pathProps} />
+              ))}
+            </g>
+          </g>
+        </g>
+      </mask>
+    </defs>
+  )
+}
+
+type UniconGradientProps = { gradientId: string; attributeData: UniconAttributeData }
+function UniconGradient({ gradientId, attributeData }: UniconGradientProps) {
+  return (
+    <linearGradient id={gradientId}>
+      <stop offset="0%" stopColor={attributeData[UniconAttributes.GradientStart]} />
+      <stop offset="100%" stopColor={attributeData[UniconAttributes.GradientEnd]} />
+    </linearGradient>
+  )
+}
+
+function UniconBlur({ blurId, size }: { blurId: string; size: number }) {
+  return (
+    <filter id={blurId} x="-50%" y="-50%" height="200%" width="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation={size / 3} />
+    </filter>
+  )
+}
+
+function UniconSvg({
+  attributeIndices,
+  size,
+  address,
+}: {
+  attributeIndices: UniconAttributesToIndices
+  size: number
+  address: string
+  mobile?: boolean
+}) {
+  const isDarkMode = useIsDarkMode()
+  const attributeData = useMemo(() => getUniconAttributeData(attributeIndices), [attributeIndices])
+
+  const gradientId = `gradient${address + size}`
+  const maskId = `mask${address + size}`
+  const blurId = `blur${address + size}`
+  const svgProps = {
+    viewBox: `0 0 ${size} ${size}`,
+  }
+
+  if (!attributeIndices || !attributeData) return null
+
+  return (
+    <svg {...svgProps}>
+      <defs>
+        <UniconMask maskId={maskId} attributeData={attributeData} size={size} />
+        <UniconGradient gradientId={gradientId} attributeData={attributeData} />
+        <UniconBlur blurId={blurId} size={size} />
+      </defs>
+
+      <g mask={`url(#${maskId})`}>
+        <rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
+        {!isDarkMode && <rect x="0" y="0" width="100%" height="100%" fill="black" opacity={0.08} />}
+        <ellipse
+          cx={size / 2}
+          cy={0}
+          rx={size / 2}
+          ry={size / 2}
+          fill={blurs[attributeIndices[UniconAttributes.GradientStart]]}
+          filter={`url(#${blurId})`}
+        />
+      </g>
+    </svg>
+  )
+}
+
+interface Props {
+  address: string
+  size?: number
+  randomSeed?: number
+  border?: boolean
+  mobile?: boolean
+}
+
+function _Unicon({ address, size = 24, randomSeed = 0, mobile }: Props) {
+  const attributeIndices = useMemo(() => deriveUniconAttributeIndices(address, randomSeed), [address, randomSeed])
+
+  if (!address || !isEthAddress(address) || !attributeIndices) return null
+
+  return (
+    <div style={{ height: size, width: size, position: 'relative' }}>
+      <div style={{ height: size, width: size, overflow: 'visible', position: 'absolute' }}>
+        <UniconSvg attributeIndices={attributeIndices} size={size} address={address} mobile={mobile} />
+      </div>
+    </div>
+  )
+}
+
+export const Unicon = memo(_Unicon)

src/components/Unicon/types.ts

@@ -0,0 +1,76 @@
+import { svgPaths as containerPaths } from './Container'
+import { svgPaths as emblemPaths } from './Emblem'
+
+export enum UniconAttributes {
+  GradientStart = 0,
+  GradientEnd = 1,
+  Container = 2,
+  Shape = 3,
+}
+
+export const UniconAttributesArray: UniconAttributes[] = [
+  UniconAttributes.GradientStart,
+  UniconAttributes.GradientEnd,
+  UniconAttributes.Container,
+  UniconAttributes.Shape,
+]
+
+export interface UniconAttributesToIndices {
+  [UniconAttributes.GradientStart]: number
+  [UniconAttributes.GradientEnd]: number
+  [UniconAttributes.Container]: number
+  [UniconAttributes.Shape]: number
+}
+
+export interface UniconAttributeData {
+  [UniconAttributes.GradientStart]: string
+  [UniconAttributes.GradientEnd]: string
+  [UniconAttributes.Container]: React.SVGProps<SVGPathElement>[]
+  [UniconAttributes.Shape]: React.SVGProps<SVGPathElement>[]
+}
+
+export const gradientStarts = [
+  '#6100FF',
+  '#5065FD',
+  '#36DBFF',
+  '#5CFE9D',
+  '#B1F13C',
+  '#F9F40B',
+  '#FF6F1E',
+  '#F14544',
+  '#FC72FF',
+  '#C0C0C0',
+]
+
+export const blurs = [
+  '#D3EBA3',
+  '#F06DF3',
+  '#9D99F5',
+  '#EDE590',
+  '#B0EDFE',
+  '#FBAA7F',
+  '#C8BB9B',
+  '#9D99F5',
+  '#A26AF3',
+  '#D3EBA3',
+]
+
+export const gradientEnds = [
+  '#D0B2F3',
+  '#BDB8FA',
+  '#63CDE8',
+  '#76D191',
+  '#9BCD46',
+  '#EDE590',
+  '#FBAA7F',
+  '#FEA79B',
+  '#F5A1F5',
+  '#B8C3B7',
+]
+
+export const UniconNumOptions = {
+  [UniconAttributes.GradientStart]: gradientStarts.length,
+  [UniconAttributes.GradientEnd]: gradientEnds.length,
+  [UniconAttributes.Container]: containerPaths.length,
+  [UniconAttributes.Shape]: emblemPaths.length,
+}

src/components/Unicon/utils.ts

@@ -0,0 +1,50 @@
+import { isAddress } from 'ethers/lib/utils'
+
+import { svgPaths as containerPaths } from './Container'
+import { svgPaths as emblemPaths } from './Emblem'
+import {
+  gradientEnds,
+  gradientStarts,
+  UniconAttributeData,
+  UniconAttributes,
+  UniconAttributesArray,
+  UniconAttributesToIndices,
+  UniconNumOptions,
+} from './types'
+
+const NUM_CHARS_TO_USE_PER_ATTRIBUTE = 2
+
+export const isEthAddress = (address: string) => {
+  return address.startsWith('0x') && isAddress(address.toLowerCase())
+}
+
+export const deriveUniconAttributeIndices = (
+  address: string,
+  randomSeed = 0
+): UniconAttributesToIndices | undefined => {
+  if (!isEthAddress(address)) return
+
+  const hexAddr = address.slice(-40)
+  const newIndices = {
+    [UniconAttributes.GradientStart]: 0,
+    [UniconAttributes.GradientEnd]: 0,
+    [UniconAttributes.Container]: 0,
+    [UniconAttributes.Shape]: 0,
+  } as UniconAttributesToIndices
+  for (const a of UniconAttributesArray) {
+    const optionHex = hexAddr.slice(NUM_CHARS_TO_USE_PER_ATTRIBUTE * a, NUM_CHARS_TO_USE_PER_ATTRIBUTE * (a + 1))
+    const optionDec = parseInt(optionHex, 16) + randomSeed
+    const optionIndex = optionDec % UniconNumOptions[a]
+    newIndices[a] = optionIndex
+  }
+  return newIndices
+}
+
+export const getUniconAttributeData = (attributeIndices: UniconAttributesToIndices): UniconAttributeData => {
+  return {
+    [UniconAttributes.GradientStart]: gradientStarts[attributeIndices[UniconAttributes.GradientStart]],
+    [UniconAttributes.GradientEnd]: gradientEnds[attributeIndices[UniconAttributes.GradientEnd]],
+    [UniconAttributes.Container]: containerPaths[attributeIndices[UniconAttributes.Container]],
+    [UniconAttributes.Shape]: emblemPaths[attributeIndices[UniconAttributes.Shape]],
+  } as UniconAttributeData
+}

src/components/Web3Status/index.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
@@ -242,6 +242,7 @@ function Web3StatusInner() {
     const chevronProps = {
       ...CHEVRON_PROPS,
       color: theme.textSecondary,
+      'aria-label': walletIsOpen ? t`Close wallet connection options` : t`Open wallet connection options`,
     }
 
     return (
@@ -251,7 +252,7 @@ function Web3StatusInner() {
         pending={hasPendingTransactions}
         isClaimAvailable={isClaimAvailable}
       >
-        {!hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
+        {!hasPendingTransactions && <StatusIcon enableInfotips={true} size={24} connectionType={connectionType} />}
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
@@ -272,6 +273,7 @@ function Web3StatusInner() {
       ...CHEVRON_PROPS,
       color: theme.accentAction,
       'data-testid': 'navbar-wallet-dropdown',
+      'aria-label': walletIsOpen ? t`Close wallet connection options` : t`Open wallet connection options`,
     }
     return (
       <TraceEvent

src/components/Widget/index.tsx

@@ -57,7 +57,7 @@ export default function Widget({
   onDefaultTokenChange,
   onReviewSwapClick,
 }: WidgetProps) {
-  const { connector, provider } = useWeb3React()
+  const { connector, provider, chainId } = useWeb3React()
   const locale = useActiveLocale()
   const theme = useWidgetTheme()
   const { inputs, tokenSelector } = useSyncWidgetInputs({
@@ -169,7 +169,7 @@ export default function Widget({
         locale={locale}
         theme={theme}
         width={width}
-        // defaultChainId is excluded - it is always inferred from the passed provider
+        defaultChainId={chainId}
         onConnectWalletClick={onConnectWalletClick}
         provider={provider}
         onSwitchChain={onSwitchChain}
@@ -183,6 +183,9 @@ export default function Widget({
         onSwapApprove={onApproveToken}
         onInitialSwapQuote={onInitialSwapQuote}
         onSwapPriceUpdateAck={onSwapPriceUpdateAck}
+        onError={(error, errorInfo) => {
+          sendAnalyticsEvent(SwapEventName.SWAP_ERROR, { error, errorInfo, ...trace })
+        }}
       />
       {tokenSelector}
     </>

src/components/Widget/inputs.tsx

@@ -1,7 +1,9 @@
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { InterfaceSectionName, SwapEventName } from '@uniswap/analytics-events'
 import { Currency, Field, SwapController, SwapEventHandlers, TradeType } from '@uniswap/widgets'
+import { useWeb3React } from '@web3-react/core'
 import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
+import usePrevious from 'hooks/usePrevious'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 const EMPTY_AMOUNT = ''
@@ -29,24 +31,35 @@ export function useSyncWidgetInputs({
 }) {
   const trace = useTrace({ section: InterfaceSectionName.WIDGET })
 
+  const { chainId } = useWeb3React()
+  const previousChainId = usePrevious(chainId)
+
   const [type, setType] = useState<SwapValue['type']>(TradeType.EXACT_INPUT)
   const [amount, setAmount] = useState<SwapValue['amount']>(EMPTY_AMOUNT)
   const [tokens, setTokens] = useState<SwapTokens>(defaultTokens)
 
   useEffect(() => {
     if (!tokens[Field.INPUT] && !tokens[Field.OUTPUT]) {
-      setTokens((tokens) => {
-        const update = {
-          ...tokens,
-          [Field.INPUT]: defaultTokens[Field.INPUT] ?? tokens[Field.INPUT],
-          [Field.OUTPUT]: defaultTokens[Field.OUTPUT] ?? tokens[Field.OUTPUT] ?? defaultTokens.default,
-          default: defaultTokens.default,
-        }
-        return update
+      setTokens({
+        ...tokens,
+        [Field.INPUT]: defaultTokens[Field.INPUT] ?? tokens[Field.INPUT],
+        [Field.OUTPUT]: defaultTokens[Field.OUTPUT] ?? tokens[Field.OUTPUT] ?? defaultTokens.default,
+        default: defaultTokens.default,
       })
     }
   }, [defaultTokens, tokens])
 
+  useEffect(() => {
+    if (chainId !== previousChainId && !!previousChainId) {
+      setTokens({
+        ...tokens,
+        [Field.INPUT]: undefined,
+        [Field.OUTPUT]: undefined,
+      })
+      setAmount(EMPTY_AMOUNT)
+    }
+  }, [chainId, previousChainId, tokens])
+
   const onAmountChange = useCallback(
     (field: Field, amount: string, origin?: 'max') => {
       if (origin === 'max') {

src/constants/TokenLogoLookupTable.ts

@@ -9,8 +9,12 @@ class TokenLogoLookupTable {
   initialize() {
     const dict: { [key: string]: string[] | undefined } = {}
 
-    DEFAULT_LIST_OF_LISTS.forEach((list) =>
-      store.getState().lists.byUrl[list].current?.tokens.forEach((token) => {
+    DEFAULT_LIST_OF_LISTS.forEach((list) => {
+      const listData = store.getState().lists.byUrl[list]
+      if (!listData) {
+        return
+      }
+      listData.current?.tokens.forEach((token) => {
         if (token.logoURI) {
           const lowercaseAddress = token.address.toLowerCase()
           const currentEntry = dict[lowercaseAddress + ':' + token.chainId]
@@ -21,7 +25,7 @@ class TokenLogoLookupTable {
           }
         }
       })
-    )
+    })
     this.dict = dict
     this.initialized = true
   }

src/constants/addresses.ts

@@ -1,8 +1,8 @@
 import { FACTORY_ADDRESS as V2_FACTORY_ADDRESS } from '@uniswap/v2-sdk'
 import { FACTORY_ADDRESS as V3_FACTORY_ADDRESS } from '@uniswap/v3-sdk'
+import { SupportedChainId } from 'constants/chains'
 
 import { constructSameAddressMap } from '../utils/constructSameAddressMap'
-import { SupportedChainId } from './chains'
 
 type AddressMap = { [chainId: number]: string }
 
@@ -22,29 +22,38 @@ const CELO_QUOTER_ADDRESSES = '0x82825d0554fA07f7FC52Ab63c961F330fdEFa8E8'
 const CELO_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = '0x3d79EdAaBC0EaB6F08ED885C05Fc0B014290D95A'
 const CELO_TICK_LENS_ADDRESSES = '0x5f115D9113F88e0a0Db1b5033D90D4a9690AcD3D'
 
+// arbitrum goerli v3 addresses
+const ARBITRUM_GOERLI_V3_CORE_FACTORY_ADDRESSES = '0x4893376342d5D7b3e31d4184c08b265e5aB2A3f6'
+const ARBITRUM_GOERLI_ROUTER_ADDRESS = '0xab7664500b19a7a2362Ab26081e6DfB971B6F1B0'
+const ARBITRUM_GOERLI_V3_MIGRATOR_ADDRESSES = '0xA815919D2584Ac3F76ea9CB62E6Fd40a43BCe0C3'
+const ARBITRUM_GOERLI_MULTICALL_ADDRESS = '0x8260CB40247290317a4c062F3542622367F206Ee'
+const ARBITRUM_GOERLI_QUOTER_ADDRESSES = '0x1dd92b83591781D0C6d98d07391eea4b9a6008FA'
+const ARBITRUM_GOERLI_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = '0x622e4726a167799826d1E1D150b076A7725f5D81'
+const ARBITRUM_GOERLI_TICK_LENS_ADDRESSES = '0xb52429333da969a0C79a60930a4Bf0020E5D1DE8'
+
 /* V3 Contract Addresses */
 export const V3_CORE_FACTORY_ADDRESSES: AddressMap = {
   ...constructSameAddressMap(V3_FACTORY_ADDRESS, [
     SupportedChainId.OPTIMISM,
     SupportedChainId.OPTIMISM_GOERLI,
     SupportedChainId.ARBITRUM_ONE,
-    SupportedChainId.ARBITRUM_RINKEBY,
     SupportedChainId.POLYGON_MUMBAI,
     SupportedChainId.POLYGON,
   ]),
   [SupportedChainId.CELO]: CELO_V3_CORE_FACTORY_ADDRESSES,
   [SupportedChainId.CELO_ALFAJORES]: CELO_V3_CORE_FACTORY_ADDRESSES,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_V3_CORE_FACTORY_ADDRESSES,
 }
 
 export const V3_MIGRATOR_ADDRESSES: AddressMap = {
   ...constructSameAddressMap('0xA5644E29708357803b5A882D272c41cC0dF92B34', [
     SupportedChainId.ARBITRUM_ONE,
-    SupportedChainId.ARBITRUM_RINKEBY,
     SupportedChainId.POLYGON_MUMBAI,
     SupportedChainId.POLYGON,
   ]),
   [SupportedChainId.CELO]: CELO_V3_MIGRATOR_ADDRESSES,
   [SupportedChainId.CELO_ALFAJORES]: CELO_V3_MIGRATOR_ADDRESSES,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_V3_MIGRATOR_ADDRESSES,
 }
 
 export const MULTICALL_ADDRESS: AddressMap = {
@@ -55,9 +64,9 @@ export const MULTICALL_ADDRESS: AddressMap = {
     SupportedChainId.POLYGON,
   ]),
   [SupportedChainId.ARBITRUM_ONE]: '0xadF885960B47eA2CD9B55E6DAc6B42b7Cb2806dB',
-  [SupportedChainId.ARBITRUM_RINKEBY]: '0xa501c031958F579dB7676fF1CE78AD305794d579',
   [SupportedChainId.CELO]: CELO_MULTICALL_ADDRESS,
   [SupportedChainId.CELO_ALFAJORES]: CELO_MULTICALL_ADDRESS,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_MULTICALL_ADDRESS,
 }
 
 export const SWAP_ROUTER_ADDRESSES: AddressMap = {
@@ -65,12 +74,12 @@ export const SWAP_ROUTER_ADDRESSES: AddressMap = {
     SupportedChainId.OPTIMISM,
     SupportedChainId.OPTIMISM_GOERLI,
     SupportedChainId.ARBITRUM_ONE,
-    SupportedChainId.ARBITRUM_RINKEBY,
     SupportedChainId.POLYGON,
     SupportedChainId.POLYGON_MUMBAI,
   ]),
   [SupportedChainId.CELO]: CELO_ROUTER_ADDRESS,
   [SupportedChainId.CELO_ALFAJORES]: CELO_ROUTER_ADDRESS,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_ROUTER_ADDRESS,
 }
 
 /**
@@ -107,12 +116,12 @@ export const QUOTER_ADDRESSES: AddressMap = {
     SupportedChainId.OPTIMISM,
     SupportedChainId.OPTIMISM_GOERLI,
     SupportedChainId.ARBITRUM_ONE,
-    SupportedChainId.ARBITRUM_RINKEBY,
     SupportedChainId.POLYGON_MUMBAI,
     SupportedChainId.POLYGON,
   ]),
   [SupportedChainId.CELO]: CELO_QUOTER_ADDRESSES,
   [SupportedChainId.CELO_ALFAJORES]: CELO_QUOTER_ADDRESSES,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_QUOTER_ADDRESSES,
 }
 
 export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = {
@@ -120,19 +129,17 @@ export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = {
     SupportedChainId.OPTIMISM,
     SupportedChainId.OPTIMISM_GOERLI,
     SupportedChainId.ARBITRUM_ONE,
-    SupportedChainId.ARBITRUM_RINKEBY,
     SupportedChainId.POLYGON_MUMBAI,
     SupportedChainId.POLYGON,
   ]),
   [SupportedChainId.CELO]: CELO_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
   [SupportedChainId.CELO_ALFAJORES]: CELO_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
 }
 
 export const ENS_REGISTRAR_ADDRESSES: AddressMap = {
   [SupportedChainId.MAINNET]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
-  [SupportedChainId.ROPSTEN]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
   [SupportedChainId.GOERLI]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
-  [SupportedChainId.RINKEBY]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
 }
 
 export const SOCKS_CONTROLLER_ADDRESSES: AddressMap = {
@@ -141,7 +148,7 @@ export const SOCKS_CONTROLLER_ADDRESSES: AddressMap = {
 
 export const TICK_LENS_ADDRESSES: AddressMap = {
   [SupportedChainId.ARBITRUM_ONE]: '0xbfd8137f7d1516D3ea5cA83523914859ec47F573',
-  [SupportedChainId.ARBITRUM_RINKEBY]: '0xbfd8137f7d1516D3ea5cA83523914859ec47F573',
+  [SupportedChainId.ARBITRUM_GOERLI]: ARBITRUM_GOERLI_TICK_LENS_ADDRESSES,
   [SupportedChainId.CELO]: CELO_TICK_LENS_ADDRESSES,
   [SupportedChainId.CELO_ALFAJORES]: CELO_TICK_LENS_ADDRESSES,
 }

src/constants/chainInfo.ts

@@ -5,10 +5,11 @@ import { default as arbitrumCircleLogoUrl, default as arbitrumLogoUrl } from 'as
 import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
 import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
+import { SupportedChainId } from 'constants/chains'
 import ms from 'ms.macro'
 import { darkTheme } from 'theme/colors'
 
-import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
+import { SupportedL1ChainId, SupportedL2ChainId } from './chains'
 import { ARBITRUM_LIST, CELO_LIST, OPTIMISM_LIST } from './lists'
 
 export const AVERAGE_L1_BLOCK_TIME = ms`12s`
@@ -64,36 +65,6 @@ const CHAIN_INFO: ChainInfoMap = {
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
     color: darkTheme.chain_1,
   },
-  [SupportedChainId.RINKEBY]: {
-    networkType: NetworkType.L1,
-    docs: 'https://docs.uniswap.org/',
-    explorer: 'https://rinkeby.etherscan.io/',
-    infoLink: 'https://info.uniswap.org/#/',
-    label: 'Rinkeby',
-    logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
-    color: darkTheme.chain_4,
-  },
-  [SupportedChainId.ROPSTEN]: {
-    networkType: NetworkType.L1,
-    docs: 'https://docs.uniswap.org/',
-    explorer: 'https://ropsten.etherscan.io/',
-    infoLink: 'https://info.uniswap.org/#/',
-    label: 'Ropsten',
-    logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: 'Ropsten Ether', symbol: 'ropETH', decimals: 18 },
-    color: darkTheme.chain_3,
-  },
-  [SupportedChainId.KOVAN]: {
-    networkType: NetworkType.L1,
-    docs: 'https://docs.uniswap.org/',
-    explorer: 'https://kovan.etherscan.io/',
-    infoLink: 'https://info.uniswap.org/#/',
-    label: 'Kovan',
-    logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: 'Kovan Ether', symbol: 'kovETH', decimals: 18 },
-    color: darkTheme.chain_420,
-  },
   [SupportedChainId.GOERLI]: {
     networkType: NetworkType.L1,
     docs: 'https://docs.uniswap.org/',
@@ -153,19 +124,19 @@ const CHAIN_INFO: ChainInfoMap = {
     color: darkTheme.chain_42,
     backgroundColor: darkTheme.chain_42161_background,
   },
-  [SupportedChainId.ARBITRUM_RINKEBY]: {
+  [SupportedChainId.ARBITRUM_GOERLI]: {
     networkType: NetworkType.L2,
     blockWaitMsBeforeWarning: ms`10m`,
     bridge: 'https://bridge.arbitrum.io/',
     docs: 'https://offchainlabs.com/',
-    explorer: 'https://rinkeby-explorer.arbitrum.io/',
+    explorer: 'https://goerli.arbiscan.io/',
     infoLink: 'https://info.uniswap.org/#/arbitrum/',
-    label: 'Arbitrum Rinkeby',
+    label: 'Arbitrum Goerli',
     logoUrl: arbitrumLogoUrl,
-    defaultListUrl: ARBITRUM_LIST,
+    defaultListUrl: ARBITRUM_LIST, // TODO: use arbitrum goerli token list
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
-    nativeCurrency: { name: 'Rinkeby Arbitrum Ether', symbol: 'rinkArbETH', decimals: 18 },
-    color: darkTheme.chain_421611,
+    nativeCurrency: { name: 'Goerli Arbitrum Ether', symbol: 'goerliArbETH', decimals: 18 },
+    color: darkTheme.chain_421613,
   },
   [SupportedChainId.POLYGON]: {
     networkType: NetworkType.L1,

src/constants/chains.ts

@@ -1,15 +1,13 @@
 /**
  * List of all the networks supported by the Uniswap Interface
+ * TODO(INFRA-90): Eventually this may be derived from sdk-core.
  */
 export enum SupportedChainId {
   MAINNET = 1,
-  ROPSTEN = 3,
-  RINKEBY = 4,
   GOERLI = 5,
-  KOVAN = 42,
 
   ARBITRUM_ONE = 42161,
-  ARBITRUM_RINKEBY = 421611,
+  ARBITRUM_GOERLI = 421613,
 
   OPTIMISM = 10,
   OPTIMISM_GOERLI = 420,
@@ -23,16 +21,13 @@ export enum SupportedChainId {
 
 export const CHAIN_IDS_TO_NAMES = {
   [SupportedChainId.MAINNET]: 'mainnet',
-  [SupportedChainId.ROPSTEN]: 'ropsten',
-  [SupportedChainId.RINKEBY]: 'rinkeby',
   [SupportedChainId.GOERLI]: 'goerli',
-  [SupportedChainId.KOVAN]: 'kovan',
   [SupportedChainId.POLYGON]: 'polygon',
   [SupportedChainId.POLYGON_MUMBAI]: 'polygon_mumbai',
   [SupportedChainId.CELO]: 'celo',
   [SupportedChainId.CELO_ALFAJORES]: 'celo_alfajores',
   [SupportedChainId.ARBITRUM_ONE]: 'arbitrum',
-  [SupportedChainId.ARBITRUM_RINKEBY]: 'arbitrum_rinkeby',
+  [SupportedChainId.ARBITRUM_GOERLI]: 'arbitrum_goerli',
   [SupportedChainId.OPTIMISM]: 'optimism',
   [SupportedChainId.OPTIMISM_GOERLI]: 'optimism_goerli',
 }
@@ -63,15 +58,13 @@ export const UNSUPPORTED_V2POOL_CHAIN_IDS = [
   SupportedChainId.POLYGON,
   SupportedChainId.OPTIMISM,
   SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_GOERLI,
 ]
 
 export const TESTNET_CHAIN_IDS = [
-  SupportedChainId.ROPSTEN,
-  SupportedChainId.RINKEBY,
   SupportedChainId.GOERLI,
-  SupportedChainId.KOVAN,
   SupportedChainId.POLYGON_MUMBAI,
-  SupportedChainId.ARBITRUM_RINKEBY,
+  SupportedChainId.ARBITRUM_GOERLI,
   SupportedChainId.OPTIMISM_GOERLI,
 ] as const
 
@@ -82,10 +75,7 @@ export type SupportedTestnetChainId = typeof TESTNET_CHAIN_IDS[number]
  */
 export const L1_CHAIN_IDS = [
   SupportedChainId.MAINNET,
-  SupportedChainId.ROPSTEN,
-  SupportedChainId.RINKEBY,
   SupportedChainId.GOERLI,
-  SupportedChainId.KOVAN,
   SupportedChainId.POLYGON,
   SupportedChainId.POLYGON_MUMBAI,
   SupportedChainId.CELO,
@@ -100,7 +90,7 @@ export type SupportedL1ChainId = typeof L1_CHAIN_IDS[number]
  */
 export const L2_CHAIN_IDS = [
   SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.ARBITRUM_RINKEBY,
+  SupportedChainId.ARBITRUM_GOERLI,
   SupportedChainId.OPTIMISM,
   SupportedChainId.OPTIMISM_GOERLI,
 ] as const

src/constants/governance.ts

@@ -1,3 +1,5 @@
+import { SupportedChainId } from 'constants/chains'
+
 import {
   GOVERNANCE_ALPHA_V0_ADDRESSES,
   GOVERNANCE_ALPHA_V1_ADDRESSES,
@@ -5,7 +7,6 @@ import {
   TIMELOCK_ADDRESS,
   UNI_ADDRESS,
 } from './addresses'
-import { SupportedChainId } from './chains'
 
 export const COMMON_CONTRACT_NAMES: Record<number, { [address: string]: string }> = {
   [SupportedChainId.MAINNET]: {

src/constants/networks.ts

@@ -1,4 +1,4 @@
-import { SupportedChainId } from './chains'
+import { SupportedChainId } from 'constants/chains'
 
 const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
 if (typeof INFURA_KEY === 'undefined') {
@@ -24,26 +24,12 @@ export const FALLBACK_URLS: { [key in SupportedChainId]: string[] } = {
     'https://rpc.ankr.com/eth',
     'https://eth-mainnet.public.blastapi.io',
   ],
-  [SupportedChainId.ROPSTEN]: [
-    // "Fallback" URLs
-    'https://rpc.ankr.com/eth_ropsten',
-  ],
-  [SupportedChainId.RINKEBY]: [
-    // "Fallback" URLs
-    'https://rinkeby-light.eth.linkpool.io/',
-  ],
   [SupportedChainId.GOERLI]: [
     // "Safe" URLs
     'https://rpc.goerli.mudit.blog/',
     // "Fallback" URLs
     'https://rpc.ankr.com/eth_goerli',
   ],
-  [SupportedChainId.KOVAN]: [
-    // "Safe" URLs
-    'https://kovan.poa.network',
-    // "Fallback" URLs
-    'https://eth-kovan.public.blastapi.io',
-  ],
   [SupportedChainId.POLYGON]: [
     // "Safe" URLs
     'https://polygon-rpc.com/',
@@ -65,9 +51,9 @@ export const FALLBACK_URLS: { [key in SupportedChainId]: string[] } = {
     // "Fallback" URLs
     'https://arbitrum.public-rpc.com',
   ],
-  [SupportedChainId.ARBITRUM_RINKEBY]: [
+  [SupportedChainId.ARBITRUM_GOERLI]: [
     // "Safe" URLs
-    'https://rinkeby.arbitrum.io/rpc',
+    'https://goerli-rollup.arbitrum.io/rpc',
   ],
   [SupportedChainId.OPTIMISM]: [
     // "Safe" URLs
@@ -98,16 +84,7 @@ export const RPC_URLS: { [key in SupportedChainId]: string[] } = {
     `https://mainnet.infura.io/v3/${INFURA_KEY}`,
     ...FALLBACK_URLS[SupportedChainId.MAINNET],
   ],
-  [SupportedChainId.RINKEBY]: [
-    `https://rinkeby.infura.io/v3/${INFURA_KEY}`,
-    ...FALLBACK_URLS[SupportedChainId.RINKEBY],
-  ],
-  [SupportedChainId.ROPSTEN]: [
-    `https://ropsten.infura.io/v3/${INFURA_KEY}`,
-    ...FALLBACK_URLS[SupportedChainId.ROPSTEN],
-  ],
   [SupportedChainId.GOERLI]: [`https://goerli.infura.io/v3/${INFURA_KEY}`, ...FALLBACK_URLS[SupportedChainId.GOERLI]],
-  [SupportedChainId.KOVAN]: [`https://kovan.infura.io/v3/${INFURA_KEY}`, ...FALLBACK_URLS[SupportedChainId.KOVAN]],
   [SupportedChainId.OPTIMISM]: [
     `https://optimism-mainnet.infura.io/v3/${INFURA_KEY}`,
     ...FALLBACK_URLS[SupportedChainId.OPTIMISM],
@@ -120,9 +97,9 @@ export const RPC_URLS: { [key in SupportedChainId]: string[] } = {
     `https://arbitrum-mainnet.infura.io/v3/${INFURA_KEY}`,
     ...FALLBACK_URLS[SupportedChainId.ARBITRUM_ONE],
   ],
-  [SupportedChainId.ARBITRUM_RINKEBY]: [
-    `https://arbitrum-rinkeby.infura.io/v3/${INFURA_KEY}`,
-    ...FALLBACK_URLS[SupportedChainId.ARBITRUM_RINKEBY],
+  [SupportedChainId.ARBITRUM_GOERLI]: [
+    `https://arbitrum-goerli.infura.io/v3/${INFURA_KEY}`,
+    ...FALLBACK_URLS[SupportedChainId.ARBITRUM_GOERLI],
   ],
   [SupportedChainId.POLYGON]: [
     `https://polygon-mainnet.infura.io/v3/${INFURA_KEY}`,

src/constants/providers.ts

@@ -3,9 +3,10 @@ import { deepCopy } from '@ethersproject/properties'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { isPlain } from '@reduxjs/toolkit'
+import { SupportedChainId } from 'constants/chains'
 
 import { AVERAGE_L1_BLOCK_TIME } from './chainInfo'
-import { CHAIN_IDS_TO_NAMES, SupportedChainId } from './chains'
+import { CHAIN_IDS_TO_NAMES } from './chains'
 import { RPC_URLS } from './networks'
 
 class AppJsonRpcProvider extends StaticJsonRpcProvider {
@@ -58,14 +59,11 @@ class AppJsonRpcProvider extends StaticJsonRpcProvider {
  */
 export const RPC_PROVIDERS: { [key in SupportedChainId]: StaticJsonRpcProvider } = {
   [SupportedChainId.MAINNET]: new AppJsonRpcProvider(SupportedChainId.MAINNET),
-  [SupportedChainId.RINKEBY]: new AppJsonRpcProvider(SupportedChainId.RINKEBY),
-  [SupportedChainId.ROPSTEN]: new AppJsonRpcProvider(SupportedChainId.ROPSTEN),
   [SupportedChainId.GOERLI]: new AppJsonRpcProvider(SupportedChainId.GOERLI),
-  [SupportedChainId.KOVAN]: new AppJsonRpcProvider(SupportedChainId.KOVAN),
   [SupportedChainId.OPTIMISM]: new AppJsonRpcProvider(SupportedChainId.OPTIMISM),
   [SupportedChainId.OPTIMISM_GOERLI]: new AppJsonRpcProvider(SupportedChainId.OPTIMISM_GOERLI),
   [SupportedChainId.ARBITRUM_ONE]: new AppJsonRpcProvider(SupportedChainId.ARBITRUM_ONE),
-  [SupportedChainId.ARBITRUM_RINKEBY]: new AppJsonRpcProvider(SupportedChainId.ARBITRUM_RINKEBY),
+  [SupportedChainId.ARBITRUM_GOERLI]: new AppJsonRpcProvider(SupportedChainId.ARBITRUM_GOERLI),
   [SupportedChainId.POLYGON]: new AppJsonRpcProvider(SupportedChainId.POLYGON),
   [SupportedChainId.POLYGON_MUMBAI]: new AppJsonRpcProvider(SupportedChainId.POLYGON_MUMBAI),
   [SupportedChainId.CELO]: new AppJsonRpcProvider(SupportedChainId.CELO),

src/constants/routing.ts

@@ -1,7 +1,7 @@
 // a list of tokens by chain
 import { Currency, Token } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
 
-import { SupportedChainId } from './chains'
 import {
   AMPL,
   CEUR_CELO,
@@ -26,6 +26,7 @@ import {
   SWISE,
   TRIBE,
   USDC_ARBITRUM,
+  USDC_ARBITRUM_GOERLI,
   USDC_MAINNET,
   USDC_OPTIMISM,
   USDC_POLYGON,
@@ -122,22 +123,10 @@ export const COMMON_BASES: ChainCurrencyList = {
     WBTC,
     WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET] as Token,
   ],
-  [SupportedChainId.ROPSTEN]: [
-    nativeOnChain(SupportedChainId.ROPSTEN),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ROPSTEN] as Token,
-  ],
-  [SupportedChainId.RINKEBY]: [
-    nativeOnChain(SupportedChainId.RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.RINKEBY] as Token,
-  ],
   [SupportedChainId.GOERLI]: [
     nativeOnChain(SupportedChainId.GOERLI),
     WRAPPED_NATIVE_CURRENCY[SupportedChainId.GOERLI] as Token,
   ],
-  [SupportedChainId.KOVAN]: [
-    nativeOnChain(SupportedChainId.KOVAN),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.KOVAN] as Token,
-  ],
   [SupportedChainId.ARBITRUM_ONE]: [
     nativeOnChain(SupportedChainId.ARBITRUM_ONE),
     DAI_ARBITRUM_ONE,
@@ -146,9 +135,10 @@ export const COMMON_BASES: ChainCurrencyList = {
     WBTC_ARBITRUM_ONE,
     WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE] as Token,
   ],
-  [SupportedChainId.ARBITRUM_RINKEBY]: [
-    nativeOnChain(SupportedChainId.ARBITRUM_RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_RINKEBY] as Token,
+  [SupportedChainId.ARBITRUM_GOERLI]: [
+    nativeOnChain(SupportedChainId.ARBITRUM_GOERLI),
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_GOERLI] as Token,
+    USDC_ARBITRUM_GOERLI,
   ],
   [SupportedChainId.OPTIMISM]: [
     nativeOnChain(SupportedChainId.OPTIMISM),

src/constants/tokens.ts

@@ -1,8 +1,8 @@
 import { Currency, Ether, NativeCurrency, Token, WETH9 } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
 import invariant from 'tiny-invariant'
 
 import { UNI_ADDRESS } from './addresses'
-import { SupportedChainId } from './chains'
 
 export const NATIVE_CHAIN_ID = 'NATIVE'
 
@@ -18,20 +18,6 @@ export const USDC_MAINNET = new Token(
   'USDC',
   'USD//C'
 )
-const USDC_ROPSTEN = new Token(
-  SupportedChainId.ROPSTEN,
-  '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
-  6,
-  'USDC',
-  'USD//C'
-)
-const USDC_RINKEBY = new Token(
-  SupportedChainId.RINKEBY,
-  '0x4DBCdF9B62e891a7cec5A2568C3F4FAF9E8Abe2b',
-  6,
-  'tUSDC',
-  'test USD//C'
-)
 const USDC_GOERLI = new Token(
   SupportedChainId.GOERLI,
   '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
@@ -39,7 +25,6 @@ const USDC_GOERLI = new Token(
   'USDC',
   'USD//C'
 )
-const USDC_KOVAN = new Token(SupportedChainId.KOVAN, '0x31eeb2d0f9b6fd8642914ab10f4dd473677d80df', 6, 'USDC', 'USD//C')
 export const USDC_OPTIMISM = new Token(
   SupportedChainId.OPTIMISM,
   '0x7F5c764cBc14f9669B88837ca1490cCa17c31607',
@@ -61,9 +46,9 @@ export const USDC_ARBITRUM = new Token(
   'USDC',
   'USD//C'
 )
-const USDC_ARBITRUM_RINKEBY = new Token(
-  SupportedChainId.ARBITRUM_RINKEBY,
-  '0x09b98f8b2395d076514037ff7d39a091a536206c',
+export const USDC_ARBITRUM_GOERLI = new Token(
+  SupportedChainId.ARBITRUM_GOERLI,
+  '0x8FB1E3fC51F3b789dED7557E680551d93Ea9d892',
   6,
   'USDC',
   'USD//C'
@@ -311,10 +296,7 @@ export const CEUR_CELO_ALFAJORES = new Token(
 
 export const UNI: { [chainId: number]: Token } = {
   [SupportedChainId.MAINNET]: new Token(SupportedChainId.MAINNET, UNI_ADDRESS[1], 18, 'UNI', 'Uniswap'),
-  [SupportedChainId.RINKEBY]: new Token(SupportedChainId.RINKEBY, UNI_ADDRESS[4], 18, 'UNI', 'Uniswap'),
-  [SupportedChainId.ROPSTEN]: new Token(SupportedChainId.ROPSTEN, UNI_ADDRESS[3], 18, 'UNI', 'Uniswap'),
   [SupportedChainId.GOERLI]: new Token(SupportedChainId.GOERLI, UNI_ADDRESS[5], 18, 'UNI', 'Uniswap'),
-  [SupportedChainId.KOVAN]: new Token(SupportedChainId.KOVAN, UNI_ADDRESS[42], 18, 'UNI', 'Uniswap'),
 }
 
 export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } = {
@@ -340,9 +322,9 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
     'WETH',
     'Wrapped Ether'
   ),
-  [SupportedChainId.ARBITRUM_RINKEBY]: new Token(
-    SupportedChainId.ARBITRUM_RINKEBY,
-    '0xB47e6A5f8b33b3F17603C83a0535A9dcD7E32681',
+  [SupportedChainId.ARBITRUM_GOERLI]: new Token(
+    SupportedChainId.ARBITRUM_GOERLI,
+    '0xe39Ab88f8A4777030A534146A9Ca3B52bd5D43A3',
     18,
     'WETH',
     'Wrapped Ether'
@@ -446,16 +428,13 @@ export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedCha
   USDC: {
     [SupportedChainId.MAINNET]: USDC_MAINNET.address,
     [SupportedChainId.ARBITRUM_ONE]: USDC_ARBITRUM.address,
+    [SupportedChainId.ARBITRUM_GOERLI]: USDC_ARBITRUM_GOERLI.address,
     [SupportedChainId.OPTIMISM]: USDC_OPTIMISM.address,
-    [SupportedChainId.ARBITRUM_RINKEBY]: USDC_ARBITRUM_RINKEBY.address,
     [SupportedChainId.OPTIMISM_GOERLI]: USDC_OPTIMISM_GOERLI.address,
     [SupportedChainId.POLYGON]: USDC_POLYGON.address,
     [SupportedChainId.POLYGON_MUMBAI]: USDC_POLYGON_MUMBAI.address,
     [SupportedChainId.CELO]: PORTAL_USDC_CELO.address,
     [SupportedChainId.CELO_ALFAJORES]: PORTAL_USDC_CELO.address,
     [SupportedChainId.GOERLI]: USDC_GOERLI.address,
-    [SupportedChainId.RINKEBY]: USDC_RINKEBY.address,
-    [SupportedChainId.KOVAN]: USDC_KOVAN.address,
-    [SupportedChainId.ROPSTEN]: USDC_ROPSTEN.address,
   },
 }

src/featureFlags/flags/dummyFeatureGate.ts

@@ -0,0 +1,9 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+function useDummyGateFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.statsigDummy)
+}
+
+export function useDummyGateEnabled(): boolean {
+  return useDummyGateFlag() === BaseVariant.Enabled
+}

src/featureFlags/flags/featureFlags.ts

@@ -1,12 +1,12 @@
+/**
+ * The value here must match the value in the statsig dashboard, if you plan to use statsig.
+ */
 export enum FeatureFlag {
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
-  nftListV2 = 'nftListV2',
   payWithAnyToken = 'payWithAnyToken',
-  swapWidget = 'swapWidget',
+  swapWidget = 'swap_widget_replacement_enabled',
   gqlRouting = 'gqlRouting',
-}
-
-export enum FeatureGate {
-  DUMMY = 'web_dummy_gate_amplitude_id',
+  statsigDummy = 'web_dummy_gate_amplitude_id',
+  nftGraphql = 'nft_graphql_migration',
 }

src/featureFlags/flags/gqlRouting.ts

@@ -1,7 +1,7 @@
 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
 export function useGqlRoutingFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.gqlRouting)
+  return useBaseFlag(FeatureFlag.gqlRouting, BaseVariant.Enabled)
 }
 
 export { BaseVariant as GqlRoutingVariant }

src/featureFlags/flags/nftListV2.ts

@@ -1,7 +0,0 @@
-import { BaseVariant } from '../index'
-
-export function useNftListV2Flag(): BaseVariant {
-  return BaseVariant.Enabled
-}
-
-export { BaseVariant as NftListV2Variant }

src/featureFlags/flags/nftlGraphql.ts

@@ -0,0 +1,11 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useNftGraphqlFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.nftGraphql)
+}
+
+export function useNftGraphqlEnabled(): boolean {
+  return useNftGraphqlFlag() === BaseVariant.Enabled
+}
+
+export { BaseVariant as NftGraphqlVariant }

src/featureFlags/flags/payWithAnyToken.ts

@@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
 
 export function usePayWithAnyTokenFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.payWithAnyToken)
+  return useBaseFlag(FeatureFlag.payWithAnyToken, BaseVariant.Enabled)
 }
 
 export function usePayWithAnyTokenEnabled(): boolean {

src/featureFlags/index.tsx

@@ -1,5 +1,6 @@
 import { atomWithStorage, useAtomValue, useUpdateAtom } from 'jotai/utils'
 import { createContext, ReactNode, useCallback, useContext } from 'react'
+import { useGate } from 'statsig-react'
 export { FeatureFlag } from './flags/featureFlags'
 
 interface FeatureFlagsContextType {
@@ -56,7 +57,12 @@ export enum BaseVariant {
 }
 
 export function useBaseFlag(flag: string, defaultValue = BaseVariant.Control): BaseVariant {
-  switch (useFeatureFlagsContext().flags[flag]) {
+  const { value: statsigValue } = useGate(flag) // non-existent gates return false
+  const featureFlagsContext = useFeatureFlagsContext()
+  if (statsigValue) {
+    return BaseVariant.Enabled
+  }
+  switch (featureFlagsContext.flags[flag]) {
     case 'enabled':
       return BaseVariant.Enabled
     case 'control':

src/graphql/data/__generated__/types-and-hooks.ts

@@ -86,6 +86,10 @@ export enum Chain {
   UnknownChain = 'UNKNOWN_CHAIN'
 }
 
+export enum CollectionSortableField {
+  Volume = 'VOLUME'
+}
+
 export type ContractInput = {
   address?: InputMaybe<Scalars['String']>;
   chain: Chain;
@@ -371,6 +375,8 @@ export type NftCollectionMarket = {
   marketplaces?: Maybe<Array<NftCollectionMarketplace>>;
   nftContracts?: Maybe<Array<NftContract>>;
   owners?: Maybe<Scalars['Int']>;
+  percentListed?: Maybe<TimestampedAmount>;
+  percentUniqueOwners?: Maybe<TimestampedAmount>;
   sales?: Maybe<TimestampedAmount>;
   totalVolume?: Maybe<TimestampedAmount>;
   volume?: Maybe<TimestampedAmount>;
@@ -650,6 +656,7 @@ export type Query = {
   token?: Maybe<Token>;
   tokenProjects?: Maybe<Array<Maybe<TokenProject>>>;
   tokens?: Maybe<Array<Maybe<Token>>>;
+  topCollections?: Maybe<NftCollectionConnection>;
   topTokens?: Maybe<Array<Maybe<Token>>>;
 };
 
@@ -668,9 +675,11 @@ export type QueryNftAssetsArgs = {
   asc?: InputMaybe<Scalars['Boolean']>;
   before?: InputMaybe<Scalars['String']>;
   chain?: InputMaybe<Chain>;
+  cursor?: InputMaybe<Scalars['String']>;
   filter?: InputMaybe<NftAssetsFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  limit?: InputMaybe<Scalars['Int']>;
   orderBy?: InputMaybe<NftAssetSortableField>;
 };
 
@@ -740,6 +749,15 @@ export type QueryTokensArgs = {
 };
 
 
+export type QueryTopCollectionsArgs = {
+  chains?: InputMaybe<Array<Chain>>;
+  cursor?: InputMaybe<Scalars['String']>;
+  duration?: InputMaybe<HistoryDuration>;
+  limit?: InputMaybe<Scalars['Int']>;
+  orderBy?: InputMaybe<CollectionSortableField>;
+};
+
+
 export type QueryTopTokensArgs = {
   chain?: InputMaybe<Chain>;
   orderBy?: InputMaybe<TokenSortableField>;
@@ -1103,6 +1121,14 @@ export type NftRouteQueryVariables = Exact<{
 
 export type NftRouteQuery = { __typename?: 'Query', nftRoute?: { __typename?: 'NftRouteResponse', id: string, calldata: string, toAddress: string, route?: Array<{ __typename?: 'NftTrade', amount: number, contractAddress: string, id: string, marketplace: NftMarketplace, tokenId: string, tokenType: NftStandard, price: { __typename?: 'TokenAmount', id: string, currency: Currency, value: string }, quotePrice?: { __typename?: 'TokenAmount', id: string, currency: Currency, value: string } }>, sendAmount: { __typename?: 'TokenAmount', id: string, currency: Currency, value: string } } };
 
+export type TrendingCollectionsQueryVariables = Exact<{
+  size?: InputMaybe<Scalars['Int']>;
+  timePeriod?: InputMaybe<HistoryDuration>;
+}>;
+
+
+export type TrendingCollectionsQuery = { __typename?: 'Query', topCollections?: { __typename?: 'NftCollectionConnection', edges: Array<{ __typename?: 'NftCollectionEdge', node: { __typename?: 'NftCollection', name?: string, isVerified?: boolean, nftContracts?: Array<{ __typename?: 'NftContract', address: string, totalSupply?: number }>, image?: { __typename?: 'Image', url: string }, bannerImage?: { __typename?: 'Image', url: string }, markets?: Array<{ __typename?: 'NftCollectionMarket', owners?: number, floorPrice?: { __typename?: 'TimestampedAmount', value: number }, totalVolume?: { __typename?: 'TimestampedAmount', value: number }, volume?: { __typename?: 'TimestampedAmount', value: number }, volumePercentChange?: { __typename?: 'TimestampedAmount', value: number }, floorPricePercentChange?: { __typename?: 'TimestampedAmount', value: number }, sales?: { __typename?: 'TimestampedAmount', value: number }, listings?: { __typename?: 'TimestampedAmount', value: number } }> } }> } };
+
 
 export const RecentlySearchedAssetsDocument = gql`
     query RecentlySearchedAssets($collectionAddresses: [String!]!, $contracts: [ContractInput!]!) {
@@ -2101,4 +2127,79 @@ export function useNftRouteLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<N
         }
 export type NftRouteQueryHookResult = ReturnType<typeof useNftRouteQuery>;
 export type NftRouteLazyQueryHookResult = ReturnType<typeof useNftRouteLazyQuery>;
-export type NftRouteQueryResult = Apollo.QueryResult<NftRouteQuery, NftRouteQueryVariables>;
+export type NftRouteQueryResult = Apollo.QueryResult<NftRouteQuery, NftRouteQueryVariables>;
+export const TrendingCollectionsDocument = gql`
+    query TrendingCollections($size: Int, $timePeriod: HistoryDuration) {
+  topCollections(limit: $size, duration: $timePeriod) {
+    edges {
+      node {
+        name
+        nftContracts {
+          address
+          totalSupply
+        }
+        image {
+          url
+        }
+        bannerImage {
+          url
+        }
+        isVerified
+        markets(currencies: ETH) {
+          floorPrice {
+            value
+          }
+          owners
+          totalVolume {
+            value
+          }
+          volume(duration: $timePeriod) {
+            value
+          }
+          volumePercentChange(duration: $timePeriod) {
+            value
+          }
+          floorPricePercentChange(duration: $timePeriod) {
+            value
+          }
+          sales {
+            value
+          }
+          listings {
+            value
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useTrendingCollectionsQuery__
+ *
+ * To run a query within a React component, call `useTrendingCollectionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTrendingCollectionsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTrendingCollectionsQuery({
+ *   variables: {
+ *      size: // value for 'size'
+ *      timePeriod: // value for 'timePeriod'
+ *   },
+ * });
+ */
+export function useTrendingCollectionsQuery(baseOptions?: Apollo.QueryHookOptions<TrendingCollectionsQuery, TrendingCollectionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TrendingCollectionsQuery, TrendingCollectionsQueryVariables>(TrendingCollectionsDocument, options);
+      }
+export function useTrendingCollectionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TrendingCollectionsQuery, TrendingCollectionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TrendingCollectionsQuery, TrendingCollectionsQueryVariables>(TrendingCollectionsDocument, options);
+        }
+export type TrendingCollectionsQueryHookResult = ReturnType<typeof useTrendingCollectionsQuery>;
+export type TrendingCollectionsLazyQueryHookResult = ReturnType<typeof useTrendingCollectionsLazyQuery>;
+export type TrendingCollectionsQueryResult = Apollo.QueryResult<TrendingCollectionsQuery, TrendingCollectionsQueryVariables>;

src/graphql/data/nft/TrendingCollections.ts

@@ -0,0 +1,95 @@
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
+import gql from 'graphql-tag'
+import { TrendingCollection } from 'nft/types'
+import { useMemo } from 'react'
+
+import { HistoryDuration, useTrendingCollectionsQuery } from '../__generated__/types-and-hooks'
+
+gql`
+  query TrendingCollections($size: Int, $timePeriod: HistoryDuration) {
+    topCollections(limit: $size, duration: $timePeriod) {
+      edges {
+        node {
+          name
+          nftContracts {
+            address
+            totalSupply
+          }
+          image {
+            url
+          }
+          bannerImage {
+            url
+          }
+          isVerified
+          markets(currencies: ETH) {
+            floorPrice {
+              value
+            }
+            owners
+            totalVolume {
+              value
+            }
+            volume(duration: $timePeriod) {
+              value
+            }
+            volumePercentChange(duration: $timePeriod) {
+              value
+            }
+            floorPricePercentChange(duration: $timePeriod) {
+              value
+            }
+            sales {
+              value
+            }
+            listings {
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export function useTrendingCollections(size: number, timePeriod: HistoryDuration) {
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
+  const { data, loading, error } = useTrendingCollectionsQuery({
+    variables: {
+      size,
+      timePeriod,
+    },
+    skip: !isNftGraphqlEnabled,
+  })
+
+  const trendingCollections: TrendingCollection[] | undefined = useMemo(
+    () =>
+      data?.topCollections?.edges?.map((edge) => {
+        const collection = edge?.node
+        return {
+          name: collection.name,
+          address: collection.nftContracts?.[0].address,
+          imageUrl: collection.image?.url,
+          bannerImageUrl: collection.bannerImage?.url,
+          isVerified: collection.isVerified,
+          volume: collection.markets?.[0].volume?.value,
+          volumeChange: collection.markets?.[0].volumePercentChange?.value,
+          floor: collection.markets?.[0].floorPrice?.value,
+          floorChange: collection.markets?.[0].floorPricePercentChange?.value,
+          marketCap: collection.markets?.[0].totalVolume?.value,
+          percentListed:
+            (collection.markets?.[0].listings?.value ?? 0) / (collection.nftContracts?.[0].totalSupply ?? 1),
+          owners: collection.markets?.[0].owners,
+          sales: collection.markets?.[0].sales?.value,
+          totalSupply: collection.nftContracts?.[0].totalSupply,
+        }
+      }),
+    [data?.topCollections?.edges]
+  )
+
+  return {
+    data: trendingCollections,
+    loading,
+    error,
+  }
+}

src/graphql/data/util.tsx

@@ -62,7 +62,7 @@ export const CHAIN_ID_TO_BACKEND_NAME: { [key: number]: Chain } = {
   [SupportedChainId.CELO]: Chain.Celo,
   [SupportedChainId.CELO_ALFAJORES]: Chain.Celo,
   [SupportedChainId.ARBITRUM_ONE]: Chain.Arbitrum,
-  [SupportedChainId.ARBITRUM_RINKEBY]: Chain.Arbitrum,
+  [SupportedChainId.ARBITRUM_GOERLI]: Chain.Arbitrum,
   [SupportedChainId.OPTIMISM]: Chain.Optimism,
   [SupportedChainId.OPTIMISM_GOERLI]: Chain.Optimism,
 }

src/graphql/thegraph/apollo.ts

@@ -5,7 +5,6 @@ import store, { AppState } from '../../state/index'
 
 const CHAIN_SUBGRAPH_URL: Record<number, string> = {
   [SupportedChainId.MAINNET]: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',
-  [SupportedChainId.RINKEBY]: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',
 
   [SupportedChainId.ARBITRUM_ONE]: 'https://api.thegraph.com/subgraphs/name/ianlapham/arbitrum-minimal',
 

src/hooks/Tokens.ts

@@ -112,7 +112,7 @@ export function useSearchInactiveTokenLists(search: string | undefined, minResul
     const result: WrappedTokenInfo[] = []
     const addressSet: { [address: string]: true } = {}
     for (const url of inactiveUrls) {
-      const list = lists[url].current
+      const list = lists[url]?.current
       if (!list) continue
       for (const tokenInfo of list.tokens) {
         if (tokenInfo.chainId === chainId && tokenFilter(tokenInfo)) {

src/hooks/useClientSideV3Trade.ts

@@ -13,7 +13,7 @@ import { useQuoter } from './useContract'
 
 const QUOTE_GAS_OVERRIDES: { [chainId: number]: number } = {
   [SupportedChainId.ARBITRUM_ONE]: 25_000_000,
-  [SupportedChainId.ARBITRUM_RINKEBY]: 25_000_000,
+  [SupportedChainId.ARBITRUM_GOERLI]: 25_000_000,
   [SupportedChainId.CELO]: 50_000_000,
   [SupportedChainId.CELO_ALFAJORES]: 50_000_000,
   [SupportedChainId.POLYGON]: 40_000_000,
@@ -57,16 +57,18 @@ export function useClientSideV3Trade<TTradeType extends TradeType>(
     gasRequired: chainId ? QUOTE_GAS_OVERRIDES[chainId] ?? DEFAULT_GAS_QUOTE : undefined,
   })
 
+  const currenciesAreTheSame = useMemo(
+    () => currencyIn && currencyOut && (currencyIn.equals(currencyOut) || currencyIn.wrapped.equals(currencyOut)),
+    [currencyIn, currencyOut]
+  )
+
   return useMemo(() => {
     if (
       !amountSpecified ||
       !currencyIn ||
       !currencyOut ||
       quotesResults.some(({ valid }) => !valid) ||
-      // skip when tokens are the same
-      (tradeType === TradeType.EXACT_INPUT
-        ? amountSpecified.currency.equals(currencyOut)
-        : amountSpecified.currency.equals(currencyIn))
+      currenciesAreTheSame
     ) {
       return {
         state: TradeState.INVALID,
@@ -144,5 +146,5 @@ export function useClientSideV3Trade<TTradeType extends TradeType>(
         tradeType,
       }),
     }
-  }, [amountSpecified, currencyIn, currencyOut, quotesResults, routes, routesLoading, tradeType])
+  }, [amountSpecified, currenciesAreTheSame, currencyIn, currencyOut, quotesResults, routes, routesLoading, tradeType])
 }

src/hooks/useENSAddress.ts

@@ -1,6 +1,6 @@
+import { namehash } from '@ethersproject/hash'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import { useMemo } from 'react'
-import { safeNamehash } from 'utils/safeNamehash'
 
 import isZero from '../utils/isZero'
 import { useENSRegistrarContract, useENSResolverContract } from './useContract'
@@ -11,10 +11,7 @@ import useDebounce from './useDebounce'
  */
 export default function useENSAddress(ensName?: string | null): { loading: boolean; address: string | null } {
   const debouncedName = useDebounce(ensName, 200)
-  const ensNodeArgument = useMemo(
-    () => [debouncedName === null ? undefined : safeNamehash(debouncedName)],
-    [debouncedName]
-  )
+  const ensNodeArgument = useMemo(() => [debouncedName ? namehash(debouncedName) : undefined], [debouncedName])
   const registrarContract = useENSRegistrarContract(false)
   const resolverAddress = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
   const resolverAddressResult = resolverAddress.result?.[0]

src/hooks/useENSAvatar.ts

@@ -5,7 +5,6 @@ import { useWeb3React } from '@web3-react/core'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { useEffect, useMemo, useState } from 'react'
-import { safeNamehash } from 'utils/safeNamehash'
 
 import { isAddress } from '../utils'
 import isZero from '../utils/isZero'
@@ -29,7 +28,7 @@ export default function useENSAvatar(
 
   const addressAvatar = useAvatarFromNode(node)
   const ENSName = useENSName(address).ENSName
-  const nameAvatar = useAvatarFromNode(ENSName === null ? undefined : safeNamehash(ENSName))
+  const nameAvatar = useAvatarFromNode(ENSName === null ? undefined : namehash(ENSName))
   let avatar = addressAvatar.avatar || nameAvatar.avatar
 
   const nftAvatar = useAvatarFromNFT(avatar, enforceOwnership)

src/hooks/useENSContentHash.ts

@@ -1,6 +1,6 @@
+import { namehash } from '@ethersproject/hash'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import { useMemo } from 'react'
-import { safeNamehash } from 'utils/safeNamehash'
 
 import isZero from '../utils/isZero'
 import { useENSRegistrarContract, useENSResolverContract } from './useContract'
@@ -9,7 +9,7 @@ import { useENSRegistrarContract, useENSResolverContract } from './useContract'
  * Does a lookup for an ENS name to find its contenthash.
  */
 export default function useENSContentHash(ensName?: string | null): { loading: boolean; contenthash: string | null } {
-  const ensNodeArgument = useMemo(() => [ensName === null ? undefined : safeNamehash(ensName)], [ensName])
+  const ensNodeArgument = useMemo(() => [ensName ? namehash(ensName) : undefined], [ensName])
   const registrarContract = useENSRegistrarContract(false)
   const resolverAddressResult = useSingleCallResult(registrarContract, 'resolver', ensNodeArgument)
   const resolverAddress = resolverAddressResult.result?.[0]

src/hooks/useERC20Permit.ts

@@ -3,6 +3,7 @@ import { splitSignature } from '@ethersproject/bytes'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { SupportedChainId } from 'constants/chains'
 import JSBI from 'jsbi'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import { useMemo, useState } from 'react'
@@ -33,24 +34,13 @@ const PERMITTABLE_TOKENS: {
     [checksummedTokenAddress: string]: PermitInfo
   }
 } = {
-  1: {
+  [SupportedChainId.MAINNET]: {
     [USDC_MAINNET.address]: { type: PermitType.AMOUNT, name: 'USD Coin', version: '2' },
     [DAI.address]: { type: PermitType.ALLOWED, name: 'Dai Stablecoin', version: '1' },
-    [UNI[1].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
+    [UNI[SupportedChainId.MAINNET].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
   },
-  4: {
-    '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735': { type: PermitType.ALLOWED, name: 'Dai Stablecoin', version: '1' },
-    [UNI[4].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
-  },
-  3: {
-    [UNI[3].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
-    '0x07865c6E87B9F70255377e024ace6630C1Eaa37F': { type: PermitType.AMOUNT, name: 'USD Coin', version: '2' },
-  },
-  5: {
-    [UNI[5].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
-  },
-  42: {
-    [UNI[42].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
+  [SupportedChainId.GOERLI]: {
+    [UNI[SupportedChainId.GOERLI].address]: { type: PermitType.AMOUNT, name: 'Uniswap' },
   },
 }
 

src/hooks/usePermitAllowance.ts

@@ -1,4 +1,4 @@
-import { signTypedData } from '@uniswap/conedison/provider'
+import { signTypedData } from '@uniswap/conedison/provider/signing'
 import { AllowanceTransfer, MaxAllowanceTransferAmount, PERMIT2_ADDRESS, PermitSingle } from '@uniswap/permit2-sdk'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'

src/hooks/usePoolTickData.ts

@@ -15,7 +15,7 @@ import { useTickLens } from './useContract'
 import { PoolState, usePool } from './usePools'
 
 const PRICE_FIXED_DIGITS = 8
-const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_RINKEBY]
+const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_GOERLI]
 
 // Tick with fields parsed to JSBIs, and active liquidity computed.
 export interface TickProcessed {

src/hooks/useStablecoinPrice.ts

@@ -1,11 +1,11 @@
 import { Currency, CurrencyAmount, Price, Token, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { SupportedChainId } from 'constants/chains'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useMemo, useRef } from 'react'
 import { RouterPreference } from 'state/routing/slice'
 import { useRoutingAPITrade } from 'state/routing/useRoutingAPITrade'
 
-import { SupportedChainId } from '../constants/chains'
 import { CUSD_CELO, DAI_OPTIMISM, USDC_ARBITRUM, USDC_MAINNET, USDC_POLYGON } from '../constants/tokens'
 
 // Stablecoin amounts used when calculating spot price for a given currency.

src/hooks/useTokenAllowance.ts

@@ -5,7 +5,6 @@ import { useTokenContract } from 'hooks/useContract'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ApproveTransactionInfo, TransactionType } from 'state/transactions/types'
-import { calculateGasMargin } from 'utils/calculateGasMargin'
 
 export function useTokenAllowance(
   token?: Token,
@@ -48,15 +47,8 @@ export function useUpdateTokenAllowance(
       if (!contract) throw new Error('missing contract')
       if (!spender) throw new Error('missing spender')
 
-      let allowance: BigNumberish = MaxUint256.toString()
-      const estimatedGas = await contract.estimateGas.approve(spender, allowance).catch(() => {
-        // Fallback for tokens which restrict approval amounts:
-        allowance = amount.quotient.toString()
-        return contract.estimateGas.approve(spender, allowance)
-      })
-
-      const gasLimit = calculateGasMargin(estimatedGas)
-      const response = await contract.approve(spender, allowance, { gasLimit })
+      const allowance: BigNumberish = MaxUint256.toString()
+      const response = await contract.approve(spender, allowance)
       return {
         response,
         info: {

src/lib/hooks/routing/useRoutingAPIArguments.ts

@@ -22,7 +22,7 @@ export function useRoutingAPIArguments({
 }) {
   return useMemo(
     () =>
-      !tokenIn || !tokenOut || !amount || tokenIn.equals(tokenOut)
+      !tokenIn || !tokenOut || !amount || tokenIn.equals(tokenOut) || tokenIn.wrapped.equals(tokenOut.wrapped)
         ? undefined
         : {
             amount: amount.quotient.toString(),

src/lib/hooks/transactions/updater.tsx

@@ -32,9 +32,9 @@ export function shouldCheck(lastBlockNumber: number, tx: Transaction): boolean {
 
 const RETRY_OPTIONS_BY_CHAIN_ID: { [chainId: number]: RetryOptions } = {
   [SupportedChainId.ARBITRUM_ONE]: { n: 10, minWait: 250, maxWait: 1000 },
-  [SupportedChainId.ARBITRUM_RINKEBY]: { n: 10, minWait: 250, maxWait: 1000 },
-  [SupportedChainId.OPTIMISM_GOERLI]: { n: 10, minWait: 250, maxWait: 1000 },
+  [SupportedChainId.ARBITRUM_GOERLI]: { n: 10, minWait: 250, maxWait: 1000 },
   [SupportedChainId.OPTIMISM]: { n: 10, minWait: 250, maxWait: 1000 },
+  [SupportedChainId.OPTIMISM_GOERLI]: { n: 10, minWait: 250, maxWait: 1000 },
 }
 const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 1, minWait: 0, maxWait: 0 }
 

src/nft/components/bag/Bag.tsx

@@ -1,18 +1,16 @@
 import { BigNumber } from '@ethersproject/bignumber'
+import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { NFTEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { GqlRoutingVariant, useGqlRoutingFlag } from 'featureFlags/flags/gqlRouting'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { useNftRouteLazyQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { useIsNftDetailsPage, useIsNftPage, useIsNftProfilePage } from 'hooks/useIsNftPage'
 import { BagFooter } from 'nft/components/bag/BagFooter'
-import ListingModal from 'nft/components/bag/profile/ListingModal'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column } from 'nft/components/Flex'
 import { Overlay } from 'nft/components/modals/Overlay'
-import { buttonTextMedium, commonButtonStyles } from 'nft/css/common.css'
 import {
   useBag,
   useIsMobile,
@@ -66,7 +64,7 @@ const BagContainer = styled.div<{ raiseZIndex: boolean; isProfilePage: boolean }
   border-radius: 16px;
   box-shadow: ${({ theme }) => theme.shallowShadow};
   z-index: ${({ raiseZIndex, isProfilePage }) =>
-    raiseZIndex ? (isProfilePage ? Z_INDEX.modalOverTooltip : Z_INDEX.modalBackdrop + 2) : 3};
+    raiseZIndex ? (isProfilePage ? Z_INDEX.modalOverTooltip : Z_INDEX.modalBackdrop - 1) : 3};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     right: 0px;
@@ -90,6 +88,24 @@ const DetailsPageBackground = styled.div`
   height: 100%;
 `
 
+const ContinueButton = styled.div`
+  background: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  margin: 32px 28px 16px;
+  padding: 10px 0px;
+  border-radius: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+  transition: ${({ theme }) => theme.transition.duration.medium};
+
+  :hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+`
+
 const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
   <Box
     marginX="24"
@@ -114,10 +130,7 @@ const Bag = () => {
     shallow
   )
 
-  const { profilePageState, setProfilePageState } = useProfilePageState(
-    ({ setProfilePageState, state }) => ({ profilePageState: state, setProfilePageState }),
-    shallow
-  )
+  const { setProfilePageState } = useProfilePageState(({ setProfilePageState }) => ({ setProfilePageState }))
 
   const {
     bagStatus,
@@ -139,7 +152,6 @@ const Bag = () => {
   const isDetailsPage = useIsNftDetailsPage()
   const isNFTPage = useIsNftPage()
   const isMobile = useIsMobile()
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const usingGqlRouting = useGqlRoutingFlag() === GqlRoutingVariant.Enabled
 
   const sendTransaction = useSendTransaction((state) => state.sendTransaction)
@@ -398,48 +410,34 @@ const Bag = () => {
   return (
     <Portal>
       <BagContainer data-testid="nft-bag" raiseZIndex={isMobile || isModalOpen} isProfilePage={isProfilePage}>
-        {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
-          <>
-            <BagHeader
-              numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
-              closeBag={handleCloseBag}
-              resetFlow={isProfilePage ? resetSellAssets : reset}
-              isProfilePage={isProfilePage}
-            />
-            {shouldRenderEmptyState && <EmptyState />}
-            <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
-            <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
-              {isProfilePage ? <ProfileBagContent /> : <BagContent />}
-            </Column>
-            {hasAssetsToShow && !isProfilePage && (
-              <BagFooter totalEthPrice={totalEthPrice} fetchAssets={fetchAssets} eventProperties={eventProperties} />
-            )}
-            {isSellingAssets && isProfilePage && (
-              <Box
-                marginTop="32"
-                marginX="28"
-                marginBottom="16"
-                paddingY="10"
-                className={`${buttonTextMedium} ${commonButtonStyles}`}
-                backgroundColor="accentAction"
-                color="white"
-                textAlign="center"
-                onClick={() => {
-                  ;(isMobile || isNftListV2) && toggleBag()
-                  setProfilePageState(ProfilePageStateType.LISTING)
-                  sendAnalyticsEvent(NFTEventName.NFT_PROFILE_PAGE_START_SELL, {
-                    list_quantity: sellAssets.length,
-                    collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
-                    token_ids: sellAssets.map((asset) => asset.tokenId),
-                  })
-                }}
-              >
-                Continue
-              </Box>
-            )}
-          </>
-        ) : (
-          <ListingModal />
+        <BagHeader
+          numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
+          closeBag={handleCloseBag}
+          resetFlow={isProfilePage ? resetSellAssets : reset}
+          isProfilePage={isProfilePage}
+        />
+        {shouldRenderEmptyState && <EmptyState />}
+        <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
+        <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
+          {isProfilePage ? <ProfileBagContent /> : <BagContent />}
+        </Column>
+        {hasAssetsToShow && !isProfilePage && (
+          <BagFooter totalEthPrice={totalEthPrice} fetchAssets={fetchAssets} eventProperties={eventProperties} />
+        )}
+        {isSellingAssets && isProfilePage && (
+          <ContinueButton
+            onClick={() => {
+              toggleBag()
+              setProfilePageState(ProfilePageStateType.LISTING)
+              sendAnalyticsEvent(NFTEventName.NFT_PROFILE_PAGE_START_SELL, {
+                list_quantity: sellAssets.length,
+                collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
+                token_ids: sellAssets.map((asset) => asset.tokenId),
+              })
+            }}
+          >
+            <Trans>Continue</Trans>
+          </ContinueButton>
         )}
       </BagContainer>
 

src/nft/components/bag/profile/ListingButton.tsx

@@ -1,334 +0,0 @@
-import { Plural, t } from '@lingui/macro'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import ms from 'ms.macro'
-import { Box } from 'nft/components/Box'
-import { Row } from 'nft/components/Flex'
-import { ArrowRightIcon, HazardIcon, LoadingIcon, XMarkIcon } from 'nft/components/icons'
-import { BelowFloorWarningModal } from 'nft/components/profile/list/Modal/BelowFloorWarningModal'
-import { bodySmall } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
-import { useNFTList, useSellAsset } from 'nft/hooks'
-import { Listing, ListingStatus, WalletAsset } from 'nft/types'
-import { pluralize } from 'nft/utils/roundAndPluralize'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useTheme } from 'styled-components/macro'
-import shallow from 'zustand/shallow'
-
-import * as styles from './ListingModal.css'
-import { getListings } from './utils'
-
-const BELOW_FLOOR_PRICE_THRESHOLD = 0.8
-
-interface ListingButtonProps {
-  onClick: () => void
-  buttonText: string
-  showWarningOverride?: boolean
-}
-
-export const ListingButton = ({ onClick, buttonText, showWarningOverride = false }: ListingButtonProps) => {
-  const {
-    addMarketplaceWarning,
-    sellAssets,
-    removeAllMarketplaceWarnings,
-    showResolveIssues,
-    toggleShowResolveIssues,
-    issues,
-    setIssues,
-  } = useSellAsset(
-    ({
-      addMarketplaceWarning,
-      sellAssets,
-      removeAllMarketplaceWarnings,
-      showResolveIssues,
-      toggleShowResolveIssues,
-      issues,
-      setIssues,
-    }) => ({
-      addMarketplaceWarning,
-      sellAssets,
-      removeAllMarketplaceWarnings,
-      showResolveIssues,
-      toggleShowResolveIssues,
-      issues,
-      setIssues,
-    }),
-    shallow
-  )
-  const { listingStatus, setListingStatus, setListings, setCollectionsRequiringApproval } = useNFTList(
-    ({ listingStatus, setListingStatus, setListings, setCollectionsRequiringApproval }) => ({
-      listingStatus,
-      setListingStatus,
-      setListings,
-      setCollectionsRequiringApproval,
-    }),
-    shallow
-  )
-
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
-  const [showWarning, setShowWarning] = useState(false)
-  const [canContinue, setCanContinue] = useState(false)
-  const theme = useTheme()
-  const warningRef = useRef<HTMLDivElement>(null)
-  useOnClickOutside(warningRef, () => {
-    !isNftListV2 && setShowWarning(false)
-  })
-
-  useEffect(() => {
-    const [newCollectionsToApprove, newListings] = getListings(sellAssets)
-    setListings(newListings)
-    setCollectionsRequiringApproval(newCollectionsToApprove)
-    setListingStatus(ListingStatus.DEFINED)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sellAssets])
-
-  const [
-    noMarketplacesSelected,
-    missingExpiration,
-    invalidExpiration,
-    overMaxExpiration,
-    listingsMissingPrice,
-    listingsBelowFloor,
-    listingsAboveSellOrderFloor,
-    invalidPrices,
-  ] = useMemo(() => {
-    const noMarketplacesSelected = sellAssets.some((asset: WalletAsset) => asset.marketplaces === undefined)
-    const missingExpiration = sellAssets.some((asset) => {
-      return (
-        asset.expirationTime != null &&
-        (isNaN(asset.expirationTime) || asset.expirationTime * 1000 - Date.now() < ms`60 seconds`)
-      )
-    })
-    const invalidExpiration = sellAssets.some((asset) => {
-      return asset.expirationTime != null && isNaN(asset.expirationTime)
-    })
-    const overMaxExpiration = sellAssets.some((asset) => {
-      return asset.expirationTime != null && asset.expirationTime * 1000 - Date.now() > ms`180 days`
-    })
-
-    const listingsMissingPrice: [WalletAsset, Listing][] = []
-    const listingsBelowFloor: [WalletAsset, Listing][] = []
-    const listingsAboveSellOrderFloor: [WalletAsset, Listing][] = []
-    const invalidPrices: [WalletAsset, Listing][] = []
-    for (const asset of sellAssets) {
-      if (asset.newListings) {
-        for (const listing of asset.newListings) {
-          if (!listing.price) listingsMissingPrice.push([asset, listing])
-          else if (isNaN(listing.price) || listing.price < 0) invalidPrices.push([asset, listing])
-          else if (
-            listing.price < (asset?.floorPrice ?? 0) * BELOW_FLOOR_PRICE_THRESHOLD &&
-            !listing.overrideFloorPrice
-          )
-            listingsBelowFloor.push([asset, listing])
-          else if (asset.floor_sell_order_price && listing.price >= asset.floor_sell_order_price)
-            listingsAboveSellOrderFloor.push([asset, listing])
-        }
-      }
-    }
-    // set number of issues
-    if (isNftListV2) {
-      const foundIssues =
-        Number(missingExpiration) +
-        Number(overMaxExpiration) +
-        listingsMissingPrice.length +
-        listingsAboveSellOrderFloor.length
-      setIssues(foundIssues)
-      !foundIssues && showResolveIssues && toggleShowResolveIssues()
-      // Only show Resolve Issue text if there was a user submitted error (ie not when page loads with no prices set)
-      if ((missingExpiration || overMaxExpiration || listingsAboveSellOrderFloor.length) && !showResolveIssues)
-        toggleShowResolveIssues()
-    }
-
-    const continueCheck = listingsBelowFloor.length === 0 && listingsAboveSellOrderFloor.length === 0
-    setCanContinue(continueCheck)
-    return [
-      noMarketplacesSelected,
-      missingExpiration,
-      invalidExpiration,
-      overMaxExpiration,
-      listingsMissingPrice,
-      listingsBelowFloor,
-      listingsAboveSellOrderFloor,
-      invalidPrices,
-    ]
-  }, [isNftListV2, sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
-
-  const [disableListButton, warningMessage] = useMemo(() => {
-    const disableListButton =
-      noMarketplacesSelected ||
-      missingExpiration ||
-      invalidExpiration ||
-      overMaxExpiration ||
-      invalidPrices.length > 0 ||
-      listingsMissingPrice.length > 0
-
-    const warningMessage = noMarketplacesSelected
-      ? 'No marketplaces selected'
-      : missingExpiration
-      ? 'Set duration'
-      : invalidExpiration
-      ? 'Invalid duration'
-      : overMaxExpiration
-      ? 'Max duration is 6 months'
-      : listingsMissingPrice.length > 0
-      ? `${listingsMissingPrice.length} item price${pluralize(listingsMissingPrice.length)} not set`
-      : invalidPrices.length > 0
-      ? `${invalidPrices.length} price${pluralize(invalidPrices.length)} are invalid`
-      : listingsBelowFloor.length > 0
-      ? `${listingsBelowFloor.length} item${pluralize(listingsBelowFloor.length)} listed below floor`
-      : listingsAboveSellOrderFloor.length > 0
-      ? `${listingsAboveSellOrderFloor.length} item${pluralize(listingsAboveSellOrderFloor.length)} already listed`
-      : ''
-    return [disableListButton, warningMessage]
-  }, [
-    noMarketplacesSelected,
-    missingExpiration,
-    invalidExpiration,
-    overMaxExpiration,
-    listingsMissingPrice,
-    invalidPrices,
-    listingsBelowFloor,
-    listingsAboveSellOrderFloor,
-  ])
-
-  useEffect(() => {
-    setShowWarning(false)
-  }, [warningMessage])
-
-  const addWarningMessages = () => {
-    removeAllMarketplaceWarnings()
-    if (!missingExpiration && !noMarketplacesSelected) {
-      if (listingsMissingPrice.length > 0) {
-        for (const [asset, listing] of listingsMissingPrice) {
-          addMarketplaceWarning(asset, {
-            message: 'PLEASE SET A PRICE',
-            marketplace: listing.marketplace,
-          })
-        }
-      } else if (invalidPrices.length > 0) {
-        for (const [asset, listing] of invalidPrices) {
-          !listing.overrideFloorPrice &&
-            addMarketplaceWarning(asset, {
-              message: `INVALID PRICE`,
-              marketplace: listing.marketplace,
-            })
-        }
-      }
-    }
-    setShowWarning(true)
-  }
-
-  const warningWrappedClick = () => {
-    if ((!disableListButton && canContinue) || showWarningOverride) {
-      if (issues && isNftListV2) !showResolveIssues && toggleShowResolveIssues()
-      else if (listingsBelowFloor.length) setShowWarning(true)
-      else onClick()
-    } else addWarningMessages()
-  }
-
-  return (
-    <>
-      <Box position="relative">
-        {!showWarningOverride && showWarning && warningMessage.length > 0 && (
-          <Row
-            className={`${bodySmall} ${styles.warningTooltip}`}
-            transition="250"
-            onClick={() => setShowWarning(false)}
-            color="textSecondary"
-            zIndex="3"
-            borderRadius="4"
-            backgroundColor="backgroundSurface"
-            height={!disableListButton ? '64' : '36'}
-            maxWidth="276"
-            position="absolute"
-            left="24"
-            bottom="52"
-            flexWrap={!disableListButton ? 'wrap' : 'nowrap'}
-            style={{ maxWidth: !disableListButton ? '225px' : '' }}
-            ref={warningRef}
-          >
-            <HazardIcon />
-            <Box marginLeft="4" marginRight="8">
-              {warningMessage}
-            </Box>
-            {disableListButton ? (
-              <Box paddingTop="6">
-                <XMarkIcon fill={themeVars.colors.textSecondary} height="20" width="20" />
-              </Box>
-            ) : (
-              <Row
-                marginLeft="72"
-                cursor="pointer"
-                color="accentAction"
-                onClick={() => {
-                  setShowWarning(false)
-                  setCanContinue(true)
-                  onClick()
-                }}
-              >
-                Continue
-                <ArrowRightIcon height="20" width="20" />
-              </Row>
-            )}
-          </Row>
-        )}
-        <Box
-          as="button"
-          border="none"
-          backgroundColor={showResolveIssues ? 'accentFailure' : 'accentAction'}
-          cursor={
-            [ListingStatus.APPROVED, ListingStatus.PENDING, ListingStatus.SIGNING].includes(listingStatus) ||
-            disableListButton
-              ? 'default'
-              : 'pointer'
-          }
-          className={styles.button}
-          onClick={() => listingStatus !== ListingStatus.APPROVED && warningWrappedClick()}
-          type="button"
-          style={{
-            color: showResolveIssues ? theme.accentTextLightPrimary : theme.white,
-            opacity:
-              ![ListingStatus.DEFINED, ListingStatus.FAILED, ListingStatus.CONTINUE].includes(listingStatus) ||
-              (disableListButton && !showResolveIssues)
-                ? 0.3
-                : 1,
-          }}
-        >
-          {listingStatus === ListingStatus.SIGNING || listingStatus === ListingStatus.PENDING ? (
-            isNftListV2 ? (
-              listingStatus === ListingStatus.PENDING ? (
-                'Pending'
-              ) : (
-                'Proceed in wallet'
-              )
-            ) : (
-              <Row gap="8">
-                <LoadingIcon stroke="backgroundSurface" height="20" width="20" />
-                {listingStatus === ListingStatus.PENDING ? 'Pending' : 'Proceed in wallet'}
-              </Row>
-            )
-          ) : listingStatus === ListingStatus.APPROVED ? (
-            'Complete!'
-          ) : listingStatus === ListingStatus.PAUSED ? (
-            'Paused'
-          ) : listingStatus === ListingStatus.FAILED ? (
-            'Try again'
-          ) : listingStatus === ListingStatus.CONTINUE ? (
-            'Continue'
-          ) : showResolveIssues ? (
-            <Plural value={issues !== 1 ? 2 : 1} _1="Resolve issue" other={t`Resolve ${issues} issues`} />
-          ) : (
-            buttonText
-          )}
-        </Box>
-      </Box>
-      {showWarning && (
-        <BelowFloorWarningModal
-          listingsBelowFloor={listingsBelowFloor}
-          closeModal={() => setShowWarning(false)}
-          startListing={onClick}
-        />
-      )}
-    </>
-  )
-}

src/nft/components/bag/profile/ListingModal.css.ts

@@ -1,79 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-
-export const chevron = style([
-  sprinkles({
-    height: '28',
-    width: '28',
-    transition: '250',
-    marginLeft: 'auto',
-    marginRight: '0',
-  }),
-])
-
-export const chevronDown = style({
-  transform: 'rotate(180deg)',
-  cursor: 'pointer',
-})
-
-export const sectionDivider = style([
-  sprinkles({
-    borderRadius: '20',
-    marginTop: '8',
-    width: 'full',
-    borderWidth: '0.5px',
-    borderStyle: 'solid',
-    borderColor: 'backgroundOutline',
-  }),
-])
-
-export const button = style([
-  sprinkles({
-    paddingX: { sm: '12', md: '16' },
-    paddingY: { sm: '10', md: '16' },
-    textAlign: 'center',
-    fontWeight: 'semibold',
-    fontSize: { sm: '16', md: '20' },
-    lineHeight: { sm: '20', md: '24' },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-end',
-    borderRadius: '12',
-  }),
-])
-
-export const listingModalIcon = style([
-  sprinkles({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'backgroundSurface',
-  }),
-  {
-    boxSizing: 'border-box',
-    marginLeft: '-2px',
-    marginRight: '4px',
-  },
-])
-
-export const warningTooltip = style([
-  sprinkles({
-    paddingTop: '8',
-    paddingRight: '8',
-    paddingBottom: '8',
-    paddingLeft: '12',
-  }),
-  {
-    boxShadow: '0px 4px 16px rgba(10, 10, 59, 0.2)',
-  },
-])
-
-export const listingSectionBorder = style([
-  sprinkles({
-    padding: '8',
-    borderRadius: '8',
-    borderColor: 'backgroundOutline',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-  }),
-])

src/nft/components/bag/profile/ListingModal.tsx

@@ -1,322 +0,0 @@
-import { sendAnalyticsEvent, Trace, useTrace } from '@uniswap/analytics'
-import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
-import { useWeb3React } from '@web3-react/core'
-import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { ChevronLeftIcon, XMarkIcon } from 'nft/components/icons'
-import { caption, headlineSmall, subhead, subheadSmall } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
-import { useBag, useIsMobile, useNFTList, useSellAsset } from 'nft/hooks'
-import { logListing, looksRareNonceFetcher } from 'nft/queries'
-import { AssetRow, CollectionRow, ListingRow, ListingStatus } from 'nft/types'
-import { fetchPrice } from 'nft/utils/fetchPrice'
-import { pluralize } from 'nft/utils/roundAndPluralize'
-import { Dispatch, useEffect, useMemo, useRef, useState } from 'react'
-import shallow from 'zustand/shallow'
-
-import { ListingButton } from './ListingButton'
-import * as styles from './ListingModal.css'
-import { ListingSection } from './ListingSection'
-import { approveCollectionRow, getTotalEthValue, pauseRow, resetRow, signListingRow, verifyStatus } from './utils'
-
-const ListingModal = () => {
-  const { provider } = useWeb3React()
-  const sellAssets = useSellAsset((state) => state.sellAssets)
-  const {
-    listingStatus,
-    setListingStatus,
-    setListings,
-    setCollectionsRequiringApproval,
-    setListingStatusAndCallback,
-    setCollectionStatusAndCallback,
-    looksRareNonce,
-    setLooksRareNonce,
-    getLooksRareNonce,
-    collectionsRequiringApproval,
-    listings,
-  } = useNFTList(
-    ({
-      listingStatus,
-      setListingStatus,
-      setListings,
-      setCollectionsRequiringApproval,
-      setListingStatusAndCallback,
-      setCollectionStatusAndCallback,
-      looksRareNonce,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }) => ({
-      listingStatus,
-      setListingStatus,
-      setListings,
-      setCollectionsRequiringApproval,
-      setListingStatusAndCallback,
-      setCollectionStatusAndCallback,
-      looksRareNonce,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }),
-    shallow
-  )
-  const signer = provider?.getSigner()
-  const [openIndex, setOpenIndex] = useState(0)
-  const [allCollectionsApproved, setAllCollectionsApproved] = useState(false)
-  const toggleCart = useBag((state) => state.toggleBag)
-  const looksRareNonceRef = useRef(looksRareNonce)
-  const isMobile = useIsMobile()
-  const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
-
-  useEffect(() => {
-    useNFTList.subscribe((state) => (looksRareNonceRef.current = state.looksRareNonce))
-  }, [])
-
-  const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
-
-  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
-
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPriceInUSD(price || 0)
-    })
-  }, [])
-
-  const startListingEventProperties = {
-    collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
-    token_ids: sellAssets.map((asset) => asset.tokenId),
-    marketplaces: Array.from(new Set(listings.map((asset) => asset.marketplace.name))),
-    list_quantity: listings.length,
-    usd_value: ethPriceInUSD * totalEthListingValue,
-    ...trace,
-  }
-
-  // when all collections have been approved, auto start the signing process
-  useEffect(() => {
-    collectionsRequiringApproval?.length &&
-      setAllCollectionsApproved(
-        collectionsRequiringApproval.every((collection: CollectionRow) => collection.status === ListingStatus.APPROVED)
-      )
-    if (
-      allCollectionsApproved &&
-      (listingStatus === ListingStatus.PENDING ||
-        listingStatus === ListingStatus.CONTINUE ||
-        listingStatus === ListingStatus.SIGNING)
-    ) {
-      resetAllRows()
-      signListings()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [collectionsRequiringApproval, allCollectionsApproved])
-
-  const allCollectionsApprovedOrPaused = useMemo(
-    () =>
-      collectionsRequiringApproval.every(
-        (collection: CollectionRow) =>
-          collection.status === ListingStatus.APPROVED || collection.status === ListingStatus.PAUSED
-      ),
-    [collectionsRequiringApproval]
-  )
-  const allListingsApprovedOrPaused = useMemo(
-    () =>
-      listings.every(
-        (listing: ListingRow) => listing.status === ListingStatus.APPROVED || listing.status === ListingStatus.PAUSED
-      ),
-    [listings]
-  )
-
-  // go back to a ready state after a successful retry
-  useEffect(() => {
-    if (listingStatus === ListingStatus.SIGNING && allCollectionsApprovedOrPaused && allListingsApprovedOrPaused) {
-      resetAllRows()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allCollectionsApprovedOrPaused, allListingsApprovedOrPaused])
-
-  // handles the modal wide listing state based on conglomeration of the wallet, collection, and listing states
-  const startListingFlow = async () => {
-    if (!signer) return
-    sendAnalyticsEvent(NFTEventName.NFT_SELL_START_LISTING, { ...startListingEventProperties })
-    setListingStatus(ListingStatus.SIGNING)
-    const signerAddress = await signer.getAddress()
-    const nonce = await looksRareNonceFetcher(signerAddress)
-    setLooksRareNonce(nonce ?? 0)
-
-    if (!collectionsRequiringApproval?.some((collection) => collection.status === ListingStatus.PAUSED)) {
-      setListingStatus(ListingStatus.SIGNING)
-      setOpenIndex(1)
-    }
-    // for all unique collection, marketplace combos -> approve collections
-    for (const collectionRow of collectionsRequiringApproval) {
-      verifyStatus(collectionRow.status) &&
-        (isMobile
-          ? await approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback, pauseAllRows)
-          : approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback, pauseAllRows))
-    }
-  }
-
-  const signListings = async () => {
-    if (!signer || !provider) return
-    setListingStatus(ListingStatus.SIGNING)
-    setOpenIndex(2)
-    // sign listings
-    for (const listing of listings) {
-      verifyStatus(listing.status) &&
-        (await signListingRow(
-          listing,
-          signer,
-          provider,
-          getLooksRareNonce,
-          setLooksRareNonce,
-          setListingStatusAndCallback,
-          pauseAllRows
-        ))
-    }
-    const allListingsSigned = listings.every((listing: ListingRow) => listing.status === ListingStatus.APPROVED)
-    const paused = listings.some((listing: ListingRow) => listing.status === ListingStatus.PAUSED)
-    if (allListingsSigned) {
-      setOpenIndex(0)
-      setListingStatus(ListingStatus.APPROVED)
-    } else if (!paused) {
-      setListingStatus(ListingStatus.FAILED)
-    }
-    sendAnalyticsEvent(NFTEventName.NFT_LISTING_COMPLETED, {
-      signatures_approved: listings.filter((asset) => asset.status === ListingStatus.APPROVED),
-      list_quantity: listings.length,
-      usd_value: ethPriceInUSD * totalEthListingValue,
-      ...trace,
-    })
-    await logListing(listings, (await signer?.getAddress()) ?? '')
-  }
-
-  const pauseAllRows = () => {
-    for (const collection of collectionsRequiringApproval) {
-      pauseRow(collection, collectionsRequiringApproval, setCollectionsRequiringApproval as Dispatch<AssetRow[]>)
-    }
-    for (const listing of listings) {
-      pauseRow(listing, listings, setListings as Dispatch<AssetRow[]>)
-    }
-  }
-
-  const resetAllRows = () => {
-    for (const collection of collectionsRequiringApproval) {
-      resetRow(collection, collectionsRequiringApproval, setCollectionsRequiringApproval as Dispatch<AssetRow[]>)
-    }
-    for (const listing of listings) {
-      resetRow(listing, listings, setListings as Dispatch<AssetRow[]>)
-    }
-  }
-
-  const clickStopListing = () => {
-    pauseAllRows()
-  }
-
-  const clickStartListingFlow = () => {
-    resetAllRows()
-    allCollectionsApproved ? signListings() : startListingFlow()
-  }
-
-  const showSuccessScreen = useMemo(() => listingStatus === ListingStatus.APPROVED, [listingStatus])
-
-  return (
-    <Trace modal={InterfaceModalName.NFT_LISTING}>
-      <Column paddingTop="20" paddingBottom="20" paddingLeft="12" paddingRight="12">
-        <Row className={headlineSmall} marginBottom="10">
-          {isMobile && !showSuccessScreen && (
-            <Box paddingTop="4" marginRight="4" onClick={toggleCart}>
-              <ChevronLeftIcon height={28} width={28} />
-            </Box>
-          )}
-          {showSuccessScreen ? 'Success!' : `Listing ${sellAssets.length} NFTs`}
-          <Box
-            as="button"
-            border="none"
-            color="textSecondary"
-            backgroundColor="backgroundSurface"
-            marginLeft="auto"
-            marginRight="0"
-            paddingRight="0"
-            display={{ sm: 'flex', md: 'none' }}
-            cursor="pointer"
-            onClick={toggleCart}
-          >
-            <XMarkIcon height={28} width={28} fill={themeVars.colors.textPrimary} />
-          </Box>
-        </Row>
-        <Column overflowX="hidden" overflowY="auto" style={{ maxHeight: '60vh' }}>
-          {showSuccessScreen ? (
-            <Trace
-              name={NFTEventName.NFT_LISTING_COMPLETED}
-              properties={{ list_quantity: listings.length, usd_value: ethPriceInUSD * totalEthListingValue, ...trace }}
-              shouldLogImpression
-            >
-              <ListingSection
-                sectionTitle={`Listed ${listings.length} item${pluralize(listings.length)} for sale`}
-                rows={listings}
-                index={0}
-                openIndex={openIndex}
-                isSuccessScreen={true}
-              />
-            </Trace>
-          ) : (
-            <>
-              <ListingSection
-                sectionTitle={`Approve ${collectionsRequiringApproval.length} collection${pluralize(
-                  collectionsRequiringApproval.length
-                )}`}
-                title="COLLECTIONS"
-                rows={collectionsRequiringApproval}
-                index={1}
-                openIndex={openIndex}
-              />
-              <ListingSection
-                sectionTitle={`Confirm ${listings.length} listing${pluralize(listings.length)}`}
-                caption="Now you can sign to list each item"
-                title="NFTS"
-                rows={listings}
-                index={2}
-                openIndex={openIndex}
-              />
-            </>
-          )}
-        </Column>
-        <hr className={styles.sectionDivider} />
-        <Row className={subhead} marginTop="12" marginBottom={showSuccessScreen ? '8' : '20'}>
-          Return if sold
-          <Row className={subheadSmall} marginLeft="auto" marginRight="0">
-            {totalEthListingValue}
-            &nbsp;ETH
-          </Row>
-        </Row>
-        {showSuccessScreen ? (
-          <Box as="span" className={caption} color="textSecondary">
-            Status:{' '}
-            <Box as="span" color="accentSuccess">
-              Confirmed
-            </Box>
-          </Box>
-        ) : (
-          <ListingButton onClick={clickStartListingFlow} buttonText="Start listing" showWarningOverride={isMobile} />
-        )}
-        {(listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.SIGNING) && (
-          <Box
-            as="button"
-            border="none"
-            backgroundColor="backgroundSurface"
-            cursor="pointer"
-            color="orange"
-            className={styles.button}
-            onClick={clickStopListing}
-            type="button"
-          >
-            Stop listing
-          </Box>
-        )}
-      </Column>
-    </Trace>
-  )
-}
-
-export default ListingModal

src/nft/components/bag/profile/ListingSection.tsx

@@ -1,187 +0,0 @@
-import clsx from 'clsx'
-import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { ApprovedCheckmarkIcon, ChevronUpIcon, FailedListingIcon, LoadingIcon } from 'nft/components/icons'
-import { badge, bodySmall, buttonTextSmall, subhead } from 'nft/css/common.css'
-import { useSellAsset } from 'nft/hooks'
-import { AssetRow, CollectionRow, ListingRow, ListingStatus } from 'nft/types'
-import { formatEthPrice, numberToWei } from 'nft/utils/currency'
-import { useEffect, useState } from 'react'
-
-import * as styles from './ListingModal.css'
-
-export const ListingSection = ({
-  sectionTitle,
-  caption = undefined,
-  title = undefined,
-  rows,
-  index,
-  openIndex,
-  isSuccessScreen = false,
-}: {
-  sectionTitle: string
-  caption?: string
-  title?: string
-  rows: AssetRow[]
-  index: number
-  openIndex: number
-  isSuccessScreen?: boolean
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const notAllApproved = rows.some((row: AssetRow) => row.status !== ListingStatus.APPROVED)
-  const sellAssets = useSellAsset((state) => state.sellAssets)
-  const removeAssetMarketplace = useSellAsset((state) => state.removeAssetMarketplace)
-
-  const removeRow = (row: any) => {
-    // collections
-    if (index === 1) {
-      for (const asset of sellAssets)
-        if (asset.asset_contract.address === row.collectionAddress) removeAssetMarketplace(asset, row.marketplace)
-    }
-    // listings
-    else removeAssetMarketplace(row.asset, row.marketplace)
-  }
-
-  useEffect(() => {
-    setIsOpen(index === openIndex)
-  }, [index, openIndex])
-
-  function getListingRowPrice(row: AssetRow): number | undefined {
-    const listingRow = row as ListingRow
-    const newListings = listingRow.asset.newListings
-    return newListings?.find((listing) => listing.marketplace.name === listingRow.marketplace.name)?.price ?? 0
-  }
-
-  const allApproved = !notAllApproved && rows.length > 0 && !isSuccessScreen
-
-  return (
-    <Row
-      flexWrap="wrap"
-      className={subhead}
-      marginTop="10"
-      marginBottom="10"
-      onClick={() => rows.length > 0 && setIsOpen(!isOpen)}
-      color={allApproved ? 'accentSuccess' : 'textPrimary'}
-    >
-      {allApproved && <ApprovedCheckmarkIcon style={{ marginRight: '8px' }} />}
-      {sectionTitle}
-      {!isSuccessScreen && <ChevronUpIcon className={clsx(`${isOpen ? '' : styles.chevronDown} ${styles.chevron}`)} />}
-      {(isOpen || isSuccessScreen) && (
-        <Column
-          gap="12"
-          width="full"
-          paddingTop={isSuccessScreen ? '28' : 'auto'}
-          className={clsx(!isSuccessScreen && styles.listingSectionBorder)}
-        >
-          {caption && (
-            <Box color="textPrimary" fontWeight="normal" className={caption}>
-              {caption}
-            </Box>
-          )}
-          {title && (
-            <Box color="textSecondary" className={badge}>
-              {title}
-            </Box>
-          )}
-          <Column gap="8">
-            {rows.map((row: AssetRow, index) => {
-              return (
-                <Column key={index} gap="8">
-                  <Row>
-                    {row.images?.map((image, index) => {
-                      return (
-                        <Box
-                          as="img"
-                          height="20"
-                          width="20"
-                          borderRadius={index === 0 && (row as CollectionRow).collectionAddress ? 'round' : '4'}
-                          style={{ zIndex: 2 - index }}
-                          className={styles.listingModalIcon}
-                          src={image}
-                          alt={row.name}
-                          key={index}
-                        />
-                      )
-                    })}
-                    <Box
-                      marginLeft="8"
-                      marginRight="auto"
-                      fontWeight="normal"
-                      color="textPrimary"
-                      textOverflow="ellipsis"
-                      overflow="hidden"
-                      whiteSpace="nowrap"
-                      maxWidth={{
-                        sm: 'max',
-                        md:
-                          row.status === ListingStatus.REJECTED || row.status === ListingStatus.FAILED ? '120' : 'full',
-                      }}
-                      className={bodySmall}
-                    >
-                      {row.name}
-                    </Box>
-                    {isSuccessScreen ? (
-                      getListingRowPrice(row) &&
-                      `${formatEthPrice(numberToWei(getListingRowPrice(row) ?? 0).toString())} ETH`
-                    ) : row.status === ListingStatus.APPROVED ? (
-                      <ApprovedCheckmarkIcon height="20" width="20" />
-                    ) : row.status === ListingStatus.FAILED || row.status === ListingStatus.REJECTED ? (
-                      <Row gap="4">
-                        <Box fontWeight="normal" fontSize="14" color="textSecondary">
-                          {row.status}
-                        </Box>
-                        <FailedListingIcon />
-                      </Row>
-                    ) : (
-                      row.status === ListingStatus.SIGNING && <LoadingIcon height="20" width="20" stroke="#4673FA" />
-                    )}
-                  </Row>
-                  {(row.status === ListingStatus.FAILED || row.status === ListingStatus.REJECTED) && (
-                    <Row gap="8" justifyContent="center">
-                      <Box
-                        width="120"
-                        as="button"
-                        className={buttonTextSmall}
-                        borderRadius="12"
-                        border="none"
-                        color="red400"
-                        height="32"
-                        cursor="pointer"
-                        style={{ backgroundColor: '#FA2B391A' }}
-                        onClick={async (e) => {
-                          e.stopPropagation()
-                          removeRow(row)
-                        }}
-                      >
-                        Remove
-                      </Box>
-                      <Box
-                        width="120"
-                        as="button"
-                        className={buttonTextSmall}
-                        borderRadius="12"
-                        border="none"
-                        color="accentAction"
-                        height="32"
-                        cursor="pointer"
-                        style={{ backgroundColor: '#4C82FB29' }}
-                        onClick={async (e) => {
-                          e.stopPropagation()
-                          if (row.callback) {
-                            await row.callback()
-                          }
-                        }}
-                      >
-                        Try again
-                      </Box>
-                    </Row>
-                  )}
-                </Column>
-              )
-            })}
-          </Column>
-        </Column>
-      )}
-    </Row>
-  )
-}

src/nft/components/bag/profile/utils.ts

@@ -1,237 +0,0 @@
-import type { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
-import { addressesByNetwork, SupportedChainId } from '@looksrare/sdk'
-import { LOOKSRARE_MARKETPLACE_CONTRACT, X2Y2_TRANSFER_CONTRACT } from 'nft/queries'
-import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea'
-import { AssetRow, CollectionRow, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
-import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
-import { Dispatch } from 'react'
-
-const updateStatus = ({
-  listing,
-  newStatus,
-  rows,
-  setRows,
-  callback,
-}: {
-  listing: AssetRow
-  newStatus: ListingStatus
-  rows: AssetRow[]
-  setRows: Dispatch<AssetRow[]>
-  callback?: () => Promise<void>
-}) => {
-  const rowsCopy = [...rows]
-  const index = rows.findIndex((n) => n === listing)
-  listing.status = newStatus
-  if (callback) listing.callback = callback
-  rowsCopy[index] = listing
-  setRows(rowsCopy)
-}
-
-export async function approveCollectionRow(
-  collectionRow: CollectionRow,
-  signer: JsonRpcSigner,
-  setCollectionStatusAndCallback: (
-    collection: CollectionRow,
-    status: ListingStatus,
-    callback?: () => Promise<void>
-  ) => void,
-  pauseAllRows?: () => void
-) {
-  const callback = () => approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback, pauseAllRows)
-  setCollectionStatusAndCallback(collectionRow, ListingStatus.SIGNING, callback)
-  const { marketplace, collectionAddress } = collectionRow
-  const addresses = addressesByNetwork[SupportedChainId.MAINNET]
-  const spender =
-    marketplace.name === 'OpenSea'
-      ? OPENSEA_CROSS_CHAIN_CONDUIT
-      : marketplace.name === 'Rarible'
-      ? LOOKSRARE_MARKETPLACE_CONTRACT
-      : marketplace.name === 'X2Y2'
-      ? X2Y2_TRANSFER_CONTRACT
-      : addresses.TRANSFER_MANAGER_ERC721
-  !!collectionAddress &&
-    (await approveCollection(spender, collectionAddress, signer, (newStatus: ListingStatus) =>
-      setCollectionStatusAndCallback(collectionRow, newStatus, callback)
-    ))
-  if (
-    (collectionRow.status === ListingStatus.REJECTED || collectionRow.status === ListingStatus.FAILED) &&
-    pauseAllRows
-  )
-    pauseAllRows()
-}
-
-export async function signListingRow(
-  listing: ListingRow,
-  signer: JsonRpcSigner,
-  provider: Web3Provider,
-  getLooksRareNonce: () => number,
-  setLooksRareNonce: (nonce: number) => void,
-  setListingStatusAndCallback: (listing: ListingRow, status: ListingStatus, callback?: () => Promise<void>) => void,
-  pauseAllRows?: () => void
-) {
-  const looksRareNonce = getLooksRareNonce()
-  const callback = () => {
-    return signListingRow(
-      listing,
-      signer,
-      provider,
-      getLooksRareNonce,
-      setLooksRareNonce,
-      setListingStatusAndCallback,
-      pauseAllRows
-    )
-  }
-  setListingStatusAndCallback(listing, ListingStatus.SIGNING, callback)
-  const { asset, marketplace } = listing
-  const res = await signListing(marketplace, asset, signer, provider, looksRareNonce, (newStatus: ListingStatus) =>
-    setListingStatusAndCallback(listing, newStatus, callback)
-  )
-  if (listing.status === ListingStatus.REJECTED && pauseAllRows) {
-    pauseAllRows()
-  } else {
-    res && listing.marketplace.name === 'LooksRare' && setLooksRareNonce(looksRareNonce + 1)
-  }
-}
-
-export const getTotalEthValue = (sellAssets: WalletAsset[]) => {
-  const total = sellAssets.reduce((total, asset: WalletAsset) => {
-    if (asset.newListings?.length) {
-      const maxListing = asset.newListings.reduce((a, b) => ((a.price ?? 0) > (b.price ?? 0) ? a : b))
-      // LooksRare is a unique case where creator royalties are a flat 0.5% or 50 basis points
-      const maxFee =
-        maxListing.marketplace.fee +
-        (maxListing.marketplace.name === 'LooksRare' ? LOOKS_RARE_CREATOR_BASIS_POINTS : asset?.basisPoints ?? 0) / 100
-      return total + (maxListing.price ?? 0) - (maxListing.price ?? 0) * (maxFee / 100)
-    }
-    return total
-  }, 0)
-  return total ? Math.round(total * 10000 + Number.EPSILON) / 10000 : 0
-}
-
-export const getListings = (sellAssets: WalletAsset[]): [CollectionRow[], ListingRow[]] => {
-  const newCollectionsToApprove: CollectionRow[] = []
-
-  const newListings: ListingRow[] = []
-  sellAssets.forEach((asset) => {
-    asset.marketplaces?.forEach((marketplace: ListingMarket) => {
-      const newListing = {
-        images: [asset.smallImageUrl, marketplace.icon],
-        name: asset.name || `#${asset.tokenId}`,
-        status: ListingStatus.DEFINED,
-        asset,
-        marketplace,
-        price: asset.newListings?.find((listing) => listing.marketplace.name === marketplace.name)?.price,
-      }
-      newListings.push(newListing)
-      if (
-        !newCollectionsToApprove.some(
-          (collectionRow: CollectionRow) =>
-            collectionRow.collectionAddress === asset.asset_contract.address &&
-            collectionRow.marketplace.name === marketplace.name
-        )
-      ) {
-        const newCollectionRow = {
-          images: [asset.asset_contract.image_url, marketplace.icon],
-          name: asset.asset_contract.name,
-          status: ListingStatus.DEFINED,
-          collectionAddress: asset.asset_contract.address,
-          isVerified: asset.collectionIsVerified,
-          marketplace,
-        }
-        newCollectionsToApprove.push(newCollectionRow)
-      }
-    })
-  })
-  return [newCollectionsToApprove, newListings]
-}
-
-type ListingState = {
-  allListingsPending: boolean
-  allListingsDefined: boolean
-  allListingsApproved: boolean
-  allCollectionsPending: boolean
-  allCollectionsDefined: boolean
-  anyActiveSigning: boolean
-  anyActiveFailures: boolean
-  anyActiveRejections: boolean
-  anyPaused: boolean
-}
-
-export const getListingState = (
-  collectionsRequiringApproval: CollectionRow[],
-  listings: ListingRow[]
-): ListingState => {
-  let allListingsPending = true
-  let allListingsDefined = true
-  let allListingsApproved = true
-  let allCollectionsPending = true
-  let allCollectionsDefined = true
-  let anyActiveSigning = false
-  let anyActiveFailures = false
-  let anyActiveRejections = false
-  let anyPaused = false
-
-  if (collectionsRequiringApproval.length === 0) {
-    allCollectionsDefined = allCollectionsPending = false
-  }
-  for (const collection of collectionsRequiringApproval) {
-    if (collection.status !== ListingStatus.PENDING) allCollectionsPending = false
-    if (collection.status !== ListingStatus.DEFINED) allCollectionsDefined = false
-    if (collection.status === ListingStatus.SIGNING) anyActiveSigning = true
-    else if (collection.status === ListingStatus.FAILED) anyActiveFailures = true
-    else if (collection.status === ListingStatus.REJECTED) anyActiveRejections = true
-    else if (collection.status === ListingStatus.PAUSED) anyPaused = true
-  }
-
-  if (listings.length === 0) {
-    allListingsApproved = allListingsDefined = allListingsPending = false
-  }
-  for (const listing of listings) {
-    if (listing.status !== ListingStatus.PENDING) allListingsPending = false
-    if (listing.status !== ListingStatus.DEFINED) allListingsDefined = false
-    if (listing.status !== ListingStatus.APPROVED) allListingsApproved = false
-    if (listing.status === ListingStatus.SIGNING) anyActiveSigning = true
-    else if (listing.status === ListingStatus.FAILED) anyActiveFailures = true
-    else if (listing.status === ListingStatus.REJECTED) anyActiveRejections = true
-    else if (listing.status === ListingStatus.PAUSED) anyPaused = true
-  }
-  return {
-    allListingsPending,
-    allListingsDefined,
-    allListingsApproved,
-    allCollectionsPending,
-    allCollectionsDefined,
-    anyActiveSigning,
-    anyActiveFailures,
-    anyActiveRejections,
-    anyPaused,
-  }
-}
-
-export const verifyStatus = (status: ListingStatus) => {
-  return status !== ListingStatus.PAUSED && status !== ListingStatus.APPROVED
-}
-
-export const pauseRow = (row: AssetRow, rows: AssetRow[], setRows: Dispatch<AssetRow[]>) => {
-  if (row.status === ListingStatus.PENDING || row.status === ListingStatus.DEFINED)
-    updateStatus({
-      listing: row,
-      newStatus: ListingStatus.PAUSED,
-      rows,
-      setRows,
-    })
-}
-
-export const resetRow = (row: AssetRow, rows: AssetRow[], setRows: Dispatch<AssetRow[]>) => {
-  if (
-    row.status === ListingStatus.PAUSED ||
-    row.status === ListingStatus.FAILED ||
-    row.status === ListingStatus.REJECTED
-  )
-    updateStatus({
-      listing: row,
-      newStatus: ListingStatus.DEFINED,
-      rows,
-      setRows,
-    })
-}

src/nft/components/collection/Card.css.ts

@@ -1,114 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
-
-export const card = style([
-  sprinkles({
-    overflow: 'hidden',
-    paddingBottom: '12',
-    borderRadius: '16',
-  }),
-  {
-    boxSizing: 'border-box',
-    WebkitBoxSizing: 'border-box',
-    boxShadow: vars.color.cardDropShadow,
-    backgroundColor: themeVars.colors.backgroundSurface,
-    ':after': {
-      content: '',
-      position: 'absolute',
-      top: '0px',
-      right: ' 0px',
-      bottom: ' 0px',
-      left: '0px',
-      border: ' 1px solid',
-      borderRadius: '16px',
-      borderColor: '#5D678524',
-      pointerEvents: 'none',
-    },
-  },
-])
-
-export const loadingBackground = style({
-  background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
-})
-
-export const cardImageHover = style({
-  transform: 'scale(1.15)',
-})
-
-export const selectedCard = style([
-  card,
-  sprinkles({
-    background: 'backgroundSurface',
-  }),
-  {
-    ':after': {
-      border: '2px solid',
-      borderColor: vars.color.accentAction,
-    },
-  },
-])
-
-export const button = style([
-  sprinkles({
-    display: 'flex',
-    width: 'full',
-    position: 'relative',
-    paddingY: '8',
-    marginTop: { sm: '8', md: '10' },
-    marginBottom: '12',
-    borderRadius: '12',
-    border: 'none',
-    justifyContent: 'center',
-    transition: '250',
-    cursor: 'pointer',
-  }),
-  {
-    lineHeight: '16px',
-  },
-])
-
-export const marketplaceIcon = style([
-  sprinkles({
-    display: 'inline-block',
-    width: '16',
-    height: '16',
-    borderRadius: '4',
-    flexShrink: '0',
-    marginLeft: '8',
-  }),
-  {
-    verticalAlign: 'top',
-  },
-])
-
-export const rarityInfo = style([
-  sprinkles({
-    display: 'flex',
-    borderRadius: '4',
-    height: '16',
-    color: 'textPrimary',
-    background: 'backgroundInteractive',
-    fontSize: '10',
-    fontWeight: 'semibold',
-    paddingX: '4',
-  }),
-  {
-    lineHeight: '12px',
-    letterSpacing: '0.04em',
-    backdropFilter: 'blur(6px)',
-  },
-])
-
-export const playbackSwitch = style([
-  sprinkles({
-    position: 'absolute',
-    width: '40',
-    height: '40',
-    zIndex: '1',
-  }),
-  {
-    marginLeft: calc.subtract('100%', '50px'),
-    transform: 'translateY(-56px)',
-  },
-])

src/nft/components/collection/Card.tsx

@@ -1,10 +1,10 @@
 import { BigNumber } from '@ethersproject/bignumber'
-import clsx from 'clsx'
+import { t, Trans } from '@lingui/macro'
+import Column from 'components/Column'
 import { OpacityHoverState } from 'components/Common'
+import Row from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
-import { Box } from 'nft/components/Box'
-import { Row } from 'nft/components/Flex'
 import {
   MinusIconLarge,
   PauseButtonIcon,
@@ -14,8 +14,6 @@ import {
   RarityVerifiedIcon,
   VerifiedIcon,
 } from 'nft/components/icons'
-import { body, bodySmall, buttonTextMedium, subhead } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
 import { GenieAsset, Rarity, UniformAspectRatio, UniformAspectRatios, WalletAsset } from 'nft/types'
 import { fallbackProvider, isAudio, isVideo, putCommas } from 'nft/utils'
@@ -32,11 +30,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { AlertTriangle } from 'react-feather'
+import { AlertTriangle, Pause, Play } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-
-import * as styles from './Card.css'
+import { colors } from 'theme/colors'
+import { opacify } from 'theme/utils'
 
 /* -------- ASSET CONTEXT -------- */
 export interface CardContextProps {
@@ -166,6 +164,31 @@ const StyledImageContainer = styled.div<{ isDisabled?: boolean }>`
   cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 `
 
+const CardContainer = styled.div<{ selected: boolean }>`
+  position: relative;
+  border-radius: ${BORDER_RADIUS}px;
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  overflow: hidden;
+  padding-bottom: 12px;
+  border-radius: 16px;
+  box-shadow: rgba(0, 0, 0, 10%) 0px 4px 12px;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  :after {
+    content: '';
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    border: ${({ selected }) => (selected ? '2px' : '1px')} solid;
+    border-radius: 16px;
+    border-color: ${({ theme, selected }) => (selected ? theme.accentAction : opacify(12, colors.gray500))};
+    pointer-events: none;
+  }
+`
+
 /* -------- ASSET CARD -------- */
 interface CardProps {
   asset: GenieAsset | WalletAsset
@@ -220,19 +243,16 @@ const Container = ({
 
   return (
     <CardContext.Provider value={providerValue}>
-      <Box
-        position="relative"
+      <CardContainer
+        selected={selected}
         ref={assetRef}
-        borderRadius={BORDER_RADIUS}
-        className={selected ? styles.selectedCard : styles.card}
         draggable={false}
         onMouseEnter={toggleHover}
         onMouseLeave={toggleHover}
-        transition="250"
         onClick={isDisabled ? () => null : onClick ?? handleAssetInBag}
       >
         {children}
-      </Box>
+      </CardContainer>
     </CardContext.Provider>
   )
 }
@@ -277,6 +297,13 @@ function getHeightFromAspectRatio(uniformAspectRatio: UniformAspectRatio, render
     : renderedHeight
 }
 
+function getMediaAspectRatio(
+  uniformAspectRatio?: UniformAspectRatio,
+  setUniformAspectRatio?: (uniformAspectRatio: UniformAspectRatio) => void
+): string {
+  return uniformAspectRatio === UniformAspectRatios.square || !setUniformAspectRatio ? '1' : 'auto'
+}
+
 interface ImageProps {
   uniformAspectRatio?: UniformAspectRatio
   setUniformAspectRatio?: (uniformAspectRatio: UniformAspectRatio) => void
@@ -284,6 +311,29 @@ interface ImageProps {
   setRenderedHeight?: (renderedHeight: number | undefined) => void
 }
 
+const StyledMediaContainer = styled(Row)`
+  overflow: hidden;
+  border-top-left-radius: ${BORDER_RADIUS}px;
+  border-top-right-radius: ${BORDER_RADIUS}px;
+`
+
+const StyledImage = styled.img<{
+  hovered: boolean
+  imageLoading: boolean
+  $aspectRatio?: string
+  $hidden?: boolean
+}>`
+  width: 100%;
+  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} transform`};
+  will-change: transform;
+  object-fit: contain;
+  visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};
+  transform: ${({ hovered }) => hovered && 'scale(1.15)'};
+  background: ${({ theme, imageLoading }) =>
+    imageLoading && `linear-gradient(270deg, ${theme.backgroundOutline} 0%, ${theme.backgroundSurface} 100%)`};
+`
+
 const Image = ({
   uniformAspectRatio = UniformAspectRatios.square,
   setUniformAspectRatio,
@@ -300,40 +350,50 @@ const Image = ({
   }
 
   return (
-    <Box display="flex" overflow="hidden" borderTopLeftRadius={BORDER_RADIUS} borderTopRightRadius={BORDER_RADIUS}>
-      <Box
-        as="img"
-        width="full"
-        style={{
-          aspectRatio: `${uniformAspectRatio === UniformAspectRatios.square || !setUniformAspectRatio ? '1' : 'auto'}`,
-          transition: 'transform 0.25s ease 0s',
-        }}
+    <StyledMediaContainer>
+      <StyledImage
         src={asset.imageUrl || asset.smallImageUrl}
-        objectFit="contain"
+        $aspectRatio={getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio)}
+        hovered={hovered && !isMobile}
+        imageLoading={!loaded}
         draggable={false}
         onError={() => setNoContent(true)}
         onLoad={(e) => {
           handleUniformAspectRatio(uniformAspectRatio, e, setUniformAspectRatio, renderedHeight, setRenderedHeight)
           setLoaded(true)
         }}
-        className={clsx(hovered && !isMobile && styles.cardImageHover, !loaded && styles.loadingBackground)}
       />
-    </Box>
+    </StyledMediaContainer>
   )
 }
 
-function getMediaAspectRatio(
-  uniformAspectRatio: UniformAspectRatio,
-  setUniformAspectRatio?: (uniformAspectRatio: UniformAspectRatio) => void
-): string {
-  return uniformAspectRatio === UniformAspectRatios.square || !setUniformAspectRatio ? '1' : 'auto'
-}
-
 interface MediaProps {
   shouldPlay: boolean
   setCurrentTokenPlayingMedia: (tokenId: string | undefined) => void
 }
 
+const PlaybackButton = styled.div`
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  z-index: 1;
+  margin-left: calc(100% - 50px);
+  transform: translateY(-56px);
+`
+
+const StyledVideo = styled.video<{
+  $aspectRatio?: string
+}>`
+  width: 100%;
+  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+`
+
+const StyledInnerMediaContainer = styled(Row)`
+  position: absolute;
+  left: 0px;
+  top: 0px;
+`
+
 const Video = ({
   uniformAspectRatio = UniformAspectRatios.square,
   setUniformAspectRatio,
@@ -360,52 +420,38 @@ const Video = ({
 
   return (
     <>
-      <Box display="flex" overflow="hidden">
-        <Box
-          as="img"
-          alt={asset.name || asset.tokenId}
-          width="full"
-          style={{
-            aspectRatio: getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio),
-            transition: 'transform 0.25s ease 0s',
-            willChange: 'transform',
-          }}
+      <StyledMediaContainer>
+        <StyledImage
           src={asset.imageUrl || asset.smallImageUrl}
-          objectFit="contain"
+          alt={asset.name || asset.tokenId}
+          $aspectRatio={getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio)}
+          hovered={hovered && !isMobile}
+          imageLoading={!imageLoaded}
           draggable={false}
           onError={() => setNoContent(true)}
           onLoad={(e) => {
             handleUniformAspectRatio(uniformAspectRatio, e, setUniformAspectRatio, renderedHeight, setRenderedHeight)
             setImageLoaded(true)
           }}
-          visibility={shouldPlay ? 'hidden' : 'visible'}
-          className={clsx(hovered && !isMobile && styles.cardImageHover, !imageLoaded && styles.loadingBackground)}
+          $hidden={shouldPlay}
         />
-      </Box>
+      </StyledMediaContainer>
       {shouldPlay ? (
         <>
-          <Box className={styles.playbackSwitch}>
-            <PauseButtonIcon
-              width="100%"
-              height="100%"
+          <PlaybackButton>
+            <Pause
+              size="24px"
               onClick={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
                 setCurrentTokenPlayingMedia(undefined)
               }}
-              className="playback-icon"
             />
-          </Box>
-          <Box position="absolute" left="0" top="0" display="flex">
-            <Box
-              as="video"
+          </PlaybackButton>
+          <StyledInnerMediaContainer>
+            <StyledVideo
+              $aspectRatio={getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio)}
               ref={vidRef}
-              width="full"
-              style={{
-                aspectRatio: `${
-                  uniformAspectRatio === UniformAspectRatios.square || !setUniformAspectRatio ? '1' : 'auto'
-                }`,
-              }}
               onEnded={(e) => {
                 e.preventDefault()
                 setCurrentTokenPlayingMedia(undefined)
@@ -414,29 +460,32 @@ const Video = ({
               playsInline
             >
               <source src={asset.animationUrl} />
-            </Box>
-          </Box>
+            </StyledVideo>
+          </StyledInnerMediaContainer>
         </>
       ) : (
-        <Box className={styles.playbackSwitch}>
+        <PlaybackButton>
           {((!isMobile && hovered) || isMobile) && (
-            <PlayButtonIcon
-              width="100%"
-              height="100%"
+            <Play
+              size="24px"
               onClick={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
                 setCurrentTokenPlayingMedia(asset.tokenId)
               }}
-              className="playback-icon"
             />
           )}
-        </Box>
+        </PlaybackButton>
       )}
     </>
   )
 }
 
+const StyledAudio = styled.audio`
+  width: 100%;
+  height: 100%;
+`
+
 const Audio = ({
   uniformAspectRatio = UniformAspectRatios.square,
   setUniformAspectRatio,
@@ -463,29 +512,25 @@ const Audio = ({
 
   return (
     <>
-      <Box display="flex" overflow="hidden">
-        <Box
-          as="img"
-          alt={asset.name || asset.tokenId}
-          width="full"
-          style={{
-            aspectRatio: getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio),
-            transition: 'transform 0.4s ease 0s',
-          }}
+      <StyledMediaContainer>
+        <StyledImage
           src={asset.imageUrl || asset.smallImageUrl}
-          objectFit="contain"
+          alt={asset.name || asset.tokenId}
+          $aspectRatio={getMediaAspectRatio(uniformAspectRatio, setUniformAspectRatio)}
+          hovered={hovered && !isMobile}
+          imageLoading={!imageLoaded}
           draggable={false}
           onError={() => setNoContent(true)}
           onLoad={(e) => {
             handleUniformAspectRatio(uniformAspectRatio, e, setUniformAspectRatio, renderedHeight, setRenderedHeight)
             setImageLoaded(true)
+            setImageLoaded(true)
           }}
-          className={clsx(hovered && !isMobile && styles.cardImageHover, !imageLoaded && styles.loadingBackground)}
         />
-      </Box>
+      </StyledMediaContainer>
       {shouldPlay ? (
         <>
-          <Box className={styles.playbackSwitch}>
+          <PlaybackButton>
             <PauseButtonIcon
               width="100%"
               height="100%"
@@ -494,26 +539,22 @@ const Audio = ({
                 e.stopPropagation()
                 setCurrentTokenPlayingMedia(undefined)
               }}
-              className="playback-icon"
             />
-          </Box>
-          <Box position="absolute" left="0" top="0" display="flex">
-            <Box
-              as="audio"
+          </PlaybackButton>
+          <StyledInnerMediaContainer>
+            <StyledAudio
               ref={audRef}
-              width="full"
-              height="full"
               onEnded={(e) => {
                 e.preventDefault()
                 setCurrentTokenPlayingMedia(undefined)
               }}
             >
               <source src={asset.animationUrl} />
-            </Box>
-          </Box>
+            </StyledAudio>
+          </StyledInnerMediaContainer>
         </>
       ) : (
-        <Box className={styles.playbackSwitch}>
+        <PlaybackButton>
           {((!isMobile && hovered) || isMobile) && (
             <PlayButtonIcon
               width="100%"
@@ -523,10 +564,9 @@ const Audio = ({
                 e.stopPropagation()
                 setCurrentTokenPlayingMedia(asset.tokenId)
               }}
-              className="playback-icon"
             />
           )}
-        </Box>
+        </PlaybackButton>
       )}
     </>
   )
@@ -537,36 +577,39 @@ interface CardDetailsContainerProps {
   children: ReactNode
 }
 
+const StyledDetailsContainer = styled(Column)`
+  position: relative;
+  padding: 12px 12px 0px;
+  justify-content: space-between;
+  transition: ${({ theme }) => `${theme.transition.duration.medium}`};
+`
+
 const DetailsContainer = ({ children }: CardDetailsContainerProps) => {
-  return (
-    <Row
-      position="relative"
-      paddingX="12"
-      paddingTop="12"
-      justifyContent="space-between"
-      flexDirection="column"
-      transition="250"
-    >
-      {children}
-    </Row>
-  )
+  return <StyledDetailsContainer>{children}</StyledDetailsContainer>
 }
 
+const StyledInfoContainer = styled.div`
+  overflow: hidden;
+  width: 100%;
+`
+
 const InfoContainer = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box overflow="hidden" width="full">
-      {children}
-    </Box>
-  )
+  return <StyledInfoContainer>{children}</StyledInfoContainer>
 }
 
-const TruncatedTextRow = styled(Row)`
+const TruncatedTextRow = styled(ThemedText.BodySmall)`
+  display: flex;
   padding: 2px;
   white-space: pre;
   text-overflow: ellipsis;
   display: block;
   overflow: hidden;
-  flex: 1;
+`
+
+const AssetNameRow = styled(TruncatedTextRow)`
+  color: ${({ theme }) => theme.textPrimary};
+  font-size: 16px !important;
+  font-weight: 400;
 `
 
 interface ProfileNftDetailsProps {
@@ -574,6 +617,18 @@ interface ProfileNftDetailsProps {
   hideDetails: boolean
 }
 
+const PrimaryRowContainer = styled.div`
+  overflow: hidden;
+  width: 100%;
+  flex-wrap: nowrap;
+`
+
+const FloorPriceRow = styled(TruncatedTextRow)`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+`
+
 const ProfileNftDetails = ({ asset, hideDetails }: ProfileNftDetailsProps) => {
   const assetName = () => {
     if (!asset.name && !asset.tokenId) return
@@ -583,89 +638,95 @@ const ProfileNftDetails = ({ asset, hideDetails }: ProfileNftDetailsProps) => {
   const shouldShowUserListedPrice = !asset.notForSale && asset.asset_contract.tokenType !== NftStandard.Erc1155
 
   return (
-    <Box overflow="hidden" width="full" flexWrap="nowrap">
+    <PrimaryRowContainer>
       <PrimaryRow>
         <PrimaryDetails>
-          <TruncatedTextRow className={bodySmall} style={{ color: themeVars.colors.textSecondary }}>
+          <TruncatedTextRow color="textSecondary">
             {!!asset.asset_contract.name && <span>{asset.asset_contract.name}</span>}
           </TruncatedTextRow>
           {asset.collectionIsVerified && <VerifiedIcon height="18px" width="18px" />}
         </PrimaryDetails>
         {!hideDetails && <DetailsLink />}
       </PrimaryRow>
-      <Row justifyItems="flex-start">
-        <TruncatedTextRow
-          className={body}
-          style={{
-            color: themeVars.colors.textPrimary,
-          }}
-        >
-          {assetName()}
-        </TruncatedTextRow>
+      <Row>
+        <AssetNameRow>{assetName()}</AssetNameRow>
         {asset.susFlag && <Suspicious />}
       </Row>
-      <TruncatedTextRow className={buttonTextMedium} style={{ color: themeVars.colors.textPrimary }}>
+      <FloorPriceRow>
         {shouldShowUserListedPrice && asset.floor_sell_order_price
           ? `${floorFormatter(asset.floor_sell_order_price)} ETH`
           : ' '}
-      </TruncatedTextRow>
-    </Box>
+      </FloorPriceRow>
+    </PrimaryRowContainer>
   )
 }
 
-const PrimaryRow = ({ children }: { children: ReactNode }) => (
-  <Row gap="8" justifyContent="space-between">
-    {children}
-  </Row>
-)
+const StyledPrimaryRow = styled(Row)`
+  gap: 8px;
+  justify-content: space-between;
+`
+
+const PrimaryRow = ({ children }: { children: ReactNode }) => <StyledPrimaryRow>{children}</StyledPrimaryRow>
+
+const StyledPrimaryDetails = styled(Row)`
+  justify-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+`
 
 const PrimaryDetails = ({ children }: { children: ReactNode }) => (
-  <Row justifyItems="center" overflow="hidden" whiteSpace="nowrap">
-    {children}
-  </Row>
+  <StyledPrimaryDetails>{children}</StyledPrimaryDetails>
 )
 
+const PrimaryInfoContainer = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+`
+
 const PrimaryInfo = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" className={body}>
-      {children}
-    </Box>
-  )
+  return <PrimaryInfoContainer>{children}</PrimaryInfoContainer>
 }
 
-const SecondaryRow = ({ children }: { children: ReactNode }) => (
-  <Row height="20" justifyContent="space-between" marginTop="6">
-    {children}
-  </Row>
-)
+const StyledSecondaryRow = styled(Row)`
+  height: 20px;
+  justify-content: space-between;
+  margin-top: 6px;
+`
+
+const SecondaryRow = ({ children }: { children: ReactNode }) => <StyledSecondaryRow>{children}</StyledSecondaryRow>
+
+const StyledSecondaryDetails = styled(Row)`
+  overflow: hidden;
+  white-space: nowrap;
+`
 
 const SecondaryDetails = ({ children }: { children: ReactNode }) => (
-  <Row overflow="hidden" whiteSpace="nowrap">
-    {children}
-  </Row>
+  <StyledSecondaryDetails>{children}</StyledSecondaryDetails>
 )
 
+const SecondaryInfoContainer = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 20px;
+`
+
 const SecondaryInfo = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box
-      color="textPrimary"
-      overflow="hidden"
-      whiteSpace="nowrap"
-      textOverflow="ellipsis"
-      style={{ lineHeight: '20px' }}
-      className={subhead}
-    >
-      {children}
-    </Box>
-  )
+  return <SecondaryInfoContainer>{children}</SecondaryInfoContainer>
 }
 
+const TertiaryInfoContainer = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
+  margin-top: 8px;
+`
+
 const TertiaryInfo = ({ children }: { children: ReactNode }) => {
-  return (
-    <Box marginTop="8" color="textSecondary">
-      {children}
-    </Box>
-  )
+  return <TertiaryInfoContainer>{children}</TertiaryInfoContainer>
 }
 
 interface Erc1155ControlsInterface {
@@ -700,15 +761,18 @@ const Erc1155Controls = ({ quantity }: Erc1155ControlsInterface) => {
   )
 }
 
+const StyledMarketplaceIcon = styled.img`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  margin-left: 8px;
+  vertical-align: top;
+`
+
 const MarketplaceIcon = ({ marketplace }: { marketplace: string }) => {
-  return (
-    <Box
-      as="img"
-      alt={marketplace}
-      src={`/nft/svgs/marketplaces/${marketplace}.svg`}
-      className={styles.marketplaceIcon}
-    />
-  )
+  return <StyledMarketplaceIcon alt={marketplace} src={`/nft/svgs/marketplaces/${marketplace}.svg`} />
 }
 
 const DetailsLink = () => {
@@ -721,7 +785,7 @@ const DetailsLink = () => {
         e.stopPropagation()
       }}
     >
-      <Box data-testid="nft-details-link">Details</Box>
+      <div data-testid="nft-details-link">Details</div>
     </DetailsLinkContainer>
   )
 }
@@ -734,6 +798,28 @@ interface RankingProps {
   rarityLogo?: string
 }
 
+const RarityLogoContainer = styled(Row)`
+  margin-right: 4px;
+  width: 16px;
+`
+
+const RarityText = styled(ThemedText.BodySmall)`
+  display: flex;
+`
+
+const RarityInfo = styled(Row)`
+  height: 16px;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.textPrimary};
+  background: ${({ theme }) => theme.backgroundInteractive};
+  font-size: 10px;
+  font-weight: 600;
+  padding: 0px 4px;
+  line-height: 12px;
+  letter-spacing: 0.04em;
+  backdrop-filter: blur(6px);
+`
+
 const Ranking = ({ rarity, provider, rarityVerified, rarityLogo }: RankingProps) => {
   const { asset } = useCardContext()
 
@@ -744,44 +830,49 @@ const Ranking = ({ rarity, provider, rarityVerified, rarityLogo }: RankingProps)
           <MouseoverTooltip
             text={
               <Row>
-                <Box display="flex" marginRight="4">
-                  <img src={rarityLogo} alt="cardLogo" width={16} />
-                </Box>
-                <Box width="full" className={bodySmall}>
+                <RarityLogoContainer>
+                  <img src={rarityLogo} alt="cardLogo" width={16} height={16} />
+                </RarityLogoContainer>
+                <RarityText>
                   {rarityVerified
                     ? `Verified by ${
                         ('collectionName' in asset && asset.collectionName) ||
                         ('asset_contract' in asset && asset.asset_contract?.name)
                       }`
                     : `Ranking by ${rarity.primaryProvider === 'Genie' ? fallbackProvider : rarity.primaryProvider}`}
-                </Box>
+                </RarityText>
               </Row>
             }
             placement="top"
           >
-            <Box className={styles.rarityInfo}>
-              <Box paddingTop="2" paddingBottom="2" display="flex">
-                {putCommas(provider.rank)}
-              </Box>
-
-              <Box display="flex" height="16">
-                {rarityVerified ? <RarityVerifiedIcon /> : null}
-              </Box>
-            </Box>
+            <RarityInfo>
+              <Row padding="2px 0px">{putCommas(provider.rank)}</Row>
+              <Row>{rarityVerified ? <RarityVerifiedIcon /> : null}</Row>
+            </RarityInfo>
           </MouseoverTooltip>
         </RankingContainer>
       )}
     </>
   )
 }
-const SUSPICIOUS_TEXT = 'Blocked on OpenSea'
+
+const SUSPICIOUS_TEXT = t`Blocked on OpenSea`
+
+const SuspiciousIconContainer = styled(Row)`
+  flex-shrink: 0;
+  margin-left: 4px;
+`
+
+const PoolIconContainer = styled(SuspiciousIconContainer)`
+  color: ${({ theme }) => theme.textSecondary};
+`
 
 const Suspicious = () => {
   return (
-    <MouseoverTooltip text={<Box className={bodySmall}>{SUSPICIOUS_TEXT}</Box>} placement="top">
-      <Box display="flex" flexShrink="0" marginLeft="4">
+    <MouseoverTooltip text={<ThemedText.BodySmall>{SUSPICIOUS_TEXT}</ThemedText.BodySmall>} placement="top">
+      <SuspiciousIconContainer>
         <SuspiciousIcon />
-      </Box>
+      </SuspiciousIconContainer>
     </MouseoverTooltip>
   )
 }
@@ -790,44 +881,46 @@ const Pool = () => {
   return (
     <MouseoverTooltip
       text={
-        <Box className={bodySmall}>
+        <ThemedText.BodySmall>
           This NFT is part of a liquidity pool. Buying this will increase the price of the remaining pooled NFTs.
-        </Box>
+        </ThemedText.BodySmall>
       }
       placement="top"
     >
-      <Box display="flex" flexShrink="0" marginLeft="4" color="textSecondary">
+      <PoolIconContainer>
         <PoolIcon width="20" height="20" />
-      </Box>
+      </PoolIconContainer>
     </MouseoverTooltip>
   )
 }
 
+const NoContentContainerBackground = styled.div<{ height?: number }>`
+  position: relative;
+  width: 100%;
+  height: ${({ height }) => (height ? `${height}px` : 'auto')};
+  padding-top: 100%;
+  background: ${({ theme }) =>
+    `linear-gradient(90deg, ${theme.backgroundSurface} 0%, ${theme.backgroundInteractive} 95.83%)`};
+`
+
+const NoContentText = styled(ThemedText.BodyPrimary)`
+  position: absolute;
+  text-align: center;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  color: ${colors.gray500};
+`
+
 const NoContentContainer = ({ height }: { height?: number }) => (
   <>
-    <Box
-      position="relative"
-      width="full"
-      style={{
-        height: height ? `${height}px` : 'auto',
-        paddingTop: '100%',
-        background: `linear-gradient(90deg, ${themeVars.colors.backgroundSurface} 0%, ${themeVars.colors.backgroundInteractive} 95.83%)`,
-      }}
-    >
-      <Box
-        position="absolute"
-        textAlign="center"
-        left="1/2"
-        top="1/2"
-        style={{ transform: 'translate3d(-50%, -50%, 0)' }}
-        color="gray500"
-        className={body}
-      >
-        Content not
+    <NoContentContainerBackground height={height}>
+      <NoContentText>
+        <Trans>Content not</Trans>
         <br />
-        available yet
-      </Box>
-    </Box>
+        <Trans>available yet</Trans>
+      </NoContentText>
+    </NoContentContainerBackground>
   </>
 )
 

src/nft/components/explore/Banner.tsx

@@ -1,3 +1,6 @@
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
+import { HistoryDuration } from 'graphql/data/__generated__/types-and-hooks'
+import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
 import { fetchTrendingCollections } from 'nft/queries'
 import { TimePeriod } from 'nft/types'
 import { calculateCardIndex } from 'nft/utils'
@@ -114,6 +117,7 @@ const TRENDING_COLLECTION_SIZE = 5
 
 const Banner = () => {
   const navigate = useNavigate()
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
 
   const { data } = useQuery(
     ['trendingCollections'],
@@ -130,12 +134,18 @@ const Banner = () => {
       refetchOnMount: false,
     }
   )
-
-  const collections = useMemo(
-    () => data?.filter((collection) => !EXCLUDED_COLLECTIONS.includes(collection.address)).slice(0, 5),
-    [data]
+  const { data: gqlData } = useTrendingCollections(
+    TRENDING_COLLECTION_SIZE + EXCLUDED_COLLECTIONS.length,
+    HistoryDuration.Day
   )
 
+  const collections = useMemo(() => {
+    const gatedData = isNftGraphqlEnabled ? gqlData : data
+    return gatedData
+      ?.filter((collection) => collection.address && !EXCLUDED_COLLECTIONS.includes(collection.address))
+      .slice(0, 5)
+  }, [data, gqlData, isNftGraphqlEnabled])
+
   const [activeCollectionIdx, setActiveCollectionIdx] = useState(0)
   const onToggleNextSlide = useCallback(
     (direction: number) => {

src/nft/components/explore/CarouselCard.tsx

@@ -1,10 +1,11 @@
 import { formatNumberOrString, NumberType } from '@uniswap/conedison/format'
 import { loadingAnimation } from 'components/Loader/styled'
 import { LoadingBubble } from 'components/Tokens/loading'
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
 import { useCollection } from 'graphql/data/nft/Collection'
 import { VerifiedIcon } from 'nft/components/icons'
 import { Markets, TrendingCollection } from 'nft/types'
-import { formatWeiToDecimal } from 'nft/utils'
+import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme/components/text'
 
@@ -235,7 +236,8 @@ const MARKETS_ENUM_TO_NAME = {
 }
 
 export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
-  const { data: gqlCollection, loading } = useCollection(collection.address)
+  const { data: gqlCollection, loading } = useCollection(collection.address ?? '')
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
 
   if (loading) return <LoadingCarouselCard />
 
@@ -252,9 +254,14 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
               </FirstColumnTextWrapper>
             </TableElement>
             <TableElement>
-              <ThemedText.SubHeaderSmall color="userThemeColor">
-                {formatWeiToDecimal(collection.floor.toString())} ETH Floor
-              </ThemedText.SubHeaderSmall>
+              {collection.floor && (
+                <ThemedText.SubHeaderSmall color="userThemeColor">
+                  {isNftGraphqlEnabled
+                    ? ethNumberStandardFormatter(collection.floor)
+                    : formatWeiToDecimal(collection.floor.toString())}{' '}
+                  ETH Floor
+                </ThemedText.SubHeaderSmall>
+              )}
             </TableElement>
             <TableElement>
               <ThemedText.SubHeaderSmall color="userThemeColor">
@@ -304,7 +311,7 @@ const CollectionName = styled(ThemedText.MediumHeader)`
 
 const CarouselCardHeader = ({ collection }: { collection: TrendingCollection }) => {
   return (
-    <CardHeaderContainer src={collection.bannerImageUrl}>
+    <CardHeaderContainer src={collection.bannerImageUrl ?? ''}>
       <CardHeaderColumn>
         <CollectionImage src={collection.imageUrl} />
         <CollectionNameContainer>

src/nft/components/explore/Cells/Cells.tsx

@@ -1,4 +1,5 @@
 import { formatEther } from '@ethersproject/units'
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
 import { SquareArrowDownIcon, SquareArrowUpIcon, VerifiedIcon } from 'nft/components/icons'
 import { useIsMobile } from 'nft/hooks'
 import { Denomination } from 'nft/types'
@@ -114,9 +115,12 @@ export const EthCell = ({
   usdPrice?: number
 }) => {
   const denominatedValue = getDenominatedValue(denomination, true, value, usdPrice)
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
   const formattedValue = denominatedValue
     ? denomination === Denomination.ETH
-      ? formatWeiToDecimal(denominatedValue.toString(), true) + ' ETH'
+      ? isNftGraphqlEnabled
+        ? ethNumberStandardFormatter(denominatedValue.toString(), false, true, false) + ' ETH'
+        : formatWeiToDecimal(denominatedValue.toString(), true) + ' ETH'
       : ethNumberStandardFormatter(denominatedValue, true, false, true)
     : '-'
 

src/nft/components/explore/CollectionTable.tsx

@@ -19,7 +19,9 @@ export enum ColumnHeaders {
 
 const VOLUME_CHANGE_MAX_VALUE = 9999
 
-const compareFloats = (a: number, b: number): 1 | -1 => {
+const compareFloats = (a?: number, b?: number): 1 | -1 => {
+  if (!a) return -1
+  if (!b) return 1
   return Math.round(a * 100000) >= Math.round(b * 100000) ? 1 : -1
 }
 
@@ -123,7 +125,7 @@ const CollectionTable = ({ data, timePeriod }: { data: CollectionTableColumn[];
           const { change } = cell.row.original.volume
           return timePeriod === TimePeriod.AllTime ? (
             <TextCell value="-" />
-          ) : change >= VOLUME_CHANGE_MAX_VALUE ? (
+          ) : change && change >= VOLUME_CHANGE_MAX_VALUE ? (
             <ChangeCell change={change}>{`>${VOLUME_CHANGE_MAX_VALUE}`}%</ChangeCell>
           ) : (
             <ChangeCell change={change} />

src/nft/components/explore/TrendingCollections.tsx

@@ -1,4 +1,7 @@
 import { OpacityHoverState } from 'components/Common'
+import { useNftGraphqlEnabled } from 'featureFlags/flags/nftlGraphql'
+import { HistoryDuration } from 'graphql/data/__generated__/types-and-hooks'
+import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
 import ms from 'ms.macro'
 import { CollectionTableColumn, Denomination, TimePeriod, VolumeType } from 'nft/types'
 import { fetchPrice } from 'nft/utils'
@@ -29,7 +32,7 @@ const StyledHeader = styled.div`
   color: ${({ theme }) => theme.textPrimary};
   font-size: 36px;
   line-height: 44px;
-  weight: 500;
+  font-weight: 500;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     font-size: 20px;
@@ -69,9 +72,25 @@ const StyledSelectorText = styled(ThemedText.SubHeader)<{ active: boolean }>`
   color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
 `
 
+function convertTimePeriodToHistoryDuration(timePeriod: TimePeriod): HistoryDuration {
+  switch (timePeriod) {
+    case TimePeriod.OneDay:
+      return HistoryDuration.Day
+    case TimePeriod.SevenDays:
+      return HistoryDuration.Week
+    case TimePeriod.ThirtyDays:
+      return HistoryDuration.Month
+    case TimePeriod.AllTime:
+      return HistoryDuration.Max
+    default:
+      return HistoryDuration.Day
+  }
+}
+
 const TrendingCollections = () => {
   const [timePeriod, setTimePeriod] = useState<TimePeriod>(TimePeriod.OneDay)
   const [isEthToggled, setEthToggled] = useState(true)
+  const isNftGraphqlEnabled = useNftGraphqlEnabled()
 
   const { isSuccess, data } = useQuery(
     ['trendingCollections', timePeriod],
@@ -86,6 +105,8 @@ const TrendingCollections = () => {
     }
   )
 
+  const { data: gqlData, loading } = useTrendingCollections(100, convertTimePeriodToHistoryDuration(timePeriod))
+
   const { data: usdPrice } = useQuery(['fetchPrice', {}], () => fetchPrice(), {
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
@@ -94,8 +115,10 @@ const TrendingCollections = () => {
   })
 
   const trendingCollections = useMemo(() => {
-    if (isSuccess && data) {
-      return data.map((d) => ({
+    const gatedData = isNftGraphqlEnabled ? gqlData : data
+    const dataLoaded = isNftGraphqlEnabled ? !loading : isSuccess
+    if (dataLoaded && gatedData) {
+      return gatedData.map((d) => ({
         ...d,
         collection: {
           name: d.name,
@@ -114,7 +137,6 @@ const TrendingCollections = () => {
         },
         owners: {
           value: d.owners,
-          change: d.ownersChange,
         },
         sales: d.sales,
         totalSupply: d.totalSupply,
@@ -122,7 +144,7 @@ const TrendingCollections = () => {
         usdPrice,
       }))
     } else return [] as CollectionTableColumn[]
-  }, [data, isSuccess, isEthToggled, usdPrice])
+  }, [isNftGraphqlEnabled, gqlData, data, loading, isSuccess, isEthToggled, usdPrice])
 
   return (
     <ExploreContainer>

src/nft/components/icons.tsx

@@ -304,30 +304,6 @@ export const ClockIcon = () => (
   </svg>
 )
 
-export const LoadingIcon = (props: SVGProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="100px"
-    height="100px"
-    viewBox="0 0 100 100"
-    preserveAspectRatio="xMidYMid"
-    {...props}
-  >
-    <circle cx="50" cy="50" fill="none" strokeWidth="10" r="35" strokeDasharray="164.93361431346415 56.97787143782138">
-      <animateTransform
-        attributeName="transform"
-        type="rotate"
-        repeatCount="indefinite"
-        dur="1s"
-        values="0 50 50;360 50 50"
-        keyTimes="0;1"
-        {...props}
-      ></animateTransform>
-    </circle>
-  </svg>
-)
-
 export const ApprovedCheckmarkIcon = (props: SVGProps) => (
   <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
@@ -337,25 +313,6 @@ export const ApprovedCheckmarkIcon = (props: SVGProps) => (
   </svg>
 )
 
-export const HazardIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="8.57227" y="6.66669" width="2.85714" height="8.57143" fill="white" />
-    <path
-      d="M5.14158 15.7143H14.8489C15.8017 15.7143 16.4294 15.0318 16.4294 14.1977C16.4294 13.9377 16.3509 13.6885 16.2052 13.4502L11.3516 5.05483C11.0489 4.53486 10.5221 4.28571 9.99523 4.28571C9.46839 4.28571 8.93034 4.53486 8.6389 5.05483L3.78524 13.4502C3.63952 13.6885 3.57227 13.9377 3.57227 14.1977C3.57227 15.0318 4.18878 15.7143 5.14158 15.7143ZM9.99523 11.4245C9.56928 11.4245 9.25542 11.1428 9.24421 10.7312L9.15453 7.71969C9.14332 7.24305 9.49081 6.90724 9.99523 6.90724C10.5109 6.90724 10.8584 7.23222 10.8471 7.71969L10.7575 10.7312C10.7351 11.1428 10.4324 11.4245 9.99523 11.4245ZM9.99523 14.0677C9.43477 14.0677 8.98639 13.6452 8.98639 13.1036C8.98639 12.5728 9.43477 12.1503 9.99523 12.1503C10.5669 12.1503 11.0153 12.5836 11.0153 13.1036C11.0041 13.6452 10.5669 14.0677 9.99523 14.0677Z"
-      fill="#F95E14"
-    />
-  </svg>
-)
-
-export const FailedListingIcon = (props: SVGProps) => (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M9.9933 16.2444C13.5529 16.2444 16.4909 13.3064 16.4909 9.75307C16.4909 6.19978 13.5466 3.26172 9.98703 3.26172C6.43373 3.26172 3.50195 6.19978 3.50195 9.75307C3.50195 13.3064 6.44001 16.2444 9.9933 16.2444ZM8.12877 12.3207C7.78976 12.3207 7.62653 12.1324 7.62653 11.8624V7.63742C7.62653 7.36747 7.78976 7.17913 8.12877 7.17913H8.80678C9.14579 7.17913 9.30901 7.36747 9.30901 7.63742V11.8624C9.30901 12.1324 9.14579 12.3207 8.80678 12.3207H8.12877ZM11.1798 12.3207C10.8471 12.3207 10.6776 12.1324 10.6776 11.8624V7.63742C10.6776 7.36747 10.8471 7.17913 11.1798 7.17913H11.8641C12.1906 7.17913 12.3538 7.36747 12.3538 7.63742V11.8624C12.3538 12.1324 12.1906 12.3207 11.8641 12.3207H11.1798Z"
-      fill={themeVars.colors.textSecondary}
-    />
-  </svg>
-)
-
 export const FilterIcon = (props: SVGProps) => (
   <svg width="20" height="20" viewBox="1 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path

src/nft/components/modals/Overlay.css.ts

@@ -16,6 +16,6 @@ export const overlay = style([
   {
     opacity: 0.72,
     overflow: 'hidden',
-    zIndex: Z_INDEX.modalBackdrop + 1,
+    zIndex: Z_INDEX.modalBackdrop - 2,
   },
 ])

src/nft/components/profile/list/ListPage.tsx

@@ -1,22 +1,29 @@
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
+import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
 import Row from 'components/Row'
-import { SMALL_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
-import { ListingButton } from 'nft/components/bag/profile/ListingButton'
-import { approveCollectionRow, getListingState, getTotalEthValue, verifyStatus } from 'nft/components/bag/profile/utils'
-import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
+import { useStablecoinValue } from 'hooks/useStablecoinPrice'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
+import { ListingButton } from 'nft/components/profile/list/ListingButton'
+import {
+  approveCollectionRow,
+  getTotalEthValue,
+  useSubscribeListingState,
+  verifyStatus,
+} from 'nft/components/profile/list/utils'
+import { useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
 import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
 import { looksRareNonceFetcher } from 'nft/queries'
-import { ListingStatus, ProfilePageStateType } from 'nft/types'
-import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
+import { ProfilePageStateType } from 'nft/types'
+import { formatEth } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { useEffect, useMemo, useReducer, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 import shallow from 'zustand/shallow'
@@ -81,20 +88,11 @@ const ButtonsWrapper = styled(Row)`
   width: min-content;
 `
 
-const MarketWrap = styled.section<{ isNftListV2: boolean }>`
+const MarketWrap = styled.section`
   gap: 48px;
   margin: 0px auto;
   width: 100%;
   max-width: 1200px;
-  ${({ isNftListV2 }) => !isNftListV2 && v1Padding}
-`
-
-const v1Padding = css`
-  padding: 0px 16px;
-
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    padding: 0px 44px;
-  }
 `
 
 const ListingHeaderRow = styled(Row)`
@@ -112,15 +110,6 @@ const GridWrapper = styled.div`
   margin-bottom: 48px;
 `
 
-const MobileListButtonWrapper = styled.div`
-  display: flex;
-  margin: 14px 16px 32px 16px;
-
-  @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    display: none;
-  }
-`
-
 const FloatingConfirmationBar = styled(Row)<{ issues: boolean }>`
   padding: 12px 12px 12px 32px;
   border: 1px solid;
@@ -195,9 +184,7 @@ const EthValueWrapper = styled.span<{ totalEthListingValue: boolean }>`
 export const ListPage = () => {
   const { setProfilePageState: setSellPageState } = useProfilePageState()
   const { provider } = useWeb3React()
-  const toggleBag = useBag((s) => s.toggleBag)
   const isMobile = useIsMobile()
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
   const { setGlobalMarketplaces, sellAssets, issues } = useSellAsset(
     ({ setGlobalMarketplaces, sellAssets, issues }) => ({
@@ -207,26 +194,10 @@ export const ListPage = () => {
     }),
     shallow
   )
-  const {
-    listings,
-    collectionsRequiringApproval,
-    listingStatus,
-    setListingStatus,
-    setLooksRareNonce,
-    setCollectionStatusAndCallback,
-  } = useNFTList(
-    ({
+  const { listings, collectionsRequiringApproval, setLooksRareNonce, setCollectionStatusAndCallback } = useNFTList(
+    ({ listings, collectionsRequiringApproval, setLooksRareNonce, setCollectionStatusAndCallback }) => ({
       listings,
       collectionsRequiringApproval,
-      listingStatus,
-      setListingStatus,
-      setLooksRareNonce,
-      setCollectionStatusAndCallback,
-    }) => ({
-      listings,
-      collectionsRequiringApproval,
-      listingStatus,
-      setListingStatus,
       setLooksRareNonce,
       setCollectionStatusAndCallback,
     }),
@@ -234,32 +205,16 @@ export const ListPage = () => {
   )
 
   const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
-  const anyListingsMissingPrice = useMemo(() => !!listings.find((listing) => !listing.price), [listings])
+  const nativeCurrency = useNativeCurrency()
+  const parsedAmount = tryParseCurrencyAmount(totalEthListingValue.toString(), nativeCurrency)
+  const usdcValue = useStablecoinValue(parsedAmount)
+  const usdcAmount = formatCurrencyAmount(usdcValue, NumberType.FiatTokenPrice)
   const [showListModal, toggleShowListModal] = useReducer((s) => !s, false)
   const [selectedMarkets, setSelectedMarkets] = useState([ListingMarkets[0]]) // default marketplace: x2y2
-  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
   const signer = provider?.getSigner()
 
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPriceInUSD(price ?? 0)
-    })
-  }, [])
-
-  // TODO with removal of list v1 see if this logic can be removed
-  useEffect(() => {
-    const state = getListingState(collectionsRequiringApproval, listings)
-
-    if (state.allListingsApproved) setListingStatus(ListingStatus.APPROVED)
-    else if (state.anyPaused && !state.anyActiveFailures && !state.anyActiveSigning && !state.anyActiveRejections) {
-      setListingStatus(ListingStatus.CONTINUE)
-    } else if (state.anyPaused) setListingStatus(ListingStatus.PAUSED)
-    else if (state.anyActiveSigning) setListingStatus(ListingStatus.SIGNING)
-    else if (state.allListingsPending || (state.allCollectionsPending && state.allListingsDefined))
-      setListingStatus(ListingStatus.PENDING)
-    else if (state.anyActiveFailures && listingStatus !== ListingStatus.PAUSED) setListingStatus(ListingStatus.FAILED)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [listings, collectionsRequiringApproval])
+  // instantiate listings and collections to approve when users modify input data
+  useSubscribeListingState()
 
   useEffect(() => {
     setGlobalMarketplaces(selectedMarkets)
@@ -270,14 +225,13 @@ export const ListPage = () => {
     token_ids: sellAssets.map((asset) => asset.tokenId),
     marketplaces: Array.from(new Set(listings.map((asset) => asset.marketplace.name))),
     list_quantity: listings.length,
-    usd_value: ethPriceInUSD * totalEthListingValue,
+    usd_value: usdcAmount,
     ...trace,
   }
 
   const startListingFlow = async () => {
     if (!signer) return
     sendAnalyticsEvent(NFTEventName.NFT_SELL_START_LISTING, { ...startListingEventProperties })
-    setListingStatus(ListingStatus.SIGNING)
     const signerAddress = await signer.getAddress()
     const nonce = await looksRareNonceFetcher(signerAddress)
     setLooksRareNonce(nonce ?? 0)
@@ -291,7 +245,7 @@ export const ListPage = () => {
     }
   }
 
-  const handleV2Click = () => {
+  const showModalAndStartListing = () => {
     toggleShowListModal()
     startListingFlow()
   }
@@ -308,7 +262,7 @@ export const ListPage = () => {
 
   return (
     <Column>
-      <MarketWrap isNftListV2={isNftListV2}>
+      <MarketWrap>
         <ListingHeader>
           <Row>
             <ArrowContainer>
@@ -332,39 +286,22 @@ export const ListPage = () => {
           <NFTListingsGrid selectedMarkets={selectedMarkets} />
         </GridWrapper>
       </MarketWrap>
-      {isNftListV2 && (
-        <>
-          <FloatingConfirmationBar issues={!!issues}>
-            {BannerText}
-            <ProceedsAndButtonWrapper>
-              <ProceedsWrapper>
-                <EthValueWrapper totalEthListingValue={!!totalEthListingValue}>
-                  {totalEthListingValue > 0 ? formatEth(totalEthListingValue) : '-'} ETH
-                </EthValueWrapper>
-                {!!totalEthListingValue && !!ethPriceInUSD && (
-                  <UsdValue>{formatUsdPrice(totalEthListingValue * ethPriceInUSD)}</UsdValue>
-                )}
-              </ProceedsWrapper>
-              <ListingButton
-                onClick={handleV2Click}
-                buttonText={anyListingsMissingPrice && !isMobile ? t`Set prices to continue` : t`Start listing`}
-                showWarningOverride={true}
-              />
-            </ProceedsAndButtonWrapper>
-          </FloatingConfirmationBar>
-          <Overlay />
-        </>
-      )}
-      {!isNftListV2 && (
-        <MobileListButtonWrapper>
-          <ListingButton onClick={toggleBag} buttonText="Continue listing" />
-        </MobileListButtonWrapper>
-      )}
-      {isNftListV2 && showListModal && (
-        <>
-          <ListModal overlayClick={toggleShowListModal} />
-        </>
-      )}
+
+      <FloatingConfirmationBar issues={!!issues}>
+        {BannerText}
+        <ProceedsAndButtonWrapper>
+          <ProceedsWrapper>
+            <EthValueWrapper totalEthListingValue={!!totalEthListingValue}>
+              {totalEthListingValue > 0 ? formatEth(totalEthListingValue) : '-'} ETH
+            </EthValueWrapper>
+            {!!usdcValue && <UsdValue>{usdcAmount}</UsdValue>}
+          </ProceedsWrapper>
+          <ListingButton onClick={showModalAndStartListing} />
+        </ProceedsAndButtonWrapper>
+      </FloatingConfirmationBar>
+      <Overlay />
+
+      {showListModal && <ListModal overlayClick={toggleShowListModal} />}
     </Column>
   )
 }

src/nft/components/profile/list/ListingButton.tsx

@@ -0,0 +1,126 @@
+import { Plural, t, Trans } from '@lingui/macro'
+import { BaseButton } from 'components/Button'
+import ms from 'ms.macro'
+import { BelowFloorWarningModal } from 'nft/components/profile/list/Modal/BelowFloorWarningModal'
+import { useIsMobile, useSellAsset } from 'nft/hooks'
+import { Listing, WalletAsset } from 'nft/types'
+import { useMemo, useState } from 'react'
+import styled from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
+import shallow from 'zustand/shallow'
+
+const BELOW_FLOOR_PRICE_THRESHOLD = 0.8
+
+const StyledListingButton = styled(BaseButton)<{ showResolveIssues: boolean; missingPrices: boolean }>`
+  background: ${({ showResolveIssues, theme }) => (showResolveIssues ? theme.accentFailure : theme.accentAction)};
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  padding: 16px;
+  border-radius: 12px;
+  width: min-content;
+  border: none;
+  cursor: ${({ missingPrices }) => (missingPrices ? 'auto' : 'pointer')};
+  opacity: ${({ showResolveIssues, missingPrices }) => !showResolveIssues && missingPrices && '0.3'};
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    font-size: 16px;
+    line-height: 20px;
+    padding: 10px 12px;
+  }
+`
+
+export const ListingButton = ({ onClick }: { onClick: () => void }) => {
+  const { sellAssets, showResolveIssues, toggleShowResolveIssues, issues, setIssues } = useSellAsset(
+    ({ sellAssets, showResolveIssues, toggleShowResolveIssues, issues, setIssues }) => ({
+      sellAssets,
+      showResolveIssues,
+      toggleShowResolveIssues,
+      issues,
+      setIssues,
+    }),
+    shallow
+  )
+  const [showWarning, setShowWarning] = useState(false)
+  const isMobile = useIsMobile()
+
+  // Find issues with item listing data
+  const [listingsMissingPrice, listingsBelowFloor] = useMemo(() => {
+    const missingExpiration = sellAssets.some((asset) => {
+      return (
+        asset.expirationTime != null &&
+        (isNaN(asset.expirationTime) || asset.expirationTime * 1000 - Date.now() < ms`60 seconds`)
+      )
+    })
+    const overMaxExpiration = sellAssets.some((asset) => {
+      return asset.expirationTime != null && asset.expirationTime * 1000 - Date.now() > ms`180 days`
+    })
+
+    const listingsMissingPrice: [WalletAsset, Listing][] = []
+    const listingsBelowFloor: [WalletAsset, Listing][] = []
+    const listingsAboveSellOrderFloor: [WalletAsset, Listing][] = []
+    const invalidPrices: [WalletAsset, Listing][] = []
+    for (const asset of sellAssets) {
+      if (asset.newListings) {
+        for (const listing of asset.newListings) {
+          if (!listing.price) listingsMissingPrice.push([asset, listing])
+          else if (isNaN(listing.price) || listing.price < 0) invalidPrices.push([asset, listing])
+          else if (
+            listing.price < (asset?.floorPrice ?? 0) * BELOW_FLOOR_PRICE_THRESHOLD &&
+            !listing.overrideFloorPrice
+          )
+            listingsBelowFloor.push([asset, listing])
+          else if (asset.floor_sell_order_price && listing.price >= asset.floor_sell_order_price)
+            listingsAboveSellOrderFloor.push([asset, listing])
+        }
+      }
+    }
+
+    // set number of issues
+    const foundIssues =
+      Number(missingExpiration) +
+      Number(overMaxExpiration) +
+      listingsMissingPrice.length +
+      listingsAboveSellOrderFloor.length
+    setIssues(foundIssues)
+    !foundIssues && showResolveIssues && toggleShowResolveIssues()
+    // Only show Resolve Issue text if there was a user submitted error (ie not when page loads with no prices set)
+    if ((missingExpiration || overMaxExpiration || listingsAboveSellOrderFloor.length) && !showResolveIssues)
+      toggleShowResolveIssues()
+
+    return [listingsMissingPrice, listingsBelowFloor]
+  }, [sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
+
+  const warningWrappedClick = () => {
+    if (issues) !showResolveIssues && toggleShowResolveIssues()
+    else if (listingsBelowFloor.length) setShowWarning(true)
+    else onClick()
+  }
+
+  return (
+    <>
+      <StyledListingButton
+        onClick={warningWrappedClick}
+        missingPrices={!!listingsMissingPrice.length}
+        showResolveIssues={showResolveIssues}
+      >
+        {showResolveIssues ? (
+          <Plural value={issues !== 1 ? 2 : 1} _1="Resolve issue" other={t`Resolve ${issues} issues`} />
+        ) : listingsMissingPrice.length && !isMobile ? (
+          <Trans>Set prices to continue</Trans>
+        ) : (
+          <Trans>Start listing</Trans>
+        )}
+      </StyledListingButton>
+
+      {showWarning && (
+        <BelowFloorWarningModal
+          listingsBelowFloor={listingsBelowFloor}
+          closeModal={() => setShowWarning(false)}
+          startListing={onClick}
+        />
+      )}
+    </>
+  )
+}

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -4,19 +4,18 @@ import Column from 'components/Column'
 import Row from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { RowsCollpsedIcon, RowsExpandedIcon } from 'nft/components/icons'
+import { getRoyalty, useHandleGlobalPriceToggle, useSyncPriceWithGlobalMethod } from 'nft/components/profile/list/utils'
 import { useSellAsset } from 'nft/hooks'
-import { ListingMarket, ListingWarning, WalletAsset } from 'nft/types'
-import { LOOKS_RARE_CREATOR_BASIS_POINTS } from 'nft/utils'
+import { ListingMarket, WalletAsset } from 'nft/types'
 import { formatEth, formatUsdPrice } from 'nft/utils/currency'
 import { fetchPrice } from 'nft/utils/fetchPrice'
-import { Dispatch, DispatchWithoutAction, useEffect, useMemo, useReducer, useState } from 'react'
+import { Dispatch, DispatchWithoutAction, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 
-import { SetPriceMethod } from './NFTListingsGrid'
 import { PriceTextInput } from './PriceTextInput'
 import { RoyaltyTooltip } from './RoyaltyTooltip'
-import { RemoveIconWrap } from './shared'
+import { RemoveIconWrap, SetPriceMethod } from './shared'
 
 const LastPriceInfo = styled(Column)`
   text-align: left;
@@ -104,13 +103,6 @@ const ReturnColumn = styled(Column)`
   }
 `
 
-const getRoyalty = (listingMarket: ListingMarket, asset: WalletAsset) => {
-  // LooksRare is a unique case where royalties for creators are a flat 0.5% or 50 basis points
-  const baseFee = listingMarket.name === 'LooksRare' ? LOOKS_RARE_CREATOR_BASIS_POINTS : asset.basisPoints ?? 0
-
-  return baseFee * 0.01
-}
-
 interface MarketplaceRowProps {
   globalPriceMethod?: SetPriceMethod
   globalPrice?: number
@@ -118,7 +110,6 @@ interface MarketplaceRowProps {
   selectedMarkets: ListingMarket[]
   removeMarket?: () => void
   asset: WalletAsset
-  showMarketplaceLogo: boolean
   expandMarketplaceRows?: boolean
   rowHovered?: boolean
   toggleExpandMarketplaceRows: DispatchWithoutAction
@@ -131,7 +122,6 @@ export const MarketplaceRow = ({
   selectedMarkets,
   removeMarket = undefined,
   asset,
-  showMarketplaceLogo,
   expandMarketplaceRows,
   toggleExpandMarketplaceRows,
   rowHovered,
@@ -147,9 +137,16 @@ export const MarketplaceRow = ({
       )?.price
   )
   const [globalOverride, setGlobalOverride] = useState(false)
-  const showGlobalPrice = globalPriceMethod === SetPriceMethod.SAME_PRICE && !globalOverride && globalPrice
 
+  const showGlobalPrice = globalPriceMethod === SetPriceMethod.SAME_PRICE && !globalOverride
   const price = showGlobalPrice ? globalPrice : listPrice
+  const setPrice = useCallback(
+    (price?: number) => {
+      showGlobalPrice ? setGlobalPrice(price) : setListPrice(price)
+      for (const marketplace of selectedMarkets) setAssetListPrice(asset, price, marketplace)
+    },
+    [asset, selectedMarkets, setAssetListPrice, setGlobalPrice, showGlobalPrice]
+  )
 
   const fees = useMemo(() => {
     if (selectedMarkets.length === 1) {
@@ -168,68 +165,25 @@ export const MarketplaceRow = ({
   const feeInEth = price && (price * fees) / 100
   const userReceives = price && feeInEth && price - feeInEth
 
-  useMemo(() => {
-    for (const market of selectedMarkets) {
-      if (market && asset && asset.basisPoints) {
-        market.royalty = (market.name === 'LooksRare' ? LOOKS_RARE_CREATOR_BASIS_POINTS : asset.basisPoints) * 0.01
-      }
-    }
-  }, [asset, selectedMarkets])
+  useHandleGlobalPriceToggle(globalOverride, setListPrice, setPrice, listPrice, globalPrice)
+  useSyncPriceWithGlobalMethod(
+    asset,
+    setListPrice,
+    setGlobalPrice,
+    setGlobalOverride,
+    listPrice,
+    globalPrice,
+    globalPriceMethod
+  )
 
+  // When in Same Price Mode and not overriding, update local price when global price changes
   useEffect(() => {
-    if (globalPriceMethod === SetPriceMethod.FLOOR_PRICE) {
-      setListPrice(asset?.floorPrice)
-      setGlobalPrice(asset.floorPrice)
-    } else if (globalPriceMethod === SetPriceMethod.LAST_PRICE) {
-      setListPrice(asset.lastPrice)
-      setGlobalPrice(asset.lastPrice)
-    } else if (globalPriceMethod === SetPriceMethod.SAME_PRICE)
-      listPrice && !globalPrice ? setGlobalPrice(listPrice) : setListPrice(globalPrice)
-
-    setGlobalOverride(false)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [globalPriceMethod])
-
-  useEffect(() => {
-    if (selectedMarkets.length)
-      for (const marketplace of selectedMarkets) setAssetListPrice(asset, listPrice, marketplace)
-    else setAssetListPrice(asset, listPrice)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [listPrice])
-
-  useEffect(() => {
-    let price: number | undefined = undefined
-    if (globalOverride) {
-      if (!listPrice) setListPrice(globalPrice)
-      price = listPrice ? listPrice : globalPrice
-    } else {
-      price = listPrice
-    }
-    if (selectedMarkets.length) for (const marketplace of selectedMarkets) setAssetListPrice(asset, price, marketplace)
-    else setAssetListPrice(asset, price)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [globalOverride])
-
-  useEffect(() => {
-    if (globalPriceMethod === SetPriceMethod.SAME_PRICE && !globalOverride) {
-      if (selectedMarkets.length)
-        for (const marketplace of selectedMarkets) setAssetListPrice(asset, globalPrice, marketplace)
-      else setAssetListPrice(asset, globalPrice)
+    if (showGlobalPrice) {
+      setPrice(globalPrice)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [globalPrice])
 
-  let warning: ListingWarning | undefined = undefined
-  if (asset.listingWarnings && asset.listingWarnings?.length > 0) {
-    if (showMarketplaceLogo) {
-      for (const listingWarning of asset.listingWarnings) {
-        if (listingWarning.marketplace.name === selectedMarkets[0].name) warning = listingWarning
-      }
-    } else {
-      warning = asset.listingWarnings[0]
-    }
-  }
-
   return (
     <Row onMouseEnter={toggleMarketRowHovered} onMouseLeave={toggleMarketRowHovered}>
       <FloorPriceInfo>
@@ -263,27 +217,14 @@ export const MarketplaceRow = ({
             ))}
           </MarketIconsWrapper>
         )}
-        {globalPriceMethod === SetPriceMethod.SAME_PRICE && !globalOverride ? (
-          <PriceTextInput
-            listPrice={globalPrice}
-            setListPrice={setGlobalPrice}
-            isGlobalPrice={true}
-            setGlobalOverride={setGlobalOverride}
-            globalOverride={globalOverride}
-            warning={warning}
-            asset={asset}
-          />
-        ) : (
-          <PriceTextInput
-            listPrice={listPrice}
-            setListPrice={setListPrice}
-            isGlobalPrice={false}
-            setGlobalOverride={setGlobalOverride}
-            globalOverride={globalOverride}
-            warning={warning}
-            asset={asset}
-          />
-        )}
+        <PriceTextInput
+          listPrice={price}
+          setListPrice={setPrice}
+          isGlobalPrice={showGlobalPrice}
+          setGlobalOverride={setGlobalOverride}
+          globalOverride={globalOverride}
+          asset={asset}
+        />
         {rowHovered && ((expandMarketplaceRows && marketRowHovered) || selectedMarkets.length > 1) && (
           <ExpandMarketIconWrapper onClick={toggleExpandMarketplaceRows}>
             {expandMarketplaceRows ? <RowsExpandedIcon /> : <RowsCollpsedIcon />}

src/nft/components/profile/list/Modal/ListModal.tsx

@@ -1,14 +1,17 @@
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, useTrace } from '@uniswap/analytics'
 import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
+import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
 import { useWeb3React } from '@web3-react/core'
-import { getTotalEthValue, signListingRow } from 'nft/components/bag/profile/utils'
+import { useStablecoinValue } from 'hooks/useStablecoinPrice'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { Portal } from 'nft/components/common/Portal'
 import { Overlay } from 'nft/components/modals/Overlay'
+import { getTotalEthValue, signListingRow } from 'nft/components/profile/list/utils'
 import { useNFTList, useSellAsset } from 'nft/hooks'
 import { ListingStatus } from 'nft/types'
-import { fetchPrice } from 'nft/utils'
-import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
+import { useCallback, useEffect, useMemo, useReducer } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
@@ -46,64 +49,60 @@ export const ListModal = ({ overlayClick }: { overlayClick: () => void }) => {
   const signer = provider?.getSigner()
   const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
   const sellAssets = useSellAsset((state) => state.sellAssets)
-  const {
-    listingStatus,
-    setListingStatusAndCallback,
-    setLooksRareNonce,
-    getLooksRareNonce,
-    collectionsRequiringApproval,
-    listings,
-  } = useNFTList(
-    ({
-      listingStatus,
-      setListingStatusAndCallback,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }) => ({
-      listingStatus,
-      setListingStatusAndCallback,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }),
-    shallow
-  )
+  const { setListingStatusAndCallback, setLooksRareNonce, getLooksRareNonce, collectionsRequiringApproval, listings } =
+    useNFTList(
+      ({
+        setListingStatusAndCallback,
+        setLooksRareNonce,
+        getLooksRareNonce,
+        collectionsRequiringApproval,
+        listings,
+      }) => ({
+        setListingStatusAndCallback,
+        setLooksRareNonce,
+        getLooksRareNonce,
+        collectionsRequiringApproval,
+        listings,
+      }),
+      shallow
+    )
 
   const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
   const [openSection, toggleOpenSection] = useReducer(
     (s) => (s === Section.APPROVE ? Section.SIGN : Section.APPROVE),
     Section.APPROVE
   )
-  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
-
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPriceInUSD(price || 0)
-    })
-  }, [])
+  const nativeCurrency = useNativeCurrency()
+  const parsedAmount = tryParseCurrencyAmount(totalEthListingValue.toString(), nativeCurrency)
+  const usdcValue = useStablecoinValue(parsedAmount)
+  const usdcAmount = formatCurrencyAmount(usdcValue, NumberType.FiatTokenPrice)
 
   const allCollectionsApproved = useMemo(
     () => collectionsRequiringApproval.every((collection) => collection.status === ListingStatus.APPROVED),
     [collectionsRequiringApproval]
   )
 
+  const allListingsApproved = useMemo(
+    () => listings.every((listing) => listing.status === ListingStatus.APPROVED),
+    [listings]
+  )
+
   const signListings = async () => {
     if (!signer || !provider) return
     // sign listings
     for (const listing of listings) {
       await signListingRow(listing, signer, provider, getLooksRareNonce, setLooksRareNonce, setListingStatusAndCallback)
     }
+
     sendAnalyticsEvent(NFTEventName.NFT_LISTING_COMPLETED, {
       signatures_approved: listings.filter((asset) => asset.status === ListingStatus.APPROVED),
       list_quantity: listings.length,
-      usd_value: ethPriceInUSD * totalEthListingValue,
+      usd_value: usdcAmount,
       ...trace,
     })
   }
 
+  // Once all collections have been approved, go to next section and start signing listings
   useEffect(() => {
     if (allCollectionsApproved) {
       signListings()
@@ -113,8 +112,8 @@ export const ListModal = ({ overlayClick }: { overlayClick: () => void }) => {
   }, [allCollectionsApproved])
 
   const closeModalOnClick = useCallback(() => {
-    listingStatus === ListingStatus.APPROVED ? window.location.reload() : overlayClick()
-  }, [listingStatus, overlayClick])
+    allListingsApproved ? window.location.reload() : overlayClick()
+  }, [allListingsApproved, overlayClick])
 
   // In the case that a user removes all listings via retry logic, close modal
   useEffect(() => {
@@ -125,7 +124,7 @@ export const ListModal = ({ overlayClick }: { overlayClick: () => void }) => {
     <Portal>
       <Trace modal={InterfaceModalName.NFT_LISTING}>
         <ListModalWrapper>
-          {listingStatus === ListingStatus.APPROVED ? (
+          {allListingsApproved ? (
             <SuccessScreen overlayClick={closeModalOnClick} />
           ) : (
             <>

src/nft/components/profile/list/Modal/SuccessScreen.tsx

@@ -6,7 +6,7 @@ import Row from 'components/Row'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
-import { getTotalEthValue } from 'nft/components/bag/profile/utils'
+import { getTotalEthValue } from 'nft/components/profile/list/utils'
 import { useSellAsset } from 'nft/hooks'
 import { formatEth, generateTweetForList, pluralize } from 'nft/utils'
 import { useMemo } from 'react'

src/nft/components/profile/list/NFTListRow.tsx

@@ -10,7 +10,7 @@ import { BREAKPOINTS, ThemedText } from 'theme'
 import { opacify } from 'theme/utils'
 
 import { MarketplaceRow } from './MarketplaceRow'
-import { SetPriceMethod } from './NFTListingsGrid'
+import { SetPriceMethod } from './shared'
 
 const IMAGE_THUMBNAIL_SIZE = 60
 
@@ -123,10 +123,10 @@ export const NFTListRow = ({
   const [hovered, toggleHovered] = useReducer((s) => !s, false)
   const theme = useTheme()
 
+  // Keep localMarkets up to date with changes to globalMarkets
   useEffect(() => {
     setLocalMarkets(JSON.parse(JSON.stringify(selectedMarkets)))
-    selectedMarkets.length < 2 && expandMarketplaceRows && toggleExpandMarketplaceRows()
-  }, [expandMarketplaceRows, selectedMarkets])
+  }, [selectedMarkets])
 
   return (
     <NFTListRowWrapper
@@ -161,17 +161,16 @@ export const NFTListRow = ({
         </TokenInfoWrapper>
       </NFTInfoWrapper>
       <MarketPlaceRowWrapper>
-        {expandMarketplaceRows ? (
-          localMarkets.map((market, index) => {
+        {expandMarketplaceRows && localMarkets.length > 1 ? (
+          localMarkets.map((market) => {
             return (
               <MarketplaceRow
                 globalPriceMethod={globalPriceMethod}
                 globalPrice={globalPrice}
                 setGlobalPrice={setGlobalPrice}
                 selectedMarkets={[market]}
-                removeMarket={() => localMarkets.splice(index, 1)}
+                removeMarket={() => setLocalMarkets(localMarkets.filter((oldMarket) => oldMarket.name !== market.name))}
                 asset={asset}
-                showMarketplaceLogo={true}
                 key={asset.name + market.name}
                 expandMarketplaceRows={expandMarketplaceRows}
                 rowHovered={hovered}
@@ -186,7 +185,6 @@ export const NFTListRow = ({
             setGlobalPrice={setGlobalPrice}
             selectedMarkets={localMarkets}
             asset={asset}
-            showMarketplaceLogo={false}
             rowHovered={hovered}
             toggleExpandMarketplaceRows={toggleExpandMarketplaceRows}
           />

src/nft/components/profile/list/NFTListingsGrid.tsx

@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-// eslint-disable-next-line no-restricted-imports
 import Column from 'components/Column'
 import Row from 'components/Row'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -12,6 +11,7 @@ import { BREAKPOINTS } from 'theme'
 
 import { Dropdown } from './Dropdown'
 import { NFTListRow } from './NFTListRow'
+import { SetPriceMethod } from './shared'
 
 const TableHeader = styled.div`
   display: flex;
@@ -143,13 +143,6 @@ const RowDivider = styled.hr`
   border-color: ${({ theme }) => theme.backgroundInteractive};
 `
 
-export enum SetPriceMethod {
-  SAME_PRICE,
-  FLOOR_PRICE,
-  LAST_PRICE,
-  CUSTOM,
-}
-
 export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingMarket[] }) => {
   const sellAssets = useSellAsset((state) => state.sellAssets)
   const [globalPriceMethod, setGlobalPriceMethod] = useState(SetPriceMethod.CUSTOM)

src/nft/components/profile/list/PriceTextInput.tsx

@@ -3,16 +3,19 @@ import Column from 'components/Column'
 import Row from 'components/Row'
 import { BrokenLinkIcon } from 'nft/components/icons'
 import { NumericInput } from 'nft/components/layout/Input'
+import { useUpdateInputAndWarnings } from 'nft/components/profile/list/utils'
 import { body } from 'nft/css/common.css'
 import { useSellAsset } from 'nft/hooks'
-import { ListingWarning, WalletAsset } from 'nft/types'
+import { WalletAsset } from 'nft/types'
 import { formatEth } from 'nft/utils/currency'
-import { Dispatch, FormEvent, useEffect, useRef, useState } from 'react'
+import { Dispatch, useRef, useState } from 'react'
 import { AlertTriangle, Link } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
 import { colors } from 'theme/colors'
 
+import { WarningType } from './shared'
+
 const PriceTextInputWrapper = styled(Column)`
   gap: 12px;
   position: relative;
@@ -71,12 +74,6 @@ const WarningAction = styled.div`
   color: ${({ theme }) => theme.accentAction};
 `
 
-enum WarningType {
-  BELOW_FLOOR,
-  ALREADY_LISTED,
-  NONE,
-}
-
 const getWarningMessage = (warning: WarningType) => {
   let message = <></>
   switch (warning) {
@@ -96,7 +93,6 @@ interface PriceTextInputProps {
   isGlobalPrice: boolean
   setGlobalOverride: Dispatch<boolean>
   globalOverride: boolean
-  warning?: ListingWarning
   asset: WalletAsset
 }
 
@@ -106,42 +102,35 @@ export const PriceTextInput = ({
   isGlobalPrice,
   setGlobalOverride,
   globalOverride,
-  warning,
   asset,
 }: PriceTextInputProps) => {
   const [warningType, setWarningType] = useState(WarningType.NONE)
-  const removeMarketplaceWarning = useSellAsset((state) => state.removeMarketplaceWarning)
   const removeSellAsset = useSellAsset((state) => state.removeSellAsset)
   const showResolveIssues = useSellAsset((state) => state.showResolveIssues)
   const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>
   const theme = useTheme()
 
-  useEffect(() => {
-    inputRef.current.value = listPrice !== undefined ? `${listPrice}` : ''
-    setWarningType(WarningType.NONE)
-    if (!warning && listPrice) {
-      if (listPrice < (asset?.floorPrice ?? 0)) setWarningType(WarningType.BELOW_FLOOR)
-      else if (asset.floor_sell_order_price && listPrice >= asset.floor_sell_order_price)
-        setWarningType(WarningType.ALREADY_LISTED)
-    } else if (warning && listPrice && listPrice >= 0) removeMarketplaceWarning(asset, warning)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [listPrice])
-
   const percentBelowFloor = (1 - (listPrice ?? 0) / (asset.floorPrice ?? 0)) * 100
-
   const warningColor =
-    showResolveIssues && !listPrice
+    (showResolveIssues && !listPrice) ||
+    warningType === WarningType.ALREADY_LISTED ||
+    (warningType === WarningType.BELOW_FLOOR && percentBelowFloor >= 20)
       ? colors.red400
-      : warningType !== WarningType.NONE
-      ? (warningType === WarningType.BELOW_FLOOR && percentBelowFloor >= 20) ||
-        warningType === WarningType.ALREADY_LISTED
-        ? colors.red400
-        : theme.accentWarning
-      : isGlobalPrice
+      : warningType === WarningType.BELOW_FLOOR
+      ? theme.accentWarning
+      : isGlobalPrice || !!listPrice
       ? theme.accentAction
-      : listPrice != null
-      ? theme.textSecondary
-      : theme.accentAction
+      : theme.textSecondary
+
+  const setPrice = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!listPrice && event.target.value.includes('.') && parseFloat(event.target.value) === 0) {
+      return
+    }
+    const val = parseFloat(event.target.value)
+    setListPrice(isNaN(val) ? undefined : val)
+  }
+
+  useUpdateInputAndWarnings(setWarningType, inputRef, asset, listPrice)
 
   return (
     <PriceTextInputWrapper>
@@ -156,13 +145,7 @@ export const PriceTextInput = ({
           backgroundColor="none"
           width={{ sm: '54', md: '68' }}
           ref={inputRef}
-          onChange={(v: FormEvent<HTMLInputElement>) => {
-            if (!listPrice && v.currentTarget.value.includes('.') && parseFloat(v.currentTarget.value) === 0) {
-              return
-            }
-            const val = parseFloat(v.currentTarget.value)
-            setListPrice(isNaN(val) ? undefined : val)
-          }}
+          onChange={setPrice}
         />
         <CurrencyWrapper listPrice={listPrice}>&nbsp;ETH</CurrencyWrapper>
         {(isGlobalPrice || globalOverride) && (
@@ -172,27 +155,25 @@ export const PriceTextInput = ({
         )}
       </InputWrapper>
       <WarningMessage $color={warningColor}>
-        {warning
-          ? warning.message
-          : warningType !== WarningType.NONE && (
-              <WarningRow>
-                <AlertTriangle height={16} width={16} color={warningColor} />
-                <span>
-                  {warningType === WarningType.BELOW_FLOOR && `${percentBelowFloor.toFixed(0)}% `}
-                  {getWarningMessage(warningType)}
-                  &nbsp;
-                  {warningType === WarningType.ALREADY_LISTED && `${formatEth(asset?.floor_sell_order_price ?? 0)} ETH`}
-                </span>
-                <WarningAction
-                  onClick={() => {
-                    warningType === WarningType.ALREADY_LISTED && removeSellAsset(asset)
-                    setWarningType(WarningType.NONE)
-                  }}
-                >
-                  {warningType === WarningType.BELOW_FLOOR ? <Trans>Dismiss</Trans> : <Trans>Remove item</Trans>}
-                </WarningAction>
-              </WarningRow>
-            )}
+        {warningType !== WarningType.NONE && (
+          <WarningRow>
+            <AlertTriangle height={16} width={16} color={warningColor} />
+            <span>
+              {warningType === WarningType.BELOW_FLOOR && `${percentBelowFloor.toFixed(0)}% `}
+              {getWarningMessage(warningType)}
+              &nbsp;
+              {warningType === WarningType.ALREADY_LISTED && `${formatEth(asset?.floor_sell_order_price ?? 0)} ETH`}
+            </span>
+            <WarningAction
+              onClick={() => {
+                warningType === WarningType.ALREADY_LISTED && removeSellAsset(asset)
+                setWarningType(WarningType.NONE)
+              }}
+            >
+              {warningType === WarningType.BELOW_FLOOR ? <Trans>Dismiss</Trans> : <Trans>Remove item</Trans>}
+            </WarningAction>
+          </WarningRow>
+        )}
       </WarningMessage>
     </PriceTextInputWrapper>
   )

src/nft/components/profile/list/RoyaltyTooltip.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import Column from 'components/Column'
 import Row from 'components/Row'
+import { getRoyalty } from 'nft/components/profile/list/utils'
 import { ListingMarket, WalletAsset } from 'nft/types'
 import { formatEth } from 'nft/utils'
 import styled from 'styled-components/macro'
@@ -50,7 +51,7 @@ export const RoyaltyTooltip = ({
   asset: WalletAsset
   fees?: number
 }) => {
-  const maxRoyalty = Math.max(...selectedMarkets.map((market) => market.royalty ?? 0))
+  const maxRoyalty = Math.max(...selectedMarkets.map((market) => getRoyalty(market, asset) ?? 0)).toFixed(2)
   return (
     <RoyaltyContainer>
       {selectedMarkets.map((market) => (

src/nft/components/profile/list/shared.tsx

@@ -14,3 +14,16 @@ export const TitleRow = styled(Row)`
   justify-content: space-between;
   margin-bottom: 8px;
 `
+
+export enum SetPriceMethod {
+  SAME_PRICE,
+  FLOOR_PRICE,
+  LAST_PRICE,
+  CUSTOM,
+}
+
+export enum WarningType {
+  BELOW_FLOOR,
+  ALREADY_LISTED,
+  NONE,
+}

src/nft/components/profile/list/utils.ts

@@ -0,0 +1,196 @@
+import type { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
+import { addressesByNetwork, SupportedChainId } from '@looksrare/sdk'
+import { SetPriceMethod, WarningType } from 'nft/components/profile/list/shared'
+import { useNFTList, useSellAsset } from 'nft/hooks'
+import { LOOKSRARE_MARKETPLACE_CONTRACT, X2Y2_TRANSFER_CONTRACT } from 'nft/queries'
+import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea'
+import { CollectionRow, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
+import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
+import { Dispatch, useEffect } from 'react'
+import shallow from 'zustand/shallow'
+
+export async function approveCollectionRow(
+  collectionRow: CollectionRow,
+  signer: JsonRpcSigner,
+  setCollectionStatusAndCallback: (
+    collection: CollectionRow,
+    status: ListingStatus,
+    callback?: () => Promise<void>
+  ) => void
+) {
+  const callback = () => approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback)
+  setCollectionStatusAndCallback(collectionRow, ListingStatus.SIGNING, callback)
+  const { marketplace, collectionAddress } = collectionRow
+  const addresses = addressesByNetwork[SupportedChainId.MAINNET]
+  const spender =
+    marketplace.name === 'OpenSea'
+      ? OPENSEA_CROSS_CHAIN_CONDUIT
+      : marketplace.name === 'Rarible'
+      ? LOOKSRARE_MARKETPLACE_CONTRACT
+      : marketplace.name === 'X2Y2'
+      ? X2Y2_TRANSFER_CONTRACT
+      : addresses.TRANSFER_MANAGER_ERC721
+  !!collectionAddress &&
+    (await approveCollection(spender, collectionAddress, signer, (newStatus: ListingStatus) =>
+      setCollectionStatusAndCallback(collectionRow, newStatus, callback)
+    ))
+}
+
+export async function signListingRow(
+  listing: ListingRow,
+  signer: JsonRpcSigner,
+  provider: Web3Provider,
+  getLooksRareNonce: () => number,
+  setLooksRareNonce: (nonce: number) => void,
+  setListingStatusAndCallback: (listing: ListingRow, status: ListingStatus, callback?: () => Promise<void>) => void
+) {
+  const looksRareNonce = getLooksRareNonce()
+  const callback = () => {
+    return signListingRow(listing, signer, provider, getLooksRareNonce, setLooksRareNonce, setListingStatusAndCallback)
+  }
+  setListingStatusAndCallback(listing, ListingStatus.SIGNING, callback)
+  const { asset, marketplace } = listing
+  const res = await signListing(marketplace, asset, signer, provider, looksRareNonce, (newStatus: ListingStatus) =>
+    setListingStatusAndCallback(listing, newStatus, callback)
+  )
+  res && listing.marketplace.name === 'LooksRare' && setLooksRareNonce(looksRareNonce + 1)
+}
+
+export const getTotalEthValue = (sellAssets: WalletAsset[]) => {
+  const total = sellAssets.reduce((total, asset: WalletAsset) => {
+    if (asset.newListings?.length) {
+      const maxListing = asset.newListings.reduce((a, b) => ((a.price ?? 0) > (b.price ?? 0) ? a : b))
+      // LooksRare is a unique case where creator royalties are a flat 0.5% or 50 basis points
+      const maxFee =
+        maxListing.marketplace.fee +
+        (maxListing.marketplace.name === 'LooksRare' ? LOOKS_RARE_CREATOR_BASIS_POINTS : asset?.basisPoints ?? 0) / 100
+      return total + (maxListing.price ?? 0) - (maxListing.price ?? 0) * (maxFee / 100)
+    }
+    return total
+  }, 0)
+  return total ? Math.round(total * 10000 + Number.EPSILON) / 10000 : 0
+}
+
+const getListings = (sellAssets: WalletAsset[]): [CollectionRow[], ListingRow[]] => {
+  const newCollectionsToApprove: CollectionRow[] = []
+
+  const newListings: ListingRow[] = []
+  sellAssets.forEach((asset) => {
+    asset.marketplaces?.forEach((marketplace: ListingMarket) => {
+      const newListing = {
+        images: [asset.smallImageUrl, marketplace.icon],
+        name: asset.name || `#${asset.tokenId}`,
+        status: ListingStatus.DEFINED,
+        asset,
+        marketplace,
+        price: asset.newListings?.find((listing) => listing.marketplace.name === marketplace.name)?.price,
+      }
+      newListings.push(newListing)
+      if (
+        !newCollectionsToApprove.some(
+          (collectionRow: CollectionRow) =>
+            collectionRow.collectionAddress === asset.asset_contract.address &&
+            collectionRow.marketplace.name === marketplace.name
+        )
+      ) {
+        const newCollectionRow = {
+          images: [asset.asset_contract.image_url, marketplace.icon],
+          name: asset.asset_contract.name,
+          status: ListingStatus.DEFINED,
+          collectionAddress: asset.asset_contract.address,
+          isVerified: asset.collectionIsVerified,
+          marketplace,
+        }
+        newCollectionsToApprove.push(newCollectionRow)
+      }
+    })
+  })
+  return [newCollectionsToApprove, newListings]
+}
+
+export const verifyStatus = (status: ListingStatus) => {
+  return status !== ListingStatus.PAUSED && status !== ListingStatus.APPROVED
+}
+
+export function useSubscribeListingState() {
+  const sellAssets = useSellAsset((state) => state.sellAssets)
+  const { setListings, setCollectionsRequiringApproval } = useNFTList(
+    ({ setListings, setCollectionsRequiringApproval }) => ({
+      setListings,
+      setCollectionsRequiringApproval,
+    }),
+    shallow
+  )
+  useEffect(() => {
+    const [newCollectionsToApprove, newListings] = getListings(sellAssets)
+    setListings(newListings)
+    setCollectionsRequiringApproval(newCollectionsToApprove)
+  }, [sellAssets, setCollectionsRequiringApproval, setListings])
+}
+
+export function useHandleGlobalPriceToggle(
+  globalOverride: boolean,
+  setListPrice: Dispatch<number | undefined>,
+  setPrice: (price?: number) => void,
+  listPrice?: number,
+  globalPrice?: number
+) {
+  useEffect(() => {
+    let price: number | undefined
+    if (globalOverride) {
+      if (!listPrice) setListPrice(globalPrice)
+      price = globalPrice
+    } else {
+      price = listPrice
+    }
+    setPrice(price)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globalOverride])
+}
+
+export function useSyncPriceWithGlobalMethod(
+  asset: WalletAsset,
+  setListPrice: Dispatch<number | undefined>,
+  setGlobalPrice: Dispatch<number | undefined>,
+  setGlobalOverride: Dispatch<boolean>,
+  listPrice?: number,
+  globalPrice?: number,
+  globalPriceMethod?: SetPriceMethod
+) {
+  useEffect(() => {
+    if (globalPriceMethod === SetPriceMethod.FLOOR_PRICE) {
+      setListPrice(asset?.floorPrice)
+      setGlobalPrice(asset.floorPrice)
+    } else if (globalPriceMethod === SetPriceMethod.LAST_PRICE) {
+      setListPrice(asset.lastPrice)
+      setGlobalPrice(asset.lastPrice)
+    } else if (globalPriceMethod === SetPriceMethod.SAME_PRICE)
+      listPrice && !globalPrice ? setGlobalPrice(listPrice) : setListPrice(globalPrice)
+
+    setGlobalOverride(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [globalPriceMethod])
+}
+
+export function useUpdateInputAndWarnings(
+  setWarningType: Dispatch<WarningType>,
+  inputRef: React.MutableRefObject<HTMLInputElement>,
+  asset: WalletAsset,
+  listPrice?: number
+) {
+  useEffect(() => {
+    setWarningType(WarningType.NONE)
+    const price = listPrice ?? 0
+    inputRef.current.value = `${price}`
+    if (price < (asset?.floorPrice ?? 0) && price > 0) setWarningType(WarningType.BELOW_FLOOR)
+    else if (asset.floor_sell_order_price && price >= asset.floor_sell_order_price)
+      setWarningType(WarningType.ALREADY_LISTED)
+  }, [asset?.floorPrice, asset.floor_sell_order_price, inputRef, listPrice, setWarningType])
+}
+
+export const getRoyalty = (listingMarket: ListingMarket, asset: WalletAsset) => {
+  // LooksRare is a unique case where royalties for creators are a flat 0.5% or 50 basis points
+  const baseFee = listingMarket.name === 'LooksRare' ? LOOKS_RARE_CREATOR_BASIS_POINTS : asset.basisPoints ?? 0
+
+  return baseFee * 0.01
+}

src/nft/css/common.css.ts

@@ -18,27 +18,10 @@ export const subheadSmall = sprinkles({ fontWeight: 'medium', fontSize: '14', li
 export const body = sprinkles({ fontWeight: 'normal', fontSize: '16', lineHeight: '24' })
 export const bodySmall = sprinkles({ fontWeight: 'normal', fontSize: '14', lineHeight: '20' })
 export const caption = sprinkles({ fontWeight: 'normal', fontSize: '12', lineHeight: '16' })
-export const badge = sprinkles({ fontWeight: 'semibold', fontSize: '10', lineHeight: '12' })
 
 export const buttonTextMedium = sprinkles({ fontWeight: 'semibold', fontSize: '16', lineHeight: '20' })
 export const buttonTextSmall = sprinkles({ fontWeight: 'semibold', fontSize: '14', lineHeight: '16' })
 
-export const commonButtonStyles = style([
-  sprinkles({
-    borderRadius: '12',
-    transition: '250',
-  }),
-  {
-    border: 'none',
-    ':hover': {
-      cursor: 'pointer',
-    },
-    ':disabled': {
-      cursor: 'auto',
-    },
-  },
-])
-
 const magicalGradient = style({
   selectors: {
     '&::before': {

src/nft/hooks/useNFTList.ts

@@ -4,12 +4,10 @@ import { devtools } from 'zustand/middleware'
 
 interface NFTListState {
   looksRareNonce: number
-  listingStatus: ListingStatus
   listings: ListingRow[]
   collectionsRequiringApproval: CollectionRow[]
   setLooksRareNonce: (nonce: number) => void
   getLooksRareNonce: () => number
-  setListingStatus: (status: ListingStatus) => void
   setListings: (listings: ListingRow[]) => void
   setCollectionsRequiringApproval: (collections: CollectionRow[]) => void
   setListingStatusAndCallback: (listing: ListingRow, status: ListingStatus, callback?: () => Promise<void>) => void
@@ -23,7 +21,6 @@ interface NFTListState {
 export const useNFTList = create<NFTListState>()(
   devtools((set, get) => ({
     looksRareNonce: 0,
-    listingStatus: ListingStatus.DEFINED,
     listings: [],
     collectionsRequiringApproval: [],
     setLooksRareNonce: (nonce) =>
@@ -33,10 +30,6 @@ export const useNFTList = create<NFTListState>()(
     getLooksRareNonce: () => {
       return get().looksRareNonce
     },
-    setListingStatus: (status) =>
-      set(() => {
-        return { listingStatus: status }
-      }),
     setListings: (listings) =>
       set(() => {
         const updatedListings = listings.map((listing) => {

src/nft/hooks/useSellAsset.ts

@@ -1,7 +1,7 @@
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-import { ListingMarket, ListingWarning, WalletAsset } from '../types'
+import { ListingMarket, WalletAsset } from '../types'
 
 interface SellAssetState {
   sellAssets: WalletAsset[]
@@ -16,10 +16,6 @@ interface SellAssetState {
   removeAssetMarketplace: (asset: WalletAsset, marketplace: ListingMarket) => void
   toggleShowResolveIssues: () => void
   setIssues: (issues: number) => void
-  // TODO: After merging v2, see if this marketplace logic can be removed
-  addMarketplaceWarning: (asset: WalletAsset, warning: ListingWarning) => void
-  removeMarketplaceWarning: (asset: WalletAsset, warning: ListingWarning, setGlobalOverride?: boolean) => void
-  removeAllMarketplaceWarnings: () => void
 }
 
 export const useSellAsset = create<SellAssetState>()(
@@ -118,47 +114,6 @@ export const useSellAsset = create<SellAssetState>()(
           return { sellAssets: assetsCopy }
         })
       },
-      addMarketplaceWarning: (asset, warning) => {
-        set(({ sellAssets }) => {
-          const assetsCopy = [...sellAssets]
-          asset.listingWarnings?.push(warning)
-          const index = sellAssets.findIndex(
-            (n) => n.tokenId === asset.tokenId && n.asset_contract.address === asset.asset_contract.address
-          )
-          assetsCopy[index] = asset
-          return { sellAssets: assetsCopy }
-        })
-      },
-      removeMarketplaceWarning: (asset, warning, setGlobalOverride?) => {
-        set(({ sellAssets }) => {
-          const assetsCopy = [...sellAssets]
-          if (asset.listingWarnings === undefined || asset.newListings === undefined) return { sellAssets: assetsCopy }
-          const warningIndex =
-            asset.listingWarnings?.findIndex((n) => n.marketplace.name === warning.marketplace.name) ?? -1
-          asset.listingWarnings?.splice(warningIndex, 1)
-          if (warning?.message?.includes('LISTING BELOW FLOOR')) {
-            if (setGlobalOverride) {
-              asset.newListings?.forEach((listing) => (listing.overrideFloorPrice = true))
-            } else {
-              const listingIndex =
-                asset.newListings?.findIndex((n) => n.marketplace.name === warning.marketplace.name) ?? -1
-              asset.newListings[listingIndex].overrideFloorPrice = true
-            }
-          }
-          const index = sellAssets.findIndex(
-            (n) => n.tokenId === asset.tokenId && n.asset_contract.address === asset.asset_contract.address
-          )
-          assetsCopy[index] = asset
-          return { sellAssets: assetsCopy }
-        })
-      },
-      removeAllMarketplaceWarnings: () => {
-        set(({ sellAssets }) => {
-          const assetsCopy = [...sellAssets]
-          assetsCopy.map((asset) => (asset.listingWarnings = []))
-          return { sellAssets: assetsCopy }
-        })
-      },
       toggleShowResolveIssues: () => {
         set(({ showResolveIssues }) => {
           return { showResolveIssues: !showResolveIssues }

src/nft/pages/collection/index.tsx

@@ -15,6 +15,7 @@ import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPage
 import { BagCloseIcon } from 'nft/components/icons'
 import { useBag, useCollectionFilters, useFiltersExpanded, useIsMobile } from 'nft/hooks'
 import * as styles from 'nft/pages/collection/index.css'
+import { blocklistedCollections } from 'nft/utils'
 import { Suspense, useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { animated, easings, useSpring } from 'react-spring'
@@ -85,7 +86,7 @@ const FiltersContainer = styled.div<{ isMobile: boolean; isFiltersExpanded: bool
   width: ${({ isMobile }) => (isMobile ? '100%' : '0px')};
   height: ${({ isMobile, isFiltersExpanded }) => (isMobile && isFiltersExpanded ? '100%' : undefined)};
   background: ${({ theme, isMobile }) => (isMobile ? theme.backgroundBackdrop : undefined)};
-  z-index: ${Z_INDEX.modalBackdrop};
+  z-index: ${Z_INDEX.modalBackdrop - 3};
   overflow-y: ${({ isMobile }) => (isMobile ? 'scroll' : undefined)};
 
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) {
@@ -188,7 +189,7 @@ const Collection = () => {
             width: CollectionContainerWidthChange.to((x) => `calc(100% - ${x as number}px)`),
           }}
         >
-          {contractAddress ? (
+          {contractAddress && !blocklistedCollections.includes(contractAddress) ? (
             <>
               <BannerWrapper>
                 <Banner

src/nft/pages/profile/profile.tsx

@@ -1,14 +1,14 @@
+import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { ButtonPrimary } from 'components/Button'
-import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
 import { XXXL_BAG_WIDTH } from 'nft/components/bag/Bag'
 import { ListPage } from 'nft/components/profile/list/ListPage'
 import { ProfilePage } from 'nft/components/profile/view/ProfilePage'
 import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
-import { useBag, useNFTList, useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
-import { ListingStatus, ProfilePageStateType } from 'nft/types'
+import { useBag, useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
+import { ProfilePageStateType } from 'nft/types'
 import { Suspense, useEffect, useRef } from 'react'
 import { useToggleWalletModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
@@ -26,17 +26,17 @@ const ProfilePageWrapper = styled.div`
   }
 `
 
-const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isOnV2ListPage: boolean }>`
+const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isListingNfts: boolean }>`
   width: calc(
     100% -
-      ${({ cartExpanded, isOnV2ListPage }) =>
-        isOnV2ListPage ? LIST_PAGE_MARGIN * 2 : cartExpanded ? XXXL_BAG_WIDTH : 0}px
+      ${({ cartExpanded, isListingNfts }) =>
+        isListingNfts ? LIST_PAGE_MARGIN * 2 : cartExpanded ? XXXL_BAG_WIDTH : 0}px
   );
-  margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN : 0)}px;
+  margin: 0px ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN : 0)}px;
 
   @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-    width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
-    margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE : 0)}px;
+    width: calc(100% - ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
+    margin: 0px ${({ isListingNfts }) => (isListingNfts ? LIST_PAGE_MARGIN_MOBILE : 0)}px;
   }
 `
 
@@ -62,15 +62,8 @@ const ConnectWalletButton = styled(ButtonPrimary)`
 const ProfileContent = () => {
   const sellPageState = useProfilePageState((state) => state.state)
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
-  const removeAllMarketplaceWarnings = useSellAsset((state) => state.removeAllMarketplaceWarnings)
   const resetSellAssets = useSellAsset((state) => state.reset)
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
-  const setListingStatus = useNFTList((state) => state.setListingStatus)
-
-  useEffect(() => {
-    removeAllMarketplaceWarnings()
-    setListingStatus(ListingStatus.DEFINED)
-  }, [removeAllMarketplaceWarnings, sellPageState, setListingStatus])
 
   const { account } = useWeb3React()
   const accountRef = useRef(account)
@@ -85,25 +78,23 @@ const ProfileContent = () => {
     }
   }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
   const cartExpanded = useBag((state) => state.bagExpanded)
-  const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const isListingNfts = sellPageState === ProfilePageStateType.LISTING
-  const isOnV2ListPage = isNftListV2 && isListingNfts
 
   return (
     <Trace page={InterfacePageName.NFT_PROFILE_PAGE} shouldLogImpression>
       <ProfilePageWrapper>
         {account ? (
-          <LoadedAccountPage cartExpanded={cartExpanded} isOnV2ListPage={isOnV2ListPage}>
+          <LoadedAccountPage cartExpanded={cartExpanded} isListingNfts={isListingNfts}>
             {!isListingNfts ? <ProfilePage /> : <ListPage />}
           </LoadedAccountPage>
         ) : (
           <Center>
             <ThemedText.HeadlineMedium lineHeight="36px" color="textSecondary" fontWeight="600" marginBottom="24px">
-              No items to display
+              <Trans>No items to display</Trans>
             </ThemedText.HeadlineMedium>
             <ConnectWalletButton onClick={toggleWalletModal}>
               <ThemedText.SubHeader color="white" lineHeight="20px">
-                Connect Wallet
+                <Trans>Connect Wallet</Trans>
               </ThemedText.SubHeader>
             </ConnectWalletButton>
           </Center>

src/nft/queries/genie/SearchCollectionsFetcher.ts

@@ -1,4 +1,5 @@
 import { isAddress } from '@ethersproject/address'
+import { blocklistedCollections } from 'nft/utils'
 
 import { GenieCollection } from '../../types'
 
@@ -45,15 +46,17 @@ export const fetchSearchCollections = async (addressOrName: string, recursive =
   if (isName) {
     const data = await r.json()
     const formattedData = data?.data
-      ? data.data.map((collection: { stats: Record<string, unknown>; floorPrice: string }) => {
-          return {
-            ...collection,
-            stats: {
-              ...collection.stats,
-              floor_price: collection.floorPrice,
-            },
-          }
-        })
+      ? data.data
+          .filter((collection: { address: string }) => !blocklistedCollections.includes(collection.address))
+          .map((collection: { stats: Record<string, unknown>; floorPrice: string }) => {
+            return {
+              ...collection,
+              stats: {
+                ...collection.stats,
+                floor_price: collection.floorPrice,
+              },
+            }
+          })
       : []
     return formattedData.slice(0, MAX_SEARCH_RESULTS)
   }

src/nft/queries/genie/TrendingCollectionsFetcher.ts

@@ -1,3 +1,5 @@
+import { blocklistedCollections } from 'nft/utils'
+
 import { TimePeriod, TrendingCollection } from '../../types'
 
 const NFT_API_URL = process.env.REACT_APP_TEMP_API_URL
@@ -18,5 +20,5 @@ export const fetchTrendingCollections = async (payload: {
 
   const data = await r.json()
 
-  return data ?? []
+  return data.filter((collection: { address: string }) => !blocklistedCollections.includes(collection.address)) ?? []
 }