From 1b6ff2a5eedc9bea110f1b9ee6bd778b5199017b Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Mon, 18 Dec 2023 12:37:20 -0600 Subject: [PATCH] fix: ledger locked stx, ref #4721 --- .../loaders/stacks-account-loader.tsx | 13 ++++---- src/app/features/asset-list/asset-list.tsx | 16 ++++------ ...balance-item.tsx => stacks-asset-list.tsx} | 18 ++++++----- .../components/stacks-ledger-assets.tsx | 30 ------------------- .../features/collectibles/collectibles.tsx | 8 ++--- .../stacks/stacks-crypto-assets.tsx | 7 ++--- .../non-fungible-token-metadata.hooks.ts | 6 ++-- .../non-fungible-token-metadata.query.ts | 5 ++-- 8 files changed, 34 insertions(+), 69 deletions(-) rename src/app/features/asset-list/components/{stacks-balance-item.tsx => stacks-asset-list.tsx} (75%) delete mode 100644 src/app/features/asset-list/components/stacks-ledger-assets.tsx diff --git a/src/app/components/loaders/stacks-account-loader.tsx b/src/app/components/loaders/stacks-account-loader.tsx index 5de8f2a5826..9d024b1ae95 100644 --- a/src/app/components/loaders/stacks-account-loader.tsx +++ b/src/app/components/loaders/stacks-account-loader.tsx @@ -4,14 +4,17 @@ import { useStacksAccounts, } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; +import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks'; -interface CurrentStacksAccountLoaderProps { - children(data: StacksAccount): React.ReactNode; +interface CurrentStacksAccountAddressLoaderProps { + children(data: string): React.ReactNode; } -export function CurrentStacksAccountLoader({ children }: CurrentStacksAccountLoaderProps) { +export function CurrentStacksAccountAddressLoader({ + children, +}: CurrentStacksAccountAddressLoaderProps) { const currentAccount = useCurrentStacksAccount(); - if (!currentAccount) return null; - return children(currentAccount); + const hasStacksKeys = useHasStacksLedgerKeychain(); + return children(hasStacksKeys && currentAccount ? currentAccount.address : ''); } interface StacksAccountBaseLoaderProps { diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 185d68e5652..dc897a09d3e 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -8,7 +8,7 @@ import { useWalletType } from '@app/common/use-wallet-type'; import { BitcoinContractEntryPoint } from '@app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point'; import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader'; import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; -import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader'; +import { CurrentStacksAccountAddressLoader } from '@app/components/loaders/stacks-account-loader'; import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentNetwork } from '@app/store/networks/networks.selectors'; @@ -18,8 +18,7 @@ import { Collectibles } from '../collectibles/collectibles'; import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers'; import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list'; import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button'; -import { StacksBalanceItem } from './components/stacks-balance-item'; -import { StacksLedgerAssetsList } from './components/stacks-ledger-assets'; +import { StacksAssetList } from './components/stacks-asset-list'; export function AssetsList() { const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain(); @@ -61,14 +60,9 @@ export function AssetsList() { ledger: null, })} - {whenWallet({ - software: ( - - {account => } - - ), - ledger: , - })} + + {accountAddress => } + {whenWallet({ software: ( diff --git a/src/app/features/asset-list/components/stacks-balance-item.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx similarity index 75% rename from src/app/features/asset-list/components/stacks-balance-item.tsx rename to src/app/features/asset-list/components/stacks-asset-list.tsx index a827f31607e..67e4c1a73e7 100644 --- a/src/app/features/asset-list/components/stacks-balance-item.tsx +++ b/src/app/features/asset-list/components/stacks-asset-list.tsx @@ -3,18 +3,19 @@ import { ftDecimals } from '@app/common/stacks-utils'; import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; -import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; +import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks'; import { Caption } from '@app/ui/components/typography/caption'; +import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button'; import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list'; -interface StacksBalanceItemProps { - account: StacksAccount; +interface StacksAssetListProps { + address: string; } -export function StacksBalanceItem({ account }: StacksBalanceItemProps) { - const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata( - account.address - ); +export function StacksAssetList({ address }: StacksAssetListProps) { + const hasStacksKeys = useHasStacksLedgerKeychain(); + + const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address); const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } = useStxBalance(); @@ -32,10 +33,11 @@ export function StacksBalanceItem({ account }: StacksBalanceItemProps) { } + rightElement={hasStacksKeys ? undefined : } /> diff --git a/src/app/features/asset-list/components/stacks-ledger-assets.tsx b/src/app/features/asset-list/components/stacks-ledger-assets.tsx deleted file mode 100644 index 673b25422ed..00000000000 --- a/src/app/features/asset-list/components/stacks-ledger-assets.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; -import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; -import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; -import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; -import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks'; - -import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button'; -import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list'; - -export function StacksLedgerAssetsList() { - const hasStacksKeys = useHasStacksLedgerKeychain(); - const currentAccount = useCurrentStacksAccount(); - const { stxEffectiveBalance, stxEffectiveUsdBalance } = useStxBalance(); - const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata( - currentAccount?.address || '' - ); - return ( - <> - } - address={currentAccount?.address || ''} - rightElement={hasStacksKeys ? undefined : } - /> - - - ); -} diff --git a/src/app/features/collectibles/collectibles.tsx b/src/app/features/collectibles/collectibles.tsx index 7f440757a5b..c50a9d3d9d8 100644 --- a/src/app/features/collectibles/collectibles.tsx +++ b/src/app/features/collectibles/collectibles.tsx @@ -7,7 +7,7 @@ import { RouteUrls } from '@shared/route-urls'; import { useWalletType } from '@app/common/use-wallet-type'; import { CurrentBitcoinAccountLoader } from '@app/components/loaders/bitcoin-account-loader'; -import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader'; +import { CurrentStacksAccountAddressLoader } from '@app/components/loaders/stacks-account-loader'; import { useConfigNftMetadataEnabled } from '@app/query/common/remote-config/remote-config.query'; import { AddCollectible } from './components/add-collectible'; @@ -50,9 +50,9 @@ export function Collectibles() { {() => } {isNftMetadataEnabled && ( - - {account => } - + + {accountAddress => } + )} diff --git a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx index 77dab15147f..2a541e092b2 100644 --- a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx @@ -4,17 +4,16 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { parseIfValidPunycode } from '@app/common/utils'; import { useCurrentAccountNames } from '@app/query/stacks/bns/bns.hooks'; import { useStacksNonFungibleTokensMetadata } from '@app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks'; -import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; import { StacksBnsName } from './stacks-bns-name'; import { StacksNonFungibleTokens } from './stacks-non-fungible-tokens'; interface StacksCryptoAssetsProps { - account: StacksAccount; + address: string; } -export function StacksCryptoAssets({ account }: StacksCryptoAssetsProps) { +export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) { const { data: names = [] } = useCurrentAccountNames(); - const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(account); + const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(address); const analytics = useAnalytics(); useEffect(() => { diff --git a/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks.ts b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks.ts index 694755de2bf..81bf46e7868 100644 --- a/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks.ts +++ b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks.ts @@ -1,12 +1,10 @@ import { useMemo } from 'react'; -import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; - import { isNftAsset } from '../token-metadata.utils'; import { useGetNonFungibleTokenMetadataListQuery } from './non-fungible-token-metadata.query'; -export function useStacksNonFungibleTokensMetadata(account: StacksAccount) { - const respList = useGetNonFungibleTokenMetadataListQuery(account); +export function useStacksNonFungibleTokensMetadata(address: string) { + const respList = useGetNonFungibleTokenMetadataListQuery(address); return useMemo( () => diff --git a/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.query.ts b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.query.ts index 2dbdbc2493e..ebe27db1b76 100644 --- a/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.query.ts +++ b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.query.ts @@ -3,7 +3,6 @@ import { UseQueryResult, useQueries } from '@tanstack/react-query'; import { pullContractIdFromIdentity } from '@app/common/utils'; import { QueryPrefixes } from '@app/query/query-prefixes'; -import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; import { useTokenMetadataClient } from '@app/store/common/api-clients.hooks'; import { RateLimiter, useHiroApiRateLimiter } from '../../rate-limiter'; @@ -30,11 +29,11 @@ function fetchNonFungibleTokenMetadata(client: TokenMetadataClient, limiter: Rat } export function useGetNonFungibleTokenMetadataListQuery( - account: StacksAccount + address: string ): UseQueryResult[] { const client = useTokenMetadataClient(); const limiter = useHiroApiRateLimiter(); - const nftHoldings = useGetNonFungibleTokenHoldingsQuery(account.address); + const nftHoldings = useGetNonFungibleTokenHoldingsQuery(address); return useQueries({ queries: (nftHoldings.data?.results ?? []).map(nft => {