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

* filter search results

* feat: add full base TDP support

* add base to uni wallet supported chains

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/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

 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,
 }
 
 /**