/* global React, ReactDOM */
const { useState } = React;
const Icon = window.OBIcon;
const { Shell } = window.OBShell;
const { Dashboard } = window.OBDashboard;
const { DepositPage } = window.OBDeposit;
const { SendPayment } = window.OBSendPayment;
const { RecipientsScreen } = window.OBRecipients;
const { AddRecipientScreen } = window.OBAddRecipient;
const { TransactionsScreen, TransactionDetailScreen } = window.OBTransactions;
const { SettingsScreen, DeveloperSection } = window.OBSettings;
const { CardsScreen } = window.OBCards;
const {
ApplyForAccessScreen, SignInScreen, SignInPasswordScreen, ForgotPasswordScreen,
TotpVerifyScreen, TotpSetupScreen, SetPasswordScreen,
} = window.OBAuth;
const { Page, Toast, Sheet, isDemoMode, withDemoUtm, TALLY_URL, CONSUMER_APP_LINKS, useIsDesktop } = window.OBPrimitives;
const { RECIPIENTS_FULL } = window.OBData;
// ---------- Demo entry gate (demo mode only) ----------
// The only screen a demo visitor sees before the app itself. Not a real auth step — it never
// asks for anything, just routes personal-use visitors to the consumer app instead of the
// business demo. Skipped entirely outside demo mode.
const DEMO_ENTRY_FEATURES = [
"Hold a global USD balance",
"Get paid and payout in 5+ currencies",
"Corporate cards (coming soon)",
];
// Onboard wordmark as inline SVG (from the design reference) — single-colour via currentColor,
// so callers set the colour (white on the photo hero, brand purple on light backgrounds).
const OnboardLogo = (p) => (
);
// Same check-in-a-lime-circle mark for every row (not a different icon per feature) — matches
// the design reference exactly.
function DemoCheckIcon(p) {
return (
);
}
// The exact brand accent graphic from the design reference — the viewBox (0 0 720 440) clips
// the blob paths to just the arrow/chevron portion that shows, same as the Figma export.
function DemoEntryAccent() {
return (
);
}
const AppleStoreIcon = (p) => (
);
const GooglePlayIcon = (p) => (
);
function DemoEntryContent({ onEnterBusiness }) {
return (
<>
Business payments, without the friction
Get a quick look at what your business gets with Onboard — no signup needed.
{DEMO_ENTRY_FEATURES.map((label) => (
{label}
))}
Explore for my business
or
Not a business? Get the personal Onboard app
);
}
// Desktop: photo is full-bleed across the whole viewport, card floats on top over it — matches
// the design reference exactly (not a two-column split). Mobile: no photo (keeps payload light,
// avoids fighting for vertical space), single centered column on the plain gray canvas.
function DemoEntryScreen({ onEnterBusiness }) {
const isDesktop = useIsDesktop();
if (isDesktop) {
return (
);
}
return (
);
}
// Auth screens render outside the app Shell (no sidebar/topbar yet), so mock controls
// get a small floating gear instead of the one built into TopBar/TopBarMobile.
function AuthMockWrap({ mockControls, children }) {
const [open, setOpen] = useState(false);
return (
<>
setOpen(true)} aria-label="Mock controls">
{children}
setOpen(false)} title="Mock controls">{mockControls}
);
}
function MockControls({
dataState, onDataState, accountStatus, onAccountStatus,
usdAccountStatus, onUsdAccountStatus, ngnIssuance, onNgnIssuance,
stablecoinIssuance, onStablecoinIssuance, fiatConvert, onFiatConvert,
payMode, onPayMode, paymentApproval, onPaymentApproval, paymentApprovalMethod, onPaymentApprovalMethod,
complianceHold, onComplianceHold, route, nameLookupMock, onNameLookupMock,
apiAccess, onApiAccess, cardsAccess, onCardsAccess,
flow, onFlow, signinAccountStatus, onSigninAccountStatus, totpState, onTotpState,
}) {
const inSignin = flow.startsWith("signin") || flow === "forgot-password";
return (
<>
Flow
onFlow("signin")}>Sign-in
onFlow("app")}>App
onFlow("apply-for-access")}>Apply for access
onFlow("signin-set-password")} style={{ opacity: .55 }} title="Password reset landing page — reached via email link in real app">Set pw (ref)
{inSignin && (
<>
Password result
onSigninAccountStatus("verified_active")}>Correct
onSigninAccountStatus("wrong_password")}>Wrong
After password
onTotpState("setup")}>Setup 2FA
onTotpState("verify")}>Verify 2FA
)}
Data state
onDataState("full")}>Populated
onDataState("empty")}>Empty
Account status
onAccountStatus("active")}>Active
onAccountStatus("suspended")}>Suspended
USD account status
onUsdAccountStatus("not_applied")}>Not applied
onUsdAccountStatus("incomplete")}>Incomplete
onUsdAccountStatus("under_review")}>Under review
onUsdAccountStatus("approved")}>Approved
onUsdAccountStatus("declined")}>Declined
NGN account details
onNgnIssuance("not_generated")}>Not generated
onNgnIssuance("ready")}>Ready
Stablecoin addresses
onStablecoinIssuance("not_generated")}>Not generated
onStablecoinIssuance("ready")}>Ready
EUR / GBP account
onFiatConvert("not_generated")}>Not created
onFiatConvert("ready")}>Ready
onFiatConvert("error")}>Alloc. error
Send payment order
onPayMode("recipient")}>Recipient first
onPayMode("amount")}>Amount first
2FA on payments
onPaymentApproval("required")}>Required
onPaymentApproval("off")}>Off
2FA method
onPaymentApprovalMethod("totp")}>Authenticator
onPaymentApprovalMethod("email")}>Email OTP
Compliance hold
onComplianceHold(false)}>Off
onComplianceHold(true)}>Txn on hold
{route === "add-recipient" && (
Name lookup
onNameLookupMock("default")}>Default
onNameLookupMock("on")}>Force on
onNameLookupMock("off")}>Force off
)}
API access
onApiAccess("granted")}>Granted
onApiAccess("pending")}>Pending
onApiAccess("none")}>Not requested
Cards
onCardsAccess("not_applied")}>Not applied
onCardsAccess("active")}>Active
);
}
// Defensive fallback for any unrouted screen. No nav item currently reaches it.
function PlaceholderScreen({ title }) {
return (
{title}
Not part of the prototype
This screen hasn't been built in the adaptive prototype.
);
}
function App() {
// Top-level flow: signin | signin-password | forgot-password | signin-totp-setup |
// signin-totp-verify | signin-set-password | apply-for-access | app.
// Sign-up is off-app via Tally, so it's not part of this state machine.
const [flow, setFlow] = useState("app"); // start in app for review
// Demo mode only: gates everything behind a Personal/Business choice first. Non-demo
// builds skip it entirely (starts true) since it's not part of the real product flow.
const [demoEntryDone, setDemoEntryDone] = useState(() => !isDemoMode());
const [authEmail, setAuthEmail] = useState("finance@acmetrading.com");
const [signinAccountStatus, setSigninAccountStatus] = useState("verified_active");
const [totpState, setTotpState] = useState("verify"); // "setup" = first sign-in, "verify" = returning
const [route, setRoute] = useState("dashboard");
const [dataState, setDataState] = useState("full");
const [accountStatus, setAccountStatus] = useState("active");
const [usdAccountStatus, setUsdAccountStatus] = useState("approved");
const [ngnIssuance, setNgnIssuance] = useState("ready");
const [stablecoinIssuance, setStablecoinIssuance] = useState("ready");
const [fiatConvert, setFiatConvert] = useState("ready");
const [payMode, setPayMode] = useState("recipient");
const [paymentApproval, setPaymentApproval] = useState("required");
const [paymentApprovalMethod, setPaymentApprovalMethod] = useState("totp");
const [complianceHold, setComplianceHold] = useState(false);
const [nameLookupMock, setNameLookupMock] = useState("default");
const [apiAccess, setApiAccess] = useState("granted");
const [cardsAccess, setCardsAccess] = useState("active");
const [openTx, setOpenTx] = useState(null);
const [toast, setToast] = useState(null);
const [recipients, setRecipients] = useState(() => [...RECIPIENTS_FULL]);
const mockControls = (
setDemoEntryDone(true)} />;
}
// ---------- AUTH FLOWS (pre-app — no Shell yet) ----------
if (flow === "apply-for-access") {
return (
setFlow("signin")} />
);
}
if (flow === "signin") {
return (
{ setAuthEmail(email); setFlow("signin-password"); }}
onApplyForAccess={() => setFlow("apply-for-access")} />
);
}
if (flow === "signin-password") {
return (
{
if (signinAccountStatus !== "wrong_password") {
setFlow(totpState === "setup" ? "signin-totp-setup" : "signin-totp-verify");
}
}}
onBack={() => setFlow("signin")}
onForgotPassword={() => setFlow("forgot-password")}
onApplyForAccess={() => setFlow("apply-for-access")} />
);
}
if (flow === "forgot-password") {
return (
setFlow("signin-password")} />
);
}
if (flow === "signin-totp-verify") {
return (
setFlow("app")} onBack={() => setFlow("signin")} />
);
}
if (flow === "signin-totp-setup") {
return (
setFlow("app")} />
);
}
// Password reset — reached via email link in the real app; accessible here for design review
if (flow === "signin-set-password") {
return (
setFlow("signin-totp-setup")} />
);
}
// ---------- APP ----------
let screen;
if (route === "dashboard") {
screen = (
setRoute("add-money")}
onSendPayment={() => setRoute("payments")}
onOpenTx={() => {}}
onViewAll={() => setRoute("activity")} />
);
} else if (route === "add-money") {
screen = (
setRoute("dashboard")}
onToast={setToast}
usdAccountStatus={usdAccountStatus}
ngnIssuance={ngnIssuance}
stablecoinIssuance={stablecoinIssuance}
accountSuspended={accountStatus === "suspended"}
fiatConvert={fiatConvert} />
);
} else if (route === "payments") {
screen = (
setRoute("add-recipient")}
onToast={setToast} />
);
} else if (route === "recipients") {
screen = (
setRecipients((prev) => prev.filter((r) => r.id !== id))}
dataState={dataState}
onAddNew={() => setRoute("add-recipient")}
onPay={() => setRoute("payments")}
onToast={setToast} />
);
} else if (route === "add-recipient") {
screen = (
setRoute("recipients")}
onSaved={(newRecipient) => {
setRecipients((prev) => [{ ...newRecipient, id: `r${Date.now()}`, last: "Never" }, ...prev]);
setRoute("recipients");
}}
onToast={setToast} />
);
} else if (route === "activity" && openTx) {
screen = setOpenTx(null)} onToast={setToast} />;
} else if (route === "activity") {
screen = (
Developer API keys, webhooks, and integration settings.
);
} else {
screen =
{screen}
{toast && setToast(null)} />}
);
}
ReactDOM.createRoot(document.getElementById("root")).render(