// Optimal Trade — Screens 1: Login, Dashboard, Wallet, Convert, TopUp const { useState, useEffect, useRef } = React; /* ============================== LOGIN / DEMO SELECT ============================== */ function LoginScreen({ app }) { return (

Move money,
move goods.

Pay international suppliers in your local currency. Convert, contract and track — in one app.

Choose a demo account
{DEMO_ACCOUNTS.map(a => ( ))}
Demo prototype · all data is mocked
); } /* ============================== DASHBOARD ======================================== */ function Dashboard({ app }) { const a = app.account, w = app.world; const quick = [ { icon: "arrow-right-left", label: "Convert", go: () => app.navigate("convert") }, { icon: "file-text", label: "Pay invoice", go: () => app.navigate("contract") }, { icon: "store", label: "Suppliers", go: () => app.setTab("suppliers") }, { icon: "calculator", label: "Logistics", go: () => app.navigate("logistics") }, ]; return (
{/* header */}
Welcome back {a.company}
{/* balance card */}
Wallet · {a.ccy}
{money(a.sym, w.balance)}
{/* FX rates */}
Live rates 2 min ago
{RATE_PAIRS.map(r => (
{r.pair}
{fmt(r.rate, 2)}
= 0 ? "var(--ot-success)" : "var(--ot-error)" }}> {r.trend >= 0 ? "▲" : "▼"} {Math.abs(r.trend)}%
))}
{/* quick actions */}
{quick.map(q => ( ))}
{/* active contracts */}
Active contracts app.setTab("activity")} style={{ fontSize: 12.5, color: "var(--ot-orange-deep)", fontWeight: 700, cursor: "pointer" }}>See all
{w.contracts.map((c, i) => ( } title={c.supplier} sub={`${c.id} · ${c.goods}`} right={
{money(c.sym || "$", c.amount)}
} onClick={() => app.navigate(c.status === "pending" ? "payconfirm" : "tracking", { contract: c })} /> ))}
); } const glassBtn = { flex: 1, background: "rgba(255,255,255,.2)", border: "none", color: "#fff", borderRadius: "var(--ot-r-sm)", padding: "11px", fontFamily: "var(--ot-font-body)", fontWeight: 600, fontSize: 13.5, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, cursor: "pointer" }; function StatusPill({ status }) { const map = { paid: { kind: "paid", icon: "check", label: "Paid" }, pending: { kind: "pending", dot: true, label: "Pending" }, transit: { kind: "transit", icon: "ship", label: "In transit" }, delivered: { kind: "paid", icon: "check-check", label: "Delivered" }, declined: { kind: "error", icon: "x", label: "Declined" }, }; const m = map[status] || map.pending; return {m.label}; } /* ============================== WALLET ========================================== */ function Wallet({ app }) { const a = app.account, w = app.world; const otherCcy = [ { ccy: "USD", sym: "$", flag: "us", bal: w.usdBalance }, { ccy: "CNY", sym: "\u00A5", flag: "cn", bal: w.cnyBalance }, ]; return (
} />
Local balance · {a.ccy}
{money(a.sym, w.balance)}
Foreign currency pockets
{otherCcy.map(c => ( } title={`${c.ccy} pocket`} sub="For supplier payments" right={{money(c.sym, c.bal, c.ccy === "USD" ? 2 : 0)}} /> ))}
Add money
{TOPUP_METHODS.map(m => ( app.openTopup(m.id)} /> ))}
); } /* ============================== TOP UP (sheet) =================================== */ function TopupSheet({ app, initial }) { const a = app.account; const [method, setMethod] = useState(initial || "momo"); const [amount, setAmount] = useState(2000000); const [stage, setStage] = useState("form"); // form | done const presets = [500000, 1000000, 2000000, 5000000]; const confirm = () => { app.deposit(amount, TOPUP_METHODS.find(m => m.id === method).label); setStage("done"); }; return (
e.stopPropagation()}>
{stage === "form" ? <>

Top up wallet

Add {a.ccy} via your preferred method.

{TOPUP_METHODS.map(m => ( ))}
{a.sym} setAmount(+e.target.value.replace(/[^0-9]/g, "") || 0)} />
{presets.map(p => )}
: (

Top up complete

{money(a.sym, amount)} added to your {a.ccy} wallet.

)}
); } function SuccessMark() { return ; } /* ============================== CONVERT ========================================= */ function Convert({ app }) { const a = app.account, w = app.world; const [target, setTarget] = useState(CONVERT_TARGETS[0]); const [amount, setAmount] = useState(2000000); const [stage, setStage] = useState("form"); // form | done const [pickerOpen, setPickerOpen] = useState(false); const feeAmt = amount * (target.fee / 100); const net = amount - feeAmt; const out = net / target.rate; const confirm = () => { app.convert(amount, target, out); setStage("done"); }; if (stage === "done") return (

Converted

You exchanged

{money(a.sym, amount)} → {money(target.sym, out, 2)}
); return (
{/* from */}
You pay · from {a.ccy} wallet
setAmount(+e.target.value.replace(/[^0-9]/g, "") || 0)} style={{ border: "none", outline: "none", fontSize: 28, color: "var(--ot-navy)", width: "100%", background: "none" }} /> {a.ccy}
Balance {money(a.sym, w.balance)}
{/* swap chip */}
{/* to */}
You get · {target.ccy} pocket
{/* rate lock */}
Rate locked for 60s
{pickerOpen && (
setPickerOpen(false)}>
e.stopPropagation()}>

Convert to

{CONVERT_TARGETS.map(t => ( } title={t.ccy} sub={`1 ${t.ccy} = ${fmt(t.rate, 2)} ${a.ccy} · fee ${t.fee}%`} onClick={() => { setTarget(t); setPickerOpen(false); }} right={target.ccy === t.ccy ? : null} /> ))}
)}
); } function KV({ k, v, last }) { return
{k} {v}
; } Object.assign(window, { LoginScreen, Dashboard, Wallet, TopupSheet, Convert, StatusPill, SuccessMark, KV, glassBtn });