fix: use the useRbf hook only once, so state is initialized just once…

… and used at all places (via context)
trezor · Dec 18, 2024 · ceaaa79 · ceaaa79
1 parent 6501ae1
commit ceaaa79
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 78 deletions.
diff --git a/...components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx b/...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 (
-        <RbfContext.Provider value={contextValues}>
-            <Card fillType="none">
-                <InfoItem
-                    direction="row"
-                    label={
-                        <>
-                            <Translation id="TR_CURRENT_FEE" />
-                            &nbsp;({feeRate})
-                        </>
-                    }
-                    typographyStyle="body"
-                >
-                    <Row gap={spacings.md} alignItems="baseline">
-                        <FormattedCryptoAmount
+        <Card fillType="none">
+            <InfoItem
+                direction="row"
+                label={
+                    <>
+                        <Translation id="TR_CURRENT_FEE" />
+                        &nbsp;({feeRate})
+                    </>
+                }
+                typographyStyle="body"
+            >
+                <Row gap={spacings.md} alignItems="baseline">
+                    <FormattedCryptoAmount
+                        disableHiddenPlaceholder
+                        value={fee}
+                        symbol={tx.symbol}
+                    />
+                    <Text variant="tertiary" typographyStyle="label">
+                        <FiatValue
                             disableHiddenPlaceholder
-                            value={fee}
+                            amount={fee}
                             symbol={tx.symbol}
+                            showApproximationIndicator
                         />
-                        <Text variant="tertiary" typographyStyle="label">
-                            <FiatValue
-                                disableHiddenPlaceholder
-                                amount={fee}
-                                symbol={tx.symbol}
-                                showApproximationIndicator
-                            />
-                        </Text>
-                    </Row>
-                </InfoItem>
+                    </Text>
+                </Row>
+            </InfoItem>
 
-                <Divider />
+            <Divider />
 
-                <RbfFees />
+            <RbfFees />
 
-                <DecreasedOutputs />
-                <AffectedTransactions showChained={showChained} />
+            <DecreasedOutputs />
+            <AffectedTransactions showChained={showChained} />
 
-                {children}
-            </Card>
-        </RbfContext.Provider>
+            {children}
+        </Card>
     );
 };
 

diff --git a/...ents/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ReplaceTxButton.tsx b/...ents/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/...e/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModal.tsx b/...e/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<WalletAccountTransaction, 'rbfParams'>;
     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 (
-        <TxDetailModalBase
-            tx={tx}
-            onCancel={onCancel}
-            heading={<Translation id="TR_TRANSACTION_DETAILS" />}
-            bottomContent={
-                networkFeatures?.includes('rbf') &&
-                tx.rbfParams &&
-                !tx.deadline &&
-                selectedAccount.status === 'loaded' ? (
-                    <ReplaceTxButton rbfParams={tx.rbfParams} selectedAccount={selectedAccount} />
-                ) : null
-            }
-            onBackClick={onBackClick}
-        >
-            <ChangeFee tx={tx} chainedTxs={chainedTxs} showChained={onShowChained} />
-        </TxDetailModalBase>
+        <RbfContext.Provider value={contextValues}>
+            <TxDetailModalBase
+                tx={tx}
+                onCancel={onCancel}
+                heading={<Translation id="TR_TRANSACTION_DETAILS" />}
+                bottomContent={<ReplaceTxButton />}
+                onBackClick={onBackClick}
+            >
+                <ChangeFee tx={tx} chainedTxs={chainedTxs} showChained={onShowChained} />
+            </TxDetailModalBase>
+        </RbfContext.Provider>
     );
 };
 
@@ -114,6 +109,12 @@ export const TxDetailModal = ({ tx, rbfForm, onCancel }: TxDetailModalProps) =>
     );
     const [tab, setTab] = useState<TabID | undefined>(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,21 +140,34 @@ 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 (
+            <BumpFeeModal
+                tx={{ ...tx, rbfParams }} // This is just for trick to enforce type-narrowing
+                onCancel={onCancel}
+                onBackClick={onBackClick}
+                onShowChained={onShowChained}
+                chainedTxs={chainedTxs}
+                selectedAccount={selectedAccount}
+            />
+        );
+    }
+
+    return (
         <DetailModal
             tx={tx}
             onCancel={onCancel}
             tab={tab}
             onChangeFeeClick={onChangeFeeClick}
             chainedTxs={chainedTxs}
         />
-    ) : (
-        <BumpFeeModal
-            tx={tx}
-            onCancel={onCancel}
-            onBackClick={onBackClick}
-            onShowChained={onShowChained}
-            chainedTxs={chainedTxs}
-        />
     );
 };