From b21decb9d6f05200055f5f8735f4fd5fda881759 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Tue, 30 Jan 2024 13:20:39 -0600 Subject: [PATCH 1/2] refactor: remove unanchored microblocks, closes #4812 --- .../analytics/use-track-switch-account.ts | 5 +- .../hooks/balance/stx/use-stx-balance.ts | 30 ++++--- .../balance/stx/use-stx-outbound-value.ts | 19 ----- .../hooks/balance/use-total-balance.tsx | 4 +- src/app/common/hooks/use-key-actions.ts | 4 +- .../transactions/stacks/transaction.utils.ts | 5 +- src/app/components/balance-stx.tsx | 4 +- .../components/asset-caption.tsx | 29 +------ .../stacks/components/stacks-asset-avatar.tsx | 4 - .../stacks-unanchored-status-icon.tsx | 6 -- .../stacks/components/stx-avatar.tsx | 8 +- .../stacks-fungible-token-asset-item.tsx | 2 - .../stacks-transaction-status.tsx | 4 - .../transaction/microblock-label.tsx | 22 ------ .../transaction/token-transfer-icon.tsx | 13 ---- .../transaction/transaction-icon.tsx | 2 - .../transaction/transaction-type-icon.tsx | 5 +- .../transaction-list.utils.ts | 20 ----- .../components/stacks-asset-list.tsx | 6 +- .../components/increase-stx-fee-form.tsx | 4 +- .../hooks/use-transaction-error.ts | 4 +- .../stacks-transaction-signer.tsx | 4 +- .../transaction-error/error-messages.tsx | 4 +- src/app/pages/home/components/send-button.tsx | 4 +- .../hooks/use-recipient-bns-name.tsx | 4 +- .../transaction-request.tsx | 4 +- .../balance/stacks-ft-balances.hooks.ts | 78 +++---------------- .../balance/stacks-ft-balances.utils.ts | 31 -------- .../query/stacks/balance/stx-balance.hooks.ts | 10 +-- .../query/stacks/balance/stx-balance.query.ts | 27 +------ src/app/query/stacks/bns/bns.query.ts | 4 +- .../query/stacks/contract/contract.query.ts | 4 +- src/app/query/stacks/info/block-time.query.ts | 4 +- src/app/query/stacks/mempool/mempool.hooks.ts | 4 +- src/app/query/stacks/mempool/mempool.query.ts | 7 +- .../stacks/microblock/microblock.query.ts | 29 ------- .../stacks/nonce/account-nonces.query.ts | 4 +- src/app/query/stacks/stacks-client.ts | 3 - .../non-fungible-token-holdings.query.ts | 4 +- .../transactions/transactions-by-id.query.ts | 6 +- .../transactions-with-transfers.query.ts | 4 +- src/app/query/stacks/utils.ts | 27 +------ src/app/store/common/api-clients.hooks.ts | 21 +---- src/app/store/transactions/raw.hooks.ts | 4 +- src/shared/constants.ts | 3 - .../models/crypto-asset-balance.model.ts | 1 + .../transactions/stacks-transaction.model.ts | 2 +- 47 files changed, 89 insertions(+), 408 deletions(-) delete mode 100644 src/app/common/hooks/balance/stx/use-stx-outbound-value.ts delete mode 100644 src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx delete mode 100644 src/app/components/transaction/microblock-label.tsx delete mode 100644 src/app/query/stacks/microblock/microblock.query.ts diff --git a/src/app/common/hooks/analytics/use-track-switch-account.ts b/src/app/common/hooks/analytics/use-track-switch-account.ts index 10ef8a524d9..cb3f70ad2f4 100644 --- a/src/app/common/hooks/analytics/use-track-switch-account.ts +++ b/src/app/common/hooks/analytics/use-track-switch-account.ts @@ -10,10 +10,7 @@ export function useTrackSwitchAccount() { return useCallback( async (address: string, index: number) => { - const accountBalanceCache = queryClient.getQueryData([ - 'get-address-anchored-stx-balance', - address, - ]); + const accountBalanceCache = queryClient.getQueryData(['get-address-stx-balance', address]); if (!accountBalanceCache) return; try { const balances = parseBalanceResponse(accountBalanceCache as any); diff --git a/src/app/common/hooks/balance/stx/use-stx-balance.ts b/src/app/common/hooks/balance/stx/use-stx-balance.ts index 2f9efb8a305..5a7312902f7 100644 --- a/src/app/common/hooks/balance/stx/use-stx-balance.ts +++ b/src/app/common/hooks/balance/stx/use-stx-balance.ts @@ -7,38 +7,36 @@ import { baseCurrencyAmountInQuote, subtractMoney } from '@app/common/money/calc import { i18nFormatCurrency } from '@app/common/money/format-money'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; - -import { useStxOutboundValue } from './use-stx-outbound-value'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentAccountMempoolTransactionsBalance } from '@app/query/stacks/mempool/mempool.hooks'; export function useStxBalance() { - const anchoredBalanceQuery = useCurrentStacksAccountAnchoredBalances(); - const totalBalance = anchoredBalanceQuery.data?.stx.balance; - const unlockedStxBalance = anchoredBalanceQuery.data?.stx.unlockedStx; + const stxBalanceQuery = useCurrentStacksAccountBalances(); + const totalBalance = stxBalanceQuery.data?.stx.balance; + const unlockedStxBalance = stxBalanceQuery.data?.stx.unlockedStx; const stxMarketData = useCryptoCurrencyMarketData('STX'); - const stxOutboundQuery = useStxOutboundValue(); + const pendingTxsBalance = useCurrentAccountMempoolTransactionsBalance(); const stxEffectiveBalance = isDefined(totalBalance) - ? subtractMoney(totalBalance, stxOutboundQuery.data) + ? subtractMoney(totalBalance, pendingTxsBalance) : createMoney(0, 'STX'); const stxEffectiveUsdBalance = isDefined(totalBalance) ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxEffectiveBalance, stxMarketData)) : undefined; - const stxLockedBalance = anchoredBalanceQuery.data?.stx.locked; + const stxLockedBalance = stxBalanceQuery.data?.stx.locked; const stxUsdLockedBalance = isDefined(stxLockedBalance) ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxLockedBalance, stxMarketData)) : undefined; return useMemo(() => { return { - anchoredBalanceQuery, - stxOutboundQuery, - isLoading: anchoredBalanceQuery.isLoading || stxOutboundQuery.isLoading, + stxBalanceQuery, + stxOutboundQuery: pendingTxsBalance, availableBalance: isDefined(unlockedStxBalance) - ? subtractMoney(unlockedStxBalance, stxOutboundQuery.data) + ? subtractMoney(unlockedStxBalance, pendingTxsBalance) : createMoney(0, 'STX'), stxEffectiveBalance: createStacksCryptoCurrencyAssetTypeWrapper(stxEffectiveBalance.amount), stxEffectiveUsdBalance, @@ -46,10 +44,10 @@ export function useStxBalance() { stxUsdLockedBalance, }; }, [ - anchoredBalanceQuery, - stxOutboundQuery, + stxBalanceQuery, + pendingTxsBalance, unlockedStxBalance, - stxEffectiveBalance, + stxEffectiveBalance.amount, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance, diff --git a/src/app/common/hooks/balance/stx/use-stx-outbound-value.ts b/src/app/common/hooks/balance/stx/use-stx-outbound-value.ts deleted file mode 100644 index 7d5ae4a104e..00000000000 --- a/src/app/common/hooks/balance/stx/use-stx-outbound-value.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { sumMoney } from '@app/common/money/calculate-money'; -import { useCurrentAccountMempoolTransactionsBalance } from '@app/query/stacks/mempool/mempool.hooks'; -import { useCurrentAccountMicroblockBalanceQuery } from '@app/query/stacks/microblock/microblock.query'; -import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; - -export function useStxOutboundValue() { - const stxAddress = useCurrentAccountStxAddressState(); - const pendingTxsBalance = useCurrentAccountMempoolTransactionsBalance(); - const microblockBalanceQuery = useCurrentAccountMicroblockBalanceQuery(stxAddress); - - if (!microblockBalanceQuery.data) { - return { ...microblockBalanceQuery, data: pendingTxsBalance }; - } - - return { - ...microblockBalanceQuery, - data: sumMoney([pendingTxsBalance, microblockBalanceQuery.data]), - }; -} diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx index 27aa0b54875..e1c07fbdc86 100644 --- a/src/app/common/hooks/balance/use-total-balance.tsx +++ b/src/app/common/hooks/balance/use-total-balance.tsx @@ -5,7 +5,7 @@ import { createMoney } from '@shared/models/money.model'; import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money'; import { i18nFormatCurrency } from '@app/common/money/format-money'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; -import { useAnchoredStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useBtcAssetBalance } from './btc/use-btc-balance'; @@ -20,7 +20,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs) const stxMarketData = useCryptoCurrencyMarketData('STX'); // get stx balance - const { data: balances, isLoading } = useAnchoredStacksAccountBalances(stxAddress); + const { data: balances, isLoading } = useStacksAccountBalances(stxAddress); const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX'); // get btc balance diff --git a/src/app/common/hooks/use-key-actions.ts b/src/app/common/hooks/use-key-actions.ts index 4dc44a80e46..27fb30289e1 100644 --- a/src/app/common/hooks/use-key-actions.ts +++ b/src/app/common/hooks/use-key-actions.ts @@ -9,7 +9,7 @@ import { queryClient } from '@app/common/persistence'; import { partiallyClearLocalStorage } from '@app/common/store-utils'; import { useAppDispatch } from '@app/store'; import { createNewAccount, stxChainActions } from '@app/store/chains/stx-chain.actions'; -import { useBitcoinClient, useStacksClientAnchored } from '@app/store/common/api-clients.hooks'; +import { useBitcoinClient, useStacksClient } from '@app/store/common/api-clients.hooks'; import { inMemoryKeyActions } from '@app/store/in-memory-key/in-memory-key.actions'; import { bitcoinKeysSlice } from '@app/store/ledger/bitcoin/bitcoin-key.slice'; import { stacksKeysSlice } from '@app/store/ledger/stacks/stacks-key.slice'; @@ -23,7 +23,7 @@ export function useKeyActions() { const analytics = useAnalytics(); const dispatch = useAppDispatch(); const defaultKeyDetails = useCurrentKeyDetails(); - const stxClient = useStacksClientAnchored(); + const stxClient = useStacksClient(); const btcClient = useBitcoinClient(); return useMemo( diff --git a/src/app/common/transactions/stacks/transaction.utils.ts b/src/app/common/transactions/stacks/transaction.utils.ts index 068daeac07b..a4aab96e1bb 100644 --- a/src/app/common/transactions/stacks/transaction.utils.ts +++ b/src/app/common/transactions/stacks/transaction.utils.ts @@ -25,10 +25,7 @@ import { truncateMiddle } from '@app/ui/utils/truncate-middle'; export const statusFromTx = (tx: StacksTx): StacksTxStatus => { const { tx_status } = tx; if (tx_status === 'pending') return 'pending'; - if (tx_status === 'success') - return 'is_unanchored' in tx && tx.is_unanchored - ? 'success_microblock' - : 'success_anchor_block'; + if (tx_status === 'success') return 'success'; return 'failed'; }; diff --git a/src/app/components/balance-stx.tsx b/src/app/components/balance-stx.tsx index 65418c5c6b8..bf72d248603 100644 --- a/src/app/components/balance-stx.tsx +++ b/src/app/components/balance-stx.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { stacksValue } from '@app/common/stacks-utils'; -import { useAnchoredStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { Caption } from '@app/ui/components/typography/caption'; interface BalanceProps { @@ -9,7 +9,7 @@ interface BalanceProps { } export function StxBalance(props: BalanceProps) { const { address } = props; - const { data: balances } = useAnchoredStacksAccountBalances(address); + const { data: balances } = useStacksAccountBalances(address); const balance = useMemo( () => diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx index 25116dfecf0..36dd07d71d4 100644 --- a/src/app/components/crypto-assets/components/asset-caption.tsx +++ b/src/app/components/crypto-assets/components/asset-caption.tsx @@ -1,37 +1,12 @@ -import { Flex, HStack, styled } from 'leather-styles/jsx'; - -import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator'; -import { InfoIcon } from '@app/ui/components/icons/info-icon'; -import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; +import { Flex, styled } from 'leather-styles/jsx'; interface AssetCaptionProps { caption: string; - isUnanchored?: boolean; } -export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) { +export function AssetCaption({ caption }: AssetCaptionProps) { return ( {caption}{' '} - {isUnanchored ? ( - <> - - Microblock - - - - - - - - - - ) : ( - '' - )} ); } diff --git a/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx index 13fd5147231..f731aea9a1f 100644 --- a/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx +++ b/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx @@ -2,14 +2,12 @@ import { Box, BoxProps } from 'leather-styles/jsx'; import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle'; -import { StacksUnanchoredStatusIcon } from './stacks-unanchored-status-icon'; import { StxAvatar } from './stx-avatar'; interface StacksAssetAvatarProps extends BoxProps { gradientString?: string; imageCanonicalUri?: string; isStx?: boolean; - isUnanchored?: boolean; size?: string; } export function StacksAssetAvatar({ @@ -17,7 +15,6 @@ export function StacksAssetAvatar({ gradientString, imageCanonicalUri, isStx, - isUnanchored, size = '36', ...props }: StacksAssetAvatarProps) { @@ -33,7 +30,6 @@ export function StacksAssetAvatar({ return ( {children} - {isUnanchored ? : null} ); } diff --git a/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx b/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx deleted file mode 100644 index b412c6df1a8..00000000000 --- a/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper'; -import { ZapIcon } from '@app/ui/components/icons/zap-icon'; - -export function StacksUnanchoredStatusIcon() { - return } />; -} diff --git a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx index 34bba2f3c0a..f1205936f29 100644 --- a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx +++ b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx @@ -2,12 +2,7 @@ import { Circle, CircleProps } from 'leather-styles/jsx'; import { StxIcon } from '@app/ui/components/icons/stx-icon'; -import { StacksUnanchoredStatusIcon } from './stacks-unanchored-status-icon'; - -interface StxAvatarProps extends CircleProps { - isUnanchored?: boolean; -} -export function StxAvatar({ isUnanchored, ...props }: StxAvatarProps) { +export function StxAvatar({ ...props }: CircleProps) { return ( - {isUnanchored ? : null} ); } diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx index 3e62de0873e..62c76e02d1c 100644 --- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx +++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx @@ -2,7 +2,6 @@ import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors'; import { FlexProps } from 'leather-styles/jsx'; import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model'; -import { Money } from '@shared/models/money.model'; import { getImageCanonicalUri } from '@app/common/crypto-assets/stacks-crypto-asset.utils'; import { formatContractId, getTicker } from '@app/common/utils'; @@ -13,7 +12,6 @@ import { StacksFungibleTokenAssetItemLayout } from './stacks-fungible-token-asse interface StacksFungibleTokenAssetItemProps extends FlexProps { assetBalance: StacksFungibleTokenAssetBalance; - unanchoredAssetBalance?: Money; isPressable?: boolean; onClick?(): void; } diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx index f3075f06311..c0cf05f5bb6 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx +++ b/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx @@ -5,7 +5,6 @@ import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; import { isPendingTx } from '@app/common/transactions/stacks/transaction.utils'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; -import { MicroblockLabel } from '../transaction/microblock-label'; import { PendingLabel } from '../transaction/pending-label'; interface TransactionStatusProps { @@ -14,13 +13,10 @@ interface TransactionStatusProps { export function StacksTransactionStatus({ transaction }: TransactionStatusProps) { const isPending = isPendingTx(transaction); const isFailed = !isPending && transaction.tx_status !== 'success'; - const isInMicroblock = - !isPending && transaction.tx_status === 'success' && transaction.is_unanchored; return ( <> {isPending && } - {isInMicroblock && } {isFailed && ( diff --git a/src/app/components/transaction/microblock-label.tsx b/src/app/components/transaction/microblock-label.tsx deleted file mode 100644 index 6db87cf84e2..00000000000 --- a/src/app/components/transaction/microblock-label.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Box, Flex, styled } from 'leather-styles/jsx'; - -import { InfoIcon } from '@app/ui/components/icons/info-icon'; -import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; - -const inMicroblockMessage = - 'This transaction is currently in a microblock, which increases the chances of inclusion in the next anchor block.'; - -export function MicroblockLabel() { - return ( - - - In microblock - - - - - - - - ); -} diff --git a/src/app/components/transaction/token-transfer-icon.tsx b/src/app/components/transaction/token-transfer-icon.tsx index 7e12e5f7f5c..d6cb371fde1 100644 --- a/src/app/components/transaction/token-transfer-icon.tsx +++ b/src/app/components/transaction/token-transfer-icon.tsx @@ -3,25 +3,12 @@ import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; -import { ZapIcon } from '@app/ui/components/icons/zap-icon'; - -import { getColorFromTx } from './transaction-type-icon'; export function TokenTransferIcon(props: { tx: StacksTx }) { const { tx } = props; const currentAccountStxAddress = useCurrentAccountStxAddressState(); const isSent = tx.sender_address === currentAccountStxAddress; - if ('is_unanchored' in tx && tx.is_unanchored) - return ( - - ); - if (isSent) return ; return ; diff --git a/src/app/components/transaction/transaction-icon.tsx b/src/app/components/transaction/transaction-icon.tsx index 38297ead18e..f701007643d 100644 --- a/src/app/components/transaction/transaction-icon.tsx +++ b/src/app/components/transaction/transaction-icon.tsx @@ -18,8 +18,6 @@ export function TransactionIcon(props: { tx: StacksTx }) { return ; case 'contract_call': return ; - case 'poison_microblock': - return null; default: return null; } diff --git a/src/app/components/transaction/transaction-type-icon.tsx b/src/app/components/transaction/transaction-type-icon.tsx index a4634d66d2a..d0a236ff1ea 100644 --- a/src/app/components/transaction/transaction-type-icon.tsx +++ b/src/app/components/transaction/transaction-type-icon.tsx @@ -7,11 +7,10 @@ import { TransactionTypeIconWrapper } from './transaction-type-icon-wrapper'; type StatusColorMap = Record; -export function getColorFromTx(tx: StacksTx) { +function getColorFromTx(tx: StacksTx) { const colorMap: StatusColorMap = { pending: 'warning.label', - success_microblock: 'stacks', - success_anchor_block: 'stacks', + success: 'stacks', failed: 'error.label', }; diff --git a/src/app/features/activity-list/components/transaction-list/transaction-list.utils.ts b/src/app/features/activity-list/components/transaction-list/transaction-list.utils.ts index 8d8dc60362b..976ce32fed9 100644 --- a/src/app/features/activity-list/components/transaction-list/transaction-list.utils.ts +++ b/src/app/features/activity-list/components/transaction-list/transaction-list.utils.ts @@ -44,15 +44,6 @@ function getTransactionTxIndex(listTx: TransactionListTxs) { } } -function getTransactionMicroblockSequence(listTx: TransactionListTxs) { - switch (listTx.blockchain) { - case 'stacks': - return listTx.transaction.tx.microblock_sequence; - default: - return undefined; - } -} - function getTransactionBlockHeight(listTx: TransactionListTxs) { switch (listTx.blockchain) { case 'bitcoin': @@ -74,17 +65,6 @@ function groupTxsByDateMap(txs: TransactionListTxs[]) { if (!aTxIndex || !bTxIndex) return 0; return aTxIndex > bTxIndex ? -1 : aTxIndex < bTxIndex ? 1 : 0; }) - .sort((a, b) => { - const aMicroblockSequence = getTransactionMicroblockSequence(a); - const bMicroblockSequence = getTransactionMicroblockSequence(b); - - if (!aMicroblockSequence || !bMicroblockSequence) return 0; - return aMicroblockSequence > bMicroblockSequence - ? -1 - : aMicroblockSequence < bMicroblockSequence - ? 1 - : 0; - }) .sort((a, b) => { const aBlockHeight = getTransactionBlockHeight(a); const bBlockHeight = getTransactionBlockHeight(b); diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx index 40207ba6177..13019d672e4 100644 --- a/src/app/features/asset-list/components/stacks-asset-list.tsx +++ b/src/app/features/asset-list/components/stacks-asset-list.tsx @@ -4,7 +4,7 @@ import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; 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 { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator'; import { Caption } from '@app/ui/components/typography/caption'; @@ -15,9 +15,7 @@ interface StacksAssetListProps { account: StacksAccount; } export function StacksAssetList({ account }: StacksAssetListProps) { - const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata( - account.address - ); + const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(account.address); const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } = useStxBalance(); diff --git a/src/app/features/increase-fee-drawer/components/increase-stx-fee-form.tsx b/src/app/features/increase-fee-drawer/components/increase-stx-fee-form.tsx index e7620a13e18..a54b6467629 100644 --- a/src/app/features/increase-fee-drawer/components/increase-stx-fee-form.tsx +++ b/src/app/features/increase-fee-drawer/components/increase-stx-fee-form.tsx @@ -19,7 +19,7 @@ import { stxFeeValidator } from '@app/common/validation/forms/fee-validators'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { StacksTransactionItem } from '@app/components/stacks-transaction-item/stacks-transaction-item'; import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks'; import { useReplaceByFeeSoftwareWalletSubmitCallBack } from '@app/store/transactions/fees.hooks'; import { useRawDeserializedTxState, useRawTxIdState } from '@app/store/transactions/raw.hooks'; @@ -35,7 +35,7 @@ export function IncreaseStxFeeForm() { const navigate = useNavigate(); const [, setTxId] = useRawTxIdState(); const replaceByFee = useReplaceByFeeSoftwareWalletSubmitCallBack(); - const { data: balances } = useCurrentStacksAccountAnchoredBalances(); + const { data: balances } = useCurrentStacksAccountBalances(); const { availableBalance } = useStxBalance(); const submittedTransactionsActions = useSubmittedTransactionsActions(); const rawTx = useRawDeserializedTxState(); diff --git a/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts b/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts index 41f0493d41a..e79e95cbba4 100644 --- a/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts +++ b/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts @@ -11,7 +11,7 @@ import { initialSearchParams } from '@app/common/initial-search-params'; import { stxToMicroStx } from '@app/common/money/unit-conversion'; import { validateStacksAddress } from '@app/common/stacks-utils'; import { TransactionErrorReason } from '@app/features/stacks-transaction-request/transaction-error/transaction-error'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useContractInterface } from '@app/query/stacks/contract/contract.hooks'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; @@ -27,7 +27,7 @@ export function useTransactionError() { const { values } = useFormikContext(); const currentAccount = useCurrentStacksAccount(); - const { data: balances } = useCurrentStacksAccountAnchoredBalances(); + const { data: balances } = useCurrentStacksAccountBalances(); return useMemo(() => { if (!origin) return TransactionErrorReason.ExpiredRequest; diff --git a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx index bce6c6504b2..aa1207aaccf 100644 --- a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx +++ b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx @@ -27,7 +27,7 @@ import { PostConditionModeWarning } from '@app/features/stacks-transaction-reque import { PostConditions } from '@app/features/stacks-transaction-request/post-conditions/post-conditions'; import { StxTransferDetails } from '@app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details'; import { TransactionError } from '@app/features/stacks-transaction-request/transaction-error/transaction-error'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks'; import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; @@ -55,7 +55,7 @@ export function StacksTransactionSigner({ const transactionRequest = useTransactionRequestState(); const { data: stxFees } = useCalculateStacksTxFees(stacksTransaction); const analytics = useAnalytics(); - const { data: stacksBalances } = useCurrentStacksAccountAnchoredBalances(); + const { data: stacksBalances } = useCurrentStacksAccountBalances(); const navigate = useNavigate(); const { data: nextNonce } = useNextNonce(); const { search } = useLocation(); diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx index dd8227d7680..374d70aa006 100644 --- a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx +++ b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx @@ -12,7 +12,7 @@ import { useDrawers } from '@app/common/hooks/use-drawers'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { stacksValue } from '@app/common/stacks-utils'; import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; import { Button } from '@app/ui/components/button/button'; @@ -55,7 +55,7 @@ export const FeeInsufficientFundsErrorMessage = memo(props => { export const StxTransferInsufficientFundsErrorMessage = memo(props => { const pendingTransaction = useTransactionRequestState(); - const { data: balance } = useCurrentStacksAccountAnchoredBalances(); + const { data: balance } = useCurrentStacksAccountBalances(); return ( (); const [bnsAddress, setBnsAddress] = useState(''); const currentNetwork = useCurrentNetworkState(); - const client = useStacksClientUnanchored(); + const client = useStacksClient(); const getBnsAddressAndValidate = useCallback( async ( diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx index e565a736125..be8cd8cdb05 100644 --- a/src/app/pages/transaction-request/transaction-request.tsx +++ b/src/app/pages/transaction-request/transaction-request.tsx @@ -32,7 +32,7 @@ import { PostConditions } from '@app/features/stacks-transaction-request/post-co import { StxTransferDetails } from '@app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details'; import { SubmitAction } from '@app/features/stacks-transaction-request/submit-action'; import { TransactionError } from '@app/features/stacks-transaction-request/transaction-error/transaction-error'; -import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks'; import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; @@ -52,7 +52,7 @@ function TransactionRequestBase() { const { data: stxFees } = useCalculateStacksTxFees(unsignedTx.transaction); const analytics = useAnalytics(); const generateUnsignedTx = useGenerateUnsignedStacksTransaction(); - const { data: stacksBalances } = useCurrentStacksAccountAnchoredBalances(); + const { data: stacksBalances } = useCurrentStacksAccountBalances(); const { data: nextNonce } = useNextNonce(); const navigate = useNavigate(); const signStacksTransaction = useSignStacksTransaction(); diff --git a/src/app/query/stacks/balance/stacks-ft-balances.hooks.ts b/src/app/query/stacks/balance/stacks-ft-balances.hooks.ts index 6e81ec2a351..7458e315ee5 100644 --- a/src/app/query/stacks/balance/stacks-ft-balances.hooks.ts +++ b/src/app/query/stacks/balance/stacks-ft-balances.hooks.ts @@ -14,47 +14,27 @@ import { isFtAsset } from '../tokens/token-metadata.utils'; import { addQueriedMetadataToInitializedStacksFungibleTokenAssetBalance, convertFtBalancesToStacksFungibleTokenAssetBalanceType, - convertNftBalancesToStacksNonFungibleTokenAssetBalanceType, createStacksCryptoCurrencyAssetTypeWrapper, createStacksFtCryptoAssetBalanceTypeWrapper, } from './stacks-ft-balances.utils'; import { parseBalanceResponse } from './stx-balance.hooks'; -import { - useAnchoredStacksAccountBalanceQuery, - useUnanchoredStacksAccountBalanceQuery, -} from './stx-balance.query'; - -export function useStacksAnchoredCryptoCurrencyAssetBalance(address: string) { - return useAnchoredStacksAccountBalanceQuery(address, { - select: resp => - createStacksCryptoCurrencyAssetTypeWrapper(parseBalanceResponse(resp).stx.unlockedStx.amount), - }); -} +import { useStacksAccountBalanceQuery } from './stx-balance.query'; -// we will probably need this in the future -// ts-unused-exports:disable-next-line -export function useStacksUnanchoredCryptoCurrencyAssetBalance(address: string) { - return useUnanchoredStacksAccountBalanceQuery(address, { +export function useStacksCryptoCurrencyAssetBalance(address: string) { + return useStacksAccountBalanceQuery(address, { select: resp => createStacksCryptoCurrencyAssetTypeWrapper(parseBalanceResponse(resp).stx.unlockedStx.amount), }); } -function useStacksFungibleTokenAssetBalancesAnchored(address: string) { - return useAnchoredStacksAccountBalanceQuery(address, { - select: resp => convertFtBalancesToStacksFungibleTokenAssetBalanceType(resp.fungible_tokens), - }); -} - -function useStacksFungibleTokenAssetBalancesUnanchored(address: string) { - return useUnanchoredStacksAccountBalanceQuery(address, { +function useStacksFungibleTokenAssetBalances(address: string) { + return useStacksAccountBalanceQuery(address, { select: resp => convertFtBalancesToStacksFungibleTokenAssetBalanceType(resp.fungible_tokens), }); } -export function useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address: string) { - const { data: initializedAssetBalances = [] } = - useStacksFungibleTokenAssetBalancesAnchored(address); +export function useStacksFungibleTokenAssetBalancesWithMetadata(address: string) { + const { data: initializedAssetBalances = [] } = useStacksFungibleTokenAssetBalances(address); const ftAssetsMetadata = useGetFungibleTokenMetadataListQuery( initializedAssetBalances.map(assetBalance => @@ -77,38 +57,10 @@ export function useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address: ); } -function useStacksFungibleTokenAssetBalancesUnanchoredWithMetadata( - address: string -): StacksFungibleTokenAssetBalance[] { - const { data: initializedAssetBalances = [] } = - useStacksFungibleTokenAssetBalancesUnanchored(address); - const ftAssetsMetadata = useGetFungibleTokenMetadataListQuery( - initializedAssetBalances.map(assetBalance => - formatContractId(assetBalance.asset.contractAddress, assetBalance.asset.contractName) - ) - ); - - return useMemo( - () => - initializedAssetBalances.map((assetBalance, i) => { - const metadata = ftAssetsMetadata[i].data; - if (!(metadata && isFtAsset(metadata))) return assetBalance; - return addQueriedMetadataToInitializedStacksFungibleTokenAssetBalance( - assetBalance, - metadata - ); - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [initializedAssetBalances] - ); -} - export function useStacksFungibleTokenAssetBalance(contractId: string) { const account = useCurrentStacksAccount(); const navigate = useNavigate(); - const assetBalances = useStacksFungibleTokenAssetBalancesUnanchoredWithMetadata( - account?.address ?? '' - ); + const assetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(account?.address ?? ''); return useMemo(() => { const balance = assetBalances.find(assetBalance => assetBalance.asset.contractId.includes(contractId) @@ -124,21 +76,9 @@ export function useStacksFungibleTokenAssetBalance(contractId: string) { export function useTransferableStacksFungibleTokenAssetBalances( address: string ): StacksFungibleTokenAssetBalance[] { - const assetBalances = useStacksFungibleTokenAssetBalancesUnanchoredWithMetadata(address); + const assetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(address); return useMemo( () => assetBalances.filter(assetBalance => assetBalance.asset.canTransfer), [assetBalances] ); } - -// TODO: Remove? -// ts-unused-exports:disable-next-line -export function useStacksNonFungibleTokenAssetsUnanchored() { - const account = useCurrentStacksAccount(); - return useUnanchoredStacksAccountBalanceQuery(account?.address ?? '', { - select: resp => - convertNftBalancesToStacksNonFungibleTokenAssetBalanceType( - parseBalanceResponse(resp).non_fungible_tokens - ), - }); -} diff --git a/src/app/query/stacks/balance/stacks-ft-balances.utils.ts b/src/app/query/stacks/balance/stacks-ft-balances.utils.ts index ec183803008..b93f7bd0211 100644 --- a/src/app/query/stacks/balance/stacks-ft-balances.utils.ts +++ b/src/app/query/stacks/balance/stacks-ft-balances.utils.ts @@ -6,7 +6,6 @@ import type { AccountBalanceResponseBigNumber } from '@shared/models/account.mod import type { StacksCryptoCurrencyAssetBalance, StacksFungibleTokenAssetBalance, - StacksNonFungibleTokenAssetBalance, } from '@shared/models/crypto-asset-balance.model'; import { createMoney } from '@shared/models/money.model'; @@ -53,25 +52,6 @@ export function createStacksFtCryptoAssetBalanceTypeWrapper( }; } -function createStacksNftCryptoAssetBalanceTypeWrapper( - balance: BigNumber, - key: string -): StacksNonFungibleTokenAssetBalance { - const { address, contractName, assetName } = getAssetStringParts(key); - return { - blockchain: 'stacks', - type: 'non-fungible-token', - count: balance, - asset: { - contractAddress: address, - contractAssetName: assetName, - contractName, - imageCanonicalUri: '', - name: '', - }, - }; -} - export function convertFtBalancesToStacksFungibleTokenAssetBalanceType( ftBalances: AccountBalanceResponseBigNumber['fungible_tokens'] ) { @@ -86,17 +66,6 @@ export function convertFtBalancesToStacksFungibleTokenAssetBalanceType( ); } -export function convertNftBalancesToStacksNonFungibleTokenAssetBalanceType( - nftBalances: AccountBalanceResponseBigNumber['non_fungible_tokens'] -) { - return Object.entries(nftBalances) - .map(([key, value]) => { - const count = new BigNumber(value.count); - return createStacksNftCryptoAssetBalanceTypeWrapper(count, key); - }) - .filter(assetBalance => !assetBalance?.count.isEqualTo(0)); -} - export function addQueriedMetadataToInitializedStacksFungibleTokenAssetBalance( assetBalance: StacksFungibleTokenAssetBalance, metadata: FtMetadataResponse diff --git a/src/app/query/stacks/balance/stx-balance.hooks.ts b/src/app/query/stacks/balance/stx-balance.hooks.ts index e5076ddbc95..82736e0cb5c 100644 --- a/src/app/query/stacks/balance/stx-balance.hooks.ts +++ b/src/app/query/stacks/balance/stx-balance.hooks.ts @@ -10,7 +10,7 @@ import { Money, createMoney } from '@shared/models/money.model'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { accountBalanceStxKeys } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; -import { useAnchoredStacksAccountBalanceQuery } from './stx-balance.query'; +import { useStacksAccountBalanceQuery } from './stx-balance.query'; export function parseBalanceResponse(balances: AddressBalanceResponse) { const stxMoney = Object.fromEntries( @@ -30,13 +30,13 @@ export function parseBalanceResponse(balances: AddressBalanceResponse) { return { ...balances, stx }; } -export function useAnchoredStacksAccountBalances(address: string) { - return useAnchoredStacksAccountBalanceQuery(address, { +export function useStacksAccountBalances(address: string) { + return useStacksAccountBalanceQuery(address, { select: resp => parseBalanceResponse(resp), }); } -export function useCurrentStacksAccountAnchoredBalances() { +export function useCurrentStacksAccountBalances() { const account = useCurrentStacksAccount(); - return useAnchoredStacksAccountBalances(account?.address ?? ''); + return useStacksAccountBalances(account?.address ?? ''); } diff --git a/src/app/query/stacks/balance/stx-balance.query.ts b/src/app/query/stacks/balance/stx-balance.query.ts index e01331614b4..5cb0b95910b 100644 --- a/src/app/query/stacks/balance/stx-balance.query.ts +++ b/src/app/query/stacks/balance/stx-balance.query.ts @@ -4,10 +4,7 @@ import { AddressBalanceResponse } from '@shared/models/account.model'; import { AppUseQueryConfig } from '@app/query/query-config'; import { StacksClient } from '@app/query/stacks/stacks-client'; -import { - useStacksClientAnchored, - useStacksClientUnanchored, -} from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { RateLimiter, useHiroApiRateLimiter } from '../rate-limiter'; @@ -30,33 +27,17 @@ function fetchAccountBalance(client: StacksClient, limiter: RateLimiter) { type FetchAccountBalanceResp = Awaited>>; -export function useUnanchoredStacksAccountBalanceQuery( +export function useStacksAccountBalanceQuery( address: string, options?: AppUseQueryConfig ) { - const client = useStacksClientUnanchored(); - const limiter = useHiroApiRateLimiter(); - - return useQuery({ - enabled: !!address, - queryKey: ['get-address-stx-balance', address], - queryFn: () => fetchAccountBalance(client, limiter)(address), - ...balanceQueryOptions, - ...options, - }); -} - -export function useAnchoredStacksAccountBalanceQuery( - address: string, - options?: AppUseQueryConfig -) { - const client = useStacksClientAnchored(); + const client = useStacksClient(); const limiter = useHiroApiRateLimiter(); const network = useCurrentNetworkState(); return useQuery({ enabled: !!address, - queryKey: ['get-address-anchored-stx-balance', address, network.id], + queryKey: ['get-address-stx-balance', address, network.id], queryFn: () => fetchAccountBalance(client, limiter)(address), ...balanceQueryOptions, ...options, diff --git a/src/app/query/stacks/bns/bns.query.ts b/src/app/query/stacks/bns/bns.query.ts index fbab225cf1f..29603e09bfd 100644 --- a/src/app/query/stacks/bns/bns.query.ts +++ b/src/app/query/stacks/bns/bns.query.ts @@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'; import { AppUseQueryConfig } from '@app/query/query-config'; import { QueryPrefixes } from '@app/query/query-prefixes'; import { StacksClient } from '@app/query/stacks/stacks-client'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { RateLimiter, useHiroApiRateLimiter } from '../rate-limiter'; @@ -45,7 +45,7 @@ export function useGetBnsNamesOwnedByAddress ) { - const client = useStacksClientUnanchored(); + const client = useStacksClient(); const limiter = useHiroApiRateLimiter(); const { isTestnet } = useCurrentNetworkState(); return useQuery({ diff --git a/src/app/query/stacks/contract/contract.query.ts b/src/app/query/stacks/contract/contract.query.ts index 84a3508352c..7bcbd70d1a9 100644 --- a/src/app/query/stacks/contract/contract.query.ts +++ b/src/app/query/stacks/contract/contract.query.ts @@ -3,12 +3,12 @@ import { useQuery } from '@tanstack/react-query'; import { ContractInterfaceResponseWithFunctions } from '@shared/models/contract-types'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { useHiroApiRateLimiter } from '../rate-limiter'; export function useGetContractInterface(transactionRequest: ContractCallPayload | null) { - const { smartContractsApi } = useStacksClientUnanchored(); + const { smartContractsApi } = useStacksClient(); const limiter = useHiroApiRateLimiter(); async function fetchContractInterface() { diff --git a/src/app/query/stacks/info/block-time.query.ts b/src/app/query/stacks/info/block-time.query.ts index 1eb8d1541cf..eb8064cbd3d 100644 --- a/src/app/query/stacks/info/block-time.query.ts +++ b/src/app/query/stacks/info/block-time.query.ts @@ -1,9 +1,9 @@ import { useQuery } from '@tanstack/react-query'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; export function useGetStackNetworkBlockTimeQuery() { - const client = useStacksClientUnanchored(); + const client = useStacksClient(); return useQuery({ queryKey: ['stacks-block-time'], diff --git a/src/app/query/stacks/mempool/mempool.hooks.ts b/src/app/query/stacks/mempool/mempool.hooks.ts index bdf48e172d7..1557b6ab0c6 100644 --- a/src/app/query/stacks/mempool/mempool.hooks.ts +++ b/src/app/query/stacks/mempool/mempool.hooks.ts @@ -19,7 +19,7 @@ import { useAccountMempoolQuery } from './mempool.query'; const droppedCache = new Map(); -function useAccountUnanchoredMempoolTransactions(address: string) { +function useAccountMempoolTransactions(address: string) { const analytics = useAnalytics(); const query = useAccountMempoolQuery(address); const accountMempoolTxs = query.data; @@ -51,7 +51,7 @@ function useAccountUnanchoredMempoolTransactions(address: string) { export function useStacksPendingTransactions() { const address = useCurrentAccountStxAddressState(); - const { query, transactions } = useAccountUnanchoredMempoolTransactions(address ?? ''); + const { query, transactions } = useAccountMempoolTransactions(address ?? ''); return useMemo(() => { const nonEmptyTransactions = transactions.filter(tx => !!tx) as MempoolTransaction[]; return { query, transactions: nonEmptyTransactions }; diff --git a/src/app/query/stacks/mempool/mempool.query.ts b/src/app/query/stacks/mempool/mempool.query.ts index 455371b3da5..bed57dfb823 100644 --- a/src/app/query/stacks/mempool/mempool.query.ts +++ b/src/app/query/stacks/mempool/mempool.query.ts @@ -1,16 +1,15 @@ import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types'; import { useQuery } from '@tanstack/react-query'; -import { queryClient } from '@app/common/persistence'; import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks'; import { useSubmittedTransactions } from '@app/store/submitted-transactions/submitted-transactions.selectors'; import { useHiroApiRateLimiter } from '../rate-limiter'; export function useAccountMempoolQuery(address: string) { - const client = useStacksClientUnanchored(); + const client = useStacksClient(); const submittedTransactions = useSubmittedTransactions(); const submittedTransactionsActions = useSubmittedTransactionsActions(); const limiter = useHiroApiRateLimiter(); @@ -25,8 +24,6 @@ export function useAccountMempoolQuery(address: string) { queryKey: ['account-mempool', address], queryFn: accountMempoolFetcher, onSuccess: data => { - void queryClient.invalidateQueries({ queryKey: ['account-microblock'] }); - const pendingTxids = (data.results as MempoolTransaction[]).map(tx => tx.tx_id); submittedTransactions.map(tx => { if (pendingTxids.includes(safelyFormatHexTxid(tx.txId))) diff --git a/src/app/query/stacks/microblock/microblock.query.ts b/src/app/query/stacks/microblock/microblock.query.ts deleted file mode 100644 index 2bb952527d7..00000000000 --- a/src/app/query/stacks/microblock/microblock.query.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TokenTransferTransaction } from '@stacks/stacks-blockchain-api-types'; -import { useQuery } from '@tanstack/react-query'; - -import { createMoney } from '@shared/models/money.model'; - -import { sumNumbers } from '@app/common/math/helpers'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; - -export function useCurrentAccountMicroblockBalanceQuery(address: string) { - const client = useStacksClientUnanchored(); - - async function accountMicroblockFetcher() { - const txs = await client.microblocksApi.getUnanchoredTxs({}); - return txs.results as TokenTransferTransaction[]; - } - return useQuery({ - enabled: !!address, - queryKey: ['account-microblock', address], - queryFn: accountMicroblockFetcher, - select: resp => { - const senderMicroblockTxs = resp.filter(tx => tx.sender_address === address); - return createMoney( - sumNumbers(senderMicroblockTxs.map(tx => Number(tx.token_transfer.amount))), - 'STX' - ); - }, - refetchOnWindowFocus: false, - }); -} diff --git a/src/app/query/stacks/nonce/account-nonces.query.ts b/src/app/query/stacks/nonce/account-nonces.query.ts index e4d29d913c2..e3059a52b39 100644 --- a/src/app/query/stacks/nonce/account-nonces.query.ts +++ b/src/app/query/stacks/nonce/account-nonces.query.ts @@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'; import { AppUseQueryConfig } from '@app/query/query-config'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { RateLimiter, useHiroApiRateLimiter } from '../rate-limiter'; @@ -31,7 +31,7 @@ export function useGetAccountNoncesQuery { - const url = new URL(context.url); - if (!url.toString().includes('/v2')) url.searchParams.set('unanchored', 'true'); - return Promise.resolve({ - init: context.init, - url: url.toString(), - }); - }, -}; - -export function createStacksUnanchoredConfig(basePath: string) { - const middleware: Middleware[] = []; - if (MICROBLOCKS_ENABLED) middleware.push(unanchoredStacksMiddleware); - return new Configuration({ - basePath, - fetchApi, - middleware, - }); -} - -export function createStacksAnchoredConfig(basePath: string) { +export function createStacksClientConfig(basePath: string) { return new Configuration({ basePath, fetchApi, diff --git a/src/app/store/common/api-clients.hooks.ts b/src/app/store/common/api-clients.hooks.ts index 90482ad8885..383095baea8 100644 --- a/src/app/store/common/api-clients.hooks.ts +++ b/src/app/store/common/api-clients.hooks.ts @@ -8,11 +8,7 @@ import { whenStacksChainId } from '@app/common/utils'; import { BitcoinClient } from '@app/query/bitcoin/bitcoin-client'; import { StacksClient } from '@app/query/stacks/stacks-client'; import { TokenMetadataClient } from '@app/query/stacks/token-metadata-client'; -import { - createStacksAnchoredConfig, - createStacksUnanchoredConfig, - createTokenMetadataConfig, -} from '@app/query/stacks/utils'; +import { createStacksClientConfig, createTokenMetadataConfig } from '@app/query/stacks/utils'; import { useCurrentNetworkState } from '../networks/networks.hooks'; @@ -21,22 +17,11 @@ export function useBitcoinClient() { return new BitcoinClient(network.chain.bitcoin.bitcoinUrl); } -// Unanchored by default (microblocks) -export function useStacksClientUnanchored() { +export function useStacksClient() { const network = useCurrentNetworkState(); return useMemo(() => { - const config = createStacksUnanchoredConfig(network.chain.stacks.url); - return new StacksClient(config); - }, [network.chain.stacks.url]); -} - -// Anchored (NON-microblocks) -export function useStacksClientAnchored() { - const network = useCurrentNetworkState(); - - return useMemo(() => { - const config = createStacksAnchoredConfig(network.chain.stacks.url); + const config = createStacksClientConfig(network.chain.stacks.url); return new StacksClient(config); }, [network.chain.stacks.url]); } diff --git a/src/app/store/transactions/raw.hooks.ts b/src/app/store/transactions/raw.hooks.ts index 30e099e304f..eaa5efa80d6 100644 --- a/src/app/store/transactions/raw.hooks.ts +++ b/src/app/store/transactions/raw.hooks.ts @@ -4,7 +4,7 @@ import { useAsync } from 'react-async-hook'; import { deserializeTransaction } from '@stacks/transactions'; import { useAtom } from 'jotai'; -import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks'; +import { useStacksClient } from '@app/store/common/api-clients.hooks'; import { rawTxIdState } from '@app/store/transactions/raw'; export function useRawTxIdState() { @@ -15,7 +15,7 @@ const rawTxCache = new Map(); function useRawTxState() { const [txId] = useRawTxIdState(); - const { transactionsApi } = useStacksClientUnanchored(); + const { transactionsApi } = useStacksClient(); return useAsync(async () => { if (!txId) return; diff --git a/src/shared/constants.ts b/src/shared/constants.ts index 696df810ed6..f3138a0868c 100644 --- a/src/shared/constants.ts +++ b/src/shared/constants.ts @@ -1,6 +1,5 @@ import { ChainID } from '@stacks/transactions'; -import { IS_TEST_ENV } from './environment'; import { Blockchains } from './models/blockchain.model'; export const gaiaUrl = 'https://hub.blockstack.org'; @@ -24,8 +23,6 @@ export const BTC_P2WPKH_DUST_AMOUNT = 294; export const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g; -export const MICROBLOCKS_ENABLED = !IS_TEST_ENV && true; - export const GITHUB_ORG = 'leather-wallet'; export const GITHUB_REPO = 'extension'; diff --git a/src/shared/models/crypto-asset-balance.model.ts b/src/shared/models/crypto-asset-balance.model.ts index ffcc63065b3..e4274cbeb7c 100644 --- a/src/shared/models/crypto-asset-balance.model.ts +++ b/src/shared/models/crypto-asset-balance.model.ts @@ -29,6 +29,7 @@ export interface StacksFungibleTokenAssetBalance { readonly balance: Money; } +// ts-unused-exports:disable-next-line export interface StacksNonFungibleTokenAssetBalance { readonly blockchain: 'stacks'; readonly type: 'non-fungible-token'; diff --git a/src/shared/models/transactions/stacks-transaction.model.ts b/src/shared/models/transactions/stacks-transaction.model.ts index fcc82ac9402..e9f19cabc82 100644 --- a/src/shared/models/transactions/stacks-transaction.model.ts +++ b/src/shared/models/transactions/stacks-transaction.model.ts @@ -1,7 +1,7 @@ import type { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-types'; export type StacksTx = MempoolTransaction | Transaction; -export type StacksTxStatus = 'failed' | 'pending' | 'success_anchor_block' | 'success_microblock'; +export type StacksTxStatus = 'failed' | 'pending' | 'success'; export interface StxTransfer { amount: string; From 666fa37da8ea622c4e2651b54cfca5d487e76f05 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Wed, 31 Jan 2024 12:33:41 -0600 Subject: [PATCH 2/2] fix: disabled button styles, closes #4840 --- .../ui/components/button/button.stories.tsx | 12 ++++ src/app/ui/components/link/link.stories.tsx | 12 ++++ src/app/ui/components/link/link.tsx | 4 +- theme/recipes/button-recipe.ts | 16 ++++- theme/recipes/link-recipe.ts | 60 ++++++++++++------- 5 files changed, 79 insertions(+), 25 deletions(-) diff --git a/src/app/ui/components/button/button.stories.tsx b/src/app/ui/components/button/button.stories.tsx index c0d2277c292..796d2a6a9a0 100644 --- a/src/app/ui/components/button/button.stories.tsx +++ b/src/app/ui/components/button/button.stories.tsx @@ -26,6 +26,18 @@ export const Button: Story = { }, }; +export const Disabled: Story = { + parameters: { + controls: { include: ['size', 'variant'] }, + }, + args: { + disabled: true, + children: 'Button', + size: 'md', + variant: 'solid', + }, +}; + // TODO: Remove invert code export const InvertSolid: Story = { parameters: { diff --git a/src/app/ui/components/link/link.stories.tsx b/src/app/ui/components/link/link.stories.tsx index b92fd85c7b8..8048b8a5091 100644 --- a/src/app/ui/components/link/link.stories.tsx +++ b/src/app/ui/components/link/link.stories.tsx @@ -22,6 +22,18 @@ export const Link: Story = { }, }; +export const Disabled: Story = { + parameters: { + controls: { include: ['size', 'variant'] }, + }, + args: { + children: 'Link', + disabled: true, + size: 'md', + variant: 'underlined', + }, +}; + // TODO: Remove invert code export const InvertLink: Story = { parameters: { diff --git a/src/app/ui/components/link/link.tsx b/src/app/ui/components/link/link.tsx index ff714540708..6890f139d90 100644 --- a/src/app/ui/components/link/link.tsx +++ b/src/app/ui/components/link/link.tsx @@ -9,12 +9,12 @@ type LinkProps = Omit, keyof LinkVariant LinkVariantProps; export const Link = forwardRef((props: LinkProps, ref: ForwardedRef) => { - const { children, fullWidth, invert, size, variant, ...rest } = props; + const { children, disabled, fullWidth, invert, size, variant, ...rest } = props; return ( diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts index 5e26e867360..36da0ac019b 100644 --- a/theme/recipes/button-recipe.ts +++ b/theme/recipes/button-recipe.ts @@ -30,9 +30,6 @@ export const buttonRecipe = defineRecipe({ className: 'button', jsx: ['Button'], base: { - _disabled: { - cursor: 'not-allowed', - }, position: 'relative', rounded: 'xs', textStyle: 'label.02', @@ -54,8 +51,10 @@ export const buttonRecipe = defineRecipe({ bg: 'accent.action-primary-default', }, _disabled: { + _hover: { bg: 'accent.background-secondary' }, bg: 'accent.background-secondary', color: 'accent.non-interactive', + cursor: 'not-allowed', }, _focus: { _before: { @@ -74,6 +73,12 @@ export const buttonRecipe = defineRecipe({ _active: { bg: 'accent.component-background-pressed', }, + _disabled: { + _hover: { bg: 'unset' }, + border: '1px solid {colors.accent.non-interactive}', + color: 'accent.non-interactive', + cursor: 'not-allowed', + }, _focus: { _before: { border: '3px solid {colors.focus}', @@ -90,6 +95,11 @@ export const buttonRecipe = defineRecipe({ _active: { bg: 'accent.component-background-pressed', }, + _disabled: { + _hover: { bg: 'unset' }, + color: 'accent.non-interactive', + cursor: 'not-allowed', + }, _focus: { _before: { border: '3px solid {focus}', diff --git a/theme/recipes/link-recipe.ts b/theme/recipes/link-recipe.ts index 88ba089d678..f64aba9716a 100644 --- a/theme/recipes/link-recipe.ts +++ b/theme/recipes/link-recipe.ts @@ -6,11 +6,7 @@ export const linkRecipe = defineRecipe({ className: 'link', jsx: ['Link'], base: { - _disabled: { - cursor: 'not-allowed', - }, appearance: 'none', - color: 'accent.text-primary', display: 'inline', mb: 'space.01', p: 'unset', @@ -48,12 +44,6 @@ export const linkRecipe = defineRecipe({ }, color: 'accent.text-primary', }, - _disabled: { - _before: { - background: 'accent.non-interactive', - }, - color: 'accent.non-interactive', - }, _focus: { _before: { background: 'focus' }, color: 'accent.text-primary', @@ -64,6 +54,7 @@ export const linkRecipe = defineRecipe({ background: 'accent.action-primary-hover', }, }, + color: 'accent.text-primary', }, text: { @@ -84,13 +75,6 @@ export const linkRecipe = defineRecipe({ color: 'accent.text-primary', visibility: 'visible', }, - _disabled: { - _before: { - background: 'accent.non-interactive', - visibility: 'visible', - }, - color: 'accent.non-interactive', - }, _focus: { _before: { background: 'focus', @@ -105,12 +89,13 @@ export const linkRecipe = defineRecipe({ visibility: 'visible', }, }, + color: 'accent.text-primary', }, }, // TODO: Remove invert code invert: { true: {} }, - + disabled: { true: {} }, fullWidth: { true: { width: '100%' } }, }, @@ -122,8 +107,6 @@ export const linkRecipe = defineRecipe({ // TODO: Remove invert code compoundVariants: [ { - variant: 'underlined', - invert: true, css: { _focus: { _before: { @@ -140,6 +123,43 @@ export const linkRecipe = defineRecipe({ }, color: 'accent.background-secondary', }, + invert: true, + variant: 'underlined', + }, + { + css: { + _before: { + content: '""', + background: 'accent.non-interactive', + bottom: '-2px', + height: '2px', + left: 0, + position: 'absolute', + right: 0, + }, + color: 'accent.non-interactive', + cursor: 'not-allowed', + }, + disabled: true, + variant: 'underlined', + }, + { + css: { + _before: { + content: '""', + background: 'accent.non-interactive', + bottom: '-2px', + height: '2px', + left: 0, + position: 'absolute', + right: 0, + visibility: 'visible', + }, + color: 'accent.non-interactive', + cursor: 'not-allowed', + }, + disabled: true, + variant: 'text', }, ], });