diff --git a/components/AssetInput/AssetList.tsx b/components/AssetInput/AssetList.tsx index d3ccf001..d05fe23d 100644 --- a/components/AssetInput/AssetList.tsx +++ b/components/AssetInput/AssetList.tsx @@ -33,9 +33,9 @@ const AssetList: FC = ({ }) => { const [tokenList, setup] = useTokenList() const { network, chainId } = useRecoilValue(chainState) - const config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const tokens = useMemo(() => { - if (!config) { + if (!config || isConfigLoading) { return [] } diff --git a/components/Pages/Bonding/Bonding.tsx b/components/Pages/Bonding/Bonding.tsx index d3830759..346a09c6 100644 --- a/components/Pages/Bonding/Bonding.tsx +++ b/components/Pages/Bonding/Bonding.tsx @@ -24,13 +24,15 @@ import { useRecoilValue } from 'recoil' import { chainState } from 'state/chainState' import BondingOverview, { ActionType, TokenType } from './BondingOverview' -import { Config, useConfig, useDashboardData } from './hooks/useDashboardData' +import { useConfig, useDashboardData } from './hooks/useDashboardData' import RewardsComponent from './RewardsComponent' import { BondingData } from './types/BondingData' const Bonding: FC = () => { const { chainId, chainName, network, walletChainName } = useRecoilValue(chainState) const { isWalletConnected, address } = useChain(walletChainName) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) + const data: BondingData[] = [ { @@ -128,8 +130,6 @@ const Bonding: FC = () => { const whalePrice = useWhalePrice() - const config: Config = useConfig(network, chainId) - const symbols = useMemo(() => { const tokenSymbols = config?.bonding_tokens?.map((token) => token.symbol) || [] return Array.from(new Set([...tokenSymbols, WHALE_TOKEN_SYMBOL])) @@ -171,7 +171,7 @@ const Bonding: FC = () => { symbols, ]) const { isOpen, onOpen, onClose } = useDisclosure() - return <>{isLoading && isWalletConnected ? + return <>{(isLoading || isConfigLoading) && isWalletConnected ? { useRecoilState(bondingState) const { network, chainId, walletChainName } = useRecoilValue(chainState) const { isWalletConnected } = useChain(walletChainName) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const [tokenBalances, setTokenBalances] = useState(null) @@ -49,7 +50,6 @@ export const Bond = ({ balances, tokenSymbols }) => { amount: Number(amount) }) } } - const config = useConfig(network, chainId) useEffect(() => { if (config) { @@ -60,7 +60,7 @@ export const Bond = ({ balances, tokenSymbols }) => { denom: config.bonding_tokens[0].denom, }) } - }, [isWalletConnected, config]) + }, [isWalletConnected, config, isConfigLoading]) const { control } = useForm({ mode: 'onChange', diff --git a/components/Pages/Bonding/BondingActions/BondingActions.tsx b/components/Pages/Bonding/BondingActions/BondingActions.tsx index b42cacf9..762e4887 100644 --- a/components/Pages/Bonding/BondingActions/BondingActions.tsx +++ b/components/Pages/Bonding/BondingActions/BondingActions.tsx @@ -30,10 +30,10 @@ const BondingActions = ({ globalAction }) => { const router = useRouter() - const config: Config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const symbols = useMemo(() => config?.bonding_tokens.map((token) => token.symbol), - [config]) + [config, isConfigLoading]) const { txStep, submit } = useTransaction() @@ -152,8 +152,7 @@ const BondingActions = ({ globalAction }) => { - ( - {isLoading && isWalletConnected ? ( + {(isLoading || isConfigLoading) && isWalletConnected ? ( { const [isMobile] = useMediaQuery('(max-width: 720px)') const [currentBondState, setCurrentBondState] = useRecoilState(bondingState) - const config = useConfig(network, chainId) + + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const [bondedBalances, setBondedBalances] = useState(null) useEffect(() => { @@ -41,7 +42,7 @@ const Unbond = ({ bondedAssets }: { bondedAssets: BondedData[] }) => { [currentBondState]) useEffect(() => { - if (config) { + if (!isConfigLoading && config) { // eslint-disable-next-line prefer-destructuring const firstToken = config.bonding_tokens[0] setCurrentBondState({ @@ -51,7 +52,7 @@ const Unbond = ({ bondedAssets }: { bondedAssets: BondedData[] }) => { denom: firstToken.denom, }) } - }, [isWalletConnected, config]) + }, [isWalletConnected, config, isConfigLoading]) const { control } = useForm({ mode: 'onChange', diff --git a/components/Pages/Bonding/BondingActions/Withdraw.tsx b/components/Pages/Bonding/BondingActions/Withdraw.tsx index a6382701..c314dbea 100644 --- a/components/Pages/Bonding/BondingActions/Withdraw.tsx +++ b/components/Pages/Bonding/BondingActions/Withdraw.tsx @@ -32,6 +32,7 @@ const Withdraw = ({ }: Props) => { const { walletChainName, network, chainId } = useRecoilValue(chainState) const { isWalletConnected } = useChain(walletChainName) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const prices = usePrices() @@ -57,10 +58,9 @@ const Withdraw = ({ const [_, setCurrentBondState] = useRecoilState(bondingState) - const config = useConfig(network, chainId) useEffect(() => { - if (config) { + if (!isConfigLoading && config) { // eslint-disable-next-line prefer-destructuring const firstToken = config.bonding_tokens[0] setCurrentBondState({ @@ -70,7 +70,7 @@ const Withdraw = ({ denom: firstToken.denom, }) } - }, [isWalletConnected, config]) + }, [isWalletConnected, config, isConfigLoading]) const withdrawableTokens = withdrawableInfos?.map((row) => ({ ...row, diff --git a/components/Pages/Bonding/BondingActions/hooks/useTransaction.tsx b/components/Pages/Bonding/BondingActions/hooks/useTransaction.tsx index c841e5cb..148176bb 100644 --- a/components/Pages/Bonding/BondingActions/hooks/useTransaction.tsx +++ b/components/Pages/Bonding/BondingActions/hooks/useTransaction.tsx @@ -11,7 +11,6 @@ import { unbondTokens } from 'components/Pages/Bonding/BondingActions/hooks/unbo import { withdrawTokens } from 'components/Pages/Bonding/BondingActions/hooks/withdrawTokens' import { ActionType } from 'components/Pages/Bonding/BondingOverview' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import { useClients } from 'hooks/useClients' @@ -30,8 +29,8 @@ export const useTransaction = () => { const [txHash, setTxHash] = useState(null) const [error, setError] = useState(null) const [buttonLabel, setButtonLabel] = useState(null) - const config: Config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const { data: fee } = useQuery( ['fee', error], () => { @@ -72,7 +71,7 @@ export const useTransaction = () => { } }, { - enabled: txStep === TxStep.Idle && !error && Boolean(signingClient), + enabled: txStep === TxStep.Idle && !error && Boolean(signingClient) && !isConfigLoading, refetchOnWindowFocus: false, retry: false, staleTime: 0, diff --git a/components/Pages/Bonding/RewardsComponent.tsx b/components/Pages/Bonding/RewardsComponent.tsx index 6adf0cfe..b01d8895 100644 --- a/components/Pages/Bonding/RewardsComponent.tsx +++ b/components/Pages/Bonding/RewardsComponent.tsx @@ -14,7 +14,6 @@ import { useChain } from '@cosmos-kit/react-lite' import { BondingActionTooltip } from 'components/Pages/Bonding/BondingActions/BondingActionTooltip' import useTransaction from 'components/Pages/Bonding/BondingActions/hooks/useTransaction' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import { RewardsTooltip } from 'components/Pages/Bonding/RewardsTooltip' @@ -140,11 +139,10 @@ const RewardsComponent = ({ const { txStep, submit } = useTransaction() - const config: Config = useConfig(network, chainId) - + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const forceEpochAndTakeSnapshots = useForceEpochAndTakingSnapshots({ noSnapshotTakenAddresses: null, - config, + configState: { config, isLoading: isConfigLoading }, }) const currentEpochStartDateTimeInMilli = new Date(nanoToMilli(Number(currentEpoch?.epoch?.start_time))).getTime() diff --git a/components/Pages/Bonding/hooks/useDashboardData.ts b/components/Pages/Bonding/hooks/useDashboardData.ts index 52edf0f7..f90c13fa 100644 --- a/components/Pages/Bonding/hooks/useDashboardData.ts +++ b/components/Pages/Bonding/hooks/useDashboardData.ts @@ -1,5 +1,5 @@ -import { useEffect, useMemo, useState, useRef } from 'react' -import { useQueries, useQueryClient } from 'react-query' +import { useMemo } from 'react' +import { useQueries, useQueryClient, useQuery } from 'react-query' import { getBonded } from 'components/Pages/Bonding/hooks/getBonded' import { getBondingConfig } from 'components/Pages/Bonding/hooks/getBondingConfig' @@ -33,41 +33,32 @@ export interface Config { bonding_tokens: TokenInfo[] } +const fetchConfig = async (network: NetworkType, chainId: string): Promise => { + const response = await fetch(`/${network}/${chainId}/config.json`) + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`) + } + return response.json() +} + export const useConfig = (network: NetworkType, chainId: string) => { - const [config, setConfig] = useState(null) - const cacheRef = useRef<{ [key: string]: Config | null }>({}) - - useEffect(() => { - if (network && chainId) { - const cacheKey = `${network}_${chainId}` - - if (cacheRef.current[cacheKey]) { - setConfig(cacheRef.current[cacheKey]) - return - } - - const fetchConfig = async () => { - try { - const response = await fetch(`/${network}/${chainId}/config.json`) - const json: Config = await response.json() - setConfig(json) - cacheRef.current[cacheKey] = json - } catch (error) { - console.error('Failed to load config:', error) - } - } - - fetchConfig() + return useQuery( + ['config', network, chainId], + () => fetchConfig(network, chainId), + { + enabled: Boolean(network) && Boolean(chainId), + staleTime: Infinity, + cacheTime: Infinity, + retry: 2, } - }, [network, chainId]) - return config + ) } export const useDashboardData = ( address: string, network: NetworkType, chainId: string, walletChainName: string, ) => { const queryClient = useQueryClient() - const config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const { cosmWasmClient } = useClients(walletChainName) const queries = useQueries([ @@ -154,10 +145,11 @@ export const useDashboardData = ( }, ]) - const isLoading = useMemo(() => queries.some((query) => ( - query.isLoading || (!query.data && query.data !== 0) - )), - [queries]) + const isLoading = useMemo(() => + isConfigLoading || queries.some((query) => ( + query.isLoading || (!query.data && query.data !== 0) + )), + [queries, isConfigLoading]) const refetchAll = () => { queries.forEach((query) => query.refetch()) diff --git a/components/Pages/Trade/Incentivize/hooks/useEpoch.ts b/components/Pages/Trade/Incentivize/hooks/useEpoch.ts index 947590e8..0cc26bff 100644 --- a/components/Pages/Trade/Incentivize/hooks/useEpoch.ts +++ b/components/Pages/Trade/Incentivize/hooks/useEpoch.ts @@ -2,7 +2,6 @@ import { useMemo } from 'react' import { useQuery } from 'react-query' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import dayjs from 'dayjs' @@ -81,8 +80,8 @@ interface EpochConfigData { const useEpoch = () => { const { network, chainId, walletChainName } = useRecoilValue(chainState) - const contracts: Config = useConfig(network, chainId) + const { data: contracts, isLoading: isConfigLoading } = useConfig(network, chainId) const { cosmWasmClient } = useClients(walletChainName) const { data: config } = useQuery({ queryKey: ['incentive', 'config', contracts?.fee_distributor], @@ -94,7 +93,7 @@ const useEpoch = () => { config: {}, }) }, - enabled: Boolean(contracts?.fee_distributor) && Boolean(cosmWasmClient), + enabled: Boolean(contracts?.fee_distributor) && Boolean(cosmWasmClient) && !isConfigLoading, }) const { data } = useQuery({ diff --git a/components/Pages/Trade/Incentivize/hooks/useIncentivePoolInfo.ts b/components/Pages/Trade/Incentivize/hooks/useIncentivePoolInfo.ts index aa69a861..46b879f7 100644 --- a/components/Pages/Trade/Incentivize/hooks/useIncentivePoolInfo.ts +++ b/components/Pages/Trade/Incentivize/hooks/useIncentivePoolInfo.ts @@ -3,7 +3,6 @@ import { useQuery } from 'react-query' import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import { useCurrentEpoch } from 'components/Pages/Trade/Incentivize/hooks/useCurrentEpoch' @@ -192,8 +191,8 @@ export const useIncentivePoolInfo = ( ) => { const { chainId, network, walletChainName } = useRecoilValue(chainState) const [tokenList, loading] = useTokenList() - const config: Config = useConfig(network, chainId) const prices = usePrices() + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const { data: currentEpochData } = useCurrentEpoch(client, config) const [poolsWithAprAnd24HrVolume, setPoolsWithAprAnd24HrVolume] = useState< PoolData[] @@ -250,7 +249,8 @@ export const useIncentivePoolInfo = ( Boolean(currentEpochData) && Boolean(pools) && Boolean(poolAssets) && - Boolean(prices), + Boolean(prices) && + !isConfigLoading, }, ) return { diff --git a/components/Pages/Trade/Incentivize/hooks/useOpenFlow.ts b/components/Pages/Trade/Incentivize/hooks/useOpenFlow.ts index e2ea9775..1a768143 100644 --- a/components/Pages/Trade/Incentivize/hooks/useOpenFlow.ts +++ b/components/Pages/Trade/Incentivize/hooks/useOpenFlow.ts @@ -5,7 +5,6 @@ import { MsgExecuteContractEncodeObject } from '@cosmjs/cosmwasm-stargate' import { coin } from '@cosmjs/proto-signing' import { useChain } from '@cosmos-kit/react-lite' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import useEpoch from 'components/Pages/Trade/Incentivize/hooks/useEpoch' @@ -39,8 +38,8 @@ export const useOpenFlow = ({ poolId, token, startDate, endDate }: Props) => { const { network, chainId, walletChainName } = useRecoilValue(chainState) const { signingClient, injectiveSigningClient } = useClients(walletChainName) const { address } = useChain(walletChainName) - const config: Config = useConfig(network, chainId) const { data: pool } = usePoolFromListQueryById({ poolId }) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const { onError, onSuccess, onMutate } = useTxStatus({ transactionType: 'Open Flow', signingClient, @@ -57,7 +56,8 @@ export const useOpenFlow = ({ poolId, token, startDate, endDate }: Props) => { !tokenInfo?.denom || !startDate || !endDate || - Number(token?.amount || 0) <= 0 + Number(token?.amount || 0) <= 0 || + isConfigLoading ) { return null } diff --git a/components/Pages/Trade/Incentivize/hooks/useQueryIncentiveContracts.ts b/components/Pages/Trade/Incentivize/hooks/useQueryIncentiveContracts.ts index cbfb008b..4f1f856d 100644 --- a/components/Pages/Trade/Incentivize/hooks/useQueryIncentiveContracts.ts +++ b/components/Pages/Trade/Incentivize/hooks/useQueryIncentiveContracts.ts @@ -18,7 +18,7 @@ const fetchIncentiveContracts = async (client: CosmWasmClient, export const useQueryIncentiveContracts = (cosmWasmClient: CosmWasmClient): Array => { const { chainId, network } = useRecoilValue(chainState) - const config: Config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const { data } = useQuery( ['useQueryIncentiveContracts', config], async () => await fetchIncentiveContracts(cosmWasmClient, config), @@ -26,7 +26,8 @@ export const useQueryIncentiveContracts = (cosmWasmClient: CosmWasmClient): Arra enabled: Boolean(cosmWasmClient) && Boolean(config) && - Boolean(config?.incentive_factory), + Boolean(config?.incentive_factory) && + !isConfigLoading, }, ) return data diff --git a/components/Pages/Trade/Liquidity/Claim.tsx b/components/Pages/Trade/Liquidity/Claim.tsx index 56925442..1e59606b 100644 --- a/components/Pages/Trade/Liquidity/Claim.tsx +++ b/components/Pages/Trade/Liquidity/Claim.tsx @@ -48,13 +48,13 @@ const Claim = (pool: PoolEntityType) => { const { isWalletConnected, openView } = useChain(walletChainName) const { cosmWasmClient } = useClients(walletChainName) - const config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) // Check if there are all snapshots for incentives for current taken, if not return those on which no ss was performed - const noSnapshotTakenAddresses = useCheckIncentiveSnapshots(cosmWasmClient, config) + const noSnapshotTakenAddresses = useCheckIncentiveSnapshots(cosmWasmClient, { data: config, isLoading: isConfigLoading }) const allSnapshotsTaken = useMemo(() => noSnapshotTakenAddresses.length === 0, [noSnapshotTakenAddresses.length]) const forceSnapshots = useForceEpochAndTakingSnapshots({ noSnapshotTakenAddresses, - config, + configState: { config, isLoading: isConfigLoading }, }) const { rewards = [], totalValue } = useRewards(pool) diff --git a/components/Pages/Trade/Liquidity/hooks/useCheckIncentiveSnapshots.ts b/components/Pages/Trade/Liquidity/hooks/useCheckIncentiveSnapshots.ts index 1b590d50..3535f887 100644 --- a/components/Pages/Trade/Liquidity/hooks/useCheckIncentiveSnapshots.ts +++ b/components/Pages/Trade/Liquidity/hooks/useCheckIncentiveSnapshots.ts @@ -1,7 +1,6 @@ import { useQuery } from 'react-query' import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate' -import { Config } from 'components/Pages/Bonding/hooks/useDashboardData' import { useCurrentEpoch } from 'components/Pages/Trade/Incentivize/hooks/useCurrentEpoch' import { useQueryIncentiveContracts } from 'components/Pages/Trade/Incentivize/hooks/useQueryIncentiveContracts' @@ -30,7 +29,7 @@ const fetchCheckIncentiveSnapshots = async ( return noSnapshotTakenAddresses } export const useCheckIncentiveSnapshots = (cosmWasmClient: CosmWasmClient, - config: Config) => { + { data: config, isLoading: isConfigLoading }) => { const { data: currentEpochData } = useCurrentEpoch(cosmWasmClient, config) const epochId = currentEpochData?.currentEpoch?.epoch.id const incentiveAddresses = useQueryIncentiveContracts(cosmWasmClient) @@ -43,7 +42,8 @@ export const useCheckIncentiveSnapshots = (cosmWasmClient: CosmWasmClient, enabled: Boolean(cosmWasmClient) && Boolean(incentiveAddresses) && - Boolean(epochId), + Boolean(epochId) && + !isConfigLoading, staleTime: 5 * 60 * 1000, cacheTime: 10 * 60 * 1000, }, diff --git a/components/Pages/Trade/Liquidity/hooks/useForceEpochAndTakingSnapshots.ts b/components/Pages/Trade/Liquidity/hooks/useForceEpochAndTakingSnapshots.ts index 1bc10695..5576f385 100644 --- a/components/Pages/Trade/Liquidity/hooks/useForceEpochAndTakingSnapshots.ts +++ b/components/Pages/Trade/Liquidity/hooks/useForceEpochAndTakingSnapshots.ts @@ -18,14 +18,10 @@ export enum Force { snapshotsOnly, } -type Params = { - noSnapshotTakenAddresses?: Array - config: Config -} const useForceEpochAndTakingSnapshots = ({ noSnapshotTakenAddresses, - config, -}: Params) => { + configState, +}: { noSnapshotTakenAddresses?: Array, configState: { config: Config, isLoading: boolean } }) => { const { walletChainName } = useRecoilValue(chainState) const { address } = useChain(walletChainName) const { signingClient, injectiveSigningClient, cosmWasmClient } = useClients(walletChainName) @@ -48,7 +44,7 @@ const useForceEpochAndTakingSnapshots = ({ }) const msgs = useMemo(() => { - if (addresses.length === 0) { + if (addresses.length === 0 || configState.isLoading) { return null } @@ -61,7 +57,7 @@ const useForceEpochAndTakingSnapshots = ({ new_epoch: {}, }, senderAddress: address, - contractAddress: config?.fee_distributor, + contractAddress: configState.config?.fee_distributor, funds: [], }), ] diff --git a/components/Pages/Trade/Liquidity/hooks/useLiquidityAlliancePositions.ts b/components/Pages/Trade/Liquidity/hooks/useLiquidityAlliancePositions.ts index 7884ce3e..7e6bea4c 100644 --- a/components/Pages/Trade/Liquidity/hooks/useLiquidityAlliancePositions.ts +++ b/components/Pages/Trade/Liquidity/hooks/useLiquidityAlliancePositions.ts @@ -160,7 +160,7 @@ export const useAllianceRewards = () => { cosmWasmClient, address, chainId, ), { - refetchInterval: 10000, + refetchInterval: 30 * 60 * 1000, enabled: chainId === 'phoenix-1' && Boolean(address), }, ) diff --git a/components/Pages/Trade/Liquidity/hooks/useProvideLP.ts b/components/Pages/Trade/Liquidity/hooks/useProvideLP.ts index a6ebff8c..6d3455b2 100644 --- a/components/Pages/Trade/Liquidity/hooks/useProvideLP.ts +++ b/components/Pages/Trade/Liquidity/hooks/useProvideLP.ts @@ -2,7 +2,6 @@ import { useMemo } from 'react' import { useChain } from '@cosmos-kit/react-lite' import { - Config, useConfig, } from 'components/Pages/Bonding/hooks/useDashboardData' import useFactoryConfig from 'components/Pages/Trade/Incentivize/hooks/useFactoryConfig' @@ -23,7 +22,7 @@ const useProvideLP = ({ reverse = false, bondingDays }) => { const { chainId, network, walletChainName } = useRecoilValue(chainState) const { address } = useChain(walletChainName) const { signingClient, injectiveSigningClient } = useClients(walletChainName) - const config: Config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) const tokenInfoA = useTokenInfo(lpTokenA?.tokenSymbol) const tokenInfoB = useTokenInfo(lpTokenB?.tokenSymbol) const [matchingPools] = useQueryMatchingPoolForSwap({ @@ -208,7 +207,7 @@ const useProvideLP = ({ reverse = false, bondingDays }) => { onError: () => { }, }) const noMatchingPool = - !swapAddress && !isLoading + !swapAddress && (!isLoading || !isConfigLoading) ? { buttonLabel: 'No Matching Pool', } diff --git a/hooks/useTokenBalance.tsx b/hooks/useTokenBalance.tsx index 09403fde..f40ddb13 100644 --- a/hooks/useTokenBalance.tsx +++ b/hooks/useTokenBalance.tsx @@ -93,9 +93,9 @@ export const useMultipleTokenBalance = (tokenSymbols?: Array, isBonding? const { cosmWasmClient, signingClient, stargateClient } = useClients(walletChainName) const { address, isWalletConnected } = useChain(walletChainName) const [tokenList] = useTokenList() - const config = useConfig(network, chainId) + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) - if (isBonding && config?.bonding_tokens) { + if (!isConfigLoading && isBonding && config?.bonding_tokens) { for (const newToken of config.bonding_tokens) { const isTokenAdded = tokenList?.tokens.find((existingToken) => existingToken.denom === newToken.denom); if (!isTokenAdded) { @@ -133,7 +133,8 @@ export const useMultipleTokenBalance = (tokenSymbols?: Array, isBonding? enabled: Boolean(isWalletConnected && tokenSymbols?.length && tokenList?.tokens && - cosmWasmClient), + cosmWasmClient) && + !isConfigLoading, refetchOnMount: 'always', refetchInterval: DEFAULT_TOKEN_BALANCE_REFETCH_INTERVAL, refetchIntervalInBackground: true, diff --git a/hooks/useTokenList.ts b/hooks/useTokenList.ts index 4492d30a..9c7f3009 100644 --- a/hooks/useTokenList.ts +++ b/hooks/useTokenList.ts @@ -16,11 +16,10 @@ export type TokenList = { export const useTokenList = () => { const { data: poolsListResponse } = usePoolsListQuery() const { chainId, network, walletChainName } = useRecoilValue(chainState) - const config = useConfig(network, chainId) - + const { data: config, isLoading: isConfigLoading } = useConfig(network, chainId) /* Generate token list off pool list and store it in cache */ const { data } = useQuery( - ['@token-list', chainId, network, config], + ['@token-list', chainId, network, 'config'], () => { const tokenMapBySymbol = new Map() poolsListResponse.pools.forEach(({ pool_assets }) => { @@ -79,7 +78,8 @@ export const useTokenList = () => { } }, { - enabled: Boolean(poolsListResponse?.pools && config), + enabled: Boolean(poolsListResponse?.pools) && + !isConfigLoading, refetchOnMount: false, onError(e) { console.error('Error generating token list:', e)