feat: Cancel Transaction: AffectedTransactions

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>
+    );
+};

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransactionFailed.tsx

@@ -0,0 +1,21 @@
+import { Card, Column, Text } from '@trezor/components';
+import { HELP_CENTER_CANCEL_TRANSACTION } from '@trezor/urls';
+import { spacings } from '@trezor/theme';
+
+import { Translation } from '../../../../../Translation';
+import { TrezorLink } from '../../../../../TrezorLink';
+
+export const CancelTransactionFailed = () => (
+    <Card fillType="none">
+        <Column gap={spacings.xs}>
+            <Text typographyStyle="titleSmall">
+                <Translation id="TR_CANCEL_TX_FAILED" />
+            </Text>
+            <Translation id="TR_CANCEL_TX_FAILED_DESCRIPTION" />
+
+            <TrezorLink typographyStyle="hint" href={HELP_CENTER_CANCEL_TRANSACTION}>
+                <Translation id="TR_LEARN_MORE" />
+            </TrezorLink>
+        </Column>
+    </Card>
+);

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransactionModal.tsx

@@ -5,15 +5,21 @@ import {
     SelectedAccountLoaded,
     WalletAccountTransactionWithRequiredRbfParams,
 } from '@suite-common/wallet-types';
-import { composeCancelTransactionThunk } from '@suite-common/wallet-core';
+import {
+    composeCancelTransactionThunk,
+    selectTransactionConfirmations,
+} from '@suite-common/wallet-core';
 import { PrecomposeResultFinal } from '@trezor/connect';
 
 import { TxDetailModalBase } from '../TxDetailModalBase';
 import { Translation } from '../../../../../Translation';
 import { CancelTransaction } from './CancelTransaction';
 import { CancelTransactionButton } from './CancelTransactionButton';
 import { CancelTxContext } from '../../../../../../../hooks/wallet/useCancelTxContext';
-import { useDispatch } from '../../../../../../../hooks/suite';
+import { useDispatch, useSelector } from '../../../../../../../hooks/suite';
+import { CancelTransactionFailed } from './CancelTransactionFailed';
+import { Column } from '../../../../../../../views/wallet/staking/components/CardanoPrimitives';
+import { AffectedTransactions } from '../AffectedTransactions/AffectedTransactions';
 
 type CancelTransactionModalProps = {
     tx: WalletAccountTransactionWithRequiredRbfParams;
@@ -35,9 +41,14 @@ export const CancelTransactionModal = ({
     const { account } = selectedAccount;
 
     const dispatch = useDispatch();
-
     const [composedCancelTx, setComposedCancelTx] = useState<PrecomposeResultFinal | null>(null);
 
+    const confirmations = useSelector(state =>
+        selectTransactionConfirmations(state, tx.txid, account.key),
+    );
+
+    const isTxConfirmed = confirmations > 0;
+
     useEffect(() => {
         if (tx.vsize === undefined) {
             return;
@@ -66,10 +77,19 @@ export const CancelTransactionModal = ({
                 tx={tx}
                 onCancel={onCancel}
                 heading={<Translation id="TR_TRANSACTION_DETAILS" />}
-                bottomContent={<CancelTransactionButton account={selectedAccount.account} />}
+                bottomContent={
+                    !isTxConfirmed && <CancelTransactionButton account={selectedAccount.account} />
+                }
                 onBackClick={onBackClick}
             >
-                <CancelTransaction tx={tx} selectedAccount={selectedAccount} />
+                {isTxConfirmed ? (
+                    <CancelTransactionFailed />
+                ) : (
+                    <Column>
+                        <CancelTransaction tx={tx} selectedAccount={selectedAccount} />
+                        <AffectedTransactions showChained={onShowChained} chainedTxs={chainedTxs} />
+                    </Column>
+                )}
             </TxDetailModalBase>
         </CancelTxContext.Provider>
     );

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;

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>

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>
     );

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/AdvancedTxDetails.tsx

@@ -6,7 +6,7 @@ import { WalletAccountTransaction, ChainedTransactions } from '@suite-common/wal
 import { AccountType, Network } from '@suite-common/wallet-config';
 import { spacings } from '@trezor/theme';
 
-import { Translation } from 'src/components/suite/index';
+import { Translation } from 'src/components/suite';
 
 import { AmountDetails } from './AmountDetails';
 import { IODetails } from './IODetails/IODetails';

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/AmountDetails.tsx

@@ -25,7 +25,7 @@ import {
     FormattedCryptoAmount,
     FiatValue,
     FormattedDate,
-} from 'src/components/suite/index';
+} from 'src/components/suite';
 import { AmountComponent } from 'src/components/wallet/AmountComponent';
 
 type AmountDetailsProps = {

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/Data.tsx

@@ -5,7 +5,7 @@ import { Paragraph, InfoItem, Column } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 import { TranslationKey } from '@suite-common/intl-types';
 
-import { Translation } from 'src/components/suite/index';
+import { Translation } from 'src/components/suite';
 
 const ParagraphWrapper = styled.div`
     white-space: pre-wrap;

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/IODetails/AnalyzeInExplorerBanner.tsx

@@ -3,7 +3,7 @@ import { NetworkSymbol } from '@suite-common/wallet-config';
 import { selectBlockchainExplorerBySymbol } from '@suite-common/wallet-core';
 
 import { useSelector } from 'src/hooks/suite';
-import { Translation } from 'src/components/suite/index';
+import { Translation } from 'src/components/suite';
 
 type AnalyzeInExplorerBannerProps = {
     txid: string;

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/Detail/AdvancedTxDetails/IODetails/IODetails.tsx

@@ -19,7 +19,7 @@ import {
 } from '@trezor/components';
 import { isNetworkSymbol, type NetworkSymbolExtended } from '@suite-common/wallet-config';
 
-import { FormattedCryptoAmount, FormattedNftAmount, Translation } from 'src/components/suite/index';
+import { FormattedCryptoAmount, FormattedNftAmount, Translation } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite/useSelector';
 import { UtxoAnonymity } from 'src/components/wallet';
 import { IOAddress } from 'src/components/suite/copy/IOAddress';

packages/suite/src/support/messages.ts

@@ -6400,6 +6400,15 @@ export default defineMessages({
         id: 'TR_CANCEL_TX_FEE',
         defaultMessage: 'Transaction fee',
     },
+    TR_CANCEL_TX_FAILED: {
+        id: 'TR_CANCEL_TX_FAILED',
+        defaultMessage: 'Cancel transaction failed',
+    },
+    TR_CANCEL_TX_FAILED_DESCRIPTION: {
+        id: 'TR_CANCEL_TX_FAILED_DESCRIPTION',
+        defaultMessage:
+            'The transaction couldn’t be canceled as it has just been confirmed on the Bitcoin network.',
+    },
     TR_REPLACE_TX: {
         id: 'TR_REPLACE_TX',
         defaultMessage: 'Replace transaction',

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';