feat: add L2 network label to Explore token row (#4361)

* initial

* add L2 badge

* meh

* png updates

* fix icons

* naming

* nits

* case

* rename

* rm

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -136,14 +136,14 @@ export default function NetworkFilter() {
   const toggleMenu = useToggleModal(ApplicationModal.NETWORK_FILTER)
   useOnClickOutside(node, open ? toggleMenu : undefined)
   const [activeNetwork, setNetwork] = useAtom(filterNetworkAtom)
-  const { label, logoUrl } = getChainInfo(activeNetwork)
+  const { label, circleLogoUrl, logoUrl } = getChainInfo(activeNetwork)
 
   return (
     <StyledMenu ref={node}>
       <StyledMenuButton onClick={toggleMenu} aria-label={`networkFilter`} open={open}>
         <StyledMenuContent>
           <NetworkLabel>
-            <Logo src={logoUrl} /> {label}
+            <Logo src={circleLogoUrl ?? logoUrl} /> {label}
           </NetworkLabel>
           <Chevron open={open}>
             {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
@@ -161,7 +161,8 @@ export default function NetworkFilter() {
               }}
             >
               <NetworkLabel>
-                <Logo src={getChainInfo(network).logoUrl} /> {getChainInfo(network).label}
+                <Logo src={getChainInfo(network).circleLogoUrl ?? getChainInfo(network).logoUrl} />
+                {getChainInfo(network).label}
               </NetworkLabel>
               {network === activeNetwork && (
                 <CheckContainer>

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -4,6 +4,7 @@ import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
 import { EventName } from 'components/AmplitudeAnalytics/constants'
 import SparklineChart from 'components/Charts/SparklineChart'
 import CurrencyLogo from 'components/CurrencyLogo'
+import { getChainInfo } from 'constants/chainInfo'
 import { useCurrency, useToken } from 'hooks/Tokens'
 import { TimePeriod, TokenData } from 'hooks/useExplorePageQuery'
 import { useAtom } from 'jotai'
@@ -280,6 +281,23 @@ const SparkLineLoadingBubble = styled(LongLoadingBubble)`
   height: 4px;
 `
 
+const L2NetworkLogo = styled.div<{ networkUrl?: string }>`
+  height: 12px;
+  width: 12px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background: url(${({ networkUrl }) => networkUrl});
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  display: ${({ networkUrl }) => !networkUrl && 'none'};
+`
+const LogoContainer = styled.div`
+  position: relative;
+  align-items: center;
+  display: flex;
+`
+
 /* formatting for volume with timeframe header display */
 function getHeaderDisplay(category: string, timeframe: string): string {
   if (category === Category.volume) return `${TIME_DISPLAYS[timeframe]} ${category}`
@@ -435,6 +453,7 @@ export default function LoadedRow({
   const filterString = useAtomValue(filterStringAtom)
   const filterNetwork = useAtomValue(filterNetworkAtom)
   const filterTime = useAtomValue(filterTimeAtom) // filter time period for top tokens table
+  const L2Icon = getChainInfo(filterNetwork).circleLogoUrl
 
   const tokenPercentChangeInfo = (
     <>
@@ -482,7 +501,10 @@ export default function LoadedRow({
         listNumber={tokenListIndex + 1}
         tokenInfo={
           <ClickableName>
-            <CurrencyLogo currency={currency} />
+            <LogoContainer>
+              <CurrencyLogo currency={currency} />
+              <L2NetworkLogo networkUrl={L2Icon} />
+            </LogoContainer>
             <TokenInfoCell>
               <TokenName>{tokenName}</TokenName>
               <TokenSymbol>{tokenSymbol}</TokenSymbol>

src/constants/chainInfo.ts

+import celoCircleLogoUrl from 'assets/images/celoCircle.png'
 import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
+import optimismCircleLogoUrl from 'assets/images/optimismCircle.png'
+import polygonCircleLogoUrl from 'assets/images/polygonCircle.png'
 import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import arbitrumCircleLogoUrl from 'assets/svg/arbitrum_logo.svg'
 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'
@@ -22,6 +26,7 @@ interface BaseChainInfo {
   readonly explorer: string
   readonly infoLink: string
   readonly logoUrl: string
+  readonly circleLogoUrl?: string
   readonly label: string
   readonly helpCenterUrl?: string
   readonly nativeCurrency: {
@@ -110,6 +115,7 @@ const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/optimism/',
     label: 'Optimism',
     logoUrl: optimismLogoUrl,
+    circleLogoUrl: optimismCircleLogoUrl,
     statusPage: 'https://optimism.io/status',
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -140,6 +146,7 @@ const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/arbitrum',
     label: 'Arbitrum',
     logoUrl: arbitrumLogoUrl,
+    circleLogoUrl: arbitrumCircleLogoUrl,
     defaultListUrl: ARBITRUM_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -169,6 +176,7 @@ const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/polygon/',
     label: 'Polygon',
     logoUrl: polygonMaticLogo,
+    circleLogoUrl: polygonCircleLogoUrl,
     nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
     color: colorsDark.chain_137,
     backgroundColor: colorsDark.chain_137_background,
@@ -193,6 +201,7 @@ const CHAIN_INFO: ChainInfoMap = {
     infoLink: 'https://info.uniswap.org/#/celo',
     label: 'Celo',
     logoUrl: celoLogo,
+    circleLogoUrl: celoCircleLogoUrl,
     nativeCurrency: { name: 'Celo', symbol: 'CELO', decimals: 18 },
     defaultListUrl: CELO_LIST,
   },

src/lib/hooks/useCurrencyLogoURIs.ts

@@ -9,7 +9,7 @@ import CeloLogo from '../../assets/svg/celo_logo.svg'
 import MaticLogo from '../../assets/svg/matic-token-icon.svg'
 import { isCelo, nativeOnChain } from '../../constants/tokens'
 
-type Network = 'ethereum' | 'arbitrum' | 'optimism'
+type Network = 'ethereum' | 'arbitrum' | 'optimism' | 'polygon'
 
 function chainIdToNetworkName(networkId: SupportedChainId): Network {
   switch (networkId) {
@@ -19,12 +19,14 @@ function chainIdToNetworkName(networkId: SupportedChainId): Network {
       return 'arbitrum'
     case SupportedChainId.OPTIMISM:
       return 'optimism'
+    case SupportedChainId.POLYGON:
+      return 'polygon'
     default:
       return 'ethereum'
   }
 }
 
-function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MAINNET): string {
+export function getNativeLogoURI(chainId: SupportedChainId = SupportedChainId.MAINNET): string {
   switch (chainId) {
     case SupportedChainId.POLYGON:
     case SupportedChainId.POLYGON_MUMBAI: