refactor(frontend): a11y and small cleanups on wallet on-chain mode

- Add aria-label to the balance-mode toggle and aria-hidden on its
  icon so screen readers announce it as a mode switch.
- Drop the unnecessary :index suffix on the pending-closed-channels
  item key — (fundingTxId, fundingTxVout) is unique.
- Replace trailing mb-4 on each on-chain transaction row with
  space-y-4 on the list container so the last row has no dangling
  margin.
- Use named useState import in Wallet to match repo convention.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/channels/OnchainTransactionsTable.tsx

@@ -84,7 +84,7 @@ function OnchainTransactionRow({
   return (
     <button
       type="button"
-      className="transaction sensitive slashed-zero mb-4 w-full cursor-pointer rounded-md p-3 text-left hover:bg-muted/50"
+      className="transaction sensitive slashed-zero w-full cursor-pointer rounded-md p-3 text-left hover:bg-muted/50"
       onClick={() => {
         if (mempoolUrl) {
           openLink(`${mempoolUrl}/tx/${tx.txId}`);
@@ -199,7 +199,11 @@ export function OnchainTransactionsTable({
   ));
 
   if (!wrapInCard) {
-    return <div className={cn("flex flex-1 flex-col", className)}>{rows}</div>;
+    return (
+      <div className={cn("flex flex-1 flex-col space-y-4", className)}>
+        {rows}
+      </div>
+    );
   }
 
   return (
@@ -209,7 +213,9 @@ export function OnchainTransactionsTable({
           <CardTitle className="text-2xl">{title}</CardTitle>
         </CardHeader>
       )}
-      <CardContent className={contentClassName}>{rows}</CardContent>
+      <CardContent className={cn("space-y-4", contentClassName)}>
+        {rows}
+      </CardContent>
     </Card>
   );
 }

frontend/src/components/wallet/PendingClosedChannelsAlert.tsx

@@ -34,7 +34,7 @@ export function PendingClosedChannelsAlert({
         pending from closed channels with
         {pendingDetails.map((details, index) => (
           <PendingBalancesDetailsItem
-            key={`${details.fundingTxId}:${details.fundingTxVout}:${details.nodeId}:${index}`}
+            key={`${details.fundingTxId}:${details.fundingTxVout}`}
             details={details}
             showSeparator={index < pendingDetails.length - 1}
           />

frontend/src/screens/wallet/index.tsx

@@ -6,7 +6,7 @@ import {
   CalendarSyncIcon,
   CreditCardIcon,
 } from "lucide-react";
-import React from "react";
+import { useState } from "react";
 import { Link } from "react-router";
 import AppHeader from "src/components/AppHeader";
 import { OnchainTransactionsTable } from "src/components/channels/OnchainTransactionsTable";
@@ -36,7 +36,7 @@ function Wallet() {
   const { data: balances } = useBalances(true);
   const { data: channels } = useChannels();
   const [activeBalanceMode, setActiveBalanceMode] =
-    React.useState<BalanceMode>("lightning");
+    useState<BalanceMode>("lightning");
 
   const isOnchainMode = activeBalanceMode === "onchain";
   const hasChannelsOpen = !!channels?.length;
@@ -137,10 +137,11 @@ function Wallet() {
             <button
               type="button"
               onClick={toggleBalanceMode}
+              aria-label="Switch balance mode"
               className="inline-flex items-center justify-center gap-1 text-xs font-medium leading-none uppercase text-muted-foreground transition-colors hover:text-foreground"
             >
               {isOnchainMode ? "On-Chain Balance" : "Spending Balance"}
-              <ArrowDownUpIcon className="size-3 shrink-0" />
+              <ArrowDownUpIcon aria-hidden className="size-3 shrink-0" />
             </button>
           ) : (
             <span className="text-xs font-medium leading-none uppercase text-muted-foreground">