@theoo/react 0.4.1 → 0.4.3

package/dist/money.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { formatUnits, parseUnits } from "@theoo/sdk";
 import { useTheoo } from "./context.js";
 import { styles } from "./components.js";
-import { useBalances, useEspees, useMoneyOrders, useSwap } from "./hooks.js";
+import { useBalances, useEspees, useEspeesSell, useMoneyOrders, useSwap } from "./hooks.js";
 const s = styles;
 const t = styles.token;
 const card = {
@@ -27,13 +27,13 @@ function find(balances, wanted) {
     return balances.find((b) => b.token.symbol.toLowerCase() === w || b.token.address.toLowerCase() === w);
 }
 const STATE_WORDS = {
-    awaiting_signature: "Waiting for your passkey",
-    processing: "On its way",
+    awaiting_signature: "Awaiting confirmation",
+    processing: "Processing",
     completed: "Done",
     failed: "Failed",
     expired: "Expired",
     open: "Open",
-    awaiting_delivery: "Waiting for the desk",
+    awaiting_delivery: "Pending",
     delivered: "Delivered",
     disputed: "Disputed",
     refunded: "Refunded",
@@ -47,10 +47,10 @@ const STATE_WORDS = {
  * the passkey signs is one batch that approves the exact amount, swaps, and
  * resets the approval to zero. Nothing is left behind for anyone to spend.
  */
-export function TheooMoney({ chain, flows = ["swap"], defaultSell, defaultBuy, onDone, explorerTx, className, cashoutSender }) {
+export function TheooMoney({ chain, flows = ["swap"], defaultSell, defaultBuy, onDone, explorerTx, className }) {
     const [tab, setTab] = useState(flows[0] ?? "swap");
-    const names = { swap: "Swap", espees: "Buy ESPEES", buy: "Add money", cashout: "Cash out" };
-    return (_jsxs("div", { className: className, style: card, "data-theoo-money": "", children: [flows.length > 1 ? (_jsx("div", { role: "tablist", style: { display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "none", margin: "0 -4px", padding: "0 4px" }, children: flows.map((f) => (_jsx("button", { type: "button", role: "tab", "aria-selected": tab === f, onClick: () => setTab(f), style: { ...(tab === f ? s.button : s.secondary), padding: "6px 12px", fontSize: 13.5, whiteSpace: "nowrap", flex: "none", width: "auto" }, children: names[f] }, f))) })) : null, tab === "espees" ? (_jsx(EspeesPanel, { chain: chain, onDone: onDone, explorerTx: explorerTx })) : tab === "buy" ? (_jsx(BuyPanel, { chain: chain })) : tab === "cashout" ? (_jsx(CashoutPanel, { chain: chain, sender: cashoutSender, onDone: onDone })) : (_jsx(SwapPanel, { chain: chain, defaultSell: defaultSell, defaultBuy: defaultBuy, onDone: onDone, explorerTx: explorerTx }))] }));
+    const names = { swap: "Swap", espees: "Buy ESPEES", sell: "Sell ESPEES", buy: "Add money", cashout: "Cash out" };
+    return (_jsxs("div", { className: className, style: card, "data-theoo-money": "", children: [flows.length > 1 ? (_jsx("div", { role: "tablist", style: { display: "flex", gap: 6, overflowX: "auto", scrollbarWidth: "none", margin: "0 -4px", padding: "0 4px" }, children: flows.map((f) => (_jsx("button", { type: "button", role: "tab", "aria-selected": tab === f, onClick: () => setTab(f), style: { ...(tab === f ? s.button : s.secondary), padding: "6px 12px", fontSize: 13.5, whiteSpace: "nowrap", flex: "none", width: "auto" }, children: names[f] }, f))) })) : null, tab === "espees" ? (_jsx(EspeesPanel, { chain: chain, onDone: onDone, explorerTx: explorerTx })) : tab === "sell" ? (_jsx(SellPanel, { chain: chain })) : tab === "buy" ? (_jsx(BachsPanel, { mode: "buy" })) : tab === "cashout" ? (_jsx(BachsPanel, { mode: "cashout" })) : (_jsx(SwapPanel, { chain: chain, defaultSell: defaultSell, defaultBuy: defaultBuy, onDone: onDone, explorerTx: explorerTx }))] }));
 }
 function SwapPanel({ chain, defaultSell, defaultBuy, onDone, explorerTx }) {
     const { balances, error: balanceError, reload } = useBalances(chain);
@@ -82,17 +82,15 @@ function SwapPanel({ chain, defaultSell, defaultBuy, onDone, explorerTx }) {
         try {
             const units = parseUnits(amount, sell.token.decimals);
             if (BigInt(units) === 0n)
-                return { problem: "Enter an amount above zero." };
+                return { problem: "Enter an amount." };
             if (BigInt(units) > BigInt(sell.amount))
-                return { problem: `You have ${sell.display} ${sell.token.symbol}.` };
+                return { problem: "Not enough balance." };
             return { units };
         }
         catch (e) {
             const tooPrecise = e instanceof Error && /decimal places/.test(e.message);
             return {
-                problem: tooPrecise
-                    ? `${sell.token.symbol} has at most ${sell.token.decimals} decimal places.`
-                    : "Enter an amount like 12.5.",
+                problem: tooPrecise ? "Too many decimals." : "Invalid amount.",
             };
         }
     }, [amount, sell]);
@@ -123,17 +121,23 @@ function SwapPanel({ chain, defaultSell, defaultBuy, onDone, explorerTx }) {
     const q = swap.quote;
     const done = swap.status;
     const txLink = done?.txHash && explorerTx ? explorerTx(done.txHash, done.chain) : null;
-    return (_jsxs("div", { style: { display: "grid", gap: 12 }, children: [_jsxs("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: "4px 10px" }, children: [_jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Swap" }), balances ? _jsx("span", { style: s.tiny, children: "Gas is on us \u00B7 you sign with your passkey" }) : null] }), balanceError ? (_jsx("div", { style: s.error, role: "alert", children: balanceError.message })) : null, !balances && !balanceError ? _jsx("p", { style: s.muted, children: "Loading balances\u2026" }) : null, balances && list.length < 2 ? _jsx("p", { style: s.muted, children: "Swaps aren't available on this chain yet." }) : null, balances && list.length >= 2 ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsx("label", { htmlFor: "theoo-money-amount", style: label, children: "You pay" }), sell ? (_jsxs("span", { style: s.tiny, children: ["Balance ", sell.display, " ", sell.token.symbol, " ", _jsx("button", { type: "button", style: link, onClick: () => setAmount(formatUnits(sell.amount, sell.token.decimals, sell.token.decimals)), children: "Max" })] })) : null] }), _jsxs("div", { style: row, children: [_jsx("input", { id: "theoo-money-amount", inputMode: "decimal", autoComplete: "off", placeholder: "0.00", value: amount, onChange: (e) => setAmount(e.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 }, "aria-invalid": parsed.problem ? true : undefined }), _jsx("select", { id: "theoo-money-sell", "aria-label": "Token to pay with", value: sellAddr, onChange: (e) => setSellAddr(e.target.value), style: select, children: list.map((b) => (_jsx("option", { value: b.token.address, disabled: b.token.address === buyAddr, children: b.token.symbol }, b.token.address))) })] }), parsed.problem ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: parsed.problem }) : null] }), _jsx("div", { style: { display: "flex", justifyContent: "center" }, children: _jsx("button", { type: "button", onClick: flip, "aria-label": "Swap direction", style: { ...s.secondary, padding: "4px 12px", fontSize: 15 }, children: "\u21C5" }) }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-money-buy", style: label, children: "You get" }), _jsxs("div", { style: row, children: [_jsx("div", { style: { ...s.input, fontFamily: t.mono, fontSize: 17, color: q ? t.ink : t.ink3 }, "aria-live": "polite", children: q ? q.buy.display : "—" }), _jsx("select", { id: "theoo-money-buy", value: buyAddr, onChange: (e) => setBuyAddr(e.target.value), style: select, children: list.map((b) => (_jsx("option", { value: b.token.address, disabled: b.token.address === sellAddr, children: b.token.symbol }, b.token.address))) })] })] }), q && !swap.expired ? (_jsxs("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.5 }, "data-theoo-quote": "", children: [_jsx("span", { children: q.summary }), q.warning ? _jsx("span", { style: { color: t.alert }, children: q.warning }) : null, _jsxs("span", { style: s.tiny, children: ["The swap can't deliver less than ", q.minBuy.display, " ", q.minBuy.symbol, ": the chain enforces it. Quote good for ", swap.secondsLeft, "s."] })] })) : null, q && swap.expired ? _jsx("p", { style: s.muted, children: "That quote expired. Ask for a fresh one." }) : null, swap.error ? (_jsx("div", { style: s.error, role: "alert", children: swap.error.message })) : null, !q || swap.expired ? (_jsx("button", { type: "button", style: { ...s.button, opacity: !parsed.units || swap.busy ? 0.6 : 1 }, disabled: !parsed.units || swap.busy || !sell || !buy, onClick: () => sell && buy && parsed.units && swap.ask({ sellToken: sell.token.address, buyToken: buy.token.address, sellAmount: parsed.units }), children: swap.busy ? "Checking the best price…" : q ? "Get a fresh quote" : "Get a quote" })) : (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }, children: [_jsx("button", { type: "button", style: { ...s.button, opacity: swap.busy ? 0.6 : 1 }, disabled: swap.busy, onClick: () => void swap.confirm(), children: swap.busy ? "Confirming…" : "Confirm with passkey" }), _jsx("button", { type: "button", style: s.secondary, disabled: swap.busy, onClick: swap.reset, children: "Cancel" })] })), done ? (_jsxs("p", { style: { ...s.muted, color: done.state === "failed" ? t.alert : t.ink2 }, role: "status", children: [done.state === "included" ? "Swapped. " : done.state === "failed" ? `The swap failed on chain${done.error ? `: ${done.error}` : ""}. ` : "Sent; it's on its way. ", txLink ? (_jsx("a", { href: txLink, target: "_blank", rel: "noopener noreferrer", style: { color: t.accent }, children: "View transaction" })) : null] })) : null] })) : null, orders && orders.length ? _jsx(Recent, { orders: orders, explorerTx: explorerTx }) : null] }));
+    return (_jsxs("div", { style: { display: "grid", gap: 12 }, children: [_jsx("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: "4px 10px" }, children: _jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Swap" }) }), balanceError ? (_jsx("div", { style: s.error, role: "alert", children: balanceError.message })) : null, !balances && !balanceError ? _jsx("p", { style: s.muted, children: "Loading\u2026" }) : null, balances && list.length < 2 ? _jsx("p", { style: s.muted, children: "Not available yet." }) : null, balances && list.length >= 2 ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsx("label", { htmlFor: "theoo-money-amount", style: label, children: "You pay" }), sell ? (_jsxs("span", { style: s.tiny, children: ["Balance ", sell.display, " ", sell.token.symbol, " ", _jsx("button", { type: "button", style: link, onClick: () => setAmount(formatUnits(sell.amount, sell.token.decimals, sell.token.decimals)), children: "Max" })] })) : null] }), _jsxs("div", { style: row, children: [_jsx("input", { id: "theoo-money-amount", inputMode: "decimal", autoComplete: "off", placeholder: "0.00", value: amount, onChange: (e) => setAmount(e.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 }, "aria-invalid": parsed.problem ? true : undefined }), _jsx("select", { id: "theoo-money-sell", "aria-label": "Token to pay with", value: sellAddr, onChange: (e) => setSellAddr(e.target.value), style: select, children: list.map((b) => (_jsx("option", { value: b.token.address, disabled: b.token.address === buyAddr, children: b.token.symbol }, b.token.address))) })] }), parsed.problem ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: parsed.problem }) : null] }), _jsx("div", { style: { display: "flex", justifyContent: "center" }, children: _jsx("button", { type: "button", onClick: flip, "aria-label": "Swap direction", style: { ...s.secondary, padding: "4px 12px", fontSize: 15 }, children: "\u21C5" }) }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-money-buy", style: label, children: "You get" }), _jsxs("div", { style: row, children: [_jsx("div", { style: { ...s.input, fontFamily: t.mono, fontSize: 17, color: q ? t.ink : t.ink3 }, "aria-live": "polite", children: q ? q.buy.display : "—" }), _jsx("select", { id: "theoo-money-buy", value: buyAddr, onChange: (e) => setBuyAddr(e.target.value), style: select, children: list.map((b) => (_jsx("option", { value: b.token.address, disabled: b.token.address === sellAddr, children: b.token.symbol }, b.token.address))) })] })] }), q && !swap.expired ? (_jsxs("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.5 }, "data-theoo-quote": "", children: [_jsx("span", { children: q.summary }), q.warning ? _jsx("span", { style: { color: t.alert }, children: q.warning }) : null, _jsxs("span", { style: s.tiny, children: [swap.secondsLeft, "s"] })] })) : null, q && swap.expired ? _jsx("p", { style: s.muted, children: "Quote expired." }) : null, swap.error ? (_jsx("div", { style: s.error, role: "alert", children: swap.error.message })) : null, !q || swap.expired ? (_jsx("button", { type: "button", style: { ...s.button, opacity: !parsed.units || swap.busy ? 0.6 : 1 }, disabled: !parsed.units || swap.busy || !sell || !buy, onClick: () => sell && buy && parsed.units && swap.ask({ sellToken: sell.token.address, buyToken: buy.token.address, sellAmount: parsed.units }), children: swap.busy ? "Getting a quote…" : q ? "Refresh quote" : "Get a quote" })) : (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }, children: [_jsx("button", { type: "button", style: { ...s.button, opacity: swap.busy ? 0.6 : 1 }, disabled: swap.busy, onClick: () => void swap.confirm(), children: swap.busy ? "Confirming…" : "Confirm" }), _jsx("button", { type: "button", style: s.secondary, disabled: swap.busy, onClick: swap.reset, children: "Cancel" })] })), done ? (_jsxs("p", { style: { ...s.muted, color: done.state === "failed" ? t.alert : t.ink2 }, role: "status", children: [done.state === "included" ? "Swapped. " : done.state === "failed" ? "Swap failed. " : "Processing. ", txLink ? (_jsx("a", { href: txLink, target: "_blank", rel: "noopener noreferrer", style: { color: t.accent }, children: "View transaction" })) : null] })) : null] })) : null, orders && orders.length ? _jsx(Recent, { orders: orders, explorerTx: explorerTx }) : null] }));
 }
