feat: new chain logos

src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx

@@ -2,8 +2,8 @@ import { ChainId, Currency } from '@uniswap/sdk-core'
 import blankTokenUrl from 'assets/svg/blank_token.svg'
 import { ReactComponent as UnknownStatus } from 'assets/svg/contract-interaction.svg'
 import { MissingImageLogo } from 'components/Logo/AssetLogo'
+import { ChainLogo, getDefaultBorderRadius } from 'components/Logo/ChainLogo'
 import { Unicon } from 'components/Unicon'
-import { getChainInfo } from 'constants/chainInfo'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import useENSAvatar from 'hooks/useENSAvatar'
 import React from 'react'
@@ -48,25 +48,14 @@ const ENSAvatarImg = styled.img`
   width: 40px;
 `
 
-const StyledChainLogo = styled.img`
-  height: 14px;
-  width: 14px;
-`
-
-const SquareChainLogo = styled.img`
-  height: 100%;
-  width: 100%;
-`
-
 const CircleLogoImage = styled.img<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   border-radius: 50%;
 `
 
-const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
-  background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.surface2 : theme.neutral1)};
-  border-radius: 2px;
+const L2LogoContainer = styled.div`
+  border-radius: ${getDefaultBorderRadius(16)}px;
   height: 16px;
   left: 60%;
   position: absolute;
@@ -152,17 +141,10 @@ interface PortfolioLogoProps {
 
 function SquareL2Logo({ chainId }: { chainId: ChainId }) {
   if (chainId === ChainId.MAINNET) return null
-  const { squareLogoUrl, logoUrl } = getChainInfo(chainId)
-
-  const chainLogo = squareLogoUrl ?? logoUrl
 
   return (
-    <L2LogoContainer hasSquareLogo={!!squareLogoUrl}>
-      {squareLogoUrl ? (
-        <SquareChainLogo src={chainLogo} alt="chainLogo" />
-      ) : (
-        <StyledChainLogo src={chainLogo} alt="chainLogo" />
-      )}
+    <L2LogoContainer>
+      <ChainLogo chainId={chainId} size={16} />
     </L2LogoContainer>
   )
 }
@@ -172,7 +154,7 @@ function SquareL2Logo({ chainId }: { chainId: ChainId }) {
  */
 export function PortfolioLogo(props: PortfolioLogoProps) {
   return (
-    <StyledLogoParentContainer>
+    <StyledLogoParentContainer style={props.style}>
       {getLogo(props)}
       <SquareL2Logo chainId={props.chainId} />
     </StyledLogoParentContainer>

src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap

@@ -37,20 +37,14 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
   left: 0;
 }
 
-.c4 {
-  height: 14px;
-  width: 14px;
-}
-
 .c2 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
 }
 
 .c3 {
-  background-color: #222222;
-  border-radius: 2px;
+  border-radius: 4px;
   height: 16px;
   left: 60%;
   position: absolute;
@@ -90,11 +84,29 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
     <div
       class="c3"
     >
-      <img
-        alt="chainLogo"
-        class="c4"
-        src="arbitrum_logo.svg"
-      />
+      <svg
+        height="16"
+        width="16"
+      >
+        <rect
+          fill="#F9F9F9"
+          height="16"
+          rx="4"
+          width="16"
+        />
+        <rect
+          fill="#00A3FF33"
+          height="16"
+          rx="4"
+          width="16"
+        />
+        <svg
+          height="16"
+          width="16"
+        >
+          arbitrum.svg
+        </svg>
+      </svg>
     </div>
   </div>
 </div>

src/components/DoubleLogo/index.tsx

@@ -35,12 +35,12 @@ export default function DoubleCurrencyLogo({
     <Wrapper sizeraw={size} margin={margin}>
       {currency0 && (
         <HigherLogoWrapper>
-          <CurrencyLogo hideL2Icon currency={currency0} size={size.toString() + 'px'} />
+          <CurrencyLogo currency={currency0} size={size.toString() + 'px'} />
         </HigherLogoWrapper>
       )}
       {currency1 && (
         <CoveredLogoWapper sizeraw={size}>
-          <CurrencyLogo hideL2Icon currency={currency1} size={size.toString() + 'px'} />
+          <CurrencyLogo currency={currency1} size={size.toString() + 'px'} />
         </CoveredLogoWapper>
       )}
     </Wrapper>

src/components/Logo/AssetLogo.tsx

@@ -1,5 +1,4 @@
 import { ChainId } from '@uniswap/sdk-core'
-import { getChainInfo } from 'constants/chainInfo'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React, { useState } from 'react'
 import styled from 'styled-components'
@@ -42,7 +41,6 @@ export type AssetLogoBaseProps = {
   backupImg?: string | null
   size?: string
   style?: React.CSSProperties
-  hideL2Icon?: boolean
 }
 type AssetLogoProps = AssetLogoBaseProps & { isNative?: boolean; address?: string | null; chainId?: number }
 
@@ -51,19 +49,6 @@ const LogoContainer = styled.div`
   display: flex;
 `
 
-const L2NetworkLogo = styled.div<{ networkUrl?: string; parentSize: string }>`
-  --size: ${({ parentSize }) => `calc(${parentSize} / 2)`};
-  width: var(--size);
-  height: var(--size);
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  background: url(${({ networkUrl }) => networkUrl});
-  background-repeat: no-repeat;
-  background-size: ${({ parentSize }) => `calc(${parentSize} / 2) calc(${parentSize} / 2)`};
-  display: ${({ networkUrl }) => !networkUrl && 'none'};
-`
-
 /**
  * Renders an image by prioritizing a list of sources, and then eventually a fallback triangle alert
  */
@@ -75,10 +60,8 @@ export default function AssetLogo({
   backupImg,
   size = '24px',
   style,
-  hideL2Icon = false,
 }: AssetLogoProps) {
   const [src, nextSrc] = useTokenLogoSource(address, chainId, isNative, backupImg)
-  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
   const [imgLoaded, setImgLoaded] = useState(() => {
     const img = document.createElement('img')
     img.src = src ?? ''
@@ -104,7 +87,6 @@ export default function AssetLogo({
           {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
         </MissingImageLogo>
       )}
-      {!hideL2Icon && <L2NetworkLogo networkUrl={L2Icon} parentSize={size} />}
     </LogoContainer>
   )
 }