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),