/* Stratiphy — AI investing app Portfolio home screen, recreated from product
screenshots. Hosts the shared Insurely collect-data widget (collect-widget.jsx)
plus a Stratiphy-skinned AI assistant + ISA transfer journey (stratiphy-chat.jsx).
The "Stratiphy" UI here is a faithful mock for an Insurely integration demo. */
const STR_PURPLE = '#5B3DF5'; // brand violet — primary CTAs, strategy accents
const STR_PURPLE_DEEP = '#4A2ED6'; // pressed
const STR_PURPLE_SOFT = '#ECE7FE'; // light violet fills
const STR_GOLD = '#F7B500'; // amber — active tabs / highlights
const STR_GOLD_SOFT = '#FFF2CF';
const STR_GREEN = '#16BE72'; // gains, positive deltas
const STR_GREEN_SOFT = '#E0F6EC';
const STR_INK = '#16161D'; // near-black text
/* ---- inline icon helper (line, 2px, rounded — DS iconography) ---- */
function PI({ size = 24, c = STR_INK, w = 1.9, children }) {
return (
);
}
/* Stratiphy mark — three-segment donut (portfolio allocation). Used as the
header glyph + brand avatar. */
function StratDonut({ size = 24, sw = 5 }) {
const r = 9;
const c = 2 * Math.PI * r;
const seg = (f) => `${(c * f).toFixed(2)} ${(c - c * f).toFixed(2)}`;
const off = (f) => (-c * f).toFixed(2);
return (
);
}
/* Chat assistant avatar — purple circle with a white pie wedge */
function StratAvatar({ size = 30 }) {
return (
);
}
function gbp(n) {
return '£' + n.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
/* big balance — whole large, pence raised + smaller */
function Money({ value, size = 44, color = STR_INK }) {
const [whole, dec] = value.toFixed(2).split('.');
return (
£{whole}
.{dec}
);
}
/* ===================== PORTFOLIO HEADER + BALANCE ===================== */
function PortfolioHeader() {
return (
);
}
function BalanceBlock({ total, pct, up }) {
return (
+{pct}%
Return
Up by
{gbp(up)}
since you began
);
}
/* ===================== PERFORMANCE CHART ===================== */
function PerfChart() {
const line = 'M0,96 C18,86 34,73 54,80 C74,87 84,109 104,102 C122,96 132,85 152,90 C170,94 178,75 198,65 C214,56 222,73 242,57 C260,43 270,39 292,25 C302,20 312,16 320,13';
const yLabels = [['10%', 8], ['8%', 41], ['6%', 74], ['4%', 107], ['2%', 140]];
const xLabels = ['Jan 23', 'May 23', 'Sep 23', 'Jan 24'];
return (
{yLabels.map(([t, top]) =>
{t}
)}
{xLabels.map((t) =>
{t}
)}
);
}
const PERIODS = ['1d', '1w', '1m', 'YTD', 'All Time'];
function PeriodTabs() {
const [active, setActive] = React.useState('YTD');
return (
{PERIODS.map((p) => {
const on = p === active;
return (
);
})}
);
}
/* ===================== HOLDINGS ===================== */
function HoldingsToggle({ tab, setTab }) {
const half = (id, label) => {
const on = tab === id;
return (
);
};
return (
{half('holdings', 'Holdings')}
{half('activity', 'Activity')}
);
}
const HOLDINGS = [
{ name: 'Starbucks', mono: 'S', color: '#0B6E4F', badge: 'Top Performance', emoji: '🚀', value: 1654.11, shares: '6 Shares', pct: '5.34' },
{ name: 'Nio', mono: 'N', color: '#00BEFF', badge: '#1 Environmental', emoji: '🌱', value: 526.12, shares: '6 Shares', pct: '3.21' },
{ name: 'Meta', mono: 'M', color: '#0866FF', badge: null, value: 526.12, shares: '6 Shares', pct: '1.78' }];
function GreenArrow() {
return (
);
}
function CashRow() {
return (
£
Cash
£239.11 Available
£39.15 Pending orders
);
}
function StockRow({ h, last }) {
return (
{h.name}
{h.badge &&
{h.badge}{h.emoji ? ' ' + h.emoji : ''}}
{gbp(h.value)} · {h.shares}
{h.pct}%
);
}
function HoldingsList() {
return (
{HOLDINGS.map((h, i) => )}
);
}
function ActivityList() {
const acts = [
{ name: 'Starbucks', mono: 'S', color: '#0B6E4F', side: 'Buy', detail: '2 Shares · 12 Jun', amt: 551.37 },
{ name: 'Meta', mono: 'M', color: '#0866FF', side: 'Buy', detail: '1 Share · 9 Jun', amt: 526.12 },
{ name: 'Nio', mono: 'N', color: '#00BEFF', side: 'Sell', detail: '3 Shares · 2 Jun', amt: 158.40 }];
return (
{acts.map((a, i) =>
{a.side} {a.name}
{a.detail}
{a.side === 'Sell' ? '+' : '−'}{gbp(a.amt)}
)}
Investments elsewhere
{accounts.map((a) => {
const subs = a.accounts && a.accounts.length ? a.accounts : [{ type: a.accountType || 'Account', balance: a.balance || 0 }];
return (
{a.name}
{subs.length > 1 &&
{subs.length} accounts}
{gbp(a.balance || 0)}
{subs.map((s, j) =>
{s.type}
{gbp(s.balance || 0)}
)}
);
})}
);
}
return (
);
}
/* ===================== BOTTOM NAV ===================== */
function BottomNav({ active = 'Portfolio' }) {
const grey = 'var(--neutral-8)';
const item = (icon, iconOn, label) => {
const on = label === active;
return (
);
};
const home = (c) => ;
const search = (c) => ;
const strat = (c) => ;
const cap = (c) => ;
const wallet = (c) => ;
return (
{item(home(grey), home(STR_GOLD), 'Portfolio')}
{item(search(grey), search(STR_GOLD), 'Discover')}
{item(strat(grey), strat(STR_GOLD), 'Strategies')}
{item(cap(grey), cap(STR_GOLD), 'Strativersity')}
{item(wallet(grey), wallet(STR_GOLD), 'Account')}
);
}
/* ===================== TRANSFER STATUS ===================== */
function TransferStatusCard({ transfer, onDismiss }) {
const DURATION = 45000; // demo: progress fills over ~45s
const [now, setNow] = React.useState(() => Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 400);
return () => clearInterval(id);
}, []);
const elapsed = now - transfer.startedAt;
const pct = Math.max(3, Math.min(100, Math.round(elapsed / DURATION * 100)));
const done = pct >= 100;
const stage = done ? 'Transfer complete' :
pct < 33 ? `Sale instructed at ${transfer.name}` :
pct < 78 ? 'Funds in transit' :
'Settling into your ISA';
const bar = done ? STR_GREEN : STR_PURPLE;
return (
{done ?
:
}
ISA transfer from {transfer.name}
{stage}
{done ?
:
{pct}%}
{transfer.count} ISA{transfer.count !== 1 ? 's' : ''} · {gbp(transfer.total)}
{done ? 'Added to your ISA' : 'Est. ~14 mins'}
);
}
/* ===================== HOME SCREEN ===================== */
function PortfolioHome({ connected, accounts, transfer, onDismissTransfer, onOpenCollect, onOpenChat, onOpenTransfer }) {
const [tab, setTab] = React.useState('holdings');
return (
{transfer &&
}
{tab === 'holdings' ?
:
}
);
}
/* ===================== APP / FRAME ===================== */
const strIconBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: 2, cursor: 'pointer', display: 'flex', alignItems: 'center' };
const strTabBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: '4px 4px', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 };
function PhoneFrame({ children }) {
const btn = { position: 'absolute', background: 'linear-gradient(180deg,#3a3a3c,#1c1c1e)', boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.12)' };
return (
);
}
function App() {
const [linked, setLinked] = React.useState([]);
const [widgetOpen, setWidgetOpen] = React.useState(false);
const [widgetSeq, setWidgetSeq] = React.useState(0);
const [chatOpen, setChatOpen] = React.useState(false);
const [chatSeq, setChatSeq] = React.useState(0);
const [transfer, setTransfer] = React.useState(null);
const [isaFlow, setIsaFlow] = React.useState(false);
const [isaSeq, setIsaSeq] = React.useState(0);
const [isaTransfer, setIsaTransfer] = React.useState(() => {
try {const v = localStorage.getItem('stratiphy_transfer');return v ? JSON.parse(v) : null;} catch (e) {return null;}
});
const startTransfer = (t) => {
setIsaTransfer(t);
try {localStorage.setItem('stratiphy_transfer', JSON.stringify(t));} catch (e) {}
};
const dismissTransfer = () => {
setIsaTransfer(null);
try {localStorage.removeItem('stratiphy_transfer');} catch (e) {}
};
const openIsaFlow = () => {setIsaSeq((s) => s + 1);setIsaFlow(true);};
const openWidget = () => {setWidgetSeq((s) => s + 1);setWidgetOpen(true);};
const openChat = () => {setChatSeq((s) => s + 1);setChatOpen(true);};
const finishCollect = (providers) => {setLinked(providers);setWidgetOpen(false);};
return (
0} accounts={linked} transfer={isaTransfer} onDismissTransfer={dismissTransfer} onOpenCollect={openWidget} onOpenChat={openChat} onOpenTransfer={openIsaFlow} />
{isaFlow && setIsaFlow(false)} onComplete={startTransfer} />}
{chatOpen && setChatOpen(false)} onConnect={() => {setChatOpen(false);openWidget();}} onTransfer={(data) => setTransfer(data)} />}
{transfer && setTransfer(null)} />}
setWidgetOpen(false)} style={{ position: 'absolute', inset: 0, zIndex: 49, background: 'rgba(30,20,60,0.4)', opacity: widgetOpen ? 1 : 0, pointerEvents: widgetOpen ? 'auto' : 'none', transition: 'opacity 380ms cubic-bezier(0.2,0.7,0.2,1)' }} />
{widgetOpen && setWidgetOpen(false)} accent={STR_PURPLE} />}
);
}
Object.assign(window, { STR_PURPLE, STR_PURPLE_DEEP, STR_PURPLE_SOFT, STR_GOLD, STR_GOLD_SOFT, STR_GREEN, STR_GREEN_SOFT, STR_INK, PI, StratDonut, StratAvatar, gbp, strIconBtn });
ReactDOM.createRoot(document.getElementById('root')).render();