test: add E2E coverage for send flow happy path

frontend/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],
-  framework: '@storybook/nextjs',
+  framework: '@storybook/nextjs-vite',
   staticDirs: ['../public'],
 };
 

frontend/app/sandbox/playground/page.tsx

@@ -26,8 +26,8 @@ export default function PlaygroundPage() {
   const [loading, setLoading] = useState(false);
 
   const client = new BridgeletClient({
-    baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
-    apiKey: process.env.NEXT_PUBLIC_API_KEY,
+    baseUrl: process.env[`NEXT_PUBLIC_API_BASE_URL`],
+    apiKey: process.env[`NEXT_PUBLIC_API_KEY`],
   } as BridgeletClientOptions);
 
   const handleEndpointChange = (endpoint: Endpoint) => {
@@ -49,18 +49,18 @@ export default function PlaygroundPage() {
       let result: unknown;
       switch (selected) {
         case "getClaimDetails":
-          result = await client.getClaimDetails(params.token);
+          result = await client.getClaimDetails(params[`token`] ?? "");
           break;
         case "createPaymentIntent":
           result = await client.createPaymentIntent({
-            senderPublicKey: params.senderPublicKey,
-            amountStroops: params.amountStroops,
-            assetCode: params.assetCode,
+            senderPublicKey: params[`senderPublicKey`] ?? "",
+            amountStroops: params[`amountStroops`] ?? "",
+            assetCode: params[`assetCode`] ?? "",
           });
           break;
         case "redeemClaim":
-          result = await client.redeemClaim(params.token, {
-            recipientPublicKey: params.recipientPublicKey,
+          result = await client.redeemClaim(params[`token`] ?? "", {
+            recipientPublicKey: params[`recipientPublicKey`] ?? "",
           });
           break;
       }

frontend/components/claim-status-card.stories.tsx

@@ -10,18 +10,14 @@ export default meta;
 
 type Story = StoryObj<typeof ClaimStatusCard>;
 
-export const Loading: Story = {
-  args: { status: 'loading' },
-};
-
-export const Unclaimed: Story = {
-  args: { status: 'unclaimed', amount: '100', asset: 'USDC', expiresAt: '2026-07-15T12:00:00Z' },
+export const Available: Story = {
+  args: { status: 'available', amountStroops: '1000000000', assetCode: 'USDC', expiresAt: '2026-07-15T12:00:00Z' },
 };
 
 export const Claimed: Story = {
-  args: { status: 'claimed', amount: '100', asset: 'USDC' },
+  args: { status: 'claimed' },
 };
 
 export const Expired: Story = {
-  args: { status: 'expired', amount: '50', asset: 'XLM', expiresAt: '2026-06-01T00:00:00Z' },
-};
+  args: { status: 'expired', expiresAt: '2026-06-01T00:00:00Z', supportEmail: 'support@bridgelet.com' },
+};

frontend/components/claim-status-card.tsx

@@ -142,7 +142,7 @@ function AvailablePanel({
         type="button"
         onClick={handleClaim}
         disabled={claiming}
-        className="w-full rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-green-700 disabled:opacity-60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+        className="w-full rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-green-700 disabled:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-green-600"
       >
         {claiming ? 'Claiming…' : 'Claim now'}
       </button>

frontend/components/send-form/steps/confirm-step.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import type { SendFormState } from '../index';
 import { useNfc } from '@/hooks/use-nfc';
+import { createPaymentIntent } from '@/lib/bridgelet';
 
 type ConfirmStepProps = {
   state: SendFormState;
@@ -20,10 +21,19 @@ export function ConfirmStep({ state, onBack }: ConfirmStepProps) {
     setSubmitting(true);
     setError(null);
     try {
-      // Placeholder: wire up to POST /api/accounts + POST /send in a real impl.
-      await new Promise((res) => setTimeout(res, 800));
-      // Set a mock claim URL for the NFC experiment since the backend isn't wired
-      setClaimUrl('https://bridgelet.example.com/claim/mock-token-123');
+      const amountStroops = Math.round(Number.parseFloat(state.amountXlm) * 10_000_000).toString();
+      const response = await createPaymentIntent({
+        senderPublicKey: state.publicKey,
+        amountStroops,
+        assetCode: state.assetCode,
+        memo: state.memo || undefined,
+      });
+
+      const resolvedClaimUrl = response.claimUrl.startsWith('http')
+        ? response.claimUrl
+        : `${window.location.origin}${response.claimUrl}`;
+
+      setClaimUrl(resolvedClaimUrl);
       setSubmitted(true);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Something went wrong.');
@@ -44,7 +54,22 @@ export function ConfirmStep({ state, onBack }: ConfirmStepProps) {
           A claim link has been sent to <strong>{state.recipientEmail}</strong>. They have 24
           hours to claim their funds.
         </p>
-
+
+        {claimUrl && (
+          <div className="mt-3 rounded-lg border border-green-200 bg-white px-3 py-2">
+            <p className="text-sm font-medium text-green-800">Claim link</p>
+            <a
+              href={claimUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-testid="claim-link"
+              className="mt-1 block break-all text-sm text-green-700 underline underline-offset-2"
+            >
+              {claimUrl}
+            </a>
+          </div>
+        )}
+
         {isSupported && claimUrl && (
           <div className="mt-4 border-t border-green-200 pt-4">
             <button

frontend/components/send-form/steps/connect-step.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState } from 'react';
-import { connectFreighter } from '@/lib/wallet';
+import { useEffect, useState } from 'react';
+import { connectFreighter, loadPersistedWallet } from '@/lib/wallet';
 import { ChainSelector } from '@/components/chain-selector';
 
 type ConnectStepProps = {
@@ -13,6 +13,15 @@ export function ConnectStep({ publicKey, onConnected }: ConnectStepProps) {
   const [status, setStatus] = useState<'idle' | 'connecting' | 'error'>('idle');
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!publicKey) {
+      const persistedWallet = loadPersistedWallet();
+      if (persistedWallet?.publicKey) {
+        onConnected(persistedWallet.publicKey);
+      }
+    }
+  }, [onConnected, publicKey]);
+
   async function handleConnect() {
     setStatus('connecting');
     setError(null);

frontend/e2e/accessibility.spec.ts

@@ -0,0 +1,21 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+const routes = ['/', '/send', '/claim/example-token'];
+
+test.describe('Accessibility checks', () => {
+  for (const route of routes) {
+    test(`has no WCAG 2.1 AA violations on ${route}`, async ({ page }) => {
+      await page.goto(route);
+
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag21aa'])
+        .analyze();
+
+      expect(
+        results.violations,
+        results.violations.map((violation) => `${violation.id}: ${violation.help}`).join('\n'),
+      ).toEqual([]);
+    });
+  }
+});

frontend/e2e/send-flow.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Send flow', () => {
+  test('completes the full happy path and shows a claim link', async ({ page }) => {
+    await page.goto('/send');
+
+    await expect(page.locator('h2').filter({ hasText: /Connect Wallet/i })).toBeVisible();
+
+    await page.evaluate(() => {
+      localStorage.setItem(
+        'bridgelet_wallet',
+        JSON.stringify({ publicKey: 'GBALBEDO76V6K67X4PZ72NC556XU54K75QNZP2Z5F4O7V6Y456QWERTY', type: 'freighter' }),
+      );
+    });
+
+    await page.reload();
+
+    await expect(page.locator('h2').filter({ hasText: /Payment Details/i })).toBeVisible();
+
+    await page.getByLabel('Recipient email').fill('recipient@example.com');
+    await page.getByLabel('Amount').fill('10');
+    await page.getByLabel('Memo').fill('Launch party');
+    await page.getByRole('button', { name: /review payment/i }).click();
+
+    await expect(page.locator('h2').filter({ hasText: /Confirm & Send/i })).toBeVisible();
+    await page.getByRole('button', { name: /confirm & send/i }).click();
+
+    await expect(page.getByRole('status')).toContainText('Payment sent!');
+    await expect(page.getByTestId('claim-link')).toHaveAttribute('href', /\/claim\/mock-token-123$/);
+  });
+});

frontend/lib/config.ts

@@ -1,10 +1,10 @@
 /** SDK base URL. Falls back to the MSW mock server in development. */
 export const SDK_URL =
-  process.env.NEXT_PUBLIC_SDK_URL ??
-  (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3000');
+  process.env[`NEXT_PUBLIC_SDK_URL`] ??
+  (process.env[`NODE_ENV`] === 'production' ? '' : 'http://localhost:3000');
 
 /**
  * Public API key sent as `x-api-key` on SDK requests.
  * Leave empty in development — MSW intercepts without auth.
  */
-export const API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? '';
+export const API_KEY = process.env[`NEXT_PUBLIC_API_KEY`] ?? '';

frontend/mocks/handlers/claims.ts

@@ -1,6 +1,17 @@
 import { http, HttpResponse } from 'msw';
 
 export const claimsHandlers = [
+  http.post('/send', () =>
+    HttpResponse.json(
+      {
+        intentId: 'mock-intent-123',
+        claimToken: 'mock-token-123',
+        claimUrl: '/claim/mock-token-123',
+        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+      },
+      { status: 201 },
+    ),
+  ),
   http.post('/claims/redeem', () =>
     HttpResponse.json({
       txHash: 'mock-tx-hash-stub',

frontend/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  turbopack: {
+    root: __dirname,
+  },
 };
 
 module.exports = nextConfig;