From 374c0035ab5fbfa0021ac802de11ff7bb7076054 Mon Sep 17 00:00:00 2001 From: wheval Date: Sun, 26 Apr 2026 13:39:38 +0100 Subject: [PATCH 1/3] fix: add tx hash copy action in timeline rows Add compact transaction timeline rows with truncated tx hashes and inline copy action feedback for success/failure states. Closes accesslayerorg/accesslayer-client#160 Made-with: Cursor --- PR_DESCRIPTION_160.md | 16 ++ .../common/EmptyTransactionTimelineState.tsx | 169 ++++++++++++++++-- 2 files changed, 166 insertions(+), 19 deletions(-) create mode 100644 PR_DESCRIPTION_160.md diff --git a/PR_DESCRIPTION_160.md b/PR_DESCRIPTION_160.md new file mode 100644 index 00000000..cd3d2fc2 --- /dev/null +++ b/PR_DESCRIPTION_160.md @@ -0,0 +1,16 @@ +## Summary +- #160: Add truncated tx hash copy action in timeline rows + +## Changes +- Replaced the placeholder timeline empty-state panel with compact transaction timeline rows that include truncated transaction hash entries. +- Added a copy-to-clipboard action per row for tx hashes, with brief inline feedback for both success (`check`) and failure (`x`) outcomes. +- Kept the row layout compact and scannable by using a dense 4-column row structure (action, amount, hash+copy action, status/time). + +## Testing +- [ ] Open the landing page and confirm timeline rows render under "Transaction timeline pattern" with truncated hash values. +- [ ] Click the copy icon for each row and verify success feedback appears briefly, then resets. +- [ ] Simulate clipboard denial/unavailable state and verify failure feedback appears briefly, then resets. +- [ ] Confirm row layout remains compact on small and medium breakpoints. + +## Closing +Closes accesslayerorg/accesslayer-client#160 diff --git a/src/components/common/EmptyTransactionTimelineState.tsx b/src/components/common/EmptyTransactionTimelineState.tsx index 6d31a800..5dd7788c 100644 --- a/src/components/common/EmptyTransactionTimelineState.tsx +++ b/src/components/common/EmptyTransactionTimelineState.tsx @@ -1,25 +1,156 @@ +import { useState } from 'react'; import { Button } from '@/components/ui/button'; -import { Clock3 } from 'lucide-react'; +import { Check, Clock3, Copy, XCircle } from 'lucide-react'; + +type CopyState = 'idle' | 'success' | 'error'; + +interface TimelineEntry { + id: string; + action: string; + amount: string; + txHash: string; + timeLabel: string; + status: 'confirmed' | 'pending' | 'failed'; +} + +const TIMELINE_ENTRIES: TimelineEntry[] = [ + { + id: 'entry-1', + action: 'Buy', + amount: '+2 keys', + txHash: '0x2a43bcfdef77ca4c50ef7d38148dd5d7f0149a6e2e20f70f04ce1f4b66fe55dd', + timeLabel: '2m ago', + status: 'confirmed', + }, + { + id: 'entry-2', + action: 'Sell', + amount: '-1 key', + txHash: '0x90c82ac01478b42fcbf9db73a26ed32bd8e50a8917e2408c31c95e9f6a59fc19', + timeLabel: '18m ago', + status: 'pending', + }, + { + id: 'entry-3', + action: 'Buy', + amount: '+3 keys', + txHash: '0x16d2ffbc4297a8c2c3086e07c16e66f47287df0d5a1ce1aef9e448e2f0f3ab51', + timeLabel: '51m ago', + status: 'failed', + }, +]; + +const shortenTxHash = (hash: string) => `${hash.slice(0, 8)}...${hash.slice(-6)}`; const EmptyTransactionTimelineState: React.FC = () => { - return ( -
-
-
- -
-

- No transactions yet -

-

- New users will see transaction milestones here after submitting their first buy or sell action. -

