From d820d7642fbbdc17083e206f2d77c048d979751f Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:21:04 +0000
Subject: [PATCH] chore: integrate choose fee dialog actions into footer
---
.../components/increase-btc-fee-form.tsx | 71 ---------
.../components/increase-fee-actions.tsx | 8 +-
.../components/increase-stx-fee-form.tsx | 98 ------------
.../increase-btc-fee-dialog.tsx | 97 +++++++++++-
.../increase-fee-dialog.tsx | 43 ------
.../increase-stx-fee-dialog.tsx | 139 ++++++++++++++++--
6 files changed, 218 insertions(+), 238 deletions(-)
delete mode 100644 src/app/features/dialogs/increase-fee-dialog/components/increase-btc-fee-form.tsx
delete mode 100644 src/app/features/dialogs/increase-fee-dialog/components/increase-stx-fee-form.tsx
delete mode 100644 src/app/features/dialogs/increase-fee-dialog/increase-fee-dialog.tsx
diff --git a/src/app/features/dialogs/increase-fee-dialog/components/increase-btc-fee-form.tsx b/src/app/features/dialogs/increase-fee-dialog/components/increase-btc-fee-form.tsx
deleted file mode 100644
index 83f8cca436e..00000000000
--- a/src/app/features/dialogs/increase-fee-dialog/components/increase-btc-fee-form.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-import { Formik } from 'formik';
-import { Stack } from 'leather-styles/jsx';
-
-import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
-import { RouteUrls } from '@shared/route-urls';
-
-import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
-import { formatMoney } from '@app/common/money/format-money';
-import { btcToSat } from '@app/common/money/unit-conversion';
-import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
-import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
-import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
-import { LoadingSpinner } from '@app/components/loading-spinner';
-import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { Caption } from '@app/ui/components/typography/caption';
-
-import { useBtcIncreaseFee } from '../hooks/use-btc-increase-fee';
-import { IncreaseFeeActions } from './increase-fee-actions';
-
-interface IncreaseBtcFeeFormProps {
- btcTx: BitcoinTx;
-}
-
-export function IncreaseBtcFeeForm({ btcTx }: IncreaseBtcFeeFormProps) {
- const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
- const navigate = useNavigate();
- const currentBitcoinAddress = nativeSegwitSigner.address;
- const { btcAvailableAssetBalance } = useBtcAssetBalance(currentBitcoinAddress);
- const { isBroadcasting, sizeInfo, onSubmit, validationSchema, recipient } =
- useBtcIncreaseFee(btcTx);
-
- const balance = formatMoney(btcAvailableAssetBalance.balance);
-
- if (isBroadcasting) {
- return
-
- {btcTx &&
-
-
-
- {btcAvailableAssetBalance && Balance: {balance} }
-
- navigate(RouteUrls.Home)} />
-
-
- );
-}
diff --git a/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx b/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
index 4d4a757f7fb..48695925710 100644
--- a/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
@@ -1,5 +1,4 @@
import { useFormikContext } from 'formik';
-import { Flex } from 'leather-styles/jsx';
import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
import { useWalletType } from '@app/common/use-wallet-type';
@@ -19,8 +18,8 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
const actionText = whenWallet({ ledger: 'Confirm on Ledger', software: 'Submit' });
return (
-
-
+ <>
+
Cancel
{actionText}
-
+
);
}
diff --git a/src/app/features/dialogs/increase-fee-dialog/components/increase-stx-fee-form.tsx b/src/app/features/dialogs/increase-fee-dialog/components/increase-stx-fee-form.tsx
deleted file mode 100644
index 71baa6d5f36..00000000000
--- a/src/app/features/dialogs/increase-fee-dialog/components/increase-stx-fee-form.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import BigNumber from 'bignumber.js';
-import { Formik } from 'formik';
-import { Stack } from 'leather-styles/jsx';
-import * as yup from 'yup';
-
-import { RouteUrls } from '@shared/route-urls';
-
-import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-all-account-data';
-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 { 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 { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
-import { useToast } from '@app/features/toasts/use-toast';
-import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
-import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
-import { useRawDeserializedTxState, useRawTxIdState } from '@app/store/transactions/raw.hooks';
-import { Caption } from '@app/ui/components/typography/caption';
-
-import { useSelectedTx } from '../hooks/use-selected-tx';
-import { IncreaseFeeActions } from './increase-fee-actions';
-import { IncreaseFeeField } from './increase-fee-field';
-
-export function IncreaseStxFeeForm() {
- const toast = useToast();
- const refreshAccountData = useRefreshAllAccountData();
- const tx = useSelectedTx();
- const navigate = useNavigate();
- const [, setTxId] = useRawTxIdState();
- const { data: balances } = useCurrentStacksAccountBalances();
- const { availableBalance } = useStxBalance();
- const submittedTransactionsActions = useSubmittedTransactionsActions();
- const rawTx = useRawDeserializedTxState();
- const { stacksBroadcastTransaction } = useStacksBroadcastTransaction('STX');
-
- const fee = Number(rawTx?.auth.spendingCondition?.fee);
-
- useEffect(() => {
- if (tx?.tx_status !== 'pending' && rawTx) {
- setTxId(null);
- toast.info('Your transaction went through! No need to speed it up.');
- }
- }, [rawTx, tx?.tx_status, setTxId, toast]);
-
- const onSubmit = useCallback(
- async (values: any) => {
- if (!tx || !rawTx) return;
- rawTx.setFee(stxToMicroStx(values.fee).toString());
- const txId = tx.tx_id || safelyFormatHexTxid(rawTx.txid());
- await refreshAccountData();
- submittedTransactionsActions.transactionReplacedByFee(txId);
- await stacksBroadcastTransaction(rawTx);
- },
- [tx, rawTx, refreshAccountData, submittedTransactionsActions, stacksBroadcastTransaction]
- );
-
- if (!tx || !fee) return
- {props => (
-
- {tx &&
-
- Balance: {stacksValue({ value: availableBalance.amount, fixedDecimals: true })}
-
- )}
-
- {
- setTxId(null);
- navigate(RouteUrls.Home);
- }}
- isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
- />
-
- )}
-
- );
-}
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
index ae67ffb5b9d..22b89a5c723 100644
--- a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -1,29 +1,110 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Suspense } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+import { Formik } from 'formik';
+import { Flex, Stack } from 'leather-styles/jsx';
import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
import { RouteUrls } from '@shared/route-urls';
+import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
import { useLocationStateWithCache } from '@app/common/hooks/use-location-state';
+import { formatMoney } from '@app/common/money/format-money';
+import { btcToSat } from '@app/common/money/unit-conversion';
+import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
+import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
+import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
+import { LoadingSpinner } from '@app/components/loading-spinner';
+import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
+import { Header } from '@app/ui/components/containers/headers/header';
+import { Spinner } from '@app/ui/components/spinner';
+import { Caption } from '@app/ui/components/typography/caption';
-import { IncreaseBtcFeeForm } from './components/increase-btc-fee-form';
-import { IncreaseFeeDialog } from './increase-fee-dialog';
+import { IncreaseFeeActions } from './components/increase-fee-actions';
+import { useBtcIncreaseFee } from './hooks/use-btc-increase-fee';
export function IncreaseBtcFeeDialog() {
const tx = useLocationStateWithCache('btcTx') as BitcoinTx;
const navigate = useNavigate();
const location = useLocation();
+ const btcTx = tx;
+ const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
+ const currentBitcoinAddress = nativeSegwitSigner.address;
+ const { btcAvailableAssetBalance } = useBtcAssetBalance(currentBitcoinAddress);
+ const { isBroadcasting, sizeInfo, onSubmit, validationSchema, recipient } =
+ useBtcIncreaseFee(btcTx);
+
+ const balance = formatMoney(btcAvailableAssetBalance.balance);
+
const onClose = () => {
navigate(RouteUrls.Home);
};
if (!tx) return null;
+ const initialFeeRate = `${(tx.fee / sizeInfo.txVBytes).toFixed(0)}`;
+
return (
-
+ <>
+
+ navigate(RouteUrls.Home)} />
+
+ }
+ >
+
+
+
+ If your transaction is pending for a long time, its fee might not be high enough
+ to be included in a block. Update the fee for a higher value and try again.
+
+
+ {btcTx &&
+
+
+
+ {btcAvailableAssetBalance && Balance: {balance} }
+
+
+
+
+
+
+
);
}
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-fee-dialog.tsx
deleted file mode 100644
index 5eb27ca492e..00000000000
--- a/src/app/features/dialogs/increase-fee-dialog/increase-fee-dialog.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Suspense } from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { Flex, Stack } from 'leather-styles/jsx';
-
-import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
-import { Spinner } from '@app/ui/components/spinner';
-import { Caption } from '@app/ui/components/typography/caption';
-
-interface IncreaseFeeDialogProps {
- feeForm: React.JSX.Element;
- onClose(): void;
- isShowing: boolean;
-}
-export function IncreaseFeeDialog({ feeForm, onClose, isShowing }: IncreaseFeeDialogProps) {
- return (
- <>
-
-
-
- If your transaction is pending for a long time, its fee might not be high enough to be
- included in a block. Update the fee for a higher value and try again.
-
- {feeForm && feeForm}
-
-
-
-
+ {props => (
+ <>
+
+ {
+ setTxId(null);
+ navigate(RouteUrls.Home);
+ }}
+ isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
+ />
+
+ }
+ >
+
+
+
+ If your transaction is pending for a long time, its fee might not be high enough
+ to be included in a block. Update the fee for a higher value and try again.
+
+
+ {tx &&
+
+ Balance:
+ {stacksValue({ value: availableBalance.amount, fixedDecimals: true })}
+
+ )}
+
+
+
+
+
+
+
);
}