diff --git a/src/__tests__/WalletAddress.test.tsx b/src/__tests__/WalletAddress.test.tsx index f862580..d2ff7af 100644 --- a/src/__tests__/WalletAddress.test.tsx +++ b/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(); 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(); + + await user.click(screen.getByRole('button', { name: /copy/i })); + + expect(writeText).toHaveBeenCalledWith(ADDR); + expect(screen.getByText('Copied!')).toBeInTheDocument(); + }); }); diff --git a/src/components/WalletAddress.tsx b/src/components/WalletAddress.tsx index 7e7336f..4c4430c 100644 --- a/src/components/WalletAddress.tsx +++ b/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 ( diff --git a/src/components/invoice/RecipientRow.tsx b/src/components/invoice/RecipientRow.tsx index 8c32abf..7f92904 100644 --- a/src/components/invoice/RecipientRow.tsx +++ b/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 */} - {truncated} - {address} - {isCurrentWallet && ( - - You +
+ + {truncated} + {address} - )} + + {isCurrentWallet && ( + + You + + )} +
{/* Share */}