feat: UI facelift of the Affected transactions in the RBF flow

peter-sanderson · peter-sanderson · commit 868cea466822 · 2025-01-23T15:08:18.000+01:00
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactionItem.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactionItem.tsx
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactions.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AffectedTransactions/AffectedTransactions.tsx
@@ -0,0 +1,46 @@
+import { Banner, Button, Column } from '@trezor/components';
+import { spacings } from '@trezor/theme';
+import { ChainedTransactions } from '@suite-common/wallet-types';
+
+import { Translation } from 'src/components/suite';
+
+import { AffectedTransactionItem } from './AffectedTransactionItem';
+
+type AffectedTransactionsProps = {
+    chainedTxs?: ChainedTransactions;
+    showChained: () => void;
+};
+
+export const AffectedTransactions = ({ chainedTxs, showChained }: AffectedTransactionsProps) => {
+    if (chainedTxs === undefined) {
+        return null;
+    }
+
+    return (
+        <Column gap={spacings.md}>
+            <Banner
+                variant="warning"
+                rightContent={
+                    <Button
+                        variant="warning"
+                        onClick={showChained}
+                        icon="caretRight"
+                        iconAlignment="right"
+                    >
+                        <Translation id="TR_SEE_DETAILS" />
+                    </Button>
+                }
+            >
+                <Translation id="TR_AFFECTED_TXS" />
+            </Banner>
+            <Column alignItems="center">
+                {chainedTxs.own.map(tx => (
+                    <AffectedTransactionItem key={tx.txid} tx={tx} isAccountOwned />
+                ))}
+                {chainedTxs.others.map(tx => (
+                    <AffectedTransactionItem key={tx.txid} tx={tx} />
+                ))}
+            </Column>
+        </Column>
+    );
+};
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChainedTxs.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChainedTxs.tsx
@@ -7,7 +7,7 @@ import { AccountType, Network } from '@suite-common/wallet-config';
 import { TrezorLink, Translation } from 'src/components/suite';
 import { TransactionItem } from 'src/components/wallet/TransactionItem/TransactionItem';
 
