#403 Custom Invoice Branding with Logo Upload FIXED

[felladaniel36-hash]

🔍 Findings & ✅ Fix Features

Findings — what was wrong with the repo (at HEAD 0dbc453)

1. Corrupted merge commit (606da98) — "Add wallet persistence, RPC error boundary, skeleton loading, status filters (Add wallet persistence, RPC error boundary, skeleton loading, and sta… #530)" inserted new code without removing the old versions, leaving 8 source files with duplicated/interleaved functions and broken JSX:

   • src/app/dashboard/page.tsx, src/app/invoice/[id]/page.tsx, src/app/layout.tsx
   • src/components/DashboardClient.tsx, src/components/Skeleton.tsx, src/components/WalletConnect.tsx
   • src/lib/dashboardFilters.ts, src/app/invoice/new/page.tsx
     → npx tsc --noEmit failed outright; the repo could not compile, so no feature could ship.

2. Dependency API breaks vs. the pinned SDKs (TypeScript errors):

   • stellar-sdk v16: code used removed names — SorobanRpc (now rpc), FederationServer (now Federation.Server.resolve()), top-level Server (now Horizon.Server), and memo_id on federation records (now memo/memo_type).
   • otplib v13: code used the removed authenticator; must use generateSecret(), generateURI(), verifySync().

3. 30 failing tests across 18 files — invalid 55-char fixture addresses, JSON.stringify crashing on bigint, jsdom/CLDR differences in Node 20 (es-ES grouping), stale stellar-sdk mocks, missing async on it callbacks, broken inline component mocks.

4. 4 ESLint errors at HEAD (unescaped quotes/apostrophes in JSX) — CI's npm run lint was red.

5. Missing dependency — the issue requires a react-hook-form + zod branding form, but react-hook-form / @hookform/resolvers weren't even installed.

Fix features — what was delivered

🎨 The branding feature (the GitHub issue)

Feature	Where
Settings screen at /settings/branding — react-hook-form + zod	src/app/settings/branding/page.tsx, src/components/settings/BrandingForm.tsx
Logo upload — PNG/JPEG/WebP, 2 MB cap; client rejects bad type/size with specific messages BEFORE any server call (LOGO_TYPE_ERROR / LOGO_SIZE_ERROR); server re-enforces (415/413)	src/lib/brandSettings.ts, src/app/api/settings/branding/logo/route.ts
CDN-friendly asset URLs — Vercel Blob (BLOB_READ_WRITE_TOKEN) in prod; local fallback route serves bytes with Cache-Control: public, max-age=31536000, immutable; intrinsic PNG/JPEG/WebP dimension parsing with a 300-dpi low-res warning	src/lib/brandAssetStorage.ts, logo/[...key]/route.ts
Accent color — color picker + hex input, real-time live preview, inline warning when WCAG AA (4.5:1 vs white) fails, and zod blocks saving such colors	src/lib/contrast.ts, BrandingForm.tsx
Tagline — max 120 chars with counter	BrandingForm.tsx
Per-account persistence (scoped by Stellar address, in-memory store pattern like serverAddressBook); GET/PUT/DELETE API	src/app/api/settings/branding/route.ts, src/lib/brandSettingsStore.ts
Invoice rendering — BrandHeader (logo + accent + tagline) on live /invoice/[id], accent applied to pay buttons	src/components/invoice/InvoiceView.tsx, src/app/invoice/[id]/page.tsx
PDF export — logo embedded (data-URL, PNG/JPEG safe), accent title + table header, tagline; falls back to creator-fetch if prop absent	src/components/InvoiceExportButton.tsx
Remove branding → platform defaults everywhere (nulls → #4f46e5 default, no header rendered)	all of the above

🩹 The repairs (to make CI green)

• Rewrote the 8 corrupted files into single clean versions (kept all intended features: wallet persistence, skeletons, status filters, cooldown badge, etc.).
• Migrated all code to stellar-sdk v16 + otplib v13 APIs; fixed BigInt division, Excel export types, SSE stream params.
• Fixed all 30 failing tests; 1456/1456 now pass (118 files); lint exit 0; tsc --noEmit exit 0; npm run build exit 0 with /settings/branding + Branding APIs listed in the route table.
• Added 4 new test files covering contrast math, schema validation, the branding API (type/size rejection, per-account isolation, delete→defaults), and the form (pre-server rejection, live preview, WCAG block, save, remove).
• Documented BLOB_READ_WRITE_TOKEN in .env.example; added react-hook-form, @hookform/resolvers, @vercel/blob, @types/qrcode to package.json.

Net change: 40 modified + 18 created files; all CI checks (lint, test, build) green.

CLOSE #403

[vercel]

@felladaniel36-hash is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@felladaniel36-hash Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits