From bb554e568d56621c5c34475693393c3e565c2d6f Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 25 Apr 2025 16:03:10 +0000
Subject: [PATCH] [NEB-211] Nebula: Hide tx button after transaction is
 confirmed (#6859)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the UI and functionality of the `ExecuteTransactionCard` component in the dashboard app. It includes visual improvements and adjustments to transaction handling.

### Detailed summary
- Updated the border styling for child elements in the main `div`.
- Changed text styles for labels (`From`, `To`, `Value`, `Status`, and `Transaction Hash`) to use `font-medium`.
- Added a conditional rendering for the footer based on transaction status.
- Improved transaction tracking event labels.
- Refactored the transaction submission logic for clarity.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/ExecuteTransactionCard.tsx     | 147 +++++++++---------
 1 file changed, 76 insertions(+), 71 deletions(-)

diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
index b817948efb9..cc2830b20f5 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
@@ -95,10 +95,10 @@ export function ExecuteTransactionCardLayout(props: {
         </h3>
 
         {/* content */}
-        <div className="px-4 text-sm lg:px-6 [&>*]:h-12 [&>*]:border-b lg:[&>*]:h-14">
+        <div className="px-4 text-sm lg:px-6 [&>*:not(:last-child)]:border-b [&>*]:h-12 lg:[&>*]:h-14">
           {/* From */}
           <div className="flex items-center justify-between gap-2">
-            <span className="text-muted-foreground">From</span>
+            <span className="font-medium text-muted-foreground">From</span>
             {account ? (
               <WalletAddress
                 address={account.address}
@@ -113,7 +113,7 @@ export function ExecuteTransactionCardLayout(props: {
           {/* To */}
           {txData.to && (
             <div className="flex items-center justify-between gap-2">
-              <span className="text-muted-foreground">To</span>
+              <span className="font-medium text-muted-foreground">To</span>
 
               <WalletAddress
                 address={txData.to}
@@ -125,7 +125,7 @@ export function ExecuteTransactionCardLayout(props: {
 
           {/* Value */}
           <div className="flex items-center justify-between gap-2">
-            <span className="text-muted-foreground">Value</span>
+            <span className="font-medium text-muted-foreground">Value</span>
             {toEther(BigInt(txData.value))} {chain.nativeCurrency?.symbol}
           </div>
 
@@ -147,7 +147,7 @@ export function ExecuteTransactionCardLayout(props: {
           {/* Status */}
           {props.status.type !== "idle" && (
             <div className="flex items-center justify-between gap-2">
-              <span className="text-muted-foreground">Status</span>
+              <span className="font-medium text-muted-foreground">Status</span>
               <div className="flex items-center gap-1.5">
                 <span
                   className={cn(
@@ -193,7 +193,9 @@ export function ExecuteTransactionCardLayout(props: {
           {/* Transaction Hash */}
           {"txHash" in props.status && props.status.txHash && (
             <div className="flex items-center justify-between gap-1">
-              <span className="text-muted-foreground">Transaction Hash</span>
+              <span className="font-medium text-muted-foreground">
+                Transaction Hash
+              </span>
               <div className="flex justify-end gap-2.5">
                 {explorer ? (
                   <Button
@@ -226,83 +228,86 @@ export function ExecuteTransactionCardLayout(props: {
         </div>
 
         {/* footer */}
-        <div className="flex items-center justify-end px-4 py-6 lg:px-6">
-          <TransactionButton
-            isPending={sendTransaction.isPending}
-            transactionCount={undefined}
-            txChainID={txData.chainId}
-            variant="default"
-            disabled={isTransactionPending}
-            size="sm"
-            onClick={async () => {
-              trackEvent({
-                category: "nebula",
-                action: "execute_transaction",
-                label: "attempt",
-                chainId: txData.chainId,
-              });
-
-              const tx = prepareTransaction({
-                chain: chain,
-                client: props.client,
-                data: txData.data,
-                to: txData.to,
-                value: BigInt(txData.value),
-              });
-
-              let txHash: string | undefined;
-
-              try {
-                // submit transaction
-                props.setStatus({ type: "sending" });
-                const submittedReceipt = await sendTransaction.mutateAsync(tx);
-                txHash = submittedReceipt.transactionHash;
-
+        {props.status.type !== "confirmed" && (
+          <div className="flex items-center justify-end border-t px-4 py-6 lg:px-6">
+            <TransactionButton
+              isPending={sendTransaction.isPending}
+              transactionCount={undefined}
+              txChainID={txData.chainId}
+              variant="default"
+              disabled={isTransactionPending}
+              size="sm"
+              onClick={async () => {
                 trackEvent({
                   category: "nebula",
                   action: "execute_transaction",
-                  label: "sent",
+                  label: "attempt",
                   chainId: txData.chainId,
                 });
 
-                // wait for receipt
-                props.setStatus({
-                  type: "confirming",
-                  txHash: submittedReceipt.transactionHash,
+                const tx = prepareTransaction({
+                  chain: chain,
+                  client: props.client,
+                  data: txData.data,
+                  to: txData.to,
+                  value: BigInt(txData.value),
                 });
 
-                const confirmReceipt = await waitForReceipt(submittedReceipt);
-                txHash = confirmReceipt.transactionHash;
-                props.setStatus({
-                  type: "confirmed",
-                  txHash: confirmReceipt.transactionHash,
-                });
+                let txHash: string | undefined;
 
-                props.onTxSettled(txHash);
+                try {
+                  // submit transaction
+                  props.setStatus({ type: "sending" });
+                  const submittedReceipt =
+                    await sendTransaction.mutateAsync(tx);
+                  txHash = submittedReceipt.transactionHash;
+
+                  trackEvent({
+                    category: "nebula",
+                    action: "execute_transaction",
+                    label: "sent",
+                    chainId: txData.chainId,
+                  });
+
+                  // wait for receipt
+                  props.setStatus({
+                    type: "confirming",
+                    txHash: submittedReceipt.transactionHash,
+                  });
+
+                  const confirmReceipt = await waitForReceipt(submittedReceipt);
+                  txHash = confirmReceipt.transactionHash;
+                  props.setStatus({
+                    type: "confirmed",
+                    txHash: confirmReceipt.transactionHash,
+                  });
 
-                trackEvent({
-                  category: "nebula",
-                  action: "execute_transaction",
-                  label: "confirmed",
-                  chainId: txData.chainId,
-                });
-              } catch {
-                if (txHash) {
                   props.onTxSettled(txHash);
+
+                  trackEvent({
+                    category: "nebula",
+                    action: "execute_transaction",
+                    label: "confirmed",
+                    chainId: txData.chainId,
+                  });
+                } catch {
+                  if (txHash) {
+                    props.onTxSettled(txHash);
+                  }
+                  props.setStatus({
+                    type: "failed",
+                    txHash: txHash,
+                  });
                 }
-                props.setStatus({
-                  type: "failed",
-                  txHash: txHash,
-                });
-              }
-            }}
-            className="gap-2"
-            isLoggedIn={true}
-          >
-            <ArrowRightLeftIcon className="size-4" />
-            Execute Transaction
-          </TransactionButton>
-        </div>
+              }}
+              className="gap-2"
+              isLoggedIn={true}
+            >
+              <ArrowRightLeftIcon className="size-4" />
+              Execute Transaction
+            </TransactionButton>
+          </div>
+        )}
       </div>
     </div>
   );