diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx
index 3ad6494275a6..8ae7ec741202 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx
@@ -7,7 +7,7 @@ import { spacings } from '@trezor/theme';
import { Translation, FiatValue, FormattedCryptoAmount } from 'src/components/suite';
import { useSelector } from 'src/hooks/suite';
-import { useRbf, RbfContext, UseRbfProps } from 'src/hooks/wallet/useRbfForm';
+import { useRbfContext, UseRbfProps } from 'src/hooks/wallet/useRbfForm';
import { RbfFees } from './RbfFees';
import { AffectedTransactions } from './AffectedTransactions';
@@ -21,53 +21,53 @@ interface ChangeFeeProps extends UseRbfProps {
}
const ChangeFeeLoaded = (props: ChangeFeeProps) => {
- const contextValues = useRbf(props);
const { tx, showChained, children } = props;
- const { networkType } = contextValues.account;
+ const {
+ account: { networkType },
+ } = useRbfContext();
+
const feeRate =
networkType === 'bitcoin' ? `${tx.rbfParams?.feeRate} ${getFeeUnits(networkType)}` : null;
const fee = formatNetworkAmount(tx.fee, tx.symbol);
return (
-
-
-
-
- ({feeRate})
- >
- }
- typographyStyle="body"
- >
-
-
+
+
+ ({feeRate})
+ >
+ }
+ typographyStyle="body"
+ >
+
+
+
+
-
-
-
-
-
+
+
+
-
+
-
+
-
-
+
+
- {children}
-
-
+ {children}
+
);
};
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ReplaceTxButton.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ReplaceTxButton.tsx
index af74735de9a9..4e8017c376df 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ReplaceTxButton.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ReplaceTxButton.tsx
@@ -1,21 +1,14 @@
import { NewModal } from '@trezor/components';
-import { SelectedAccountLoaded, RbfTransactionParams } from '@suite-common/wallet-types';
import { Translation } from 'src/components/suite';
import { useDevice } from 'src/hooks/suite';
-import { useRbf } from 'src/hooks/wallet/useRbfForm';
-type ReplaceTxButtonProps = {
- rbfParams: RbfTransactionParams;
- selectedAccount: SelectedAccountLoaded;
-};
+import { useRbfContext } from '../../../../../../../hooks/wallet/useRbfForm';
-export const ReplaceTxButton = ({ rbfParams, selectedAccount }: ReplaceTxButtonProps) => {
+export const ReplaceTxButton = () => {
const { device, isLocked } = useDevice();
- const { isLoading, signTransaction, getValues, composedLevels } = useRbf({
- selectedAccount,
- rbfParams,
- });
+
+ const { isLoading, signTransaction, getValues, composedLevels } = useRbfContext();
const values = getValues();
const composedTx = composedLevels ? composedLevels[values.selectedFee || 'normal'] : undefined;
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModal.tsx
index 804ca1e2f7e9..4b9a09030082 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModal.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModal.tsx
@@ -8,7 +8,8 @@ import {
selectAllPendingTransactions,
selectIsPhishingTransaction,
} from '@suite-common/wallet-core';
-import { ChainedTransactions } from '@suite-common/wallet-types';
+import { ChainedTransactions, SelectedAccountLoaded } from '@suite-common/wallet-types';
+import { RequiredKey } from '@trezor/type-utils';
import { useSelector } from 'src/hooks/suite';
import { Translation } from 'src/components/suite';
@@ -18,6 +19,7 @@ import { AdvancedTxDetails, TabID } from './AdvancedTxDetails/AdvancedTxDetails'
import { ChangeFee } from './ChangeFee/ChangeFee';
import { ReplaceTxButton } from './ChangeFee/ReplaceTxButton';
import { TxDetailModalBase } from './TxDetailModalBase';
+import { RbfContext, useRbf } from '../../../../../../hooks/wallet/useRbfForm';
type DetailModalProps = {
tx: WalletAccountTransaction;
@@ -62,11 +64,12 @@ const DetailModal = ({ tx, onCancel, tab, onChangeFeeClick, chainedTxs }: Detail
};
type BumpFeeModalProps = {
- tx: WalletAccountTransaction;
+ tx: RequiredKey;
onCancel: () => void;
onBackClick: () => void;
onShowChained: () => void;
chainedTxs?: ChainedTransactions;
+ selectedAccount: SelectedAccountLoaded;
};
const BumpFeeModal = ({
@@ -75,30 +78,22 @@ const BumpFeeModal = ({
onBackClick,
onShowChained,
chainedTxs,
+ selectedAccount,
}: BumpFeeModalProps) => {
- const accountKey = getAccountKey(tx.descriptor, tx.symbol, tx.deviceState);
- const account = useSelector(state => selectAccountByKey(state, accountKey)) as Account;
- const network = getNetwork(account.symbol);
- const networkFeatures = network.accountTypes[account.accountType]?.features ?? network.features;
- const selectedAccount = useSelector(state => state.wallet.selectedAccount);
+ const contextValues = useRbf({ rbfParams: tx.rbfParams, chainedTxs, selectedAccount });
return (
- }
- bottomContent={
- networkFeatures?.includes('rbf') &&
- tx.rbfParams &&
- !tx.deadline &&
- selectedAccount.status === 'loaded' ? (
-
- ) : null
- }
- onBackClick={onBackClick}
- >
-
-
+
+ }
+ bottomContent={}
+ onBackClick={onBackClick}
+ >
+
+
+
);
};
@@ -114,6 +109,12 @@ export const TxDetailModal = ({ tx, rbfForm, onCancel }: TxDetailModalProps) =>
);
const [tab, setTab] = useState(undefined);
+ const accountKey = getAccountKey(tx.descriptor, tx.symbol, tx.deviceState);
+ const account = useSelector(state => selectAccountByKey(state, accountKey)) as Account;
+ const network = getNetwork(account.symbol);
+ const networkFeatures = network.accountTypes[account.accountType]?.features ?? network.features;
+ const selectedAccount = useSelector(state => state.wallet.selectedAccount);
+
const transactions = useSelector(selectAllPendingTransactions);
// const confirmations = getConfirmations(tx, blockchain.blockHeight);
// TODO: replace this part will be refactored after blockbook implementation:
@@ -139,7 +140,28 @@ export const TxDetailModal = ({ tx, rbfForm, onCancel }: TxDetailModalProps) =>
setTab(undefined);
};
- return section === 'DETAILS' ? (
+ const { rbfParams } = tx; // This is just for trick to enforce type-narrowing
+
+ if (
+ section === 'CHANGE_FEE' &&
+ networkFeatures?.includes('rbf') &&
+ rbfParams !== undefined &&
+ !tx.deadline &&
+ selectedAccount.status === 'loaded'
+ ) {
+ return (
+
+ );
+ }
+
+ return (
onChangeFeeClick={onChangeFeeClick}
chainedTxs={chainedTxs}
/>
- ) : (
-
);
};