Move useCollectionBalance to kit package

packages/checkout/src/api/data.ts

@@ -73,38 +73,6 @@ export const fetchBalances = async ({ accountAddress, chainId }: GetTokenBalance
   }
 }
 
-export interface GetCollectionBalanceArgs {
-  accountAddress: string
-  chainId: number
-  collectionAddress: string
-  verifiedOnly?: boolean
-}
-
-export const fetchCollectionBalance = async ({
-  accountAddress,
-  chainId,
-  collectionAddress,
-  verifiedOnly
-}: GetCollectionBalanceArgs) => {
-  try {
-    const { indexerClient } = getNetworkConfigAndClients(chainId)
-
-    const res = await indexerClient.getTokenBalances({
-      accountAddress,
-      includeMetadata: true,
-      contractAddress: collectionAddress,
-      metadataOptions: {
-        verifiedOnly: verifiedOnly ?? true
-      }
-    })
-
-    return res?.balances || []
-  } catch (e) {
-    console.error(e)
-    return []
-  }
-}
-
 export interface FetchPaperSecretArgs {
   chainId: number
   email: string

packages/checkout/src/hooks/data.ts

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query'
 import { TokenBalance } from '@0xsequence/indexer'
 
-import { fetchBalances, GetTokenBalancesArgs, fetchCollectionBalance, GetCollectionBalanceArgs } from '../api/data'
+import { fetchBalances, GetTokenBalancesArgs } from '../api/data'
 
 export const time = {
   oneSecond: 1 * 1000,
@@ -17,12 +17,3 @@ export const useBalances = (args: GetTokenBalancesArgs): UseQueryResult<TokenBal
     staleTime: 10 * time.oneMinute,
     enabled: !!args.chainId && !!args.accountAddress
   })
-
-export const useCollectionBalance = (args: GetCollectionBalanceArgs) =>
-  useQuery({
-    queryKey: ['collectionBalance', args],
-    queryFn: () => fetchCollectionBalance(args),
-    retry: true,
-    staleTime: 10 * time.oneMinute,
-    enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress
-  })

packages/kit/src/hooks/data.ts

@@ -1,15 +1,47 @@
-import { GetCoinPricesArgs, GetExchangeRateArgs, SequenceAPIClient, Token } from '@0xsequence/api'
+import { Token } from '@0xsequence/api'
 import { useQuery } from '@tanstack/react-query'
 
 import { useMetadataClient } from './useMetadataClient'
 import { useAPIClient } from './useAPIClient'
+import { useIndexerClient } from './useIndexerClient'
 
 export const time = {
   oneSecond: 1 * 1000,
   oneMinute: 60 * 1000,
   oneHour: 60 * 60 * 1000
 }
 
+interface UseCollectionBalanceArgs {
+  chainId: number
+  accountAddress: string
+  contractAddress: string
+  includeMetadata?: boolean
+  verifiedOnly?: boolean
+}
+
+export const useCollectionBalance = (args: UseCollectionBalanceArgs) => {
+  const indexerClient = useIndexerClient(args.chainId)
+
+  return useQuery({
+    queryKey: ['collectionBalance', args],
+    queryFn: async () => {
+      const res = await indexerClient.getTokenBalances({
+        accountAddress: args.accountAddress,
+        contractAddress: args.contractAddress,
+        includeMetadata: args.includeMetadata ?? true,
+        metadataOptions: {
+          verifiedOnly: args.verifiedOnly ?? true
+        }
+      })
+
+      return res?.balances || []
+    },
+    retry: true,
+    staleTime: time.oneSecond * 30,
+    enabled: !!args.chainId && !!args.accountAddress && !!args.contractAddress
+  })
+}
+
 // From USD to another currency
 export const useExchangeRate = (toCurrency: string) => {
   const apiClient = useAPIClient()

packages/wallet/src/api/data.ts

@@ -1,4 +1,4 @@
-import { ContractInfo, GetContractInfoArgs, GetContractInfoBatchReturn, TokenMetadata } from '@0xsequence/metadata'
+import { GetContractInfoBatchReturn } from '@0xsequence/metadata'
 import { Token, TokenPrice } from '@0xsequence/api'
 import { TokenBalance, ContractType, Page, GetTransactionHistoryReturn, Transaction } from '@0xsequence/indexer'
 import { ethers } from 'ethers'
@@ -176,6 +176,7 @@ export const fetchCollectionBalance = async ({
     return []
   }
 }
+
 export interface FetchBalancesAssetsArgs {
   accountAddress: string
   chainIds: number[]

packages/wallet/src/hooks/data.ts

@@ -45,15 +45,6 @@ export const useBalances = (args: UseBalancesArgs, options: GetTokenBalancesOpti
     enabled: args.chainIds.length > 0 && !!args.accountAddress
   })
 
-export const useCollectionBalance = (args: GetCollectionBalanceArgs) =>
-  useQuery({
-    queryKey: ['collectionBalance', args],
-    queryFn: () => fetchCollectionBalance(args),
-    retry: true,
-    staleTime: time.oneSecond * 30,
-    enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress
-  })
-
 export const useBalancesAssetsSummary = (args: FetchBalancesAssetsArgs, options: GetTokenBalancesOptions) =>
   useQuery({
     queryKey: ['balancesAssetsSummary', args, options],

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

@@ -2,13 +2,14 @@ import React from 'react'
 import { TokenBalance } from '@0xsequence/indexer'
 import { ethers } from 'ethers'
 import { Box, Image, Text, 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 { useCollectionBalance, useNavigation } from '../../hooks'
+import { useNavigation } from '../../hooks'
 import { formatDisplay } from '../../utils'
 
 import * as sharedStyles from '../../shared/styles.css'
@@ -25,7 +26,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
   const { data: collectionBalanceData, isPending: isPendingCollectionBalance } = useCollectionBalance({
     chainId,
     accountAddress: accountAddress || '',
-    collectionAddress: contractAddress
+    contractAddress
   })
   const scrollbarWidth = useScrollbarWidth()