feat: Download receipt as csv (#880)

## Description
- adding ability to download receipt as csv

## Type of change
-   [x] New feature

## Screenshots
<img width="663" height="623" alt="Screenshot 2026-03-16 at 18 36 56"
src="https://github.com/user-attachments/assets/fd525053-ea32-423d-b2c3-f7b88ed543a2"
/>


[solana-receipt.csv](https://github.com/user-attachments/files/26032500/solana-receipt-4izwTCUeRGAMGReXeXDumiBzAgXPGz6KzccacCf1WU5YXCCpSDjAQT7J6D6dY45bL1NW9AiqwCuWEnz3hbGtZS2y.8.csv)

## Testing
1. open
http://localhost:3000/tx/4izwTCUeRGAMGReXeXDumiBzAgXPGz6KzccacCf1WU5YXCCpSDjAQT7J6D6dY45bL1NW9AiqwCuWEnz3hbGtZS2y?view=receipt&cluster=mainnet-beta

http://localhost:3000/tx/2kHbPUGzehenUXQbBfAVZGcuTrSUVDMEyU2aGcjFbuUAJkG28CyQPCGZF68u369MU7WHMvJboyioqyihvtR75nLn?view=receipt&cluster=mainnet-beta
3. click on download > csv btn
4. see the csv

## Related Issues

[HOO-327/](https://linear.app/solana-fndn/issue/HOO-327/allow-to-download-receipt-in-csv-format)

## Checklist

<!-- Verify that you have completed the following before requesting
review -->
-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] I have run `build:info` script to update build information
-   [x] CI/CD checks pass
-   [x] I have included screenshots for protocol screens (if applicable)

---------

Co-authored-by: Sergo <rogaldh@radsh.red>

Author: C0mberry

app/entities/token-receipt/__tests__/lib.spec.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+
+import { getReceiptAmount, getReceiptMint, getReceiptSymbol } from '../lib';
+import type { FormattedReceipt } from '../types';
+
+const SOL_RECEIPT: FormattedReceipt = {
+    date: { timestamp: 1700000000, utc: '2023-11-14 22:13:20 UTC' },
+    fee: { formatted: '0.000005', raw: 5000 },
+    kind: 'sol',
+    memo: undefined,
+    network: 'mainnet-beta',
+    receiver: { address: 'Recv2222', truncated: 'Recv...22' },
+    sender: { address: 'Send1111', truncated: 'Send...11' },
+    total: { formatted: '1.5', raw: 1_500_000_000, unit: 'SOL' },
+};
+
+const TOKEN_RECEIPT: FormattedReceipt = {
+    date: { timestamp: 1700000000, utc: '2023-11-14 22:13:20 UTC' },
+    fee: { formatted: '0.000005', raw: 5000 },
+    kind: 'token',
+    memo: undefined,
+    mint: '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU',
+    network: 'mainnet-beta',
+    receiver: { address: 'Recv2222', truncated: 'Recv...22' },
+    sender: { address: 'Send1111', truncated: 'Send...11' },
+    symbol: 'USDC',
+    total: { formatted: '143.25', raw: 143.25, unit: 'USDC' },
+};
+
+describe('getReceiptMint', () => {
+    it('should return undefined for SOL receipts', () => {
+        expect(getReceiptMint(SOL_RECEIPT)).toBeUndefined();
+    });
+
+    it('should return mint address for token receipts', () => {
+        expect(getReceiptMint(TOKEN_RECEIPT)).toBe('4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU');
+    });
+
+    it('should return undefined for token receipts without mint', () => {
+        const receipt: FormattedReceipt = { ...TOKEN_RECEIPT, mint: undefined };
+        expect(getReceiptMint(receipt)).toBeUndefined();
+    });
+});
+
+describe('getReceiptSymbol', () => {
+    it('should return undefined for SOL receipts', () => {
+        expect(getReceiptSymbol(SOL_RECEIPT)).toBeUndefined();
+    });
+
+    it('should return symbol for token receipts', () => {
+        expect(getReceiptSymbol(TOKEN_RECEIPT)).toBe('USDC');
+    });
+
+    it('should return undefined for token receipts without symbol', () => {
+        const receipt: FormattedReceipt = { ...TOKEN_RECEIPT, symbol: undefined };
+        expect(getReceiptSymbol(receipt)).toBeUndefined();
+    });
+});
+
+describe('getReceiptAmount', () => {
+    it('should convert lamports to SOL for SOL receipts', () => {
+        expect(getReceiptAmount(SOL_RECEIPT)).toBe(1.5);
+    });
+
+    it('should return raw amount for token receipts', () => {
+        expect(getReceiptAmount(TOKEN_RECEIPT)).toBe(143.25);
+    });
+});

app/entities/token-receipt/index.ts

@@ -0,0 +1,2 @@
+export { getReceiptAmount, getReceiptMint, getReceiptSymbol } from './lib';
+export type { FormattedBaseReceipt, FormattedReceipt, FormattedReceiptToken } from './types';

app/entities/token-receipt/lib.ts

@@ -0,0 +1,17 @@
+import { lamportsToSol } from '@utils/index';
+
+import type { FormattedReceipt } from './types';
+
+export function getReceiptMint(receipt: FormattedReceipt): string | undefined {
+    return 'mint' in receipt ? receipt.mint : undefined;
+}
+
+export function getReceiptSymbol(receipt: FormattedReceipt): string | undefined {
+    return receipt.kind === 'token' ? receipt.symbol : undefined;
+}
+
+// SOL receipts store total.raw in lamports; token receipts store it as a UI amount.
+// Returns the amount in whole units suitable for price math.
+export function getReceiptAmount(receipt: FormattedReceipt): number {
+    return receipt.kind === 'sol' ? lamportsToSol(receipt.total.raw) : receipt.total.raw;
+}

app/entities/token-receipt/types.ts

@@ -0,0 +1,36 @@
+export type FormattedBaseReceipt = {
+    date: {
+        timestamp: number;
+        utc: string;
+    };
+    fee: {
+        raw: number;
+        formatted: string;
+    };
+    total: {
+        raw: number;
+        formatted: string;
+        unit: string;
+    };
+    network: string;
+    sender: {
+        address: string;
+        truncated: string;
+        domain?: string;
+    };
+    receiver: {
+        address: string;
+        truncated: string;
+        domain?: string;
+    };
+    memo?: string | undefined;
+    logoURI?: string | undefined;
+};
+
+export type FormattedReceiptToken = FormattedBaseReceipt & {
+    kind: 'token';
+    mint?: string | undefined;
+    symbol?: string | undefined;
+};
+
+export type FormattedReceipt = (FormattedBaseReceipt & { kind: 'sol' }) | FormattedReceiptToken;

app/features/receipt/__e2e__/receipt.e2e.ts

@@ -47,16 +47,7 @@ test.describe('when feature enabled', () => {
     });
 
     test('renders receipt for valid transaction', async ({ page }) => {
-        await waitForPage(page, VALID_TX, 'receipt');
-
-        await page
-            .locator('h3:has-text("Solana Receipt")')
-            .or(page.locator('text=Not Found'))
-            .or(page.locator('text=Receipts can only be generated'))
-            .first()
-            .waitFor({ state: 'visible', timeout: CONTENT_TIMEOUT });
-
-        const hasReceipt = await hasElement(page, 'h3:has-text("Solana Receipt")');
+        const hasReceipt = await navigateToReceipt(page);
         const hasError = await hasElement(page, 'text=Not Found');
         const hasNoReceipt = await hasElement(page, 'text=Receipts can only be generated');
 
@@ -93,6 +84,40 @@ test.describe('when feature enabled', () => {
         expect(showsError).toBe(true);
     });
 
+    test('shows CSV and PDF options in download menu', async ({ page }) => {
+        const hasReceipt = await navigateToReceipt(page);
+        if (!hasReceipt) return;
+
+        await page.locator('button:has-text("Download")').click();
+        await expect(page.locator('button:has-text("CSV")')).toBeVisible({ timeout: CONTENT_TIMEOUT });
+        await expect(page.locator('button:has-text("PDF")')).toBeVisible({ timeout: CONTENT_TIMEOUT });
+    });
+
+    test('triggers CSV download with correct filename', async ({ page }) => {
+        const hasReceipt = await navigateToReceipt(page);
+        if (!hasReceipt) return;
+
+        await page.locator('button:has-text("Download")').click();
+
+        const [download] = await Promise.all([
+            page.waitForEvent('download'),
+            page.locator('button:has-text("CSV")').click(),
+        ]);
+
+        // eslint-disable-next-line no-restricted-syntax -- regex needed to validate filename pattern: solana-receipt-<signature>.csv
+        expect(download.suggestedFilename()).toMatch(/^solana-receipt-.+\.csv$/);
+    });
+
+    test('shows Downloaded! state after CSV download completes', async ({ page }) => {
+        const hasReceipt = await navigateToReceipt(page);
+        if (!hasReceipt) return;
+
+        await page.locator('button:has-text("Download")').click();
+        await page.locator('button:has-text("CSV")').click();
+
+        await expect(page.locator('button:has-text("Downloaded!")')).toBeVisible({ timeout: CONTENT_TIMEOUT });
+    });
+
     test('shows View Receipt button', async ({ page }) => {
         await waitForPage(page, VALID_TX);
 
@@ -159,6 +184,19 @@ async function hasElement(page: Page, selector: string, timeout = 10000): Promis
     }
 }
 
+async function navigateToReceipt(page: Page): Promise<boolean> {
+    await waitForPage(page, VALID_TX, 'receipt');
+
+    await page
+        .locator('h3:has-text("Solana Receipt")')
+        .or(page.locator('text=Not Found'))
+        .or(page.locator('text=Receipts can only be generated'))
+        .first()
+        .waitFor({ state: 'visible', timeout: CONTENT_TIMEOUT });
+
+    return hasElement(page, 'h3:has-text("Solana Receipt")');
+}
+
 async function waitForPage(page: Page, tx: string, view?: 'receipt') {
     const url = view ? `/tx/${tx}?view=${view}` : `/tx/${tx}`;
 

app/features/receipt/lib/__tests__/generate-receipt-csv.spec.ts

@@ -0,0 +1,135 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { FormattedReceipt } from '../../types';
+import { buildReceiptCsvRow, generateReceiptCsv } from '../generate-receipt-csv';
+
+const RECEIPT: FormattedReceipt = {
+    date: { timestamp: 1700000000, utc: '2023-11-14 22:13:20 UTC' },
+    fee: { formatted: '0.000005', raw: 5000 },
+    kind: 'sol',
+    memo: 'Payment for services',
+    network: 'mainnet-beta',
+    receiver: { address: 'ReceiverAddr2222222222222222222222222222222', truncated: 'Recv...2222' },
+    sender: { address: 'SenderAddr111111111111111111111111111111111', truncated: 'Send...1111' },
+    total: { formatted: '1.0', raw: 1000000000, unit: 'SOL' },
+};
+
+const SIGNATURE = '5UfDuX7hXbGjGHqPXRGaHdSecretSignature1234567890abcdef';
+
+describe('buildReceiptCsvRow', () => {
+    it('should include all expected fields in correct column order', () => {
+        const row = buildReceiptCsvRow(RECEIPT, SIGNATURE);
+
+        expect(row[0]).toBe('2023-11-14 22:13:20 UTC');
+        expect(row[1]).toBe(SIGNATURE);
+        expect(row[2]).toBe('mainnet-beta');
+        expect(row[3]).toBe('SenderAddr111111111111111111111111111111111');
+        expect(row[4]).toBe('ReceiverAddr2222222222222222222222222222222');
+        expect(row[5]).toBe('1.0');
+        expect(row[6]).toBe('SOL');
+        expect(row[7]).toBe('');
+        expect(row[8]).toBe('');
+        expect(row[9]).toBe('0.000005');
+        expect(row[10]).toBe('Payment for services');
+        expect(row).toHaveLength(11);
+    });
+
+    it('should include USD value when provided', () => {
+        const row = buildReceiptCsvRow(RECEIPT, SIGNATURE, '$150.00');
+        expect(row[8]).toBe('$150.00');
+    });
+
+    it('should leave mint field empty for SOL receipts', () => {
+        const row = buildReceiptCsvRow(RECEIPT, SIGNATURE);
+        expect(row[7]).toBe('');
+    });
+
+    it('should include mint address for token receipts', () => {
+        const tokenReceipt: FormattedReceipt = {
+            ...RECEIPT,
+            kind: 'token',
+            mint: '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU',
+            symbol: 'USDC',
+            total: { formatted: '143.25', raw: 143.25, unit: 'USDC' },
+        };
+        const row = buildReceiptCsvRow(tokenReceipt, SIGNATURE);
+        expect(row[6]).toBe('USDC');
+        expect(row[7]).toBe('4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU');
+    });
+
+    it('should leave memo field empty when absent', () => {
+        const receiptNoMemo: FormattedReceipt = { ...RECEIPT, memo: undefined };
+        const row = buildReceiptCsvRow(receiptNoMemo, SIGNATURE);
+        expect(row[10]).toBe('');
+    });
+
+    it('should sanitize memo with formula-injection prefix', () => {
+        const receipt: FormattedReceipt = { ...RECEIPT, memo: '=SUM(A1)' };
+        const row = buildReceiptCsvRow(receipt, SIGNATURE);
+        expect(row[10]).toBe("'=SUM(A1)");
+    });
+
+    it('should sanitize token symbol with formula-injection prefix', () => {
+        const receipt: FormattedReceipt = {
+            ...RECEIPT,
+            kind: 'token',
+            mint: '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU',
+            symbol: '=EVIL',
+            total: { formatted: '100', raw: 100, unit: '=EVIL' },
+        };
+        const row = buildReceiptCsvRow(receipt, SIGNATURE);
+        expect(row[6]).toBe("'=EVIL");
+    });
+});
+
+describe('generateReceiptCsv', () => {
+    let mockClick: ReturnType<typeof vi.fn>;
+    let linkElement: Record<string, unknown>;
+
+    beforeEach(() => {
+        mockClick = vi.fn();
+        linkElement = { click: mockClick, download: '', href: '' };
+        vi.spyOn(document, 'createElement').mockReturnValue(linkElement as unknown as HTMLElement);
+        vi.spyOn(document.body, 'appendChild').mockReturnValue(linkElement as unknown as ChildNode);
+        vi.spyOn(document.body, 'removeChild').mockReturnValue(linkElement as unknown as ChildNode);
+        vi.stubGlobal('URL', {
+            createObjectURL: vi.fn().mockReturnValue('blob:test-url'),
+            revokeObjectURL: vi.fn(),
+        });
+    });
+
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        vi.restoreAllMocks();
+    });
+
+    it('should set the correct download filename', async () => {
+        await generateReceiptCsv(RECEIPT, SIGNATURE);
+        expect(linkElement.download).toBe(`solana-receipt-${SIGNATURE}.csv`);
+    });
+
+    it('should set the href to the object URL', async () => {
+        await generateReceiptCsv(RECEIPT, SIGNATURE);
+        expect(linkElement.href).toBe('blob:test-url');
+    });
+
+    it('should revoke the object URL after triggering download', async () => {
+        await generateReceiptCsv(RECEIPT, SIGNATURE);
+        expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:test-url');
+    });
+
+    it('should pass a Blob with CSV mime type to createObjectURL', async () => {
+        await generateReceiptCsv(RECEIPT, SIGNATURE);
+
+        const blobArg = (URL.createObjectURL as ReturnType<typeof vi.fn>).mock.calls[0][0] as Blob;
+        expect(blobArg).toBeInstanceOf(Blob);
+        expect(blobArg.type).toBe('text/csv;charset=utf-8;');
+    });
+
+    it('should pass a non-empty Blob to createObjectURL', async () => {
+        await generateReceiptCsv(RECEIPT, SIGNATURE);
+
+        const blobArg = (URL.createObjectURL as ReturnType<typeof vi.fn>).mock.calls[0][0] as Blob;
+        expect(blobArg.size).toBeGreaterThan(0);
+    });
+});