fix(suite): handle missing transaction in TxDetailModal

Author: izmy

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

@@ -8,7 +8,9 @@ import {
 } from '@suite-common/wallet-core';
 import { WalletAccountTransactionWithRequiredRbfParams } from '@suite-common/wallet-types';
 import { findChainedTransactions, getAccountKey, isPending } from '@suite-common/wallet-utils';
+import { Modal } from '@trezor/components';
 
+import { Translation } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { Account, WalletAccountTransaction } from 'src/types/wallet';
 import { getInstantStakeType } from 'src/utils/suite/ethereumStaking';
@@ -45,26 +47,27 @@ export const TxDetailModal = ({
     const accountKey = getAccountKey(descriptor, symbol, deviceState);
     const originalTx = useSelector(state =>
         selectTransactionByAccountKeyAndTxid(state, accountKey, txid),
-    ) as WalletAccountTransaction;
+    );
 
     // Filter out internal transfers that are instant staking transactions
-    const filteredInternalTransfers = useMemo(
-        () =>
-            originalTx.internalTransfers.filter(t => {
-                const stakeType = getInstantStakeType(t, descriptor, symbol);
-
-                return stakeType !== 'stake';
-            }),
-        [originalTx.internalTransfers, descriptor, symbol],
-    );
+    const filteredInternalTransfers = useMemo(() => {
+        if (!originalTx) return [];
+
+        return originalTx.internalTransfers.filter(t => {
+            const stakeType = getInstantStakeType(t, descriptor, symbol);
+
+            return stakeType !== 'stake';
+        });
+    }, [originalTx, descriptor, symbol]);
+
+    const tx = useMemo(() => {
+        if (!originalTx) return null;
 
-    const tx = useMemo(
-        () => ({
+        return {
             ...originalTx,
             internalTransfers: filteredInternalTransfers,
-        }),
-        [originalTx, filteredInternalTransfers],
-    );
+        };
+    }, [originalTx, filteredInternalTransfers]);
 
     const account = useSelector(state => selectAccountByKey(state, accountKey)) as Account;
     const network = getNetwork(account.symbol);
@@ -76,6 +79,7 @@ export const TxDetailModal = ({
     // TODO: replace this part will be refactored after blockbook implementation:
     // https://github.com/trezor/blockbook/issues/555
     const chainedTxs = useMemo(() => {
+        if (!tx) return;
         if (!isPending(tx)) return;
 
         return findChainedTransactions(tx.descriptor, tx.txid, transactions);
@@ -101,6 +105,14 @@ export const TxDetailModal = ({
         setTab(undefined);
     };
 
+    if (tx === null) {
+        return (
+            <Modal onCancel={onCancel} heading={<Translation id="TR_TRANSACTION_DETAILS" />}>
+                <Translation id="TR_TRANSACTION_NOT_FOUND" />
+            </Modal>
+        );
+    }
+
     const canReplaceTransaction =
         hasRbfParams(tx) &&
         networkFeatures?.includes('rbf') &&

packages/suite/src/support/messages.ts

@@ -3351,6 +3351,10 @@ export default defineMessages({
         defaultMessage: 'Details',
         id: 'TR_TRANSACTION_DETAILS',
     },
+    TR_TRANSACTION_NOT_FOUND: {
+        defaultMessage: 'Transaction not found. Please try again later.',
+        id: 'TR_TRANSACTION_NOT_FOUND',
+    },
     TR_TOKEN_ID_COLON: {
         defaultMessage: 'Token ID:',
         id: 'TR_TOKEN_ID_COLON',