fix: display timed out ibc deposits as failed txs

Author: mateuszjasiuk

apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx

@@ -5,7 +5,10 @@ import { AssetImage } from "App/Transfer/AssetImage";
 import { isShieldedAddress, isTransparentAddress } from "App/Transfer/common";
 import clsx from "clsx";
 import { FaLock } from "react-icons/fa";
-import { IoCheckmarkCircleOutline } from "react-icons/io5";
+import {
+  IoCheckmarkCircleOutline,
+  IoCloseCircleOutline,
+} from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
 import { TransferTransactionData } from "types";
 import keplrSvg from "../../integrations/assets/keplr.svg";
@@ -31,6 +34,7 @@ export const LocalStorageTransactionCard = ({
   };
   const sender = transaction.sourceAddress;
   const receiver = transaction.destinationAddress;
+  const transactionFailed = transaction.status === "error";
   return (
     <article
       className={clsx(
@@ -40,13 +44,32 @@ export const LocalStorageTransactionCard = ({
       )}
     >
       <div className="flex items-center gap-3">
-        <i className={twMerge("text-2xl, text-success")}>
-          <IoCheckmarkCircleOutline className="ml-1 mt-0.5 w-10 h-10" />
+        <i
+          className={twMerge(
+            clsx("text-2xl", {
+              "text-success": !transactionFailed,
+              "text-fail": transactionFailed,
+            })
+          )}
+        >
+          {!transactionFailed && (
+            <IoCheckmarkCircleOutline className="ml-1 mt-0.5 w-10 h-10" />
+          )}
+          {transactionFailed && (
+            <IoCloseCircleOutline className="ml-1 mt-0.5 w-10 h-10" />
+          )}
         </i>
 
         <div className="flex flex-col">
-          <h3 className="text-success flex relative group/tooltip">
-            {getTitle(transaction)}{" "}
+          <h3
+            className={twMerge(
+              clsx("flex relative group/tooltip", {
+                "text-success": !transactionFailed,
+                "text-fail": transactionFailed,
+              })
+            )}
+          >
+            {transactionFailed && "Failed"} {getTitle(transaction)}{" "}
             <CopyToClipboardControl
               className="ml-1.5 text-neutral-400"
               value={transaction?.hash ?? ""}