From a11f6a6919d173f129ff1f4dab78a1a958377851 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Mon, 24 Jun 2024 20:33:52 -0500 Subject: [PATCH] fix: ledger bitcoin query --- package.json | 2 +- pnpm-lock.yaml | 10 +++--- .../hooks/balance/use-total-balance.tsx | 32 +++++++++++-------- .../components/loaders/btc-balance-loader.tsx | 20 ++++++++---- .../loaders/sip10-tokens-loader.tsx | 4 +-- .../loaders/stacks-account-loader.tsx | 2 +- .../components/loaders/stx-balance-loader.tsx | 10 +++--- .../features/activity-list/activity-list.tsx | 24 +++++++------- src/app/features/asset-list/asset-list.tsx | 28 ++++++++-------- .../brc20-token-asset-list.tsx | 4 +-- .../choose-asset-to-fund.tsx | 20 ++++++------ src/app/pages/home/components/send-button.tsx | 4 +-- src/app/pages/home/home.tsx | 4 ++- .../btc-balance-native-segwit.hooks.ts | 2 +- 14 files changed, 88 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index ae9a41745c4..8381113348e 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ "@leather.io/constants": "0.8.0", "@leather.io/crypto": "1.0.2", "@leather.io/models": "0.10.0", - "@leather.io/query": "0.9.0", + "@leather.io/query": "0.9.1", "@leather.io/tokens": "0.6.0", "@leather.io/ui": "1.5.0", "@leather.io/utils": "0.9.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7128943e36f..be7c0c2472c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,8 +48,8 @@ importers: specifier: 0.10.0 version: 0.10.0 '@leather.io/query': - specifier: 0.9.0 - version: 0.9.0(@stacks/network@6.13.0(encoding@0.1.13))(encoding@0.1.13)(react@18.3.1) + specifier: 0.9.1 + version: 0.9.1(@stacks/network@6.13.0(encoding@0.1.13))(encoding@0.1.13)(react@18.3.1) '@leather.io/tokens': specifier: 0.6.0 version: 0.6.0 @@ -2901,8 +2901,8 @@ packages: '@leather.io/prettier-config@0.5.0': resolution: {integrity: sha512-Pul+4MAyBKnQvqgcKJLbZl4DHnS4kCJzSuaYFW6cfHdre7BFn/iY6Er/Dvm9F8g7VMtkdYu68jEYxQ1Xc7A0KQ==} - '@leather.io/query@0.9.0': - resolution: {integrity: sha512-ZvgmAgHJknj5Qg8/bKgGnxRE9IU4M87hbjeEw9Byu/aBlCnHg1BHq6yUWVBCntHt7oEJapXS5cqY1PN8OB925A==} + '@leather.io/query@0.9.1': + resolution: {integrity: sha512-W3UCbnemmbTYEFjKrwn+5CGMmUYt0CMBLFto/7kQHVbdGQncNDZupH3L7a4DYOcKwEEuAVXmqTUfL6mJ1M0HTQ==} peerDependencies: react: '*' @@ -17583,7 +17583,7 @@ snapshots: - '@vue/compiler-sfc' - supports-color - '@leather.io/query@0.9.0(@stacks/network@6.13.0(encoding@0.1.13))(encoding@0.1.13)(react@18.3.1)': + '@leather.io/query@0.9.1(@stacks/network@6.13.0(encoding@0.1.13))(encoding@0.1.13)(react@18.3.1)': dependencies: '@fungible-systems/zone-file': 2.0.0 '@hirosystems/token-metadata-api-client': 1.2.0(encoding@0.1.13) diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx index 289f9ab55c9..2c8b7084838 100644 --- a/src/app/common/hooks/balance/use-total-balance.tsx +++ b/src/app/common/hooks/balance/use-total-balance.tsx @@ -20,15 +20,19 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) // get stx balance const { data: balance, - isFetching: isFetchingStacksBalance, - isLoading, - isPending, + isFetching: isFetchingStxBalance, + isLoading: isLoadingStxBalance, + isPending: isPendingStxBalance, } = useStxCryptoAssetBalance(stxAddress); const stxBalance = balance ? balance.totalBalance : createMoney(0, 'STX'); // get btc balance - const { balance: btcBalance, query: btcQueryResult } = - useBtcCryptoAssetBalanceNativeSegwit(btcAddress); + const { + balance: btcBalance, + isFetching: isFetchingBtcBalance, + isLoading: isLoadingBtcBalance, + isPending: isPendingBtcBalance, + } = useBtcCryptoAssetBalanceNativeSegwit(btcAddress); return useMemo(() => { // calculate total balance @@ -37,24 +41,24 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) }; return { + isFetching: isFetchingStxBalance || isFetchingBtcBalance, + isLoading: isLoadingStxBalance || isLoadingBtcBalance, + isPending: isPendingStxBalance || isPendingBtcBalance, totalBalance, totalUsdBalance: i18nFormatCurrency( totalBalance, totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2 ), - isLoading: isLoading || btcQueryResult.isLoading, - isPending: isPending || btcQueryResult.isPending, - isFetching: isFetchingStacksBalance || btcQueryResult.isFetching, }; }, [ btcBalance.availableBalance, btcMarketData, - btcQueryResult.isFetching, - btcQueryResult.isLoading, - btcQueryResult.isPending, - isFetchingStacksBalance, - isLoading, - isPending, + isFetchingBtcBalance, + isFetchingStxBalance, + isLoadingBtcBalance, + isLoadingStxBalance, + isPendingBtcBalance, + isPendingStxBalance, stxBalance, stxMarketData, ]); diff --git a/src/app/components/loaders/btc-balance-loader.tsx b/src/app/components/loaders/btc-balance-loader.tsx index f417eaf0c2f..3e3ff89a45a 100644 --- a/src/app/components/loaders/btc-balance-loader.tsx +++ b/src/app/components/loaders/btc-balance-loader.tsx @@ -1,5 +1,4 @@ import type { BtcCryptoAssetBalance } from '@leather.io/models'; -import { isFetchedWithSuccess, isInitializingData } from '@leather.io/query'; import { BtcAvatarIcon } from '@leather.io/ui'; import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; @@ -9,12 +8,21 @@ import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-it interface BtcBalanceLoaderProps { address: string; - children(balance: BtcCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode; + children(balance: BtcCryptoAssetBalance): React.ReactNode; } export function BtcBalanceLoader({ address, children }: BtcBalanceLoaderProps) { - const { balance, query: result } = useBtcCryptoAssetBalanceNativeSegwit(address); - if (isInitializingData(result)) return ; - if (!isFetchedWithSuccess(result)) + const { balance } = useBtcCryptoAssetBalanceNativeSegwit(address); + return children(balance); +} + +interface BtcAssetItemBalanceLoaderProps { + address: string; + children(balance: BtcCryptoAssetBalance, isLoading: boolean): React.ReactNode; +} +export function BtcAssetItemBalanceLoader({ address, children }: BtcAssetItemBalanceLoaderProps) { + const { balance, isError, isLoading } = useBtcCryptoAssetBalanceNativeSegwit(address); + if (isLoading) return ; + if (isError) return } title="Bitcoin" />; - return children(balance, result.isInitialLoading); + return children(balance, isLoading); } diff --git a/src/app/components/loaders/sip10-tokens-loader.tsx b/src/app/components/loaders/sip10-tokens-loader.tsx index b2b00611253..0456dbf16ff 100644 --- a/src/app/components/loaders/sip10-tokens-loader.tsx +++ b/src/app/components/loaders/sip10-tokens-loader.tsx @@ -10,6 +10,6 @@ interface Sip10TokensLoaderProps { children(isLoading: boolean, tokens: Sip10TokenAssetDetails[]): React.ReactNode; } export function Sip10TokensLoader({ address, filter, children }: Sip10TokensLoaderProps) { - const { isInitialLoading, tokens = [] } = useFilteredSip10Tokens({ address, filter }); - return children(isInitialLoading, tokens); + const { isLoading, tokens = [] } = useFilteredSip10Tokens({ address, filter }); + return children(isLoading, tokens); } diff --git a/src/app/components/loaders/stacks-account-loader.tsx b/src/app/components/loaders/stacks-account-loader.tsx index 84ccc9a1be9..3db04fadf16 100644 --- a/src/app/components/loaders/stacks-account-loader.tsx +++ b/src/app/components/loaders/stacks-account-loader.tsx @@ -16,7 +16,7 @@ export function CurrentStacksAccountLoader({ fallback, }: CurrentStacksAccountLoaderProps) { const currentAccount = useCurrentStacksAccount(); - if (!currentAccount) return fallback ? fallback : null; + if (!currentAccount) return fallback; return children(currentAccount); } diff --git a/src/app/components/loaders/stx-balance-loader.tsx b/src/app/components/loaders/stx-balance-loader.tsx index 2ea7131b982..dd5d22fb89e 100644 --- a/src/app/components/loaders/stx-balance-loader.tsx +++ b/src/app/components/loaders/stx-balance-loader.tsx @@ -10,11 +10,11 @@ import { StxAvatarIcon } from '@leather.io/ui'; import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error'; import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder'; -interface StxBalanceLoaderProps { +interface StxAssetItemBalanceLoaderProps { address: string; - children(balance: StxCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode; + children(balance: StxCryptoAssetBalance, isLoading: boolean): React.ReactNode; } -export function StxBalanceLoader({ address, children }: StxBalanceLoaderProps) { +export function StxAssetItemBalanceLoader({ address, children }: StxAssetItemBalanceLoaderProps) { const result = useStxCryptoAssetBalance(address); if (isInitializingData(result)) return ; if (isErrorTooManyRequests(result)) @@ -28,6 +28,6 @@ export function StxBalanceLoader({ address, children }: StxBalanceLoaderProps) { ); if (!isFetchedWithSuccess(result)) return } title="Stacks" />; - const { data: balance, isInitialLoading } = result; - return children(balance, isInitialLoading); + const { data: balance, isLoading } = result; + return children(balance, isLoading); } diff --git a/src/app/features/activity-list/activity-list.tsx b/src/app/features/activity-list/activity-list.tsx index c0e6bfa32a4..b7b0f99f9a5 100644 --- a/src/app/features/activity-list/activity-list.tsx +++ b/src/app/features/activity-list/activity-list.tsx @@ -50,8 +50,8 @@ export function ActivityList() { const updateSubmittedTxs = useUpdateSubmittedTransactions(); const [ - { isInitialLoading: isInitialLoadingNsBitcoinTransactions, data: nsBitcoinTransactions = [] }, - { isInitialLoading: isInitialLoadingTrBitcoinTransactions, data: trBitcoinTransactions = [] }, + { isLoading: isLoadingNsBitcoinTransactions, data: nsBitcoinTransactions = [] }, + { isLoading: isLoadingTrBitcoinTransactions, data: trBitcoinTransactions = [] }, ] = useGetBitcoinTransactionsByAddressesQuery([nsBitcoinAddress, trBitcoinAddress]); const [{ data: nsPendingTxs = [] }, { data: trPendingTxs = [] }] = useBitcoinPendingTransactions([ @@ -63,12 +63,10 @@ export function ActivityList() { [nsPendingTxs, trPendingTxs] ); + const { isLoading: isLoadingStacksTransactions, data: stacksTransactionsWithTransfers } = + useGetAccountTransactionsWithTransfersQuery(stxAddress); const { - isInitialLoading: isInitialLoadingStacksTransactions, - data: stacksTransactionsWithTransfers, - } = useGetAccountTransactionsWithTransfersQuery(stxAddress); - const { - query: { isInitialLoading: isInitialLoadingStacksPendingTransactions }, + query: { isLoading: isLoadingStacksPendingTransactions }, transactions: stacksPendingTransactions, } = useStacksPendingTransactions(stxAddress); const submittedTransactions = useSubmittedTransactions(); @@ -78,11 +76,11 @@ export function ActivityList() { updateSubmittedTxs(stacksPendingTransactions); }, [stacksPendingTransactions, updateSubmittedTxs]); - const isInitialLoading = - isInitialLoadingNsBitcoinTransactions || - isInitialLoadingTrBitcoinTransactions || - isInitialLoadingStacksTransactions || - isInitialLoadingStacksPendingTransactions; + const isLoading = + isLoadingNsBitcoinTransactions || + isLoadingTrBitcoinTransactions || + isLoadingStacksTransactions || + isLoadingStacksPendingTransactions; const transactionListBitcoinTxs = useMemo(() => { return convertBitcoinTxsToListType( @@ -107,7 +105,7 @@ export function ActivityList() { const hasTxs = hasSubmittedTransactions || hasPendingTransactions || hasTransactions; - if (isInitialLoading) + if (isLoading) return ( diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 670fb06169b..26180b0755b 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -9,13 +9,13 @@ import { BitcoinTaprootAccountLoader, } from '@app/components/loaders/bitcoin-account-loader'; import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader'; -import { BtcBalanceLoader } from '@app/components/loaders/btc-balance-loader'; +import { BtcAssetItemBalanceLoader } from '@app/components/loaders/btc-balance-loader'; import { RunesLoader } from '@app/components/loaders/runes-loader'; import { Sip10TokensLoader } from '@app/components/loaders/sip10-tokens-loader'; import { Src20TokensLoader } from '@app/components/loaders/src20-tokens-loader'; import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader'; import { Stx20TokensLoader } from '@app/components/loaders/stx20-tokens-loader'; -import { StxBalanceLoader } from '@app/components/loaders/stx-balance-loader'; +import { StxAssetItemBalanceLoader } from '@app/components/loaders/stx-balance-loader'; import { Brc20TokenAssetList } from '@app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list'; import { RunesAssetList } from '@app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list'; import { Src20TokenAssetList } from '@app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list'; @@ -54,15 +54,15 @@ export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListPro } > {nativeSegwitAccount => ( - - {(balance, isInitialLoading) => ( + + {(balance, isLoading) => ( )} - + )} @@ -86,22 +86,22 @@ export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListPro > {account => ( <> - - {(balance, isInitialLoading) => ( + + {(balance, isLoading) => ( )} - + - {(isInitialLoading, tokens) => ( + {(isLoading, tokens) => ( @@ -149,8 +149,8 @@ export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListPro {account => ( - {(isInitialLoading, tokens) => ( - + {(isLoading, tokens) => ( + )} )} diff --git a/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx index 2f4acf534bc..e67ac87ec9d 100644 --- a/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx +++ b/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx @@ -25,7 +25,7 @@ interface Brc20TokenAssetListProps { } export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProps) { const navigate = useNavigate(); - const { balance, query: result } = useCurrentBtcCryptoAssetBalanceNativeSegwit(); + const { balance, isLoading } = useCurrentBtcCryptoAssetBalanceNativeSegwit(); const hasPositiveBtcBalanceForFees = variant === 'interactive' && balance.availableBalance.amount.isGreaterThan(0); @@ -49,7 +49,7 @@ export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProp availableBalance={token.balance.availableBalance} captionLeft={token.info.name.toUpperCase()} icon={} - isLoading={result.isInitialLoading} + isLoading={isLoading} key={token.info.symbol} onSelectAsset={ hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : undefined diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx index 89df7aa848e..d67188eab31 100644 --- a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx +++ b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx @@ -6,9 +6,9 @@ import { Stack, styled } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; import { BitcoinNativeSegwitAccountLoader } from '@app/components/loaders/bitcoin-account-loader'; -import { BtcBalanceLoader } from '@app/components/loaders/btc-balance-loader'; +import { BtcAssetItemBalanceLoader } from '@app/components/loaders/btc-balance-loader'; import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader'; -import { StxBalanceLoader } from '@app/components/loaders/stx-balance-loader'; +import { StxAssetItemBalanceLoader } from '@app/components/loaders/stx-balance-loader'; import { BtcCryptoAssetItem } from '@app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item'; import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item'; import { Card } from '@app/ui/layout/card/card'; @@ -35,29 +35,29 @@ export function ChooseCryptoAssetToFund() { {signer => ( - - {(balance, isInitialLoading) => ( + + {(balance, isLoading) => ( navigateToFund('BTC')} /> )} - + )} {account => ( - - {(balance, isInitialLoading) => ( + + {(balance, isLoading) => ( navigateToFund('STX')} /> )} - + )} diff --git a/src/app/pages/home/components/send-button.tsx b/src/app/pages/home/components/send-button.tsx index fad738588d5..95a0f9fb20c 100644 --- a/src/app/pages/home/components/send-button.tsx +++ b/src/app/pages/home/components/send-button.tsx @@ -11,7 +11,6 @@ import { RouteUrls } from '@shared/route-urls'; import { useWalletType } from '@app/common/use-wallet-type'; import { whenPageMode } from '@app/common/utils'; import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSignerNullable } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; @@ -19,12 +18,11 @@ function SendButtonSuspense() { const navigate = useNavigate(); const { whenWallet } = useWalletType(); const btcAddress = useCurrentAccountNativeSegwitIndexZeroSignerNullable()?.address; - const { balance: btcBalance } = useBtcCryptoAssetBalanceNativeSegwit(btcAddress ?? ''); const stxAddress = useCurrentStacksAccountAddress(); const { data: stxBalance } = useStxCryptoAssetBalance(stxAddress); const stacksFtAssets = useTransferableSip10Tokens(stxAddress); - const isDisabled = !btcBalance && !stxBalance && stacksFtAssets?.length === 0; + const isDisabled = !btcAddress && !stxBalance && stacksFtAssets?.length === 0; return ( (); const navigate = useNavigate(); const account = useCurrentStacksAccount(); + const currentAccountIndex = useCurrentAccountIndex(); const { data: name = '', isFetching: isFetchingBnsName } = useAccountDisplayName({ address: account?.address || '', - index: account?.index || 0, + index: currentAccountIndex || 0, }); const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); diff --git a/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts b/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts index bf46dd70971..fd2a1cd2778 100644 --- a/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts +++ b/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts @@ -36,8 +36,8 @@ export function useBtcCryptoAssetBalanceNativeSegwit(address: string) { }, [query.data]); return { + ...query, balance, - query, }; }