Refactor panel styles and enhance transaction details UI

- Removed inline margin styles from panels in CollectionPage and NftPage for consistency.
- Added a new CentauriNodeGraph component to visualize node work and transactions on the Home page.
- Updated the Home page layout to include new links for Transactions and Accounts.
- Improved the transaction details panel by adding a copy button for transaction hashes and sender addresses.
- Enhanced the display of sender addresses in the transaction panel for better user experience.

Author: jamesatomc

crates/kanari-rpc-api/src/lib.rs

@@ -220,6 +220,8 @@ pub struct TransactionDetails {
     pub gas_used: Option<u64>,
     pub tx_type: String,
     pub sender: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub sender_address: Option<String>,
     pub sequence_number: u64,
     pub gas_limit: u64,
     pub gas_price: u64,

crates/kanari-rpc-server/src/transaction/mod.rs

@@ -159,6 +159,7 @@ fn base_transaction_details(
     block_height: Option<u64>,
     tx_type: &str,
     sender: String,
+    sender_address: String,
     sequence_number: u64,
     gas_limit: u64,
     gas_price: u64,
@@ -170,6 +171,7 @@ fn base_transaction_details(
         gas_used: None,
         tx_type: tx_type.to_string(),
         sender,
+        sender_address: Some(sender_address),
         sequence_number,
         gas_limit,
         gas_price,
@@ -192,6 +194,9 @@ fn map_transaction_to_details(
 ) -> TransactionDetails {
     let hash = format!("0x{}", tx_hash_hex);
     let status_str = status.to_string();
+    let sender_address = Address::parse_to_account_address(tx.sender_address())
+        .map(|addr| addr.to_hex_literal())
+        .unwrap_or_else(|_| tx.sender_address().to_string());
 
     match tx {
         Transaction::PublishModule {
@@ -218,6 +223,7 @@ fn map_transaction_to_details(
                 block_height,
                 "publish_module",
                 sender.clone(),
+                sender_address.clone(),
                 *sequence_number,
                 *gas_limit,
                 *gas_price,
@@ -241,6 +247,7 @@ fn map_transaction_to_details(
                 block_height,
                 tx.tx_type_label(),
                 sender.clone(),
+                sender_address.clone(),
                 *sequence_number,
                 *gas_limit,
                 *gas_price,

kanariexplorer/app/account/page.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from "next/navigation";
 import TransactionDetailsModal from "../components/TransactionDetailsModal";
 import {
   asArray,
+  CopyButton,
   EmptyState,
   formatBalance,
   PageHeader,
@@ -18,6 +19,18 @@ import { getAccount, getAllBalances, getAllTransactions, getOwnedNfts, getOwnedO
 
 type AccountTab = "coins" | "nfts" | "objects" | "activity";
 
+function readBytes(value: unknown, key: string) {
+  const record = typeof value === "object" && value !== null && !Array.isArray(value) ? (value as Record<string, unknown>) : {};
+  const item = record[key];
+  if (!Array.isArray(item)) return [];
+  return item.filter((entry): entry is number => typeof entry === "number" && Number.isFinite(entry));
+}
+
+function formatHex(bytes: number[]) {
+  if (bytes.length === 0) return "-";
+  return `0x${bytes.map((byte) => Math.max(0, Math.min(255, byte)).toString(16).padStart(2, "0")).join("")}`;
+}
+
 function AccountContent() {
   const searchParams = useSearchParams();
   const [address, setAddress] = useState(searchParams.get("address") ?? "");
@@ -91,11 +104,16 @@ function AccountContent() {
       </PageHeader>
 
       {account ? (
-        <section className="panel" style={{ marginTop: 18 }}>
+        <section className="panel account-state-panel">
           <div className="panel-head">
             <div>
               <h2 className="panel-title">Account State</h2>
-              <p className="panel-subtitle mono">{readString(account, "address", address)}</p>
+              <div className="panel-subtitle mono account-address-copy">
+                <span className="copy-row copy-row--wrap">
+                  <span className="break-anywhere">{readString(account, "address", address)}</span>
+                  <CopyButton value={readString(account, "address", address)} label="Copy account address" />
+                </span>
+              </div>
             </div>
             <StatusPill label={`Sequence ${readString(account, "sequence_number", "0")}`} />
           </div>
@@ -174,17 +192,20 @@ function AccountContent() {
                 <div className="data-row" key={`${hash}-${index}`}>
                   <div>
                     <p className="tiny-label">Txn Hash</p>
-                    <button className="hash-button mono" type="button" onClick={() => openTransaction(hash)}>
-                      {shortHash(hash)}
-                    </button>
+                    <span className="copy-row copy-row--wrap">
+                      <button className="hash-button mono break-anywhere" type="button" onClick={() => openTransaction(hash)}>
+                        {hash}
+                      </button>
+                      <CopyButton value={hash} label="Copy transaction hash" />
+                    </span>
                   </div>
                   <div>
                     <p className="tiny-label">Type</p>
                     <span className="tag">{readString(transaction, "tx_type", "operation")}</span>
                   </div>
                   <div>
                     <p className="tiny-label">Target</p>
-                    <span className="mono muted-text">{readString(transaction, "module", "-")}</span>
+                    <span className="mono muted-text">{shortHash(readString(transaction, "module", "-"))}</span>
                   </div>
                   <div>
                     <p className="tiny-label">Status</p>
@@ -206,24 +227,53 @@ function AccountContent() {
           <div className="data-list">
             {objects.map((object, index) => {
               const objectId = readString(object, "object_id", readString(object, "id", `object-${index}`));
+              const objectType = readString(object, "type_", readString(object, "type", readString(object, "object_type", "-")));
+              const owner = readString(object, "owner", address);
+              const dataBytes = readBytes(object, "data");
+              const objectJson =
+                object && typeof object === "object" && !Array.isArray(object)
+                  ? { ...(object as Record<string, unknown>), data_hex: formatHex(dataBytes) }
+                  : { value: object, data_hex: formatHex(dataBytes) };
               return (
-                <div className="data-row" key={`${objectId}-${index}`}>
-                  <div className="primary-text">
-                    <strong className="mono">{shortHash(objectId)}</strong>
-                    <div className="muted-text mono">{readString(object, "type", readString(object, "object_type", "object"))}</div>
-                  </div>
-                  <div>
-                    <p className="tiny-label">Owner</p>
-                    <span className="mono muted-text">{shortHash(readString(object, "owner", address))}</span>
+                <div className="data-row data-row--objects" key={`${objectId}-${index}`}>
+                  <div className="object-main primary-text">
+                    <p className="tiny-label">Object ID</p>
+                    <span className="copy-row copy-row--inline">
+                      <strong className="mono break-anywhere">{objectId}</strong>
+                      <CopyButton value={objectId} label="Copy object id" />
+                    </span>
                   </div>
-                  <div>
-                    <p className="tiny-label">Version</p>
-                    <span className="mono">{readString(object, "version", "-")}</span>
-                  </div>
-                  <div>
-                    <p className="tiny-label">Status</p>
-                    <StatusPill label={readString(object, "status", "owned")} />
+
+                  <div className="object-detail-grid">
+                    <div className="object-detail-field object-detail-field--wide">
+                      <p className="tiny-label">Type</p>
+                      <span className="mono muted-text break-anywhere">{objectType}</span>
+                    </div>
+                    <div className="object-detail-field object-detail-field--wide">
+                      <p className="tiny-label">Owner</p>
+                      <span className="copy-row copy-row--inline">
+                        <span className="mono muted-text break-anywhere">{owner}</span>
+                        <CopyButton value={owner} label="Copy owner address" />
+                      </span>
+                    </div>
+                    <div className="object-detail-field">
+                      <p className="tiny-label">Version</p>
+                      <span className="mono">{readString(object, "version", "-")}</span>
+                    </div>
+                    <div className="object-detail-field">
+                      <p className="tiny-label">Data Bytes</p>
+                      <span className="mono">{dataBytes.length.toLocaleString()}</span>
+                    </div>
+                    <div className="object-detail-field">
+                      <p className="tiny-label">Status</p>
+                      <StatusPill label={readString(object, "status", "owned")} />
+                    </div>
                   </div>
+
+                  <details className="object-json-details">
+                    <summary>Object JSON</summary>
+                    <pre className="custom-scrollbar">{JSON.stringify(objectJson, null, 2)}</pre>
+                  </details>
                 </div>
               );
             })}

kanariexplorer/app/coins/page.tsx

@@ -75,7 +75,7 @@ function CoinsContent() {
         <SearchForm value={address} onChange={setAddress} onSubmit={() => loadBalances(address)} placeholder="Filter by address" buttonLabel="View" />
       </PageHeader>
 
-      <section className="panel" style={{ marginTop: 18 }}>
+      <section className="panel">
         <div className="panel-head">
           <div>
             <h2 className="panel-title">{address ? "Address Balances" : "Token Registry"}</h2>

kanariexplorer/app/components/ExplorerUI.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import type { ReactNode } from "react";
+import type { MouseEvent, ReactNode } from "react";
 
 export type DataRecord = Record<string, unknown>;
 
@@ -22,6 +22,12 @@ export function readString(value: unknown, key: string, fallback = "-") {
   return fallback;
 }
 
+export function readAddress(value: unknown, primaryKey: string, fallbackKey?: string, fallback = "-") {
+  const primary = readString(value, primaryKey, "");
+  if (primary) return primary;
+  return fallbackKey ? readString(value, fallbackKey, fallback) : fallback;
+}
+
 export function readNumber(value: unknown, key: string) {
   const item = asRecord(value)[key];
   if (typeof item === "number") return item;
@@ -73,21 +79,19 @@ export function PageHeader({
   children?: ReactNode;
 }) {
   return (
-    <section className="page-head">
-      <div className="page-head__content">
-        <p className="eyebrow">{eyebrow}</p>
-        <h1 className="page-title">
-          {title}
-          {accent ? (
-            <>
-              <br />
-              <span>{accent}</span>
-            </>
-          ) : null}
-        </h1>
-        <p className="page-description">{description}</p>
-        {children ? <div className="toolbar">{children}</div> : null}
-      </div>
+    <section className="subpage-hero explorer-page-hero">
+      <p className="section-kicker">{eyebrow}</p>
+      <h1>
+        {title}
+        {accent ? (
+          <>
+            <br />
+            <span>{accent}</span>
+          </>
+        ) : null}
+      </h1>
+      <p className="subpage-hero__description">{description}</p>
+      {children ? <div className="hero-actions explorer-page-actions">{children}</div> : null}
     </section>
   );
 }
@@ -128,9 +132,9 @@ export function SearchForm({
 
 export function StatCard({ label, value, detail }: { label: string; value: string; detail: string }) {
   return (
-    <article className="panel stat-card">
-      <span className="stat-card__label">{label}</span>
-      <strong className="stat-card__value">{value}</strong>
+    <article className="stat-card">
+      <strong>{value}</strong>
+      <span>{label}</span>
       <p className="stat-card__detail">{detail}</p>
     </article>
   );
@@ -165,7 +169,7 @@ export function StatusPill({ label, state = "ok" }: { label: string; state?: "ok
   return (
     <span className="status-pill">
       <span className={`dot ${state === "warn" ? "dot--warn" : state === "down" ? "dot--down" : ""}`} />
-      {label}
+      <span className="status-pill__label">{label}</span>
     </span>
   );
 }
@@ -179,6 +183,28 @@ export function EmptyState({ loading, label }: { loading?: boolean; label: strin
   );
 }
 
+export function CopyButton({ value, label = "Copy" }: { value: string; label?: string }) {
+  async function copyValue(event: MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      // Clipboard permissions can be blocked in non-secure contexts.
+    }
+  }
+
+  return (
+    <button className="copy-button" type="button" onClick={copyValue} aria-label={label} title={label}>
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M8 8h10v12H8z" />
+        <path d="M6 16H4V4h12v2" />
+      </svg>
+    </button>
+  );
+}
+
 export function RawDetails({ label, value }: { label: string; value: unknown }) {
   return (
     <details className="raw-details">

kanariexplorer/app/components/TransactionDetailsModal.tsx

@@ -1,4 +1,4 @@
-import { EmptyState, RawDetails, readString, shortHash } from "./ExplorerUI";
+import { EmptyState, RawDetails, readAddress, readString, shortHash } from "./ExplorerUI";
 
 function readFirstString(value: unknown, keys: string[], fallback = "-") {
   for (const key of keys) {
@@ -41,6 +41,7 @@ export default function TransactionDetailsModal({
 
   const hash = readFirstString(transaction, ["hash", "tx_hash"]);
   const status = readFirstString(transaction, ["status"], "unknown");
+  const senderAddress = readAddress(transaction, "sender_address", "sender");
   const moduleFunctions = readOptionalArray(transaction, "module_functions");
 
   return (
@@ -78,8 +79,8 @@ export default function TransactionDetailsModal({
               <section className="tx-detail-grid" aria-label="Transaction fields">
                 <DetailItem label="Type" value={readFirstString(transaction, ["tx_type", "type"], "operation").replace(/_/g, " ")} />
                 <DetailItem label="Block Height" value={readFirstString(transaction, ["block_height", "height"])} mono />
-                <DetailItem label="Sender" value={readFirstString(transaction, ["sender", "from"])} mono wide />
-                <DetailItem label="Recipient / Target" value={readFirstString(transaction, ["recipient", "to", "module"])} mono wide />
+                <DetailItem label="Sender" value={senderAddress} mono wide />
+                <DetailItem label="Recipient / Target" value={shortHash(readFirstString(transaction, ["recipient", "to", "module"]))} mono wide />
                 <DetailItem label="Function" value={readFirstString(transaction, ["function"])} mono />
                 <DetailItem label="Sequence" value={readFirstString(transaction, ["sequence_number", "sequence", "nonce"])} mono />
                 <DetailItem label="Gas Limit" value={readFirstString(transaction, ["gas_limit", "gas"])} mono />