// dash-atoms.jsx — shared primitives for the BTC Now dashboard
const DASH_GRADIENT = 'linear-gradient(135deg, #FFD60A 0%, #FF9F0A 50%, #FF453A 100%)';
const DASH_MONO = "'JetBrains Mono', ui-monospace, monospace";
const DASH_DISPLAY = "'Clash Display', 'Inter', sans-serif";
// ═══ MOCK DATA (whale persona) ════════════════════════════════════════════
const MOCK = {
firstName: 'Marc',
lastName: 'Dumpff',
cashUsd: 248_412.50,
btc: 5.8423,
btcPriceSeed: 68_412.40,
fico: 812,
monthlyIncome: 42_000,
fromIncome: 118_000, // portion of credit from FICO/income
transactions: [
{ id: 't1', merchant: 'Nobu · Malibu', cat: 'Dining', amt: -412.80, sats: 412, when: 'Today · 8:14pm' },
{ id: 't2', merchant: 'Shell', cat: 'Fuel', amt: -84.20, sats: 84, when: 'Today · 11:02am' },
{ id: 't3', merchant: 'Apple Store', cat: 'Tech', amt: -2_399.00,sats: 2399,when: 'Yesterday' },
{ id: 't4', merchant: 'Velocity Black · Yacht', cat: 'Travel', amt: -18_400.00,sats:18400,when: 'Apr 21' },
{ id: 't5', merchant: 'Whole Foods', cat: 'Groceries', amt: -312.45, sats: 312, when: 'Apr 20' },
{ id: 't6', merchant: 'Delta · LAX → JFK', cat: 'Travel', amt: -1_840.00,sats: 1840,when: 'Apr 19' },
{ id: 't7', merchant: 'Blue Bottle Coffee', cat: 'Dining', amt: -8.75, sats: 9, when: 'Apr 19' },
{ id: 't8', merchant: 'Equinox', cat: 'Fitness', amt: -325.00, sats: 325, when: 'Apr 18' },
],
};
// ═══ FORMATTERS ════════════════════════════════════════════════════════════
function fmtUsd(n, opts = {}) {
const { decimals = 2, abbreviate = false } = opts;
if (abbreviate && Math.abs(n) >= 1000) {
if (Math.abs(n) >= 1_000_000) return `$${(n/1_000_000).toFixed(2)}M`;
if (Math.abs(n) >= 1000) return `$${(n/1000).toFixed(1)}k`;
}
const neg = n < 0;
const abs = Math.abs(n);
return (neg ? '-' : '') + '$' + abs.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}
function fmtBtc(n) {
return '₿' + n.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 4 });
}
function fmtSats(n) {
return n.toLocaleString('en-US') + ' sats';
}
// ═══ ANIMATED NUMBER ══════════════════════════════════════════════════════
// Smoothly interpolates between value changes
function AnimatedNumber({ value, format, duration = 500, style }) {
const [display, setDisplay] = React.useState(value);
const rafRef = React.useRef(null);
const startRef = React.useRef(null);
const fromRef = React.useRef(value);
React.useEffect(() => {
cancelAnimationFrame(rafRef.current);
fromRef.current = display;
startRef.current = null;
const animate = (t) => {
if (startRef.current == null) startRef.current = t;
const progress = Math.min(1, (t - startRef.current) / duration);
const eased = 1 - Math.pow(1 - progress, 3);
const next = fromRef.current + (value - fromRef.current) * eased;
setDisplay(next);
if (progress < 1) rafRef.current = requestAnimationFrame(animate);
};
rafRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(rafRef.current);
}, [value]);
return {format(display)};
}
// ═══ BTC PRICE TICKER HOOK ════════════════════════════════════════════════
// Pulls live price from CoinGecko's free public API every 30s,
// with small simulated drift between polls so the UI feels live.
// Falls back to simulated drift only if the network call fails.
function useBtcPrice(seed = 68_412.40) {
const [price, setPrice] = React.useState(seed);
const [source, setSource] = React.useState('loading'); // 'live' | 'offline' | 'loading'
const basePriceRef = React.useRef(seed);
// Poll CoinGecko every 30s
React.useEffect(() => {
let cancelled = false;
const fetchPrice = async () => {
try {
const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd', { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
const p = data?.bitcoin?.usd;
if (!cancelled && typeof p === 'number' && p > 0) {
basePriceRef.current = p;
setPrice(p);
setSource('live');
}
} catch (e) {
if (!cancelled) setSource(prev => prev === 'live' ? 'live' : 'offline');
}
};
fetchPrice();
const id = setInterval(fetchPrice, 30_000);
return () => { cancelled = true; clearInterval(id); };
}, []);
// Between polls, drift small amounts around the real base price so the
// animated number and credit limit feel alive.
React.useEffect(() => {
const id = setInterval(() => {
setPrice(p => {
const base = basePriceRef.current;
const drift = (Math.random() - 0.5) * (base * 0.0008); // ±0.08%
// pull gently back toward base
const pull = (base - p) * 0.08;
return p + drift + pull;
});
}, 1600);
return () => clearInterval(id);
}, []);
return price;
}
// ═══ SCREEN SHELL for dashboard tabs ══════════════════════════════════════
// Outer div is the positioning context (non-scrolling), inner div scrolls.
// This ensures modals with position:absolute;inset:0 align to the viewport,
// not to the scrolled content.
function DashScreen({ children, modals, scroll = true, padTop = 56, padBottom = 90 }) {
return (
{children}
{/* Modals render outside the scroll container so they align to the viewport */}
{modals}
);
}
// ═══ TAB BAR (bottom nav) ═════════════════════════════════════════════════
function TabBar({ active, onChange }) {
const tabs = [
{ id: 'home', label: 'Home', icon: (
)},
{ id: 'card', label: 'Card', icon: (
)},
{ id: 'invest', label: 'Invest', icon: (
)},
{ id: 'loans', label: 'Loans', icon: (
)},
{ id: 'concierge', label: 'Concierge', icon: (
)},
];
return (
{tabs.map(t => {
const isActive = t.id === active;
return (
);
})}
{children}
);
}
// ═══ HEADER (scrolls with content) ═══════════════════════════════════════
function DashHeader({ title, subtitle, right }) {
return (
{subtitle && (
{subtitle}
)}
{title}
{right}
);
}
// ═══ SPARKLINE ═══════════════════════════════════════════════════════════
function Sparkline({ data, width = 80, height = 28, color = '#FF9F0A', fill = true }) {
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1;
const points = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * height;
return `${x},${y}`;
}).join(' ');
const fillPath = `M 0,${height} L ${points.replace(/ /g, ' L ')} L ${width},${height} Z`;
return (
);
}
// ═══ SAT BADGE ═══════════════════════════════════════════════════════════
function SatBadge({ sats }) {
return (
+{sats.toLocaleString()} sats
);
}
Object.assign(window, {
MOCK, DASH_GRADIENT, DASH_MONO, DASH_DISPLAY,
fmtUsd, fmtBtc, fmtSats, AnimatedNumber, useBtcPrice,
DashScreen, TabBar, DashCard, DashHeader, Sparkline, SatBadge,
});