fix: Cherrypick main fixes to staging (#7166)

* fix: token margin in searchbar (#7155)

fix: token margin is searchbar

* feat: Add base support to Explore & Search (#7165)

* filter search results

* feat: add full base TDP support

* add base to uni wallet supported chains

* fix: test id based on address & chain instead of ticker (#7167)

* fix: test id based on address instead of ticker

* add chain to test id

* use token address

* lowercase

---------

Co-authored-by: Jack Short <john.short.tj@gmail.com>

CODEOWNERS

@@ -0,0 +1 @@
+@uniswap/web-admins

cypress/e2e/universal-search.test.ts

@@ -1,5 +1,10 @@
+import { ChainId } from '@uniswap/sdk-core'
+import { UNI } from 'constants/tokens'
+
 import { getTestSelector } from '../utils'
 
+const UNI_ADDRESS = UNI[ChainId.MAINNET].address.toLowerCase()
+
 describe('Universal search bar', () => {
   function openSearch() {
     // can't just type "/" because on mobile it doesn't respond to that
@@ -19,7 +24,7 @@ describe('Universal search bar', () => {
     openSearch()
     getSearchBar().clear().type('uni')
 
-    cy.get(getTestSelector('searchbar-token-row-UNI'))
+    cy.get(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
       .should('contain.text', 'Uniswap')
       .and('contain.text', 'UNI')
       .and('contain.text', '$')
@@ -30,7 +35,7 @@ describe('Universal search bar', () => {
     openSearch()
     cy.get(getTestSelector('searchbar-dropdown'))
       .contains(getTestSelector('searchbar-dropdown'), 'Recent searches')
-      .find(getTestSelector('searchbar-token-row-UNI'))
+      .find(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
       .should('exist')
   })
 
@@ -51,13 +56,13 @@ describe('Universal search bar', () => {
       // Seed recent results with UNI.
       openSearch()
       getSearchBar().type('uni')
-      cy.get(getTestSelector('searchbar-token-row-UNI'))
+      cy.get(getTestSelector(`searchbar-token-row-ETHEREUM-${UNI_ADDRESS}`))
       getSearchBar().clear().type('{esc}')
 
       // Search a different token by name.
       openSearch()
       getSearchBar().type('eth')
-      cy.get(getTestSelector('searchbar-token-row-ETH'))
+      cy.get(getTestSelector('searchbar-token-row-ETHEREUM-NATIVE'))
 
       // Validate that we go to the searched/selected result.
       getSearchBar().type('{enter}')

src/components/NavBar/SearchBarDropdown.tsx

@@ -362,9 +362,6 @@ function ComingSoonText({ chainId }: { chainId: ChainId }) {
       return <Trans>Coming soon: search and explore tokens on BNB Chain</Trans>
     case ChainId.AVALANCHE:
       return <Trans>Coming soon: search and explore tokens on Avalanche Chain</Trans>
-    case ChainId.BASE:
-    case ChainId.BASE_GOERLI:
-      return <Trans>Coming soon: search and explore tokens on Base</Trans>
     default:
       return null
   }

src/components/NavBar/SuggestionRow.tsx

@@ -160,7 +160,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
 
   return (
     <Link
-      data-testid={`searchbar-token-row-${token.symbol}`}
+      data-testid={`searchbar-token-row-${token.chain}-${token.address ?? 'NATIVE'}`}
       to={tokenDetailsPath}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
@@ -174,7 +174,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
           symbol={token.symbol}
           size="36px"
           backupImg={token.project?.logoUrl}
-          style={{ paddingRight: '8px' }}
+          style={{ marginRight: '8px' }}
         />
         <Column className={styles.suggestionPrimaryContainer}>
           <Row gap="4" width="full">

src/components/Tokens/constants.ts

@@ -8,4 +8,4 @@ export const SMALL_MEDIA_BREAKPOINT = '540px'
 export const MOBILE_MEDIA_BREAKPOINT = '420px'
 
 // includes chains that the backend does not current source off-chain metadata for
-export const UNSUPPORTED_METADATA_CHAINS = [ChainId.BNB, ChainId.AVALANCHE, ChainId.BASE_GOERLI, ChainId.BASE]
+export const UNSUPPORTED_METADATA_CHAINS = [ChainId.BNB, ChainId.AVALANCHE]

src/constants/chains.ts

@@ -1,6 +1,12 @@
 import { ChainId, SUPPORTED_CHAINS, SupportedChainsType } from '@uniswap/sdk-core'
 
-export const UniWalletSupportedChains = [ChainId.MAINNET, ChainId.ARBITRUM_ONE, ChainId.OPTIMISM, ChainId.POLYGON]
+export const UniWalletSupportedChains = [
+  ChainId.MAINNET,
+  ChainId.ARBITRUM_ONE,
+  ChainId.OPTIMISM,
+  ChainId.POLYGON,
+  ChainId.BASE,
+]
 
 export const CHAIN_IDS_TO_NAMES = {
   [ChainId.MAINNET]: 'mainnet',

src/graphql/data/SearchTokens.ts

@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import invariant from 'tiny-invariant'
 
 import { Chain, SearchTokensQuery, useSearchTokensQuery } from './__generated__/types-and-hooks'
-import { chainIdToBackendName } from './util'
+import { BACKEND_SUPPORTED_CHAINS, chainIdToBackendName } from './util'
 
 gql`
   query SearchTokens($searchQuery: String!) {
@@ -96,7 +96,10 @@ export function useSearchTokens(searchQuery: string, chainId: number) {
     const searchChain = chainIdToBackendName(chainId)
     // Stores results, allowing overwriting cross-chain tokens w/ more 'relevant token'
     const selectionMap: { [projectId: string]: SearchToken } = {}
-    data?.searchTokens?.forEach((token) => {
+    const filteredTokens = data?.searchTokens?.filter((token) =>
+      (BACKEND_SUPPORTED_CHAINS as ReadonlyArray<Chain>).includes(token.chain)
+    )
+    filteredTokens?.forEach((token) => {
       if (token.project?.id) {
         const existing = selectionMap[token.project.id]
         selectionMap[token.project.id] = dedupeCrosschainTokens(token, existing, searchChain)

src/graphql/data/util.tsx

@@ -87,6 +87,7 @@ export const CHAIN_ID_TO_BACKEND_NAME: { [key: number]: InterfaceGqlChain } = {
   [ChainId.OPTIMISM_GOERLI]: Chain.Optimism,
   [ChainId.BNB]: Chain.Bnb,
   [ChainId.AVALANCHE]: Chain.Avalanche,
+  [ChainId.BASE]: Chain.Base,
 }
 
 export function chainIdToBackendName(chainId: number | undefined) {
@@ -128,6 +129,7 @@ const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: InterfaceGqlChain } = {
   optimism: Chain.Optimism,
   bnb: Chain.Bnb,
   avalanche: Chain.Avalanche,
+  base: Chain.Base,
 }
 
 /**