diff --git a/apps/main/src/dex/components/PagePool/Withdraw/components/FormWithdraw.tsx b/apps/main/src/dex/components/PagePool/Withdraw/components/FormWithdraw.tsx index 13df31e1e..f47a6bf18 100644 --- a/apps/main/src/dex/components/PagePool/Withdraw/components/FormWithdraw.tsx +++ b/apps/main/src/dex/components/PagePool/Withdraw/components/FormWithdraw.tsx @@ -257,8 +257,7 @@ const FormWithdraw = ({ ]) const tokenAddresses = useMemo(() => formValues.amounts.map((a) => a.tokenAddress), [formValues.amounts]) - const { data: usdRatesRaw } = useTokenUsdRates({ chainId, tokenAddresses }) - const usdRates = useMemo(() => usdRatesRaw ?? ({} as Record), [usdRatesRaw]) + const { data: usdRates } = useTokenUsdRates({ chainId, tokenAddresses }) // usd amount for slippage warning const estUsdAmountTotalReceive = useMemo(() => { diff --git a/apps/main/src/loan/hooks/useLoanAppStats.tsx b/apps/main/src/loan/hooks/useLoanAppStats.tsx index eeccf62ae..0cf5a632b 100644 --- a/apps/main/src/loan/hooks/useLoanAppStats.tsx +++ b/apps/main/src/loan/hooks/useLoanAppStats.tsx @@ -23,8 +23,7 @@ function useTvl(chainId: ChainId | undefined) { [collateralDatasMapper], ) - const { data: usdRatesRaw } = useTokenUsdRates({ chainId, tokenAddresses: collateralTokenAddresses }) - const usdRates = useMemo(() => usdRatesRaw ?? ({} as Record), [usdRatesRaw]) + const { data: usdRates } = useTokenUsdRates({ chainId, tokenAddresses: collateralTokenAddresses }) return useMemo(() => { if (!hasKeys(collateralDatasMapper) || !hasKeys(loansDetailsMapper) || Object.keys(usdRates).length === 0) { diff --git a/packages/curve-ui-kit/src/lib/model/entities/token-usd-rate.ts b/packages/curve-ui-kit/src/lib/model/entities/token-usd-rate.ts index 35c392dea..83273152c 100644 --- a/packages/curve-ui-kit/src/lib/model/entities/token-usd-rate.ts +++ b/packages/curve-ui-kit/src/lib/model/entities/token-usd-rate.ts @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react' +import { useQueries } from '@tanstack/react-query' import { getLib, requireLib } from '@ui-kit/features/connect-wallet' -import { useQueryMapping } from '@ui-kit/lib' +import { combineQueriesToObject } from '@ui-kit/lib' import { queryClient } from '@ui-kit/lib/api' import { extractTokenAddress, @@ -30,10 +31,11 @@ export const { export const useTokenUsdRates = ({ chainId, tokenAddresses = [] }: ChainParams & { tokenAddresses?: string[] }) => { const uniqueAddresses = Array.from(new Set(tokenAddresses)) - return useQueryMapping( - uniqueAddresses.map((tokenAddress) => getTokenUsdRateQueryOptions({ chainId, tokenAddress })), - uniqueAddresses, - ) + + return useQueries({ + queries: uniqueAddresses.map((tokenAddress) => getTokenUsdRateQueryOptions({ chainId, tokenAddress })), + combine: (results) => combineQueriesToObject(results, uniqueAddresses), + }) } /** Check if it's a token price query by looking for QUERY_KEY_IDENTIFIER as the last element */ diff --git a/packages/curve-ui-kit/src/lib/queries/combine.ts b/packages/curve-ui-kit/src/lib/queries/combine.ts index 749d3ec4f..f00ef8d39 100644 --- a/packages/curve-ui-kit/src/lib/queries/combine.ts +++ b/packages/curve-ui-kit/src/lib/queries/combine.ts @@ -1,18 +1,8 @@ -import { useCallback } from 'react' -import { useQueries } from '@tanstack/react-query' -import { QueriesOptions, QueriesResults } from '@tanstack/react-query/build/legacy/useQueries' -import { - CombinedQueriesResult, - CombinedQueryMappingResult, - ExtractDataType, - QueryOptionsArray, - QueryResultsArray, -} from './types' +import type { UseQueryOptions } from '@tanstack/react-query' +import { QueryOptionsArray, QueryResultsArray } from './types' /** Combines the metadata of multiple queries into a single object. */ -export const combineQueriesMeta = ( - results: QueryResultsArray, -): Omit, 'data'> => ({ +export const combineQueriesMeta = (results: QueryResultsArray) => ({ isLoading: results.some((result) => result.isLoading), isPending: results.some((result) => result.isPending), isError: results.some((result) => result.isError), @@ -20,29 +10,11 @@ export const combineQueriesMeta = ( }) /** Combines the data and metadata of multiple queries into a single object. */ -const combineQueriesToObject = ( - results: QueryResultsArray, +export const combineQueriesToObject = ( + results: QueryResultsArray[]>, keys: K, -): CombinedQueryMappingResult => ({ - data: Object.fromEntries((results || []).map(({ data }, index) => [keys[index], data])) as Record< - K[number], - ExtractDataType - >, +) => ({ + // Using flatMap instead of map + filter(Boolean), because it's not correctly erasing | undefined from the Record value type + data: Object.fromEntries(results.flatMap(({ data }, index) => (data !== undefined ? [[keys[index], data]] : []))), ...combineQueriesMeta(results), }) - -/** - * Combines multiple queries into a single object with keys for each query - * @param queries The query options to combine - * @param keys The keys to use for each query - * @returns The combined queries in an object - */ -export const useQueryMapping = , TKey extends string[]>( - queries: readonly [...QueriesOptions], - keys: [...TKey], -) => - useQueries({ - // todo: figure out why the type has broken in react-query, related to https://github.com/TanStack/query/pull/8624 - queries: queries as Parameters[0]['queries'], - combine: useCallback((results: QueriesResults) => combineQueriesToObject(results, keys), [keys]), - }) diff --git a/packages/curve-ui-kit/src/lib/queries/types.ts b/packages/curve-ui-kit/src/lib/queries/types.ts index a7fa279dd..70e5a3dd3 100644 --- a/packages/curve-ui-kit/src/lib/queries/types.ts +++ b/packages/curve-ui-kit/src/lib/queries/types.ts @@ -2,10 +2,6 @@ import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query' export type QueryOptionsArray = readonly UseQueryOptions[] -export type ExtractDataType = T extends UseQueryOptions ? TData : unknown - -export type CombinedDataType = ExtractDataType[] - export type QueryResultsArray = { [K in keyof T]: T[K] extends UseQueryOptions ? UseQueryResult : never } @@ -14,9 +10,3 @@ export type PartialQueryResult = Pick< UseQueryResult, 'data' | 'isLoading' | 'isPending' | 'isError' | 'isFetching' > - -export type CombinedQueriesResult = PartialQueryResult> - -export type CombinedQueryMappingResult = PartialQueryResult< - Record[number]> ->