diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx index a44aa2621..cf87be53f 100644 --- a/packages/app/features/home/screen.tsx +++ b/packages/app/features/home/screen.tsx @@ -147,9 +147,9 @@ function HomeSearchBar() { export function HomeScreen() { const media = useMedia() const [queryParams] = useRootScreenParams() - const { data: sendAccount, isLoading: sendAccountLoading } = useSendAccount() + const { data: sendAccount, isLoading: isSendAccountLoading } = useSendAccount() const { search } = queryParams - const { balances } = useSendAccountBalances() + const { balances, isLoading: isBalanceLoading } = useSendAccountBalances() const usdcBalance = balances?.[0]?.result const canSend = !!sendAccount && usdcBalance && usdcBalance > 0n @@ -169,7 +169,7 @@ export function HomeScreen() { {(() => { switch (true) { - case sendAccountLoading: + case isSendAccountLoading || isBalanceLoading: return ( diff --git a/packages/app/utils/useSendAccountBalances.ts b/packages/app/utils/useSendAccountBalances.ts index 7b5696444..cdd55611b 100644 --- a/packages/app/utils/useSendAccountBalances.ts +++ b/packages/app/utils/useSendAccountBalances.ts @@ -6,7 +6,7 @@ import { usdcAbi, } from '@my/wagmi' import { useBalance, useReadContracts } from 'wagmi' -import { useSendAccounts } from './send-accounts' +import { useSendAccount } from './send-accounts' import { useTokenPrices } from './useTokenPrices' const usdcBaseContract = { @@ -23,10 +23,9 @@ const sendBaseContract = { export const useSendAccountBalances = () => { const { data: tokenPrices } = useTokenPrices() - const { data: sendAccounts } = useSendAccounts() - const sendAccount = sendAccounts?.[0] + const { data: sendAccount } = useSendAccount() - const { data: tokenBalances, isPending: isPendingTokenBalances } = useReadContracts({ + const { data: tokenBalances, isPending: isLoadingTokenBalances } = useReadContracts({ query: { enabled: !!sendAccount }, contracts: [ { @@ -42,14 +41,14 @@ export const useSendAccountBalances = () => { ], }) - const { data: ethBalanceOnBase, isPending: isPendingEthBalanceOnBase } = useBalance({ + const { data: ethBalanceOnBase, isLoading: isLoadingEthBalanceOnBase } = useBalance({ address: sendAccount?.address, query: { enabled: !!sendAccount }, chainId: baseMainnet.id, }) - const isPending = isPendingTokenBalances || isPendingEthBalanceOnBase - const balances = isPending + const isLoading = isLoadingTokenBalances || isLoadingEthBalanceOnBase + const balances = isLoading ? undefined : { eth: ethBalanceOnBase, @@ -66,5 +65,5 @@ export const useSendAccountBalances = () => { (Number(ethBalanceOnBase?.value ?? 0n) / 10 ** 18) * tokenPrices.ethereum.usd const totalBalance = usdcBalanceInUsd + sendBalanceInUsd + ethBalanceInUsd - return { balances, totalBalance, isPending } + return { balances, totalBalance, isLoading } }