From d017e3fbb134d8b2c990907d709e841c54ff02d7 Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Tue, 30 Apr 2024 17:02:09 -0400 Subject: [PATCH] Move useCoinBalance and useCollectibleBalance into kit package --- packages/kit/src/hooks/data.ts | 59 ++++++++++++++++++- packages/wallet/src/api/data.ts | 31 ---------- packages/wallet/src/hooks/data.ts | 36 ----------- .../wallet/src/views/CoinDetails/index.tsx | 24 ++++---- .../src/views/CollectibleDetails/index.tsx | 12 +++- packages/wallet/src/views/SendCollectible.tsx | 10 ++-- 6 files changed, 86 insertions(+), 86 deletions(-) diff --git a/packages/kit/src/hooks/data.ts b/packages/kit/src/hooks/data.ts index af3a741e..9ef84d1d 100644 --- a/packages/kit/src/hooks/data.ts +++ b/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 diff --git a/packages/wallet/src/api/data.ts b/packages/wallet/src/api/data.ts index d14e6b95..72da4aed 100644 --- a/packages/wallet/src/api/data.ts +++ b/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 diff --git a/packages/wallet/src/hooks/data.ts b/packages/wallet/src/hooks/data.ts index 069db798..98e9c93c 100644 --- a/packages/wallet/src/hooks/data.ts +++ b/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], diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx index fe30420f..af6f97b6 100644 --- a/packages/wallet/src/views/CoinDetails/index.tsx +++ b/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([ { diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx index 61bc0a49..85fd683c 100644 --- a/packages/wallet/src/views/CollectibleDetails/index.tsx +++ b/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 diff --git a/packages/wallet/src/views/SendCollectible.tsx b/packages/wallet/src/views/SendCollectible.tsx index 2a9cf217..4c034e0f 100644 --- a/packages/wallet/src/views/SendCollectible.tsx +++ b/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 })