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} /> - ) : ( - ); };