setAcctOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
setMenuOpen(false)} actions={[
{ icon: "eye", label: "Reveal account number", onClick: () => setRevealOpen(true) },
{ icon: "doc", label: "Edit nickname", onClick: () => { setDraft(nick); setEditing(true); } },
{ icon: "receipt", label: "Documents", onClick: () => nav.sheet({ type: "documents" }) },
{ icon: "trade", label: "Trade", onClick: () => nav.sheet({ type: "trade" }) },
]} />
)}
{revealOpen && (
Total holdings
{ setTab(v); setQ(""); }} />
{/* search + filters — the original toolbar (inline filter dropdown).
paddingBottom balances the toolbar's own top padding above it. */}
) : (
);
};
/* ============================================================
ReceiptSheet · the audit-trail detail. Who acted, when, under
what authority — the trust contract, one tap deep.
============================================================ */
const ReceiptSheet = ({ tx, nav, onClose }) => {
const val = tx.net !== 0 ? tx.net : (tx.amount || 0);
const rows = [
["When", tx.when === "Just now" ? "Just now" : tx.when],
["Category", tx.category],
["Detail", tx.detail],
["Executed by", tx.by || "You"],
tx.by && tx.by !== "You"
? ["Authority", "Standing rule · within your approved limits"]
: ["Authority", "You approved · passkey"],
];
return (
<>
0 ? "var(--accent-pos)" : "var(--ink)"} />
{rows.map(([l, v]) => (
Close
{ onClose(); nav.ask(`Tell me about "${tx.title}"`, `That was ${tx.detail} on ${tx.when}. ${tx.by && tx.by !== "You" ? `It ran under your "${tx.by}" rule, within the limits you approved.` : "You placed and approved it yourself."} Anything you'd like changed?`); }}>Ask Yoshi
);
};
/* ============================================================
AutomationsListSheet · how you see the rules you've created.
Reuses the original AutomationsTab; each row opens the original
AutomationSheet (detail + in-sheet chat to modify/pause).
============================================================ */
const AutomationsListSheet = ({ nav, onClose }) => (
{right}
);
};
const PGroup = ({ label, children, clip = true }) => (
<>
{label}
);
};
/* a linked external account row — rename inline, hide from totals (dim +
"Hidden" chip + Unhide), or reconnect, via a small per-row menu. */
const HiddenPill = () => (
Hidden
);
/* one menu row, matching the original account-options dropdown */
const AcctMenuItem = ({ icon, title, sub, borderTop, onClick }) => (
);
/* a bottom action sheet — the mobile idiom for row options, matching main's
edit-actions sheets (scrim + rounded sheet + action rows + Cancel) */
const SheetActionRow = ({ icon, label, sub, tone, first, onClick }) => (
);
const OptionsSheet = ({ title, letter, iconName, imgSrc, actions, onClose }) => {
const rows = actions.map((a, i) => { onClose(); a.onClick(); }} />);
// Web: a dropdown anchored just under the kebab (top-right of the sheet),
// like the main web app — not a bottom sheet. Click outside to dismiss.
if (window.__YOSHI_WEB) {
return (
<>
);
};
const ExtAccountRow = ({ acct, name, hidden, first, onRename, onToggleHide, onReconnect }) => {
const [menu, setMenu] = useState(false);
const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState(name);
const border = first ? "none" : "1px solid var(--rule)";
const stale = acct.health !== "ok";
const save = () => { const v = draft.trim(); if (v) onRename(v); setEditing(false); };
return (
setMenu(false)} actions={[
{ icon: "doc", label: "Rename", onClick: () => { setDraft(name); setEditing(true); } },
{ icon: "eye", label: hidden ? "Show account" : "Hide account", sub: hidden ? "Count this account again everywhere." : "Remains connected", onClick: onToggleHide },
]} />
)}
{/* nickname editor — same bottom sheet as the main app */}
{editing && (
<>
: iconName ? setMenu(false)} actions={[
...extraActions,
...(onRename ? [{ icon: "doc", label: renameLabel, onClick: () => { setDraft(name); setEditing(true); } }] : []),
{ icon: "close", label: revokeLabel, tone: "danger", onClick: () => onRevoke && onRevoke() },
]} />
)}
{editing && (
<>
Authorize an external agent
{AGENT_LIBRARY.map((ag) => (
Or connect your own
{YOSHI_ENDPOINTS.map((e) => (
{e.id === "sdk"
? setSdkOpen(true)}>View SDKs
: onCopy(e.name)}> }
))}
{sdkOpen && setSdkOpen(false)} />}
);
};
// Connections · agents — connected list + an "Add an agent" bottom sheet to
// authorize a pre-built agent or connect your own
const AgentsSection = ({ flash }) => {
const [agents, setAgents] = useState(AGENT_SEED);
const [addOpen, setAddOpen] = useState(false);
const rename = (id, v) => { setAgents((a) => a.map((x) => x.id === id ? { ...x, name: v } : x)); flash("Renamed to " + v); };
const revoke = (id, nm) => { setAgents((a) => a.filter((x) => x.id !== id)); flash("Revoked access · " + nm); };
const authorize = (ag) => { setAgents((a) => a.find((x) => x.id === ag.id) ? a : [...a, { id: ag.id, name: ag.name, img: ag.img, icon: ag.icon }]); setAddOpen(false); flash("Authorized · " + ag.name); };
return (
<>
{agents.map((ag, i) => (
rename(ag.id, v)} onRevoke={() => revoke(ag.id, ag.name)} revokeLabel="Revoke access" />
))}
{addOpen && flash("Copied · " + name)} onClose={() => setAddOpen(false)} />}
);
};
// full key-generation flow in a bottom sheet: name it, generate, copy once
const genApiToken = () => { const hex = "0123456789abcdef"; let s = "ys_demo_"; for (let i = 0; i < 28; i++) s += hex[Math.floor(Math.random() * 16)]; return s; };
const maskApiToken = (t) => "ys_demo_••••" + String(t).slice(-4);
const GenerateKeySheet = ({ onClose, onCreated }) => {
const [name, setName] = useState("");
const [made, setMade] = useState(null); // { name, token } once generated
const [copied, setCopied] = useState(false);
const generate = () => { const nm = name.trim(); if (!nm) return; setMade({ name: nm, token: genApiToken() }); };
const copy = () => { try { navigator.clipboard && navigator.clipboard.writeText(made.token); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1600); };
const done = () => { onCreated(made); onClose(); };
return (
);
};
// API keys — separate area, each key managed by a kebab
const ApiKeysMenuSection = ({ flash }) => {
const [keys, setKeys] = useState(API_KEY_SEED);
const [genOpen, setGenOpen] = useState(false);
const rename = (id, v) => { setKeys((k) => k.map((x) => x.id === id ? { ...x, name: v } : x)); flash("Renamed to " + v); };
const revoke = (id, nm) => { setKeys((k) => k.filter((x) => x.id !== id)); flash("Revoked · " + nm); };
const onCreated = ({ name, token }) => { setKeys((k) => [...k, { id: "k" + token.slice(-6), name, sub: maskApiToken(token) + " · Just now" }]); flash("Generated · " + name); };
return (
<>
API keys
setGenOpen(false)} onCreated={onCreated} />}
);
};
/* ---- Accounts breakdown · the drill-in from the Home balance -------------- */
// prototype account/routing numbers + interest, per cash account
const CASH_ACCT_DETAIL = {
chk: { account: "8829 0021 8841", routing: "021 000 021", interestMonth: "$48.00", interestYtd: "$296.00" },
sav: { account: "8829 0021 2207", routing: "021 000 021", interestMonth: "$168.00", interestYtd: "$1,240.00" },
};
const APY_EXPLAINER = "APY is an annual rate. Our current base rate is 3.30% and is subject to change. Interest accrues daily and is paid out monthly. Payouts vary month to month with your balance and the number of days in the month.";
// per-account transactions, shown in the cash detail (like main)
const CASH_ACCT_TXNS = {
chk: [
{ icon: "down", title: "Pay day", sub: "Acme Corp · direct deposit", when: "Jun 1", net: 6240.00 },
{ icon: "receipt", title: "Rent", sub: "Bill pay · Greystar", when: "Jun 1", net: -2800.00 },
{ icon: "down", title: "Interest earned", sub: "3.30% APY", when: "May 31", net: 48.00 },
{ icon: "swap", title: "Card autopay", sub: "Yoshi Card ··2291", when: "May 28", net: -1240.40 },
{ icon: "swap", title: "Moved to Reserve", sub: "Instant · buffer rule", when: "May 28", net: -6000.00 },
{ icon: "swap", title: "Zelle from Jordan", sub: "Received", when: "May 24", net: 320.00 },
],
sav: [
{ icon: "down", title: "Interest earned", sub: "3.30% APY", when: "May 31", net: 168.00 },
{ icon: "swap", title: "From Cash", sub: "Instant · buffer rule", when: "May 28", net: 6000.00 },
{ icon: "swap", title: "From Cash", sub: "Instant · buffer rule", when: "May 14", net: 8000.00 },
{ icon: "down", title: "Interest earned", sub: "3.30% APY", when: "Apr 30", net: 155.00 },
],
};
// a tap-to-open detail sheet for the ⓘ icons (APY / FDIC)
const InfoSheet = ({ title, body, onClose }) => (
);
// type-aware detail — matches main's cash account view: interest/APY stats with
// ⓘ details, searchable transactions, and a kebab → options (incl. Move)
const CashAccountSheet = ({ acct, nav, onBack, embedded }) => {
const d = CASH_ACCT_DETAIL[acct.id] || {};
const [menuOpen, setMenuOpen] = useState(false);
const [info, setInfo] = useState(null);
const [revealOpen, setRevealOpen] = useState(false);
const [editing, setEditing] = useState(false);
const [nick, setNick] = useState(acct.name);
const [draft, setDraft] = useState(acct.name);
const [q, setQ] = useState("");
const [tf, setTf] = useState("all");
const [tfOpen, setTfOpen] = useState(false);
const TF = [["all", "All"], ["in", "Money in"], ["out", "Money out"]];
const txns = (CASH_ACCT_TXNS[acct.id] || []).filter((t) => {
if (tf === "in" && t.net <= 0) return false;
if (tf === "out" && t.net >= 0) return false;
const s = q.trim().toLowerCase();
return !s || (t.title + " " + t.sub).toLowerCase().includes(s);
});
// the ⓘ icon: on web the explainer opens as a small anchored popover next to
// the icon (InfoPop); on mobile it falls through to the bottom sheet (below)
const iBtn = (key, title, body, align = "left") => (
{window.__YOSHI_WEB && setInfo(null)} title={title} align={align}>{body} }
);
return (
{TRADING_ACCTS.map((a, i) => (
))}
)}
{menuOpen && (
setRevealOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.55)", animation: "scrim-in 200ms ease both" }} />
)}
{editing && (
Account number
Use these for an ACATS transfer into this account.
setEditing(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", animation: "scrim-in 200ms ease both" }} />
)}
{/* total + a time dropdown for the change (like the account view) */}
Edit nickname
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { const v = draft.trim(); if (v) setNick(v); setEditing(false); } }}
style={{ width: "100%", boxSizing: "border-box", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
{rangeOpen && (
<>
{/* gains — total up front, tap to expand long-term vs short-term */}
setRangeOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
{HRANGES.map((r, i) => (
))}
)}
{tab === "holdings"
?
{tab === "holdings" ? (
{/* header row */}
{COLS.map((c) => (
))}
{rows.map((h) => (
))}
{rows.length === 0 && (
No holdings match "{q}".
)}
{shownTxns.length ? shownTxns.map((t, i) =>
)}
No transactions match.
)}
{tx.title}
{l}
{v}
))}
{window.StatusBar &&
);
/* ============================================================
ProfileSheet · the hamburger menu. Settings, card, Automations,
Connections (the portability hero), docs & help.
============================================================ */
const MiniSwitch = ({ on, onChange }) => (
);
const PRow = ({ title, sub, right, onClick, first }) => {
const Tag = onClick ? "button" : "div";
return (
{window.AutomationsTab ?
{title}
{sub && {sub}
}
{children}
);
const HealthDot = ({ ok }) => (
{ok ? "Connected" : "Reconnect"}
);
/* card details — no card art; reveal, then copy each number separately */
const CARD_INFO = [
["Card number", "4417 8829 0021 4417"],
["Expiry", "08 / 28"],
["CVV", "492"],
];
const CopyRow = ({ label, value, first }) => {
const [copied, setCopied] = useState(false);
const copy = () => { try { navigator.clipboard.writeText(value.replace(/[^0-9]/g, "")); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1400); };
return (
{label}
{value}
{rows}
);
}
return (
{rows}
{/* logo avatar — same as main (initial in a bordered circle) */}
{name[0]}
{/* no 'Connected' label; only a Re-auth pill when the connection is stale (matches main) */}
{!hidden && stale && (
{/* options — a bottom action sheet, the mobile idiom (matches main) */}
{menu && (
{name}
{hidden &&
{(!hidden && stale) ? acct.sub : acct.sub + " · " + usd(acct.value)}
setEditing(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
)}
);
};
const Avatar = ({ name, size = 30 }) => {
const initials = name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
return (
{initials}
);
};
// card number / expiry / CVV, revealed in a bottom sheet with per-field copy
const CardInfoSheet = ({ onClose }) => (
Rename
Account nickname
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") save(); }}
style={{ width: "100%", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
Card details
Yoshi debit · ··4417
{CARD_INFO.map(([l, v], i) =>
Only visible to you. Keep these numbers private.
{avatar && agentAvatar(name[0], iconName, imgSrc)}
{menu && (
{name}
{badge}
{sub && {sub}
}
setEditing(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
)}
);
};
const SmallBtn = ({ children, onClick, tone }) => (
);
// the "Add an agent" bottom sheet — authorize a pre-built agent or connect
// your own (MCP / API / SDKs). Opened from the Connections · agents section.
const AddAgentSheet = ({ onAuthorize, onCopy, onClose }) => {
const [sdkOpen, setSdkOpen] = useState(false);
return (
{renameLabel}
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") save(); }}
style={{ width: "100%", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
Add an agent
Authorize a pre-built one, or connect your own
{agentAvatar(ag.name[0], ag.icon, ag.img)}
{ag.name}
onAuthorize(ag)}>Authorize
))}
{e.name}
{e.sub}
{!made ? (
<>
Generate an API key
Name this key
setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") generate(); }} placeholder="e.g. Trading bot"
style={{ width: "100%", boxSizing: "border-box", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--rule-2)", borderRadius: 10, outline: "none", color: "var(--ink)", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600 }} />
) : (
<>
{made.name}
{made.token}
Copy it now. For your security, you won't see the full key again.
)}
{keys.map((k, i) => (
rename(k.id, v)} onRevoke={() => revoke(k.id, k.name)} revokeLabel="Revoke key" />
))}
Keys are scoped and propose-only. An agent calling with your key can draft moves; only you can approve them.
{genOpen &&
{title}
{body}
{window.StatusBar &&
Balance
{iBtn("fdic", "FDIC insurance", FDIC_DISCLOSURE)}
setMenuOpen(false)} actions={[
{ icon: "eye", label: "Reveal account & routing number", onClick: () => setRevealOpen(true) },
{ icon: "doc", label: "Edit nickname", onClick: () => { setDraft(nick); setEditing(true); } },
{ icon: "receipt", label: "Documents", onClick: () => nav.sheet({ type: "documents" }) },
{ icon: "swap", label: "Move", onClick: () => nav.sheet({ type: "transfer", from: "cash" }) },
]} />
)}
{info && !window.__YOSHI_WEB && setInfo(null)} />}
{revealOpen && (
);
};
const AccountsSheet = ({ nav, onClose }) => {
const [detail, setDetail] = useState(null);
const [holdingsAcct, setHoldingsAcct] = useState(null);
const allH = [...GROUPS.investments.items, ...GROUPS.crypto.items];
const acctHoldings = (id) => allH.filter((h) => HOLDING_ACCT[h.id] === id);
const acctSum = (id) => acctHoldings(id).reduce((s, h) => s + h.value, 0);
const acctDay = (id) => acctHoldings(id).reduce((s, h) => s + h.dayAbs, 0);
const trading = (id, name, sub) => { const v = acctSum(id), da = acctDay(id); return { id, name, sub, value: v, dayAbs: da, dayPct: (da / (v - da)) * 100, kind: "holdings", holdAcct: id, color: "var(--alloc-invest)" }; };
const groups = [
{ label: "Cash", total: CASH_TOTAL, color: "var(--alloc-cash)", accounts: CASH.map((c) => ({ ...c, kind: "cash" })) },
{ label: "Investments", total: acctSum("brokerage") + acctSum("roth"), color: "var(--alloc-invest)", accounts: [
trading("brokerage", "Brokerage", acctHoldings("brokerage").length + " holdings"),
trading("roth", "High Risk", acctHoldings("roth").length + " holdings"),
] },
{ label: "Crypto", total: acctSum("crypto"), color: "var(--alloc-crypto)", accounts: [{ ...trading("crypto", "Crypto", acctHoldings("crypto").length + " holdings"), color: "var(--alloc-crypto)" }] },
];
// on web, the accounts view is master-detail: the list stays on the left and
// selecting an account shows its detail on the right (no drill-in overlay)
const web = !!window.__YOSHI_WEB;
const flatAccounts = groups.flatMap((g) => g.accounts);
const [selId, setSelId] = useState(flatAccounts[0] ? flatAccounts[0].id : null);
const [txn, setTxn] = useState(null); // web: a tapped txn replaces the detail pane (no modal), like main
const selected = flatAccounts.find((a) => a.id === selId) || flatAccounts[0];
// on web, route any txn tap from an embedded pane into this local state so the
// transaction detail REPLACES the account detail column (rather than opening
// the shell-level Stream detail or a modal)
const paneNav = web ? { ...nav, sheet: (o) => (o && o.type === "txn") ? setTxn(o.tx) : nav.sheet(o) } : nav;
const open = (a) => { if (web) { setSelId(a.id); setTxn(null); } else if (a.kind === "cash") { setDetail(a); } else { setHoldingsAcct(a.holdAcct); } };
const chevron = Total at Yoshi
{}} embedded />
: {}} embedded />);
if (web) {
return (
{!embedded && }
{nick} · {acct.sub.replace(/^Yoshi /, "")}
+{d.interestYtd || "$0.00"}
Interest Jan–May
{(acct.apr || "").replace(" APY", "")}
Current APY
{iBtn("apy", "About your APY", APY_EXPLAINER)}
setTfOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
{TF.map(([id, label], i) => (
))}
)}
{txns.map((tx, i) => (
))}
setRevealOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.55)", animation: "scrim-in 200ms ease both" }} />
)}
{editing && (
Account & routing
setEditing(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", animation: "scrim-in 200ms ease both" }} />
)}
Edit nickname
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { const v = draft.trim(); if (v) setNick(v); setEditing(false); } }}
style={{ width: "100%", boxSizing: "border-box", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
{g.label}
{g.accounts.map((a, i) => {
const on = web && selected && a.id === selected.id;
return (
);
})}
Accounts
);
// the selected account's detail, hosted inline in the right pane (keyed so
// switching accounts remounts with the right data)
const detailPane = selected && (selected.kind === "cash"
?
{header}
{detailPane}
{/* a tapped txn replaces the account detail — stack above the embedded
account sheet (z 330/340) so it fully covers it, like main */}
{txn && setTxn(null)} nav={nav} /> }
);
}
return (
{window.StatusBar && setDetail(null)} />}
{holdingsAcct && setHoldingsAcct(null)} />}
);
};
const ProfileSheet = ({ palette, setPalette, nav, onClose, flash }) => {
const [frozen, setFrozen] = useState(false);
const [cardInfoOpen, setCardInfoOpen] = useState(false);
const [push, setPush] = useState(true);
const [sms, setSms] = useState(true);
const [email, setEmail] = useState(true);
const [wa, setWa] = useState(false);
const [section, setSection] = useState(null);
const [acctNames, setAcctNames] = useState({});
const [hiddenAccts, setHiddenAccts] = useState([]);
const activeAutos = AUTOMATIONS.filter((a) => a.status === "active").length;
// reuse the original account/settings sections (loaded from profile.jsx)
const SECTIONS = {
automations: { label: "Automations", body: window.AutomationsTab ? {listBody}
{detail && Choose the color palette Yoshi uses across the app.
{window.StatusBar && setSection(null)} />
) : (
<>
{/* the hamburger becomes an X; profile picture + full name sit beside it */}
);
};
Object.assign(window, { EXT_ACCOUNTS, AGENT_CONNECTIONS, HoldingView, HoldingsDetailSheet, ReceiptSheet, AutomationsListSheet, ProfileSheet, AccountsSheet, MiniSwitch, PRow, PGroup, HealthDot });
{SECTIONS[section].body}
{/* Automations — how you see the rules you've created */}
{ if (window.__YOSHI_WEB) { onClose(); nav.sheet({ type: "automations" }); } else { setSection("automations"); } }}
right={ { onClose(); nav.ask("Build a new automation", "Sure. Tell me the rule in plain words — like \"invest $200 every Friday\" or \"sweep idle cash over $15k into Savings.\" I'll set it up inside your limits and show you the first run before it executes."); }}
right={
{/* open a new Yoshi account. Paper trading isn't a consumer feature —
it's an API/MCP capability an agent uses on its own. */}
{ onClose(); nav.ask("Open another Brokerage account", "Happy to. A Yoshi Brokerage account lets you invest in stocks and ETFs in a regular taxable account — I'll walk you through the paperwork and fund it from any of your accounts. Want to start?"); }}
right={ { onClose(); nav.ask("Open another Cash account", "Done in a tap. A new Yoshi Cash account earns 3.30% APY like the rest of your cash — handy for keeping a bucket separate. Want me to open one?"); }}
right={ { onClose(); nav.ask("Open another Crypto account", "Sure. A Yoshi Crypto account lets you buy and hold crypto alongside everything else. Want me to set one up?"); }}
right={
{EXT_ACCOUNTS.map((x, i) => {
const nm = acctNames[x.id] || x.name;
return (
{ setAcctNames((s) => ({ ...s, [x.id]: v })); flash("Renamed to " + v); }}
onToggleHide={() => setHiddenAccts((s) => s.includes(x.id) ? (flash("Unhidden · " + nm), s.filter((y) => y !== x.id)) : (flash("Hidden from totals · " + nm), [...s, x.id]))}
onReconnect={() => flash("Reconnected · " + nm)} />
);
})}
flash("Added to Wallet")} right={
{cardInfoOpen && setCardInfoOpen(false)} />}
setSection("personal")} right={chevron} />
setSection("investor")} right={chevron} />
setSection("security")} right={chevron} />
setSection("appearance")} right={chevron} />
setSection("close")} right={chevron} />
{ onClose(); nav.sheet({ type: "documents" }); }} right={ { onClose(); nav.sheet({ type: "support" }); }} right={
{ nav.signOut(); }}>Sign out
)}