-
- -
-
-
- ); + const [copyStateById, setCopyStateById] = useState>({}); + + const copyTxHash = async (entryId: string, txHash: string) => { + try { + await navigator.clipboard.writeText(txHash); + setCopyStateById(current => ({ ...current, [entryId]: 'success' })); + } catch { + setCopyStateById(current => ({ ...current, [entryId]: 'error' })); + } + + window.setTimeout(() => { + setCopyStateById(current => ({ ...current, [entryId]: 'idle' })); + }, 1300); + }; + + return ( +
+
+
+
+

+ Transaction timeline +

+

+ Recent trade events with quick copy access for tx hashes. +

+
+
+ +
+
+ +
+ {TIMELINE_ENTRIES.map(entry => { + const copyState = copyStateById[entry.id] ?? 'idle'; + const isSuccess = copyState === 'success'; + const isError = copyState === 'error'; + const statusClass = + entry.status === 'confirmed' + ? 'text-emerald-300' + : entry.status === 'pending' + ? 'text-amber-300' + : 'text-rose-300'; + + return ( +
+ {entry.action} + {entry.amount} +
+
+ + {shortenTxHash(entry.txHash)} + + +
+ + {isSuccess + ? 'Transaction hash copied to clipboard' + : isError + ? 'Failed to copy transaction hash' + : ''} + +
+
+

{entry.status}

+

{entry.timeLabel}

+
+
+ ); + })} +
+ +
+ +
+
+
+ ); }; export default EmptyTransactionTimelineState; From 0515d051b8d8ad95aae67ca8ab4d2f7108362039 Mon Sep 17 00:00:00 2001 From: wheval Date: Sun, 26 Apr 2026 13:42:50 +0100 Subject: [PATCH 2/3] chore: remove local issue context artifacts from branch Drop issue context and PR draft files from the tracked branch to keep the PR scoped to production code changes only. Made-with: Cursor --- .solve-issues-state.json | 10 ++++++++++ PR_DESCRIPTION_160.md | 16 ---------------- 2 files changed, 10 insertions(+), 16 deletions(-) create mode 100644 .solve-issues-state.json delete mode 100644 PR_DESCRIPTION_160.md diff --git a/.solve-issues-state.json b/.solve-issues-state.json new file mode 100644 index 00000000..9354062f --- /dev/null +++ b/.solve-issues-state.json @@ -0,0 +1,10 @@ +{ + "issues": { + "160": { + "status": "prepared", + "branch": "fix/issues-160", + "worktree": "/Users/user/Desktop/projects/accesslayer-client/.issue-worktrees/issue-160", + "updatedAt": "2026-04-26T12:29:55.120Z" + } + } +} \ No newline at end of file diff --git a/PR_DESCRIPTION_160.md b/PR_DESCRIPTION_160.md deleted file mode 100644 index cd3d2fc2..00000000 --- a/PR_DESCRIPTION_160.md +++ /dev/null @@ -1,16 +0,0 @@ -## Summary -- #160: Add truncated tx hash copy action in timeline rows - -## Changes -- Replaced the placeholder timeline empty-state panel with compact transaction timeline rows that include truncated transaction hash entries. -- Added a copy-to-clipboard action per row for tx hashes, with brief inline feedback for both success (`check`) and failure (`x`) outcomes. -- Kept the row layout compact and scannable by using a dense 4-column row structure (action, amount, hash+copy action, status/time). - -## Testing -- [ ] Open the landing page and confirm timeline rows render under "Transaction timeline pattern" with truncated hash values. -- [ ] Click the copy icon for each row and verify success feedback appears briefly, then resets. -- [ ] Simulate clipboard denial/unavailable state and verify failure feedback appears briefly, then resets. -- [ ] Confirm row layout remains compact on small and medium breakpoints. - -## Closing -Closes accesslayerorg/accesslayer-client#160 From 8f777a7370c4b2ef545a62f064f9c3016ed6763c Mon Sep 17 00:00:00 2001 From: wheval Date: Sun, 26 Apr 2026 13:43:10 +0100 Subject: [PATCH 3/3] chore: remove solve state artifact from branch Ensure only issue-related product changes are included in the PR branch. Made-with: Cursor --- .solve-issues-state.json | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 .solve-issues-state.json diff --git a/.solve-issues-state.json b/.solve-issues-state.json deleted file mode 100644 index 9354062f..00000000 --- a/.solve-issues-state.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "issues": { - "160": { - "status": "prepared", - "branch": "fix/issues-160", - "worktree": "/Users/user/Desktop/projects/accesslayer-client/.issue-worktrees/issue-160", - "updatedAt": "2026-04-26T12:29:55.120Z" - } - } -} \ No newline at end of file