convert hooks to use pagination (#396)

* draft useGetTokenBalancesSummaryPagination

* fix: change over necessary hooks to useInfiniteQuery

* feat: reimplemented hooks calls to use new format

* fix: readded fiat sign to home,
fix: added full border radius to collections filter 'All' selection

* feat: removed hideCollectibles setting,
fix: changed get single token hook to use details

* fix: specified tokenId in SendCollectible,
feat: renamed useGetSingleTokenBalanceSummary to useGetSingleTokenBalance

* fix: added check to return nativeBalance only on first page call for useGetTokenBalancesSummary/Details

* replaced isPending with isLoading; fixed paginated query in custom checkout hook

---------

Co-authored-by: samuelea <[email protected]>

Author: andrewlee348

packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx

@@ -102,7 +102,7 @@ export const useCryptoPayment = ({
 
   const isApproved: boolean = (allowanceData as bigint) >= BigInt(totalPriceRaw) || isNativeCurrency
 
-  const { data: currencyBalanceData, isLoading: currencyBalanceIsLoading } = useGetTokenBalancesSummary({
+  const { data: currencyBalanceDataPaginated, isLoading: currencyBalanceIsLoading } = useGetTokenBalancesSummary({
     chainIds: [chainId],
     filter: {
       accountAddresses: userAddress ? [userAddress] : [],
@@ -113,6 +113,8 @@ export const useCryptoPayment = ({
     omitMetadata: true
   })
 
+  const currencyBalanceData = currencyBalanceDataPaginated?.pages?.flatMap(page => page.balances)
+
   const buyCurrencyAddress = currencyAddress
   const sellCurrencyAddress = selectedCurrencyAddress || ''
 

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

@@ -11,18 +11,18 @@ interface OrderSummaryItem {
 }
 
 export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainId }: OrderSummaryItem) => {
-  const { data: tokenMetadata, isPending: isPendingTokenMetadata } = useGetTokenMetadata({
+  const { data: tokenMetadata, isLoading: isLoadingTokenMetadata } = useGetTokenMetadata({
     chainID: String(chainId),
     contractAddress,
     tokenIDs: [tokenId]
   })
-  const { data: contractInfo, isPending: isPendingContractInfo } = useGetContractInfo({
+  const { data: contractInfo, isLoading: isLoadingContractInfo } = useGetContractInfo({
     chainID: String(chainId),
     contractAddress
   })
-  const isPending = isPendingTokenMetadata || isPendingContractInfo
+  const isLoading = isLoadingTokenMetadata || isLoadingContractInfo
 
-  if (isPending) {
+  if (isLoading) {
     return <OrderSummarySkeleton />
   }
 

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

@@ -11,6 +11,7 @@ import {
   TokenImage
 } from '@0xsequence/design-system'
 import { useGetTokenBalancesSummary, useGetContractInfo } from '@0xsequence/hooks'
+import { useEffect } from 'react'
 import { zeroAddress, formatUnits } from 'viem'
 import { useAccount, useConfig } from 'wagmi'
 
@@ -30,31 +31,44 @@ export const CheckoutSelection = () => {
   const displayCreditCardCheckout = !!creditCardCheckoutSettings
   const displayCryptoCheckout = !!cryptoCheckoutSettings
 
-  const { data: contractInfoData, isLoading: isPendingContractInfo } = useGetContractInfo({
+  const { data: contractInfoData, isLoading: isLoadingContractInfo } = useGetContractInfo({
     chainID: String(cryptoCheckoutSettings?.chainId || 1),
     contractAddress: cryptoCheckoutSettings?.coinQuantity?.contractAddress || ''
   })
 
-  const { data: balancesData, isPending: isPendingBalances } = useGetTokenBalancesSummary({
+  const {
+    data: balancesData,
+    isLoading: isLoadingBalances,
+    fetchNextPage: fetchNextBalances,
+    hasNextPage: hasNextPageBalances,
+    isFetchingNextPage: isFetchingNextPageBalances
+  } = useGetTokenBalancesSummary({
     chainIds: [cryptoCheckoutSettings?.chainId || 1],
     filter: {
       accountAddresses: accountAddress ? [accountAddress] : [],
       contractStatus: ContractVerificationStatus.ALL,
       omitNativeBalances: false
-    }
+    },
+    page: { pageSize: 40 }
   })
 
-  const isPending = (isPendingContractInfo || isPendingBalances) && cryptoCheckoutSettings
+  useEffect(() => {
+    if (hasNextPageBalances && !isFetchingNextPageBalances) {
+      fetchNextBalances()
+    }
+  }, [hasNextPageBalances, isFetchingNextPageBalances])
+
+  const isLoading = (isLoadingContractInfo || isLoadingBalances || isFetchingNextPageBalances) && cryptoCheckoutSettings
 
   const isNativeToken = compareAddress(cryptoCheckoutSettings?.coinQuantity?.contractAddress || '', zeroAddress)
   const nativeTokenInfo = getNativeTokenInfoByChainId(cryptoCheckoutSettings?.chainId || 1, chains)
 
   const coinDecimals = isNativeToken ? nativeTokenInfo.decimals : contractInfoData?.decimals || 0
   const coinSymbol = isNativeToken ? nativeTokenInfo.symbol : contractInfoData?.symbol || 'COIN'
   const coinImageUrl = isNativeToken ? nativeTokenInfo.logoURI : contractInfoData?.logoURI || ''
-  const coinBalance = balancesData?.find(balance =>
-    compareAddress(balance.contractAddress, cryptoCheckoutSettings?.coinQuantity?.contractAddress || '')
-  )
+  const coinBalance = balancesData?.pages
+    ?.flatMap(page => page.balances)
+    .find(balance => compareAddress(balance.contractAddress, cryptoCheckoutSettings?.coinQuantity?.contractAddress || ''))
   const userBalanceRaw = coinBalance ? coinBalance.balance : '0'
   const requestedAmountRaw = cryptoCheckoutSettings?.coinQuantity?.amountRequiredRaw || '0'
   const userBalance = formatUnits(BigInt(userBalanceRaw), coinDecimals)
@@ -142,7 +156,7 @@ export const CheckoutSelection = () => {
           <Text variant="normal" color="muted">
             Total
           </Text>
-          {isPending ? (
+          {isLoading ? (
             <Skeleton style={{ width: '100px', height: '17px' }} />
           ) : (
             <div className="flex flex-row gap-1 items-center">
@@ -165,7 +179,7 @@ export const CheckoutSelection = () => {
             onClick={onClickPayWithCard}
           />
         )}
-        {displayCryptoCheckout && !isInsufficientBalance && !isPending && (
+        {displayCryptoCheckout && !isInsufficientBalance && !isLoading && (
           <Button
             className="w-full h-14 rounded-xl"
             leftIcon={() => <TokenImage src={coinImageUrl} size="sm" />}
@@ -175,7 +189,7 @@ export const CheckoutSelection = () => {
             onClick={onClickPayWithCrypto}
           />
         )}
-        {displayCryptoCheckout && (isInsufficientBalance || isPending) && (
+        {displayCryptoCheckout && (isInsufficientBalance || isLoading) && (
           <Button
             className="w-full"
             shape="square"
@@ -193,7 +207,7 @@ export const CheckoutSelection = () => {
       </div>
       {displayCryptoCheckout && (
         <div className="flex w-full justify-end">
-          {isPending ? (
+          {isLoading ? (
             <Skeleton style={{ width: '102px', height: '14px' }} />
           ) : (
             <Text variant="small" fontWeight="bold" color="muted">

packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx

@@ -35,17 +35,30 @@ export const PayWithCrypto = ({
   const network = findSupportedNetwork(chain)
   const chainId = network?.chainId || 137
 
-  const { data: currencyBalanceData, isLoading: currencyBalanceIsLoading } = useGetTokenBalancesSummary({
+  const {
+    data: currencyBalanceData,
+    isLoading: currencyBalanceIsLoading,
+    fetchNextPage: fetchNextCurrencyBalance,
+    hasNextPage: hasNextCurrencyBalance,
+    isFetchingNextPage: isFetchingNextCurrencyBalance
+  } = useGetTokenBalancesSummary({
     chainIds: [chainId],
     filter: {
       accountAddresses: userAddress ? [userAddress] : [],
       contractStatus: ContractVerificationStatus.ALL,
       contractWhitelist: [currencyAddress],
       omitNativeBalances: skipNativeBalanceCheck ?? false
     },
-    omitMetadata: true
+    omitMetadata: true,
+    page: { pageSize: 40 }
   })
 
+  useEffect(() => {
+    if (hasNextCurrencyBalance && !isFetchingNextCurrencyBalance) {
+      fetchNextCurrencyBalance()
+    }
+  }, [hasNextCurrencyBalance, isFetchingNextCurrencyBalance])
+
   const { data: currencyInfoData, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
     chainID: String(chainId),
     contractAddress: currencyAddress
@@ -64,7 +77,7 @@ export const PayWithCrypto = ({
     { disabled: !enableSwapPayments }
   )
 
-  const isLoadingOptions = currencyBalanceIsLoading || isLoadingCurrencyInfo || isLoading
+  const isLoadingOptions = currencyBalanceIsLoading || isFetchingNextCurrencyBalance || isLoadingCurrencyInfo || isLoading
 
   const swapsIsLoading = swapPricesIsLoading
 
@@ -114,7 +127,9 @@ export const PayWithCrypto = ({
     significantDigits: 6
   })
 
-  const balanceInfo = currencyBalanceData?.find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))
+  const balanceInfo = currencyBalanceData?.pages
+    ?.flatMap(page => page.balances)
+    .find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))
 
   const balance: bigint = BigInt(balanceInfo?.balance || '0')
   // let balanceFormatted = Number(formatUnits(balance, currencyInfoData?.decimals || 0))

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

@@ -1,14 +1,7 @@
-import {
-  useAnalyticsContext,
-  compareAddress,
-  TRANSACTION_CONFIRMATIONS_DEFAULT,
-  sendTransactions,
-  ContractVerificationStatus
-} from '@0xsequence/connect'
+import { useAnalyticsContext, compareAddress, TRANSACTION_CONFIRMATIONS_DEFAULT, sendTransactions } from '@0xsequence/connect'
 import { Button, Divider, Text, Spinner } from '@0xsequence/design-system'
 import {
   useClearCachedBalances,
-  useGetTokenBalancesSummary,
   useGetContractInfo,
   SwapPricesWithCurrencyInfo,
   useGetSwapPrices,
@@ -72,8 +65,7 @@ export const PaymentSelectionContent = () => {
     onSuccess = () => {},
     onError = () => {},
     onClose = () => {},
-    supplementaryAnalyticsInfo,
-    skipNativeBalanceCheck
+    supplementaryAnalyticsInfo
   } = selectPaymentSettings
 
   const isNativeToken = compareAddress(currencyAddress, zeroAddress)
@@ -104,18 +96,6 @@ export const PaymentSelectionContent = () => {
     }
   })
 
-  const { data: _currencyBalanceData, isLoading: currencyBalanceIsLoading } = useGetTokenBalancesSummary({
-    chainIds: [chainId],
-    filter: {
-      accountAddresses: userAddress ? [userAddress] : [],
-      contractStatus: ContractVerificationStatus.ALL,
-      contractWhitelist: [currencyAddress],
-      omitNativeBalances: skipNativeBalanceCheck ?? false
-    },
-    // omitMetadata must be true to avoid a bug
-    omitMetadata: true
-  })
-
   const { data: _currencyInfoData, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
     chainID: String(chainId),
     contractAddress: currencyAddress
@@ -151,15 +131,10 @@ export const PaymentSelectionContent = () => {
     }
   )
 
-  const isLoading = (allowanceIsLoading && !isNativeToken) || currencyBalanceIsLoading || isLoadingCurrencyInfo
+  const isLoading = (allowanceIsLoading && !isNativeToken) || isLoadingCurrencyInfo
 
   const isApproved: boolean = (allowanceData as bigint) >= BigInt(price) || isNativeToken
 
-  // const balanceInfo = currencyBalanceData?.find(balanceData => compareAddress(currencyAddress, balanceData.contractAddress))
-  // const balance: bigint = BigInt(balanceInfo?.balance || '0')
-  // let balanceFormatted = Number(formatUnits(balance, currencyInfoData?.decimals || 0))
-  // balanceFormatted = Math.trunc(Number(balanceFormatted) * 10000) / 10000
-
   useEffect(() => {
     clearCachedBalances()
   }, [])

packages/connect/src/components/TxnDetails/TxnDetails.tsx

@@ -1,7 +1,7 @@
 import { commons } from '@0xsequence/core'
 import { Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
-import { useAPIClient, useGetTokenBalancesSummary, useGetTokenMetadata } from '@0xsequence/hooks'
-import { ContractType, ContractVerificationStatus } from '@0xsequence/indexer'
+import { useAPIClient, useGetSingleTokenBalance, useGetTokenMetadata } from '@0xsequence/hooks'
+import { ContractType } from '@0xsequence/indexer'
 import { useEffect, useState } from 'react'
 import { formatUnits, zeroAddress } from 'viem'
 import { useConfig } from 'wagmi'
@@ -93,14 +93,10 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
   const isNFT = transferProps.contractType === ContractType.ERC1155 || transferProps.contractType === ContractType.ERC721
   const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
 
-  const { data: balances = [] } = useGetTokenBalancesSummary({
-    chainIds: [chainId],
-    filter: {
-      accountAddresses: [address],
-      contractStatus: ContractVerificationStatus.ALL,
-      contractWhitelist: [contractAddress],
-      omitNativeBalances: false
-    }
+  const { data: tokenBalance } = useGetSingleTokenBalance({
+    chainId,
+    contractAddress,
+    accountAddress: address
   })
 
   const { data: tokenMetadata } = useGetTokenMetadata({
@@ -109,7 +105,6 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP
     tokenIDs: transferProps.tokenIds ?? []
   })
 
-  const tokenBalance = contractAddress ? balances.find(b => compareAddress(b.contractAddress, contractAddress)) : undefined
   const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18
 
   const imageUrl = isNativeCoin