From 24840bfe38cda3a45b1dc43b4e4f8c8890b3ebaf Mon Sep 17 00:00:00 2001
From: Luiz Gomes <8636507+LuizAsFight@users.noreply.github.com>
Date: Mon, 8 Jul 2024 19:48:11 +0200
Subject: [PATCH] fix: transactionHistory list (#1408)

- Closes #1406
---
 .changeset/tidy-oranges-dream.md                     |  5 +++++
 .../components/ActivityItem/ActivityItem.tsx         | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tidy-oranges-dream.md

diff --git a/.changeset/tidy-oranges-dream.md b/.changeset/tidy-oranges-dream.md
new file mode 100644
index 000000000..602282dd8
--- /dev/null
+++ b/.changeset/tidy-oranges-dream.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+TransactionList breaking when have a failed transaction
diff --git a/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.tsx b/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.tsx
index 4da931872..d6644cba9 100644
--- a/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.tsx
+++ b/packages/app/src/systems/Transaction/components/ActivityItem/ActivityItem.tsx
@@ -1,7 +1,7 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Card, Copyable, Icon, Text } from '@fuel-ui/react';
 import { Address, type TransactionSummary } from 'fuels';
-import type { FC } from 'react';
+import { type FC, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Pages, shortAddress } from '~/systems/Core';
 
@@ -34,6 +34,12 @@ export const ActivityItem: TxItemComponent = ({
     status,
   } = useTxMetadata({ ownerAddress, transaction });
 
+  const address = useMemo(() => {
+    if (!toOrFromAddress) return;
+
+    return Address.fromDynamicInput(toOrFromAddress);
+  }, [toOrFromAddress]);
+
   return (
     <Card
       css={styles.root}
@@ -56,9 +62,7 @@ export const ActivityItem: TxItemComponent = ({
         <Box.Flex css={styles.row}>
           <Box.Flex css={styles.fromToTextWrapper}>
             <Text css={styles.label}>{toOrFromText}</Text>
-            <Text>
-              {shortAddress(Address.fromDynamicInput(toOrFromAddress).toB256())}
-            </Text>
+            <Text>{!!address && shortAddress(address.toB256())}</Text>
           </Box.Flex>
           {timeFormatted && (
             <Box.Flex css={styles.item}>