// Veridian Markets — My Portfolio. // Sections (top→bottom): // 1. Connect accounts // 2. Learn progress // 3. Portfolio summary (KPIs + performance chart) // 4. Risk & trajectory (donut + table) // 5. Holdings // 6. Portfolio supply chain const { useState: useStateMP, useEffect: useEffectMP, useMemo: useMemoMP } = React; // ── helpers ─────────────────────────────────────────────────────────────────── const num = s => parseFloat(String(s).replace(/[^0-9.\-]/g,'')) || 0; const money = (n, dec=0) => '$' + Number(n).toLocaleString('en-US',{minimumFractionDigits:dec,maximumFractionDigits:dec}); const signMoney = (n, dec=0) => (n>=0?'+':'')+money(n,dec); const signPct = n => (n>=0?'+':'')+n.toFixed(2)+'%'; const dir = n => n >= 0 ? 'up' : 'down'; function walk(seed,n,drift=0){ const out=[]; let y=0.5; for(let i=0;i`${i?'L':'M'} ${(i/(vals.length-1))*w} ${pad+(1-(v-mn)/rng)*(h-pad*2)}`).join(' '); } // ── mock data ───────────────────────────────────────────────────────────────── const PF_HOLDINGS_RAW = [ { ticker:'AAPL', shares:120, avg:181.40 }, { ticker:'MSFT', shares:60, avg:301.20 }, { ticker:'NVDA', shares:25, avg:512.00 }, { ticker:'AMZN', shares:80, avg:139.10 }, { ticker:'GOOGL',shares:90, avg:131.80 }, { ticker:'JPM', shares:70, avg:184.50 }, { ticker:'V', shares:40, avg:232.00 }, ]; const PF_CASH = 18450; const PF_RISK = { AAPL: { tier:'medium', score:2, note:'China ops · EU DMA regulatory exposure' }, MSFT: { tier:'low', score:1, note:'Diversified cloud revenue · strong moat' }, NVDA: { tier:'high', score:3, note:'AI cycle · valuation · export controls' }, AMZN: { tier:'low', score:1, note:'AWS dominance · consumer diversification' }, GOOGL:{ tier:'medium', score:2, note:'Search disruption risk · antitrust' }, JPM: { tier:'medium', score:2, note:'Rate sensitivity · credit cycle exposure' }, V: { tier:'low', score:1, note:'Payment rails moat · low capex' }, }; const RISK_COLOR = { high:VM.down, medium:VM.terra, low:VM.up }; const RISK_BG = { high:'rgba(192,86,59,0.10)', medium:'rgba(196,106,59,0.10)', low:'rgba(29,158,117,0.10)' }; // Connect-accounts feature hidden 2026-07-21 per user request — flip true to bring it back. const SHOW_CONNECT_ACCOUNTS = false; const PF_BROKERS = [ { id:'t212', name:'Trading 212', icon:'trending-up', color:'#1E5BD6', featured:true }, { id:'ibkr', name:'Interactive Brokers', icon:'building-bank', color:'#A8512A' }, { id:'rh', name:'Robinhood', icon:'feather', color:'#1D9E75' }, { id:'cb', name:'Coinbase', icon:'currency-bitcoin',color:'#185FA5' }, { id:'vg', name:'Vanguard', icon:'shield-half', color:'#7A1F2B' }, { id:'bin', name:'Binance', icon:'coin', color:'#C49A3B' }, ]; const PF_BROKERS_KEY = 'vm_pf_brokers'; const LEARN_PROGRESS = { course: 'Using Veridian Markets', module: 'Reading a supply chain map', pct: 62, next: 'How to drill down from the principle company', timeLeft: '12 min left', streak: 4, done: 3, total: 11, }; const PF_RANGES = { '1W':7,'1M':24,'3M':36,'1Y':52,'5Y':60,'MAX':72 }; const PF_STEPS = [ ...(SHOW_CONNECT_ACCOUNTS ? [{ sel:'[data-tour="vm-pf-connect"]', title:'Connect a broker.', body:'Link a brokerage account to import your holdings automatically. Click any card to connect or disconnect. Veridian requests read-only access only — it cannot place trades or move funds on your behalf.' }] : []), { sel:'[data-tour="vm-pf-learning"]', title:'Your learning progress.', body:'Picks up where you left off. The progress bar tracks your current module; the streak counter shows consecutive days of activity. Hit Continue to go straight back in, or go to the Learn page to browse all courses.' }, { sel:'[data-tour="vm-pf-overview"]', title:'Portfolio summary.', body:'Total value, today\'s change, total return since cost basis, and available cash on the left. The performance chart on the right shows the full portfolio trajectory — switch time ranges to zoom into a specific period.' }, { sel:'[data-tour="vm-pf-risk"]', title:'Risk and trajectory.', body:'Holdings are bucketed into Low, Medium, and High risk tiers. The donut shows concentration by position value — a large slice in High means your biggest positions carry the most risk. The notes column explains the specific exposure for each holding.' }, { sel:'[data-tour="vm-pf-holdings"]', title:'Holdings.', body:'Each row shows shares, current price, position value, today\'s move, portfolio weight, and risk tier. Click any row to open that company\'s full dashboard — financials, supply chain, patents, and history.' }, { sel:'[data-tour="vm-pf-scn"]', title:'Portfolio supply chain.', body:'Select any holding to load its dependency map. See who it buys from and who it sells to — and how that overlaps across your other positions. Add any ticker to the view even if it\'s not in your portfolio.' }, ]; // ── main component ──────────────────────────────────────────────────────────── function MyPortfolio({ go, user, isMobile }) { const [tutorialOpen, setTutorialOpen] = useStateMP(false); const [connected, setConnected] = useStateMP(() => { try { return new Set(JSON.parse(localStorage.getItem(PF_BROKERS_KEY))||[]); } catch { return new Set(); } }); useEffectMP(()=>{ try{localStorage.setItem(PF_BROKERS_KEY,JSON.stringify([...connected]));}catch{} },[connected]); const toggleBroker = id => setConnected(s=>{ const n=new Set(s); n.has(id)?n.delete(id):n.add(id); return n; }); const pf = useMemoMP(()=>{ const rows = PF_HOLDINGS_RAW.map(h=>{ const c = VM_COMPANIES.find(x=>x.ticker===h.ticker)||{}; const price=num(c.price), value=price*h.shares, cost=h.avg*h.shares, dayPct=num(c.chg); const risk = PF_RISK[h.ticker] || { tier:'medium', score:2, note:'—' }; return {...h, name:c.name||h.ticker, dir:c.dir, price, value, cost, pl:value-cost, plPct:((value-cost)/cost)*100, dayPct, dayChg:value*dayPct/100, risk }; }); const invested = rows.reduce((s,r)=>s+r.value,0); const total = invested+PF_CASH; rows.forEach(r=>{ r.weight=(r.value/invested)*100; }); const dayChg = rows.reduce((s,r)=>s+r.dayChg,0); const totalCost = rows.reduce((s,r)=>s+r.cost,0); const totalPL = invested-totalCost; // risk donut slices const riskSlices = rows.map(r=>({ label:r.ticker, value:r.value, color:RISK_COLOR[r.risk.tier]||VM.faint })); return { rows, invested, total, dayChg, dayPct:dayChg/invested*100, totalPL, totalPLPct:totalPL/totalCost*100, riskSlices }; },[]); return (
{/* header */}
Your account

