/* flow3.jsx — Plaid link sheet · Funding · External accounts · Agent · Off to work. */ /* ============================================================= Plaid link — the account-linking product experience, reused for the funding source (one depository) and read-only externals (many). ============================================================= */ const BANKS = [ { id: "chase", name: "Chase", tint: "#1059a8", accts: [["Checking", "Checking", "••8841", 14231], ["Brokerage", "Brokerage", "••2207", 8400]] }, { id: "bofa", name: "Bank of America", tint: "#c4112f", accts: [["Advantage Checking", "Checking", "••3392", 5210], ["Rewards Savings", "Savings", "••7715", 19800]] }, { id: "wells", name: "Wells Fargo", tint: "#b81e26", accts: [["Everyday Checking", "Checking", "••4471", 3120]] }, { id: "amex", name: "American Express", tint: "#1b6fb3", accts: [["Platinum Card", "Card", "••1008", -2104], ["High Yield Savings", "Savings", "••9920", 22500]] }, { id: "capone", name: "Capital One", tint: "#13415f", accts: [["360 Checking", "Checking", "••5567", 2840]] }, { id: "schwab", name: "Charles Schwab", tint: "#00a0df", accts: [["Brokerage", "Brokerage", "••2231", 88402]] }, { id: "fidelity", name: "Fidelity", tint: "#3a8c3f", accts: [["Individual", "Brokerage", "••6610", 31980]] }, { id: "coinbase", name: "Coinbase", tint: "#1652f0", accts: [["Portfolio", "Crypto", "••4417", 6712]] }, ]; /* Plaid link. `requireFunding` (no funding source established yet) forces the user to include a checking/savings account in their selection — so every exit from Plaid leaves them with a usable funding source. Always multi-select: you link a bank and pull along any other accounts at once. */ const PlaidLink = ({ mode, requireFunding = false, onClose, onLinked, initialStep, initialBankId, initialSel }) => { // step: "list" | "connecting" | "select" const [step, setStep] = useState(initialStep || "list"); const [bank, setBank] = useState(() => initialBankId ? BANKS.find((b) => b.id === initialBankId) || null : null); const [q, setQ] = useState(""); const [sel, setSel] = useState(() => new Set(initialSel || [])); // When establishing the funding source, only surface institutions that // actually have a depository account to link. const pool = requireFunding ? BANKS.filter((b) => b.accts.some((a) => a[1] === "Checking" || a[1] === "Savings")) : BANKS; const shown = pool.filter((b) => b.name.toLowerCase().includes(q.trim().toLowerCase())); const isDep = (a) => a[1] === "Checking" || a[1] === "Savings"; const pick = (b) => { setBank(b); setStep("connecting"); // pre-select every account at the institution — the user trims from there setSel(new Set(b.accts.map((_, i) => i))); setTimeout(() => setStep("select"), 1700); }; const toggle = (i) => setSel((prev) => { const n = new Set(prev); n.has(i) ? n.delete(i) : n.add(i); return n; }); // the funding source = first selected depository at this institution const fundingIdx = bank ? bank.accts.findIndex((a, i) => sel.has(i) && isDep(a)) : -1; const needsFunding = requireFunding && fundingIdx < 0; const finish = () => { const accts = [...sel].map((i) => ({ inst: bank.name, instId: bank.id, tint: bank.tint, name: bank.accts[i][0], type: bank.accts[i][1], mask: bank.accts[i][2], bal: bank.accts[i][3] })); onLinked(accts); }; return (
{step === "list" && ( <>
{mode === "funding" ? "Select your bank" : "Select an institution"}
setQ(e.target.value)} placeholder="Search 12,000+ institutions" autoFocus style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15, color: "#1a1c1f" }} />
{shown.map((b) => ( ))}
)} {step === "connecting" && (
{bank.name[0]}
Connecting to {bank.name}…
Plaid signs you in securely. Yoshi never sees your bank password.
)} {step === "select" && ( <>
Accounts at {bank.name} {requireFunding ? "Pick a checking or savings account to fund Yoshi. Add any others for Yoshi to read." : "Select which accounts Yoshi can see. Add a checking or savings to move money."}
{bank.accts.map((a, i) => { const on = sel.has(i); const isFunding = i === fundingIdx; return ( ); })}
{needsFunding && (
Select a checking or savings account to fund Yoshi.
)}
{`Link ${sel.size} account${sel.size === 1 ? "" : "s"}`}
Secured by Plaid
)}
); }; /* ============================================================= 08 · CONNECT YOUR BANK — link once through Plaid; it pulls every account at that institution. Pick the one that funds Yoshi (read/write); the rest ride along read-only. The more you connect, the more Yoshi sees. ============================================================= */ const FUND_PRESETS = [250, 1000, 5000, 10000]; const FUND_PRESET_RATIOS = [0, 1 / 3, 2 / 3, 1]; const fundingPresetStepFor = (cap) => { if (cap <= 500) return 1; if (cap <= 1000) return 10; if (cap <= 5000) return 50; return 100; }; const fundingPresetsFor = (balance) => { const cap = Math.floor(Math.max(0, balance || 0)); if (!cap) return FUND_PRESETS; if (cap >= 5000) return [250, 500, 1000, 5000]; const maxPreset = Math.min(cap, 5000); const floor = Math.min(cap, cap <= 250 ? 100 : 250); const span = maxPreset - floor; const step = fundingPresetStepFor(maxPreset); return FUND_PRESET_RATIOS.map((ratio, i) => { if (i === 0) return floor; if (i === FUND_PRESET_RATIOS.length - 1) return maxPreset; const raw = floor + span * ratio; return Math.min(maxPreset, Math.max(floor, Math.round(raw / step) * step)); }); }; const fundingPresetLabel = (amount) => { if (amount >= 1000) { const k = amount / 1000; return `$${k.toFixed(k >= 10 ? 1 : 1).replace(/\.0$/, "")}k`; } return `$${amount.toLocaleString("en-US")}`; }; /* What Yoshi can do once it can SEE a given institution — the concrete payoff for connecting more, surfaced live as accounts come in. */ const INSIGHTS = { amex: { tag: "Pay down your card", find: "Your Amex balance is accruing interest at 21.99% APR. Yoshi can clear it from cash before it's due.", value: "Stops interest", w: 95 }, schwab: { tag: "Put idle cash to work", find: "Uninvested cash is sitting in your Schwab brokerage. Yoshi can invest it on a schedule.", value: "+$1,240 / yr", w: 82 }, fidelity: { tag: "Fix portfolio drift", find: "Your Fidelity mix has drifted from target after the run-up. Yoshi can propose a rebalance.", value: "Back on target", w: 78 }, chase: { tag: "Sweep idle cash", find: "Cash is sitting in Chase earning almost nothing. Yoshi can sweep it to 4.8% APY.", value: "+$402 / yr", w: 70 }, bofa: { tag: "Sweep idle cash", find: "Idle cash in Bank of America could earn 4.8% instead of sitting still.", value: "+$360 / yr", w: 68 }, coinbase: { tag: "One net worth", find: "Your Coinbase crypto now rolls into a single balance Yoshi watches with everything else.", value: "Tracked", w: 45 }, wells: { tag: "Catch recurring fees", find: "With Wells Fargo visible, Yoshi can flag recurring fees and forgotten subscriptions.", value: "Watching", w: 35 }, capone: { tag: "Catch recurring fees", find: "Capital One spending is now visible. Yoshi spots fees and duplicate subscriptions.", value: "Watching", w: 34 }, }; const isDepository = (a) => a.type === "Checking" || a.type === "Savings"; const acctLabel = (a) => `${a.inst} ${a.type} · ${a.mask}`; const sameAcct = (a, b) => !!(a && b && a.instId === b.instId && a.mask === b.mask); /* ---- Connected account row ---- */ const ConnectedRow = ({ a, selected, onSelect, accent }) => (
{a.inst[0]}
{a.inst} {a.type}
{a.mask}
{onSelect && ( )} {!onSelect && a.type !== "Checking" && a.type !== "Savings" && ( )} {!onSelect && (a.type === "Checking" || a.type === "Savings") && ( ${Math.abs(a.bal).toLocaleString("en-US")} )}
); const Funding = ({ funding, setFunding, externals, setExternals, onNext, onLinkedNext, onSkipToAgent }) => { const [plaid, setPlaid] = useState(false); const [attempts, setAttempts] = useState(0); // how many times Plaid was opened const [plaidFailed, setPlaidFailed] = useState(false); // last attempt failed/exited const depAccts = externals.filter(isDepository); const hasBank = depAccts.length > 0; const hasInvest = externals.some((a) => a.type === "Brokerage" || a.type === "Crypto"); const hasAny = externals.length > 0; // state 1: bank linked → Next goes to funding page // state 2: invest-only → Next goes to funding page (will prompt bank link there) // state 3: failed/exited → Next skips to agent (no retry gating) const canProceed = hasAny || plaidFailed; const skipToAgent = !hasAny && plaidFailed; const onLinked = (accts) => { const next = [...externals]; accts.forEach((a) => { if (!next.some((x) => sameAcct(x, a))) next.push(a); }); setExternals(next); if (!funding) { const dep = next.find(isDepository); if (dep) setFunding(dep); } setPlaid(false); setPlaidFailed(false); onLinkedNext && onLinkedNext(); }; const onPlaidClose = () => { setPlaid(false); setPlaidFailed(true); }; const openPlaid = () => { setAttempts((n) => n + 1); setPlaid(true); }; // idle state: nothing linked yet, no failure const showIdle = !hasAny && !plaidFailed; // failure state: exited/errored, haven't succeeded const showRetry = !hasAny && plaidFailed; return ( Connect youraccounts. Link securely through Plaid to power Yoshi. The more accounts you connect, the more Yoshi can see and do. {/* ---- IDLE: nothing linked yet ---- */} {showIdle && ( <> Connections run through Plaid. Yoshi never sees your password, and every move still needs your approval. )} {/* ---- RETRY: Plaid failed or exited ---- */} {showRetry && ( <>
Connection didn't complete. That's okay, try again below.
You can always connect accounts later from the Accounts tab. )} {/* ---- STATE 1 + 2: Accounts linked ---- */} {hasAny && ( <> {/* All linked accounts — bank, brokerage, crypto, side by side */} Connected accounts
{externals.map((a, i) => ( ))}
{/* No bank — callout */} {!hasBank && (
You'll need to add a checking or savings account to fund Yoshi.
)} )} {hasAny ? ( Continue ) : plaidFailed ? ( Skip for now ) : null} {plaid && } ); }; /* ============================================================= 09 · PUT YOSHI TO WORK — fund the account so Yoshi has something to work with. Optional; skip and fund later. ============================================================= */ const FundingBankIcon = ({ account }) => { const src = account.instId === "chase" ? "../assets/lucid-chase.svg" : account.instId === "bofa" ? "../assets/lucid-boa.svg" : null; return ; }; const FundDeposit = ({ funding, setFunding, externals = [], setExternals, deposit, setDeposit, onNext, onSkip }) => { const [amt, setAmt] = useState(deposit || 0); const [other, setOther] = useState(false); const [customStr, setCustomStr] = useState(""); const [confirming, setConfirming] = useState(false); const [confirmed, setConfirmed] = useState(false); const [pickerOpen, setPickerOpen] = useState(false); const [plaid, setPlaid] = useState(false); const [fundingMethod, setFundingMethod] = useState(funding ? "bank" : ""); const web = usePlatform() === "web"; const banks = externals.filter(isDepository); const hasMultipleBanks = banks.length > 1; const availableBalance = Math.max(0, funding?.bal || 0); const presetAmounts = fundingPresetsFor(fundingMethod === "bank" && funding ? availableBalance : 5000); const overAvailable = fundingMethod === "bank" && funding && amt > availableBalance; const fundingMethodCta = amt <= 0 && fundingMethod ? "Choose an amount" : !fundingMethod ? "Choose a funding method" : !funding ? "Link bank account" : confirmed ? "Confirmed" : "Confirm"; useEffect(() => { if (fundingMethod === "bank" && funding && amt > availableBalance) { setAmt(0); setOther(false); setCustomStr(""); } }, [fundingMethod, funding, availableBalance]); const onLinked = (accts) => { const next = [...externals]; accts.forEach((a) => { if (!next.some((x) => sameAcct(x, a))) next.push(a); }); setExternals(next); if (!funding) { const dep = next.find(isDepository); if (dep) setFunding(dep); } setPlaid(false); }; const completeFunding = () => { setDeposit(amt); onNext({ skipped: false, amount: amt, method: "bank" }); }; const handleNext = () => { if (amt <= 0 || overAvailable || !fundingMethod) return; if (!funding) { setPlaid(true); return; } if (amt > 0 && !confirmed) { setConfirming(true); return; } completeFunding(); }; const onPasskeyConfirm = () => { setConfirming(false); setConfirmed(true); setTimeout(completeFunding, 400); }; return ( Put Yoshito work. Move money into your Yoshi account so it has something to work with. You can skip and fund anytime later. Funding method
{funding ? (
{pickerOpen && fundingMethod === "bank" && hasMultipleBanks && (
{banks.filter((b) => !sameAcct(b, funding)).map((a, i) => ( ))}
)}
) : ( )}
Amount · optional
{presetAmounts.map((p, i) => { const on = !other && amt === p; return ( ); })}
{other && (
{ const d = v.replace(/[^0-9]/g, ""); setCustomStr(d); setAmt(d ? parseInt(d, 10) : 0); }} /> {overAvailable && (
Amount can't be more than {usd(availableBalance)}.
)}
)} Deposits in your Yoshi account are FDIC-insured through Column N.A., Member FDIC. Authorization terms and conditions {confirmed ? <> Confirmed : <>{fundingMethodCta}} onSkip({ skipped: true, amount: 0, method: "none" })}>Skip to enter Yoshi {/* Passkey confirm — centered modal on web, bottom sheet on mobile */} {confirming && ( <>
setConfirming(false)} style={{ position: "absolute", inset: 0, zIndex: 50, background: "rgba(0,0,0,0.44)", backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)" }} /> {web ? (
Confirm
Authorise a transfer of ${amt.toLocaleString("en-US")} from your {funding ? `${funding.inst} ${funding.type}` : "funding source"}.
Use passkey
) : (
Confirm
Authorise a transfer of ${amt.toLocaleString("en-US")} from your {funding ? `${funding.inst} ${funding.type}` : "funding source"}.
Use passkey
)} )} {plaid && setPlaid(false)} onLinked={onLinked} />} ); }; /* ============================================================= 10 · DISCLOSURES — the last gate before Yoshi gets to work. Institutional register: concede the fine print, lay it out plainly. Tapping continue is the acknowledgment; the seam draws as you sign. ============================================================= */ const AckRow = ({ label, href, children, last }) => (
{label} {href && ( )}
{children}
); const CheckMark = ({ checked }) => ( {checked && } ); const AgreementCheckRow = ({ checked, onToggle, label, sub, href, onOpen, first, last }) => { const openProps = href ? { as: "a", href, target: "_blank", rel: "noopener noreferrer" } : {}; const openControl = onOpen ? ( ) : ( event.stopPropagation()} aria-label={`${label} agreements`} style={{ display: "inline-flex", color: "var(--ink-3)" }}> ); return (
{openControl}
); }; const PartnerRow = ({ name, role, member, href, onClick, first }) => { const common = { textDecoration: "none", width: "100%", display: "grid", gridTemplateColumns: "1fr auto", gap: 12, alignItems: "center", padding: "13px 0", background: "none", border: "none", borderTop: `1px ${first ? "solid" : "dashed"} var(--rule)`, color: "var(--ink)", cursor: "pointer", textAlign: "left" }; const body = ( <> {name} {role} · {member} Agreements ); return onClick ? : {body}; }; /* The Apex agreements + disclosures, as an in-app push screen reached from the brokerage row. Each document opens its PDF; the disclosures live at the foot. */ const APEX_DOCS = [ ["Customer Account Agreement", "https://storage.googleapis.com/apexclearing-account-agreements-prd-00/SCAA-OBD-20260318-EN.pdf"], ["Customer Information Brochure", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Apex-Direct-Customer-Infromation-Brochure.pdf"], ["Privacy Policy", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/AFBS-Privacy-Policy.pdf"], ["Terms of Service", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/AFBS-Terms-of-Service-Template.pdf"], ["CIP Notice", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/FINRA-CIP-Notice.pdf"], ["Business Continuity Plan", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Business-Continuity-Plan-Policy-11-08-2024.pdf"], ["Fee Sheet", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Apex-Direct-Misc-Services-Fee-Sheet-11.2024.pdf"], ]; const ApexAgreements = ({ onClose }) => { const link = { color: "var(--ink-2)", textDecoration: "underline", textUnderlineOffset: 2 }; const disc = { fontFamily: "var(--f-display)", fontSize: 11, color: "var(--ink-3)", lineHeight: 1.58, marginTop: 12, marginBottom: 0, textWrap: "pretty", letterSpacing: "0.003em" }; return (
} />
Documents
{APEX_DOCS.map(([name, url], i) => ( {name} ))}

Brokerage services are provided by Apex Clearing Corporation, an SEC-registered broker-dealer and member FINRA/SIPC. Learn more about Apex at{" "} FINRA BrokerCheck.

Investing in securities involves risks, including the potential loss of principal. Securities investments are not FDIC insured, are not bank guaranteed, and may lose value. Before investing, please carefully review your investment objectives, risk tolerance, charges, and expenses. Yoshi is not owned or operated by Apex Clearing Corporation.

For additional information about SIPC coverage, visit{" "} sipc.org.

); }; const Disclosures = ({ onNext }) => { const [signing, setSigning] = useState(false); const [showApex, setShowApex] = useState(false); const [checks, setChecks] = useState({ esign: false, column: false, apex: false }); const toggleCheck = (key) => setChecks((current) => ({ ...current, [key]: !current[key] })); const sign = () => { if (signing) return; setSigning(true); setTimeout(() => onNext(), 760); }; const selectAllAndContinue = () => { if (signing) return; setChecks({ esign: true, column: true, apex: true }); sign(); }; const link = { color: "var(--ink-2)", textDecoration: "underline", textUnderlineOffset: 2 }; return ( A bit of fine print. Check the boxes below to confirm you've read and accept the agreements. {/* Selection and document-opening controls are separate siblings. */}
toggleCheck("esign")} label="E-sign" sub="Electronic delivery and signature of your account documents." href="/esign-consent/" /> toggleCheck("column")} label="Column N.A." sub="Banking · Member FDIC" href="https://column.com/legal" /> toggleCheck("apex")} label="Apex Clearing Corporation" sub="Brokerage · Member FINRA/SIPC" onOpen={() => setShowApex(true)} />
{/* the required fine print, in full */}

Yoshi is a fintech company, not a bank. Cash Account and banking services provided by Column N.A., Member FDIC. FDIC insurance covers the failure of an insured depository institution. Brokerage services are provided by Apex Clearing Corporation, an SEC-registered broker-dealer and member FINRA/SIPC. Learn more about Apex at{" "} FINRA BrokerCheck.

{/* the seam draws across at the moment of signing — the brand's approval signature */}
{signing ? <> Signing… : <>Select all & continue} {showApex && setShowApex(false)} />} ); }; /* ============================================================= 12 · OFF TO WORK — account creation before external linking. ============================================================= */ const OffToWork = ({ accent = "#000000", onDone }) => { const [status, setStatus] = useState("creating"); useEffect(() => { const live = setTimeout(() => setStatus("live"), 2400); const done = setTimeout(() => { onDone && onDone(); }, 3800); return () => { clearTimeout(live); clearTimeout(done); }; }, [onDone]); const ink = "var(--ink)"; const live = status === "live"; return (
{live ? : } {live ? "Your accounts are live!" : "Creating your accounts."}
Yoshi is off
to work.
); }; Object.assign(window, { PlaidLink, BANKS, Funding, FundDeposit, Disclosures, OffToWork });