Skip to content

feat(ui): add click-to-expand detail panels to TransactionTimeline steps #841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Haroldwonder merged 2 commits into from
Jul 1, 2026
Merged

feat(ui): add click-to-expand detail panels to TransactionTimeline steps #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
218ca05
feat(ui): add click-to-expand detail panels to TransactionTimeline steps
onlywiseone Jun 29, 2026
5c7b117
Merge branch 'main' into feat/transaction-timeline-expand-panels
onlywiseone Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions ui/components/TransactionTimeline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ const minsAgo = (n: number) => new Date(Date.now() - n * 60_000).toISOString();
// ─── Per-story event fixtures ──────────────────────────────────────────────────

const PENDING_EVENTS: TxEvent[] = [
{ status: "initiated", timestamp: minsAgo(14), detail: "via ACH transfer" },
{ status: "awaiting_user", timestamp: minsAgo(12), detail: "Reference: ANC-20240115-0042" },
{ status: "pending", timestamp: minsAgo(3), description: "Funds detected on the ACH rail — awaiting settlement." },
{ status: "initiated", timestamp: minsAgo(14), detail: "via ACH transfer", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "completed", kind: "deposit", amount_in: "250.00", asset_code: "USDC" } } },
{ status: "awaiting_user", timestamp: minsAgo(12), detail: "Reference: ANC-20240115-0042", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "pending_user_transfer_start", more_info_url: "https://anchor.example.com/sep24/transaction/dep_8f3c1a9e2b" } } },
{ status: "pending", timestamp: minsAgo(3), description: "Funds detected on the ACH rail — awaiting settlement.", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "pending_external", amount_in: "250.00", amount_fee: "1.50" } } },
];

const AWAITING_USER_EVENTS: TxEvent[] = [
Expand All @@ -33,14 +33,16 @@ const COMPLETED_EVENTS: TxEvent[] = [
];

const FAILED_EVENTS: TxEvent[] = [
{ status: "initiated", timestamp: minsAgo(50), detail: "to SEPA •••• 4821" },
{ status: "awaiting_user", timestamp: minsAgo(49) },
{ status: "pending", timestamp: minsAgo(44) },
{ status: "initiated", timestamp: minsAgo(50), detail: "to SEPA •••• 4821", rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "completed", kind: "withdrawal" } } },
{ status: "awaiting_user", timestamp: minsAgo(49), rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "pending_user_transfer_start" } } },
{ status: "pending", timestamp: minsAgo(44), rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "pending_external" } } },
{
status: "failed",
timestamp: minsAgo(22),
label: "Bank Rejected",
description: "Destination bank rejected the transfer. Please verify your IBAN and try again.",
error: "SEPA transfer declined: invalid IBAN checksum (error code: RJCT-AC01)",
rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "error", message: "Bank rejected: invalid IBAN", external_transaction_id: "SEPA-20240115-9821" } },
},
];