-import { AffectedTransactionItem } from './ChangeFee/AffectedTransactionItem';
+import { AffectedTransactionItem } from './AffectedTransactions/AffectedTransactionItem';
 
 const Wrapper = styled.div`
     text-align: left;
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/AffectedTransactions.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/AffectedTransactions.tsx
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
@@ -10,7 +10,7 @@ import { useSelector } from 'src/hooks/suite';
 import { useRbfContext, UseRbfProps } from 'src/hooks/wallet/useRbfForm';
 
 import { RbfFees } from './RbfFees';
-import { AffectedTransactions } from './AffectedTransactions';
+import { AffectedTransactions } from '../AffectedTransactions/AffectedTransactions';
 import { DecreasedOutputs } from './DecreasedOutputs';
 
 /* children are only for test purposes, this prop is not available in regular build */
@@ -23,7 +23,9 @@ interface ChangeFeeProps extends UseRbfProps {
 const ChangeFeeLoaded = (props: ChangeFeeProps) => {
     const { tx, showChained, children } = props;
     const {
+
         account: { networkType },
+        chainedTxs,
     } = useRbfContext();
 
     const feeRate =
@@ -64,7 +66,8 @@ const ChangeFeeLoaded = (props: ChangeFeeProps) => {
             <RbfFees />
 
             <DecreasedOutputs />
-            <AffectedTransactions showChained={showChained} />
+
+            <AffectedTransactions chainedTxs={chainedTxs} showChained={showChained} />
 
             {children}
         </Card>
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/DecreasedOutputs.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/DecreasedOutputs.tsx
@@ -3,17 +3,14 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Icon, variables, Radio, motionAnimation } from '@trezor/components';
+import { Icon, variables, Radio, motionAnimation, Banner, Column } from '@trezor/components';
 import { formatNetworkAmount } from '@suite-common/wallet-utils';
 import { spacings } from '@trezor/theme';
 
 import { FormattedCryptoAmount, HiddenPlaceholder } from 'src/components/suite';
 import { Translation, TranslationKey } from 'src/components/suite/Translation';
 import { useRbfContext } from 'src/hooks/wallet/useRbfForm';
 
-import { GreyCard } from './GreyCard';
-import { WarnHeader } from './WarnHeader';
-
 const OutputsWrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -111,10 +108,10 @@ export const DecreasedOutputs = () => {
     return (
         <AnimatePresence initial>
             <motion.div {...motionAnimation.expand}>
-                <GreyCard>
-                    <WarnHeader data-testid="@send/decreased-outputs">
+                <Column>
+                    <Banner variant="warning" data-testid="@send/decreased-outputs">
                         <Translation id={decreaseWarning} />
-                    </WarnHeader>
+                    </Banner>
                     <OutputsWrapper>
                         {formValues.outputs.flatMap((o, i) => {
                             if (typeof o.address !== 'string') return null;
@@ -164,7 +161,7 @@ export const DecreasedOutputs = () => {
                             );
                         })}
                     </OutputsWrapper>
-                </GreyCard>
+                </Column>
             </motion.div>
         </AnimatePresence>
     );
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/GreyCard.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/GreyCard.tsx
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/WarnHeader.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/WarnHeader.tsx
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/AmountDetails.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/AmountDetails.tsx
@@ -20,7 +20,12 @@ import { Timestamp, TokenAddress } from '@suite-common/wallet-types';
 import { useSelector } from 'src/hooks/suite';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { WalletAccountTransaction } from 'src/types/wallet';
-import { Translation, FormattedCryptoAmount, FiatValue, FormattedDate } from 'src/components/suite';
+import {
+    Translation,
+    FormattedCryptoAmount,
+    FiatValue,
+    FormattedDate,
+} from 'src/components/suite';
 import { AmountComponent } from 'src/components/wallet/AmountComponent';
 
 type AmountDetailsProps = {
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModalBase.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/TxDetailModalBase.tsx
@@ -55,7 +55,7 @@ export const TxDetailModalBase = ({
             bottomContent={bottomContent}
             onBackClick={onBackClick}
         >
-            <Column gap={spacings.lg}>
+            <Column gap={spacings.md}>
                 <BasicTxDetails
                     explorerUrl={blockchain.explorer.tx}
                     explorerUrlQueryString={blockchain.explorer.queryString}
diff --git a/packages/suite/src/components/wallet/TransactionItem/TransactionItem.tsx b/packages/suite/src/components/wallet/TransactionItem/TransactionItem.tsx
@@ -62,7 +62,7 @@ const StyledFeeRow = styled(FeeRow)<{ $noInputsOutputs?: boolean }>`
 const DEFAULT_LIMIT = 3;
 
 type OpenModalParams = {
-    flow: 'detail' | 'bump-fee';
+    flow: 'detail' | 'bump-fee' | 'cancel-transaction';
 };
 
 interface TransactionItemProps {
@@ -155,6 +155,8 @@ export const TransactionItem = memo(
         const isExpandable = allOutputs.length - DEFAULT_LIMIT > 0;
         const toExpand = allOutputs.length - DEFAULT_LIMIT - limit;
 
+        const isTxCancellable = transaction.type !== 'self';
+
         const openTxDetailsModal = ({ flow }: OpenModalParams) => {
             if (isActionDisabled) return; // open explorer
             dispatch(
@@ -184,6 +186,17 @@ export const TransactionItem = memo(
             </Button>
         );
 
+        const CancelTransactionButton = ({ isDisabled }: { isDisabled: boolean }) => (
+            <Button
+                variant="tertiary"
+                icon="x"
+                onClick={() => openTxDetailsModal({ flow: 'cancel-transaction' })}
+                isDisabled={isDisabled}
+            >
+                <Translation id="TR_CANCEL_TX" />
+            </Button>
+        );
+
         const DisabledBumpFeeButtonWithTooltip = () => (
             <Tooltip
                 content={
@@ -477,12 +490,16 @@ export const TransactionItem = memo(
                                             flex="1"
                                             alignItems="flex-start"
                                             margin={{ bottom: spacings.xxs }}
+                                            gap={spacings.sm}
                                         >
                                             {disableBumpFee ? (
                                                 <DisabledBumpFeeButtonWithTooltip />
                                             ) : (
                                                 <BumpFeeButton isDisabled={false} />
                                             )}
+                                            {isTxCancellable && (
+                                                <CancelTransactionButton isDisabled={false} />
+                                            )}
                                         </Row>
                                     )}
                             </Content>
diff --git a/packages/urls/src/urls.ts b/packages/urls/src/urls.ts
@@ -115,6 +115,8 @@ export const HELP_CENTER_FIRMWARE_REVISION_CHECK: Url =
     'https://trezor.io/learn/a/trezor-firmware-revision-check';
 export const HELP_CENTER_REPLACE_BY_FEE: Url =
     'https://trezor.io/learn/a/replace-by-fee-rbf-ethereum';
+export const HELP_CENTER_CANCEL_TRANSACTION: Url =
+    'https://trezor.io/support/a/can-i-cancel-or-reverse-a-transaction';
 
 export const INVITY_URL: Url = 'https://invity.io/';
 export const INVITY_SCHEDULE_OF_FEES: Url = 'https://blog.invity.io/schedule-of-fees';
diff --git a/suite-common/suite-types/src/modal.ts b/suite-common/suite-types/src/modal.ts
@@ -51,7 +51,7 @@ export type UserContextPayload =
     | {
           type: 'transaction-detail';
           tx: WalletAccountTransaction;
-          flow: 'detail' | 'bump-fee';
+          flow: 'detail' | 'bump-fee' | 'cancel-transaction';
       }
     | {
           type: 'review-transaction';
diff --git a/suite-common/wallet-core/src/index.ts b/suite-common/wallet-core/src/index.ts
@@ -1,37 +1,38 @@
 export * from './accounts/accountsActions';
 export * from './accounts/accountsConstants';
+export * from './accounts/accountsMiddleware';
 export * from './accounts/accountsReducer';
 export * from './accounts/accountsThunks';
-export * from './accounts/accountsMiddleware';
-export * from './transactions/transactionsActions';
-export * from './transactions/transactionsReducer';
-export * from './transactions/transactionsThunks';
 export * from './blockchain/blockchainActions';
+export * from './blockchain/blockchainMiddleware';
 export * from './blockchain/blockchainReducer';
 export * from './blockchain/blockchainSelectors';
 export * from './blockchain/blockchainThunks';
-export * from './blockchain/blockchainMiddleware';
-export * from './fiat-rates/fiatRatesReducer';
-export * from './fiat-rates/fiatRatesSelectors';
-export * from './fiat-rates/fiatRatesThunks';
-export * from './fiat-rates/fiatRatesMiddleware';
-export * from './fiat-rates/fiatRatesTypes';
+export * from './device/deviceActions';
+export * from './device/deviceConstants';
+export * from './device/deviceReducer';
+export * from './device/deviceThunks';
 export * from './discovery/discoveryActions';
 export * from './discovery/discoveryReducer';
 export * from './discovery/discoveryThunks';
 export * from './fees/feesReducer';
+export * from './fiat-rates/fiatRatesMiddleware';
+export * from './fiat-rates/fiatRatesReducer';
+export * from './fiat-rates/fiatRatesSelectors';
+export * from './fiat-rates/fiatRatesThunks';
+export * from './fiat-rates/fiatRatesTypes';
+export * from './send/composeCancelTransactionThunk';
 export * from './send/sendFormActions';
 export * from './send/sendFormReducer';
 export * from './send/sendFormThunks';
 export * from './send/sendFormTypes';
-export * from './device/deviceActions';
-export * from './device/deviceThunks';
-export * from './device/deviceReducer';
-export * from './device/deviceConstants';
 export * from './stake/stakeActions';
+export * from './stake/stakeConstants';
+export * from './stake/stakeMiddleware';
 export * from './stake/stakeReducer';
 export * from './stake/stakeSelectors';
-export * from './stake/stakeMiddleware';
 export * from './stake/stakeThunks';
 export * from './stake/stakeTypes';
-export * from './stake/stakeConstants';
+export * from './transactions/transactionsActions';
+export * from './transactions/transactionsReducer';
+export * from './transactions/transactionsThunks';

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ export const TxDetailModalBase = ({`
`55`	`55`	`bottomContent={bottomContent}`
`56`	`56`	`onBackClick={onBackClick}`
`57`	`57`	`>`
`58`		`- <Column gap={spacings.lg}>`
	`58`	`+ <Column gap={spacings.md}>`
`59`	`59`	`<BasicTxDetails`
`60`	`60`	`explorerUrl={blockchain.explorer.tx}`
`61`	`61`	`explorerUrlQueryString={blockchain.explorer.queryString}`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ export type UserContextPayload =`
`51`	`51`	`\| {`
`52`	`52`	`type: 'transaction-detail';`
`53`	`53`	`tx: WalletAccountTransaction;`
`54`		`- flow: 'detail' \| 'bump-fee';`
	`54`	`+ flow: 'detail' \| 'bump-fee' \| 'cancel-transaction';`
`55`	`55`	`}`
`56`	`56`	`\| {`
`57`	`57`	`type: 'review-transaction';`