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', }, -}); +};