Ensuring all network icons are using NetworkImage component

0xsequence · May 10, 2024 · 31a38ce · 31a38ce
1 parent 21dea88
commit 31a38ce
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 13 deletions.
diff --git a/packages/kit/src/components/KitProvider/NetworkBadge.tsx b/packages/kit/src/components/KitProvider/NetworkBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Image, Text } from '@0xsequence/design-system'
+import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import { useConfig } from 'wagmi'
 
@@ -32,7 +32,7 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
       alignItems="center"
       width="fit"
     >
-      <Image style={{ width: '14px' }} src={nativeTokenInfo.logoURI} />
+      <NetworkImage chainId={chainId} size="xs" />
       <Text
         fontWeight="bold"
         fontSize="xsmall"

diff --git a/packages/wallet/src/shared/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Image, Text } from '@0xsequence/design-system'
+import { Box, NetworkImage, Text } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import { useConfig } from 'wagmi'
 
@@ -32,7 +32,7 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
       alignItems="center"
       width="fit"
     >
-      <Image style={{ width: '14px' }} src={nativeTokenInfo.logoURI} />
+      <NetworkImage chainId={chainId} size="xs" />
       <Text
         fontWeight="bold"
         fontSize="xsmall"

diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -3,7 +3,7 @@ import { TokenPrice } from '@0xsequence/api'
 import { ethers } from 'ethers'
 import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit'
-import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton } from '@0xsequence/design-system'
+import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton, NetworkImage } from '@0xsequence/design-system'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
 
@@ -124,7 +124,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
             <Text fontWeight="medium" fontSize="normal" color="text100">
               {getTansactionLabelByType(transfer.transferType)}
             </Text>
-            <Image src={nativeTokenInfo.logoURI} width="3" />
+            <NetworkImage chainId={transaction.chainId} size="xs" />
           </Box>
           {isFirstItem && (
             <Box>

diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useAccount, useConfig } from 'wagmi'
-import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
+import { Box, Button, Image, NetworkImage, SendIcon, Text } from '@0xsequence/design-system'
 import {
   getNativeTokenInfoByChainId,
   useExchangeRate,
@@ -128,7 +128,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
               <Text fontWeight="bold" fontSize="small" color="text100">
                 {collectionName}
               </Text>
-              <Image width="3" src={nativeTokenInfo.logoURI} alt="collection logo" />
+              <NetworkImage chainId={chainId} size="xs" />
             </Box>
           </Box>
           <Box flexDirection="column" justifyContent="center" alignItems="center">

diff --git a/packages/wallet/src/views/Search/components/BalanceItem.tsx b/packages/wallet/src/views/Search/components/BalanceItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Image, Text, ChevronRightIcon, TokenImage } from '@0xsequence/design-system'
+import { Box, Image, Text, ChevronRightIcon, TokenImage, NetworkImage } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
 
@@ -67,7 +67,7 @@ export const BalanceItem = ({ balance }: BalanceItemProps) => {
       opacity={{ hover: '80' }}
     >
       <Box gap="3" flexDirection="row" alignItems="center" justifyContent="center">
-        <TokenImage src={logoURI} symbol={symbol} size="lg" />
+        <TokenImage src={logoURI} symbol={symbol} size="md" />
         <Box gap="1" flexDirection="row" alignItems="center" justifyContent="center">
           <Text
             color="text100"
@@ -83,7 +83,7 @@ export const BalanceItem = ({ balance }: BalanceItemProps) => {
           >
             {tokenName}
           </Text>
-          <Image src={nativeTokenInfo.logoURI} alt="network logo" style={{ width: '12px', height: '12px' }} />
+          <NetworkImage chainId={balance.chainId} size="xs" />
         </Box>
       </Box>
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="1">

diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -8,8 +8,8 @@ import {
   Button,
   Divider,
   GradientAvatar,
-  Image,
   LinkIcon,
+  NetworkImage,
   Skeleton,
   Text,
   TokenImage
@@ -197,7 +197,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
           <Text fontSize="normal" fontWeight="medium" color="text50">
             Transfer
           </Text>
-          <Image width="3" src={nativeTokenInfo.logoURI} alt="network logo" />
+          <NetworkImage chainId={transaction.chainId} size="xs" />
         </Box>
         {transaction.transfers?.map((transfer, index) => (
           <Box width="full" flexDirection="column" justifyContent="center" alignItems="center" gap="4" key={`transfer-${index}`}>