Move useCoinBalance and useCollectibleBalance into kit package

packages/kit/src/hooks/data.ts

@@ -7,6 +7,7 @@ import { useIndexerClient, useIndexerClients } from './useIndexerClient'
 import { ContractType, Page, SequenceIndexer, TokenBalance } from '@0xsequence/indexer'
 
 import { zeroAddress } from 'viem'
+import { compareAddress } from '../utils/helpers'
 
 export const time = {
   oneSecond: 1 * 1000,
@@ -28,7 +29,7 @@ const getNativeTokenBalance = async (indexerClient: SequenceIndexer, chainId: nu
     tokenID: ''
   }
 
-  return [tokenBalance]
+  return tokenBalance
 }
 
 interface GetTokenBalancesArgs {
@@ -94,6 +95,62 @@ export const useBalances = ({ chainIds, ...args }: UseBalancesArgs) => {
   })
 }
 
+interface UseCoinBalanceArgs extends GetTokenBalancesArgs {
+  chainId: number
+}
+
+export const useCoinBalance = (args: UseCoinBalanceArgs) => {
+  const indexerClient = useIndexerClient(args.chainId)
+
+  return useQuery({
+    queryKey: ['coinBalance', args],
+    queryFn: async () => {
+      if (compareAddress(args?.contractAddress || '', zeroAddress)) {
+        const res = await getNativeTokenBalance(indexerClient, args.chainId, args.accountAddress)
+        return res
+      } else {
+        const res = await getTokenBalances(indexerClient, args)
+        return res[0]
+      }
+    },
+    retry: true,
+    staleTime: time.oneSecond * 30,
+    enabled: !!args.chainId && !!args.accountAddress
+  })
+}
+
+interface UseCollectibleBalanceArgs {
+  accountAddress: string
+  chainId: number
+  contractAddress: string
+  tokenId: string
+  verifiedOnly?: boolean
+}
+
+export const useCollectibleBalance = (args: UseCollectibleBalanceArgs) => {
+  const indexerClient = useIndexerClient(args.chainId)
+
+  return useQuery({
+    queryKey: ['collectibleBalance', args],
+    queryFn: async () => {
+      const res = await indexerClient.getTokenBalances({
+        accountAddress: args.accountAddress,
+        contractAddress: args.contractAddress,
+        tokenID: args.tokenId,
+        includeMetadata: true,
+        metadataOptions: {
+          verifiedOnly: args.verifiedOnly ?? true
+        }
+      })
+
+      return res.balances[0]
+    },
+    retry: true,
+    staleTime: time.oneSecond * 30,
+    enabled: !!args.chainId && !!args.accountAddress && !!args.contractAddress && !!args.tokenId
+  })
+}
+
 interface UseCollectionBalanceArgs {
   chainId: number
   accountAddress: string

packages/wallet/src/api/data.ts

@@ -354,37 +354,6 @@ export const fetchBalancesAssetsSummary = async (
   }
 }
 
