From b0513c4c01d71bcba382ca9062a1207a444c2a5c Mon Sep 17 00:00:00 2001 From: memoyil <2213635+memoyil@users.noreply.github.com> Date: Sun, 13 Oct 2024 17:34:17 +0200 Subject: [PATCH] perf: Use callback on aptos query select --- .../Farms/components/FarmCard/ApyButton.tsx | 4 +- .../FarmTable/Actions/StakedAction.tsx | 4 +- .../Liquidity/hooks/useLPPairsHaveBalance.ts | 9 +- .../components/Pools/hooks/usePoolsList.ts | 8 +- .../components/SearchModal/CurrencyList.tsx | 9 +- apps/aptos/hooks/Tokens.ts | 57 ++++++----- .../aptos/views/Ifos/hooks/useIfoResources.ts | 94 ++++++++++--------- apps/aptos/views/Ifos/hooks/useIfoUserInfo.ts | 19 ++-- 8 files changed, 117 insertions(+), 87 deletions(-) diff --git a/apps/aptos/components/Farms/components/FarmCard/ApyButton.tsx b/apps/aptos/components/Farms/components/FarmCard/ApyButton.tsx index b82986368a0ae..6a237fbfdb977 100644 --- a/apps/aptos/components/Farms/components/FarmCard/ApyButton.tsx +++ b/apps/aptos/components/Farms/components/FarmCard/ApyButton.tsx @@ -5,7 +5,7 @@ import { BIG_ZERO } from '@pancakeswap/utils/bigNumber' import { FarmWidget } from '@pancakeswap/widgets-internal' import BigNumber from 'bignumber.js' import useActiveWeb3React from 'hooks/useActiveWeb3React' -import { useMemo } from 'react' +import { useCallback, useMemo } from 'react' import { useFarmUserInfoCache } from 'state/farms/hook' import { FARM_DEFAULT_DECIMALS } from '../../constants' @@ -55,7 +55,7 @@ const ApyButton: React.FC> = ({ watch: true, address: account, coin: lpAddress, - select: (d) => new BigNumber(d.value), + select: useCallback((d) => new BigNumber(d.value), []), }) let userBalanceInFarm = BIG_ZERO diff --git a/apps/aptos/components/Farms/components/FarmTable/Actions/StakedAction.tsx b/apps/aptos/components/Farms/components/FarmTable/Actions/StakedAction.tsx index 6a17afe50f5e1..05d1f1f55c012 100644 --- a/apps/aptos/components/Farms/components/FarmTable/Actions/StakedAction.tsx +++ b/apps/aptos/components/Farms/components/FarmTable/Actions/StakedAction.tsx @@ -16,7 +16,7 @@ import useActiveWeb3React from 'hooks/useActiveWeb3React' import useCatchTxError from 'hooks/useCatchTxError' import { usePriceCakeUsdc } from 'hooks/useStablePrice' import { useRouter } from 'next/router' -import { useMemo } from 'react' +import { useCallback, useMemo } from 'react' import { logGTMClickStakeFarmEvent, logGTMClickUnStakeFarmEvent } from 'utils/customGTMEventTracking' import getLiquidityUrlPathParts from 'utils/getLiquidityUrlPathParts' import useStakeFarms from '../../../hooks/useStakeFarms' @@ -49,7 +49,7 @@ export const StakedContainer = ({ children, ...props }) => { watch: true, address: account, coin: props.lpAddress, - select: (d) => new BigNumber(d.value), + select: useCallback((d) => new BigNumber(d.value), []), }) const userData = useMemo( diff --git a/apps/aptos/components/Liquidity/hooks/useLPPairsHaveBalance.ts b/apps/aptos/components/Liquidity/hooks/useLPPairsHaveBalance.ts index 83fa2d427e80e..0cb8d86c3a3b0 100644 --- a/apps/aptos/components/Liquidity/hooks/useLPPairsHaveBalance.ts +++ b/apps/aptos/components/Liquidity/hooks/useLPPairsHaveBalance.ts @@ -1,9 +1,10 @@ import { Pair, PAIR_LP_TYPE_TAG, PAIR_RESERVE_TYPE_TAG } from '@pancakeswap/aptos-swap-sdk' import { useAccount, useAccountBalances } from '@pancakeswap/awgmi' import { unwrapTypeFromString } from '@pancakeswap/awgmi/core' -import { useMemo } from 'react' +import { useCallback, useMemo } from 'react' import { PairState, usePairsFromAddresses } from 'hooks/usePairs' +import { UseAccountBalancesResult } from '@pancakeswap/awgmi/src/hooks/useAccountBalances' function filterPair(v2Pairs): Pair[] { return v2Pairs?.length @@ -22,7 +23,11 @@ export default function useLPPairsHaveBalance(): LPPairsResponse { const balances = useAccountBalances({ watch: true, address: account?.address, - select: (balance) => (balance.address.includes(PAIR_LP_TYPE_TAG) && balance.value !== '0' ? balance : null), + select: useCallback( + (balance: UseAccountBalancesResult) => + balance.address.includes(PAIR_LP_TYPE_TAG) && balance.value !== '0' ? balance : null, + [], + ), }) const isPending = useMemo(() => balances.some((b) => b.isPending), [balances]) const mmV2PairsBalances = useMemo( diff --git a/apps/aptos/components/Pools/hooks/usePoolsList.ts b/apps/aptos/components/Pools/hooks/usePoolsList.ts index e6afd97d05834..83ce37d0e9c02 100644 --- a/apps/aptos/components/Pools/hooks/usePoolsList.ts +++ b/apps/aptos/components/Pools/hooks/usePoolsList.ts @@ -15,6 +15,7 @@ import { Coin, Pair, PAIR_LP_TYPE_TAG } from '@pancakeswap/aptos-swap-sdk' import { CAKE_PID } from 'config/constants' import { useInterval, useLastUpdated } from '@pancakeswap/hooks' +import { FetchAccountResourcesResult } from '@pancakeswap/awgmi/core' import { PoolResource } from '../types' import transformCakePool from '../transformers/transformCakePool' import transformPool from '../transformers/transformPool' @@ -35,20 +36,17 @@ export const usePoolsList = () => { const { data: pools } = useAccountResources({ networkName, address: SMARTCHEF_ADDRESS, - select: (resources) => { + select: useCallback((resources: FetchAccountResourcesResult) => { return resources.filter( // ignore LP Token Type for now (resource) => resource.type.includes(SMARTCHEF_POOL_INFO_TYPE_TAG) && !resource.type.includes(PAIR_LP_TYPE_TAG), ) - }, + }, []), staleTime: POOL_RESOURCE_STALE_TIME, }) const { data: balances } = useAccountResources({ address: account, - select: (resources) => { - return resources - }, staleTime: POOL_RESOURCE_STALE_TIME, }) diff --git a/apps/aptos/components/SearchModal/CurrencyList.tsx b/apps/aptos/components/SearchModal/CurrencyList.tsx index 6107835204731..d4a996f6ca035 100644 --- a/apps/aptos/components/SearchModal/CurrencyList.tsx +++ b/apps/aptos/components/SearchModal/CurrencyList.tsx @@ -75,9 +75,12 @@ function CurrencyRow({ address: account, coin: key, watch: true, - select: (d) => { - return CurrencyAmount.fromRawAmount(currency, d.value) - }, + select: useCallback( + (d) => { + return CurrencyAmount.fromRawAmount(currency, d.value) + }, + [currency], + ), }) // only show add or remove buttons if not on selected list diff --git a/apps/aptos/hooks/Tokens.ts b/apps/aptos/hooks/Tokens.ts index 97436c9bfb0a9..bedb85e3dd0fa 100644 --- a/apps/aptos/hooks/Tokens.ts +++ b/apps/aptos/hooks/Tokens.ts @@ -1,7 +1,12 @@ /* eslint-disable no-param-reassign */ import { Coin, Currency, CurrencyAmount, Token } from '@pancakeswap/aptos-swap-sdk' import { APTOS_COIN, useAccount, useAccountResources, useCoin, useCoins as useCoins_ } from '@pancakeswap/awgmi' -import { coinStoreResourcesFilter, unwrapTypeFromString } from '@pancakeswap/awgmi/core' +import { + coinStoreResourcesFilter, + FetchAccountResourcesResult, + FetchCoinResult, + unwrapTypeFromString, +} from '@pancakeswap/awgmi/core' import { useAtomValue } from 'jotai' import fromPairs from 'lodash/fromPairs' import { useCallback, useMemo } from 'react' @@ -34,12 +39,15 @@ export function useToken(coinId?: string) { symbol: token.symbol, } : undefined, - select: (d) => { - const { decimals, symbol, name } = d - if (token) return token - if (!coinId) return undefined - return new Coin(chainId, coinId, decimals, symbol, name) - }, + select: useCallback( + (d: FetchCoinResult) => { + const { decimals, symbol, name } = d + if (token) return token + if (!coinId) return undefined + return new Coin(chainId, coinId, decimals, symbol, name) + }, + [chainId, coinId, token], + ), }) return coin @@ -124,22 +132,25 @@ export function useAllTokenBalances() { const accountResources = useAccountResources({ address: useAccount()?.account?.address, watch: true, - select: (data) => { - const coinStore = data - .filter(coinStoreResourcesFilter) - .map((coin) => { - const address = unwrapTypeFromString(coin.type) - - if (address && allTokens[address]) { - return [address, CurrencyAmount.fromRawAmount(allTokens[address], (coin.data as any).coin.value)] - } - return null - }) - .filter(Boolean) as [string, CurrencyAmount][] - - const pairs = fromPairs(coinStore) - return pairs - }, + select: useCallback( + (data: FetchAccountResourcesResult) => { + const coinStore = data + .filter(coinStoreResourcesFilter) + .map((coin) => { + const address = unwrapTypeFromString(coin.type) + + if (address && allTokens[address]) { + return [address, CurrencyAmount.fromRawAmount(allTokens[address], (coin.data as any).coin.value)] + } + return null + }) + .filter(Boolean) as [string, CurrencyAmount][] + + const pairs = fromPairs(coinStore) + return pairs + }, + [allTokens], + ), }) return accountResources.data diff --git a/apps/aptos/views/Ifos/hooks/useIfoResources.ts b/apps/aptos/views/Ifos/hooks/useIfoResources.ts index f67f50e5c8b19..4b805270a1af2 100644 --- a/apps/aptos/views/Ifos/hooks/useIfoResources.ts +++ b/apps/aptos/views/Ifos/hooks/useIfoResources.ts @@ -12,6 +12,8 @@ import { RootObject as IFOPoolStore } from 'views/Ifos/generated/IFOPoolStore' import { RootObject as VestingMetadata } from 'views/Ifos/generated/VestingMetadata' import { Ifo } from 'config/constants/types' import useActiveWeb3React from 'hooks/useActiveWeb3React' +import { useCallback } from 'react' +import { FetchAccountResourcesResult } from '@pancakeswap/awgmi/core' interface ResourceType { [IFO_RESOURCE_ACCOUNT_TYPE_METADATA]?: IFOMetadata @@ -27,45 +29,48 @@ export const useIfoResourcesListByUserInfoType = (userInfoTypes?: string[]) => { enabled: Boolean(userInfoTypes?.length), address: IFO_ADDRESS, watch: true, - select: (data) => { - let resourcesList = {} + select: useCallback( + (data: FetchAccountResourcesResult) => { + let resourcesList = {} - for (const it of data) { - const res: ResourceType = {} - const [raisingCoin, offeringCoin, uid] = splitTypeTag(it.type) + for (const it of data) { + const res: ResourceType = {} + const [raisingCoin, offeringCoin, uid] = splitTypeTag(it.type) - const foundType = userInfoTypes?.find((type) => { - const [userRaisingCoin, userOfferingCoin, userUid] = splitTypeTag(type) + const foundType = userInfoTypes?.find((type) => { + const [userRaisingCoin, userOfferingCoin, userUid] = splitTypeTag(type) - if (raisingCoin === userRaisingCoin && offeringCoin === userOfferingCoin) { - if (uid && uid !== userUid) return false + if (raisingCoin === userRaisingCoin && offeringCoin === userOfferingCoin) { + if (uid && uid !== userUid) return false - return true - } + return true + } - return false - }) + return false + }) - if (foundType) { - const parsedTypeTag = parseTypeTag(it.type) - if (parsedTypeTag.isStruct()) { - const key = parsedTypeTag.value.name.identifier + if (foundType) { + const parsedTypeTag = parseTypeTag(it.type) + if (parsedTypeTag.isStruct()) { + const key = parsedTypeTag.value.name.identifier - res[key] = it + res[key] = it - resourcesList = { - ...resourcesList, - [foundType]: { - ...resourcesList[foundType], - [key]: it, - }, + resourcesList = { + ...resourcesList, + [foundType]: { + ...resourcesList[foundType], + [key]: it, + }, + } } } } - } - return resourcesList - }, + return resourcesList + }, + [userInfoTypes], + ), }) } @@ -79,28 +84,31 @@ export const useIfoResources = (ifo: Ifo | undefined) => { networkName, address: IFO_ADDRESS, watch: true, - select: (data) => { - const res: { - [IFO_RESOURCE_ACCOUNT_TYPE_METADATA]?: IFOMetadata - [IFO_RESOURCE_ACCOUNT_TYPE_POOL_STORE]?: IFOPoolStore - [IFO_RESOURCE_ACCOUNT_TYPE_VESTING_METADATA]?: VestingMetadata - } = {} + select: useCallback( + (data: FetchAccountResourcesResult) => { + const res: { + [IFO_RESOURCE_ACCOUNT_TYPE_METADATA]?: IFOMetadata + [IFO_RESOURCE_ACCOUNT_TYPE_POOL_STORE]?: IFOPoolStore + [IFO_RESOURCE_ACCOUNT_TYPE_VESTING_METADATA]?: VestingMetadata + } = {} - for (const it of data) { - const [raisingCoin, offeringCoin, uid] = splitTypeTag(it.type) + for (const it of data) { + const [raisingCoin, offeringCoin, uid] = splitTypeTag(it.type) - if (ifoRaisingCoin === raisingCoin && ifoOfferingCoin === offeringCoin) { - if (uid && uid !== ifoUid) break + if (ifoRaisingCoin === raisingCoin && ifoOfferingCoin === offeringCoin) { + if (uid && uid !== ifoUid) break - const parsedTypeTag = parseTypeTag(it.type) + const parsedTypeTag = parseTypeTag(it.type) - if (parsedTypeTag.isStruct()) { - res[parsedTypeTag.value.name.identifier] = it + if (parsedTypeTag.isStruct()) { + res[parsedTypeTag.value.name.identifier] = it + } } } - } - return res - }, + return res + }, + [ifoOfferingCoin, ifoOfferingCoin, ifoUid], + ), }) } diff --git a/apps/aptos/views/Ifos/hooks/useIfoUserInfo.ts b/apps/aptos/views/Ifos/hooks/useIfoUserInfo.ts index 63dcd975561fb..e67e4fbbe5cbf 100644 --- a/apps/aptos/views/Ifos/hooks/useIfoUserInfo.ts +++ b/apps/aptos/views/Ifos/hooks/useIfoUserInfo.ts @@ -2,6 +2,8 @@ import { useAccount, useAccountResources } from '@pancakeswap/awgmi' import { ifos } from 'config/constants/ifo' import { RootObject as UserInfo } from 'views/Ifos/generated/UserInfo' import { IFO_RESOURCE_ACCOUNT_TYPE_POOL_STORE, USER_IFO_POOL_TAG, IFO_TYPE_USER_INFO } from 'views/Ifos/constants' +import { useCallback } from 'react' +import { FetchAccountResourcesResult } from '@pancakeswap/awgmi/core' export const useIfoUserInfoList = () => { const { account } = useAccount() @@ -10,11 +12,11 @@ export const useIfoUserInfoList = () => { enabled: !!account, address: account?.address, watch: true, - select: (resources) => { + select: useCallback((resources: FetchAccountResourcesResult) => { return resources.filter((resource) => { return resource.type.includes(USER_IFO_POOL_TAG) }) as UserInfo[] - }, + }, []), }) } @@ -25,10 +27,13 @@ export const useIfoUserInfo = (poolType) => { enabled: !!account && !!ifos[0], address: account?.address, watch: true, - select: (data) => { - return data.find((it) => { - return it.type === poolType?.replace(IFO_RESOURCE_ACCOUNT_TYPE_POOL_STORE, IFO_TYPE_USER_INFO) - }) as UserInfo | undefined - }, + select: useCallback( + (data: FetchAccountResourcesResult) => { + return data.find((it) => { + return it.type === poolType?.replace(IFO_RESOURCE_ACCOUNT_TYPE_POOL_STORE, IFO_TYPE_USER_INFO) + }) as UserInfo | undefined + }, + [poolType], + ), }) }