Remove kit-wallet dependency from kit (#40)

packages/kit/package.json

@@ -25,7 +25,6 @@
     "@0xsequence/ethauth": "^0.8.1",
     "@0xsequence/indexer": "^1.9.26",
     "@0xsequence/kit-connectors": "workspace:*",
-    "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/metadata": "^1.9.26",
     "@0xsequence/network": "^1.9.26",
     "@0xsequence/provider": "^1.9.26",

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/KitProvider/NetworkBadge.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Box, Image, Text } from '@0xsequence/design-system'
+import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
+import { useConfig } from 'wagmi'
+
+import { capitalize } from '../../utils/string'
+
+interface NetworkBadgeProps {
+  chainId: number
+}
+
+export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
+  const { chains } = useConfig()
+  const network = getNetwork(chainId)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
+  const chainColor = getNetworkColor(chainId)
+  const chainBGColor = getNetworkBackgroundColor(chainId)
+
+  return (
+    <Box
+      height="6"
+      paddingY="1"
+      paddingLeft="1.5"
+      paddingRight="2"
+      gap="1"
+      style={{
+        background: chainBGColor
+      }}
+      borderRadius="xs"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
+      width="fit"
+    >
+      <Image style={{ width: '14px' }} src={nativeTokenInfo.logoURI} />
+      <Text
+        fontWeight="bold"
+        fontSize="xsmall"
+        style={{
+          color: chainColor
+        }}
+      >
+        {capitalize(network.title ?? network.name)}
+      </Text>
+    </Box>
+  )
+}

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

@@ -24,8 +24,8 @@ import { ExtendedConnector, ModalPosition, getModalPositionCss } from '../../uti
 import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler'
 
 import { TxnDetails } from '../TxnDetails'
-import { NetworkBadge } from '@0xsequence/kit-wallet'
 import { setStorageItem } from '../../utils/storage'
+import { NetworkBadge } from './NetworkBadge'
 
 export declare const THEME: readonly ['dark', 'light']
 export declare type Theme = Exclude<ComponentProps<typeof ThemeProvider>['theme'], undefined>

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'

packages/kit/src/utils/string.ts

@@ -0,0 +1,3 @@
+export const capitalize = (word: string) => {
+  return word.charAt(0).toUpperCase() + word.slice(1)
+}

packages/wallet/src/shared/NetworkBadge.tsx

@@ -4,7 +4,6 @@ import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBac
 import { useConfig } from 'wagmi'
 
 import { capitalize } from '../utils'
-import { networks } from '@0xsequence/network'
 
 interface NetworkBadgeProps {
   chainId: number