-export interface GetCollectibleBalanceArgs {
-  accountAddress: string
-  chainId: number
-  collectionAddress: string
-  tokenId: string
-  verifiedOnly?: boolean
-}
-
-export const getCollectibleBalance = async ({
-  accountAddress,
-  chainId,
-  collectionAddress,
-  tokenId,
-  verifiedOnly
-}: GetCollectibleBalanceArgs) => {
-  const { indexerClient } = getNetworkConfigAndClients(chainId)
-
-  const res = await indexerClient.getTokenBalances({
-    accountAddress,
-    includeMetadata: true,
-    contractAddress: collectionAddress,
-    tokenID: tokenId,
-    metadataOptions: {
-      verifiedOnly: verifiedOnly ?? true
-    }
-  })
-  const tokenBalance = res.balances[0]
-
-  return tokenBalance
-}
-
 export interface GetTransactionHistoryArgs {
   chainId: number
   accountAddress: string

packages/wallet/src/hooks/data.ts

@@ -1,20 +1,12 @@
-import { ethers } from 'ethers'
 import { useQuery } from '@tanstack/react-query'
 import {
-  GetTokenBalancesArgs,
   fetchBalancesAssetsSummary,
-  getNativeToken,
-  getTokenBalances,
-  getCollectibleBalance,
-  GetCollectibleBalanceArgs,
   GetTokenBalancesOptions,
   FetchBalancesAssetsArgs,
   getTransactionHistorySummary,
   GetTransactionHistorySummaryArgs
 } from '../api/data'
 
-import { compareAddress } from '../utils/helpers'
-
 export const time = {
   oneSecond: 1 * 1000,
   oneMinute: 60 * 1000,
@@ -32,34 +24,6 @@ export const useBalancesAssetsSummary = (args: FetchBalancesAssetsArgs, options:
     enabled: args.chainIds.length > 0 && !!args.accountAddress
   })
 
-export const useCoinBalance = (args: GetTokenBalancesArgs, options: GetTokenBalancesOptions) =>
-  useQuery({
-    queryKey: ['coinBalance', args, options],
-    queryFn: () => {
-      if (compareAddress(args?.contractAddress || '', ethers.constants.AddressZero)) {
-        const response = getNativeToken({
-          accountAddress: args.accountAddress,
-          chainId: args.chainId
-        }).then(response => response[0])
-        return response
-      }
-      const response = getTokenBalances(args, options).then(response => response[0])
-      return response
-    },
-    retry: true,
-    staleTime: time.oneSecond * 30,
-    enabled: !!args.chainId && !!args.accountAddress
-  })
-
-export const useCollectibleBalance = (args: GetCollectibleBalanceArgs) =>
-  useQuery({
-    queryKey: ['collectibleBalance', args],
-    queryFn: () => getCollectibleBalance(args),
-    retry: true,
-    staleTime: time.oneSecond * 30,
-    enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress && !!args.tokenId
-  })
-
 export const useTransactionHistorySummary = (args: GetTransactionHistorySummaryArgs) =>
   useQuery({
     queryKey: ['transactionHistorySummary', args],

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

@@ -1,7 +1,13 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useTransactionHistory } from '@0xsequence/kit'
+import {
+  getNativeTokenInfoByChainId,
+  useExchangeRate,
+  useCoinPrices,
+  useTransactionHistory,
+  useCoinBalance
+} from '@0xsequence/kit'
 
 import { useAccount, useConfig } from 'wagmi'
 
@@ -10,7 +16,7 @@ import { CoinDetailsSkeleton } from './Skeleton'
 import { InfiniteScroll } from '../../shared/InfiniteScroll'
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { TransactionHistoryList } from '../../shared/TransactionHistoryList'
-import { useCoinBalance, useSettings, useNavigation } from '../../hooks'
+import { useSettings, useNavigation } from '../../hooks'
 import { HEADER_HEIGHT } from '../../constants'
 import { compareAddress, computeBalanceFiat, formatDisplay, flattenPaginatedTransactionHistory } from '../../utils'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -42,14 +48,12 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
 
   const transactionHistory = flattenPaginatedTransactionHistory(dataTransactionHistory)
 
-  const { data: dataCoinBalance, isPending: isPendingCoinBalance } = useCoinBalance(
-    {
-      accountAddress: accountAddress || '',
-      contractAddress,
-      chainId
-    },
-    { hideUnlistedTokens }
-  )
+  const { data: dataCoinBalance, isPending: isPendingCoinBalance } = useCoinBalance({
+    accountAddress: accountAddress || '',
+    contractAddress,
+    chainId,
+    verifiedOnly: hideUnlistedTokens
+  })
 
   const { data: dataCoinPrices, isPending: isPendingCoinPrices } = useCoinPrices([
     {

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

@@ -2,12 +2,18 @@ import React from 'react'
 import { ethers } from 'ethers'
 import { useAccount, useConfig } from 'wagmi'
 import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useExchangeRate, useTransactionHistory, useCollectiblePrices } from '@0xsequence/kit'
+import {
+  getNativeTokenInfoByChainId,
+  useExchangeRate,
+  useTransactionHistory,
+  useCollectiblePrices,
+  useCollectibleBalance
+} from '@0xsequence/kit'
 
 import { CollectibleDetailsSkeleton } from './Skeleton'
 
 import { computeBalanceFiat, formatDisplay, flattenPaginatedTransactionHistory } from '../../utils'
-import { useCollectibleBalance, useSettings, useNavigation } from '../../hooks'
+import { useSettings, useNavigation } from '../../hooks'
 import { InfiniteScroll } from '../../shared/InfiniteScroll'
 import { TransactionHistoryList } from '../../shared/TransactionHistoryList'
 import { CollectibleTileImage } from '../../shared/CollectibleTileImage'
@@ -44,7 +50,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
 
   const { data: dataCollectibleBalance, isPending: isPendingCollectibleBalance } = useCollectibleBalance({
     accountAddress: accountAddress || '',
-    collectionAddress: contractAddress,
+    contractAddress,
     chainId,
     tokenId,
     verifiedOnly: false

packages/wallet/src/views/SendCollectible.tsx

@@ -15,13 +15,13 @@ import {
   vars,
   Spinner
 } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useAnalyticsContext, ExtendedConnector } from '@0xsequence/kit'
-import { TokenBalance, Transaction } from '@0xsequence/indexer'
+import { getNativeTokenInfoByChainId, useAnalyticsContext, ExtendedConnector, useCollectibleBalance } from '@0xsequence/kit'
+import { TokenBalance } from '@0xsequence/indexer'
 import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
 
 import { SendItemInfo } from '../shared/SendItemInfo'
 import { ERC_1155_ABI, ERC_721_ABI, HEADER_HEIGHT } from '../constants'
-import { useCollectibleBalance, useNavigation, useOpenWalletModal } from '../hooks'
+import { useNavigation, useOpenWalletModal } from '../hooks'
 import { limitDecimals, isEthAddress, truncateAtMiddle } from '../utils'
 import * as sharedStyles from '../shared/styles.css'
 
@@ -50,9 +50,9 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
   const { sendTransaction } = useSendTransaction()
   const [isSendTxnPending, setIsSendTxnPending] = useState(false)
   const { data: tokenBalance, isPending: isPendingBalances } = useCollectibleBalance({
-    accountAddress: accountAddress,
+    accountAddress,
     chainId,
-    collectionAddress: contractAddress,
+    contractAddress,
     tokenId,
     verifiedOnly: false
   })