diff --git a/src/pages/ThorChainLP/Pool/Pool.tsx b/src/pages/ThorChainLP/Pool/Pool.tsx index 175f4c7ff85..543fcd351d7 100644 --- a/src/pages/ThorChainLP/Pool/Pool.tsx +++ b/src/pages/ThorChainLP/Pool/Pool.tsx @@ -25,8 +25,6 @@ import { Main } from 'components/Layout/Main' import { calculateTVL, get24hSwapChangePercentage, - get24hTvlChangePercentage, - getAllTimeVolume, getFees, getVolume, } from 'lib/utils/thorchain/lp' @@ -157,14 +155,11 @@ export const Pool = () => { }, [swapData24h, swapDataPrevious24h, runeMarketData.price, assetMarketData.price]) const { data: tvl24hChange } = useQuery({ - queryKey: ['get24hTvlChangePercentage', foundPool?.assetId ?? ''], - queryFn: () => - foundPool ? get24hTvlChangePercentage(foundPool.assetId) : Promise.resolve(null), + ...reactQueries.thorchainLp.tvl24hChange(foundPool?.assetId), }) const { data: allTimeVolume } = useQuery({ - queryKey: ['thorchainPoolVolumeAllTime', foundPool?.assetId ?? ''], - queryFn: () => (foundPool ? getAllTimeVolume(foundPool.assetId, runeMarketData.price) : ''), + ...reactQueries.thorchainLp.allTimeVolume(foundPool?.assetId, runeMarketData.price), }) const tvl = useMemo(() => { diff --git a/src/pages/ThorChainLP/queries/hooks/useAllUserLpData.ts b/src/pages/ThorChainLP/queries/hooks/useAllUserLpData.ts index a904e0ca1bb..fc5ba04477d 100644 --- a/src/pages/ThorChainLP/queries/hooks/useAllUserLpData.ts +++ b/src/pages/ThorChainLP/queries/hooks/useAllUserLpData.ts @@ -46,13 +46,13 @@ export const useAllUserLpData = ({ assetIds.map(assetId => { const poolAssetId = assetIdToPoolAssetId({ assetId }) return { + ...reactQueries.thorchainLp.userLpData(assetId), enabled: Boolean( isThornodePoolsDataLoaded && isMidgardPoolsDataLoaded && allThornodePools?.find(pool => pool.asset === poolAssetId) && allMidgardPools?.find(pool => pool.asset === poolAssetId), ), - queryKey: ['thorchainUserLpData', { assetId }], // We may or may not want to revisit this, but this will prevent overfetching for now staleTime: Infinity, queryFn: async () => { diff --git a/src/pages/ThorChainLP/queries/hooks/useUserLpData.ts b/src/pages/ThorChainLP/queries/hooks/useUserLpData.ts index 1eb81a340d7..56655173bf1 100644 --- a/src/pages/ThorChainLP/queries/hooks/useUserLpData.ts +++ b/src/pages/ThorChainLP/queries/hooks/useUserLpData.ts @@ -2,7 +2,6 @@ import type { AccountId } from '@shapeshiftoss/caip' import { type AssetId, thorchainAssetId } from '@shapeshiftoss/caip' import type { UseQueryResult } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query' -import { useMemo } from 'react' import { reactQueries } from 'react-queries' import { queryClient } from 'context/QueryClientProvider/queryClient' import { bn } from 'lib/bignumber/bignumber' @@ -29,11 +28,6 @@ export const useUserLpData = ({ ...thorchainAccountIds, ] - const lpPositionQueryKey: [string, { assetId: AssetId }] = useMemo( - () => ['thorchainUserLpData', { assetId }], - [assetId], - ) - const poolAssetMarketData = useAppSelector(state => selectMarketDataById(state, assetId)) const runeMarketData = useAppSelector(state => selectMarketDataById(state, thorchainAssetId)) @@ -108,13 +102,11 @@ export const useUserLpData = ({ return parsedPositions } - // TODO(gomes): this is dumb and not really the way to use react-query - this is really just mapping over positions as queries and running a selector. - // We may want to run the queries themselves with `useQueries` and then map over the results with a `useMemo` const liquidityPoolPositionData = useQuery({ - queryKey: lpPositionQueryKey, + ...reactQueries.thorchainLp.userLpData(assetId), staleTime: Infinity, queryFn: async ({ queryKey }) => { - const [, { assetId }] = queryKey + const [, , assetId] = queryKey const allPositions = ( await Promise.all( diff --git a/src/pages/ThorChainLP/queries/queries.ts b/src/pages/ThorChainLP/queries/queries.ts index 9d981722187..1f0801fe1be 100644 --- a/src/pages/ThorChainLP/queries/queries.ts +++ b/src/pages/ThorChainLP/queries/queries.ts @@ -122,4 +122,7 @@ export const thorchainLp = createQueryKeys('thorchainLp', { return positions }, }), + userLpData: (assetId: AssetId) => ({ + queryKey: ['thorchainUserLpData', { assetId }], + }), })