My Account.

{user &&
Signed in as {user.name||user.email}
}
{/* ── 1. Connect accounts (hidden 2026-07-21, SHOW_CONNECT_ACCOUNTS flag above) ── */} {SHOW_CONNECT_ACCOUNTS && (
{PF_BROKERS.map(b=>toggleBroker(b.id)} />)}
{connected.size > 0 && ( {connected.size} account{connected.size>1?'s':''} linked · data sync coming with backend )} )} {/* ── 2. Learn progress ───────────────────────────────────────────── */}
{LEARN_PROGRESS.course.toUpperCase()}
{LEARN_PROGRESS.module}
{LEARN_PROGRESS.timeLeft}
{LEARN_PROGRESS.pct}% · Next: {LEARN_PROGRESS.next} {LEARN_PROGRESS.done}/{LEARN_PROGRESS.total} modules
go('learn')} style={{ fontSize:13, padding:'8px 16px', whiteSpace:'nowrap' }}> Continue {LEARN_PROGRESS.streak}-day streak
{/* ── 3. Portfolio summary ────────────────────────────────────────── */}
{/* ── 4. Risk & trajectory ────────────────────────────────────────── */}
{[['low','Low'],['medium','Medium'],['high','High']].map(([tier,lbl])=>(
{lbl}
))}
{['high','medium','low'].map(tier=>{ const holdings = pf.rows.filter(r=>r.risk.tier===tier); return (
{tier} risk {holdings.length===0 ? None : holdings.map(r=>(
{r.ticker} =0?'up':'down'}>{signPct(r.dayPct)}
)) }
); })}
Risk notes {pf.rows.sort((a,b)=>b.risk.score-a.risk.score).map((r)=>(
{r.ticker} {r.risk.note}
))}
{/* ── 5. Holdings ─────────────────────────────────────────────────── */} {/* ── 6. Portfolio supply chain ────────────────────────────────────── */} {tutorialOpen && setTutorialOpen(false)} />}
); } // ── Section wrapper ─────────────────────────────────────────────────────────── function PfSection({ title, icon, children, style, dataTour }) { return (
{icon && } {title}
{children}
); } // ── Broker buttons ──────────────────────────────────────────────────────────── function BrokerButton({ b, on, onToggle }) { const [hover, setHover] = useStateMP(false); return ( ); } // ── KPIs ────────────────────────────────────────────────────────────────────── function PfKPIs({ pf }) { const kpis = [ { label:'Total value', value:money(pf.total) }, { label:'Today', value:signMoney(pf.dayChg), dir:dir(pf.dayChg), extra:signPct(pf.dayPct) }, { label:'Total return', value:signMoney(pf.totalPL), dir:dir(pf.totalPL), extra:signPct(pf.totalPLPct) }, { label:'Cash available', value:money(PF_CASH), sub:'Buying power' }, ]; return (
{kpis.map((k,i)=>(
{k.value} {k.extra &&
{k.extra}
} {k.sub &&
{k.sub}
}
))}
); } // ── Performance chart ───────────────────────────────────────────────────────── function PfPerformance({ pf }) { const [range, setRange] = useStateMP('1Y'); const n = PF_RANGES[range]; const vals = useMemoMP(()=>walk(range.length+n,n,0.012),[range]); const w=700, h=140; const change = ((vals[vals.length-1]-vals[0])/(vals[0]||1))*100; const up = change>=0; const col = up?VM.up:VM.down, ink=up?VM.upInk:VM.downInk; const lp = linePath(vals,w,h); return (
{money(pf.total)}
{(up?'▲ ':'▼ ')+signPct(change)} over {range}
{Object.keys(PF_RANGES).map(r=>( ))}
{[0.25,0.5,0.75].map(g=>)}
); } // ── Risk donut ──────────────────────────────────────────────────────────────── function RiskDonut({ slices }) { const size=180, thick=22, r=(size-thick)/2, c=2*Math.PI*r; const total = slices.reduce((s,d)=>s+d.value,0)||1; let acc=0; return ( {slices.map((d,i)=>{ const len=(d.value/total)*c, off=-acc; acc+=len; return ; })} BY RISK {slices.length} positions ); } // ── Holdings table ──────────────────────────────────────────────────────────── function PfHoldings({ pf, go, isMobile }) { return (
{!isMobile && (
{['Holding','Shares','Price','Value','Today','Weight','Risk'].map((h,i)=>( ))}
)} {pf.rows.map((r,i)=>{ const c = VM_COMPANIES.find(x=>x.ticker===r.ticker); if(isMobile) return (
c&&go('dashboard',c)} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:10, padding:'11px 2px', cursor:'pointer', borderBottom:i
{r.ticker}
{r.shares} sh · {r.weight.toFixed(0)}%
{money(r.value)}
{signPct(r.dayPct)}
); return (
c&&go('dashboard',c)} style={{ display:'grid', gridTemplateColumns:'1.6fr 0.7fr 0.9fr 1fr 0.8fr 1.1fr 0.7fr', gap:8, alignItems:'center', padding:'11px 4px', cursor:'pointer', borderBottom:i
{r.ticker}{' '} {r.name}
{r.shares} ${r.price.toFixed(2)} {money(r.value)} {signPct(r.dayPct)}
{r.weight.toFixed(0)}%
{r.risk.tier}
); })}
{money(PF_CASH)}
); } // ── Portfolio supply chain ──────────────────────────────────────────────────── function PortfolioScn({ pf }) { const tickers = pf.rows.map(r=>r.ticker); const [active, setActive] = useStateMP(tickers[0]||'AAPL'); const [input, setInput] = useStateMP(''); const [extra, setExtra] = useStateMP([]); function addTicker() { const t = input.trim().toUpperCase(); if(!t || extra.includes(t) || tickers.includes(t)) { setInput(''); return; } setExtra(e=>[...e,t]); setInput(''); } const all = [...tickers, ...extra]; return (

Select a holding to explore its dependency map. Add any company to see how it connects to your portfolio.

{/* holding selector */}
{all.map(t=>( ))}
setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addTicker()} placeholder="Add ticker…" style={{ fontFamily:VM.mono, fontSize:11, padding:'5px 12px', borderRadius:999, border:`1px solid ${VM.border}`, background:VM.paper, outline:'none', color:VM.ink, width:110 }} /> Add
{/* SCN canvas */}
); } Object.assign(window, { MyPortfolio });