From 095fe92cc2c581c2dc4929f2bb8fa800fbe82dcb Mon Sep 17 00:00:00 2001
From: QSchlegel <quirin.schlegel@icloud.com>
Date: Sat, 13 Jun 2026 13:01:01 +0200
Subject: [PATCH] fix(ux): lead transaction rows with the human label, demote
 the hash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The on-chain history rows (desktop table + mobile cards) led with the raw
truncated tx hash — the least human-meaningful field — while the actual
description ("Ballot Vote: …") was buried below. Flip the hierarchy to match
the pending-tx cards:
- primary: the dbTransaction description, or a "Sent"/"Received" fallback (and
  the cert label on desktop) so rows without a DB record aren't identified by
  a bare hash.
- date below.
- hash demoted to a quiet muted mono link with the external-link arrow.

Also standardize the hash truncation on getFirstAndLast(hash, 8, 8) (was two
different inline substring schemes) and drop the now-redundant standalone
description block on mobile. Cardanoscan links, outputs, certs, signers, and
the row actions menu are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../wallet/transactions/all-transactions.tsx  | 31 ++++++++++++-------
 .../responsive-transactions-table.tsx         | 29 +++++++++--------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/components/pages/wallet/transactions/all-transactions.tsx b/src/components/pages/wallet/transactions/all-transactions.tsx
index 20a4f2c9..724b2b63 100644
--- a/src/components/pages/wallet/transactions/all-transactions.tsx
+++ b/src/components/pages/wallet/transactions/all-transactions.tsx
@@ -293,23 +293,30 @@ function TransactionRow({
     <TableRow style={{ backgroundColor: "none" }} className="hover:bg-muted/50">
       <TableCell className="align-top py-4">
         <div className="flex flex-col gap-1.5 min-w-0">
+          {/* Lead with the human-meaningful label (fall back to direction so
+              on-chain-only rows are never identified by a bare hash). */}
+          <div className="text-sm font-medium text-foreground break-words line-clamp-2">
+            {dbTransaction?.description ??
+              certificatesInfo?.[0]?.label ??
+              (transaction.inputs.some(
+                (i) => i.address === appWallet.address,
+              )
+                ? "Sent"
+                : "Received")}
+          </div>
+          <span className="text-xs text-muted-foreground">
+            {dateToFormatted(new Date(transaction.tx.block_time * 1000))}
+          </span>
+          {/* Hash demoted to a quiet mono link. */}
           <LinkCardanoscan
             url={`transaction/${transaction.hash}`}
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors group"
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors group"
           >
-            <span className="font-mono text-xs truncate">
-              {transaction.hash.substring(0, 8)}...{transaction.hash.slice(-8)}
+            <span className="font-mono">
+              {getFirstAndLast(transaction.hash, 8, 8)}
             </span>
-            <ArrowUpRight className="h-3.5 w-3.5 flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity" />
+            <ArrowUpRight className="h-3 w-3 flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity" />
           </LinkCardanoscan>
-          <span className="text-xs text-muted-foreground">
-            {dateToFormatted(new Date(transaction.tx.block_time * 1000))}
-          </span>
-        {dbTransaction && (
-            <div className="text-sm font-medium break-words line-clamp-2">
-            {dbTransaction.description}
-          </div>
-        )}
         {certificatesInfo && certificatesInfo.length > 0 && (
           <div className="flex flex-wrap gap-1.5 mt-2">
             {certificatesInfo.map((certInfo: CertificateInfo, idx: number) => {
diff --git a/src/components/pages/wallet/transactions/responsive-transactions-table.tsx b/src/components/pages/wallet/transactions/responsive-transactions-table.tsx
index ef316c94..f0e61f48 100644
--- a/src/components/pages/wallet/transactions/responsive-transactions-table.tsx
+++ b/src/components/pages/wallet/transactions/responsive-transactions-table.tsx
@@ -220,29 +220,32 @@ function TransactionCard({
     <div className="rounded-lg border p-4 space-y-3 bg-card">
       <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
+          {/* Lead with the human label (fall back to direction). */}
+          <div className="text-sm font-medium text-foreground break-words">
+            {dbTransaction?.description ??
+              (transaction.inputs.some(
+                (i: { address: string }) => i.address === appWallet.address,
+              )
+                ? "Sent"
+                : "Received")}
+          </div>
+          <div className="text-xs text-muted-foreground mt-0.5">
+            {dateToFormatted(new Date(transaction.tx.block_time * 1000))}
+          </div>
+          {/* Hash demoted to a quiet mono link. */}
           <LinkCardanoscan
             url={`transaction/${transaction.hash}`}
-            className="inline-flex items-center gap-1 text-sm font-medium hover:underline break-all"
+            className="mt-1 inline-flex items-center gap-1 font-mono text-xs text-muted-foreground hover:text-foreground"
           >
-            <span className="break-all">
-              {transaction.hash.substring(0, 8)}...
-              {transaction.hash.slice(-8)}
-            </span>
+            <span>{getFirstAndLast(transaction.hash, 8, 8)}</span>
             <ArrowUpRight className="h-3 w-3 flex-shrink-0" />
           </LinkCardanoscan>
-          <div className="text-xs text-muted-foreground mt-1">
-            {dateToFormatted(new Date(transaction.tx.block_time * 1000))}
-          </div>
         </div>
         <div className="flex-shrink-0">
         <RowAction transaction={transaction} appWallet={appWallet} />
         </div>
       </div>
-      
-      {dbTransaction && (
-        <div className="text-sm break-words">{dbTransaction.description}</div>
-      )}
-      
+
       <div className="space-y-2">{outputList}</div>
 
       {certificatesList && certificatesList.length > 0 && (