From f69c12d2bd645e50c8cdf1399b99bc4a87345701 Mon Sep 17 00:00:00 2001 From: alter-eggo Date: Tue, 23 Apr 2024 20:36:08 +0400 Subject: [PATCH] fix: problem with endless loading of balances and names --- .../common/hooks/account/use-account-names.ts | 25 ++++++++++--------- .../hooks/balance/btc/use-btc-balance.ts | 4 ++- .../hooks/balance/use-total-balance.tsx | 11 +++++++- src/app/components/account-total-balance.tsx | 4 +-- .../stacks/stacks-crypto-assets.tsx | 1 + .../components/switch-account-list-item.tsx | 4 +-- .../choose-account/components/accounts.tsx | 3 ++- src/app/pages/home/home.tsx | 4 +-- .../account-list-item.tsx | 2 +- .../bitcoin/address/utxos-by-address.hooks.ts | 7 +----- .../bitcoin/balance/btc-balance.hooks.ts | 2 ++ .../btc-native-segwit-balance.hooks.ts | 4 ++- src/app/query/stacks/bns/bns.hooks.ts | 4 --- .../account/account.card.stories.tsx | 6 ++--- .../ui/components/account/account.card.tsx | 6 ++--- 15 files changed, 48 insertions(+), 39 deletions(-) diff --git a/src/app/common/hooks/account/use-account-names.ts b/src/app/common/hooks/account/use-account-names.ts index 71614800024..f556a58a3db 100644 --- a/src/app/common/hooks/account/use-account-names.ts +++ b/src/app/common/hooks/account/use-account-names.ts @@ -4,10 +4,8 @@ import { isUndefined } from '@shared/utils'; import { parseIfValidPunycode } from '@app/common/utils'; import { getAutogeneratedAccountDisplayName } from '@app/common/utils/get-account-display-name'; -import { - useCurrentAccountNames, - useGetAccountNamesByAddressQuery, -} from '@app/query/stacks/bns/bns.hooks'; +import { useCurrentAccountNames } from '@app/query/stacks/bns/bns.hooks'; +import { useGetBnsNamesOwnedByAddress } from '@app/query/stacks/bns/bns.query'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; export function useCurrentAccountDisplayName() { @@ -23,12 +21,15 @@ export function useCurrentAccountDisplayName() { } export function useAccountDisplayName({ address, index }: { index: number; address: string }) { - const { data: names = [], isLoading } = useGetAccountNamesByAddressQuery(address); - return useMemo(() => { - const name = names[0] || getAutogeneratedAccountDisplayName(index); - return { - name, - isLoading, - }; - }, [names, index, isLoading]); + const query = useGetBnsNamesOwnedByAddress(address, { + select: resp => { + const names = resp.names ?? []; + return names[0] || getAutogeneratedAccountDisplayName(index); + }, + }); + + return { + ...query, + data: query.data || getAutogeneratedAccountDisplayName(index), + }; } diff --git a/src/app/common/hooks/balance/btc/use-btc-balance.ts b/src/app/common/hooks/balance/btc/use-btc-balance.ts index 3012db712a8..2965ab84e16 100644 --- a/src/app/common/hooks/balance/btc/use-btc-balance.ts +++ b/src/app/common/hooks/balance/btc/use-btc-balance.ts @@ -11,6 +11,7 @@ export function useBtcAssetBalance(btcAddress: string) { const { btcBalance: btcAssetBalance, isLoading, + isFetching, isInitialLoading, } = useNativeSegwitBalance(btcAddress); @@ -28,8 +29,9 @@ export function useBtcAssetBalance(btcAddress: string) { baseCurrencyAmountInQuote(btcAssetBalance.balance, btcMarketData) ), isLoading, + isFetching, isInitialLoading, }), - [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading] + [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading, isFetching] ); } diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx index 91b54228fc3..107dfa4e0f0 100644 --- a/src/app/common/hooks/balance/use-total-balance.tsx +++ b/src/app/common/hooks/balance/use-total-balance.tsx @@ -20,13 +20,19 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) const stxMarketData = useCryptoCurrencyMarketDataMeanAverage('STX'); // get stx balance - const { data: balances, isLoading, isInitialLoading } = useStacksAccountBalances(stxAddress); + const { + data: balances, + isLoading, + isInitialLoading, + isFetching: isFetchingStacksBalance, + } = useStacksAccountBalances(stxAddress); const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX'); // get btc balance const { btcAvailableAssetBalance, isLoading: isLoadingBtcBalance, + isFetching: isFetchingBtcBalance, isInitialLoading: isInititalLoadingBtcBalance, } = useBtcAssetBalance(btcAddress); @@ -44,6 +50,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) ), isLoading: isLoading || isLoadingBtcBalance, isInitialLoading: isInitialLoading || isInititalLoadingBtcBalance, + isFetching: isFetchingStacksBalance || isFetchingBtcBalance, }; }, [ btcAvailableAssetBalance.balance, @@ -54,5 +61,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) stxBalance, isLoading, isLoadingBtcBalance, + isFetchingStacksBalance, + isFetchingBtcBalance, ]); } diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx index 1e7cfcf6dac..39138230f2b 100644 --- a/src/app/components/account-total-balance.tsx +++ b/src/app/components/account-total-balance.tsx @@ -13,7 +13,7 @@ interface AccountTotalBalanceProps { } export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTotalBalanceProps) => { - const { totalUsdBalance, isLoading, isInitialLoading } = useTotalBalance({ + const { totalUsdBalance, isFetching, isInitialLoading } = useTotalBalance({ btcAddress, stxAddress, }); @@ -25,7 +25,7 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota {totalUsdBalance} diff --git a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx index 77dab15147f..ffbb6691fe7 100644 --- a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx @@ -14,6 +14,7 @@ interface StacksCryptoAssetsProps { } export function StacksCryptoAssets({ account }: StacksCryptoAssetsProps) { const { data: names = [] } = useCurrentAccountNames(); + const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(account); const analytics = useAnalytics(); diff --git a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx index 323882e01b3..c04ab6a1814 100644 --- a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx +++ b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx @@ -27,7 +27,7 @@ export const SwitchAccountListItem = memo( 'SWITCH_ACCOUNTS' + stxAddress || btcAddress ); const { handleSwitchAccount } = useSwitchAccount(handleClose); - const { name, isLoading: isLoadingBnsName } = useAccountDisplayName({ + const { data: name = '', isFetching: isFetchingBnsName } = useAccountDisplayName({ address: stxAddress, index, }); @@ -43,7 +43,7 @@ export const SwitchAccountListItem = memo( return ( } - accountName={{name}} + accountName={{name}} avatar={ { - const { name } = useAccountDisplayName(account); + const { data: name = '' } = useAccountDisplayName(account); + const btcAddress = useNativeSegwitAccountIndexAddressIndexZero(account.index); const accountSlug = useMemo(() => slugify(`Account ${account?.index + 1}`), [account?.index]); diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 3c2c1225466..6c8f90ef9c1 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -28,7 +28,7 @@ export function Home() { const navigate = useNavigate(); const account = useCurrentStacksAccount(); - const { name, isLoading: isLoadingBnsName } = useAccountDisplayName({ + const { data: name = '', isFetching: isFetchingBnsName } = useAccountDisplayName({ address: account?.address || '', index: account?.index || 0, }); @@ -56,7 +56,7 @@ export function Home() { /> } toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} - isLoadingBnsName={isLoadingBnsName} + isFetchingBnsName={isFetchingBnsName} isLoadingBalance={isInitialLoading} > diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/account-list-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/account-list-item.tsx index 08da077101a..8176634ca92 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/account-list-item.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/account-list-item.tsx @@ -23,7 +23,7 @@ export const AccountListItem = memo(({ index, stacksAccount, onClose }: AccountL BitcoinSendFormValues | StacksSendFormValues >(); const stacksAddress = stacksAccount?.address || ''; - const { name } = useAccountDisplayName({ address: stacksAddress, index }); + const { data: name = '' } = useAccountDisplayName({ address: stacksAddress, index }); const bitcoinSigner = useNativeSegwitSigner(index); const bitcoinAddress = bitcoinSigner?.(0).address || ''; diff --git a/src/app/query/bitcoin/address/utxos-by-address.hooks.ts b/src/app/query/bitcoin/address/utxos-by-address.hooks.ts index 40567d97db6..05a15ecf1a5 100644 --- a/src/app/query/bitcoin/address/utxos-by-address.hooks.ts +++ b/src/app/query/bitcoin/address/utxos-by-address.hooks.ts @@ -117,21 +117,16 @@ function useFilterInscriptionsByAddress(address: string) { const { data: inscriptionsList, hasNextPage: hasMoreInscriptionsToLoad, - isLoading: isLoadingInscriptions, isInitialLoading: isInitialLoadingInscriptions, } = useInscriptionsByAddressQuery(address); const filterOutInscriptions = useCallback( (utxos: UtxoResponseItem[]) => { - // While infinite query checks if has more data to load, or Stamps - // are loading, assume nothing is spendable - if (hasMoreInscriptionsToLoad || isLoadingInscriptions) return []; - const inscriptions = inscriptionsList?.pages.flatMap(page => page.results) ?? []; return filterUtxosWithInscriptions(inscriptions, utxos); }, - [hasMoreInscriptionsToLoad, inscriptionsList?.pages, isLoadingInscriptions] + [inscriptionsList?.pages] ); return { diff --git a/src/app/query/bitcoin/balance/btc-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-balance.hooks.ts index c5deba04ffb..d7b5f85a609 100644 --- a/src/app/query/bitcoin/balance/btc-balance.hooks.ts +++ b/src/app/query/bitcoin/balance/btc-balance.hooks.ts @@ -17,6 +17,7 @@ export function useGetBitcoinBalanceByAddress(address: string) { data: utxos, isInitialLoading, isLoading, + isFetching, } = useNativeSegwitUtxosByAddress({ address, filterInscriptionUtxos: true, @@ -33,5 +34,6 @@ export function useGetBitcoinBalanceByAddress(address: string) { balance, isInitialLoading, isLoading, + isFetching, }; } diff --git a/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts index acc34936cc9..594c21f8feb 100644 --- a/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts +++ b/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts @@ -7,7 +7,8 @@ import { useGetBitcoinBalanceByAddress } from './btc-balance.hooks'; // Balance is derived from a single query in address reuse mode export function useNativeSegwitBalance(address: string) { - const { balance, isInitialLoading, isLoading } = useGetBitcoinBalanceByAddress(address); + const { balance, isInitialLoading, isLoading, isFetching } = + useGetBitcoinBalanceByAddress(address); const wrappedBalance = useMemo( () => createBitcoinCryptoCurrencyAssetTypeWrapper(balance), @@ -18,6 +19,7 @@ export function useNativeSegwitBalance(address: string) { btcBalance: wrappedBalance, isInitialLoading, isLoading, + isFetching, }; } diff --git a/src/app/query/stacks/bns/bns.hooks.ts b/src/app/query/stacks/bns/bns.hooks.ts index bddf757f089..d0aea0e3fc6 100644 --- a/src/app/query/stacks/bns/bns.hooks.ts +++ b/src/app/query/stacks/bns/bns.hooks.ts @@ -13,7 +13,3 @@ export function useCurrentAccountNames() { }, }); } - -export function useGetAccountNamesByAddressQuery(address: string) { - return useGetBnsNamesOwnedByAddress(address, { select: resp => resp.names ?? [] }); -} diff --git a/src/app/ui/components/account/account.card.stories.tsx b/src/app/ui/components/account/account.card.stories.tsx index dac42307e68..6f5e7ef3c97 100644 --- a/src/app/ui/components/account/account.card.stories.tsx +++ b/src/app/ui/components/account/account.card.stories.tsx @@ -22,7 +22,7 @@ export function AccountCard() { switchAccount={<>} toggleSwitchAccount={() => null} isLoadingBalance={false} - isLoadingBnsName={false} + isFetchingBnsName={false} > } label="Send" /> @@ -42,7 +42,7 @@ export function AccountCardLoading() { switchAccount={<>} toggleSwitchAccount={() => null} isLoadingBalance - isLoadingBnsName={false} + isFetchingBnsName={false} > } label="Send" /> @@ -62,7 +62,7 @@ export function AccountCardBnsNameLoading() { switchAccount={<>} toggleSwitchAccount={() => null} isLoadingBalance={false} - isLoadingBnsName + isFetchingBnsName > } label="Send" /> diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx index 32565fd937b..c3e090372f0 100644 --- a/src/app/ui/components/account/account.card.tsx +++ b/src/app/ui/components/account/account.card.tsx @@ -14,7 +14,7 @@ interface AccountCardProps { children: ReactNode; switchAccount: ReactNode; toggleSwitchAccount(): void; - isLoadingBnsName: boolean; + isFetchingBnsName: boolean; isLoadingBalance: boolean; } @@ -24,7 +24,7 @@ export function AccountCard({ switchAccount, toggleSwitchAccount, children, - isLoadingBnsName, + isFetchingBnsName, isLoadingBalance, }: AccountCardProps) { return ( @@ -44,7 +44,7 @@ export function AccountCard({ >