feat: add error screen for RBF modal when TX is confirmed

trezor · Feb 10, 2025 · 7b3e916 · 7b3e916
1 parent 30fe719
commit 7b3e916
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/...ls/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransactionModal.tsx b/...ls/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransactionModal.tsx
@@ -11,7 +11,7 @@ import {
     SelectedAccountLoaded,
     WalletAccountTransactionWithRequiredRbfParams,
 } from '@suite-common/wallet-types';
-import { Banner, Button, Column } from '@trezor/components';
+import { Banner, Column, NewModal } from '@trezor/components';
 import { PrecomposeResultFinal } from '@trezor/connect';
 import { spacings } from '@trezor/theme';
 
@@ -81,9 +81,9 @@ export const CancelTransactionModal = ({
                 heading={<Translation id="TR_TRANSACTION_DETAILS" />}
                 bottomContent={
                     isTxConfirmed ? (
-                        <Button variant="tertiary" onClick={onCancel}>
+                        <NewModal.Button variant="tertiary" onClick={onCancel}>
                             <Translation id="TR_CLOSE_WINDOW" />
-                        </Button>
+                        </NewModal.Button>
                     ) : (
                         <>
                             <CancelTransactionButton account={selectedAccount.account} />

diff --git a/...ponents/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/BumpFeeModal.tsx b/...ponents/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/BumpFeeModal.tsx
@@ -1,13 +1,17 @@
+import { selectTransactionConfirmations } from '@suite-common/wallet-core';
 import {
     ChainedTransactions,
     SelectedAccountLoaded,
     WalletAccountTransactionWithRequiredRbfParams,
 } from '@suite-common/wallet-types';
+import { NewModal } from '@trezor/components';
 
 import { ChangeFee } from './ChangeFee';
 import { ReplaceTxButton } from './ReplaceTxButton';
+import { useSelector } from '../../../../../../../hooks/suite';
 import { RbfContext, useRbf } from '../../../../../../../hooks/wallet/useRbfForm';
 import { Translation } from '../../../../../Translation';
+import { ReplaceByFeeFailedOriginalTxConfirmed } from '../ReplaceByFeeFailedOriginalTxConfirmed';
 import { TxDetailModalBase } from '../TxDetailModalBase';
 
 type BumpFeeModalProps = {
@@ -27,18 +31,37 @@ export const BumpFeeModal = ({
     chainedTxs,
     selectedAccount,
 }: BumpFeeModalProps) => {
+    const { account } = selectedAccount;
     const contextValues = useRbf({ rbfParams: tx.rbfParams, chainedTxs, selectedAccount });
 
+    const confirmations = useSelector(state =>
+        selectTransactionConfirmations(state, tx.txid, account.key),
+    );
+
+    const isTxConfirmed = confirmations > 0;
+
     return (
         <RbfContext.Provider value={contextValues}>
             <TxDetailModalBase
                 tx={tx}
                 onCancel={onCancel}
                 heading={<Translation id="TR_TRANSACTION_DETAILS" />}
-                bottomContent={<ReplaceTxButton />}
+                bottomContent={
+                    isTxConfirmed ? (
+                        <NewModal.Button variant="tertiary" onClick={onCancel}>
+                            <Translation id="TR_CLOSE_WINDOW" />
+                        </NewModal.Button>
+                    ) : (
+                        <ReplaceTxButton />
+                    )
+                }
                 onBackClick={onBackClick}
             >
-                <ChangeFee tx={tx} chainedTxs={chainedTxs} showChained={onShowChained} />
+                {isTxConfirmed ? (
+                    <ReplaceByFeeFailedOriginalTxConfirmed type="replace-by-fee" />
+                ) : (
+                    <ChangeFee tx={tx} chainedTxs={chainedTxs} showChained={onShowChained} />
+                )}
             </TxDetailModalBase>
         </RbfContext.Provider>
     );