diff --git a/src/app/common/hooks/use-transferable-asset-balances.hooks.ts b/src/app/common/hooks/use-transferable-asset-balances.hooks.ts
index dac2ffdd232..4eddb7d909f 100644
--- a/src/app/common/hooks/use-transferable-asset-balances.hooks.ts
+++ b/src/app/common/hooks/use-transferable-asset-balances.hooks.ts
@@ -2,18 +2,14 @@ import { useMemo } from 'react';
import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
-import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
import { useTransferableStacksFungibleTokenAssetBalances } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils';
-import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
import { useStxBalance } from './balance/stx/use-stx-balance';
export function useAllTransferableCryptoAssetBalances(): AllTransferableCryptoAssetBalances[] {
const account = useCurrentStacksAccount();
- const currentBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
- const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentBtcAddress);
const { availableBalance: availableStxBalance } = useStxBalance();
const stxCryptoCurrencyAssetBalance = createStacksCryptoCurrencyAssetTypeWrapper(
@@ -24,6 +20,6 @@ export function useAllTransferableCryptoAssetBalances(): AllTransferableCryptoAs
);
return useMemo(() => {
- return [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance, ...stacksFtAssetBalances];
- }, [btcCryptoCurrencyAssetBalance, stacksFtAssetBalances, stxCryptoCurrencyAssetBalance]);
+ return [stxCryptoCurrencyAssetBalance, ...stacksFtAssetBalances];
+ }, [stacksFtAssetBalances, stxCryptoCurrencyAssetBalance]);
}
diff --git a/src/app/components/balance/bitcoin-balance-loader.tsx b/src/app/components/balance/bitcoin-balance-loader.tsx
new file mode 100644
index 00000000000..b4f77a3e0dc
--- /dev/null
+++ b/src/app/components/balance/bitcoin-balance-loader.tsx
@@ -0,0 +1,13 @@
+import { BitcoinCryptoCurrencyAssetBalance } from '@shared/models/crypto-asset-balance.model';
+
+import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
+
+interface BitcoinBalanceLoaderProps {
+ address: string;
+ children(balance: BitcoinCryptoCurrencyAssetBalance): React.ReactNode;
+}
+
+export function BitcoinBalanceLoader({ address, children }: BitcoinBalanceLoaderProps) {
+ const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(address);
+ return children(btcCryptoCurrencyAssetBalance);
+}
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 48dbaac5e9d..fd1fb2f0e0f 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
@@ -2,26 +2,39 @@ import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-a
import { StacksFungibleTokenAsset } from '@shared/models/crypto-asset.model';
import { useWalletType } from '@app/common/use-wallet-type';
+import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoin-account-loader';
+import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
+import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { BtcIcon } from '@app/ui/components/icons/btc-icon';
+import { CryptoCurrencyAssetItem } from '../crypto-currency-asset/crypto-currency-asset-item';
import { CryptoAssetListItem } from './crypto-asset-list-item';
import { CryptoAssetListLayout } from './crypto-asset-list.layout';
interface CryptoAssetListProps {
cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void;
- brc20Tokens?: Brc20Token[];
}
-export function CryptoAssetList({
- cryptoAssetBalances,
- onItemClick,
- brc20Tokens,
-}: CryptoAssetListProps) {
+export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) {
const { whenWallet } = useWalletType();
return (
+
+ {signer => (
+
+ {balance => (
+ }
+ onClick={() => onItemClick(balance)}
+ isPressable
+ />
+ )}
+
+ )}
+
{cryptoAssetBalances.map(cryptoAssetBalance => (
onItemClick(cryptoAssetBalance)}
@@ -32,12 +45,18 @@ export function CryptoAssetList({
}
/>
))}
- {brc20Tokens
- ? whenWallet({
- software: ,
- ledger: null,
- })
- : null}
+ {whenWallet({
+ software: (
+
+ {() => (
+
+ {brc20Tokens => }
+
+ )}
+
+ ),
+ ledger: null,
+ })}
);
}
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 6ed18bca538..3745bd094c2 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
@@ -5,7 +5,6 @@ import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-
import { RouteUrls } from '@shared/route-urls';
import { isDefined } from '@shared/utils';
-import { useBtcCryptoCurrencyAssetBalance } from '@app/common/hooks/balance/btc/use-btc-crypto-currency-asset-balance';
import { useStxCryptoCurrencyAssetBalance } from '@app/common/hooks/balance/stx/use-stx-crypto-currency-asset-balance';
import { useRouteHeader } from '@app/common/hooks/use-route-header';
import { useWalletType } from '@app/common/use-wallet-type';
@@ -16,14 +15,8 @@ import { ModalHeader } from '@app/components/modal-header';
import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
export function ChooseCryptoAssetToFund() {
- const btcCryptoCurrencyAssetBalance = useBtcCryptoCurrencyAssetBalance();
const stxCryptoCurrencyAssetBalance = useStxCryptoCurrencyAssetBalance();
- const cryptoCurrencyAssetBalances = useMemo(
- () => [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance],
- [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance]
- );
-
const { whenWallet } = useWalletType();
const navigate = useNavigate();
@@ -31,13 +24,13 @@ export function ChooseCryptoAssetToFund() {
const filteredCryptoAssetBalances = useMemo(
() =>
- cryptoCurrencyAssetBalances.filter(isDefined).filter(assetBalance =>
+ [stxCryptoCurrencyAssetBalance].filter(isDefined).filter(assetBalance =>
whenWallet({
ledger: checkBlockchainAvailable(assetBalance?.blockchain),
software: true,
})
),
- [cryptoCurrencyAssetBalances, checkBlockchainAvailable, whenWallet]
+ [stxCryptoCurrencyAssetBalance, checkBlockchainAvailable, whenWallet]
);
useRouteHeader( navigate(RouteUrls.Home)} title=" " />);
diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
index 14bf7580719..5e8c25d976b 100644
--- a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
+++ b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
import { RouteUrls } from '@shared/route-urls';
-import { useBrc20Tokens } from '@app/common/hooks/use-brc20-tokens';
import { useRouteHeader } from '@app/common/hooks/use-route-header';
import { useAllTransferableCryptoAssetBalances } from '@app/common/hooks/use-transferable-asset-balances.hooks';
import { useWalletType } from '@app/common/use-wallet-type';
@@ -16,7 +15,6 @@ import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchai
export function ChooseCryptoAsset() {
const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances();
- const brc20Tokens = useBrc20Tokens();
const { whenWallet } = useWalletType();
const navigate = useNavigate();
@@ -49,7 +47,6 @@ export function ChooseCryptoAsset() {
navigateToSendForm(cryptoAssetBalance)}
- brc20Tokens={brc20Tokens}
cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(asset =>
whenWallet({
ledger: checkBlockchainAvailable(asset.blockchain),