feat(suite): remove RBF option from the SendForm, make all Transactions with RBF enabled by default

Author: peter-sanderson

packages/suite-analytics/src/types/events.ts

@@ -188,7 +188,6 @@ export type SuiteAnalyticsEvent =
               tokens: string;
               outputsCount: number;
               broadcast: boolean;
-              bitcoinRbf: boolean;
               bitcoinLockTime: boolean;
               ethereumData: boolean;
               ethereumNonce: boolean;

packages/suite/src/actions/wallet/stakeActions.ts

@@ -151,7 +151,6 @@ export const signTransaction =
 
         const enhancedTxInfo: PrecomposedTransactionFinal = {
             ...transactionInfo,
-            rbf: false,
         };
 
         // store formValues and transactionInfo in send reducer to be used by TransactionReviewModal

packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx

@@ -141,7 +141,6 @@ export const TransactionReviewOutputList = ({
                     .join(','),
                 outputsCount: precomposedForm.outputs.length,
                 broadcast: broadcastEnabled,
-                bitcoinRbf: !!options.includes('bitcoinRBF'),
                 bitcoinLockTime: !!options.includes('bitcoinLockTime'),
                 ethereumData: !!options.includes('ethereumData'),
                 rippleDestinationTag: !!options.includes('rippleDestinationTag'),

packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx

@@ -2,7 +2,7 @@ import styled, { useTheme } from 'styled-components';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { getFeeUnits, formatNetworkAmount, formatAmount, getFee } from '@suite-common/wallet-utils';
 import { Icon, CoinLogo, variables } from '@trezor/components';
-import { formatDuration, isFeatureFlagEnabled } from '@suite-common/suite-utils';
+import { formatDuration } from '@suite-common/suite-utils';
 import { borders, spacingsPx, typography } from '@trezor/theme';
 import { TranslationKey } from '@suite-common/intl-types';
 import { Translation, FormattedCryptoAmount, AccountLabel } from 'src/components/suite';
@@ -164,7 +164,7 @@ const LeftDetailsBottom = styled.div`
     flex: 1;
 `;
 
-const ReviewRbfLeftDetailsLineLeft = styled.div`
+const ReviewLeftDetailsLineLeft = styled.div`
     display: flex;
     align-items: center;
     margin: 0 5% 0 0;
@@ -177,7 +177,7 @@ const ReviewRbfLeftDetailsLineLeft = styled.div`
     }
 `;
 
-const ReviewRbfLeftDetailsLineRight = styled.div<{ $color: string; $uppercase?: boolean }>`
+const ReviewLeftDetailsLineRight = styled.div<{ $color: string; $uppercase?: boolean }>`
     width: 45%;
     text-align: left;
     color: ${props => props.$color};
@@ -268,40 +268,40 @@ export const TransactionReviewSummary = ({
             <LeftDetails>
                 {estimateTime !== undefined && (
                     <LeftDetailsRow>
-                        <ReviewRbfLeftDetailsLineLeft>
+                        <ReviewLeftDetailsLineLeft>
                             <Icon size={12} color={theme.iconSubdued} icon="CALENDAR" />
                             <Translation id="TR_DELIVERY" />
-                        </ReviewRbfLeftDetailsLineLeft>
+                        </ReviewLeftDetailsLineLeft>
 
-                        <ReviewRbfLeftDetailsLineRight $color={theme.textSubdued}>
+                        <ReviewLeftDetailsLineRight $color={theme.textSubdued}>
                             {formatDuration(estimateTime)}
-                        </ReviewRbfLeftDetailsLineRight>
+                        </ReviewLeftDetailsLineRight>
                     </LeftDetailsRow>
                 )}
                 {!!tx.feeLimit && network.networkType !== 'solana' && (
                     <LeftDetailsRow>
-                        <ReviewRbfLeftDetailsLineLeft>
+                        <ReviewLeftDetailsLineLeft>
                             <Icon size={12} color={theme.iconSubdued} icon="GAS" />
                             <Translation id="TR_GAS_LIMIT" />
-                        </ReviewRbfLeftDetailsLineLeft>
+                        </ReviewLeftDetailsLineLeft>
 
-                        <ReviewRbfLeftDetailsLineRight $color={theme.textSubdued}>
+                        <ReviewLeftDetailsLineRight $color={theme.textSubdued}>
                             {tx.feeLimit}
-                        </ReviewRbfLeftDetailsLineRight>
+                        </ReviewLeftDetailsLineRight>
                     </LeftDetailsRow>
                 )}
                 <LeftDetailsRow>
-                    <ReviewRbfLeftDetailsLineLeft>
+                    <ReviewLeftDetailsLineLeft>
                         <Icon size={12} color={theme.iconSubdued} icon="GAS" />
                         {network.networkType === 'bitcoin' && <Translation id="TR_FEE_RATE" />}
                         {network.networkType === 'ethereum' && <Translation id="TR_GAS_PRICE" />}
                         {network.networkType === 'ripple' && <Translation id="TR_TX_FEE" />}
                         {network.networkType === 'solana' && <Translation id="TR_TX_FEE" />}
-                    </ReviewRbfLeftDetailsLineLeft>
+                    </ReviewLeftDetailsLineLeft>
 
-                    <ReviewRbfLeftDetailsLineRight $color={theme.textSubdued}>
+                    <ReviewLeftDetailsLineRight $color={theme.textSubdued}>
                         {fee} {getFeeUnits(network.networkType)}
-                    </ReviewRbfLeftDetailsLineRight>
+                    </ReviewLeftDetailsLineRight>
                 </LeftDetailsRow>
 
                 {isComposedFeeRateDifferent && network.networkType === 'bitcoin' && (
@@ -313,35 +313,18 @@ export const TransactionReviewSummary = ({
                 )}
 
                 <LeftDetailsRow>
-                    <ReviewRbfLeftDetailsLineLeft>
+                    <ReviewLeftDetailsLineLeft>
                         <Icon size={12} color={theme.iconSubdued} icon="BROADCAST" />
                         <Translation id="BROADCAST" />
-                    </ReviewRbfLeftDetailsLineLeft>
+                    </ReviewLeftDetailsLineLeft>
 
-                    <ReviewRbfLeftDetailsLineRight
+                    <ReviewLeftDetailsLineRight
                         $color={broadcast ? theme.textPrimaryDefault : theme.textAlertYellow}
                         $uppercase
                     >
                         <Translation id={broadcast ? 'TR_ON' : 'TR_OFF'} />
-                    </ReviewRbfLeftDetailsLineRight>
+                    </ReviewLeftDetailsLineRight>
                 </LeftDetailsRow>
-                {isFeatureFlagEnabled('RBF') &&
-                    network.features?.includes('rbf') &&
-                    network.networkType !== 'ethereum' && (
-                        <LeftDetailsRow>
-                            <ReviewRbfLeftDetailsLineLeft>
-                                <Icon size={12} color={theme.textSubdued} icon="RBF" />
-                                <Translation id="RBF" />
-                            </ReviewRbfLeftDetailsLineLeft>
-
-                            <ReviewRbfLeftDetailsLineRight
-                                $color={tx.rbf ? theme.textPrimaryDefault : theme.textAlertYellow}
-                                $uppercase
-                            >
-                                <Translation id={tx.rbf ? 'TR_ON' : 'TR_OFF'} />
-                            </ReviewRbfLeftDetailsLineRight>
-                        </LeftDetailsRow>
-                    )}
                 {tx.inputs.length !== 0 && (
                     <LeftDetailsBottom>
                         <Separator />

packages/suite/src/hooks/wallet/useCoinmarketExchangeOffers.ts

@@ -303,7 +303,7 @@ export const useOffers = ({ selectedAccount }: UseCoinmarketExchangeFormProps) =
                 undefined,
                 undefined,
                 undefined,
-                ['broadcast', 'bitcoinRBF'],
+                ['broadcast'],
             );
             // in case of not success, recomposeAndSign shows notification
             if (result?.success) {

packages/suite/src/hooks/wallet/useRbfForm.ts

@@ -166,7 +166,7 @@ const useRbfState = ({ selectedAccount, rbfParams, chainedTxs }: UseRbfProps) =>
                 outputs,
                 selectedFee: undefined,
                 setMaxOutputId,
-                options: ['bitcoinRBF', 'broadcast'],
+                options: ['broadcast'],
                 ethereumDataHex: rbfParams.ethereumData,
                 rbfParams,
                 baseFee,

packages/suite/src/hooks/wallet/useSendForm.ts

@@ -138,12 +138,12 @@ export const useSendForm = (props: UseSendFormProps): SendContextValues => {
             }
 
             return {
-                ...getDefaultValues(localCurrencyOption, state.network),
+                ...getDefaultValues(localCurrencyOption),
                 ...loadedState,
                 ...feeEnhancement,
             };
         },
-        [dispatch, localCurrencyOption, state.network],
+        [dispatch, localCurrencyOption],
     );
 
     // update custom values

packages/suite/src/hooks/wallet/useSendFormFields.ts

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 import { FieldPath, UseFormReturn } from 'react-hook-form';
 import { formatNetworkAmount, toFiatCurrency } from '@suite-common/wallet-utils';
 import { FormState, FormOptions } from '@suite-common/wallet-types';
-import { isFeatureFlagEnabled } from '@suite-common/suite-utils';
 import { useBitcoinAmountUnit } from './useBitcoinAmountUnit';
 import { Rate } from '@suite-common/wallet-types';
 import { SendContextValues, UseSendFormState } from 'src/types/wallet/sendForm';
@@ -113,13 +112,6 @@ export const useSendFormFields = ({
     };
 
     const toggleOption = (option: FormOptions) => {
-        if (
-            option === 'bitcoinRBF' &&
-            (!isFeatureFlagEnabled('RBF') || !network.features?.includes('rbf'))
-        ) {
-            // do not use RBF if disabled
-            return;
-        }
         const enabledOptions = getValues('options') || [];
         const isEnabled = enabledOptions.includes(option);
         if (isEnabled) {

packages/suite/src/views/wallet/send/components/Options/BitcoinOptions/BitcoinOptions.tsx

@@ -1,7 +1,6 @@
 import { useWatch } from 'react-hook-form';
 import styled from 'styled-components';
 
-import { isFeatureFlagEnabled } from '@suite-common/suite-utils';
 import { Button, Tooltip, variables } from '@trezor/components';
 import { spacingsPx } from '@trezor/theme';
 import { Translation } from 'src/components/suite';
@@ -55,7 +54,6 @@ const Inline = styled.span`
 
 export const BitcoinOptions = () => {
     const {
-        network,
         addOutput,
         control,
         utxoSelection: { isCoinControlEnabled },
@@ -74,7 +72,6 @@ export const BitcoinOptions = () => {
     });
 
     const locktimeEnabled = options.includes('bitcoinLockTime');
-    const rbfEnabled = options.includes('bitcoinRBF');
     const utxoSelectionEnabled = options.includes('utxoSelection');
     const broadcastEnabled = options.includes('broadcast');
 
@@ -115,33 +112,6 @@ export const BitcoinOptions = () => {
                             </StyledButton>
                         </Tooltip>
                     )}
-
-                    {isFeatureFlagEnabled('RBF') &&
-                        network.features?.includes('rbf') &&
-                        !locktimeEnabled && (
-                            <Tooltip
-                                addon={
-                                    <OpenGuideFromTooltip id="/3_send-and-receive/5_replace-by-fee-rbf.md" />
-                                }
-                                content={<Translation id="RBF_TOOLTIP" />}
-                                cursor="pointer"
-                            >
-                                <StyledButton
-                                    variant="tertiary"
-                                    size="small"
-                                    icon="RBF"
-                                    onClick={() => {
-                                        toggleOption('bitcoinRBF');
-                                        composeTransaction();
-                                    }}
-                                >
-                                    <Inline>
-                                        <Translation id="RBF" />
-                                        <OnOffSwitcher isOn={rbfEnabled} />
-                                    </Inline>
-                                </StyledButton>
-                            </Tooltip>
-                        )}
                     <Tooltip content={<Translation id="BROADCAST_TOOLTIP" />} cursor="pointer">
                         <StyledButton
                             variant="tertiary"
@@ -203,7 +173,6 @@ export const BitcoinOptions = () => {
                     close={() => {
                         resetDefaultValue('bitcoinLockTime');
                         // close additional form
-                        if (!rbfEnabled) toggleOption('bitcoinRBF');
                         if (!broadcastEnabled) toggleOption('broadcast');
                         toggleOption('bitcoinLockTime');
                         composeTransaction();

packages/suite/src/views/wallet/send/components/Options/BitcoinOptions/Locktime.tsx

@@ -2,49 +2,25 @@ import { BigNumber } from '@trezor/utils/src/bigNumber';
 import styled from 'styled-components';
 import { NumberInput, Translation } from 'src/components/suite';
 import { useSendFormContext } from 'src/hooks/wallet';
-import { Card, Icon, IconButton, Paragraph, Switch } from '@trezor/components';
+import { Card, Icon, IconButton } from '@trezor/components';
 import { getInputState, isInteger } from '@suite-common/wallet-utils';
-import { isFeatureFlagEnabled } from '@suite-common/suite-utils';
 import { useTranslation } from 'src/hooks/suite';
 import { spacingsPx } from '@trezor/theme';
 
-const RbfIcon = styled(Icon)`
-    padding-top: ${spacingsPx.xs};
-`;
-
 const Label = styled.div`
     display: flex;
     align-items: center;
     gap: ${spacingsPx.xs};
 `;
 
-const RbfMessage = styled.div`
-    display: flex;
-    flex: 1;
-    margin-top: ${spacingsPx.xs};
-    gap: ${spacingsPx.xs};
-`;
-
-const Center = styled.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`;
-
-const Description = styled(Paragraph)`
-    color: ${({ theme }) => theme.textSubdued};
-`;
-
 interface LocktimeProps {
     close: () => void;
 }
 
 export const Locktime = ({ close }: LocktimeProps) => {
     const {
-        network,
         control,
         getDefaultValue,
-        setValue,
         toggleOption,
         formState: { errors },
         composeTransaction,
@@ -53,15 +29,13 @@ export const Locktime = ({ close }: LocktimeProps) => {
     const { translationString } = useTranslation();
 
     const options = getDefaultValue('options', []);
-    const rbfEnabled = options.includes('bitcoinRBF');
     const broadcastEnabled = options.includes('broadcast');
     const inputName = 'bitcoinLockTime';
     const inputValue = getDefaultValue(inputName) || '';
     const error = errors[inputName];
 
     const handleLocktimeChange = () => {
         if (!error) {
-            if (rbfEnabled) toggleOption('bitcoinRBF');
             if (broadcastEnabled) toggleOption('broadcast');
         }
         composeTransaction(inputName);
@@ -85,15 +59,6 @@ export const Locktime = ({ close }: LocktimeProps) => {
         },
     };
 
-    const handleRbfSwitch = () => {
-        if (inputValue.length > 0) {
-            setValue(inputName, '');
-        }
-
-        toggleOption('bitcoinRBF');
-        composeTransaction(inputName);
-    };
-
     return (
         <Card>
             <NumberInput
@@ -115,24 +80,6 @@ export const Locktime = ({ close }: LocktimeProps) => {
                 bottomText={error?.message || null}
                 data-test="locktime-input"
             />
-
-            {isFeatureFlagEnabled('RBF') && network.features?.includes('rbf') && (
-                <RbfMessage>
-                    <RbfIcon size={16} icon="RBF" />
-
-                    <Center>
-                        <Paragraph typographyStyle="highlight">
-                            <Translation id={rbfEnabled ? 'RBF_ON' : 'RBF_OFF'} />
-                        </Paragraph>
-
-                        <Description typographyStyle="hint">
-                            <Translation id="RBF_DESCRIPTION" />
-                        </Description>
-                    </Center>
-
-                    <Switch isChecked={rbfEnabled} onChange={handleRbfSwitch} />
-                </RbfMessage>
-            )}
         </Card>
     );
 };

suite-common/suite-config/src/features.ts

@@ -6,7 +6,6 @@
 // General flags
 export const FLAGS = {
     GOOGLE_DRIVE_SYNC: true, // Google Drive sync (used for labeling)
-    RBF: true, // replace by fee feature in the send form
     FILE_SYSTEM_SYNC: false, // File system sync (used for labeling)
     ONION_LOCATION_META: true, // Show TOR onion-location meta tag in page head
     DESKTOP_AUTO_UPDATER: true, // Runs auto updater code on desktop

suite-common/wallet-constants/src/sendForm.ts

@@ -1,8 +1,15 @@
 export const CUSTOM_FEE = 'custom' as const;
 export const FIRST_OUTPUT_ID = 0;
+
+// A popular choice is to use 0xFFFFFFFD for your sequence fields,
+// as this enables both the locktime field (in case you want to use it)
+// and also replace-by-fee (which is generally useful).
+export const BTC_RBF_SEQUENCE = 0xffffffff - 2;
+
+// Locktime enabled, but RBF disabled
 export const BTC_LOCKTIME_SEQUENCE = 0xffffffff - 1;
+
 export const BTC_LOCKTIME_VALUE = 500000000; // if locktime is equal/greater than this then it's a timestamp
-export const BTC_RBF_SEQUENCE = 0xffffffff - 2;
 export const XRP_FLAG = 0x80000000;
 export const U_INT_32 = 0xffffffff;
 export const ETH_BACKUP_GAS_LIMIT = '21000';