Expand Down
99 changes: 73 additions & 26 deletions ui/components/TransactionTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,23 +334,35 @@ export function TransactionTimeline({

{/* Content */}
<div style={{ flex: 1, paddingTop: 8, minWidth: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
<span style={{
...sans, fontSize: 13, fontWeight: 600,
color: step.isDone || step.isActive ? "var(--ak-text)" : "var(--ak-text-subtle)",
transition: "color 0.4s",
}}>
{step.event?.label ?? step.m.label}
</span>
{step.isDone && !step.isActive && (
<div
onClick={() => setExpandedStep(expandedStep === step.status ? null : step.status)}
style={{ cursor: "pointer", userSelect: "none" }}
>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
<span style={{
...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
padding: "2px 7px", borderRadius: 10,
background: step.m.bg, color: step.m.color,
border: `1px solid ${step.m.border}`,
}}>DONE</span>
)}
{step.isActive && (
...sans, fontSize: 13, fontWeight: 600,
color: step.isDone || step.isActive ? "var(--ak-text)" : "var(--ak-text-subtle)",
transition: "color 0.4s",
}}>
{step.event?.label ?? step.m.label}
</span>
{step.isDone && !step.isActive && (
<span style={{
...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
padding: "2px 7px", borderRadius: 10,
background: step.m.bg, color: step.m.color,
border: `1px solid ${step.m.border}`,
}}>DONE</span>
)}
{step.isActive && (
<span style={{
...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
padding: "2px 7px", borderRadius: 10,
background: step.m.bg, color: step.m.color,
border: `1px solid ${step.m.border}`,
animation: "txs-fade-in-out 1.8s ease-in-out infinite",
}}>LIVE</span>
)}
<span style={{
...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
padding: "2px 7px", borderRadius: 10,
Expand Down Expand Up @@ -483,17 +495,52 @@ export function TransactionTimeline({
}}>✕</div>
</div>
<div style={{ flex: 1, paddingTop: 8 }}>
<div style={{ ...sans, fontSize: 13, fontWeight: 600, color: "var(--ak-status-failed-color)", marginBottom: 4 }}>
{events.find(e => e.status === "failed")?.label ?? "Transaction Failed"}
<div
onClick={() => setExpandedStep(expandedStep === "failed" ? null : "failed")}
style={{ cursor: "pointer", userSelect: "none" }}
>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
<span style={{ ...sans, fontSize: 13, fontWeight: 600, color: "var(--ak-status-failed-color)" }}>
{events.find(e => e.status === "failed")?.label ?? "Transaction Failed"}
</span>
<span style={{ ...mono, fontSize: 10, color: "var(--ak-text-subtle)", marginLeft: "auto", display: "inline-block", transition: "transform 0.2s", transform: expandedStep === "failed" ? "rotate(180deg)" : "rotate(0deg)" }}>▾</span>
</div>
<p style={{ ...sans, fontSize: 12, color: "var(--ak-status-failed-color)", lineHeight: 1.55, margin: 0 }}>
{events.find(e => e.status === "failed")?.description ?? DEFAULT_DESCRIPTIONS.failed[type]}
</p>
{events.find(e => e.status === "failed")?.timestamp && (
<span style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", marginTop: 4, display: "block" }}>
{formatTs(events.find(e => e.status === "failed")!.timestamp)}
</span>
)}
</div>
<p style={{ ...sans, fontSize: 12, color: "var(--ak-status-failed-color)", lineHeight: 1.55, margin: 0 }}>
{events.find(e => e.status === "failed")?.description ?? DEFAULT_DESCRIPTIONS.failed[type]}
</p>
{events.find(e => e.status === "failed")?.timestamp && (
<span style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", marginTop: 4, display: "block" }}>
{formatTs(events.find(e => e.status === "failed")!.timestamp)}
</span>
)}
{expandedStep === "failed" && (() => {
const ev = events.find(e => e.status === "failed");
return (
<div style={{ marginTop: 10, padding: "12px 14px", borderRadius: 10, border: "1px solid var(--ak-status-failed-border)", background: "var(--ak-status-failed-bg)", display: "flex", flexDirection: "column", gap: 8 }}>
{ev?.timestamp && (
<div>
<span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Timestamp</span>
<span style={{ ...mono, fontSize: 11, color: "var(--ak-status-failed-color)" }}>{ev.timestamp}</span>
</div>
)}
{ev?.error && (
<div>
<span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Error</span>
<span style={{ ...mono, fontSize: 11, color: "var(--ak-status-failed-color)" }}>{ev.error}</span>
</div>
)}
{ev?.rawApiResponse !== undefined && (
<div>
<span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Raw API Response</span>
<pre style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", background: "var(--ak-surface-3)", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--ak-status-failed-border)", overflowX: "auto", margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 200, overflowY: "auto" }}>
{JSON.stringify(ev.rawApiResponse, null, 2)}
</pre>
</div>
)}
</div>
);
})()}
</div>
</div>
)}
Expand Down
Loading