+/**
+ * A buy, in a few words. Behind them: the payment sits in an escrow on chain,
+ * not with the desk. The desk sends ESPEES by hand; the buyer confirms it
+ * arrived or disputes it, and a dispute goes to the arbiter. If the desk
+ * delivers nothing by the deadline, the escrow refunds the buyer on its own.
+ */
 const ESPEES_WORDS = {
-    awaiting_signature: "Waiting for your passkey.",
-    awaiting_delivery: "Paid into the escrow, not to the desk. The desk sends your ESPEES by hand, usually within a couple of minutes. If nothing arrives in time, your payment comes back on its own.",
-    delivered: "The desk says your ESPEES is sent. Did it arrive?",
-    disputed: "You reported a problem. The arbiter will decide between you and the desk.",
-    completed: "Done: the desk has been paid.",
-    refunded: "Refunded to your account.",
-    failed: "The payment failed on chain; nothing was taken.",
-    expired: "Not signed in time; nothing was taken.",
+    awaiting_signature: "Awaiting confirmation.",
+    awaiting_delivery: "Paid. Your ESPEES is on its way.",
+    delivered: "Sent. Did it arrive?",
+    disputed: "Under review.",
+    completed: "Done.",
+    refunded: "Refunded.",
+    failed: "Failed. Nothing was charged.",
+    expired: "Expired. Nothing was charged.",
 };
 /**
  * ESPEES from the desk. The payment goes into an escrow on chain, the desk
@@ -160,13 +164,13 @@ function EspeesPanel({ chain, onDone, explorerTx }) {
         try {
             const units = parseUnits(amount, chosen.token.decimals);
             if (BigInt(units) === 0n)
-                return { problem: "Enter an amount above zero." };
+                return { problem: "Enter an amount." };
             if (held && BigInt(units) > BigInt(held.amount))
-                return { problem: `You have ${held.display} ${chosen.token.symbol}.` };
+                return { problem: "Not enough balance." };
             return { units };
         }
         catch {
-            return { problem: "Enter an amount like 20." };
+            return { problem: "Invalid amount." };
         }
     }, [amount, chosen, held]);
     const estimate = chosen && parsed.units
@@ -203,82 +207,156 @@ function EspeesPanel({ chain, onDone, explorerTx }) {
         await reloadOrders();
     };
     if (!e.info)
-        return _jsx("p", { style: s.muted, children: "Loading the desk\u2026" });
+        return _jsx("p", { style: s.muted, children: "Loading\u2026" });
     if (!e.info.open)
-        return _jsx("p", { style: s.muted, children: "The ESPEES desk isn't selling on this chain right now." });
+        return _jsx("p", { style: s.muted, children: "Not available right now." });
     const q = e.quote;
     const minutes = Math.round(e.info.deliverWithinSecs / 60);
-    return (_jsxs("div", { style: { display: "grid", gap: 12 }, "data-theoo-espees": "", children: [_jsxs("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: "4px 10px" }, children: [_jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Buy ESPEES" }), _jsxs("span", { style: s.tiny, children: ["Delivered within ", minutes, " minutes, or your money comes back"] })] }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsx("label", { htmlFor: "theoo-espees-amount", style: label, children: "You pay" }), held && chosen ? (_jsxs("span", { style: s.tiny, children: ["Balance ", held.display, " ", chosen.token.symbol] })) : null] }), _jsxs("div", { style: row, children: [_jsx("input", { id: "theoo-espees-amount", inputMode: "decimal", autoComplete: "off", placeholder: "0.00", value: amount, onChange: (ev) => setAmount(ev.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 }, "aria-invalid": parsed.problem ? true : undefined }), _jsx("select", { "aria-label": "Pay ESPEES with", value: token, onChange: (ev) => setToken(ev.target.value), style: select, children: tokens.map((d) => (_jsx("option", { value: d.token.address, children: d.token.symbol }, d.token.address))) })] }), parsed.problem ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: parsed.problem }) : null, chosen ? (_jsxs("p", { style: s.tiny, children: [estimate ? `You get about ${estimate} ESPEES · ` : "", chosen.price, " ESPEES per ", chosen.token.symbol] })) : null] }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-espees-address", style: label, children: "Your Espees wallet address" }), _jsx("input", { id: "theoo-espees-address", autoComplete: "off", value: address, onChange: (ev) => setAddress(ev.target.value), style: s.input }), _jsx("label", { htmlFor: "theoo-espees-again", style: label, children: "The same address, again" }), _jsx("input", { id: "theoo-espees-again", autoComplete: "off", value: again, onChange: (ev) => setAgain(ev.target.value), style: s.input, "aria-invalid": mismatch ? true : undefined }), mismatch ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: "The two addresses don't match." }) : null] }), q && !e.expired ? (_jsxs("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.5 }, "data-theoo-quote": "", children: [_jsx("span", { children: q.summary }), _jsxs("span", { style: s.tiny, children: ["Price held for ", e.secondsLeft, "s."] })] })) : null, q && e.expired ? _jsx("p", { style: s.muted, children: "That price expired. Ask for a fresh one." }) : null, e.error ? (_jsx("div", { style: s.error, role: "alert", children: e.error.message })) : null, !q || e.expired ? (_jsx("button", { type: "button", style: { ...s.button, opacity: !parsed.units || e.busy ? 0.6 : 1 }, disabled: !parsed.units || e.busy || !chosen || !address.trim() || address.trim() !== again.trim(), onClick: () => chosen &&
+    return (_jsxs("div", { style: { display: "grid", gap: 12 }, "data-theoo-espees": "", children: [_jsxs("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: "4px 10px" }, children: [_jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Buy ESPEES" }), _jsxs("span", { style: s.tiny, children: ["Arrives within ", minutes, " min"] })] }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [_jsx("label", { htmlFor: "theoo-espees-amount", style: label, children: "You pay" }), held && chosen ? (_jsxs("span", { style: s.tiny, children: ["Balance ", held.display, " ", chosen.token.symbol] })) : null] }), _jsxs("div", { style: row, children: [_jsx("input", { id: "theoo-espees-amount", inputMode: "decimal", autoComplete: "off", placeholder: "0.00", value: amount, onChange: (ev) => setAmount(ev.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 }, "aria-invalid": parsed.problem ? true : undefined }), _jsx("select", { "aria-label": "Pay ESPEES with", value: token, onChange: (ev) => setToken(ev.target.value), style: select, children: tokens.map((d) => (_jsx("option", { value: d.token.address, children: d.token.symbol }, d.token.address))) })] }), parsed.problem ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: parsed.problem }) : null, chosen ? (_jsxs("p", { style: s.tiny, children: [estimate ? `You get about ${estimate} ESPEES · ` : "", chosen.price, " ESPEES per ", chosen.token.symbol] })) : null] }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-espees-address", style: label, children: "Espees address" }), _jsx("input", { id: "theoo-espees-address", autoComplete: "off", value: address, onChange: (ev) => setAddress(ev.target.value), style: s.input }), _jsx("label", { htmlFor: "theoo-espees-again", style: label, children: "Confirm address" }), _jsx("input", { id: "theoo-espees-again", autoComplete: "off", value: again, onChange: (ev) => setAgain(ev.target.value), style: s.input, "aria-invalid": mismatch ? true : undefined }), mismatch ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: "The two addresses don't match." }) : null] }), q && !e.expired ? (_jsxs("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.5 }, "data-theoo-quote": "", children: [_jsx("span", { children: q.summary }), _jsxs("span", { style: s.tiny, children: [e.secondsLeft, "s"] })] })) : null, q && e.expired ? _jsx("p", { style: s.muted, children: "Price expired." }) : null, e.error ? (_jsx("div", { style: s.error, role: "alert", children: e.error.message })) : null, !q || e.expired ? (_jsx("button", { type: "button", style: { ...s.button, opacity: !parsed.units || e.busy ? 0.6 : 1 }, disabled: !parsed.units || e.busy || !chosen || !address.trim() || address.trim() !== again.trim(), onClick: () => chosen &&
                     parsed.units &&
-                    e.ask({ payToken: chosen.token.address, payAmount: parsed.units, espeesAddress: address, espeesAddressConfirm: again }), children: e.busy ? "Asking the desk…" : q ? "Get a fresh price" : "Get a price" })) : (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }, children: [_jsx("button", { type: "button", style: { ...s.button, opacity: e.busy ? 0.6 : 1 }, disabled: e.busy, onClick: () => void e.confirm(), children: e.busy ? "Paying…" : "Pay with passkey" }), _jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: e.reset, children: "Cancel" })] })), latest ? (_jsxs("div", { style: { display: "grid", gap: 8, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, "data-espees-order": latest.state, children: [_jsxs("span", { style: label, children: ["Your latest order: ", latest.pay ? `${latest.pay.display} ${latest.pay.symbol}` : "", " \u2192 ", latest.get ? `${latest.get.display} ESPEES` : ""] }), _jsx("span", { style: { fontSize: 13.5 }, children: ESPEES_WORDS[latest.state] ?? latest.state }), latest.state === "delivered" ? (_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("button", { type: "button", style: s.button, disabled: e.busy, onClick: () => void answer(e.release), children: "It arrived" }), _jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: () => void answer(e.dispute), children: "Report a problem" })] })) : null, latest.txHash && explorerTx && latest.chain ? (_jsx("a", { href: explorerTx(latest.txHash, latest.chain) ?? undefined, target: "_blank", rel: "noopener noreferrer", style: { color: t.accent, fontSize: 12.5 }, children: "View the payment" })) : null] })) : null] }));
+                    e.ask({ payToken: chosen.token.address, payAmount: parsed.units, espeesAddress: address, espeesAddressConfirm: again }), children: e.busy ? "Getting a price…" : q ? "Refresh price" : "Get a price" })) : (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }, children: [_jsx("button", { type: "button", style: { ...s.button, opacity: e.busy ? 0.6 : 1 }, disabled: e.busy, onClick: () => void e.confirm(), children: e.busy ? "Paying…" : "Pay" }), _jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: e.reset, children: "Cancel" })] })), latest ? (_jsxs("div", { style: { display: "grid", gap: 8, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, "data-espees-order": latest.state, children: [_jsxs("span", { style: label, children: ["Latest: ", latest.pay ? `${latest.pay.display} ${latest.pay.symbol}` : "", " \u2192 ", latest.get ? `${latest.get.display} ESPEES` : ""] }), _jsx("span", { style: { fontSize: 13.5 }, children: ESPEES_WORDS[latest.state] ?? latest.state }), latest.state === "delivered" ? (_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("button", { type: "button", style: s.button, disabled: e.busy, onClick: () => void answer(e.release), children: "It arrived" }), _jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: () => void answer(e.dispute), children: "Report a problem" })] })) : null, latest.txHash && explorerTx && latest.chain ? (_jsx("a", { href: explorerTx(latest.txHash, latest.chain) ?? undefined, target: "_blank", rel: "noopener noreferrer", style: { color: t.accent, fontSize: 12.5 }, children: "View transaction" })) : null] })) : null] }));
+}
+/**
+ * A sale, in a few words. Behind them: the desk first locks the payout in an
+ * escrow on chain, naming this account; only then is the seller told where
+ * to send. If the seller sends nothing in time the desk takes its payout
+ * back; if the desk says nothing arrived, the arbiter decides. A desk that
+ * never locks a payout lets the order lapse, and nothing moves.
+ */
+const SELL_WORDS = {
+    awaiting_desk: "Pending. Don't send yet.",
+    awaiting_espees: "Ready. Send the ESPEES now.",
+    espees_sent: "Confirming receipt.",
+    disputed: "Under review.",
+    completed: "Paid.",
+    expired: "Expired.",
+    rejected: "Closed. The ESPEES didn't arrive.",
+    cancelled: "Cancelled.",
+    lapsed: "Expired.",
+};
+const when = (secs) => (secs ? new Date(secs * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "");
+/**
+ * Selling ESPEES to the desk. The desk goes first: it locks the payout in an
+ * escrow on chain, naming this account, and only then is the seller shown
+ * where to send. Nothing leaves the account at any step.
+ */
+function SellPanel({ chain }) {
+    const e = useEspeesSell(chain);
+    const sell = e.info?.sell;
+    const tokens = sell?.tokens ?? [];
+    const [token, setToken] = useState("");
+    const [amount, setAmount] = useState("");
+    const [from, setFrom] = useState("");
+    const [again, setAgain] = useState("");
+    const [reference, setReference] = useState("");
+    useEffect(() => {
+        if (!token && tokens.length)
+            setToken(tokens[0].token.address);
+    }, [tokens, token]);
+    const chosen = tokens.find((d) => d.token.address === token);
+    const parsed = useMemo(() => {
+        if (!amount.trim())
+            return {};
+        try {
+            const units = parseUnits(amount, 18);
+            if (BigInt(units) === 0n)
+                return { problem: "Enter an amount." };
+            return { units };
+        }
+        catch {
+            return { problem: "Invalid amount." };
+        }
+    }, [amount]);
+    const estimate = chosen && parsed.units ? formatUnits((BigInt(parsed.units) * 10n ** BigInt(chosen.token.decimals)) / BigInt(chosen.priceE18), chosen.token.decimals, 6) : null;
+    const mismatch = again.trim() !== "" && from.trim() !== again.trim();
+    useEffect(() => {
+        if (e.quote)
+            e.reset();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [token, amount, from, again]);
+    if (!e.info)
+        return _jsx("p", { style: s.muted, children: "Loading\u2026" });
+    const o = e.order;
+    const q = e.quote;
+    const error = e.error ? (_jsx("div", { style: s.error, role: "alert", children: e.error.message })) : null;
+    // A sale this session has seen: what the seller does next, or how it ended,
+    // until they choose to sell more.
+    if (o) {
+        return (_jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-sell": o.state, children: [_jsxs("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em" }, children: ["Selling ", o.espees.display, " ESPEES for ", o.receive.display, " ", o.receive.symbol] }), _jsx("span", { style: { fontSize: 13.5, lineHeight: 1.5 }, children: SELL_WORDS[o.state] ?? o.state }), o.state === "awaiting_espees" && o.sendTo ? (_jsxs("div", { style: { display: "grid", gap: 8, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.6 }, children: [_jsxs("span", { children: ["Send ", _jsxs("strong", { children: [o.espees.display, " ESPEES"] }), " from ", _jsx("strong", { children: o.espeesFrom }), " to ", _jsx("strong", { "data-sell-send-to": "", children: o.sendTo }), " ", "with note ", _jsx("strong", { style: { fontFamily: t.mono }, "data-sell-memo": "", children: o.memo }), o.deadline ? ` by ${when(o.deadline)}` : "", "."] }), _jsx("label", { htmlFor: "theoo-sell-reference", style: label, children: "Transaction reference" }), _jsx("input", { id: "theoo-sell-reference", autoComplete: "off", value: reference, onChange: (ev) => setReference(ev.target.value), style: s.input }), _jsx("button", { type: "button", style: { ...s.button, opacity: e.busy || reference.trim().length < 3 ? 0.6 : 1 }, disabled: e.busy || reference.trim().length < 3, onClick: () => void e.sent(reference.trim()), children: e.busy ? "Confirming…" : "I've sent it" })] })) : null, o.state === "espees_sent" && o.disputeUntil ? (_jsxs("span", { style: s.tiny, children: ["Payout by ", when(o.disputeUntil)] })) : null, o.state === "awaiting_desk" ? (_jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: () => void e.cancel(), children: "Cancel" })) : null, !e.live ? (_jsx("button", { type: "button", style: s.secondary, onClick: e.dismiss, children: "Sell more" })) : null, error] }));
+    }
+    if (!sell?.open)
+        return _jsx("p", { style: s.muted, children: "Not available right now." });
+    return (_jsxs("div", { style: { display: "grid", gap: 12 }, "data-theoo-sell": "", children: [_jsx("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: "4px 10px" }, children: _jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Sell ESPEES" }) }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-sell-amount", style: label, children: "You sell" }), _jsxs("div", { style: row, children: [_jsx("input", { id: "theoo-sell-amount", inputMode: "decimal", autoComplete: "off", placeholder: "0.00", value: amount, onChange: (ev) => setAmount(ev.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 }, "aria-invalid": parsed.problem ? true : undefined }), _jsx("select", { "aria-label": "Be paid in", value: token, onChange: (ev) => setToken(ev.target.value), style: select, children: tokens.map((d) => (_jsx("option", { value: d.token.address, children: d.token.symbol }, d.token.address))) })] }), parsed.problem ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: parsed.problem }) : null, chosen ? (_jsxs("p", { style: s.tiny, children: [estimate ? `You get about ${estimate} ${chosen.token.symbol} · ` : "", chosen.price, " ESPEES per ", chosen.token.symbol] })) : null] }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsx("label", { htmlFor: "theoo-sell-from", style: label, children: "Espees address" }), _jsx("input", { id: "theoo-sell-from", autoComplete: "off", value: from, onChange: (ev) => setFrom(ev.target.value), style: s.input }), _jsx("label", { htmlFor: "theoo-sell-again", style: label, children: "Confirm address" }), _jsx("input", { id: "theoo-sell-again", autoComplete: "off", value: again, onChange: (ev) => setAgain(ev.target.value), style: s.input, "aria-invalid": mismatch ? true : undefined }), mismatch ? _jsx("p", { style: { ...s.tiny, color: t.alert }, children: "The two addresses don't match." }) : null] }), q && !e.expired ? (_jsxs("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5, lineHeight: 1.5 }, "data-theoo-quote": "", children: [_jsx("span", { children: q.summary }), _jsxs("span", { style: s.tiny, children: [e.secondsLeft, "s"] })] })) : null, q && e.expired ? _jsx("p", { style: s.muted, children: "Price expired." }) : null, error, !q || e.expired ? (_jsx("button", { type: "button", style: { ...s.button, opacity: !parsed.units || e.busy ? 0.6 : 1 }, disabled: !parsed.units || e.busy || !chosen || !from.trim() || from.trim() !== again.trim(), onClick: () => chosen && parsed.units && e.ask({ receiveToken: chosen.token.address, espeesAmount: parsed.units, espeesFrom: from, espeesFromConfirm: again }), children: e.busy ? "Getting a price…" : q ? "Refresh price" : "Get a price" })) : (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }, children: [_jsx("button", { type: "button", style: { ...s.button, opacity: e.busy ? 0.6 : 1 }, disabled: e.busy, onClick: () => void e.place(), children: e.busy ? "Placing…" : "Place order" }), _jsx("button", { type: "button", style: s.secondary, disabled: e.busy, onClick: e.reset, children: "Cancel" })] }))] }));
 }
 /** The newest order of a kind, with its state in words. */
 function Latest({ order, words }) {
     if (!order)
         return null;
-    return (_jsxs("div", { style: { display: "grid", gap: 4, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, "data-money-latest": order.state, children: [_jsx("span", { style: label, children: "Your latest" }), _jsx("span", { style: { fontSize: 13.5 }, children: words[order.state] ?? STATE_WORDS[order.state] ?? order.state })] }));
+    return (_jsxs("div", { style: { display: "grid", gap: 4, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, "data-money-latest": order.state, children: [_jsx("span", { style: label, children: "Latest" }), _jsx("span", { style: { fontSize: 13.5 }, children: words[order.state] ?? STATE_WORDS[order.state] ?? order.state })] }));
 }
-/** Buying with a card or a bank transfer, on MoonPay's own page. */
-function BuyPanel({ chain }) {
+const CHAIN_NAMES = { 1: "Ethereum", 56: "BNB Chain", 97: "BNB testnet", 8453: "Base", 84532: "Base Sepolia", 11155111: "Sepolia" };
+const chainLabel = (c) => CHAIN_NAMES[c] ?? `chain ${c}`;
+// `received`: the naira (or dollars) reached the user's Bachs balance.
+// `processing`: Bachs is paying it on. `awaiting_payout`: Bachs refused the
+// payout for now (a limit, a balance); the settler tries again.
+const BACHS_WORDS = {
+    received: "Received",
+    processing: "Processing",
+    awaiting_payout: "Pending",
+    completed: "Completed",
+    failed: "Failed",
+};
+/**
+ * Naira in and out through the user's own Bachs account. Bachs does the KYC
+ * on its own page and holds the naira in the user's own balance there; Theoo
+ * only passes it on, to this user's own account or their own bank.
+ *
+ * None of that is said on screen, Bachs's name included: the user sees an
+ * identity check, then an account number. Bachs's fees (1% of a deposit, at
+ * most ₦300, and 1% with a minimum of 1 to pay it on as a stablecoin) show
+ * up only as "Fees apply"; the project's own terms carry the detail.
+ */
+function BachsPanel({ mode }) {
     const theoo = useTheoo();
-    const { balances } = useBalances(chain);
-    const { orders, reload } = useMoneyOrders(10);
-    const stables = (balances?.balances ?? []).filter((b) => b.token.stable);
-    const [token, setToken] = useState("");
-    const [fiat, setFiat] = useState("ngn");
-    const [amount, setAmount] = useState("");
-    const [busy, setBusy] = useState(false);
+    const { orders, reload: reloadOrders } = useMoneyOrders(10);
+    const [st, setSt] = useState(null);
     const [error, setError] = useState(null);
-    useEffect(() => {
-        if (!token && stables.length)
-            setToken(stables[0].token.address);
-    }, [stables, token]);
-    const go = async () => {
-        setBusy(true);
-        setError(null);
+    const [busy, setBusy] = useState(false);
+    const [email, setEmail] = useState("");
+    const [first, setFirst] = useState("");
+    const [last, setLast] = useState("");
+    const [choice, setChoice] = useState("");
+    const [banks, setBanks] = useState([]);
+    const [bankCode, setBankCode] = useState("");
+    const [accountNumber, setAccountNumber] = useState("");
+    const [changing, setChanging] = useState(false);
+    const load = useCallback(async () => {
         try {
-            const start = await theoo.me.money.buy({ chain, token, fiatCurrency: fiat, fiatAmount: amount.trim() || undefined });
-            window.open(start.url, "_blank", "noopener");
-            await reload();
+            setSt(await theoo.me.money.bachs.status());
         }
         catch (e) {
             setError(e instanceof Error ? e.message : String(e));
         }
-        finally {
-            setBusy(false);
-        }
-    };
-    return (_jsxs("div", { style: { display: "grid", gap: 12 }, "data-theoo-buy": "", children: [_jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Add money" }), _jsxs("div", { style: row, children: [_jsx("input", { "aria-label": "Amount to pay", inputMode: "decimal", placeholder: "20000", value: amount, onChange: (e) => setAmount(e.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 } }), _jsxs("select", { "aria-label": "Pay in", value: fiat, onChange: (e) => setFiat(e.target.value), style: select, children: [_jsx("option", { value: "ngn", children: "NGN" }), _jsx("option", { value: "usd", children: "USD" })] })] }), _jsx("select", { "aria-label": "Token to receive", value: token, onChange: (e) => setToken(e.target.value), style: { ...select, width: "100%" }, children: stables.map((b) => (_jsxs("option", { value: b.token.address, children: ["Receive ", b.token.symbol] }, b.token.address))) }), _jsx("p", { style: s.tiny, children: "MoonPay checks your identity and takes the payment, by card or bank transfer. The tokens arrive in this account: its address is fixed in the link, so nobody can change it." }), error ? (_jsx("div", { style: s.error, role: "alert", children: error })) : null, _jsx("button", { type: "button", style: { ...s.button, opacity: busy || !token ? 0.6 : 1 }, disabled: busy || !token, onClick: () => void go(), children: busy ? "Opening MoonPay…" : "Continue to MoonPay" }), _jsx(Latest, { order: (orders ?? []).find((o) => o.kind === "onramp"), words: { awaiting_payment: "Waiting for your payment on MoonPay.", processing: "Paid. MoonPay is sending your tokens.", completed: "Arrived in your account.", failed: "MoonPay couldn't complete it; nothing was taken from this account." } })] }));
-}
-/** Cashing out to a Nigerian bank account through Yellow Card. */
-function CashoutPanel({ chain, sender, onDone }) {
-    const theoo = useTheoo();
-    const { balances, reload } = useBalances(chain);
-    const { orders, reload: reloadOrders } = useMoneyOrders(10);
-    const [banks, setBanks] = useState(null);
-    const [bank, setBank] = useState("");
-    const [number, setNumber] = useState("");
-    const [name, setName] = useState(null);
-    const [confirmed, setConfirmed] = useState(false);
-    const [token, setToken] = useState("");
-    const [amount, setAmount] = useState("");
-    const [quote, setQuote] = useState(null);
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState(null);
-    const stables = (balances?.balances ?? []).filter((b) => b.token.stable);
-    const chosen = stables.find((b) => b.token.address === token);
-    useEffect(() => {
-        theoo.money.banks().then(setBanks, (e) => setError(e instanceof Error ? e.message : String(e)));
     }, [theoo]);
     useEffect(() => {
-        if (!token && stables.length)
-            setToken(stables[0].token.address);
-    }, [stables, token]);
+        void load();
+    }, [load]);
+    // While Bachs is still deciding, or money is moving, keep it current.
+    const waiting = !!st?.linked && (mode === "buy" ? !st.depositsActive : !st.payoutsActive);
+    const moving = (orders ?? []).some((o) => (o.kind === "onramp" || o.kind === "offramp") && ["received", "processing", "awaiting_payout"].includes(o.state));
     useEffect(() => {
-        setName(null);
-        setConfirmed(false);
-    }, [bank, number]);
-    useEffect(() => setQuote(null), [bank, number, token, amount, confirmed]);
+        if (!waiting && !moving)
+            return;
+        const id = setInterval(() => {
+            void load();
+            void reloadOrders();
+        }, 8000);
+        return () => clearInterval(id);
+    }, [waiting, moving, load, reloadOrders]);
+    useEffect(() => {
+        if (mode === "cashout" && st?.payoutsActive && banks.length === 0)
+            theoo.money.bachsBanks().then(setBanks, () => undefined);
+    }, [mode, st?.payoutsActive, banks.length, theoo]);
     const act = async (f) => {
         setBusy(true);
         setError(null);
@@ -292,25 +370,45 @@ function CashoutPanel({ chain, sender, onDone }) {
             setBusy(false);
         }
     };
-    if (!sender) {
-        return _jsx("p", { style: s.muted, children: "Cashing out needs the account holder's details (name, NIN and BVN), which this app hasn't supplied." });
+    const verify = () => act(async () => {
+        const { url } = await theoo.me.money.bachs.onboard({ email, firstName: first || undefined, lastName: last || undefined, returnUrl: window.location.href.split("#")[0] });
+        window.open(url, "_blank", "noopener");
+        await load();
+    });
+    const errorBox = error ? (_jsx("div", { style: s.error, role: "alert", children: error })) : null;
+    if (!st)
+        return _jsx("p", { style: s.muted, children: "Loading\u2026" });
+    // Either the server has no Bachs key, or this project hasn't turned the flow on.
+    if (!st.available || (mode === "buy" ? !st.buyEnabled : !st.cashoutEnabled))
+        return _jsx("p", { style: s.muted, children: "Not available yet." });
+    const head = _jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em" }, children: mode === "buy" ? "Add money" : "Cash out" });
+    if (!st.linked) {
+        return (
+        // Bachs opens an account in the user's name and checks their ID and BVN on its own page.
+        _jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-bachs": "unlinked", children: [head, _jsx("label", { htmlFor: "theoo-bachs-email", style: label, children: "Email" }), _jsx("input", { id: "theoo-bachs-email", type: "email", autoComplete: "email", value: email, onChange: (e) => setEmail(e.target.value), style: s.input }), _jsxs("div", { style: row, children: [_jsx("input", { "aria-label": "First name", placeholder: "First name", autoComplete: "given-name", value: first, onChange: (e) => setFirst(e.target.value), style: s.input }), _jsx("input", { "aria-label": "Last name", placeholder: "Last name", autoComplete: "family-name", value: last, onChange: (e) => setLast(e.target.value), style: s.input })] }), errorBox, _jsx("button", { type: "button", style: { ...s.button, opacity: busy || !email.includes("@") ? 0.6 : 1 }, disabled: busy || !email.includes("@"), onClick: () => void verify(), children: busy ? "Opening…" : "Verify identity" })] }));
     }
-    let units = null;
-    try {
-        units = chosen && amount.trim() ? parseUnits(amount, chosen.token.decimals) : null;
+    if (waiting) {
+        return (_jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-bachs": "verifying", children: [head, _jsx("p", { style: s.muted, children: "Verification in progress." }), errorBox, _jsx("button", { type: "button", style: s.secondary, disabled: busy, onClick: () => void verify(), children: "Continue verification" })] }));
     }
-    catch {
-        units = null;
+    const mine = (orders ?? []).filter((o) => o.kind === (mode === "buy" ? "onramp" : "offramp")).slice(0, 4);
+    const history = mine.length ? (_jsx("div", { style: { display: "grid", gap: 6, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, children: mine.map((o) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 8, fontSize: 13 }, "data-bachs-order": o.state, children: [_jsxs("span", { children: [o.pay ? `${o.pay.display} ${o.pay.symbol}` : "", o.get ? ` → ${o.get.display} ${o.get.symbol}` : ""] }), _jsx("span", { style: s.tiny, children: BACHS_WORDS[o.state] ?? o.state })] }, o.id))) })) : null;
+    if (mode === "buy") {
+        if (!st.receive || changing) {
+            const options = st.receiveOptions;
+            const selected = choice || (options[0] ? `${options[0].chain}:${options[0].asset}` : "");
+            return (_jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-bachs": "choose", children: [head, _jsx("label", { htmlFor: "theoo-bachs-receive", style: label, children: "Receive as" }), options.length === 0 ? (_jsx("p", { style: s.muted, children: "Not available yet." })) : (_jsx("select", { id: "theoo-bachs-receive", value: selected, onChange: (e) => setChoice(e.target.value), style: { ...select, width: "100%" }, children: options.map((o) => (_jsxs("option", { value: `${o.chain}:${o.asset}`, children: [o.asset, " on ", chainLabel(o.chain)] }, `${o.chain}:${o.asset}`))) })), errorBox, _jsx("button", { type: "button", style: { ...s.button, opacity: busy || !selected ? 0.6 : 1 }, disabled: busy || !selected, onClick: () => void act(async () => {
+                            const [c, a] = selected.split(":");
+                            setSt(await theoo.me.money.bachs.setReceive(Number(c), a));
+                            setChanging(false);
+                        }), children: busy ? "Saving…" : "Continue" })] }));
+        }
+        return (_jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-bachs": "ready", children: [head, st.nairaAccount ? (_jsxs("div", { style: { display: "grid", gap: 4, padding: 12, borderRadius: t.radius, background: t.accentSoft }, children: [_jsx("span", { style: label, children: "Send naira to" }), _jsx("strong", { style: { fontFamily: t.mono, fontSize: 20, letterSpacing: "0.04em" }, "data-bachs-account-number": "", children: st.nairaAccount.accountNumber }), _jsx("span", { style: { fontSize: 13.5 }, children: st.nairaAccount.bankName })] })) : (_jsx("p", { style: s.muted, children: "Setting up your account number\u2026" })), _jsxs("p", { style: s.tiny, children: ["Arrives as ", st.receive.asset, " on ", chainLabel(st.receive.chain), ". Fees apply.", " ", _jsx("button", { type: "button", style: link, onClick: () => setChanging(true), children: "Change" })] }), errorBox, history] }));
     }
-    return (_jsxs("div", { style: { display: "grid", gap: 12 }, "data-theoo-cashout": "", children: [_jsx("strong", { style: { fontSize: 15.5, letterSpacing: "-0.01em", whiteSpace: "nowrap" }, children: "Cash out to a bank" }), _jsxs("select", { "aria-label": "Bank", value: bank, onChange: (e) => setBank(e.target.value), style: { ...select, width: "100%" }, children: [_jsx("option", { value: "", children: banks ? "Choose a bank" : "Loading banks…" }), (banks ?? []).map((b) => (_jsx("option", { value: b.id, children: b.name }, b.id)))] }), _jsxs("div", { style: row, children: [_jsx("input", { "aria-label": "Account number", inputMode: "numeric", placeholder: "10 digits", value: number, onChange: (e) => setNumber(e.target.value), style: s.input }), _jsx("button", { type: "button", style: s.secondary, disabled: busy || !bank || number.trim().length !== 10, onClick: () => void act(async () => setName((await theoo.me.money.resolveAccount(bank, number)).accountName)), children: "Check" })] }), name ? (_jsxs("label", { style: { display: "flex", gap: 8, fontSize: 13.5 }, children: [_jsx("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked) }), "Pay ", name] })) : null, _jsxs("div", { style: row, children: [_jsx("input", { "aria-label": "Amount to cash out", inputMode: "decimal", placeholder: "0.00", value: amount, onChange: (e) => setAmount(e.target.value), style: { ...s.input, fontFamily: t.mono, fontSize: 17 } }), _jsx("select", { "aria-label": "Cash out from", value: token, onChange: (e) => setToken(e.target.value), style: select, children: stables.map((b) => (_jsx("option", { value: b.token.address, children: b.token.symbol }, b.token.address))) })] }), quote ? (_jsx("div", { style: { display: "grid", gap: 6, padding: 12, borderRadius: t.radius, background: t.accentSoft, fontSize: 13.5 }, "data-theoo-quote": "", children: quote.summary })) : null, error ? (_jsx("div", { style: s.error, role: "alert", children: error })) : null, !quote ? (_jsx("button", { type: "button", style: { ...s.button, opacity: busy ? 0.6 : 1 }, disabled: busy || !confirmed || !units || !name, onClick: () => void act(async () => {
-                    setQuote(await theoo.me.money.quoteCashout({ chain, token, amount: units, bank, accountNumber: number.trim(), accountName: name, sender }));
-                }), children: busy ? "Getting a quote…" : "Get a quote" })) : (_jsx("button", { type: "button", style: { ...s.button, opacity: busy ? 0.6 : 1 }, disabled: busy, onClick: () => void act(async () => {
-                    const status = await theoo.me.money.cashOut(quote);
-                    setQuote(null);
-                    onDone?.(status);
-                    await reloadOrders();
-                    [0, 2000, 5000].forEach((ms) => setTimeout(() => void reload(), ms));
-                }), children: busy ? "Sending…" : "Send with passkey" })), _jsx(Latest, { order: (orders ?? []).find((o) => o.kind === "offramp"), words: { awaiting_signature: "Waiting for your passkey.", processing: "Sent. Yellow Card is paying the bank.", completed: "Paid into the bank account.", refunded: "The payout failed; your tokens came back to this account.", failed: "The transfer failed on chain; nothing was taken." } })] }));
+    // Cashing out.
+    return (_jsxs("div", { style: { display: "grid", gap: 10 }, "data-theoo-bachs": "cashout", children: [head, st.bank && !changing ? (_jsxs("div", { style: { display: "grid", gap: 4, padding: 12, borderRadius: t.radius, background: t.accentSoft }, children: [_jsx("span", { style: label, children: "Paid to" }), _jsx("strong", { style: { fontSize: 15 }, "data-bachs-account-name": "", children: st.bank.accountName }), _jsxs("span", { style: { fontSize: 13.5 }, children: [st.bank.bankName, " \u2022\u2022", st.bank.last4] }), _jsx("button", { type: "button", style: { ...link, justifySelf: "start" }, onClick: () => setChanging(true), children: "Change" })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "theoo-bachs-bank", style: label, children: "Your bank" }), _jsxs("select", { id: "theoo-bachs-bank", value: bankCode, onChange: (e) => setBankCode(e.target.value), style: { ...select, width: "100%" }, children: [_jsx("option", { value: "", children: "Choose your bank" }), banks.map((b) => (_jsx("option", { value: b.code, children: b.name }, b.code)))] }), _jsx("label", { htmlFor: "theoo-bachs-account", style: label, children: "Account number" }), _jsx("input", { id: "theoo-bachs-account", inputMode: "numeric", autoComplete: "off", maxLength: 10, value: accountNumber, onChange: (e) => setAccountNumber(e.target.value.replace(/\D/g, "")), style: { ...s.input, fontFamily: t.mono } }), _jsx("p", { style: s.tiny, children: "Must be in your name." }), _jsx("button", { type: "button", style: { ...s.button, opacity: busy || !bankCode || accountNumber.length !== 10 ? 0.6 : 1 }, disabled: busy || !bankCode || accountNumber.length !== 10, onClick: () => void act(async () => {
+                            setSt(await theoo.me.money.bachs.setBank(bankCode, accountNumber));
+                            setChanging(false);
+                        }), children: busy ? "Checking…" : "Save" })] })), !st.cashoutPayInReady ? _jsx("p", { style: s.muted, children: "Coming soon." }) : null, errorBox, history] }));
 }
 function Recent({ orders, explorerTx }) {
     return (_jsxs("div", { style: { display: "grid", gap: 6, borderTop: `1px solid ${t.line}`, paddingTop: 10 }, children: [_jsx("span", { style: label, children: "Recent" }), orders.map((o) => {