Move getCollectiblePrices to kit package

0xsequence · Apr 30, 2024 · 6eaeecc · 6eaeecc
1 parent 0ef9f91
commit 6eaeecc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 62 deletions.
diff --git a/packages/kit/src/hooks/data.ts b/packages/kit/src/hooks/data.ts
@@ -145,16 +145,6 @@ export const useExchangeRate = (toCurrency: string) => {
   })
 }
 
-// const getCoinPrices = async (apiClient: SequenceAPIClient, tokens: Token[]) => {
-//   if (args.tokens.length === 0) {
-//     return []
-//   }
-
-//   const res = await apiClient.getCoinPrices(args)
-
-//   return res?.tokenPrices || []
-// }
-
 export const useCoinPrices = (tokens: Token[]) => {
   const apiClient = useAPIClient()
 
@@ -175,6 +165,26 @@ export const useCoinPrices = (tokens: Token[]) => {
   })
 }
 
+export const useCollectiblePrices = (tokens: Token[]) => {
+  const apiClient = useAPIClient()
+
+  return useQuery({
+    queryKey: ['useCollectiblePrices', tokens],
+    queryFn: async () => {
+      if (tokens.length === 0) {
+        return []
+      }
+
+      const res = await apiClient.getCollectiblePrices({ tokens })
+
+      return res?.tokenPrices || []
+    },
+    retry: true,
+    staleTime: time.oneMinute,
+    enabled: tokens.length > 0
+  })
+}
+
 export const useTokenMetadata = (chainId: number, contractAddress: string, tokenIds: string[]) => {
   const metadataClient = useMetadataClient()
 

diff --git a/packages/wallet/src/api/data.ts b/packages/wallet/src/api/data.ts
@@ -385,28 +385,6 @@ export const getCollectibleBalance = async ({
   return tokenBalance
 }
 
-export interface GetCollectiblePricesArgs {
-  tokens: Token[]
-}
-
-export const getCollectiblePrices = async ({ tokens }: GetCollectiblePricesArgs) => {
-  try {
-    if (tokens.length === 0) return []
-    const chainId = tokens[0].chainId
-
-    const { apiClient } = await getNetworkConfigAndClients(chainId)
-
-    const res = await apiClient.getCollectiblePrices({
-      tokens
-    })
-
-    return res?.tokenPrices || []
-  } catch (e) {
-    console.error(e)
-    return
-  }
-}
-
 export interface GetTransactionHistoryArgs {
   chainId: number
   accountAddress: string

diff --git a/packages/wallet/src/hooks/data.ts b/packages/wallet/src/hooks/data.ts
@@ -1,16 +1,12 @@
 import { ethers } from 'ethers'
-import { useQuery, useInfiniteQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import {
   GetTokenBalancesArgs,
   fetchBalancesAssetsSummary,
   getNativeToken,
   getTokenBalances,
   getCollectibleBalance,
   GetCollectibleBalanceArgs,
-  getCollectiblePrices,
-  GetCollectiblePricesArgs,
-  getTransactionHistory,
-  GetTransactionHistoryArgs,
   GetTokenBalancesOptions,
   FetchBalancesAssetsArgs,
   getTransactionHistorySummary,
@@ -64,15 +60,6 @@ export const useCollectibleBalance = (args: GetCollectibleBalanceArgs) =>
     enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress && !!args.tokenId
   })
 
-export const useCollectiblePrices = (args: GetCollectiblePricesArgs) =>
-  useQuery({
-    queryKey: ['useCollectiblePrices', args],
-    queryFn: () => getCollectiblePrices(args),
-    retry: true,
-    staleTime: time.oneMinute,
-    enabled: args.tokens.length > 0
-  })
-
 export const useTransactionHistorySummary = (args: GetTransactionHistorySummaryArgs) =>
   useQuery({
     queryKey: ['transactionHistorySummary', args],

diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -2,12 +2,12 @@ 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 } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId, useExchangeRate, useTransactionHistory, useCollectiblePrices } from '@0xsequence/kit'
 
 import { CollectibleDetailsSkeleton } from './Skeleton'
 
 import { computeBalanceFiat, formatDisplay, flattenPaginatedTransactionHistory } from '../../utils'
-import { useCollectiblePrices, useCollectibleBalance, useSettings, useNavigation } from '../../hooks'
+import { useCollectibleBalance, useSettings, useNavigation } from '../../hooks'
 import { InfiniteScroll } from '../../shared/InfiniteScroll'
 import { TransactionHistoryList } from '../../shared/TransactionHistoryList'
 import { CollectibleTileImage } from '../../shared/CollectibleTileImage'
@@ -50,15 +50,13 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
     verifiedOnly: false
   })
 
-  const { data: dataCollectiblePrices, isPending: isPendingCollectiblePrices } = useCollectiblePrices({
-    tokens: [
-      {
-        chainId,
-        contractAddress,
-        tokenId
-      }
-    ]
-  })
+  const { data: dataCollectiblePrices, isPending: isPendingCollectiblePrices } = useCollectiblePrices([
+    {
+      chainId,
+      contractAddress,
+      tokenId
+    }
+  ])
 
   const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol)
 

diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -3,7 +3,7 @@ import { ethers } from 'ethers'
 import { Token } from '@0xsequence/api'
 import { Transaction, TxnTransfer } from '@0xsequence/indexer'
 import { ArrowRightIcon, Box, Button, Divider, GradientAvatar, Image, LinkIcon, Text } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
 
@@ -12,7 +12,7 @@ import { CopyButton } from '../../shared/CopyButton'
 import { NetworkBadge } from '../../shared/NetworkBadge'
 import { Skeleton } from '../../shared/Skeleton'
 import { compareAddress, formatDisplay } from '../../utils'
-import { useCollectiblePrices, useSettings } from '../../hooks'
+import { useSettings } from '../../hooks'
 
 interface TransactionDetailProps {
   transaction: Transaction
@@ -57,9 +57,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
 
   const { data: coinPricesData, isPending: isPendingCoinPrices } = useCoinPrices(coins)
 
-  const { data: collectiblePricesData, isPending: isPendingCollectiblePrices } = useCollectiblePrices({
-    tokens: collectibles
-  })
+  const { data: collectiblePricesData, isPending: isPendingCollectiblePrices } = useCollectiblePrices(collectibles)
 
   const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol)