fix: problem with endless loading of balances and names

leather-io · Apr 23, 2024 · 1d6680e · 1d6680e
1 parent b0276ec
commit 1d6680e
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 33 deletions.
diff --git 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,10 @@ 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]);
+  return useGetBnsNamesOwnedByAddress(address, {
+    select: resp => {
+      const names = resp.names ?? [];
+      return names[0] || 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
@@ -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
@@ -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
@@ -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
       <styled.span
         className={shimmerStyles}
         textStyle="label.02"
-        data-state={isLoading ? 'loading' : undefined}
+        data-state={isFetching ? 'loading' : undefined}
       >
         {totalUsdBalance}
       </styled.span>

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
@@ -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 (
       <AccountListItemLayout
         accountAddresses={<AcccountAddresses index={index} />}
-        accountName={<AccountNameLayout isLoading={isLoadingBnsName}>{name}</AccountNameLayout>}
+        accountName={<AccountNameLayout isLoading={isFetchingBnsName}>{name}</AccountNameLayout>}
         avatar={
           <AccountAvatarItem
             index={index}

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -39,7 +39,7 @@ interface ChooseAccountItemProps extends FlexProps {
 }
 const ChooseAccountItem = memo(
   ({ account, isLoading, onSelectAccount }: ChooseAccountItemProps) => {
-    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
@@ -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}
         >
           <AccountActions />

diff --git a/...es/send/send-crypto-asset-form/components/recipient-accounts-dialog/account-list-item.tsx b/...es/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/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
@@ -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
@@ -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
@@ -22,7 +22,7 @@ export function AccountCard() {
       switchAccount={<></>}
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
-      isLoadingBnsName={false}
+      isFetchingBnsName={false}
     >
       <Flex justify="space-between">
         <IconButton icon={<ArrowUpIcon />} label="Send" />
@@ -42,7 +42,7 @@ export function AccountCardLoading() {
       switchAccount={<></>}
       toggleSwitchAccount={() => null}
       isLoadingBalance
-      isLoadingBnsName={false}
+      isFetchingBnsName={false}
     >
       <Flex justify="space-between">
         <IconButton icon={<ArrowUpIcon />} label="Send" />
@@ -62,7 +62,7 @@ export function AccountCardBnsNameLoading() {
       switchAccount={<></>}
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
-      isLoadingBnsName
+      isFetchingBnsName
     >
       <Flex justify="space-between">
         <IconButton icon={<ArrowUpIcon />} label="Send" />

diff --git 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({
       >
         <Flex>
           <AccountNameLayout
-            isLoading={isLoadingBnsName}
+            isLoading={isFetchingBnsName}
             data-testid={SettingsSelectors.CurrentAccountDisplayName}
             textStyle="label.01"
           >