From 445ddf05cd9a2265724d3c1dd2a61e348b400856 Mon Sep 17 00:00:00 2001
From: Fahat Adam <fahatadam4u@gmail.com>
Date: Sat, 27 Jun 2026 18:22:26 +0100
Subject: [PATCH 1/2] task: fix focus order in create new event form

---
 app/(dashboard)/events/new/page.test.tsx  |  38 +++++
 app/(dashboard)/events/new/page.tsx       | 162 +++++++++++-----------
 app/(dashboard)/settings/ACCESSIBILITY.md |   3 +-
 3 files changed, 123 insertions(+), 80 deletions(-)
 create mode 100644 app/(dashboard)/events/new/page.test.tsx

diff --git a/app/(dashboard)/events/new/page.test.tsx b/app/(dashboard)/events/new/page.test.tsx
new file mode 100644
index 0000000..e097021
--- /dev/null
+++ b/app/(dashboard)/events/new/page.test.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import NewEventPage from "./page"
+
+// Mock next/navigation
+jest.mock("next/navigation", () => ({
+  useRouter() {
+    return {
+      push: jest.fn(),
+      replace: jest.fn(),
+      prefetch: jest.fn(),
+    }
+  },
+}))
+
+describe("NewEventPage focus order", () => {
+  it("tabs through fields in the correct visual reading order", async () => {
+    const user = userEvent.setup()
+    render(<NewEventPage />)
+
+    // Start tabbing
+    await user.tab()
+    expect(screen.getByLabelText(/event title/i)).toHaveFocus()
+
+    await user.tab()
+    expect(screen.getByLabelText(/description/i)).toHaveFocus()
+
+    await user.tab()
+    // Select is tricky because Radix UI uses a hidden button.
+    // Let's just check the id or name if possible, or skip to the next
+    // The select trigger usually has role="combobox"
+    expect(screen.getByRole("combobox", { name: /category/i })).toHaveFocus()
+
+    // Add more expectations to see what currently happens
+    // By keeping this minimal first, we can run it and see the output!
+  })
+})
diff --git a/app/(dashboard)/events/new/page.tsx b/app/(dashboard)/events/new/page.tsx
index 3667fa8..50fbe76 100644
--- a/app/(dashboard)/events/new/page.tsx
+++ b/app/(dashboard)/events/new/page.tsx
@@ -64,86 +64,20 @@ export default function NewEventPage() {
 
       <form onSubmit={handleSubmit} className="space-y-8">
         <div className="grid gap-6 md:grid-cols-2">
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="title">Event Title</Label>
-              <Input
-                id="title"
-                placeholder="Enter event title"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                id="description"
-                placeholder="Describe the prediction event"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="min-h-[120px]"
-                required
-              />
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="category">Category</Label>
-                <Select value={category} onValueChange={setCategory} required>
-                  <SelectTrigger id="category">
-                    <SelectValue placeholder="Select category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Sports">Sports</SelectItem>
-                    <SelectItem value="Finance">Finance</SelectItem>
-                    <SelectItem value="Entertainment">Entertainment</SelectItem>
-                    <SelectItem value="Politics">Politics</SelectItem>
-                    <SelectItem value="Technology">Technology</SelectItem>
-                    <SelectItem value="Other">Other</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="deadline">Deadline</Label>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
-                      <CalendarIcon className="mr-2 h-4 w-4" />
-                      {deadline ? format(deadline, "PPP") : "Select deadline"}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-auto p-0">
-                    <Calendar mode="single" selected={deadline} onSelect={setDeadline} initialFocus />
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="visibility">Event Visibility</Label>
-                <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
-              </div>
-              <p className="text-sm text-muted-foreground">
-                {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="featured">Featured Event</Label>
-                <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
-              </div>
-              <p className="text-sm text-muted-foreground">
-                Featured events appear on the homepage and receive more visibility
-              </p>
-            </div>
+          {/* Row 1 Left: Title */}
+          <div className="space-y-2 md:col-start-1 md:row-start-1">
+            <Label htmlFor="title">Event Title</Label>
+            <Input
+              id="title"
+              placeholder="Enter event title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
           </div>
 
-          <div className="space-y-4">
+          {/* Row 1 Right: Outcomes (spans multiple rows) */}
+          <div className="space-y-4 md:col-start-2 md:row-start-1 md:row-span-6">
             <div>
               <Label>Prediction Options</Label>
               <p className="text-sm text-muted-foreground mb-4">Add the possible outcomes for this prediction event</p>
@@ -214,9 +148,79 @@ export default function NewEventPage() {
               </div>
             </div>
           </div>
+
+          {/* Row 2 Left: Description */}
+          <div className="space-y-2 md:col-start-1 md:row-start-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              placeholder="Describe the prediction event"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="min-h-[120px]"
+              required
+            />
+          </div>
+
+          {/* Row 3 Left: Category and Deadline */}
+          <div className="grid gap-4 md:grid-cols-2 md:col-start-1 md:row-start-3">
+            <div className="space-y-2">
+              <Label htmlFor="category">Category</Label>
+              <Select value={category} onValueChange={setCategory} required>
+                <SelectTrigger id="category">
+                  <SelectValue placeholder="Select category" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Sports">Sports</SelectItem>
+                  <SelectItem value="Finance">Finance</SelectItem>
+                  <SelectItem value="Entertainment">Entertainment</SelectItem>
+                  <SelectItem value="Politics">Politics</SelectItem>
+                  <SelectItem value="Technology">Technology</SelectItem>
+                  <SelectItem value="Other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="deadline">Deadline</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {deadline ? format(deadline, "PPP") : "Select deadline"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                  <Calendar mode="single" selected={deadline} onSelect={setDeadline} initialFocus />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+
+          {/* Row 4 Left: Visibility */}
+          <div className="space-y-2 md:col-start-1 md:row-start-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="visibility">Event Visibility</Label>
+              <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
+            </p>
+          </div>
+
+          {/* Row 5 Left: Featured */}
+          <div className="space-y-2 md:col-start-1 md:row-start-5">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="featured">Featured Event</Label>
+              <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Featured events appear on the homepage and receive more visibility
+            </p>
+          </div>
         </div>
 
-        <div className="flex items-center justify-end gap-4">
+        <div className="flex items-center justify-end gap-4 mt-8">
           <Button type="button" variant="outline" onClick={() => router.push("/events")}>
             Cancel
           </Button>
diff --git a/app/(dashboard)/settings/ACCESSIBILITY.md b/app/(dashboard)/settings/ACCESSIBILITY.md
index f72032b..b2109a1 100644
--- a/app/(dashboard)/settings/ACCESSIBILITY.md
+++ b/app/(dashboard)/settings/ACCESSIBILITY.md
@@ -3,8 +3,9 @@ Accessibility and responsive improvements
 Summary
 - Added a lightweight `Tabs` wrapper around the Settings page to provide keyboard-navigable grouping and ARIA roles.
 - Introduced an `aria-live` polite region announcing save confirmations for assistive technologies.
-- Ensured `Switch` and `Select` controls are programmatically labelled via `Label` + `htmlFor`.
+- Ensure `Switch` and `Select` controls are programmatically labelled via `Label` + `htmlFor`.
 - Interactive option buttons now use `aria-pressed` where appropriate.
+- **Form Layouts and Focus Order**: Use explicit CSS Grid placements (`md:col-start-*`, `md:row-start-*`) instead of wrapping columns in separate `div` containers. This allows you to place form fields directly in the DOM in the exact logical left-to-right, top-to-bottom sequence so keyboard tab order naturally follows the visual reading order without relying on positive `tabIndex` values.
 
 How to test locally
 

From be2bc7a60796e3c7acb4e3c2710091f42aec78f9 Mon Sep 17 00:00:00 2001
From: Fahat Adam <fahatadam4u@gmail.com>
Date: Sat, 27 Jun 2026 18:57:53 +0100
Subject: [PATCH 2/2] feat: add CopyableText pattern and adopt across surfaces

---
 components/error-boundary.tsx                 |  15 +-
 components/navbar/WalletMenu.tsx              | 211 +++++++++---------
 .../transactions/TransactionsHstory.tsx       |   5 +
 components/ui/CopyableText.tsx                |  88 ++++++++
 components/ui/__tests__/CopyableText.test.tsx |  66 ++++++
 lib/mock-data.ts                              |  27 ++-
 lib/types.ts                                  |   1 +
 7 files changed, 294 insertions(+), 119 deletions(-)
 create mode 100644 components/ui/CopyableText.tsx
 create mode 100644 components/ui/__tests__/CopyableText.test.tsx

diff --git a/components/error-boundary.tsx b/components/error-boundary.tsx
index cfa0d6d..d3368e0 100644
--- a/components/error-boundary.tsx
+++ b/components/error-boundary.tsx
@@ -4,6 +4,7 @@ import React, { Component, ErrorInfo, ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { AlertTriangle } from "lucide-react";
+import { CopyableText } from "@/components/ui/CopyableText";
 
 interface Props {
   children: ReactNode;
@@ -13,6 +14,7 @@ interface Props {
 interface State {
   hasError: boolean;
   error: Error | null;
+  incidentId: string | null;
 }
 
 /**
@@ -22,11 +24,12 @@ interface State {
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, incidentId: null };
   }
 
   static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
+    const incidentId = Math.random().toString(36).substring(2, 10).toUpperCase();
+    return { hasError: true, error, incidentId };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -40,7 +43,7 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   handleReset = () => {
-    this.setState({ hasError: false, error: null });
+    this.setState({ hasError: false, error: null, incidentId: null });
   };
 
   render() {
@@ -62,6 +65,12 @@ export class ErrorBoundary extends Component<Props, State> {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
+              {this.state.incidentId && (
+                <div className="flex flex-col gap-1.5 rounded-md bg-muted/50 p-3 border border-border/50">
+                  <span className="text-xs font-medium text-muted-foreground">Incident ID</span>
+                  <CopyableText text={this.state.incidentId} truncateMiddle={false} className="w-fit" />
+                </div>
+              )}
               {process.env.NODE_ENV === 'development' && this.state.error && (
                 <div className="rounded-md bg-muted p-3">
                   <p className="text-sm font-mono text-destructive">
diff --git a/components/navbar/WalletMenu.tsx b/components/navbar/WalletMenu.tsx
index d7eb9d3..2528b1b 100644
--- a/components/navbar/WalletMenu.tsx
+++ b/components/navbar/WalletMenu.tsx
@@ -1,108 +1,105 @@
-"use client";
-
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useWalletContext } from "@/context/WalletContext";
-import { useWallet } from "@/hooks/useWallet.hook";
-import { ConnectWalletModal } from "@/components/connect-wallet-modal";
-import { Copy as CopyIcon, RefreshCcw, LogOut as LogOutIcon } from "lucide-react";
-import ArrowDownIcon from "../icons/ArrowDown";
-import { Switch } from "@/components/ui/switch";
-import { usePrivacy } from "@/context/PrivacyContext";
-import { maskAmount } from "@/utils/maskAmount";
-
-function truncateMiddle(address: string, visible = 4) {
-  if (address.length <= visible * 2) return address;
-  return `${address.slice(0, visible)}…${address.slice(-visible)}`;
-}
-
-export function WalletMenu() {
-  const { address, connected, isLoading } = useWalletContext();
-  const { disconnectWallet } = useWallet();
-  const [isOpen, setIsOpen] = React.useState(false);
-  const { hideBalances, setHideBalances } = usePrivacy();
-
-  const display = connected && address ? (hideBalances ? maskAmount(address) : truncateMiddle(address)) : "Connect wallet";
-
-  if (isLoading) {
-    return (
-      <Button
-        variant="secondary"
-        className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white opacity-50"
-        disabled
-        aria-label="Loading wallet state"
-      >
-        <span className="text-[#540D8D] text-sm dark:text-white">Loading...</span>
-      </Button>
-    );
-  }
-
-  function handleCopy() {
-    if (address) navigator.clipboard.writeText(address);
-  }
-
-  if (!connected) {
-    return (
-      <>
-        <Button
-          variant="secondary"
-          className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white"
-          onClick={() => setIsOpen(true)}
-          aria-label="Connect wallet"
-        >
-          <span className="text-[#540D8D] text-sm dark:text-white">{display}</span>
-        </Button>
-        <ConnectWalletModal isOpen={isOpen} onOpenChange={setIsOpen} />
-      </>
-    );
-  }
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="secondary"
-            className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white"
-            aria-haspopup="menu"
-            aria-label="Wallet menu"
-          >
-            <span className="text-[#540D8D] text-sm dark:text-white">{display}</span>
-            <ArrowDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-56" role="menu">
-          <DropdownMenuLabel>Wallet</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem role="menuitem" onClick={handleCopy} className="cursor-pointer" aria-label="Copy address">
-            <CopyIcon className="mr-2 h-4 w-4" />
-            Copy
-          </DropdownMenuItem>
-          <DropdownMenuItem role="menuitem" onClick={() => setIsOpen(true)} className="cursor-pointer" aria-label="Switch wallet">
-            <RefreshCcw className="mr-2 h-4 w-4" />
-            Switch
-          </DropdownMenuItem>
-          <DropdownMenuItem role="menuitem" onClick={() => { void disconnectWallet(); }} className="cursor-pointer" aria-label="Disconnect wallet">
-            <LogOutIcon className="mr-2 h-4 w-4" />
-            Disconnect
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <label className="flex items-center justify-between w-full px-2 py-1">
-              <span className="text-sm">Hide balances</span>
-              <Switch checked={hideBalances} onCheckedChange={setHideBalances} />
-            </label>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <ConnectWalletModal isOpen={isOpen} onOpenChange={setIsOpen} />
-    </>
-  );
+"use client";
+
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useWalletContext } from "@/context/WalletContext";
+import { useWallet } from "@/hooks/useWallet.hook";
+import { ConnectWalletModal } from "@/components/connect-wallet-modal";
+import { RefreshCcw, LogOut as LogOutIcon } from "lucide-react";
+import ArrowDownIcon from "../icons/ArrowDown";
+import { Switch } from "@/components/ui/switch";
+import { usePrivacy } from "@/context/PrivacyContext";
+import { maskAmount } from "@/utils/maskAmount";
+import { CopyableText } from "@/components/ui/CopyableText";
+
+function truncateMiddle(address: string, visible = 4) {
+  if (address.length <= visible * 2) return address;
+  return `${address.slice(0, visible)}…${address.slice(-visible)}`;
+}
+
+export function WalletMenu() {
+  const { address, connected, isLoading } = useWalletContext();
+  const { disconnectWallet } = useWallet();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { hideBalances, setHideBalances } = usePrivacy();
+
+  const display = connected && address ? (hideBalances ? maskAmount(address) : truncateMiddle(address)) : "Connect wallet";
+
+  if (isLoading) {
+    return (
+      <Button
+        variant="secondary"
+        className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white opacity-50"
+        disabled
+        aria-label="Loading wallet state"
+      >
+        <span className="text-[#540D8D] text-sm dark:text-white">Loading...</span>
+      </Button>
+    );
+  }
+
+  if (!connected) {
+    return (
+      <>
+        <Button
+          variant="secondary"
+          className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white"
+          onClick={() => setIsOpen(true)}
+          aria-label="Connect wallet"
+        >
+          <span className="text-[#540D8D] text-sm dark:text-white">{display}</span>
+        </Button>
+        <ConnectWalletModal isOpen={isOpen} onOpenChange={setIsOpen} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="secondary"
+            className="h-8 rounded-full flex items-center border border-[#540D8D] dark:border-white dark:border-[0.24px] bg-[#540D8D1F] dark:bg-[#FFFFFF1C] dark:text-white"
+            aria-haspopup="menu"
+            aria-label="Wallet menu"
+          >
+            <span className="text-[#540D8D] text-sm dark:text-white">{display}</span>
+            <ArrowDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56" role="menu">
+          <DropdownMenuLabel className="flex flex-col gap-1">
+            <span className="text-xs font-normal text-muted-foreground">Connected Address</span>
+            {address && <CopyableText text={address} className="-ml-1.5" visibleChars={6} />}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem role="menuitem" onClick={() => setIsOpen(true)} className="cursor-pointer" aria-label="Switch wallet">
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            Switch
+          </DropdownMenuItem>
+          <DropdownMenuItem role="menuitem" onClick={() => { void disconnectWallet(); }} className="cursor-pointer" aria-label="Disconnect wallet">
+            <LogOutIcon className="mr-2 h-4 w-4" />
+            Disconnect
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <label className="flex items-center justify-between w-full px-2 py-1">
+              <span className="text-sm">Hide balances</span>
+              <Switch checked={hideBalances} onCheckedChange={setHideBalances} />
+            </label>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ConnectWalletModal isOpen={isOpen} onOpenChange={setIsOpen} />
+    </>
+  );
 }
diff --git a/components/transactions/TransactionsHstory.tsx b/components/transactions/TransactionsHstory.tsx
index 58efa44..8526282 100644
--- a/components/transactions/TransactionsHstory.tsx
+++ b/components/transactions/TransactionsHstory.tsx
@@ -3,6 +3,7 @@ import { ArrowDown, ArrowUp, RefreshCw, X } from 'lucide-react';
 import { TransactionFilters } from '@/lib/types';
 import { allTransactions } from '@/lib/mock-data';
 import { Timestamp } from '@/components/ui/Timestamp';
+import { CopyableText } from '@/components/ui/CopyableText';
 
 
 export default function TransactionHistory() {
@@ -291,6 +292,7 @@ export default function TransactionHistory() {
                                 <thead className='bg-[#F9FAFB] h-16'>
                                     <tr className="border-b h-[61px] box-border border-gray-200">
                                         <th className="text-left h-[61px] py-3 px-8 text-gray-600 font-medium text-sm">Date</th>
+                                        <th className="text-left h-[61px] py-3 px-8 text-gray-600 font-medium text-sm">Hash</th>
                                         <th className="text-left h-[61px] py-4 px-8 w-[179px] text-gray-600 font-medium text-sm">Type</th>
                                         <th className="text-left max-h-[61px] py-4 px-8 w-[159px] text-gray-600 font-medium text-sm">Amount</th>
                                         <th className="text-left max-h-[61px] py-6 px-8 w-[164px] text-gray-600 font-medium text-sm">Status</th>
@@ -303,6 +305,9 @@ export default function TransactionHistory() {
                                             <td className="h-[94px] max-h-[91px]py-8 px-8 text-sm text-gray-500">
                                                 <Timestamp date={transaction.date} />
                                             </td>
+                                            <td className="py-8 px-8">
+                                                <CopyableText text={transaction.hash} visibleChars={6} />
+                                            </td>
                                             <td className="py-8 px-8">
                                                 <div className="flex items-center gap-2">
                                                     {transaction.icon === 'down' && (
diff --git a/components/ui/CopyableText.tsx b/components/ui/CopyableText.tsx
new file mode 100644
index 0000000..0eace6c
--- /dev/null
+++ b/components/ui/CopyableText.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Copy, Check } from "lucide-react";
+import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/lib/utils";
+
+interface CopyableTextProps {
+  text: string;
+  truncateMiddle?: boolean;
+  visibleChars?: number;
+  className?: string;
+}
+
+export function CopyableText({
+  text,
+  truncateMiddle = true,
+  visibleChars = 4,
+  className,
+}: CopyableTextProps) {
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopied(false), 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [copied]);
+
+  const handleCopy = async (e: React.MouseEvent | React.KeyboardEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast({
+        title: "Copied!",
+        description: "The text has been copied to your clipboard.",
+      });
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+      toast({
+        title: "Failed to copy",
+        description: "Could not copy text to clipboard.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const displayText = truncateMiddle
+    ? text.length > visibleChars * 2
+      ? `${text.slice(0, visibleChars)}…${text.slice(-visibleChars)}`
+      : text
+    : text;
+
+  return (
+    <div
+      className={cn(
+        "group inline-flex items-center gap-1.5 cursor-pointer rounded-md px-1.5 py-0.5 transition-colors hover:bg-black/5 dark:hover:bg-white/10 text-muted-foreground hover:text-foreground",
+        className
+      )}
+      onClick={handleCopy}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleCopy(e);
+        }
+      }}
+      aria-label={`Copy ${text}`}
+      title={text}
+    >
+      <span className="font-mono text-sm">{displayText}</span>
+      <span className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center w-4 h-4">
+        {copied ? (
+          <Check className="h-3.5 w-3.5 text-green-500" />
+        ) : (
+          <Copy className="h-3.5 w-3.5" />
+        )}
+      </span>
+      {/* Screen reader only live region for accessibility */}
+      <span className="sr-only" aria-live="polite">
+        {copied ? "Copied" : ""}
+      </span>
+    </div>
+  );
+}
diff --git a/components/ui/__tests__/CopyableText.test.tsx b/components/ui/__tests__/CopyableText.test.tsx
new file mode 100644
index 0000000..1e43291
--- /dev/null
+++ b/components/ui/__tests__/CopyableText.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CopyableText } from '../CopyableText';
+import { ToastProvider } from '@/components/ui/toast';
+
+const renderWithToast = (ui: React.ReactElement) => {
+  return render(
+    <ToastProvider>
+      {ui}
+    </ToastProvider>
+  );
+};
+
+// Mock clipboard
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn(),
+  },
+});
+
+describe('CopyableText', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders truncated text by default', () => {
+    renderWithToast(<CopyableText text="0x1234567890abcdef" />);
+    expect(screen.getByText('0x12…cdef')).toBeInTheDocument();
+  });
+
+  it('renders full text when truncateMiddle is false', () => {
+    renderWithToast(<CopyableText text="0x1234567890abcdef" truncateMiddle={false} />);
+    expect(screen.getByText('0x1234567890abcdef')).toBeInTheDocument();
+  });
+
+  it('copies text to clipboard on click', async () => {
+    renderWithToast(<CopyableText text="test-copy" />);
+    
+    const copyButton = screen.getByRole('button');
+    await userEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test-copy');
+  });
+
+  it('copies text to clipboard on Enter key press', async () => {
+    renderWithToast(<CopyableText text="test-copy" />);
+    
+    const copyButton = screen.getByRole('button');
+    copyButton.focus();
+    await userEvent.keyboard('{Enter}');
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test-copy');
+  });
+
+  it('updates live region on copy', async () => {
+    renderWithToast(<CopyableText text="test-copy" />);
+    
+    const liveRegion = screen.getByText('', { selector: '[aria-live="polite"]' });
+    expect(liveRegion).toBeEmptyDOMElement();
+
+    const copyButton = screen.getByRole('button');
+    await userEvent.click(copyButton);
+
+    expect(liveRegion).toHaveTextContent('Copied');
+  });
+});
diff --git a/lib/mock-data.ts b/lib/mock-data.ts
index 56488c0..0a53a79 100644
--- a/lib/mock-data.ts
+++ b/lib/mock-data.ts
@@ -139,7 +139,8 @@ export const categoryColors = {
             icon: 'down',
             amountColor: 'text-green-500',
             currency: 'XLM',
-            numericAmount: 50
+            numericAmount: 50,
+            hash: '0x1A2b3C4d5E6f7G8h9I0j1K2l3M4n5O6p7Q8r9S0t'
         },
         {
             date: '09/06/2023',
@@ -150,7 +151,8 @@ export const categoryColors = {
             icon: 'up',
             amountColor: 'text-red-500',
             currency: 'XLM',
-            numericAmount: -10
+            numericAmount: -10,
+            hash: '0x2B3c4D5e6F7g8H9i0J1k2L3m4N5o6P7q8R9s0T1u'
         },
         {
             date: '08/06/2023',
@@ -161,7 +163,8 @@ export const categoryColors = {
             icon: 'down',
             amountColor: 'text-green-500',
             currency: 'XLM',
-            numericAmount: 18
+            numericAmount: 18,
+            hash: '0x3C4d5E6f7G8h9I0j1K2l3M4n5O6p7Q8r9S0t1U2v'
         },
         {
             date: '07/06/2023',
@@ -172,7 +175,8 @@ export const categoryColors = {
             icon: 'up',
             amountColor: 'text-red-500',
             currency: 'XLM',
-            numericAmount: -25
+            numericAmount: -25,
+            hash: '0x4D5e6F7g8H9i0J1k2L3m4N5o6P7q8R9s0T1u2V3w'
         },
         {
             date: '06/06/2023',
@@ -183,7 +187,8 @@ export const categoryColors = {
             icon: 'up',
             amountColor: 'text-red-500',
             currency: 'USDC',
-            numericAmount: -15
+            numericAmount: -15,
+            hash: '0x5E6f7G8h9I0j1K2l3M4n5O6p7Q8r9S0t1U2v3W4x'
         },
         {
             date: '05/06/2023',
@@ -194,7 +199,8 @@ export const categoryColors = {
             icon: 'refresh',
             amountColor: 'text-green-500',
             currency: 'USDC',
-            numericAmount: 5
+            numericAmount: 5,
+            hash: '0x6F7g8H9i0J1k2L3m4N5o6P7q8R9s0T1u2V3w4X5y'
         },
         {
             date: '06/06/2023',
@@ -205,7 +211,8 @@ export const categoryColors = {
             icon: 'up',
             amountColor: 'text-red-500',
             currency: 'USDC',
-            numericAmount: -15
+            numericAmount: -15,
+            hash: '0x7G8h9I0j1K2l3M4n5O6p7Q8r9S0t1U2v3W4x5Y6z'
         },
         {
             date: '05/06/2023',
@@ -216,7 +223,8 @@ export const categoryColors = {
             icon: 'refresh',
             amountColor: 'text-green-500',
             currency: 'USDC',
-            numericAmount: 5
+            numericAmount: 5,
+            hash: '0x8H9i0J1k2L3m4N5o6P7q8R9s0T1u2V3w4X5y6Z7a'
         },
         {
             date: '04/06/2023',
@@ -227,6 +235,7 @@ export const categoryColors = {
             icon: 'down',
             amountColor: 'text-green-500',
             currency: 'USDC',
-            numericAmount: 100
+            numericAmount: 100,
+            hash: '0x9I0j1K2l3M4n5O6p7Q8r9S0t1U2v3W4x5Y6z7A8b'
         }
     ];
diff --git a/lib/types.ts b/lib/types.ts
index f620f6d..885c6af 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -55,6 +55,7 @@ export interface Transaction {
   amountColor: string;
   currency: 'XLM' | 'USDC';
   numericAmount: number;
+  hash: string;
 }
 
 export interface TransactionFilters {