feat: search attempts route to current chain (#4785)

* finished feature

* added L2 icons

* removed console.log

src/components/NavBar/SuggestionRow.tsx

 import clsx from 'clsx'
-import { getTokenDetailsURL } from 'graphql/data/util'
+import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
+import { getChainInfo } from 'constants/chainInfo'
+import { getTokenDetailsURL, useGlobalChainId } from 'graphql/data/util'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -100,6 +102,15 @@ export const CollectionRow = ({
   )
 }
 
+function useBridgedAddress(token: FungibleToken): [string | undefined, number | undefined, string | undefined] {
+  const globalChainId = useGlobalChainId()
+  const bridgedAddress = globalChainId ? token.extensions?.bridgeInfo?.[globalChainId]?.tokenAddress : undefined
+  if (bridgedAddress && globalChainId) {
+    return [bridgedAddress, globalChainId, getChainInfo(globalChainId)?.circleLogoUrl]
+  }
+  return [undefined, undefined, undefined]
+}
+
 interface TokenRowProps {
   token: FungibleToken
   isHovered: boolean
@@ -123,7 +134,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceE
     traceEvent()
   }, [addToSearchHistory, toggleOpen, token, traceEvent])
 
-  const tokenDetailsPath = getTokenDetailsURL(token.address, undefined, token.chainId)
+  const [bridgedAddress, bridgedChain, L2Icon] = useBridgedAddress(token)
+  const tokenDetailsPath = getTokenDetailsURL(bridgedAddress ?? token.address, undefined, bridgedChain ?? token.chainId)
   // Close the modal on escape
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
@@ -150,6 +162,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceE
     >
       <Row style={{ width: '65%' }}>
         {!brokenImage && token.logoURI ? (
+          <LogoContainer>
             <Box
               as="img"
               src={token.logoURI.includes('ipfs://') ? uriToHttp(token.logoURI)[0] : token.logoURI}
@@ -158,6 +171,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceE
               onError={() => setBrokenImage(true)}
               onLoad={() => setLoaded(true)}
             />
+            <L2NetworkLogo networkUrl={L2Icon} size="16px" />
+          </LogoContainer>
         ) : (
           <Box className={styles.imageHolder} />
         )}

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -318,7 +318,7 @@ export const L2NetworkLogo = styled.div<{ networkUrl?: string; size?: string }>`
   width: ${({ size }) => size ?? '12px'};
   position: absolute;
   left: 50%;
-  top: 50%;
+  bottom: 0;
   background: url(${({ networkUrl }) => networkUrl});
   background-repeat: no-repeat;
   background-size: ${({ size }) => (size ? `${size} ${size}` : '12px 12px')};

src/graphql/data/util.ts

@@ -39,8 +39,12 @@ export const CHAIN_ID_TO_BACKEND_NAME: { [key: number]: Chain } = {
   [SupportedChainId.OPTIMISM_GOERLI]: 'OPTIMISM',
 }
 
+export function useGlobalChainId() {
+  return useAppSelector((state) => state.application.chainId)
+}
+
 export function useGlobalChainName() {
-  const chainId = useAppSelector((state) => state.application.chainId)
+  const chainId = useGlobalChainId()
   return chainId && CHAIN_ID_TO_BACKEND_NAME[chainId] ? CHAIN_ID_TO_BACKEND_NAME[chainId] : 'ETHEREUM'
 }
 

src/nft/types/navbar/navbar.ts

@@ -3,6 +3,13 @@ export interface LooksRareRewardsData {
   cumulativeLooksAmount: string
   cumulativeLooksProof: string[]
 }
+interface BridgeInfoEntry {
+  tokenAddress?: string
+}
+
+interface FungibleTokenExtensions {
+  bridgeInfo?: { [chain: number]: BridgeInfoEntry }
+}
 
 export interface FungibleToken {
   name: string
@@ -16,5 +23,6 @@ export interface FungibleToken {
   price24hChange: number
   volume24h: number
   onDefaultList?: boolean
+  extensions?: FungibleTokenExtensions
   marketCap: number
 }