Replacing additional components and utils from wallet

packages/kit/src/components/KitProvider/CollectibleTileImage.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Card, Image } from '@0xsequence/design-system'
+
+interface CollectibleTileImageProps {
+  imageUrl?: string
+}
+
+export const CollectibleTileImage = ({ imageUrl }: CollectibleTileImageProps) => {
+  return (
+    <Card
+      padding="0"
+      aspectRatio="1/1"
+      justifyContent="center"
+      alignItems="center"
+      overflow="hidden"
+      borderRadius="sm"
+      background="backgroundSecondary"
+    >
+      <Image style={{ height: '100%' }} src={imageUrl} />
+    </Card>
+  )
+}

packages/kit/src/components/TxnDetails/index.tsx

@@ -1,18 +1,17 @@
-import { Box, Card, GradientAvatar, Skeleton, Text } from '@0xsequence/design-system'
+import { Box, Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
 
 import React, { useEffect, useState } from 'react'
 
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
 
 import { useTokenMetadata, useBalances } from '@0xsequence/kit'
-import { CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet'
-import { compareAddress, getNativeTokenInfoByChainId } from '../../utils'
+import { capitalize, compareAddress, getNativeTokenInfoByChainId } from '../../utils'
 import { commons } from '@0xsequence/core'
 import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding'
 import { ContractType } from '@0xsequence/indexer'
-import { getAddress } from 'ethers/lib/utils'
 import { useAPIClient } from '../../hooks'
+import { CollectibleTileImage } from '../KitProvider/CollectibleTileImage'
 
 interface TxnDetailsProps {
   address: string
@@ -108,9 +107,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
     transferProps[0]?.tokenIds ?? []
   )
 
-  const tokenBalance = contractAddress
-    ? balances.find(b => getAddress(b.contractAddress) === getAddress(contractAddress))
-    : undefined
+  const tokenBalance = contractAddress ? balances.find(b => compareAddress(b.contractAddress, contractAddress)) : undefined
   const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18
 
   const imageUrl = isNativeCoin
@@ -122,7 +119,6 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
   const symbol = isNativeCoin ? nativeTokenInfo.symbol : isNFT ? '' : tokenBalance?.contractInfo?.symbol || ''
 
   const formattedBalance = tokenBalance !== undefined ? ethers.utils.formatUnits(tokenBalance.balance, decimals) : ''
-  const balanceDisplayed = formatDisplay(formattedBalance)
 
   const amountSending = transferProps[0]?.amounts?.[0] ?? transferProps[0]?.value
 
@@ -131,7 +127,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
     <Card>
       <Box marginBottom="2">
         <Text variant="medium" color="text100">
-          {capitalizeFirstLetter(transferProps[0]?.type ?? '')}
+          {capitalize(transferProps[0]?.type ?? '')}
         </Text>
       </Box>
 
@@ -142,7 +138,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
               <CollectibleTileImage imageUrl={imageUrl} />
             </Box>
           ) : (
-            <CoinIcon imageUrl={imageUrl} size={40} />
+            <TokenImage src={imageUrl} symbol={symbol} size="md" />
           )}
           <Box flexDirection="column" alignItems="flex-start">
             <Box flexDirection="row" alignItems="center" gap="1">
@@ -250,10 +246,6 @@ const AwardItemInfo = ({ awardItemProps }: AwardItemInfoProps) => {
   )
 }
 
-const capitalizeFirstLetter = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 

packages/kit/src/utils/helpers.ts

@@ -5,3 +5,69 @@ export const isEmailValid = (email: string) => {
 export const compareAddress = (a: string, b: string) => {
   return a.toLowerCase() === b.toLowerCase()
 }
+
+enum ValueType {
+  VERY_LARGE,
+  FRACTION,
+  VERY_TINY,
+  MIXED
+}
+
+export const formatDisplay = (_val: number | string): string => {
+  if (isNaN(Number(_val))) {
+    console.error(`display format error ${_val} is not a number`)
+    return 'NaN'
+  }
+
+  const val = Number(_val)
+
+  if (val === 0) {
+    return '0'
+  }
+
+  let valMode: ValueType
+
+  if (val > 100000000) {
+    valMode = ValueType.VERY_LARGE
+  } else if (val < 0.0000000001) {
+    valMode = ValueType.VERY_TINY
+  } else if (val < 1) {
+    valMode = ValueType.FRACTION
+  } else {
+    valMode = ValueType.MIXED
+  }
+
+  let notation: Intl.NumberFormatOptions['notation'] = undefined
+  let config: Pick<Intl.NumberFormatOptions, 'maximumFractionDigits' | 'maximumSignificantDigits'>
+
+  switch (valMode) {
+    case ValueType.VERY_LARGE:
+      notation = 'compact'
+      config = {
+        maximumFractionDigits: 4
+      }
+      break
+    case ValueType.VERY_TINY:
+      notation = 'scientific'
+      config = {
+        maximumFractionDigits: 4
+      }
+      break
+    case ValueType.FRACTION:
+      notation = 'standard'
+      config = {
+        maximumSignificantDigits: 4
+      }
+      break
+    default:
+      notation = 'standard'
+      config = {
+        maximumFractionDigits: 2
+      }
+  }
+
+  return Intl.NumberFormat('en-US', {
+    notation,
+    ...config
+  }).format(val)
+}

packages/kit/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './styling'
 export * from './networks'
 export * from './adapters'
 export * from './ethAuth'
+export * from './string'