// dash-loans.jsx — Loans tab: product catalogue + apply flow const LOAN_PRODUCTS = [ { id: 'auto', title: 'Auto Loan', tagline: 'Apply for a car loan', apr: 'from 5.9%', term: '36–72 mo', max: '$250,000', accent: '#EF4444', glyph: ( ), fields: [ { id: 'amount', label: 'Loan amount', type: 'number', placeholder: '45,000' }, { id: 'vehicle', label: 'Vehicle', type: 'text', placeholder: '2025 Porsche Taycan' }, { id: 'term', label: 'Term', type: 'select', options: ['36 months', '48 months', '60 months', '72 months'] }, ], }, { id: 'home', title: 'Home Loan', tagline: 'Get a home loan', apr: 'from 6.4%', term: '15–30 yr', max: '$3,000,000', accent: '#10B981', glyph: ( ), fields: [ { id: 'amount', label: 'Home price', type: 'number', placeholder: '1,850,000' }, { id: 'down', label: 'Down payment', type: 'number', placeholder: '370,000' }, { id: 'address', label: 'Property address', type: 'text', placeholder: '1410 Ocean Ave, Santa Monica' }, { id: 'term', label: 'Term', type: 'select', options: ['15 years · fixed', '20 years · fixed', '30 years · fixed', '7/1 ARM'] }, ], }, { id: 'personal', title: 'Personal Loan', tagline: 'Borrow money today', apr: 'from 7.9%', term: '12–60 mo', max: '$100,000', accent: '#A78BFA', glyph: ( ), fields: [ { id: 'amount', label: 'Amount', type: 'number', placeholder: '25,000' }, { id: 'purpose', label: 'Purpose', type: 'select', options: ['Debt consolidation', 'Home improvement', 'Medical', 'Wedding', 'Other'] }, { id: 'term', label: 'Term', type: 'select', options: ['12 months', '24 months', '36 months', '48 months', '60 months'] }, ], }, { id: 'car-equity', title: 'Car Equity', tagline: 'Get money against your car', apr: 'from 8.4%', term: '12–48 mo', max: '$80,000', accent: '#F59E0B', glyph: ( ), fields: [ { id: 'vehicle', label: 'Your vehicle', type: 'text', placeholder: '2023 Range Rover Sport' }, { id: 'vin', label: 'VIN', type: 'text', placeholder: 'SAL***********' }, { id: 'amount', label: 'Cash-out amount', type: 'number', placeholder: '32,000' }, ], }, { id: 'heloc', title: 'HELOC', tagline: 'Get money against your house', apr: 'from 7.2%', term: '10 yr draw', max: '$750,000', accent: '#3B82F6', glyph: ( ), fields: [ { id: 'address', label: 'Property', type: 'text', placeholder: '1410 Ocean Ave, Santa Monica' }, { id: 'value', label: 'Est. home value', type: 'number', placeholder: '2,400,000' }, { id: 'mortgage', label: 'Mortgage balance', type: 'number', placeholder: '1,100,000' }, { id: 'amount', label: 'Line requested', type: 'number', placeholder: '400,000' }, ], }, { id: 'btc-installment', title: 'Bitcoin on Installment', tagline: 'Buy BTC now. Pay over time.', apr: 'Lock price today', term: '3–24 mo', max: '$500,000', accent: '#FF9F0A', featured: true, installment: true, glyph: ( ), }, { id: 'btc', title: 'Bitcoin-backed Loan', tagline: 'Borrow against your Bitcoin', apr: 'from 5.4%', term: 'Up to 50% LTV', max: '50% LTV', accent: '#FF9F0A', featured: true, glyph: ( ), fields: [ { id: 'amount', label: 'Borrow amount', type: 'slider-btc' }, { id: 'term', label: 'Term', type: 'select', options: ['6 months', '12 months', '24 months', '36 months'] }, { id: 'disburse', label: 'Disburse to', type: 'select', options: ['USD Wallet (instant)', 'External bank account', 'Wire transfer'] }, ], }, ]; function LoanCard({ product, onClick }) { if (product.installment) { return ( ); } const featured = product.featured; return ( ); } function InstallmentHero({ product, btcPrice, onClick }) { return ( ); } const LOAN_GROUPS = [ { id: 'btc', label: 'Bitcoin-backed', ids: ['btc'] }, { id: 'property', label: 'Home & real estate', ids: ['home', 'heloc'] }, { id: 'auto', label: 'Auto', ids: ['auto', 'car-equity'] }, { id: 'personal', label: 'Personal', ids: ['personal'] }, ]; function LoansTab({ btcPrice }) { const [applying, setApplying] = React.useState(null); const [managing, setManaging] = React.useState(false); const [activeLoans, setActiveLoans] = React.useState(INITIAL_ACTIVE_LOANS); const installment = LOAN_PRODUCTS.find(p => p.installment); const otherProducts = LOAN_PRODUCTS.filter(p => !p.installment); const totalBalance = activeLoans.reduce((s, l) => s + l.balance, 0); const nextDate = activeLoans[0]?.nextDate || '—'; const addInstallmentPlan = (plan) => { setActiveLoans(prev => [plan, ...prev]); }; return ( {applying && applying.installment && setApplying(null)} onCreate={addInstallmentPlan} onOpenManage={() => { setApplying(null); setManaging(true); }} />} {applying && !applying.installment && setApplying(null)} />} {managing && setManaging(false)} />} }>
{/* Hero: Bitcoin Installment */} {installment && setApplying(installment)} />} {/* Active loans — compact strip */} {/* Grouped catalogue */} {LOAN_GROUPS.map(g => { const products = otherProducts.filter(p => g.ids.includes(p.id)); if (products.length === 0) return null; return (
{g.label}
{products.map((p, i) => ( ))}
); })}
All rates shown are soft-pull estimates
); } // ═══ MANAGE LOANS MODAL ═══════════════════════════════════════════════════ const INITIAL_ACTIVE_LOANS = [ { id: 'home-1', title: 'Home Loan', subtitle: '30-yr fixed · 1410 Ocean Ave', accent: '#10B981', glyph: ( ), balance: 218_400, original: 220_000, apr: 6.4, monthly: 1_377, nextDate: 'May 1, 2026', paidOff: 0.7, termLabel: '357 of 360 payments remaining', transactions: [ { d: 'Apr 1', a: 1377, status: 'Paid' }, { d: 'Mar 1', a: 1377, status: 'Paid' }, { d: 'Feb 1', a: 1377, status: 'Paid' }, ], }, { id: 'btc-1', title: 'Bitcoin-backed Loan', subtitle: '12 mo · 0.9 BTC collateral', accent: '#FF9F0A', glyph: ( ), balance: 61_600, original: 62_000, apr: 5.4, monthly: 279, nextDate: 'May 1, 2026', paidOff: 5, termLabel: '11 of 12 payments remaining', ltv: 32.4, liquidation: 47_820, transactions: [ { d: 'Apr 1', a: 279, status: 'Paid' }, { d: 'Mar 15', a: 400, status: 'Extra principal' }, { d: 'Mar 1', a: 279, status: 'Paid' }, ], }, ]; function ManageLoansModal({ btcPrice, loans, onClose }) { const [active, setActive] = React.useState(null); // loan id or null const currentLoan = loans.find(l => l.id === active); return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '92%', overflowY: 'auto', background: '#0a0a0f', borderTopLeftRadius: 24, borderTopRightRadius: 24, border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none', padding: '14px 20px 28px', animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)', }}>
{!active ? ( <>
Active Loans
Manage your loans
Tap a loan to view details, make a payment, or pay off early.
{loans.map(l => ( ))}
Total monthly payment {fmtUsd(loans.reduce((s, l) => s + l.monthly, 0), { decimals: 0 })} auto-debits from your USD wallet on the 1st.
) : currentLoan?.kind === 'installment' ? ( setActive(null)} /> ) : ( setActive(null)} /> )}
); } function LoanDetail({ loan, onBack }) { const [action, setAction] = React.useState(null); // 'pay' | 'payoff' | null const [payAmount, setPayAmount] = React.useState(loan.monthly); const [success, setSuccess] = React.useState(null); if (success) { return (
{success.title}
{success.sub}
); } return (
{loan.glyph}
{loan.title}
{loan.subtitle}
{/* Balance + progress */}
Remaining balance
{fmtUsd(loan.balance, { decimals: 0 })}
{loan.paidOff}% paid off of {fmtUsd(loan.original, { decimals: 0 })}
{/* Stats */}
{[ { l: 'Next payment', v: fmtUsd(loan.monthly, { decimals: 0 }) }, { l: 'Due', v: loan.nextDate }, { l: 'APR', v: `${loan.apr}%` }, { l: 'Status', v: loan.termLabel.split(' of ')[0] + ' left', small: true }, ...(loan.ltv ? [{ l: 'LTV', v: `${loan.ltv}%`, c: '#10B981' }] : []), ...(loan.liquidation ? [{ l: 'Liq. price', v: fmtUsd(loan.liquidation, { decimals: 0 }), c: '#EF4444' }] : []), ].map((f, i) => (
{f.l}
{f.v}
))}
{/* Actions */} {!action && (
)} {action === 'pay' && (
Payment amount
$ setPayAmount(Number(e.target.value))} style={{ flex: 1, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: '#fff', fontSize: 18, fontFamily: DASH_MONO, fontWeight: 600, boxSizing: 'border-box', outline: 'none' }}/>
{[{ l: 'Minimum', v: loan.monthly }, { l: 'x2', v: loan.monthly * 2 }, { l: 'x3', v: loan.monthly * 3 }].map(q => ( ))}
)} {action === 'payoff' && (
Full Payoff
Close this loan today with a single payment. {loan.id === 'btc-1' ? 'Your BTC collateral will be released to your wallet immediately.' : 'No early-payoff penalty.'}
Payoff amount {fmtUsd(loan.balance, { decimals: 0 })}
)} {/* Transactions */}
Recent activity
{loan.transactions.map((t, i) => (
{t.status}
{t.d}
{fmtUsd(t.a, { decimals: 0 })}
))}
Auto-debit from USD wallet · 1st of each month
); } // ═══ APPLY MODAL ══════════════════════════════════════════════════════════ function LoanApplyModal({ product, btcPrice, onClose }) { const [stage, setStage] = React.useState('form'); // 'form' | 'review' | 'approved' const [vals, setVals] = React.useState({}); const [btcBorrow, setBtcBorrow] = React.useState(120_000); const btcCollateral = MOCK.btc * btcPrice; const maxBtcLoan = btcCollateral * 0.5; const currentLtv = (btcBorrow / btcCollateral) * 100; const liquidation = btcPrice * (btcBorrow / (btcCollateral * 0.85)); const setVal = (k, v) => setVals(x => ({ ...x, [k]: v })); return (
{/* handle */}
{/* header */}
{product.glyph}
{product.title}
{product.apr} · {product.term} · up to {product.max}
{stage === 'form' && (
{/* What we know about you */}
What we already know
{[ { l: 'FICO', v: '812' }, { l: 'Income', v: '$41,000/mo' }, { l: 'DTI', v: '15.1%' }, { l: 'ID', v: 'Verified' }, ].map(x => (
{x.l}
{x.v}
))}
We're reusing your verification — no hard pull, no re-uploads. Want to update anything before applying?
{product.fields.map(field => (
{field.type === 'select' ? ( ) : field.type === 'slider-btc' ? (
Borrow amount
{fmtUsd(btcBorrow, { decimals: 0 })}
setBtcBorrow(+e.target.value)} style={{ width: '100%', accentColor: '#FF9F0A' }}/>
LTV 40 ? '#F59E0B' : '#10B981', fontWeight: 700 }}>{currentLtv.toFixed(1)}%
Liq. {fmtUsd(liquidation, { decimals: 0 })}
Collateral {MOCK.btc.toFixed(3)} BTC
) : ( setVal(field.id, e.target.value)} style={{ width: '100%', padding: '14px', borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'Inter, sans-serif', }} /> )}
))}
SOFT PULL · WON'T AFFECT YOUR SCORE
)} {stage === 'review' && (
Pre-qualified
{product.apr}
Estimated payment · auto-debit from USD wallet
{product.id === 'btc' ? ( <> ) : product.fields.map(f => ( ))}
)} {stage === 'approved' && (
You're approved.
Funds will land in your USD wallet {product.id === 'btc' ? 'instantly' : 'within 1 business day'}.
)}
); } // ═══ INSTALLMENT DETAIL (for an active installment plan) ══════════════════ // ═══ FUNDING SOURCE PICKER ════════════════════════════════════════════════ const FUNDING_SOURCES = [ { id: 'usd', label: 'USD Wallet', sub: 'Balance $4,283.19', c: '#10B981', icon: }, { id: 'btc', label: 'BTC Wallet', sub: '0.4821 ₿ · auto-convert', c: '#FF9F0A', icon: }, { id: 'chase', label: 'Chase ···4821', sub: 'Checking · ACH 1–2 days', c: '#3B82F6', icon: }, { id: 'amex', label: 'Amex ···1007', sub: 'Platinum · instant', c: '#A78BFA', icon: }, { id: 'new', label: 'Add new account', sub: 'Link a bank via Plaid', c: 'rgba(245,245,247,0.55)', isNew: true, icon: }, ]; function FundingSourcePicker({ current, onSelect, onClose }) { return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '80%', overflowY: 'auto', background: '#0a0a0f', borderTopLeftRadius: 24, borderTopRightRadius: 24, border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none', padding: '14px 20px 24px', animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)', }}>
Auto-pay source
Change funding source
Your monthly payment will auto-debit from this account on the 1st.
{FUNDING_SOURCES.map((s, i, a) => { const isActive = s.label === current; return ( ); })}
); } function InstallmentDetail({ loan, onBack }) { const [copied, setCopied] = React.useState(false); const [payAmount, setPayAmount] = React.useState(loan.monthly); const [success, setSuccess] = React.useState(null); const [fundingSource, setFundingSource] = React.useState(loan.fundingSource); const [changingSource, setChangingSource] = React.useState(false); const copyAddr = () => { try { navigator.clipboard?.writeText(loan.walletAddress); } catch (e) { /* ignore — not allowed in some embeds */ } setCopied(true); setTimeout(() => setCopied(false), 1400); }; if (success) { return (
{success.title}
{success.sub}
); } return (
{loan.glyph}
{loan.title}
ACTIVE
Plan #{loan.planId}
{/* Hero: BTC amount locked at price + wallet address */}
Total Bitcoin Purchased
{loan.btcAmount.toFixed(6)} ₿
Locked at {fmtUsd(loan.lockedPrice, { decimals: 0 })} · {fmtUsd(loan.btcAmount * loan.lockedPrice, { decimals: 0 })} total
{/* Progress */}
{loan.paidOff.toFixed(0)}% paid {loan.btcAmount.toFixed(6)} ₿ in custody
{loan.paidOff}% paid {loan.termLabel}
{/* Wallet address — compact */}
Wallet address
SEGREGATED
{loan.walletAddress}
{/* Open Amount + Next Payment */}
Open Amount
{fmtUsd(loan.openAmount, { decimals: 0 })}
of {fmtUsd(loan.original, { decimals: 0 })}
Next Payment
{fmtUsd(loan.monthly, { decimals: 0 })}
{loan.nextDate}
{/* Funding source */}
Auto-pay source
{fundingSource}
{changingSource && ( { setFundingSource(src); setChangingSource(false); }} onClose={() => setChangingSource(false)} /> )} {/* Pay amount input */}
Make a payment
{[ { lbl: 'Minimum', val: loan.monthly }, { lbl: '2×', val: loan.monthly * 2 }, { lbl: 'Full', val: loan.openAmount }, ].map(p => ( ))}
$ { const cleaned = e.target.value.replace(/[^0-9.]/g, ''); const n = Number(cleaned); if (!isNaN(n)) setPayAmount(Math.max(0, Math.min(loan.openAmount, n))); }} style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontFamily: DASH_DISPLAY, fontSize: 26, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em', width: '100%', padding: 0, }} />
Min {fmtUsd(loan.monthly, { decimals: 2 })} · BTC releases in full once paid off
{/* Pay button */} {/* Recent payments */}
Payment history
{loan.transactions.map((t, i) => (
{t.status}
{t.d}
{fmtUsd(t.a, { decimals: 0 })}
))}
); } // ═══ INSTALLMENT FLOW ═════════════════════════════════════════════════════ function InstallmentFlow({ product, btcPrice, onClose, onCreate, onOpenManage }) { const [step, setStep] = React.useState(0); // 0 calculate · 1 funding · 2 review · 3 first-payment · 4 done const [createdPlan, setCreatedPlan] = React.useState(null); // snapshot at creation time // btcnow.com model: user inputs BTC amount OR monthly payment amount, plus term (years). // APR is fixed 15% (10-18% range marketed). const APR = 0.15; const [inputMode, setInputMode] = React.useState('btc'); // 'btc' | 'payment' const [payDisplay, setPayDisplay] = React.useState('usd'); // 'usd' | 'btc' const [btc, setBtc] = React.useState(0.1); // user-chosen BTC amount const [months, setMonths] = React.useState(120); // term in months (10yr default) const [targetPayment, setTargetPayment] = React.useState(500); // USD/mo if inputMode === 'payment' const [funding, setFunding] = React.useState('usd'); // amortized monthly payment = P * r / (1 - (1+r)^-n) const amort = (P, aprAnnual, n) => { const r = aprAnnual / 12; if (r === 0) return P / n; return P * r / (1 - Math.pow(1 + r, -n)); }; // inverse: principal from monthly payment const principalFromPayment = (pmt, aprAnnual, n) => { const r = aprAnnual / 12; if (r === 0) return pmt * n; return pmt * (1 - Math.pow(1 + r, -n)) / r; }; // Derived numbers — depend on input mode const principal = inputMode === 'btc' ? btc * btcPrice : principalFromPayment(targetPayment, APR, months); const btcAmount = inputMode === 'btc' ? btc : principal / btcPrice; const monthly = inputMode === 'btc' ? amort(principal, APR, months) : targetPayment; const usd = principal; const totalPaid = monthly * months; const today = new Date(); const schedule = Array.from({ length: months }, (_, i) => { const d = new Date(today.getFullYear(), today.getMonth() + i + 1, 1); return { idx: i + 1, date: d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), btc: btcAmount / months }; }); const stepLabels = ['Calculate plan', 'Funding', 'Review', 'First payment']; const termYears = [1, 2, 3, 5, 7, 10]; return (
e.stopPropagation()} style={{ width: '100%', height: '94%', overflowY: 'auto', background: '#0a0a0f', borderTopLeftRadius: 24, borderTopRightRadius: 24, border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none', padding: '14px 20px 28px', animation: 'loanSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)', }}>
{/* Progress */}
{stepLabels.map((_, i) => (
))}
Bitcoin on Installment · Step {step + 1} of 4
{stepLabels[step]}
{step === 0 && ( <>
Type in either field — the other updates automatically. Price locks at {fmtUsd(btcPrice, { decimals: 0 })}/BTC.
{/* YOU BUY — editable BTC amount */}
You buy
Current Spot Price: {fmtUsd(btcPrice, { decimals: 0 })}
setInputMode('btc')} onChange={e => { const v = e.target.value.replace(/[^0-9.]/g, ''); setInputMode('btc'); setBtc(v === '' ? 0 : Number(v)); }} style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontFamily: DASH_DISPLAY, fontSize: 36, fontWeight: 700, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1, padding: 0, }} />
₿BTC
{/* TERM — inline dropdown between the two panels */}
Term
{/* MONTHLY PAYMENT — editable USD */}
Monthly payment
BTC Now Installment Price: {fmtUsd(totalPaid, { decimals: 0 })}
setInputMode('payment')} onChange={e => { const v = e.target.value.replace(/[^0-9.]/g, ''); setInputMode('payment'); setTargetPayment(v === '' ? 0 : Number(v)); }} style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontFamily: DASH_DISPLAY, fontSize: 36, fontWeight: 700, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1, padding: 0, }} />
$USD
Subject to approval · Soft pull only
)} {step === 1 && ( <>
Where should we auto-debit {fmtUsd(monthly, { decimals: 0 })} each month?
{[ { id: 'usd', l: 'USD Wallet', s: 'Balance: $128,420 · no fee', icon: '$' }, { id: 'bank', l: 'Chase ···4821', s: 'Linked checking · no fee', icon: '🏦' }, { id: 'addbank', l: 'Add bank account', s: 'Link via Plaid · instant verification', icon: '+' }, ].map(o => ( ))}
)} {step === 2 && ( <>
Price locked
{btcAmount.toFixed(6)} BTC
@ {fmtUsd(btcPrice, { decimals: 0 })} per BTC · today's rate
Your {btcAmount.toFixed(6)} BTC is held in a segregated custody account in a fully bankruptcy-remote structure until all payments have been made. Your BTC is released to your wallet once the plan is paid off.
)} {step === 3 && ( <>
Make your first payment to activate your plan. We'll auto-debit the rest on the 1st of each month.
Payment 1 of {months}
{fmtUsd(monthly, { decimals: 0 })}
BTC releases in full once all {months} payments are made
{/* Mini schedule */}
Upcoming payments
{schedule.slice(0, 4).map((s, i) => (
Payment {s.idx}
{s.date}
{fmtUsd(monthly, { decimals: 0 })}
+{s.btc.toFixed(6)} ₿
))} {months > 4 &&
+ {months - 4} more payments
}
SECURED BY BTC COLLATERAL · NO HARD CREDIT PULL
)} {step === 4 && (
{/* Success header */}
Plan created
BTC locked at {fmtUsd(createdPlan?.lockedPrice ?? btcPrice, { decimals: 0 })} · Plan #{createdPlan?.planId ?? 'IN------'}
{/* Plan overview card */}
Installment plan overview
{/* Bitcoin Amount — hero */}
Bitcoin Amount
{(createdPlan?.btcAmount ?? btcAmount).toFixed(6)} ₿
≈ {fmtUsd((createdPlan?.btcAmount ?? btcAmount) * (createdPlan?.lockedPrice ?? btcPrice), { decimals: 0 })} locked at {fmtUsd(createdPlan?.lockedPrice ?? btcPrice, { decimals: 0 })}
{/* Open Amount + Next Payment — 2-up */}
Open Amount
{fmtUsd(createdPlan?.openAmount ?? (totalPaid - monthly), { decimals: 0 })}
of {fmtUsd(createdPlan?.original ?? totalPaid, { decimals: 0 })} total
Next Payment Due
{fmtUsd(createdPlan?.monthly ?? monthly, { decimals: 0 })}
{createdPlan?.nextDate ?? schedule[0].date}
{/* Wallet address */}
Bitcoin Wallet Address
SEGREGATED CUSTODY
{createdPlan?.walletAddress ?? 'bc1q7x9v2m4k8n3p5r6t1y2u3i4o5p6a7s8d9f0g1h'}
{/* Payment schedule preview */}
Upcoming payments
1 of {months} paid
{schedule.slice(0, 3).map((s, i) => (
{s.date}
{fmtUsd(monthly, { decimals: 0 })}
))} {months > 3 &&
+ {months - 3} more scheduled
}
)}
); } function ReviewRow({ label, value, isLast }) { return (
{label} {value}
); } Object.assign(window, { LoansTab });