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 37e2a70cd0a..688d39d5852 100644
--- a/src/app/common/hooks/balance/btc/use-btc-balance.ts
+++ b/src/app/common/hooks/balance/btc/use-btc-balance.ts
@@ -8,7 +8,11 @@ import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/marke
export function useBtcAssetBalance(btcAddress: string) {
const btcMarketData = useCryptoCurrencyMarketData('BTC');
- const btcAssetBalance = useNativeSegwitBalance(btcAddress);
+ const {
+ btcBalance: btcAssetBalance,
+ isLoading,
+ isInitialLoading,
+ } = useNativeSegwitBalance(btcAddress);
return useMemo(
() => ({
@@ -23,7 +27,9 @@ export function useBtcAssetBalance(btcAddress: string) {
btcAvailableUsdBalance: i18nFormatCurrency(
baseCurrencyAmountInQuote(btcAssetBalance.balance, btcMarketData)
),
+ isLoading,
+ isInitialLoading,
}),
- [btcAddress, btcAssetBalance, btcMarketData]
+ [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading]
);
}
diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx
index 4f84a9eebbf..ac6c01904cc 100644
--- a/src/app/common/hooks/balance/use-total-balance.tsx
+++ b/src/app/common/hooks/balance/use-total-balance.tsx
@@ -20,19 +20,20 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
const stxMarketData = useCryptoCurrencyMarketData('STX');
// get stx balance
- const { data: balances, isLoading } = useStacksAccountBalances(stxAddress);
+ const { data: balances, isLoading, isInitialLoading } = useStacksAccountBalances(stxAddress);
const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX');
// get btc balance
- const btcBalance = useBtcAssetBalance(btcAddress);
+ const {
+ btcAvailableAssetBalance,
+ isLoading: isLoadingBtcBalance,
+ isInitialLoading: isInititalLoadingBtcBalance,
+ } = useBtcAssetBalance(btcAddress);
return useMemo(() => {
// calculate total balance
const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData);
- const btcUsdAmount = baseCurrencyAmountInQuote(
- btcBalance.btcAvailableAssetBalance.balance,
- btcMarketData
- );
+ const btcUsdAmount = baseCurrencyAmountInQuote(btcAvailableAssetBalance.balance, btcMarketData);
const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) };
return {
@@ -41,7 +42,17 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
totalBalance,
totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2
),
- isLoading,
+ isLoading: isLoading || isLoadingBtcBalance,
+ isInitialLoading: isInitialLoading || isInititalLoadingBtcBalance,
};
- }, [btcBalance, btcMarketData, stxMarketData, isLoading, stxBalance]);
+ }, [
+ btcAvailableAssetBalance.balance,
+ btcMarketData,
+ isInitialLoading,
+ isInititalLoadingBtcBalance,
+ stxMarketData,
+ stxBalance,
+ isLoading,
+ isLoadingBtcBalance,
+ ]);
}
diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
index 0606100efd9..a5a806bfc81 100644
--- a/src/app/components/account-total-balance.tsx
+++ b/src/app/components/account-total-balance.tsx
@@ -1,26 +1,57 @@
import { memo } from 'react';
-import { styled } from 'leather-styles/jsx';
+import { css } from 'leather-styles/css';
+import { Box, type BoxProps, styled } from 'leather-styles/jsx';
import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
-import { shimmerStyles } from '../../../theme/global/shimmer-styles';
+import { shimmerStyles } from '../../shared/shimmer-styles';
-interface AccountTotalBalanceProps {
+interface AccountTotalBalanceProps extends BoxProps {
btcAddress: string;
stxAddress: string;
}
+
+export function AccountBalanceShimmer({ ...rest }) {
+ return (
+
+ );
+}
+
export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTotalBalanceProps) => {
- const { totalUsdBalance, isLoading } = useTotalBalance({ btcAddress, stxAddress });
+ const { totalUsdBalance, isLoading, isInitialLoading } = useTotalBalance({
+ btcAddress,
+ stxAddress,
+ });
if (!totalUsdBalance) return null;
+ if (isInitialLoading) {
+ return ;
+ }
+
return (
{totalUsdBalance}
diff --git a/src/app/components/account/account-name.tsx b/src/app/components/account/account-name.tsx
index 9a267497878..e6379d19171 100644
--- a/src/app/components/account/account-name.tsx
+++ b/src/app/components/account/account-name.tsx
@@ -1,8 +1,9 @@
import { memo } from 'react';
+import { css } from 'leather-styles/css';
import { styled } from 'leather-styles/jsx';
-import { shimmerStyles } from '../../../../theme/global/shimmer-styles';
+import { shimmerStyles } from '../../../shared/shimmer-styles';
interface AccountNameLayoutProps {
children: React.ReactNode;
@@ -11,11 +12,11 @@ interface AccountNameLayoutProps {
export const AccountNameLayout = memo(({ children, isLoading }: AccountNameLayoutProps) => (
{children}
diff --git a/src/app/components/balance-btc.tsx b/src/app/components/balance-btc.tsx
index 9455316d660..ab3ef7825bf 100644
--- a/src/app/components/balance-btc.tsx
+++ b/src/app/components/balance-btc.tsx
@@ -3,7 +3,7 @@ import { useCurrentNativeSegwitAddressBalance } from '@app/query/bitcoin/balance
import { Caption } from '@app/ui/components/typography/caption';
export function BtcBalance() {
- const balance = useCurrentNativeSegwitAddressBalance();
+ const { balance } = useCurrentNativeSegwitAddressBalance();
return
{formatMoney(balance)};
}
diff --git a/src/app/components/balance/bitcoin-balance-loader.tsx b/src/app/components/balance/bitcoin-balance-loader.tsx
index b4f77a3e0dc..ff3d4a7426b 100644
--- a/src/app/components/balance/bitcoin-balance-loader.tsx
+++ b/src/app/components/balance/bitcoin-balance-loader.tsx
@@ -4,10 +4,10 @@ import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-se
interface BitcoinBalanceLoaderProps {
address: string;
- children(balance: BitcoinCryptoCurrencyAssetBalance): React.ReactNode;
+ children(balance: BitcoinCryptoCurrencyAssetBalance, isInitialLoading: boolean): React.ReactNode;
}
export function BitcoinBalanceLoader({ address, children }: BitcoinBalanceLoaderProps) {
- const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(address);
- return children(btcCryptoCurrencyAssetBalance);
+ const { btcBalance, isInitialLoading } = useNativeSegwitBalance(address);
+ return children(btcBalance, isInitialLoading);
}
diff --git a/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
index 7c8ad19ad1d..29a9732b609 100644
--- a/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
+++ b/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
@@ -20,7 +20,7 @@ interface UseBitcoinCustomFeeArgs {
recipient: string;
}
export function useBitcoinCustomFee({ amount, isSendingMax, recipient }: UseBitcoinCustomFeeArgs) {
- const balance = useCurrentNativeSegwitAddressBalance();
+ const { balance } = useCurrentNativeSegwitAddressBalance();
const { data: utxos = [] } = useCurrentNativeSegwitUtxos();
const btcMarketData = useCryptoCurrencyMarketData('BTC');
diff --git a/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts b/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
index 786016ccdd6..14fe826a0c8 100644
--- a/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
+++ b/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
@@ -43,7 +43,7 @@ export function useBitcoinFeesList({
recipient,
utxos,
}: UseBitcoinFeesListArgs) {
- const balance = useCurrentNativeSegwitAddressBalance();
+ const { balance } = useCurrentNativeSegwitAddressBalance();
const btcMarketData = useCryptoCurrencyMarketData('BTC');
const { data: feeRates, isLoading } = useAverageBitcoinFeeRates();
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
index 1dd6b2ad996..2e405a07c90 100644
--- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
+++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -15,7 +15,8 @@ import { Brc20TokenAssetItemLayout } from './components/brc20-token-asset-item.l
export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
const navigate = useNavigate();
const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
- const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
+ const { btcBalance: btcCryptoCurrencyAssetBalance } =
+ useNativeSegwitBalance(currentAccountBtcAddress);
const hasPositiveBtcBalanceForFees =
btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx
index df157015680..13de5d43f0a 100644
--- a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx
+++ b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx
@@ -31,11 +31,12 @@ export function CryptoAssetList({
{signer => (
- {balance => (
+ {(balance, isLoading) => (
}
onClick={() => onItemClick(balance)}
+ isLoading={isLoading}
/>
)}
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index b4bc1b9b04d..1e1517c6be0 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -4,6 +4,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx';
import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
+import { AccountBalanceShimmer } from '@app/components/account-total-balance';
import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -18,6 +19,7 @@ interface CryptoCurrencyAssetItemLayoutProps {
address?: string;
assetBalance: AllCryptoCurrencyAssetBalances;
icon: React.ReactNode;
+ isLoading?: boolean;
onClick?(): void;
rightElement?: React.ReactNode;
usdBalance?: string;
@@ -31,10 +33,41 @@ export function CryptoCurrencyAssetItemLayout({
onClick,
rightElement,
usdBalance,
+ isLoading,
}: CryptoCurrencyAssetItemLayoutProps) {
const { balance, dataTestId, formattedBalance, title } =
parseCryptoCurrencyAssetBalance(assetBalance);
+ const titleRight = isLoading ? (
+
+ ) : rightElement ? (
+ rightElement
+ ) : (
+
+
+ {formattedBalance.value} {additionalBalanceInfo}
+
+
+ );
+
+ const captionRight = isLoading ? (
+
+ ) : rightElement ? (
+ rightElement
+ ) : (
+
+
+
+ {balance.amount.toNumber() > 0 && address ? usdBalance : null}
+ {additionalUsdBalanceInfo}
+
+
+
+ );
const isInteractive = !!onClick;
const content = (
@@ -42,33 +75,8 @@ export function CryptoCurrencyAssetItemLayout({
flagImg={icon}
titleLeft={title}
captionLeft={balance.symbol}
- titleRight={
- rightElement ? (
- rightElement
- ) : (
-
-
- {formattedBalance.value} {additionalBalanceInfo}
-
-
- )
- }
- captionRight={
- !rightElement && (
-
-
-
- {balance.amount.toNumber() > 0 && address ? usdBalance : null}
- {additionalUsdBalanceInfo}
-
-
-
- )
- }
+ titleRight={titleRight}
+ captionRight={captionRight}
/>
);
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
index 4e63f2ebde6..638d710153f 100644
--- a/src/app/features/asset-list/asset-list.tsx
+++ b/src/app/features/asset-list/asset-list.tsx
@@ -27,7 +27,8 @@ export function AssetsList() {
const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
const network = useCurrentNetwork();
- const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress);
+ const { btcAvailableAssetBalance, btcAvailableUsdBalance, isInitialLoading } =
+ useBtcAssetBalance(btcAddress);
const { whenWallet } = useWalletType();
@@ -40,6 +41,7 @@ export function AssetsList() {
usdBalance={btcAvailableUsdBalance}
icon={}
address={btcAddress}
+ isLoading={isInitialLoading}
/>
),
ledger: (
@@ -48,6 +50,7 @@ export function AssetsList() {
usdBalance={btcAvailableUsdBalance}
icon={}
address={btcAddress}
+ isLoading={isInitialLoading}
rightElement={
hasBitcoinLedgerKeys ? undefined :
}
diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
index 08007d9db18..c814d491fc8 100644
--- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
+++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
@@ -46,7 +46,7 @@ export function BitcoinChooseFee({
...rest
}: BitcoinChooseFeeProps) {
const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
- const btcBalance = useNativeSegwitBalance(nativeSegwitSigner.address);
+ const { btcBalance } = useNativeSegwitBalance(nativeSegwitSigner.address);
const hasAmount = amount.amount.isGreaterThan(0);
const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate);
diff --git a/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts b/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
index 526de3835bd..58168c1641b 100644
--- a/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
+++ b/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
@@ -7,7 +7,7 @@ import { useCurrentNativeSegwitAddressBalance } from '@app/query/bitcoin/balance
export function useValidateBitcoinSpend(amount?: Money, isSendingMax?: boolean) {
const [showInsufficientBalanceError, setShowInsufficientBalanceError] = useState(false);
- const balance = useCurrentNativeSegwitAddressBalance();
+ const { balance } = useCurrentNativeSegwitAddressBalance();
return {
showInsufficientBalanceError,
diff --git a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
index 377777673d1..ed426dc800c 100644
--- a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
+++ b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
@@ -92,7 +92,8 @@ function PendingBrcTransfer({ order }: PendingBrcTransferProps) {
const navigate = useNavigate();
const ordinalsbotClient = useOrdinalsbotClient();
const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
- const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
+ const { btcBalance: btcCryptoCurrencyAssetBalance } =
+ useNativeSegwitBalance(currentAccountBtcAddress);
const hasPositiveBtcBalanceForFees =
btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);
diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
index 675fa68984b..40b0aedd980 100644
--- a/src/app/pages/home/home.tsx
+++ b/src/app/pages/home/home.tsx
@@ -30,7 +30,10 @@ export function Home() {
const account = useCurrentStacksAccount();
const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
- const totalBalance = useTotalBalance({ btcAddress, stxAddress: account?.address || '' });
+ const { totalUsdBalance, isInitialLoading } = useTotalBalance({
+ btcAddress,
+ stxAddress: account?.address || '',
+ });
useOnMount(() => {
if (decodedAuthRequest) navigate(RouteUrls.ChooseAccount);
@@ -41,7 +44,7 @@ export function Home() {
accountCard={
}
toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+ isLoadingBalance={isInitialLoading}
>
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index 5abfb067991..e7b99a86efc 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -37,7 +37,7 @@ export function BtcSendForm() {
const btcMarketData = useCryptoCurrencyMarketData(symbol);
const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
- const btcBalance = useNativeSegwitBalance(nativeSegwitSigner.address);
+ const { btcBalance } = useNativeSegwitBalance(nativeSegwitSigner.address);
const {
calcMaxSpend,
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
index f976ed866e4..ace24a7e2e1 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
@@ -37,7 +37,9 @@ export function useBtcSendForm() {
const currentNetwork = useCurrentNetwork();
const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
const { data: utxos = [], refetch } = useCurrentNativeSegwitUtxos();
- const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(nativeSegwitSigner.address);
+ const { btcBalance: btcCryptoCurrencyAssetBalance } = useNativeSegwitBalance(
+ nativeSegwitSigner.address
+ );
const sendFormNavigate = useSendFormNavigate();
const calcMaxSpend = useCalculateMaxBitcoinSpend();
const { onFormStateChange } = useUpdatePersistedSendFormValues();
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 5407c57f2c0..c5a33cd08e1 100644
--- a/src/app/query/bitcoin/address/utxos-by-address.hooks.ts
+++ b/src/app/query/bitcoin/address/utxos-by-address.hooks.ts
@@ -56,10 +56,11 @@ export function useNativeSegwitUtxosByAddress({
filterInscriptionUtxos,
filterPendingTxsUtxos,
}: UseFilterUtxosByAddressArgs) {
- const filterOutInscriptions = useFilterInscriptionsByAddress(address);
- const filterOutPendingTxsUtxos = useFilterPendingUtxosByAddress(address);
+ const { filterOutInscriptions, isInitialLoadingInscriptions } =
+ useFilterInscriptionsByAddress(address);
+ const { filterOutPendingTxsUtxos, isInitialLoading } = useFilterPendingUtxosByAddress(address);
- return useGetUtxosByAddressQuery(address, {
+ const utxosQuery = useGetUtxosByAddressQuery(address, {
select(utxos) {
const filters = [];
if (filterPendingTxsUtxos) {
@@ -77,6 +78,12 @@ export function useNativeSegwitUtxosByAddress({
);
},
});
+
+ return {
+ ...utxosQuery,
+ isInitialLoading:
+ utxosQuery.isInitialLoading || isInitialLoading || isInitialLoadingInscriptions,
+ };
}
function useFilterInscriptionsByAddress(address: string) {
@@ -84,9 +91,10 @@ function useFilterInscriptionsByAddress(address: string) {
data: inscriptionsList,
hasNextPage: hasMoreInscriptionsToLoad,
isLoading: isLoadingInscriptions,
+ isInitialLoading: isInitialLoadingInscriptions,
} = useInscriptionsByAddressQuery(address);
- return useCallback(
+ const filterOutInscriptions = useCallback(
(utxos: UtxoResponseItem[]) => {
// While infinite query checks if has more data to load, or Stamps
// are loading, assume nothing is spendable
@@ -98,12 +106,18 @@ function useFilterInscriptionsByAddress(address: string) {
},
[hasMoreInscriptionsToLoad, inscriptionsList?.pages, isLoadingInscriptions]
);
+
+ return {
+ filterOutInscriptions,
+ isInitialLoadingInscriptions: hasMoreInscriptionsToLoad || isInitialLoadingInscriptions,
+ };
}
function useFilterPendingUtxosByAddress(address: string) {
- const { data: pendingInputs = [] } = useBitcoinPendingTransactionsInputs(address);
+ const { data: pendingInputs = [], isInitialLoading } =
+ useBitcoinPendingTransactionsInputs(address);
- return useCallback(
+ const filterOutPendingTxsUtxos = useCallback(
(utxos: UtxoResponseItem[]) => {
return utxos.filter(
utxo =>
@@ -114,4 +128,9 @@ function useFilterPendingUtxosByAddress(address: string) {
},
[address, pendingInputs]
);
+
+ return {
+ filterOutPendingTxsUtxos,
+ isInitialLoading,
+ };
}
diff --git a/src/app/query/bitcoin/balance/btc-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-balance.hooks.ts
index 15cfd4078de..94596c6e059 100644
--- a/src/app/query/bitcoin/balance/btc-balance.hooks.ts
+++ b/src/app/query/bitcoin/balance/btc-balance.hooks.ts
@@ -10,14 +10,24 @@ import { sumNumbers } from '@app/common/math/helpers';
import { useNativeSegwitUtxosByAddress } from '../address/utxos-by-address.hooks';
export function useGetBitcoinBalanceByAddress(address: string) {
- const { data: utxos } = useNativeSegwitUtxosByAddress({
+ const {
+ data: utxos,
+ isInitialLoading,
+ isLoading,
+ } = useNativeSegwitUtxosByAddress({
address,
filterInscriptionUtxos: true,
filterPendingTxsUtxos: true,
});
- return useMemo(() => {
+ const balance = useMemo(() => {
if (isUndefined(utxos)) return createMoney(new BigNumber(0), 'BTC');
return createMoney(sumNumbers(utxos.map(utxo => utxo.value)), 'BTC');
}, [utxos]);
+
+ return {
+ balance,
+ isInitialLoading,
+ isLoading,
+ };
}
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 ba76ea285cd..acc34936cc9 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,8 +7,18 @@ import { useGetBitcoinBalanceByAddress } from './btc-balance.hooks';
// Balance is derived from a single query in address reuse mode
export function useNativeSegwitBalance(address: string) {
- const balance = useGetBitcoinBalanceByAddress(address);
- return useMemo(() => createBitcoinCryptoCurrencyAssetTypeWrapper(balance), [balance]);
+ const { balance, isInitialLoading, isLoading } = useGetBitcoinBalanceByAddress(address);
+
+ const wrappedBalance = useMemo(
+ () => createBitcoinCryptoCurrencyAssetTypeWrapper(balance),
+ [balance]
+ );
+
+ return {
+ btcBalance: wrappedBalance,
+ isInitialLoading,
+ isLoading,
+ };
}
export function useCurrentNativeSegwitAddressBalance() {
diff --git a/src/app/ui/components/account/account.card.stories.tsx b/src/app/ui/components/account/account.card.stories.tsx
index 8a47ba3c4e8..e3fb53ae29c 100644
--- a/src/app/ui/components/account/account.card.stories.tsx
+++ b/src/app/ui/components/account/account.card.stories.tsx
@@ -21,6 +21,7 @@ export function AccountCard() {
balance="$1,000"
switchAccount={<>>}
toggleSwitchAccount={() => null}
+ isLoadingBalance={false}
>
} label="Send" />
diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
index 8508f21cfb9..90514d7bd9e 100644
--- a/src/app/ui/components/account/account.card.tsx
+++ b/src/app/ui/components/account/account.card.tsx
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
import { SettingsSelectors } from '@tests/selectors/settings.selectors';
import { Box, Flex, styled } from 'leather-styles/jsx';
+import { AccountBalanceShimmer } from '@app/components/account-total-balance';
import { Link } from '@app/ui/components/link/link';
import { ChevronDownIcon } from '@app/ui/icons';
@@ -12,6 +13,7 @@ interface AccountCardProps {
children: ReactNode;
switchAccount: ReactNode;
toggleSwitchAccount(): void;
+ isLoadingBalance: boolean;
}
export function AccountCard({
@@ -20,6 +22,7 @@ export function AccountCard({
switchAccount,
toggleSwitchAccount,
children,
+ isLoadingBalance,
}: AccountCardProps) {
return (
-
- {balance}
-
+
+ {isLoadingBalance ? (
+
+ ) : (
+ {balance}
+ )}
+
{switchAccount}
{children}
diff --git a/theme/global/shimmer-styles.ts b/src/shared/shimmer-styles.ts
similarity index 73%
rename from theme/global/shimmer-styles.ts
rename to src/shared/shimmer-styles.ts
index 549a0d4091f..db5d19ba555 100644
--- a/theme/global/shimmer-styles.ts
+++ b/src/shared/shimmer-styles.ts
@@ -1,10 +1,9 @@
-import { css } from 'leather-styles/css';
-
-export const shimmerStyles = css({
+export const shimmerStyles = {
'&[data-state=loading]': {
display: 'inline-block',
WebkitMask: 'linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%',
backgroundRepeat: 'no-repeat',
animation: 'shimmer 1.5s infinite',
+ color: 'ink.text-subdued',
},
-});
+};