From 77b5cc048f420184ccc5115348ddfb86818dafcb Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Tue, 19 Dec 2023 11:01:34 -0600 Subject: [PATCH] fix: ledger locked stx, ref #4539 --- .../loaders/stacks-account-loader.tsx | 12 ++++++-- src/app/features/asset-list/asset-list.tsx | 15 ++++------ .../add-stacks-ledger-keys-item.tsx | 17 +++++++++++ ...balance-item.tsx => stacks-asset-list.tsx} | 4 +-- .../components/stacks-ledger-assets.tsx | 30 ------------------- .../non-fungible-token-holdings.query.ts | 2 +- .../non-fungible-token-metadata.query.ts | 2 +- 7 files changed, 35 insertions(+), 47 deletions(-) create mode 100644 src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx rename src/app/features/asset-list/components/{stacks-balance-item.tsx => stacks-asset-list.tsx} (94%) 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..84ccc9a1be9 100644 --- a/src/app/components/loaders/stacks-account-loader.tsx +++ b/src/app/components/loaders/stacks-account-loader.tsx @@ -1,3 +1,5 @@ +import { ReactNode } from 'react'; + import { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useCurrentStacksAccount, @@ -6,11 +8,15 @@ import { import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; interface CurrentStacksAccountLoaderProps { - children(data: StacksAccount): React.ReactNode; + children(data: StacksAccount): ReactNode; + fallback?: ReactNode; } -export function CurrentStacksAccountLoader({ children }: CurrentStacksAccountLoaderProps) { +export function CurrentStacksAccountLoader({ + children, + fallback, +}: CurrentStacksAccountLoaderProps) { const currentAccount = useCurrentStacksAccount(); - if (!currentAccount) return null; + if (!currentAccount) return fallback ? fallback : null; return children(currentAccount); } diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 185d68e5652..d6703e2c534 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -16,10 +16,10 @@ import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { Collectibles } from '../collectibles/collectibles'; import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers'; +import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-item'; 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 +61,9 @@ export function AssetsList() { ledger: null, })} - {whenWallet({ - software: ( - - {account => } - - ), - ledger: , - })} + }> + {account => } + {whenWallet({ software: ( diff --git a/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx b/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx new file mode 100644 index 00000000000..a09c669a03f --- /dev/null +++ b/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx @@ -0,0 +1,17 @@ +import BigNumber from 'bignumber.js'; + +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 { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils'; + +import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button'; + +export function AddStacksLedgerKeysItem() { + return ( + } + rightElement={} + /> + ); +} 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 94% 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..0c8d0e6308e 100644 --- a/src/app/features/asset-list/components/stacks-balance-item.tsx +++ b/src/app/features/asset-list/components/stacks-asset-list.tsx @@ -8,10 +8,10 @@ import { Caption } from '@app/ui/components/typography/caption'; import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list'; -interface StacksBalanceItemProps { +interface StacksAssetListProps { account: StacksAccount; } -export function StacksBalanceItem({ account }: StacksBalanceItemProps) { +export function StacksAssetList({ account }: StacksAssetListProps) { const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata( account.address ); 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/query/stacks/tokens/non-fungible-tokens/non-fungible-token-holdings.query.ts b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-holdings.query.ts index 993b8d815e0..53109bb58c4 100644 --- a/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-holdings.query.ts +++ b/src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-holdings.query.ts @@ -52,7 +52,7 @@ function makeNonFungibleTokenHoldingsQuery( }; } -export default function useGetNonFungibleTokenHoldingsQuery(address: string) { +export function useGetNonFungibleTokenHoldingsQuery(address: string) { const client = useStacksClientUnanchored(); const network = useCurrentNetworkState(); const limiter = useHiroApiRateLimiter(); 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..b93f7531d98 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 @@ -9,7 +9,7 @@ import { useTokenMetadataClient } from '@app/store/common/api-clients.hooks'; import { RateLimiter, useHiroApiRateLimiter } from '../../rate-limiter'; import { TokenMetadataClient } from '../../token-metadata-client'; import { NftAssetResponse } from '../token-metadata.utils'; -import useGetNonFungibleTokenHoldingsQuery from './non-fungible-token-holdings.query'; +import { useGetNonFungibleTokenHoldingsQuery } from './non-fungible-token-holdings.query'; const queryOptions = { refetchOnWindowFocus: false,