+
+
+ {/* id confirmed — subtle inline, not a banner */}
+ {userState !== 'new' && (
+
+ ID confirmed
+
+ )}
+
+ {/* new user: onboarding */}
+ {userState === 'new' && (
+
+
+
+
+
+
Send money worldwide
+
+ Bank transfers, QR payments, and more. Confirm your ID to get started.
+
+
+
+ Get started
+
+
+ )}
+
+ {/* eea deadline notice */}
+ {userState === 'eea' && (
+
+ )}
+
+ {/* active payment methods */}
+ {userState !== 'new' && (
+ <>
+ {/* europe (bridge) */}
+
+
Europe
+ {europePayments.map((p, i) => {
+ const needsAction = userState === 'eea' && p.name === 'SEPA bank transfer'
+ return (
+
: undefined}
+ title={p.name}
+ description={needsAction ? 'Needs a quick update to stay active' : p.desc}
+ descriptionClassName="text-xs"
+ onClick={noop}
+ rightContent={
+ needsAction ? (
+
+ ) : (
+
+ )
+ }
+ />
+ )
+ })}
+
+
+ {/* us & mexico (bridge) */}
+
+
US & Mexico
+ {usPayments.map((p, i) => {
+ const needsAction = userState === 'verified-rfi' && p.name === 'US bank transfer'
+ return (
+
: undefined}
+ title={p.name}
+ description={needsAction ? 'One document needed to start sending' : p.desc}
+ descriptionClassName="text-xs"
+ onClick={noop}
+ rightContent={
+ needsAction ? (
+
+ ) : (
+
+ )
+ }
+ />
+ )
+ })}
+
+
+ {/* argentina (manteca AR) — separate enrollment */}
+
+
Argentina
+ {argPayments.map((p, i) => (
+
}
+ />
+ ))}
+
+
+ {/* brazil (manteca BR) — separate enrollment */}
+
+
Brazil
+ {brPayments.map((p, i) => (
+
}
+ />
+ ))}
+
+
+ )}
+
+ {/* new user: preview what they can unlock */}
+ {userState === 'new' && (
+
+
Available after setup
+ {[
+ { name: 'Europe', desc: 'SEPA and UK bank transfers to 30+ countries' },
+ { name: 'US & Mexico', desc: 'ACH, wire transfers, Mexico SPEI' },
+ { name: 'Argentina', desc: 'MercadoPago QR + bank transfers' },
+ { name: 'Brazil', desc: 'PIX QR + bank transfers' },
+ ].map((r, i, arr) => (
+
}
+ title={r.name}
+ description={r.desc}
+ descriptionClassName="text-xs"
+ onClick={() => {}}
+ isDisabled
+ rightContent={
}
+ />
+ ))}
+
+ )}
+
(null)
+ const [activeTab, setActiveTab] = useState<'proposed' | 'states' | 'modals' | 'audit'>('proposed')
+ const noop = () => {}
+
+ return (
+
+
+
+ {/* tab nav */}
+
+ {(['proposed', 'states', 'modals', 'audit'] as const).map((tab) => (
+ setActiveTab(tab)}
+ className={`whitespace-nowrap rounded-sm border px-3 py-1.5 text-sm font-bold ${
+ activeTab === tab ? 'border-n-1 bg-black text-white' : 'border-n-1 text-grey-1'
+ }`}
+ >
+ {tab === 'proposed'
+ ? 'Proposed'
+ : tab === 'states'
+ ? 'Current States'
+ : tab === 'modals'
+ ? 'Modals'
+ : 'Copy Audit'}
+
+ ))}
+
+
+ {/* ─── TAB: proposed page ─────────────────────────── */}
+ {activeTab === 'proposed' && (
+
+
+
+
+
Brand new user
+
hasn't confirmed ID yet
+
+
+
+
+
+
One payment method needs a document
+
everything works except US bank transfers — needs proof of address
+
+
+
+
+
+
European user with deadline
+
SEPA needs a small update by June 29 to stay active
+
+
+
+
+
+
Everything working
+
all set up, no actions needed
+
+
+
+
+ )}
+
+ {/* ─── TAB: current drawer states ─────────────────── */}
+ {activeTab === 'states' && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* ─── TAB: modals ────────────────────────────────── */}
+ {activeTab === 'modals' && (
+
+
+
InitiateKycModal
+
+ {[
+ { key: 'default', label: 'Fresh KYC' },
+ { key: 'provider_rejection', label: 'Needs docs' },
+ { key: 'blocked', label: 'Blocked' },
+ { key: 'cross_region', label: 'Cross region' },
+ { key: 'error', label: 'Error' },
+ ].map(({ key, label }) => (
+ setOpenModal(`initiate_${key}`)}
+ >
+ {label}
+
+ ))}
+
+
+
+
+
+
+
Guest modal
+ setOpenModal('guest')}>
+ Open
+
+
+
+ {/* render modals */}
+
setOpenModal(null)} onVerify={noop} variant="default" />
+ setOpenModal(null)} onVerify={noop} variant="provider_rejection" providerMessage="Please upload a clearer photo of your ID to continue." />
+ setOpenModal(null)} onVerify={noop} variant="blocked" />
+ setOpenModal(null)} onVerify={noop} variant="cross_region" regionName="Brazil" />
+ setOpenModal(null)} onVerify={noop} error="Bridge API returned an unexpected error." />
+ setOpenModal(null)} description="You need to verify your identity to use bank transfers." secondaryCtaLabel="Continue as guest" />
+
+ )}
+
+ {/* ─── TAB: copy audit ────────────────────────────── */}
+ {activeTab === 'audit' && (
+
+
+
Copy issues
+
+ The app tells users they're verified, then asks them to "complete verification" for a specific payment method.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Principles
+
+
+
+
Good example from today's code
+
+
+ "Your identity is already verified. To send money in this region, we need a valid ID from there."
+
+
+ cross_region variant — acknowledges the user, explains what's needed, ties it to their goal
+
+
+
{
+ setActiveTab('modals')
+ setTimeout(() => setOpenModal('initiate_cross_region'), 100)
+ }}
+ >
+ View this modal live
+
+
+
+ )}
+
- {/* id confirmed — subtle inline, not a banner */}
- {userState !== 'new' && (
-
- ID confirmed
-
- )}
-
{/* new user: onboarding */}
{userState === 'new' && (
From c0997d01525452b36986fbb9da0a67722eeb579e Mon Sep 17 00:00:00 2001
From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com>
Date: Wed, 27 May 2026 11:32:14 +0530
Subject: [PATCH 3/3] remove wrapping cards from proposed page sections
---
src/app/dev/kyc-ui/page.tsx | 16 ++++------------
1 file changed, 4 insertions(+), 12 deletions(-)
diff --git a/src/app/dev/kyc-ui/page.tsx b/src/app/dev/kyc-ui/page.tsx
index 9a11c55e4..6d73535ac 100644
--- a/src/app/dev/kyc-ui/page.tsx
+++ b/src/app/dev/kyc-ui/page.tsx
@@ -350,33 +350,25 @@ export default function KycUiAuditPage() {
Brand new user
hasn't confirmed ID yet
-
-
+
One payment method needs a document
everything works except US bank transfers — needs proof of address
-
-
+
European user with deadline
SEPA needs a small update by June 29 to stay active
-
-
+
Everything working
all set up, no actions needed
-
-
+
)}