Coin icon to token image (#42)

* Adding viem as a peer dependency to wallet and checkout

* Updating design-system to v1.7.0

* Replacing CoinIcon with TokenImage and NetworkImage from design-system

* Ensuring all network icons are using NetworkImage component

examples/next/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@0xsequence/design-system": "^1.6.0",
+    "@0xsequence/design-system": "^1.7.0",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",

examples/react/package.json

@@ -12,7 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/design-system": "^1.6.0",
+    "@0xsequence/design-system": "^1.7.0",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",

packages/checkout/package.json

@@ -23,16 +23,17 @@
     "react-copy-to-clipboard": "^5.1.0"
   },
   "peerDependencies": {
-    "@0xsequence/design-system": ">=1.6.0",
+    "@0xsequence/design-system": ">=1.7.0",
     "@0xsequence/kit": "workspace:*",
     "ethers": ">=5.7.2",
     "framer-motion": ">=8.5.2",
     "react": ">=17",
     "react-dom": ">=17",
-    "wagmi": ">=2.0.0"
+    "wagmi": ">=2.0.0",
+    "viem": ">=2.0.0"
   },
   "devDependencies": {
-    "@0xsequence/design-system": "^1.6.0",
+    "@0xsequence/design-system": "^1.7.0",
     "@0xsequence/kit": "workspace:*",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "babel-plugin-module-resolver": "^5.0.2",

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Card, Image, Text, Skeleton } from '@0xsequence/design-system'
+import { Box, Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
-import { CoinIcon } from '../../../shared/components/CoinIcon'
 
 import { formatDisplay } from '../../../utils'
 
@@ -39,11 +38,11 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
         </Box>
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
           <Box gap="1" alignItems="center">
-            <CoinIcon size={12} imageUrl={collectionLogoURI} />
+            <TokenImage src={collectionLogoURI} size="xs" />
             <Text marginLeft="1" fontSize="small" color="text80" fontWeight="bold">
               {collectionName}
             </Text>
-            <CoinIcon size={12} imageUrl={nativeTokenInfo.logoURI} />
+            <NetworkImage chainId={chainId} size="xs" />
           </Box>
           <Box
             flexDirection="column"

packages/checkout/src/views/CheckoutSelection/index.tsx

@@ -10,7 +10,8 @@ import {
   Tooltip,
   PaymentsIcon,
   vars,
-  Skeleton
+  Skeleton,
+  TokenImage
 } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
 
@@ -19,7 +20,6 @@ import { useAccount, useConfig } from 'wagmi'
 import { OrderSummaryItem } from './component/OrderSummaryItem'
 
 import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
-import { CoinIcon } from '../../shared/components/CoinIcon'
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation, useCheckoutModal } from '../../hooks'
 import { compareAddress, formatDisplay } from '../../utils'
@@ -161,7 +161,7 @@ export const CheckoutSelection = () => {
             <Skeleton style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
-              <CoinIcon imageUrl={coinImageUrl} size={12} />
+              <TokenImage src={coinImageUrl} size="xs" />
               <Text fontWeight="normal" fontSize="normal" color="text100">
                 {`${formatDisplay(requestAmount)} ${coinSymbol}`}
               </Text>
@@ -193,7 +193,7 @@ export const CheckoutSelection = () => {
               height: '56px'
             }}
             width="full"
-            leftIcon={() => <CoinIcon size={20} imageUrl={coinImageUrl} />}
+            leftIcon={() => <TokenImage src={coinImageUrl} size="sm" />}
             variant="primary"
             label={`Pay with ${coinSymbol}`}
             rightIcon={ChevronRightIcon}
@@ -207,7 +207,7 @@ export const CheckoutSelection = () => {
             variant="glass"
             label={
               <Box placeItems="center" gap="2">
-                <CoinIcon size={20} imageUrl={coinImageUrl} />
+                <TokenImage src={coinImageUrl} size="sm" />
                 <Text>Insufficient ${coinSymbol}</Text>
               </Box>
             }

packages/kit/package.json

@@ -21,7 +21,7 @@
     "@0xsequence/api": "^1.9.26",
     "@0xsequence/auth": "^1.9.26",
     "@0xsequence/core": "^1.9.26",
-    "@0xsequence/design-system": "^1.6.0",
+    "@0xsequence/design-system": "^1.7.0",
     "@0xsequence/ethauth": "^0.8.1",
     "@0xsequence/indexer": "^1.9.26",
     "@0xsequence/kit-connectors": "workspace:*",

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"

packages/wallet/package.json

@@ -27,16 +27,17 @@
     "react-copy-to-clipboard": "^5.1.0"
   },
   "peerDependencies": {
-    "@0xsequence/design-system": ">=1.6.0",
+    "@0xsequence/design-system": ">=1.7.0",
     "@0xsequence/kit": "workspace:*",
     "ethers": ">=5.7.2",
     "framer-motion": ">=8.5.2",
     "react": ">=17",
     "react-dom": ">=17",
-    "wagmi": ">=2.5.0"
+    "wagmi": ">=2.5.0",
+    "viem": ">=2.0.0"
   },
   "devDependencies": {
-    "@0xsequence/design-system": "^1.6.0",
+    "@0xsequence/design-system": "^1.7.0",
     "@0xsequence/kit": "workspace:*",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "babel-plugin-module-resolver": "^5.0.2",

packages/wallet/src/shared/CoinRow.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { ethers } from 'ethers'
-import { Box, Skeleton, Text } from '@0xsequence/design-system'
+import { Box, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
 
-import { CoinIcon } from './CoinIcon'
 import { formatDisplay, getPercentageColor } from '../utils'
 
 interface CoinRowProps {
@@ -56,7 +55,7 @@ export const CoinRow = ({ imageUrl, name, decimals, balance, symbol, fiatValue,
       paddingX="3"
     >
       <Box justifyContent="center" alignItems="center" gap="2">
-        <CoinIcon imageUrl={imageUrl} size={30} />
+        <TokenImage src={imageUrl} symbol={symbol} size="lg" />
         <Box flexDirection="column" alignItems="flex-start">
           <Text variant="medium" color="text100">
             {name}

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"

packages/wallet/src/shared/SendItemInfo.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Skeleton, Text } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { Box, NetworkImage, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
 
-import { CoinIcon } from './CoinIcon'
 import { formatDisplay } from '../utils'
 import { useSettings } from '../hooks'
 import { CollectibleTileImage } from '../shared/CollectibleTileImage'
@@ -52,7 +50,6 @@ export const SendItemInfo = ({
   const { fiatCurrency } = useSettings()
   const formattedBalance = ethers.utils.formatUnits(balance, decimals)
   const balanceDisplayed = formatDisplay(formattedBalance)
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
 
   return (
     <Box alignItems="flex-end" justifyContent="space-between">
@@ -62,14 +59,14 @@ export const SendItemInfo = ({
             <CollectibleTileImage imageUrl={imageUrl} />
           </Box>
         ) : (
-          <CoinIcon imageUrl={imageUrl} size={40} />
+          <TokenImage src={imageUrl} size="xl" />
         )}
         <Box flexDirection="column" alignItems="flex-start">
           <Box flexDirection="row" alignItems="center" gap="1">
             <Text variant="medium" color="text100">
               {name}
             </Text>
-            <CoinIcon imageUrl={nativeTokenInfo.logoURI} size={12} />
+            <NetworkImage chainId={chainId} size="xs" />
           </Box>
           <Text color="text50" variant="normal">
             {' '}

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>

packages/wallet/src/shared/index.ts

@@ -1,6 +1,5 @@
 export * from './KitWalletProvider'
 export { CollectibleTileImage } from './CollectibleTileImage'
-export { CoinIcon } from './CoinIcon'
 export { formatDisplay } from '../utils'
 export { useSettings } from '../hooks'
 export { NetworkBadge } from './NetworkBadge'

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">

packages/wallet/src/views/CollectionDetails/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import { TokenBalance } from '@0xsequence/indexer'
 import { ethers } from 'ethers'
-import { Box, Image, Text, vars } from '@0xsequence/design-system'
+import { Box, Image, Text, TokenImage, vars } from '@0xsequence/design-system'
 import { useCollectionBalance } from '@0xsequence/kit'
 import { useAccount } from 'wagmi'
 
 import { CollectionDetailsSkeleton } from './Skeleton'
 
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { CoinIcon } from '../../shared/CoinIcon'
 import { useNavigation } from '../../hooks'
 import { formatDisplay } from '../../utils'
 
@@ -60,7 +59,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
       gap="10"
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
-        <CoinIcon imageUrl={collectionLogoURI} size={32} />
+        <TokenImage src={collectionLogoURI} size="lg" />
         <Text fontWeight="bold" fontSize="large" color="text100">
           {contractInfo?.name || 'Unknown'}
         </Text>

packages/wallet/src/views/Home/components/AssetSummary/CoinTile/CoinTileContent.tsx

@@ -1,28 +1,27 @@
 import React from 'react'
-import { Box, Text } from '@0xsequence/design-system'
+import { Box, NetworkIcon, NetworkImage, Text, TokenImage } from '@0xsequence/design-system'
 
 import { getPercentageColor } from '../../../../../utils'
-import { CoinIcon } from '../../../../../shared/CoinIcon'
 import { useSettings } from '../../../../../hooks'
 
 interface CoinTileContentProps {
-  networkLogoUrl: string
   logoUrl?: string
   tokenName: string
   balance: string
   balanceFiat: string
   priceChangePercentage: number
   symbol: string
+  chainId: number
 }
 
 export const CoinTileContent = ({
-  networkLogoUrl,
   logoUrl,
   tokenName,
   balance,
   balanceFiat,
   priceChangePercentage,
-  symbol
+  symbol,
+  chainId
 }: CoinTileContentProps) => {
   const { fiatCurrency } = useSettings()
   const priceChangeSymbol = priceChangePercentage > 0 ? '+' : ''
@@ -40,7 +39,7 @@ export const CoinTileContent = ({
       gap="1"
     >
       <Box marginBottom="1">
-        <CoinIcon size={36} imageUrl={logoUrl} />
+        <TokenImage src={logoUrl} symbol={symbol} size="xl" />
       </Box>
       <Box marginBottom="3">
         <Box flexDirection="row" gap="1" justifyContent="flex-start" alignItems="center">
@@ -52,7 +51,7 @@ export const CoinTileContent = ({
           >
             {tokenName}
           </Text>
-          <CoinIcon size={12} imageUrl={networkLogoUrl} />
+          <NetworkImage chainId={chainId} size="xs" />
         </Box>
         <Text
           color="text50"

packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx

@@ -51,7 +51,7 @@ export const CoinTile = ({ balance }: CoinTileProps) => {
 
     return (
       <CoinTileContent
-        networkLogoUrl={nativeTokenInfo.logoURI}
+        chainId={balance.chainId}
         logoUrl={nativeTokenInfo.logoURI}
         tokenName={nativeTokenInfo.name}
         balance={balanceDisplayed}
@@ -81,7 +81,7 @@ export const CoinTile = ({ balance }: CoinTileProps) => {
 
   return (
     <CoinTileContent
-      networkLogoUrl={nativeTokenInfo.logoURI}
+      chainId={balance.chainId}
       logoUrl={url}
       tokenName={name}
       balance={balanceDisplayed}