From 47b03f6f4922893a0e3153e193996937f361a378 Mon Sep 17 00:00:00 2001 From: Edgar Khanzadian <edgar.khanzadian@gmail.com> Date: Fri, 2 Feb 2024 10:31:14 +0400 Subject: [PATCH] fix: user should be able to increase fee for stacks with ledger, closes #4503 --- .../components/increase-stx-fee-form.tsx | 27 ++--------- .../use-stacks-broadcast-transaction.tsx | 12 +---- .../hooks/use-stacks-transaction-summary.ts | 0 .../stacks/stacks-send-form-confirmation.tsx | 13 ++++-- src/app/store/transactions/fees.hooks.ts | 45 ------------------- 5 files changed, 15 insertions(+), 82 deletions(-) rename src/app/{pages/send/send-crypto-asset-form/family/stacks => features/stacks-transaction-request}/hooks/use-stacks-broadcast-transaction.tsx (88%) rename src/app/{pages/send/send-crypto-asset-form/family/stacks => features/stacks-transaction-request}/hooks/use-stacks-transaction-summary.ts (100%) delete mode 100644 src/app/store/transactions/fees.hooks.ts 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 a54b6467629..bd9a3ce5512 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 @@ -13,15 +13,13 @@ import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh- import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; import { microStxToStx, stxToMicroStx } from '@app/common/money/unit-conversion'; import { stacksValue } from '@app/common/stacks-utils'; -import { useWalletType } from '@app/common/use-wallet-type'; import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid'; 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 { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction'; 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'; import { Caption } from '@app/ui/components/typography/caption'; @@ -34,13 +32,11 @@ export function IncreaseStxFeeForm() { const tx = useSelectedTx(); const navigate = useNavigate(); const [, setTxId] = useRawTxIdState(); - const replaceByFee = useReplaceByFeeSoftwareWalletSubmitCallBack(); const { data: balances } = useCurrentStacksAccountBalances(); const { availableBalance } = useStxBalance(); const submittedTransactionsActions = useSubmittedTransactionsActions(); const rawTx = useRawDeserializedTxState(); - const { whenWallet } = useWalletType(); - const ledgerNavigate = useLedgerNavigate(); + const { stacksBroadcastTransaction } = useStacksBroadcastTransaction('STX'); const fee = Number(rawTx?.auth.spendingCondition?.fee); @@ -58,24 +54,9 @@ export function IncreaseStxFeeForm() { const txId = tx.tx_id || safelyFormatHexTxid(rawTx.txid()); await refreshAccountData(); submittedTransactionsActions.transactionReplacedByFee(txId); - await whenWallet({ - software: async () => { - await replaceByFee(rawTx); - }, - ledger: () => { - ledgerNavigate.toConnectAndSignStacksTransactionStep(rawTx); - }, - })(); + await stacksBroadcastTransaction(rawTx); }, - [ - tx, - rawTx, - refreshAccountData, - submittedTransactionsActions, - whenWallet, - replaceByFee, - ledgerNavigate, - ] + [tx, rawTx, refreshAccountData, submittedTransactionsActions, stacksBroadcastTransaction] ); if (!tx || !fee) return <LoadingSpinner />; diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-broadcast-transaction.tsx b/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx similarity index 88% rename from src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-broadcast-transaction.tsx rename to src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx index 028340d1932..b25518bf685 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-broadcast-transaction.tsx +++ b/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx @@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { useNavigate } from 'react-router-dom'; -import { StacksTransaction, deserializeTransaction } from '@stacks/transactions'; +import { StacksTransaction } from '@stacks/transactions'; import { logger } from '@shared/logger'; import { CryptoCurrencies } from '@shared/models/currencies.model'; @@ -15,11 +15,7 @@ import { useSignStacksTransaction } from '@app/store/transactions/transaction.ho import { useStacksTransactionSummary } from './use-stacks-transaction-summary'; -export function useStacksBroadcastTransaction( - unsignedTx: string, - token: CryptoCurrencies, - decimals?: number -) { +export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?: number) { const signStacksTransaction = useSignStacksTransaction(); const [isBroadcasting, setIsBroadcasting] = useState(false); const { formSentSummaryTxState } = useStacksTransactionSummary(token); @@ -76,10 +72,7 @@ export function useStacksBroadcastTransaction( } catch (e) {} } - const deserializedTransaction = deserializeTransaction(unsignedTx); - return { - stacksDeserializedTransaction: deserializedTransaction, stacksBroadcastTransaction: broadcastTransaction, isBroadcasting, }; @@ -87,7 +80,6 @@ export function useStacksBroadcastTransaction( broadcastTransactionFn, navigate, signStacksTransaction, - unsignedTx, isBroadcasting, token, formSentSummaryTxState, diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts b/src/app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary.ts similarity index 100% rename from src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-transaction-summary.ts rename to src/app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary.ts diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx index 87b99531a8b..8be0a7d5638 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx @@ -1,5 +1,6 @@ import { Outlet, useNavigate, useParams } from 'react-router-dom'; +import { deserializeTransaction } from '@stacks/transactions'; import { Box, Stack } from 'leather-styles/jsx'; import { CryptoCurrencies } from '@shared/models/currencies.model'; @@ -7,11 +8,11 @@ import { CryptoCurrencies } from '@shared/models/currencies.model'; import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { ModalHeader } from '@app/components/modal-header'; +import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction'; +import { useStacksTransactionSummary } from '@app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary'; import { InfoIcon } from '@app/ui/components/icons/info-icon'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; -import { useStacksBroadcastTransaction } from '../../family/stacks/hooks/use-stacks-broadcast-transaction'; -import { useStacksTransactionSummary } from '../../family/stacks/hooks/use-stacks-transaction-summary'; import { SendFormConfirmation } from '../send-form-confirmation'; function useStacksSendFormConfirmationState() { @@ -27,8 +28,12 @@ export function StacksSendFormConfirmation() { const { symbol = 'STX' } = useParams(); const navigate = useNavigate(); - const { stacksDeserializedTransaction, stacksBroadcastTransaction, isBroadcasting } = - useStacksBroadcastTransaction(tx, symbol.toUpperCase() as CryptoCurrencies, decimals); + const { stacksBroadcastTransaction, isBroadcasting } = useStacksBroadcastTransaction( + symbol.toUpperCase() as CryptoCurrencies, + decimals + ); + + const stacksDeserializedTransaction = deserializeTransaction(tx); const { formReviewTxSummary } = useStacksTransactionSummary( symbol.toUpperCase() as CryptoCurrencies diff --git a/src/app/store/transactions/fees.hooks.ts b/src/app/store/transactions/fees.hooks.ts deleted file mode 100644 index 23359844bca..00000000000 --- a/src/app/store/transactions/fees.hooks.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { useCallback } from 'react'; -import { useNavigate } from 'react-router-dom'; - -import { StacksTransaction } from '@stacks/transactions'; - -import { logger } from '@shared/logger'; -import { RouteUrls } from '@shared/route-urls'; - -import { LoadingKeys } from '@app/common/hooks/use-loading'; -import { useSubmitTransactionCallback } from '@app/common/hooks/use-submit-stx-transaction'; -import { useRawTxIdState } from '@app/store/transactions/raw.hooks'; - -import { useSignStacksTransaction } from './transaction.hooks'; - -export const useReplaceByFeeSoftwareWalletSubmitCallBack = () => { - const [, setTxId] = useRawTxIdState(); - const signTx = useSignStacksTransaction(); - const navigate = useNavigate(); - - const submitTransaction = useSubmitTransactionCallback({ - loadingKey: LoadingKeys.INCREASE_FEE_DRAWER, - }); - - return useCallback( - async (rawTx: StacksTransaction) => { - if (!rawTx) return; - const signedTx = await signTx(rawTx); - if (!signedTx) { - logger.warn('Error signing transaction when replacing by fee'); - return; - } - await submitTransaction({ - onSuccess() { - setTxId(null); - navigate(RouteUrls.IncreaseFeeSent); - }, - onError() { - logger.error('Error submitting transaction'); - }, - replaceByFee: true, - })(signedTx); - }, - [navigate, setTxId, signTx, submitTransaction] - ); -};