diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts index 3e7c506f..0bcf1f2d 100644 --- a/packages/checkout/src/api/data.ts +++ b/packages/checkout/src/api/data.ts @@ -1,7 +1,5 @@ -import { Token, TokenPrice } from '@0xsequence/api' import { getNetworkConfigAndClients } from '@0xsequence/kit' import { TokenBalance, ContractType } from '@0xsequence/indexer' -import { GetContractInfoArgs, ContractInfo, TokenMetadata } from '@0xsequence/metadata' import { ethers } from 'ethers' import { getPaperNetworkName } from '../utils' @@ -107,28 +105,6 @@ export const fetchCollectionBalance = async ({ } } -export interface GetCoinPricesArgs { - tokens: Token[] -} - -export const getCoinPrices = async ({ tokens }: GetCoinPricesArgs): Promise => { - try { - if (tokens.length === 0) return [] - const chainId = tokens[0].chainId - - const { apiClient } = getNetworkConfigAndClients(chainId) - - const res = await apiClient.getCoinPrices({ - tokens - }) - - return res?.tokenPrices || [] - } catch (e) { - console.error(e) - return - } -} - export interface FetchPaperSecretArgs { chainId: number email: string diff --git a/packages/checkout/src/hooks/data.ts b/packages/checkout/src/hooks/data.ts index 5fcadf90..a8d605b4 100644 --- a/packages/checkout/src/hooks/data.ts +++ b/packages/checkout/src/hooks/data.ts @@ -1,15 +1,7 @@ import { useQuery, UseQueryResult } from '@tanstack/react-query' -import { TokenPrice } from '@0xsequence/api' import { TokenBalance } from '@0xsequence/indexer' -import { - fetchBalances, - GetTokenBalancesArgs, - fetchCollectionBalance, - GetCollectionBalanceArgs, - getCoinPrices, - GetCoinPricesArgs -} from '../api/data' +import { fetchBalances, GetTokenBalancesArgs, fetchCollectionBalance, GetCollectionBalanceArgs } from '../api/data' export const time = { oneSecond: 1 * 1000, @@ -34,12 +26,3 @@ export const useCollectionBalance = (args: GetCollectionBalanceArgs) => staleTime: 10 * time.oneMinute, enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress }) - -export const useCoinPrices = (args: GetCoinPricesArgs): UseQueryResult => - useQuery({ - queryKey: ['coinPrices', args], - queryFn: () => getCoinPrices(args), - retry: true, - staleTime: 1 * time.oneMinute, - enabled: args.tokens.length > 0 - }) diff --git a/packages/kit/src/hooks/data.ts b/packages/kit/src/hooks/data.ts index 63c2aebf..44b22036 100644 --- a/packages/kit/src/hooks/data.ts +++ b/packages/kit/src/hooks/data.ts @@ -1,4 +1,4 @@ -import { GetCoinPricesArgs, GetExchangeRateArgs } from '@0xsequence/api' +import { GetCoinPricesArgs, GetExchangeRateArgs, SequenceAPIClient, Token } from '@0xsequence/api' import { useQuery } from '@tanstack/react-query' import { useMetadataClient } from './useMetadataClient' @@ -25,29 +25,38 @@ export const useExchangeRate = (toCurrency: string) => { return res.exchangeRate.value }, - initialData: 1, retry: true, staleTime: time.oneMinute * 10 }) } -export const useCoinPrices = (args: GetCoinPricesArgs) => { +// 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() return useQuery({ - queryKey: ['coinPrices', args], + queryKey: ['coinPrices', tokens], queryFn: async () => { - if (args.tokens.length === 0) { + if (tokens.length === 0) { return [] } - const res = await apiClient.getCoinPrices(args) + const res = await apiClient.getCoinPrices({ tokens }) return res?.tokenPrices || [] }, retry: true, staleTime: time.oneMinute, - enabled: args.tokens.length > 0 + enabled: tokens.length > 0 }) } diff --git a/packages/kit/src/utils/genericContext.ts b/packages/kit/src/utils/genericContext.ts index d16e6aa3..0ca6a4c9 100644 --- a/packages/kit/src/utils/genericContext.ts +++ b/packages/kit/src/utils/genericContext.ts @@ -2,7 +2,7 @@ import { useContext, createContext } from 'react' // https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947 -export const createGenericContext = () => { +export const createGenericContext = () => { // Create a context with a generic parameter or undefined const genericContext = createContext(undefined) diff --git a/packages/wallet/src/hooks/data.ts b/packages/wallet/src/hooks/data.ts index 07219fa3..8ceb9276 100644 --- a/packages/wallet/src/hooks/data.ts +++ b/packages/wallet/src/hooks/data.ts @@ -5,8 +5,6 @@ import { GetTokenBalancesArgs, fetchCollectionBalance, GetCollectionBalanceArgs, - getCoinPrices, - GetCoinPricesArgs, fetchBalancesAssetsSummary, getNativeToken, getTokenBalances, @@ -56,15 +54,6 @@ export const useCollectionBalance = (args: GetCollectionBalanceArgs) => enabled: !!args.chainId && !!args.accountAddress && !!args.collectionAddress }) -export const useCoinPrices = ({ disabled, ...args }: GetCoinPricesArgs & { disabled?: boolean }) => - useQuery({ - queryKey: ['coinPrices', args], - queryFn: () => getCoinPrices(args), - retry: true, - staleTime: time.oneSecond * 30, - enabled: args.tokens.length > 0 && !disabled - }) - export const useBalancesAssetsSummary = (args: FetchBalancesAssetsArgs, options: GetTokenBalancesOptions) => useQuery({ queryKey: ['balancesAssetsSummary', args, options], diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx index 89456527..0638b518 100644 --- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx +++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx @@ -2,14 +2,14 @@ import React from 'react' import { TokenPrice } from '@0xsequence/api' import { ethers } from 'ethers' import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer' -import { getNativeTokenInfoByChainId, useExchangeRate } from '@0xsequence/kit' +import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit' import { ArrowRightIcon, Box, Text, Image, SendIcon, ReceiveIcon, TransactionIcon, vars } from '@0xsequence/design-system' import dayjs from 'dayjs' import { useConfig } from 'wagmi' import * as sharedStyles from '../../shared/styles.css' import { Skeleton } from '../../shared/Skeleton' -import { useCoinPrices, useSettings, useNavigation } from '../../hooks' +import { useSettings, useNavigation } from '../../hooks' import { formatDisplay, compareAddress } from '../../utils' interface TransactionHistoryItemProps { @@ -39,12 +39,12 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr } }) - const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: tokenContractAddresses.map(contractAddress => ({ + const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices( + tokenContractAddresses.map(contractAddress => ({ contractAddress, chainId: transaction.chainId })) - }) + ) const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol) diff --git a/packages/wallet/src/utils/genericContext.ts b/packages/wallet/src/utils/genericContext.ts index 1833463e..453a6e9a 100644 --- a/packages/wallet/src/utils/genericContext.ts +++ b/packages/wallet/src/utils/genericContext.ts @@ -2,7 +2,7 @@ import { createContext, useContext } from 'react' // https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947 -export const createGenericContext = () => { +export const createGenericContext = () => { // Create a context with a generic parameter or undefined const genericContext = createContext(undefined) diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx index 367adc49..b444fe17 100644 --- a/packages/wallet/src/views/CoinDetails/index.tsx +++ b/packages/wallet/src/views/CoinDetails/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { ethers } from 'ethers' -import { Box, Button, Image, SendIcon, Text, vars } from '@0xsequence/design-system' -import { getNativeTokenInfoByChainId, useExchangeRate } from '@0xsequence/kit' +import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system' +import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices } from '@0xsequence/kit' import { useAccount, useConfig } from 'wagmi' @@ -10,7 +10,7 @@ import { CoinDetailsSkeleton } from './Skeleton' import { InfiniteScroll } from '../../shared/InfiniteScroll' import { NetworkBadge } from '../../shared/NetworkBadge' import { TransactionHistoryList } from '../../shared/TransactionHistoryList' -import { useCoinBalance, useSettings, useCoinPrices, useTransactionHistory, useNavigation } from '../../hooks' +import { useCoinBalance, useSettings, useTransactionHistory, useNavigation } from '../../hooks' import { HEADER_HEIGHT } from '../../constants' import { compareAddress, computeBalanceFiat, formatDisplay, flattenPaginatedTransactionHistory } from '../../utils' import { useScrollbarWidth } from '../../hooks/useScrollbarWidth' @@ -51,14 +51,12 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => { { hideUnlistedTokens } ) - const { data: dataCoinPrices, isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: [ - { - chainId, - contractAddress - } - ] - }) + const { data: dataCoinPrices, isPending: isPendingCoinPrices } = useCoinPrices([ + { + chainId, + contractAddress + } + ]) const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol) diff --git a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx index d9750bee..7df434bb 100644 --- a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx +++ b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/index.tsx @@ -6,11 +6,11 @@ import { TokenBalance } from '@0xsequence/indexer' import { CoinTileContent } from './CoinTileContent' -import { getNativeTokenInfoByChainId, useContractInfo, useExchangeRate } from '@0xsequence/kit' +import { getNativeTokenInfoByChainId, useContractInfo, useExchangeRate, useCoinPrices } from '@0xsequence/kit' import { computeBalanceFiat, formatDisplay, getPercentagePriceChange, compareAddress } from '../../../../../utils' -import { useCoinPrices, useSettings } from '../../../../../hooks' +import { useSettings } from '../../../../../hooks' interface CoinTileProps { balance: TokenBalance @@ -22,14 +22,12 @@ export const CoinTile = ({ balance }: CoinTileProps) => { const isNativeToken = compareAddress(balance.contractAddress, ethers.constants.AddressZero) const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains) - const { data: dataCoinPrices = [], isPending: isPendingCoinPrice } = useCoinPrices({ - tokens: [ - { - chainId: balance.chainId, - contractAddress: balance.contractAddress - } - ] - }) + const { data: dataCoinPrices = [], isPending: isPendingCoinPrice } = useCoinPrices([ + { + chainId: balance.chainId, + contractAddress: balance.contractAddress + } + ]) const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol) diff --git a/packages/wallet/src/views/Search/SearchWallet.tsx b/packages/wallet/src/views/Search/SearchWallet.tsx index beca84c3..71275df1 100644 --- a/packages/wallet/src/views/Search/SearchWallet.tsx +++ b/packages/wallet/src/views/Search/SearchWallet.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { ethers } from 'ethers' import { Box, SearchIcon, Text, TextInput, vars } from '@0xsequence/design-system' -import { getNativeTokenInfoByChainId, useExchangeRate } from '@0xsequence/kit' +import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices } from '@0xsequence/kit' import Fuse from 'fuse.js' import { useAccount, useConfig } from 'wagmi' @@ -9,7 +9,7 @@ import { BalanceItem } from './components/BalanceItem' import { WalletLink } from './components/WalletLink' import { Skeleton } from '../../shared/Skeleton' -import { useBalances, useCoinPrices, useSettings } from '../../hooks' +import { useBalances, useSettings } from '../../hooks' import { compareAddress, computeBalanceFiat } from '../../utils' import { useScrollbarWidth } from '../../hooks/useScrollbarWidth' @@ -33,12 +33,12 @@ export const SearchWallet = () => { b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, ethers.constants.AddressZero) ) || [] - const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: coinBalancesUnordered.map(token => ({ + const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices( + coinBalancesUnordered.map(token => ({ chainId: token.chainId, contractAddress: token.contractAddress })) - }) + ) const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol) diff --git a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx index ce1f57e6..c1a442ad 100644 --- a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx +++ b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react' import { ethers } from 'ethers' -import { Box, SearchIcon, TabsContent, TabsHeader, TabsRoot, Text, TextInput, vars } from '@0xsequence/design-system' -import { getNativeTokenInfoByChainId, useExchangeRate } from '@0xsequence/kit' +import { Box, SearchIcon, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system' +import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices } from '@0xsequence/kit' import { BalanceItem } from './components/BalanceItem' import Fuse from 'fuse.js' import { useAccount, useConfig } from 'wagmi' import { Skeleton } from '../../shared/Skeleton' -import { useBalances, useCoinPrices, useSettings } from '../../hooks' +import { useBalances, useSettings } from '../../hooks' import { compareAddress, computeBalanceFiat } from '../../utils' import { useScrollbarWidth } from '../../hooks/useScrollbarWidth' @@ -41,12 +41,12 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) => b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, ethers.constants.AddressZero) ) || [] - const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: coinBalancesUnordered.map(token => ({ + const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices( + coinBalancesUnordered.map(token => ({ chainId: token.chainId, contractAddress: token.contractAddress })) - }) + ) const { data: conversionRate = 1, isPending: isPendingConversionRate } = useExchangeRate(fiatCurrency.symbol) diff --git a/packages/wallet/src/views/SendCoin.tsx b/packages/wallet/src/views/SendCoin.tsx index 07c5fa91..4ecae4a4 100644 --- a/packages/wallet/src/views/SendCoin.tsx +++ b/packages/wallet/src/views/SendCoin.tsx @@ -13,13 +13,19 @@ import { vars, Spinner } from '@0xsequence/design-system' -import { getNativeTokenInfoByChainId, useAnalyticsContext, ExtendedConnector, useExchangeRate } from '@0xsequence/kit' +import { + getNativeTokenInfoByChainId, + useAnalyticsContext, + ExtendedConnector, + useExchangeRate, + useCoinPrices +} from '@0xsequence/kit' import { TokenBalance } from '@0xsequence/indexer' import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi' import { SendItemInfo } from '../shared/SendItemInfo' import { ERC_20_ABI, HEADER_HEIGHT } from '../constants' -import { useBalances, useCoinPrices, useSettings, useOpenWalletModal, useNavigation } from '../hooks' +import { useBalances, useSettings, useOpenWalletModal, useNavigation } from '../hooks' import { compareAddress, computeBalanceFiat, limitDecimals, isEthAddress, truncateAtMiddle } from '../utils' import * as sharedStyles from '../shared/styles.css' @@ -56,14 +62,12 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => { ) const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains) const tokenBalance = (balances as TokenBalance[]).find(b => b.contractAddress === contractAddress) - const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: [ - { - chainId, - contractAddress - } - ] - }) + const { data: coinPrices = [], isPending: isPendingCoinPrices } = useCoinPrices([ + { + chainId, + contractAddress + } + ]) 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 index 278f1879..5982bf18 100644 --- 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 } from '@0xsequence/kit' +import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices } 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 { useCoinPrices, useCollectiblePrices, useSettings } from '../../hooks' +import { useCollectiblePrices, useSettings } from '../../hooks' interface TransactionDetailProps { transaction: Transaction @@ -55,9 +55,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => { } }) - const { data: coinPricesData, isPending: isPendingCoinPrices } = useCoinPrices({ - tokens: coins - }) + const { data: coinPricesData, isPending: isPendingCoinPrices } = useCoinPrices(coins) const { data: collectiblePricesData, isPending: isPendingCollectiblePrices } = useCollectiblePrices({ tokens: collectibles