+
,
+ );
+ expect(screen.getByTestId('tx-receipt-share')).toBeInTheDocument();
+ expect(screen.getByTestId('tx-receipt-card')).toBeInTheDocument();
+ });
+
+ it('has no axe violations in RTL', async () => {
+ const { container } = render(
+
+
,
+ );
+ expect(await axe(container)).toHaveNoViolations();
+ });
+
+ it('all functionality works in RTL mode', async () => {
+ const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+ render(
+
+
,
+ );
+
+ await user.click(screen.getByRole('button', { name: /hide amount/i }));
+ expect(screen.getByText('••••••')).toBeInTheDocument();
+
+ await user.click(screen.getByRole('button', { name: /wide/i }));
+ expect(screen.getByTestId('tx-receipt-card').className).toContain('tx-receipt-card--wide');
+ });
+ });
+
+ /* ── Edge cases ───────────────────────────────────────────── */
+
+ describe('edge cases', () => {
+ it('handles very long wallet addresses', () => {
+ const longWallet = '0x' + 'a'.repeat(64);
+ renderReceipt({ senderWallet: longWallet });
+ expect(screen.getByText(longWallet)).toBeInTheDocument();
+ });
+
+ it('handles very long transaction IDs', () => {
+ const longTxId = 'TX-' + 'x'.repeat(100);
+ renderReceipt({ transactionId: longTxId });
+ expect(screen.getByText(longTxId)).toBeInTheDocument();
+ });
+
+ it('handles empty memo gracefully', () => {
+ renderReceipt({ memo: '' });
+ expect(screen.queryByText('Memo')).not.toBeInTheDocument();
+ });
+
+ it('handles all status values', () => {
+ const { rerender } = renderReceipt({ status: 'completed' });
+ expect(screen.getByText('COMPLETED')).toBeInTheDocument();
+
+ rerender(
+
+ {icon}
+ {message}
+
+
+
+ );
+};
+
+/* ─── Main Component ───────────────────────────────────────── */
+
export const TransactionReceiptShare: React.FC
- {/* Action Bar */}
-
-
+
+ {/* Hidden live region for screen-reader announcements */}
+
+ {toast?.message ?? ''}
+
+
+ {/* Toast notification */}
+ {toast && (
+
+ {/* Aspect ratio picker */}
+
+
- {/* Capturable Area */}
+ {/* ── Capturable receipt card ── */}
+ {/* Hide amount toggle */}
+
+ {/* Copy image */}
+
+
+ {/* Download */}
+ {/* Header — issuer branding */}
+ {/* Amount section */}
+ {/* Detail rows */}
= (
);
};
+TransactionReceiptShare.displayName = 'TransactionReceiptShare';
export default TransactionReceiptShare;
diff --git a/src/components/StatusTimeline/__snapshots__/TransactionReceiptShare.test.tsx.snap b/src/components/StatusTimeline/__snapshots__/TransactionReceiptShare.test.tsx.snap
index 2e989ce..ad4eb07 100644
--- a/src/components/StatusTimeline/__snapshots__/TransactionReceiptShare.test.tsx.snap
+++ b/src/components/StatusTimeline/__snapshots__/TransactionReceiptShare.test.tsx.snap
@@ -1,52 +1,2510 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`TransactionReceiptShare > renders correctly and matches snapshot 1`] = `
+exports[`TransactionReceiptShare > rendering > matches snapshot for compact layout 1`] = `
+`;
+
+exports[`TransactionReceiptShare > snapshots > all optional fields 1`] = `
+
+`;
+
+exports[`TransactionReceiptShare > snapshots > wide layout 1`] = `
+
- {issuerLogoUrl && }
+ {issuerLogoUrl && (
+ 
+ )}
{issuerName}
Amount
{hideAmount ? (
- ••••••
+ <>
+ ••••••
+
+
) : (
- {amount} {currency}
+
+ {typeof amount === 'number' ? amount.toLocaleString() : amount} {currency}
+
)}
Status
- {status.toUpperCase()}
+
+ {status.toUpperCase()}
+
Date
@@ -168,39 +392,63 @@ export const TransactionReceiptShare: React.FC = (
{transactionHash && (
- Transaction Hash
- {transactionHash}
+ Hash
+ {transactionHash}
+
+ )}
+ {memo && (
+
+ Memo
+ {memo}
)}
-
- From
- {senderWallet}
+ {/* Sensitive: sender wallet (copy disabled) */}
+
@@ -208,4 +456,5 @@ export const TransactionReceiptShare: React.FC
+
+ From
+
+
+
+
+
+ {senderWallet}
+
-
- To
- {recipientWallet}
+ {/* Sensitive: recipient wallet (copy disabled) */}
+
+
+ {/* Footer */}
+
+ To
+
+
+
+
+
+ {recipientWallet}
+
Generated securely by {issuerName}
-
{explorerUrl && (
-
- Explorer:
-
- {explorerUrl}
-
-
+
+ Explorer:{' '}
+
+ {explorerUrl}
+
+
)}
-
{transactionHash && (
-
- Hash: {transactionHash}
-
+ Hash: {transactionHash}
)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Revora
+
+
+
+
+
+
+ Amount
+
+
+
+ 1,500.00
+
+ USDC
+
+
+
+
+
+
+
+ Status
+
+
+ COMPLETED
+
+
+
+
+ Date
+
+
+ Oct 24, 2023 14:30
+
+
+
+
+ Transaction ID
+
+
+ TX-12345
+
+
+
+
+ From
+
+
+
+ 0x1234567890abcdef1234567890abcdef12345678
+
+
+
+
+ To
+
+
+
+ 0xabcdef1234567890abcdef1234567890abcdef12
+
+
+
+
+`;
+
+exports[`TransactionReceiptShare > snapshots > compact layout 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ AcmeCorp
+
+
+
+
+
+ AcmeCorp
+
+
+
+
+ Amount
+
+
+
+ 1,500.00
+
+ USDC
+
+
+
+
+
+
+
+ Status
+
+
+ COMPLETED
+
+
+
+
+ Date
+
+
+ Oct 24, 2023 14:30
+
+
+
+
+ Transaction ID
+
+
+ TX-12345
+
+
+
+
+ Hash
+
+
+ 0xabcdef
+
+
+
+
+ Memo
+
+
+ Payment for invoice #42
+
+
+
+
+ From
+
+
+
+ 0x1234567890abcdef1234567890abcdef12345678
+
+
+
+
+ To
+
+
+
+ 0xabcdef1234567890abcdef1234567890abcdef12
+
+
+
+
+`;
+
+exports[`TransactionReceiptShare > snapshots > hidden amount 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Revora
+
+
+
+
+
+
+ Amount
+
+
+
+ 1,500.00
+
+ USDC
+
+
+
+
+
+
+
+ Status
+
+
+ COMPLETED
+
+
+
+
+ Date
+
+
+ Oct 24, 2023 14:30
+
+
+
+
+ Transaction ID
+
+
+ TX-12345
+
+
+
+
+ From
+
+
+
+ 0x1234567890abcdef1234567890abcdef12345678
+
+
+
+
+ To
+
+
+
+ 0xabcdef1234567890abcdef1234567890abcdef12
+
+
+
+
+`;
+
+exports[`TransactionReceiptShare > snapshots > square layout 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Revora
+
+
+
+
+
+
+ Amount
+
+
+
+ ••••••
+
+
+
+
+
+
+
+
+ Status
+
+
+ COMPLETED
+
+
+
+
+ Date
+
+
+ Oct 24, 2023 14:30
+
+
+
+
+ Transaction ID
+
+
+ TX-12345
+
+
+
+
+ From
+
+
+
+ 0x1234567890abcdef1234567890abcdef12345678
+
+
+
+
+ To
+
+
+
+ 0xabcdef1234567890abcdef1234567890abcdef12
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+ Amount
+
+
+
+ 1,500.00
+
+ USDC
+
+
+
+
+
+
+
+ Status
+
+
+ COMPLETED
+
+
+
+
+ Date
+
+
+ Oct 24, 2023 14:30
+
+
+
+
+ Transaction ID
+
+
+ TX-12345
+
+
+
+
+ From
+
+
+
+ 0x1234567890abcdef1234567890abcdef12345678
+
+
+
+
+ To
+
+
+
+ 0xabcdef1234567890abcdef1234567890abcdef12
+
+
+
+
diff --git a/vite.config.ts b/vite.config.ts
index 18cf275..aa05bd5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -43,6 +43,8 @@ export default defineConfig({
'src/components/DocumentUploader/DocumentUploader.tsx',
// Issue #472 – Governance vote receipt
'src/components/GovernanceVoteReceipt/GovernanceVoteReceipt.tsx',
+ // Issue #481 – Transaction receipt share-as-image
+ 'src/components/StatusTimeline/TransactionReceiptShare.tsx',
// Command Palette
'src/components/CommandPalette/CommandPalette.tsx',
'src/components/CommandPalette/commandPaletteData.ts',
@@ -158,6 +160,9 @@ export default defineConfig({
'src/components/Notifications/NotificationBell.tsx': {
branches: 95, functions: 95, lines: 95, statements: 95,
},
+ 'src/components/StatusTimeline/TransactionReceiptShare.tsx': {
+ branches: 95, functions: 95, lines: 95, statements: 95,
+ },
}
}
}
+
+
+
+
renders correctly and matches snapshot 1`] =
Status
COMPLETED
@@ -210,41 +2679,95 @@ exports[`TransactionReceiptShare > renders correctly and matches snapshot 1`] =
From
+
- 0x123...abc
+ 0x1234567890abcdef1234567890abcdef12345678
To
+
- 0x456...def
+ 0xabcdef1234567890abcdef1234567890abcdef12