feat:Add copy confirmation for wallet addresses

src/__tests__/WalletAddress.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 import WalletAddress from '@/components/WalletAddress';
 
 const ADDR = 'GABCDEFGHIJKLMNOPQRSTUVWXYZ1234567';
@@ -19,4 +21,20 @@ describe('WalletAddress', () => {
     render(<WalletAddress address={ADDR} />);
     expect(screen.getByTitle(ADDR)).toBeInTheDocument();
   });
+
+  it('shows a copy button and copies the address on click', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    });
+
+    render(<WalletAddress address={ADDR} />);
+
+    await user.click(screen.getByRole('button', { name: /copy/i }));
+
+    expect(writeText).toHaveBeenCalledWith(ADDR);
+    expect(screen.getByText('Copied!')).toBeInTheDocument();
+  });
 });

src/components/WalletAddress.tsx

@@ -8,7 +8,7 @@ interface Props {
   showCopy?: boolean;
 }
 
-export default function WalletAddress({ address, truncate = true, showCopy = false }: Props) {
+export default function WalletAddress({ address, truncate = true, showCopy = true }: Props) {
   const display = truncate ? `${address.slice(0, 4)}…${address.slice(-4)}` : address;
   return (
     <span className="inline-flex items-center gap-1.5">

src/components/invoice/RecipientRow.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useEmailValidation } from "@/hooks/useEmailValidation";
 import RecipientPaymentHistory from "@/components/invoice/RecipientPaymentHistory";
+import CopyButton from "@/components/CopyButton";
 
 // ─── Form Row (invoice creation) ──────────────────────────────────────────
 
@@ -140,16 +141,21 @@ export function RecipientDetailRow({
 
         {/* Address */}
         <td
-          className="px-4 py-3 text-sm font-mono text-gray-300 truncate max-w-[200px]"
+          className="px-4 py-3 text-sm font-mono text-gray-300 max-w-[200px]"
           title={address}
         >
-          <span className="sm:hidden">{truncated}</span>
-          <span className="hidden sm:inline">{address}</span>
-          {isCurrentWallet && (
-            <span className="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-indigo-500 text-white font-semibold inline-flex items-center gap-1">
-              You
+          <div className="flex items-center gap-2">
+            <span className="truncate">
+              <span className="sm:hidden">{truncated}</span>
+              <span className="hidden sm:inline">{address}</span>
             </span>
-          )}
+            <CopyButton text={address} className="!px-1.5 !py-0.5 text-[11px] shrink-0" />
+            {isCurrentWallet && (
+              <span className="text-[11px] px-2 py-0.5 rounded-full bg-indigo-500 text-white font-semibold inline-flex items-center gap-1 shrink-0">
+                You
+              </span>
+            )}
+          </div>
         </td>
 
         {/* Share */}