Fixing TokenImage withNetwork so that it uses a cutout effect that sh…

…ows the background around the network image
0xsequence · Sep 23, 2024 · 40e8bff · 40e8bff
1 parent 8dd8fb6
commit 40e8bff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/components/TokenImage/TokenImage.stories.tsx b/src/components/TokenImage/TokenImage.stories.tsx
@@ -26,9 +26,9 @@ export const WithoutImage: Story = {
 
 export const WithNetwork: Story = {
   args: {
-    borderRadius: 'circle',
+    symbol: 'USDC',
     size: 'lg',
-    src: 'https://assets.sequence.info/images/networks/medium/37714555429.webp',
-    withNetwork: 1,
+    src: 'https://assets.sequence.info/images/tokens/medium/137/0x2791bca1f2de4661ed88a30c99a7a9449aa84174.webp',
+    withNetwork: 137,
   },
 }
diff --git a/src/components/TokenImage/TokenImage.tsx b/src/components/TokenImage/TokenImage.tsx
@@ -18,6 +18,9 @@ type TokenImageProps = BoxProps &
     withNetwork?: number
   }
 
+const NETWORK_IMAGE_SIZE = '40%'
+const NETWORK_IMAGE_OFFSET = '-2%'
+
 export const TokenImage = memo((props: TokenImageProps) => {
   const {
     borderRadius = 'circle',
@@ -40,15 +43,15 @@ export const TokenImage = memo((props: TokenImageProps) => {
     >
       {src ? (
         <Image
-          className={styles.img}
+          className={clsx(styles.img, withNetwork && styles.cutout)}
           disableAnimation={disableAnimation}
           borderRadius={borderRadius}
           overflow="hidden"
           src={src}
         />
       ) : (
         <Text
-          className={styles.fallback}
+          className={clsx(styles.fallback, withNetwork && styles.cutout)}
           variant="normal"
           fontWeight="medium"
           color="text50"
@@ -60,22 +63,17 @@ export const TokenImage = memo((props: TokenImageProps) => {
         </Text>
       )}
       {withNetwork && (
-        <Box
+        <NetworkImage
+          chainId={withNetwork}
           position="absolute"
           zIndex="1"
-          borderRadius="circle"
-          borderWidth="thin"
-          borderStyle="solid"
-          borderColor="backgroundPrimary"
-          background="backgroundPrimary"
-          placeItems="center"
-          style={{ width: 16 + 2, height: 16 + 2, right: -2, bottom: -2 }}
-        >
-          <NetworkImage
-            chainId={withNetwork}
-            style={{ width: 16, height: 16 }}
-          />
-        </Box>
+          style={{
+            width: NETWORK_IMAGE_SIZE,
+            height: NETWORK_IMAGE_SIZE,
+            right: NETWORK_IMAGE_OFFSET,
+            bottom: NETWORK_IMAGE_OFFSET,
+          }}
+        />
       )}
     </Box>
   )

diff --git a/src/components/TokenImage/styles.css.ts b/src/components/TokenImage/styles.css.ts
@@ -95,3 +95,13 @@ export const fallback = style([
     fontSize: 'inherit',
   },
 ])
+
+// When using `withNetwork` prop we need to cut out the bottom right corner so the network image can be displayed
+// with a cutout effect showing the background behind the token image
+export const cutout = style({
+  maskImage: `radial-gradient(
+    circle at 82% 82%,
+    transparent 22%,
+    black 0
+  )`,
+})