From fff8c2ca11b458a6196096c6c5d9be70e8c96602 Mon Sep 17 00:00:00 2001
From: Adithya Vardhan <imadithyavardhan@gmail.com>
Date: Wed, 25 Sep 2024 16:04:34 +0530
Subject: [PATCH] chore: hide preimage in failed payment dialog (#705)

* chore: hide preimage in failed payment dialog

* chore: hide fee in failed payments
---
 frontend/src/components/TransactionItem.tsx | 34 +++++++++++----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/TransactionItem.tsx b/frontend/src/components/TransactionItem.tsx
index 3669e4ec..33f5fb3b 100644
--- a/frontend/src/components/TransactionItem.tsx
+++ b/frontend/src/components/TransactionItem.tsx
@@ -199,7 +199,7 @@ function TransactionItem({ tx }: Props) {
                   .format("D MMMM YYYY, HH:mm")}
               </p>
             </div>
-            {type == "outgoing" && (
+            {tx.state != "failed" && type == "outgoing" && (
               <div className="mt-6">
                 <p>Fee</p>
                 <p className="text-muted-foreground">
@@ -233,22 +233,24 @@ function TransactionItem({ tx }: Props) {
               {showDetails && (
                 <>
                   {tx.boostagram && <PodcastingInfo boost={tx.boostagram} />}
-                  <div className="mt-6">
-                    <p>Preimage</p>
-                    <div className="flex items-center gap-4">
-                      <p className="text-muted-foreground break-all">
-                        {tx.preimage}
-                      </p>
-                      <CopyIcon
-                        className="cursor-pointer text-muted-foreground w-6 h-6"
-                        onClick={() => {
-                          if (tx.preimage) {
-                            copy(tx.preimage);
-                          }
-                        }}
-                      />
+                  {tx.preimage && (
+                    <div className="mt-6">
+                      <p>Preimage</p>
+                      <div className="flex items-center gap-4">
+                        <p className="text-muted-foreground break-all">
+                          {tx.preimage}
+                        </p>
+                        <CopyIcon
+                          className="cursor-pointer text-muted-foreground w-6 h-6"
+                          onClick={() => {
+                            if (tx.preimage) {
+                              copy(tx.preimage);
+                            }
+                          }}
+                        />
+                      </div>
                     </div>
-                  </div>
+                  )}
                   <div className="mt-6">
                     <p>Hash</p>
                     <div className="flex items-center gap-4">