/* AUREN — App pages 2: Wallet, Explorer (mesh map), Governance, Settings */ const AP2 = window.AURENData; /* Dotted world map mask — '#' = land. 60 cols × 26 rows, equirectangular. */ const WORLD_MAP = [ "............................................................", ".....####.........................###....####..............", "...########.....................########.######...##.......", "..###########..............#.##############################", ".#############............################################.", "..############...........#################################.", "...##########...........##################################.", "....#########..........####..######################.#####..", ".....########.........###.....################.####...##...", ".....#######.........###.......#############.........##....", "......#####.........###........############................", ".......###.........####........###########.....###........", ".......##..........####.........#######.......#####........", "......###...........###.........#####........#######.......", ".....####...........###.........####..........#####...##...", ".....####...........###.........###............##....###...", ".....####...........###.........##.................#####...", "......###...........##..........#..................####....", ".......##...........##.............................##......", ".......##...........##.....................................", "........#...........#......................................", "........#..................................................", "...........................................................", "...............................................##..........", "...........................................................", "..........................................................." ]; /* ================= WALLET ================= */ function Wallet() { const w = AP2.wallet, t = AP2.tokenInfo; const [txs] = useState(AP2.transactions); const [tab, setTab] = useState('all'); const shown = tab === 'all' ? txs : txs.filter(x => x.dir === tab); const fmtTime = (m) => m < 60 ? m + 'm ago' : Math.floor(m / 60) + 'h ago'; return (
TOTAL BALANCE
{AP2.fmt.num(w.balance.toFixed(2))} AUREN
≈ ${AP2.fmt.num((w.balance * t.price).toFixed(2))} USD
{w.address}
{[['Available', w.balance - w.stakedBalance, 'wallet', 'var(--cyan)'], ['Staked', w.stakedBalance, 'staking', 'var(--violet)'], ['Pending rewards', w.pendingRewards, 'bolt', 'var(--green)']].map(([k, v, ic, col]) => (
{k}
{AP2.fmt.num(v.toFixed(2))}
AUREN ))}

Settlement history

{[['all', 'All'], ['in', 'Received'], ['out', 'Sent']].map(([k, l]) => ( ))}
{shown.map((x, i) => (
{x.type}
{x.id} · block {AP2.fmt.num(x.block)}
{x.dir === 'in' ? '+' : '−'}{x.amount.toFixed(2)}
{fmtTime(x.time)}
{x.status}
))}
); } /* ================= EXPLORER (mesh map) ================= */ function NetworkMap() { const canvasRef = useRef(null); const regions = AP2.regions; useEffect(() => { const cv = canvasRef.current; if (!cv) return; const ctx = cv.getContext('2d'); let raf, W, H, dpr = Math.min(devicePixelRatio, 2); function resize() { W = cv.clientWidth; H = cv.clientHeight; cv.width = W * dpr; cv.height = H * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); const ro = new ResizeObserver(resize); ro.observe(cv); // build arcs between nearby regions const arcs = []; for (let i = 0; i < regions.length; i++) for (let j = i + 1; j < regions.length; j++) if (Math.random() > 0.55) arcs.push({ a: i, b: j, t: Math.random(), speed: 0.002 + Math.random() * 0.004 }); let frame = 0; function pt(r) { return { x: r.x * W, y: r.y * H }; } function draw() { frame++; ctx.clearRect(0, 0, W, H); // dotted world map (land) + faint ocean grid const cols = WORLD_MAP[0].length, rows = WORLD_MAP.length; const cw = W / cols, ch = H / rows; for (let r = 0; r < rows; r++) { const line = WORLD_MAP[r]; for (let c = 0; c < cols; c++) { const x = (c + 0.5) * cw, y = (r + 0.5) * ch; if (line[c] === '#') { ctx.fillStyle = 'rgba(120,180,210,0.22)'; ctx.beginPath(); ctx.arc(x, y, 1.3, 0, 7); ctx.fill(); } else { ctx.fillStyle = 'rgba(120,160,190,0.045)'; ctx.beginPath(); ctx.arc(x, y, 0.7, 0, 7); ctx.fill(); } } } // arcs arcs.forEach(arc => { const A = pt(regions[arc.a]), B = pt(regions[arc.b]); const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2 - Math.abs(A.x - B.x) * 0.18 - 30; ctx.beginPath(); ctx.moveTo(A.x, A.y); ctx.quadraticCurveTo(mx, my, B.x, B.y); ctx.strokeStyle = 'rgba(24,224,255,0.10)'; ctx.lineWidth = 1; ctx.stroke(); // packet arc.t += arc.speed; if (arc.t > 1) arc.t -= 1; const u = arc.t, iu = 1 - u; const px = iu * iu * A.x + 2 * iu * u * mx + u * u * B.x; const py = iu * iu * A.y + 2 * iu * u * my + u * u * B.y; const grd = ctx.createRadialGradient(px, py, 0, px, py, 5); grd.addColorStop(0, 'rgba(143,244,255,1)'); grd.addColorStop(1, 'rgba(24,224,255,0)'); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(px, py, 5, 0, 7); ctx.fill(); }); // region nodes regions.forEach(r => { const p = pt(r); const pulse = 1 + Math.sin(frame * 0.05 + r.x * 10) * 0.3; const rad = 4 + (r.nodes / 2700) * 6; const grd = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, rad * 4 * pulse); grd.addColorStop(0, 'rgba(24,224,255,0.5)'); grd.addColorStop(1, 'rgba(24,224,255,0)'); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(p.x, p.y, rad * 4 * pulse, 0, 7); ctx.fill(); ctx.fillStyle = r.load > 80 ? '#FFC542' : '#8ff4ff'; ctx.beginPath(); ctx.arc(p.x, p.y, rad, 0, 7); ctx.fill(); ctx.strokeStyle = 'rgba(143,244,255,0.6)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(p.x, p.y, rad + 3, 0, 7); ctx.stroke(); }); raf = requestAnimationFrame(draw); } draw(); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, []); return ; } function Explorer() { const s = AP2.networkStats, regions = AP2.regions; const [sel, setSel] = useState(null); return (
All regions nominal} />
● LIVE MESH
{regions.length} regions · {AP2.fmt.compact(s.totalGpus)} GPUs

Regions

{regions.sort((a, b) => b.nodes - a.nodes).map(r => (
setSel(r)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 18px', borderTop: '1px solid var(--line)', cursor: 'pointer', transition: 'background .2s' }} onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.02)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> 80 ? 'var(--amber)' : 'var(--green)', boxShadow: '0 0 8px currentColor', flexShrink: 0 }} />
{r.name}
{AP2.fmt.num(r.nodes)} nodes
80 ? 'var(--amber)' : 'var(--cyan)'} />
{r.load}% load
))}
); } /* ================= GOVERNANCE ================= */ function Governance() { const [proposals, setProposals] = useState(AP2.proposals); const [voted, setVoted] = useState({}); function vote(id, dir) { if (voted[id]) return; setVoted(v => ({ ...v, [id]: dir })); setProposals(ps => ps.map(p => p.id === id ? { ...p, forV: p.forV + (dir === 'for' ? 250000 : 0), against: p.against + (dir === 'against' ? 250000 : 0) } : p)); } const active = proposals.filter(p => p.status === 'active'); return (
New proposal} />
{proposals.map(p => { const total = p.forV + p.against; const forPct = total ? (p.forV / total) * 100 : 0; const quorumPct = Math.min(100, (total / p.quorum) * 100); const v = voted[p.id]; return (
{p.id} {p.status} {p.status === 'active' && ends {p.ends}}

{p.title}

{p.desc}

FOR {forPct.toFixed(1)}% · {AP2.fmt.compact(p.forV)} AGAINST {(100 - forPct).toFixed(1)}% · {AP2.fmt.compact(p.against)}
Quorum {quorumPct.toFixed(0)}% of {AP2.fmt.compact(p.quorum)}
{p.status === 'active' && (
)} ); })}
); } /* ================= SETTINGS ================= */ function Settings({ user, onLogout }) { const [form, setForm] = useState({ name: user?.name || 'demo', email: user?.email || 'demo@auren.mesh', region: 'Auto (nearest)', payout: 'AUREN' }); const [notif, setNotif] = useState({ workloads: true, rewards: true, governance: false, security: true }); const [saved, setSaved] = useState(false); function save() { setSaved(true); setTimeout(() => setSaved(false), 1800); } return (

Profile

{form.name[0].toUpperCase()}
{[['Display name', 'name'], ['Email', 'email']].map(([l, k]) => (
setForm(f => ({ ...f, [k]: e.target.value }))} style={inputStyle} />
))}

Notifications

{[['workloads', 'Workload status'], ['rewards', 'Reward payouts'], ['governance', 'Governance proposals'], ['security', 'Security alerts']].map(([k, l]) => (
{l}
))}

Security

Two-factor authentication is recommended for payout accounts.
); } const inputStyle = { width: '100%', padding: '12px 14px', borderRadius: 'var(--r-sm)', background: 'var(--surface)', border: '1px solid var(--line-2)', color: '#fff', fontSize: 14, fontFamily: 'var(--font-body)', outline: 'none' }; Object.assign(window, { Wallet, NetworkMap, Explorer, Governance, Settings });