From a4fc4efb58b9a82f04eec260057d2743208df8c5 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Wed, 15 May 2024 20:07:49 -0500 Subject: [PATCH] refactor: remove combined asset model, closes #48 --- package.json | 2 +- pnpm-lock.yaml | 8 +- .../hooks/balance/use-total-balance.tsx | 9 +- src/app/components/balance/btc-balance.tsx | 8 +- .../hooks/use-bitcoin-custom-fee.tsx | 10 +- .../use-bitcoin-fees-list.ts | 10 +- .../crypto-asset-item.layout.tsx | 89 +++++----- .../crypto-asset-item.layout.utils.ts | 5 +- .../loaders/brc20-tokens-loader.tsx | 16 +- .../components/loaders/btc-balance-loader.tsx | 12 ++ .../loaders/btc-crypto-asset-loader.tsx | 11 -- src/app/components/loaders/runes-loader.tsx | 7 +- .../loaders/sip10-tokens-loader.tsx | 15 ++ .../loaders/src20-tokens-loader.tsx | 10 +- .../components/loaders/stx-balance-loader.tsx | 15 ++ .../loaders/stx-crypto-asset-loader.tsx | 11 -- .../loaders/stx20-tokens-loader.tsx | 10 +- .../connect-ledger-asset-button.tsx | 1 + .../connect-ledger-asset-item-fallback.tsx | 37 +++++ src/app/features/asset-list/asset-list.tsx | 117 ++++++++------ .../brc20-token-asset-list.tsx | 46 ++++-- .../btc-crypto-asset-item-fallback.tsx | 23 --- .../btc-crypto-asset-item.tsx | 33 ++-- .../runes-asset-item.layout.tsx | 39 ----- .../runes-asset-list/runes-asset-list.tsx | 20 ++- .../src20-token-asset-item.layout.tsx | 39 ----- .../src20-token-asset-list.tsx | 16 +- .../sip10-token-asset-item.tsx | 49 +++--- .../sip10-token-asset-item.utils.ts | 34 ---- .../sip10-token-asset-list-unsupported.tsx | 32 ++-- .../sip10-token-asset-list.tsx | 38 +++-- .../stx-crypto-asset-item-fallback.tsx | 23 --- .../stx-crypto-asset-item.stories.tsx | 36 +---- .../stx-crypto-asset-item.tsx | 46 +++--- .../stx20-token-asset-item.layout.tsx | 37 ----- .../stx20-token-asset-list.tsx | 20 ++- .../bitcoin-choose-fee/bitcoin-choose-fee.tsx | 6 +- .../hooks/use-validate-bitcoin-spend.ts | 10 +- .../hooks/use-btc-increase-fee.ts | 4 +- .../increase-btc-fee-dialog.tsx | 6 +- .../pending-brc-20-transfers.tsx | 6 +- .../bitcoin-contract-request-actions.tsx | 4 +- .../choose-asset-to-fund.tsx | 38 ++--- src/app/pages/home/components/send-button.tsx | 13 +- .../choose-crypto-asset.tsx | 28 +--- .../form/btc/btc-send-form.tsx | 15 +- .../form/btc/use-btc-send-form.tsx | 7 +- .../sip10/sip10-token-send-form-container.tsx | 16 +- .../form/sip10/sip10-token-send-form.tsx | 34 +++- .../form/sip10/use-sip10-send-form.tsx | 28 ++-- .../btc-balance-native-segwit.hooks.ts | 39 +++-- .../bitcoin/balance/btc-balance.hooks.ts | 39 ----- src/app/query/bitcoin/bitcoin-client.ts | 6 - .../bitcoin/btc/btc-crypto-asset.hooks.ts | 48 ------ .../ordinals/brc20/brc20-tokens.hooks.ts | 75 +++++---- .../bitcoin/runes/runes-ticker-info.query.ts | 20 ++- src/app/query/bitcoin/runes/runes.hooks.ts | 40 ++--- src/app/query/bitcoin/runes/runes.utils.ts | 29 ++++ .../bitcoin/stamps/stamps-by-address.hooks.ts | 33 +++- .../query/common/alex-sdk/alex-sdk.hooks.ts | 15 +- src/app/query/common/models.ts | 6 + src/app/query/models/crypto-asset.model.ts | 59 ------- src/app/query/query-config.ts | 12 +- .../query/stacks/sip10/sip10-tokens.hooks.ts | 152 +++++++----------- .../query/stacks/sip10/sip10-tokens.spec.ts | 2 +- .../query/stacks/sip10/sip10-tokens.utils.ts | 47 +++++- src/app/query/stacks/stacks-client.ts | 7 - .../stacks/stx/stx-crypto-asset.hooks.ts | 58 ------- .../query/stacks/stx20/stx20-tokens.hooks.ts | 20 ++- .../fungible-token-metadata.hooks.ts | 12 -- .../fungible-token-metadata.query.ts | 69 ++++++-- .../transactions/token-transfer.hooks.ts | 21 +-- .../bullet-separator/bullet-separator.tsx | 2 +- src/app/ui/pressable/pressable.stories.tsx | 10 +- tests/page-object-models/home.page.ts | 2 +- tests/specs/send/send-btc.spec.ts | 3 +- tests/specs/send/send-stx.spec.ts | 2 +- 77 files changed, 903 insertions(+), 1074 deletions(-) create mode 100644 src/app/components/loaders/btc-balance-loader.tsx delete mode 100644 src/app/components/loaders/btc-crypto-asset-loader.tsx create mode 100644 src/app/components/loaders/sip10-tokens-loader.tsx create mode 100644 src/app/components/loaders/stx-balance-loader.tsx delete mode 100644 src/app/components/loaders/stx-crypto-asset-loader.tsx rename src/app/features/asset-list/{components => _components}/connect-ledger-asset-button.tsx (99%) create mode 100644 src/app/features/asset-list/_components/connect-ledger-asset-item-fallback.tsx delete mode 100644 src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback.tsx delete mode 100644 src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-item.layout.tsx delete mode 100644 src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx delete mode 100644 src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.utils.ts delete mode 100644 src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback.tsx delete mode 100644 src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx delete mode 100644 src/app/query/bitcoin/balance/btc-balance.hooks.ts delete mode 100644 src/app/query/bitcoin/btc/btc-crypto-asset.hooks.ts create mode 100644 src/app/query/bitcoin/runes/runes.utils.ts create mode 100644 src/app/query/common/models.ts delete mode 100644 src/app/query/models/crypto-asset.model.ts delete mode 100644 src/app/query/stacks/stx/stx-crypto-asset.hooks.ts delete mode 100644 src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.hooks.ts diff --git a/package.json b/package.json index 047ee00a27d..dfb58cb1641 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "@dlc-link/dlc-tools": "1.1.1", "@fungible-systems/zone-file": "2.0.0", "@hirosystems/token-metadata-api-client": "1.2.0", - "@leather-wallet/models": "0.4.5", + "@leather-wallet/models": "0.6.1", "@leather-wallet/tokens": "0.0.15", "@ledgerhq/hw-transport-webusb": "6.27.19", "@noble/hashes": "1.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f92a7ee96f..96bc1bd5907 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,8 +30,8 @@ dependencies: specifier: 1.2.0 version: 1.2.0 '@leather-wallet/models': - specifier: 0.4.5 - version: 0.4.5 + specifier: 0.6.1 + version: 0.6.1 '@leather-wallet/tokens': specifier: 0.0.15 version: 0.0.15 @@ -3702,8 +3702,8 @@ packages: bignumber.js: 9.1.2 dev: true - /@leather-wallet/models@0.4.5: - resolution: {integrity: sha512-H0NhxYy1C2Byrj1wswL9Zf6bWOejvgVuwgVDT6xh7zqvoPotiAtrfEe3hiBdSeUtUsTh70ha1ZMuGwf/rph67w==} + /@leather-wallet/models@0.6.1: + resolution: {integrity: sha512-PVbsCypJaVY7W6pOqDfFlZuvx8pZhpBo+8mMo2wddDNSnSGoIhxQtZVTzZPHTb4d++UWPuxrDx0WVcu7G2Y9gA==} dependencies: bignumber.js: 9.1.2 dev: false diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx index 2126e3046a0..60031645bf9 100644 --- a/src/app/common/hooks/balance/use-total-balance.tsx +++ b/src/app/common/hooks/balance/use-total-balance.tsx @@ -28,7 +28,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) // get btc balance const { - btcCryptoAssetBalance, + balance: btcBalance, isLoading: isLoadingBtcBalance, isFetching: isFetchingBtcBalance, isInitialLoading: isInititalLoadingBtcBalance, @@ -37,10 +37,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) return useMemo(() => { // calculate total balance const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData); - const btcUsdAmount = baseCurrencyAmountInQuote( - btcCryptoAssetBalance.availableBalance, - btcMarketData - ); + const btcUsdAmount = baseCurrencyAmountInQuote(btcBalance.availableBalance, btcMarketData); const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) }; return { @@ -56,7 +53,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) }, [ stxBalance, stxMarketData, - btcCryptoAssetBalance.availableBalance, + btcBalance.availableBalance, btcMarketData, isLoading, isLoadingBtcBalance, diff --git a/src/app/components/balance/btc-balance.tsx b/src/app/components/balance/btc-balance.tsx index a35c5af4ec3..f6fad708482 100644 --- a/src/app/components/balance/btc-balance.tsx +++ b/src/app/components/balance/btc-balance.tsx @@ -2,15 +2,15 @@ import { formatMoney } from '@app/common/money/format-money'; import { Caption } from '@app/ui/components/typography/caption'; import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader'; -import { BtcCryptoAssetLoader } from '../loaders/btc-crypto-asset-loader'; +import { BtcBalanceLoader } from '../loaders/btc-balance-loader'; export function BtcBalance() { return ( {signer => ( - - {asset => {formatMoney(asset.balance.availableBalance)}} - + + {balance => {formatMoney(balance.availableBalance)}} + )} ); 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 8555cf70fa7..3bcf528f288 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 @@ -10,7 +10,7 @@ import { determineUtxosForSpendAll, } from '@app/common/transactions/bitcoin/coinselect/local-coin-selection'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; -import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; +import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks'; export const MAX_FEE_RATE_MULTIPLIER = 50; @@ -22,7 +22,7 @@ interface UseBitcoinCustomFeeArgs { } export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBitcoinCustomFeeArgs) { - const { balance } = useCurrentBtcAvailableBalanceNativeSegwit(); + const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit(); const { data: utxos = [] } = useCurrentNativeSegwitUtxos(); const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC'); @@ -30,7 +30,9 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBit (feeRate: number) => { if (!feeRate || !utxos.length) return { fee: 0, fiatFeeValue: '' }; - const satAmount = isSendingMax ? balance.amount.toNumber() : amount.amount.toNumber(); + const satAmount = isSendingMax + ? balance.availableBalance.amount.toNumber() + : amount.amount.toNumber(); const determineUtxosArgs = { amount: satAmount, @@ -49,6 +51,6 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBit )}`, }; }, - [utxos, isSendingMax, balance.amount, amount.amount, recipients, btcMarketData] + [utxos, isSendingMax, balance.availableBalance.amount, amount.amount, recipients, btcMarketData] ); } 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 672fb10ee7f..3cd9b45741e 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 @@ -10,7 +10,7 @@ import { determineUtxosForSpend, determineUtxosForSpendAll, } from '@app/common/transactions/bitcoin/coinselect/local-coin-selection'; -import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; +import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; import { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client'; import { useAverageBitcoinFeeRates } from '@app/query/bitcoin/fees/fee-estimates.hooks'; import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks'; @@ -43,7 +43,7 @@ export function useBitcoinFeesList({ recipient, utxos, }: UseBitcoinFeesListArgs) { - const { balance } = useCurrentBtcAvailableBalanceNativeSegwit(); + const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit(); const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC'); const { data: feeRates, isLoading } = useAverageBitcoinFeeRates(); @@ -57,7 +57,9 @@ export function useBitcoinFeesList({ if (!feeRates || !utxos.length) return []; const determineUtxosDefaultArgs = { - recipients: [{ address: recipient, amount: isSendingMax ? balance : amount }], + recipients: [ + { address: recipient, amount: isSendingMax ? balance.availableBalance : amount }, + ], utxos, }; @@ -116,7 +118,7 @@ export function useBitcoinFeesList({ } return feesArr; - }, [feeRates, utxos, isSendingMax, balance, amount, recipient, btcMarketData]); + }, [feeRates, utxos, recipient, isSendingMax, balance.availableBalance, amount, btcMarketData]); return { feesList, diff --git a/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx b/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx index efe8e0bd245..a422d15b714 100644 --- a/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx +++ b/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx @@ -1,9 +1,7 @@ -import { ReactNode } from 'react'; - +import type { CryptoAssetBalance } from '@leather-wallet/models'; import { Box, Flex, styled } from 'leather-styles/jsx'; import { spamFilter } from '@app/common/utils/spam-filter'; -import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model'; import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator'; import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; import { SkeletonLoader } from '@app/ui/components/skeleton-loader/skeleton-loader'; @@ -14,73 +12,66 @@ import { Pressable } from '@app/ui/pressable/pressable'; import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils'; interface CryptoAssetItemLayoutProps { - additionalBalanceInfo?: ReactNode; - additionalBalanceInfoAsFiat?: ReactNode; - asset: AccountCryptoAssetWithDetails; - caption?: string; + balance: CryptoAssetBalance; + captionLeft: string; + captionRightBulletInfo?: React.ReactNode; + contractId?: string; fiatBalance?: string; icon: React.ReactNode; isLoading?: boolean; - name: string; - onClick?(asset: AccountCryptoAssetWithDetails): void; - rightElement?: React.ReactNode; + onSelectAsset?(symbol: string, contractId?: string): void; + titleLeft: string; + titleRightBulletInfo?: React.ReactNode; } export function CryptoAssetItemLayout({ - additionalBalanceInfo, - additionalBalanceInfoAsFiat, - asset, - caption, + balance, + captionLeft, + captionRightBulletInfo, + contractId, fiatBalance, icon, isLoading = false, - name, - onClick, - rightElement, + onSelectAsset, + titleLeft, + titleRightBulletInfo, }: CryptoAssetItemLayoutProps) { - const { dataTestId, formattedBalance } = parseCryptoAssetBalance(asset.balance); - const { availableBalance } = asset.balance; - const title = spamFilter(name); + const { availableBalance, dataTestId, formattedBalance } = parseCryptoAssetBalance(balance); const titleRight = ( - {rightElement ? ( - rightElement - ) : ( - - - {formattedBalance.value} {additionalBalanceInfo} - - - )} + + + + {formattedBalance.value} + {titleRightBulletInfo} + + + ); const captionRight = ( - {!rightElement && ( - - - - {availableBalance.amount.toNumber() > 0 ? fiatBalance : null} - {additionalBalanceInfoAsFiat} - - - - )} + + + {availableBalance.amount.toNumber() > 0 ? fiatBalance : null} + {captionRightBulletInfo} + + ); - const isInteractive = !!onClick; + const isInteractive = !!onSelectAsset; const content = ( @@ -88,7 +79,11 @@ export function CryptoAssetItemLayout({ if (isInteractive) return ( - onClick(asset)} my="space.02"> + onSelectAsset(availableBalance.symbol, contractId)} + my="space.02" + > {content} ); diff --git a/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts b/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts index 6cc1c622b67..2b5ef2cd0c2 100644 --- a/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts +++ b/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts @@ -2,12 +2,12 @@ import type { CryptoAssetBalance } from '@leather-wallet/models'; import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors'; import { formatBalance } from '@app/common/format-balance'; -import { ftDecimals } from '@app/common/stacks-utils'; +import { formatMoneyWithoutSymbol } from '@app/common/money/format-money'; export function parseCryptoAssetBalance(balance: CryptoAssetBalance) { const { availableBalance } = balance; - const amount = ftDecimals(availableBalance.amount, availableBalance.decimals); + const amount = formatMoneyWithoutSymbol(availableBalance); const dataTestId = CryptoAssetSelectors.CryptoAssetListItem.replace( '{symbol}', availableBalance.symbol.toLowerCase() @@ -15,6 +15,7 @@ export function parseCryptoAssetBalance(balance: CryptoAssetBalance) { const formattedBalance = formatBalance(amount); return { + availableBalance, dataTestId, formattedBalance, }; diff --git a/src/app/components/loaders/brc20-tokens-loader.tsx b/src/app/components/loaders/brc20-tokens-loader.tsx index b7f152d2e61..405740da048 100644 --- a/src/app/components/loaders/brc20-tokens-loader.tsx +++ b/src/app/components/loaders/brc20-tokens-loader.tsx @@ -1,10 +1,18 @@ -import { useBrc20AccountCryptoAssetsWithDetails } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks'; -import type { Brc20AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model'; +import type { Brc20CryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather-wallet/models'; + +import { useBrc20Tokens } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks'; interface Brc20TokensLoaderProps { - children(tokens: Brc20AccountCryptoAssetWithDetails[]): React.ReactNode; + children( + tokens: { + balance: CryptoAssetBalance; + info: Brc20CryptoAssetInfo; + holderAddress: string; + marketData: MarketData; + }[] + ): React.ReactNode; } export function Brc20TokensLoader({ children }: Brc20TokensLoaderProps) { - const tokens = useBrc20AccountCryptoAssetsWithDetails(); + const tokens = useBrc20Tokens(); return children(tokens); } diff --git a/src/app/components/loaders/btc-balance-loader.tsx b/src/app/components/loaders/btc-balance-loader.tsx new file mode 100644 index 00000000000..a5b3a4e86a8 --- /dev/null +++ b/src/app/components/loaders/btc-balance-loader.tsx @@ -0,0 +1,12 @@ +import type { BtcCryptoAssetBalance } from '@leather-wallet/models'; + +import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; + +interface BtcBalanceLoaderProps { + address: string; + children(balance: BtcCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode; +} +export function BtcBalanceLoader({ address, children }: BtcBalanceLoaderProps) { + const { balance, isInitialLoading } = useBtcCryptoAssetBalanceNativeSegwit(address); + return children(balance, isInitialLoading); +} diff --git a/src/app/components/loaders/btc-crypto-asset-loader.tsx b/src/app/components/loaders/btc-crypto-asset-loader.tsx deleted file mode 100644 index 3ed06ddb8bf..00000000000 --- a/src/app/components/loaders/btc-crypto-asset-loader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { useBtcAccountCryptoAssetWithDetails } from '@app/query/bitcoin/btc/btc-crypto-asset.hooks'; -import type { BtcAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model'; - -interface BtcCryptoAssetLoaderProps { - address: string; - children(asset: BtcAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode; -} -export function BtcCryptoAssetLoader({ address, children }: BtcCryptoAssetLoaderProps) { - const { asset, isInitialLoading } = useBtcAccountCryptoAssetWithDetails(address); - return children(asset, isInitialLoading); -} diff --git a/src/app/components/loaders/runes-loader.tsx b/src/app/components/loaders/runes-loader.tsx index ee78d0287e8..9b4eb8ae036 100644 --- a/src/app/components/loaders/runes-loader.tsx +++ b/src/app/components/loaders/runes-loader.tsx @@ -1,11 +1,12 @@ -import type { RuneToken } from '@app/query/bitcoin/bitcoin-client'; +import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather-wallet/models'; + import { useRuneTokens } from '@app/query/bitcoin/runes/runes.hooks'; interface RunesLoaderProps { addresses: string[]; - children(runes: RuneToken[]): React.ReactNode; + children(runes: { balance: CryptoAssetBalance; info: RuneCryptoAssetInfo }[]): React.ReactNode; } export function RunesLoader({ addresses, children }: RunesLoaderProps) { - const runes = useRuneTokens(addresses); + const { runes = [] } = useRuneTokens(addresses); return children(runes); } diff --git a/src/app/components/loaders/sip10-tokens-loader.tsx b/src/app/components/loaders/sip10-tokens-loader.tsx new file mode 100644 index 00000000000..e547e4b751c --- /dev/null +++ b/src/app/components/loaders/sip10-tokens-loader.tsx @@ -0,0 +1,15 @@ +import { + type Sip10TokenAssetDetails, + useFilteredSip10Tokens, +} from '@app/query/stacks/sip10/sip10-tokens.hooks'; +import type { Sip10CryptoAssetFilter } from '@app/query/stacks/sip10/sip10-tokens.utils'; + +interface Sip10TokensLoaderProps { + address: string; + filter: Sip10CryptoAssetFilter; + children(isLoading: boolean, tokens: Sip10TokenAssetDetails[]): React.ReactNode; +} +export function Sip10TokensLoader({ address, filter, children }: Sip10TokensLoaderProps) { + const { isInitialLoading, tokens = [] } = useFilteredSip10Tokens({ address, filter }); + return children(isInitialLoading, tokens); +} diff --git a/src/app/components/loaders/src20-tokens-loader.tsx b/src/app/components/loaders/src20-tokens-loader.tsx index 1ce829f6beb..47f568f0089 100644 --- a/src/app/components/loaders/src20-tokens-loader.tsx +++ b/src/app/components/loaders/src20-tokens-loader.tsx @@ -1,9 +1,15 @@ +import type { CryptoAssetBalance, Src20CryptoAssetInfo } from '@leather-wallet/models'; + import { useSrc20TokensByAddress } from '@app/query/bitcoin/stamps/stamps-by-address.hooks'; -import type { Src20Token } from '@app/query/bitcoin/stamps/stamps-by-address.query'; + +export interface Src20TokenAssetDetails { + balance: CryptoAssetBalance; + info: Src20CryptoAssetInfo; +} interface Src20TokensLoaderProps { address: string; - children(tokens: Src20Token[]): React.ReactNode; + children(tokens: Src20TokenAssetDetails[]): React.ReactNode; } export function Src20TokensLoader({ address, children }: Src20TokensLoaderProps) { const { data: tokens = [] } = useSrc20TokensByAddress(address); diff --git a/src/app/components/loaders/stx-balance-loader.tsx b/src/app/components/loaders/stx-balance-loader.tsx new file mode 100644 index 00000000000..a132572c385 --- /dev/null +++ b/src/app/components/loaders/stx-balance-loader.tsx @@ -0,0 +1,15 @@ +import type { StxCryptoAssetBalance } from '@leather-wallet/models'; + +import { isFetchedWithSuccess } from '@app/query/query-config'; +import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks'; + +interface StxBalanceLoaderProps { + address: string; + children(balance: StxCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode; +} +export function StxBalanceLoader({ address, children }: StxBalanceLoaderProps) { + const result = useStxCryptoAssetBalance(address); + if (!isFetchedWithSuccess(result)) return null; + const { data: balance, isInitialLoading } = result; + return children(balance, isInitialLoading); +} diff --git a/src/app/components/loaders/stx-crypto-asset-loader.tsx b/src/app/components/loaders/stx-crypto-asset-loader.tsx deleted file mode 100644 index 72824eb4770..00000000000 --- a/src/app/components/loaders/stx-crypto-asset-loader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { StxAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model'; -import { useStxAccountCryptoAssetWithDetails } from '@app/query/stacks/stx/stx-crypto-asset.hooks'; - -interface StxCryptoAssetLoaderProps { - address: string; - children(asset: StxAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode; -} -export function StxCryptoAssetLoader({ address, children }: StxCryptoAssetLoaderProps) { - const { asset, isInitialLoading } = useStxAccountCryptoAssetWithDetails(address); - return children(asset, isInitialLoading); -} diff --git a/src/app/components/loaders/stx20-tokens-loader.tsx b/src/app/components/loaders/stx20-tokens-loader.tsx index 986d214f6e6..796f649320d 100644 --- a/src/app/components/loaders/stx20-tokens-loader.tsx +++ b/src/app/components/loaders/stx20-tokens-loader.tsx @@ -1,9 +1,15 @@ -import type { Stx20Token } from '@app/query/stacks/stacks-client'; +import type { CryptoAssetBalance, Stx20CryptoAssetInfo } from '@leather-wallet/models'; + import { useStx20Tokens } from '@app/query/stacks/stx20/stx20-tokens.hooks'; interface Stx20TokensLoaderProps { address: string; - children(tokens: Stx20Token[]): React.ReactNode; + children( + tokens: { + balance: CryptoAssetBalance; + info: Stx20CryptoAssetInfo; + }[] + ): React.ReactNode; } export function Stx20TokensLoader({ address, children }: Stx20TokensLoaderProps) { const { data: tokens = [] } = useStx20Tokens(address); diff --git a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx similarity index 99% rename from src/app/features/asset-list/components/connect-ledger-asset-button.tsx rename to src/app/features/asset-list/_components/connect-ledger-asset-button.tsx index 9e596ba057a..81a4dc28b97 100644 --- a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx +++ b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx @@ -25,6 +25,7 @@ export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) { }, }); }; + return (