WebUI Redesign and Component 1: category mapper fixes
This commit is contained in:
Richard
@@ -0,0 +1,875 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; overflow-x: auto; }
|
||||
* { box-sizing: border-box; }
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
a { color: #5b9dff; text-decoration: none; }
|
||||
a:hover { color: #8ab8ff; }
|
||||
table { border-collapse: collapse; }
|
||||
.dual-range { -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; position: absolute; top: 0; left: 0; width: 100%; height: 20px; }
|
||||
.dual-range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #5b9dff; border: 2px solid #0a0d14; cursor: pointer; box-shadow: 0 0 6px rgba(91,157,255,0.7); margin-top: 0; }
|
||||
.dual-range::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #5b9dff; border: 2px solid #0a0d14; cursor: pointer; box-shadow: 0 0 6px rgba(91,157,255,0.7); }
|
||||
.dual-range::-webkit-slider-runnable-track { background: transparent; }
|
||||
.dual-range::-moz-range-track { background: transparent; }
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="position:relative; min-height:100vh; min-width:1440px; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5;">
|
||||
|
||||
<!-- decorative glow layer -->
|
||||
<div style="position:fixed; inset:0; pointer-events:none; background: radial-gradient(600px 400px at 80% 85%, rgba(76,141,255,0.10), transparent 60%); z-index:0;"></div>
|
||||
|
||||
<div style="position:relative; z-index:1; display:flex; min-height:100vh;">
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside style="width:236px; flex:none; padding:24px 16px; display:flex; flex-direction:column; gap:28px; border-right:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.015);">
|
||||
<div style="display:flex; align-items:center; gap:10px; padding:4px 8px;">
|
||||
<div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
|
||||
<div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">Lucid<span style="color:#5b9dff;">.</span></div>
|
||||
</div>
|
||||
|
||||
<nav style="display:flex; flex-direction:column; gap:2px;">
|
||||
<div style="font:600 10px/1 'Manrope'; letter-spacing:0.08em; color:#5B6377; padding:0 12px 8px;">NAVIGATION</div>
|
||||
<sc-for list="{{ navItems }}" as="item" hint-placeholder-count="4">
|
||||
<div onClick="{{ item.onClick }}" style="{{ item.style }}">
|
||||
<div style="{{ item.dotStyle }}"></div>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</nav>
|
||||
|
||||
<div style="margin-top:auto; display:flex; flex-direction:column; gap:10px;">
|
||||
<div style="padding:14px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(20px);">
|
||||
<div style="font-size:11px; color:#8B93A7; margin-bottom:6px;">Data feed</div>
|
||||
<div style="display:flex; align-items:center; gap:7px;">
|
||||
<div style="width:7px; height:7px; border-radius:50%; background:#12D48A; box-shadow:0 0 8px #12D48A;"></div>
|
||||
<div style="font-size:12.5px; font-weight:600;">Live · on-chain</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:10px; padding:8px 10px;">
|
||||
<div style="width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#2a2f3d,#1a1e28); border:1px solid rgba(255,255,255,0.1);"></div>
|
||||
<div>
|
||||
<div style="font-size:12.5px; font-weight:700;">Analyst</div>
|
||||
<div style="font-size:11px; color:#5B6377;">Pro workspace</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<main style="flex:1; min-width:0; padding:22px 32px 60px;">
|
||||
|
||||
<!-- TOPBAR -->
|
||||
<div style="display:flex; align-items:center; gap:16px; margin-bottom:22px;">
|
||||
<div style="flex:1; position:relative; max-width:420px;">
|
||||
<input placeholder="Search markets, traders, wallets…" style="width:100%; padding:11px 14px 11px 38px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:#EDEFF5; font-size:13px; font-family:'Manrope'; outline:none;" />
|
||||
<div style="position:absolute; left:13px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; border:2px solid #5B6377;"></div>
|
||||
</div>
|
||||
<div style="margin-left:auto; display:flex; align-items:center; gap:10px;">
|
||||
<div style="padding:8px 14px; border-radius:10px; background:rgba(18,212,138,0.10); border:1px solid rgba(18,212,138,0.25); font-size:12px; font-weight:700; color:#12D48A; font-family:'Roboto Mono';">24H VOL {{ headerVolume }}</div>
|
||||
<div style="width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:#F6465D;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- breadcrumb -->
|
||||
<div style="display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:18px; font-weight:600;">
|
||||
<sc-for list="{{ breadcrumbItems }}" as="crumb" hint-placeholder-count="1">
|
||||
<span onClick="{{ crumb.onClick }}" style="{{ crumb.style }}">{{ crumb.label }}</span>
|
||||
<sc-if value="{{ crumb.sep }}" hint-placeholder-val="{{ false }}">
|
||||
<span style="color:#3a4152;">›</span>
|
||||
</sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ isOverview }}" hint-placeholder-val="{{ true }}">
|
||||
<!-- ================= OVERVIEW ================= -->
|
||||
<div>
|
||||
<div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;">
|
||||
<div>
|
||||
<h1 style="margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-0.02em;">Markets Overview</h1>
|
||||
<div style="font-size:13px; color:#8B93A7;">Real-time analytics across all active prediction markets</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- stat cards -->
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;">
|
||||
<sc-for list="{{ globalStats }}" as="stat" hint-placeholder-count="4">
|
||||
<div style="padding:18px 20px; border-radius:16px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 8px 30px rgba(0,0,0,0.25);">
|
||||
<div style="font-size:12px; color:#8B93A7; font-weight:600; margin-bottom:10px;">{{ stat.label }}</div>
|
||||
<div style="font-size:24px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">{{ stat.value }}</div>
|
||||
<div style="font-size:12px; font-weight:700; margin-top:6px; font-family:'Roboto Mono'; color:{{ stat.deltaColor }};">{{ stat.delta }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:start;">
|
||||
<!-- markets table -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:18px 22px 14px; font-size:15px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">All Markets</div>
|
||||
<table style="width:100%; font-size:13px;">
|
||||
<thead>
|
||||
<tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
|
||||
<td style="padding:10px 22px;">Market</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Yes %</td>
|
||||
<td style="padding:10px 10px; text-align:right;">24h</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Volume</td>
|
||||
<td style="padding:10px 22px; text-align:right;">Traders</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<sc-for list="{{ marketRows }}" as="m" hint-placeholder-count="6">
|
||||
<tr onClick="{{ m.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
|
||||
<td style="padding:13px 22px;">
|
||||
<div style="font-weight:700; font-size:13.5px; margin-bottom:3px;">{{ m.question }}</div>
|
||||
<div style="font-size:11.5px; color:#5B6377;">{{ m.category }} · {{ m.statusLabel }}</div>
|
||||
</td>
|
||||
<td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700;">{{ m.yesPriceLabel }}</td>
|
||||
<td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ m.changeColor }};">{{ m.changeLabel }}</td>
|
||||
<td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ m.volumeLabel }}</td>
|
||||
<td style="padding:13px 22px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ m.tradersLabel }}</td>
|
||||
</tr>
|
||||
</sc-for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- leaderboard -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:18px 22px 14px; font-size:15px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Top Traders</div>
|
||||
<div style="display:flex; flex-direction:column;">
|
||||
<sc-for list="{{ leaderboard }}" as="t" hint-placeholder-count="6">
|
||||
<div onClick="{{ t.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 22px; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
|
||||
<div style="width:30px; height:30px; border-radius:9px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;">{{ t.initial }}</div>
|
||||
<div style="min-width:0; flex:1;">
|
||||
<div style="font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ t.handle }}</div>
|
||||
<div style="font-size:11px; color:#5B6377;">{{ t.trait }}</div>
|
||||
</div>
|
||||
<div style="text-align:right; flex:none;">
|
||||
<div style="font-family:'Roboto Mono'; font-weight:700; font-size:13px; color:#12D48A;">{{ t.pnlLabel }}</div>
|
||||
<div style="font-size:10.5px; color:#5B6377;">P&L</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isMarket }}" hint-placeholder-val="{{ false }}">
|
||||
<!-- ================= MARKET DETAIL ================= -->
|
||||
<div>
|
||||
<div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:20px;">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
|
||||
<div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:rgba(22,82,240,0.14); border:1px solid rgba(22,82,240,0.3); color:#5b9dff;">{{ marketDetail.category }}</div>
|
||||
<div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:{{ marketDetail.statusBg }}; color:{{ marketDetail.statusColor }};">{{ marketDetail.status }}</div>
|
||||
</div>
|
||||
<h1 style="margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:-0.02em; max-width:640px;">{{ marketDetail.question }}</h1>
|
||||
<div style="font-size:12.5px; color:#8B93A7;">Resolves {{ marketDetail.resolves }}</div>
|
||||
</div>
|
||||
<div style="text-align:right; flex:none;">
|
||||
<div style="font-size:34px; font-weight:800; font-family:'Roboto Mono'; color:#12D48A;">{{ marketDetail.yesPriceBig }}</div>
|
||||
<div style="font-size:12px; color:#8B93A7; font-weight:600;">YES probability</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px;">
|
||||
<sc-for list="{{ marketStats }}" as="stat" hint-placeholder-count="4">
|
||||
<div style="padding:16px 18px; border-radius:14px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px);">
|
||||
<div style="font-size:11.5px; color:#8B93A7; font-weight:600; margin-bottom:8px;">{{ stat.label }}</div>
|
||||
<div style="font-size:19px; font-weight:800; font-family:'Roboto Mono';">{{ stat.value }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; align-items:start;">
|
||||
<!-- price chart -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px 22px;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
|
||||
<div style="font-size:14px; font-weight:700;">Yes Price History</div>
|
||||
<div style="display:flex; gap:6px;">
|
||||
<div style="font-size:11px; padding:5px 10px; border-radius:7px; background:rgba(22,82,240,0.18); color:#5b9dff; font-weight:700;">30D</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 600 220" style="width:100%; height:220px; overflow:visible;">
|
||||
<defs>
|
||||
<linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
|
||||
<stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<filter id="glow"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||||
</defs>
|
||||
<path d="{{ marketDetail.areaPath }}" fill="url(#fillGrad)" stroke="none"></path>
|
||||
<path d="{{ marketDetail.linePath }}" fill="none" stroke="#12D48A" stroke-width="2.5" filter="url(#glow)"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- order book -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:18px 20px;">
|
||||
<div style="font-size:14px; font-weight:700; margin-bottom:12px;">Order Book Depth</div>
|
||||
<div style="font-size:10.5px; color:#5B6377; font-weight:700; text-transform:uppercase; margin-bottom:6px;">Asks</div>
|
||||
<sc-for list="{{ marketDetail.asks }}" as="row" hint-placeholder-count="5">
|
||||
<div style="position:relative; margin-bottom:3px; height:20px;">
|
||||
<div style="position:absolute; right:0; top:0; bottom:0; width:{{ row.barWidth }}; background:rgba(246,70,93,0.16); border-radius:4px;"></div>
|
||||
<div style="position:relative; display:flex; justify-content:space-between; padding:0 8px; font-size:11.5px; font-family:'Roboto Mono'; line-height:20px;">
|
||||
<span style="color:#F6465D; font-weight:700;">{{ row.priceLabel }}</span>
|
||||
<span style="color:#8B93A7;">{{ row.sizeLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="height:1px; background:rgba(255,255,255,0.08); margin:8px 0;"></div>
|
||||
<div style="font-size:10.5px; color:#5B6377; font-weight:700; text-transform:uppercase; margin-bottom:6px;">Bids</div>
|
||||
<sc-for list="{{ marketDetail.bids }}" as="row" hint-placeholder-count="5">
|
||||
<div style="position:relative; margin-bottom:3px; height:20px;">
|
||||
<div style="position:absolute; right:0; top:0; bottom:0; width:{{ row.barWidth }}; background:rgba(18,212,138,0.16); border-radius:4px;"></div>
|
||||
<div style="position:relative; display:flex; justify-content:space-between; padding:0 8px; font-size:11.5px; font-family:'Roboto Mono'; line-height:20px;">
|
||||
<span style="color:#12D48A; font-weight:700;">{{ row.priceLabel }}</span>
|
||||
<span style="color:#8B93A7;">{{ row.sizeLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
|
||||
<!-- biggest holders -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:16px 20px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Biggest Holders</div>
|
||||
<table style="width:100%; font-size:12.5px;">
|
||||
<tbody>
|
||||
<sc-for list="{{ marketDetail.holders }}" as="h" hint-placeholder-count="5">
|
||||
<tr onClick="{{ h.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
|
||||
<td style="padding:11px 20px; font-family:'Roboto Mono'; font-weight:700;">{{ h.trader }}</td>
|
||||
<td style="padding:11px 6px; text-align:center;"><span style="padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:{{ h.sideBg }}; color:{{ h.sideColor }};">{{ h.side }}</span></td>
|
||||
<td style="padding:11px 20px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ h.valueLabel }}</td>
|
||||
</tr>
|
||||
</sc-for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- top traders in market -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:16px 20px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Top Traders Here</div>
|
||||
<div style="display:flex; flex-direction:column;">
|
||||
<sc-for list="{{ marketDetail.topTraders }}" as="t" hint-placeholder-count="4">
|
||||
<div onClick="{{ t.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
|
||||
<div style="width:28px; height:28px; border-radius:8px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;">{{ t.initial }}</div>
|
||||
<div style="font-weight:700; font-size:13px; flex:1;">{{ t.handle }}</div>
|
||||
<div style="font-size:11px; color:#8B93A7;">{{ t.trait }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isTraderSearch }}" hint-placeholder-val="{{ false }}">
|
||||
<!-- ================= TRADER SEARCH ================= -->
|
||||
<div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<h1 style="margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-0.02em;">Trader Search</h1>
|
||||
<div style="font-size:13px; color:#8B93A7;">Filter by traits and metric ranges to find the traders you care about</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start;">
|
||||
<!-- filter panel -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px; display:flex; flex-direction:column; gap:22px; position:sticky; top:22px;">
|
||||
<div>
|
||||
<input value="{{ searchText }}" onChange="{{ onSearchTextChange }}" placeholder="Handle or wallet…" style="width:100%; padding:10px 13px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13px; font-family:'Manrope'; outline:none;" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size:12px; font-weight:700; color:#C7CCDA; margin-bottom:10px;">Traits</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:7px;">
|
||||
<sc-for list="{{ traitFilterChips }}" as="chip" hint-placeholder-count="5">
|
||||
<div onClick="{{ chip.onClick }}" style="{{ chip.style }}">{{ chip.label }}</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
||||
<span style="font-size:12px; font-weight:700; color:#C7CCDA;">Win Rate</span>
|
||||
<span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ winRateSlider.minLabel }} – {{ winRateSlider.maxLabel }}</span>
|
||||
</div>
|
||||
<div style="position:relative; height:20px; margin-bottom:10px;">
|
||||
<div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
|
||||
<div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ winRateSlider.fillLeft }}; right:{{ winRateSlider.fillRight }};"></div>
|
||||
<input class="dual-range" type="range" min="{{ winRateSlider.lo }}" max="{{ winRateSlider.hi }}" value="{{ winRateSlider.minVal }}" onInput="{{ winRateSlider.onMinInput }}" />
|
||||
<input class="dual-range" type="range" min="{{ winRateSlider.lo }}" max="{{ winRateSlider.hi }}" value="{{ winRateSlider.maxVal }}" onInput="{{ winRateSlider.onMaxInput }}" />
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input value="{{ winRateSlider.minVal }}" onBlur="{{ winRateSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
<span style="color:#5B6377; font-size:11px;">–</span>
|
||||
<input value="{{ winRateSlider.maxVal }}" onBlur="{{ winRateSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
||||
<span style="font-size:12px; font-weight:700; color:#C7CCDA;">Volume</span>
|
||||
<span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ volumeSlider.minLabel }} – {{ volumeSlider.maxLabel }}</span>
|
||||
</div>
|
||||
<div style="position:relative; height:20px; margin-bottom:10px;">
|
||||
<div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
|
||||
<div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ volumeSlider.fillLeft }}; right:{{ volumeSlider.fillRight }};"></div>
|
||||
<input class="dual-range" type="range" min="{{ volumeSlider.lo }}" max="{{ volumeSlider.hi }}" step="500000" value="{{ volumeSlider.minVal }}" onInput="{{ volumeSlider.onMinInput }}" />
|
||||
<input class="dual-range" type="range" min="{{ volumeSlider.lo }}" max="{{ volumeSlider.hi }}" step="500000" value="{{ volumeSlider.maxVal }}" onInput="{{ volumeSlider.onMaxInput }}" />
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input value="{{ volumeSlider.minVal }}" onBlur="{{ volumeSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
<span style="color:#5B6377; font-size:11px;">–</span>
|
||||
<input value="{{ volumeSlider.maxVal }}" onBlur="{{ volumeSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:10px;">
|
||||
<span style="font-size:12px; font-weight:700; color:#C7CCDA;">Total P&L</span>
|
||||
<span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ pnlSlider.minLabel }} – {{ pnlSlider.maxLabel }}</span>
|
||||
</div>
|
||||
<div style="position:relative; height:20px; margin-bottom:10px;">
|
||||
<div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
|
||||
<div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ pnlSlider.fillLeft }}; right:{{ pnlSlider.fillRight }};"></div>
|
||||
<input class="dual-range" type="range" min="{{ pnlSlider.lo }}" max="{{ pnlSlider.hi }}" step="10000" value="{{ pnlSlider.minVal }}" onInput="{{ pnlSlider.onMinInput }}" />
|
||||
<input class="dual-range" type="range" min="{{ pnlSlider.lo }}" max="{{ pnlSlider.hi }}" step="10000" value="{{ pnlSlider.maxVal }}" onInput="{{ pnlSlider.onMaxInput }}" />
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input value="{{ pnlSlider.minVal }}" onBlur="{{ pnlSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
<span style="color:#5B6377; font-size:11px;">–</span>
|
||||
<input value="{{ pnlSlider.maxVal }}" onBlur="{{ pnlSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div onClick="{{ onResetFilters }}" style="cursor:pointer; text-align:center; padding:10px; border-radius:10px; font-size:12.5px; font-weight:700; color:#8B93A7; border:1px solid rgba(255,255,255,0.1);">Reset filters</div>
|
||||
</div>
|
||||
|
||||
<!-- results -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:16px 22px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between;">
|
||||
<span>Results</span><span style="color:#5B6377; font-weight:600;">{{ searchResultsCount }} traders</span>
|
||||
</div>
|
||||
<table style="width:100%; font-size:13px;">
|
||||
<thead>
|
||||
<tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
|
||||
<td style="padding:10px 22px;">Trader</td>
|
||||
<td style="padding:10px 10px;">Traits</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Win Rate</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Volume</td>
|
||||
<td style="padding:10px 22px; text-align:right;">P&L</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<sc-for list="{{ searchResults }}" as="t" hint-placeholder-count="6">
|
||||
<tr onClick="{{ t.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
|
||||
<td style="padding:12px 22px;">
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:26px; height:26px; border-radius:8px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;">{{ t.initial }}</div>
|
||||
<span style="font-weight:700;">{{ t.handle }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding:12px 10px;">
|
||||
<div style="display:flex; gap:5px; flex-wrap:wrap;">
|
||||
<sc-for list="{{ t.traitChips }}" as="chip" hint-placeholder-count="2">
|
||||
<div style="font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; background:{{ chip.bg }}; color:{{ chip.color }};">{{ chip.label }}</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700;">{{ t.winRateLabel }}</td>
|
||||
<td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ t.volumeLabel }}</td>
|
||||
<td style="padding:12px 22px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ t.pnlColor }};">{{ t.pnlLabel }}</td>
|
||||
</tr>
|
||||
</sc-for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isTrader }}" hint-placeholder-val="{{ false }}">
|
||||
<!-- ================= TRADER DETAIL ================= -->
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:20px;">
|
||||
<div style="display:flex; align-items:center; gap:16px;">
|
||||
<div style="width:56px; height:56px; border-radius:16px; background:{{ traderDetail.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 0 24px rgba(22,82,240,0.3);">{{ traderDetail.initial }}</div>
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:10px; margin-bottom:4px;">
|
||||
<h1 style="margin:0; font-size:22px; font-weight:800; letter-spacing:-0.02em;">{{ traderDetail.handle }}</h1>
|
||||
<div style="font-size:12px; font-family:'Roboto Mono'; color:#5B6377;">{{ traderDetail.wallet }}</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:6px;">
|
||||
<sc-for list="{{ traderDetail.traitChips }}" as="chip" hint-placeholder-count="2">
|
||||
<div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:{{ chip.bg }}; color:{{ chip.color }}; border:1px solid {{ chip.border }};">{{ chip.label }}</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div style="font-size:11.5px; color:#8B93A7; margin-bottom:2px;">Member since {{ traderDetail.joined }}</div>
|
||||
<div style="font-size:11.5px; color:#8B93A7;">{{ traderDetail.activePositionsLabel }} active positions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:18px;">
|
||||
<sc-for list="{{ traderStats }}" as="stat" hint-placeholder-count="5">
|
||||
<div style="padding:16px 18px; border-radius:14px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px);">
|
||||
<div style="font-size:11px; color:#8B93A7; font-weight:600; margin-bottom:8px;">{{ stat.label }}</div>
|
||||
<div style="font-size:18px; font-weight:800; font-family:'Roboto Mono'; color:{{ stat.color }};">{{ stat.value }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; align-items:start;">
|
||||
<!-- pnl chart -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px 22px;">
|
||||
<div style="font-size:14px; font-weight:700; margin-bottom:14px;">P&L Over Time</div>
|
||||
<svg viewBox="0 0 600 200" style="width:100%; height:200px; overflow:visible;">
|
||||
<defs>
|
||||
<linearGradient id="pnlFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#5b9dff" stop-opacity="0.35"/>
|
||||
<stop offset="100%" stop-color="#5b9dff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<filter id="glow2"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||||
</defs>
|
||||
<path d="{{ traderDetail.areaPath }}" fill="url(#pnlFill)" stroke="none"></path>
|
||||
<path d="{{ traderDetail.linePath }}" fill="none" stroke="#5b9dff" stroke-width="2.5" filter="url(#glow2)"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- network -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:18px 20px;">
|
||||
<div style="font-size:14px; font-weight:700; margin-bottom:10px;">Connected Wallets</div>
|
||||
<sc-if value="{{ traderDetail.hasConnections }}" hint-placeholder-val="{{ true }}">
|
||||
<sc-for list="{{ traderDetail.connections }}" as="w" hint-placeholder-count="2">
|
||||
<div style="display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,0.05);">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:#F6465D; box-shadow:0 0 6px #F6465D;"></div>
|
||||
<div style="font-family:'Roboto Mono'; font-size:12.5px; color:#C7CCDA;">{{ w }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</sc-if>
|
||||
<sc-if value="{{ traderDetail.noConnections }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="font-size:12.5px; color:#5B6377; padding:10px 0;">No linked wallets detected.</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- positions table -->
|
||||
<div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
|
||||
<div style="padding:16px 22px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Positions</div>
|
||||
<table style="width:100%; font-size:12.5px;">
|
||||
<thead>
|
||||
<tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
|
||||
<td style="padding:10px 22px;">Market</td>
|
||||
<td style="padding:10px 10px; text-align:center;">Side</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Size</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Entry</td>
|
||||
<td style="padding:10px 10px; text-align:right;">Current</td>
|
||||
<td style="padding:10px 22px; text-align:right;">P&L</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<sc-for list="{{ traderDetail.positions }}" as="p" hint-placeholder-count="4">
|
||||
<tr style="border-top:1px solid rgba(255,255,255,0.05);">
|
||||
<td style="padding:12px 22px; font-weight:600;">{{ p.market }}</td>
|
||||
<td style="padding:12px 10px; text-align:center;"><span style="padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:{{ p.sideBg }}; color:{{ p.sideColor }};">{{ p.side }}</span></td>
|
||||
<td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono';">{{ p.sizeLabel }}</td>
|
||||
<td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ p.entryLabel }}</td>
|
||||
<td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ p.currentLabel }}</td>
|
||||
<td style="padding:12px 22px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ p.pnlColor }};">{{ p.pnlLabel }}</td>
|
||||
</tr>
|
||||
</sc-for>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
state = {
|
||||
view: "overview",
|
||||
selectedMarketId: null,
|
||||
selectedTraderId: null,
|
||||
markets: null,
|
||||
traders: null,
|
||||
searchText: "",
|
||||
filterTraits: [],
|
||||
winRateMin: 0,
|
||||
winRateMax: 100,
|
||||
volumeMin: 0,
|
||||
volumeMax: 25000000,
|
||||
pnlMin: -50000,
|
||||
pnlMax: 500000,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
import("./market-data.js").then((m) => {
|
||||
this.setState({ markets: m.MARKETS, traders: m.TRADERS });
|
||||
});
|
||||
}
|
||||
|
||||
goOverview = () => this.setState({ view: "overview" });
|
||||
goMarket = (id) => this.setState({ view: "market", selectedMarketId: id });
|
||||
goTrader = (id) => this.setState({ view: "trader", selectedTraderId: id });
|
||||
goTraderSearch = () => this.setState({ view: "traderSearch" });
|
||||
|
||||
setSearchText = (e) => this.setState({ searchText: e.target.value });
|
||||
toggleTrait = (trait) => this.setState((s) => ({
|
||||
filterTraits: s.filterTraits.includes(trait) ? s.filterTraits.filter((t) => t !== trait) : [...s.filterTraits, trait],
|
||||
}));
|
||||
setRange = (key) => (e) => this.setState({ [key]: Number(e.target.value) });
|
||||
resetFilters = () => this.setState({
|
||||
searchText: "", filterTraits: [], winRateMin: 0, winRateMax: 100,
|
||||
volumeMin: 0, volumeMax: 25000000, pnlMin: -50000, pnlMax: 500000,
|
||||
});
|
||||
|
||||
parseClamp(raw, lo, hi) {
|
||||
const n = Number(String(raw).replace(/[^0-9.\-]/g, ""));
|
||||
if (Number.isNaN(n)) return null;
|
||||
return Math.max(lo, Math.min(hi, n));
|
||||
}
|
||||
onMinTextBlur = (key, lo, hi) => (e) => {
|
||||
const n = this.parseClamp(e.target.value, lo, hi);
|
||||
this.setState({ [key]: n === null ? lo : n });
|
||||
};
|
||||
onMaxTextBlur = (key, lo, hi) => (e) => {
|
||||
const n = this.parseClamp(e.target.value, lo, hi);
|
||||
this.setState({ [key]: n === null ? hi : n });
|
||||
};
|
||||
|
||||
fmtMoney(n) {
|
||||
if (n >= 1000000) return "$" + (n / 1000000).toFixed(2) + "M";
|
||||
if (n >= 1000) return "$" + (n / 1000).toFixed(1) + "K";
|
||||
return "$" + Math.round(n);
|
||||
}
|
||||
fmtNum(n) {
|
||||
if (n >= 1000) return (n / 1000).toFixed(1) + "K";
|
||||
return String(Math.round(n));
|
||||
}
|
||||
fmtSigned(n, suffix) {
|
||||
const s = n >= 0 ? "+" : "";
|
||||
return s + n.toFixed(1) + (suffix || "");
|
||||
}
|
||||
|
||||
traitStyle(trait) {
|
||||
const map = {
|
||||
"Arbitrage Bot": { bg: "rgba(22,82,240,0.14)", color: "#5b9dff", border: "rgba(22,82,240,0.3)" },
|
||||
"Resolution Farming": { bg: "rgba(246,70,93,0.12)", color: "#F6465D", border: "rgba(246,70,93,0.28)" },
|
||||
"Trading Bot": { bg: "rgba(255,255,255,0.08)", color: "#C7CCDA", border: "rgba(255,255,255,0.15)" },
|
||||
"Human": { bg: "rgba(124,92,255,0.12)", color: "#a78bff", border: "rgba(124,92,255,0.28)" },
|
||||
"High Volume": { bg: "rgba(18,212,138,0.12)", color: "#12D48A", border: "rgba(18,212,138,0.28)" },
|
||||
};
|
||||
return map[trait] || { bg: "rgba(255,255,255,0.08)", color: "#C7CCDA", border: "rgba(255,255,255,0.15)" };
|
||||
}
|
||||
|
||||
ALL_TRAITS = ["Human", "Trading Bot", "Arbitrage Bot", "Resolution Farming", "High Volume"];
|
||||
|
||||
avatarBg(seed) {
|
||||
const palettes = [
|
||||
"linear-gradient(135deg,#1652F0,#4c8dff)",
|
||||
"linear-gradient(135deg,#12D48A,#0a8f5f)",
|
||||
"linear-gradient(135deg,#F6465D,#a8283a)",
|
||||
"linear-gradient(135deg,#7c5cff,#4c8dff)",
|
||||
"linear-gradient(135deg,#ff9d4c,#F6465D)",
|
||||
];
|
||||
let h = 0;
|
||||
for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
|
||||
return palettes[h % palettes.length];
|
||||
}
|
||||
|
||||
buildDualSlider(minKey, maxKey, lo, hi, fmt) {
|
||||
const minVal = this.state[minKey];
|
||||
const maxVal = this.state[maxKey];
|
||||
const pctMin = ((minVal - lo) / (hi - lo)) * 100;
|
||||
const pctMax = ((maxVal - lo) / (hi - lo)) * 100;
|
||||
return {
|
||||
lo, hi, minVal, maxVal,
|
||||
minLabel: fmt(minVal), maxLabel: fmt(maxVal),
|
||||
fillLeft: pctMin.toFixed(1) + "%",
|
||||
fillRight: (100 - pctMax).toFixed(1) + "%",
|
||||
onMinInput: (e) => this.setState({ [minKey]: Math.min(Number(e.target.value), this.state[maxKey]) }),
|
||||
onMaxInput: (e) => this.setState({ [maxKey]: Math.max(Number(e.target.value), this.state[minKey]) }),
|
||||
onMinTextBlur: this.onMinTextBlur(minKey, lo, hi),
|
||||
onMaxTextBlur: this.onMaxTextBlur(maxKey, lo, hi),
|
||||
};
|
||||
}
|
||||
|
||||
buildPath(series, w, h, pad) {
|
||||
if (!series || series.length < 2) return { line: "", area: "" };
|
||||
const min = Math.min(...series);
|
||||
const max = Math.max(...series);
|
||||
const range = max - min || 1;
|
||||
const innerW = w - pad * 2;
|
||||
const innerH = h - pad * 2;
|
||||
const pts = series.map((v, i) => {
|
||||
const x = pad + (i / (series.length - 1)) * innerW;
|
||||
const y = pad + innerH - ((v - min) / range) * innerH;
|
||||
return [x, y];
|
||||
});
|
||||
let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
|
||||
for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
|
||||
const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
|
||||
return { line, area };
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
const markets = this.state.markets || [];
|
||||
const traders = this.state.traders || [];
|
||||
const view = this.state.view;
|
||||
|
||||
const navDefs = [
|
||||
{ key: "overview", label: "Markets" },
|
||||
{ key: "traders", label: "Traders" },
|
||||
{ key: "watchlist", label: "Watchlist" },
|
||||
{ key: "settings", label: "Settings" },
|
||||
];
|
||||
const navItems = navDefs.map((n) => {
|
||||
const active = (n.key === "overview" && view === "overview") ||
|
||||
(n.key === "traders" && (view === "trader" || view === "traderSearch")) ||
|
||||
(n.key === "watchlist" && false) ||
|
||||
(n.key === "settings" && false);
|
||||
return {
|
||||
label: n.label,
|
||||
onClick: n.key === "overview" ? this.goOverview : (n.key === "traders" ? this.goTraderSearch : this.goOverview),
|
||||
style: `display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer; color:${active ? "#EDEFF5" : "#8B93A7"}; background:${active ? "rgba(22,82,240,0.14)" : "transparent"};`,
|
||||
dotStyle: `width:6px; height:6px; border-radius:50%; background:${active ? "#5b9dff" : "#3a4152"};`,
|
||||
};
|
||||
});
|
||||
|
||||
// ---- global stats
|
||||
const totalVol24 = markets.reduce((s, m) => s + m.volume24h, 0);
|
||||
const openMarkets = markets.filter((m) => m.status === "Active").length;
|
||||
const totalTraders = new Set(traders.map((t) => t.id)).size + markets.reduce((s, m) => s + m.traders, 0) * 0; // display sum below
|
||||
const totalActiveTraders = markets.reduce((s, m) => s + m.traders, 0);
|
||||
const avgLiquidity = markets.length ? markets.reduce((s, m) => s + m.liquidity, 0) / markets.length : 0;
|
||||
|
||||
const globalStats = [
|
||||
{ label: "24H Volume", value: this.fmtMoney(totalVol24), delta: this.fmtSigned(3.4, "%"), deltaColor: "#12D48A" },
|
||||
{ label: "Open Markets", value: String(openMarkets), delta: "+2 today", deltaColor: "#12D48A" },
|
||||
{ label: "Active Traders", value: this.fmtNum(totalActiveTraders), delta: this.fmtSigned(1.8, "%"), deltaColor: "#12D48A" },
|
||||
{ label: "Avg. Liquidity", value: this.fmtMoney(avgLiquidity), delta: this.fmtSigned(-0.6, "%"), deltaColor: "#F6465D" },
|
||||
];
|
||||
|
||||
const marketRows = markets.map((m) => ({
|
||||
question: m.question,
|
||||
category: m.category,
|
||||
statusLabel: m.status,
|
||||
yesPriceLabel: m.yesPrice.toFixed(1) + "%",
|
||||
changeLabel: this.fmtSigned(m.change24h, "%"),
|
||||
changeColor: m.change24h >= 0 ? "#12D48A" : "#F6465D",
|
||||
volumeLabel: this.fmtMoney(m.volume24h),
|
||||
tradersLabel: this.fmtNum(m.traders),
|
||||
onClick: () => this.goMarket(m.id),
|
||||
}));
|
||||
|
||||
const leaderboard = [...traders].sort((a, b) => (b.pnlRealized + b.pnlUnrealized) - (a.pnlRealized + a.pnlUnrealized)).slice(0, 6).map((t) => ({
|
||||
handle: t.handle,
|
||||
trait: t.traits[0],
|
||||
initial: t.handle[0].toUpperCase(),
|
||||
avatarBg: this.avatarBg(t.id),
|
||||
pnlLabel: this.fmtMoney(t.pnlRealized + t.pnlUnrealized),
|
||||
onClick: () => this.goTrader(t.id),
|
||||
}));
|
||||
|
||||
const headerVolume = this.fmtMoney(totalVol24);
|
||||
const crumbDefs = view === "overview" ? [["Markets Overview", null]] :
|
||||
view === "market" ? [["Markets Overview", this.goOverview], ["Market Detail", null]] :
|
||||
view === "traderSearch" ? [["Trader Search", null]] :
|
||||
[["Trader Search", this.goTraderSearch], ["Trader Detail", null]];
|
||||
const breadcrumbItems = crumbDefs.map(([label, onClick], i) => ({
|
||||
label, onClick,
|
||||
style: onClick ? "cursor:pointer; color:#8B93A7;" : "color:#EDEFF5; cursor:default;",
|
||||
sep: i < crumbDefs.length - 1,
|
||||
}));
|
||||
|
||||
// ---- trader search
|
||||
let searchResults = [];
|
||||
let traitFilterChips = [];
|
||||
if (view === "traderSearch") {
|
||||
const q = this.state.searchText.trim().toLowerCase();
|
||||
traitFilterChips = this.ALL_TRAITS.map((tr) => {
|
||||
const active = this.state.filterTraits.includes(tr);
|
||||
const s = this.traitStyle(tr);
|
||||
return {
|
||||
label: tr,
|
||||
onClick: () => this.toggleTrait(tr),
|
||||
style: `cursor:pointer; font-size:12px; font-weight:700; padding:7px 13px; border-radius:9px; background:${active ? s.bg : "rgba(255,255,255,0.04)"}; color:${active ? s.color : "#8B93A7"}; border:1px solid ${active ? s.border : "rgba(255,255,255,0.09)"};`,
|
||||
};
|
||||
});
|
||||
searchResults = traders.filter((t) => {
|
||||
if (q && !t.handle.toLowerCase().includes(q) && !t.wallet.toLowerCase().includes(q)) return false;
|
||||
if (this.state.filterTraits.length && !this.state.filterTraits.every((tr) => t.traits.includes(tr))) return false;
|
||||
if (t.winRate < this.state.winRateMin || t.winRate > this.state.winRateMax) return false;
|
||||
if (t.volume < this.state.volumeMin || t.volume > this.state.volumeMax) return false;
|
||||
const totalPnl = t.pnlRealized + t.pnlUnrealized;
|
||||
if (totalPnl < this.state.pnlMin || totalPnl > this.state.pnlMax) return false;
|
||||
return true;
|
||||
}).map((t) => ({
|
||||
id: t.id,
|
||||
handle: t.handle,
|
||||
initial: t.handle[0].toUpperCase(),
|
||||
avatarBg: this.avatarBg(t.id),
|
||||
traitChips: t.traits.map((tr) => {
|
||||
const s = this.traitStyle(tr);
|
||||
return { label: tr, bg: s.bg, color: s.color, border: s.border };
|
||||
}),
|
||||
winRateLabel: t.winRate.toFixed(1) + "%",
|
||||
volumeLabel: this.fmtMoney(t.volume),
|
||||
pnlLabel: ((t.pnlRealized + t.pnlUnrealized) >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlRealized + t.pnlUnrealized)),
|
||||
pnlColor: (t.pnlRealized + t.pnlUnrealized) >= 0 ? "#12D48A" : "#F6465D",
|
||||
onClick: () => this.goTrader(t.id),
|
||||
}));
|
||||
}
|
||||
|
||||
// ---- market detail
|
||||
let marketDetail = null;
|
||||
let marketStats = [];
|
||||
if (view === "market") {
|
||||
const m = markets.find((x) => x.id === this.state.selectedMarketId) || markets[0];
|
||||
if (m) {
|
||||
const { line, area } = this.buildPath(m.yesSeries, 600, 220, 14);
|
||||
const maxBookSize = Math.max(1, ...m.orderBook.bids.map((b) => b[1]), ...m.orderBook.asks.map((a) => a[1]));
|
||||
marketDetail = {
|
||||
question: m.question,
|
||||
category: m.category,
|
||||
status: m.status,
|
||||
statusBg: m.status === "Active" ? "rgba(18,212,138,0.12)" : "rgba(255,255,255,0.08)",
|
||||
statusColor: m.status === "Active" ? "#12D48A" : "#8B93A7",
|
||||
resolves: m.resolves,
|
||||
yesPriceBig: m.yesPrice.toFixed(1) + "%",
|
||||
linePath: line,
|
||||
areaPath: area,
|
||||
asks: [...m.orderBook.asks].reverse().map(([p, s]) => ({ priceLabel: p.toFixed(1) + "%", sizeLabel: this.fmtMoney(s), barWidth: Math.round((s / maxBookSize) * 100) + "%" })),
|
||||
bids: m.orderBook.bids.map(([p, s]) => ({ priceLabel: p.toFixed(1) + "%", sizeLabel: this.fmtMoney(s), barWidth: Math.round((s / maxBookSize) * 100) + "%" })),
|
||||
holders: m.holders.map((h) => ({
|
||||
trader: h.trader,
|
||||
side: h.side,
|
||||
sideBg: h.side === "Yes" ? "rgba(18,212,138,0.14)" : "rgba(246,70,93,0.14)",
|
||||
sideColor: h.side === "Yes" ? "#12D48A" : "#F6465D",
|
||||
valueLabel: this.fmtMoney(h.value),
|
||||
onClick: () => {
|
||||
const t = traders.find((tr) => tr.handle === h.trader || tr.wallet === h.trader);
|
||||
if (t) this.goTrader(t.id);
|
||||
},
|
||||
})),
|
||||
topTraders: m.topTraders.map((handle) => {
|
||||
const t = traders.find((tr) => tr.handle === handle);
|
||||
return t ? {
|
||||
handle: t.handle,
|
||||
trait: t.traits[0],
|
||||
initial: t.handle[0].toUpperCase(),
|
||||
avatarBg: this.avatarBg(t.id),
|
||||
onClick: () => this.goTrader(t.id),
|
||||
} : { handle, trait: "", initial: handle[0].toUpperCase(), avatarBg: "#333", onClick: () => {} };
|
||||
}),
|
||||
};
|
||||
marketStats = [
|
||||
{ label: "24H Volume", value: this.fmtMoney(m.volume24h) },
|
||||
{ label: "Total Volume", value: this.fmtMoney(m.volumeTotal) },
|
||||
{ label: "Liquidity", value: this.fmtMoney(m.liquidity) },
|
||||
{ label: "Open Interest", value: this.fmtMoney(m.openInterest) },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// ---- trader detail
|
||||
let traderDetail = null;
|
||||
let traderStats = [];
|
||||
if (view === "trader") {
|
||||
const t = traders.find((x) => x.id === this.state.selectedTraderId) || traders[0];
|
||||
if (t) {
|
||||
const { line, area } = this.buildPath(t.pnlSeries, 600, 200, 14);
|
||||
const totalPnl = t.pnlRealized + t.pnlUnrealized;
|
||||
traderDetail = {
|
||||
handle: t.handle,
|
||||
wallet: t.wallet,
|
||||
initial: t.handle[0].toUpperCase(),
|
||||
avatarBg: this.avatarBg(t.id),
|
||||
joined: t.joined,
|
||||
activePositionsLabel: String(t.activePositions),
|
||||
traitChips: t.traits.map((tr) => {
|
||||
const s = this.traitStyle(tr);
|
||||
return { label: tr, bg: s.bg, color: s.color, border: s.border };
|
||||
}),
|
||||
linePath: line,
|
||||
areaPath: area,
|
||||
hasConnections: t.connectedWallets.length > 0,
|
||||
noConnections: t.connectedWallets.length === 0,
|
||||
connections: t.connectedWallets,
|
||||
positions: t.positions.map((p) => ({
|
||||
market: p.market,
|
||||
side: p.side,
|
||||
sideBg: p.side === "Yes" ? "rgba(18,212,138,0.14)" : "rgba(246,70,93,0.14)",
|
||||
sideColor: p.side === "Yes" ? "#12D48A" : "#F6465D",
|
||||
sizeLabel: this.fmtMoney(p.size),
|
||||
entryLabel: p.entry.toFixed(1) + "%",
|
||||
currentLabel: p.current.toFixed(1) + "%",
|
||||
pnlLabel: this.fmtSigned(0, "").slice(0,0) + (p.pnl >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(p.pnl)),
|
||||
pnlColor: p.pnl >= 0 ? "#12D48A" : "#F6465D",
|
||||
})),
|
||||
};
|
||||
traderStats = [
|
||||
{ label: "Realized P&L", value: (t.pnlRealized >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlRealized)), color: t.pnlRealized >= 0 ? "#12D48A" : "#F6465D" },
|
||||
{ label: "Unrealized P&L", value: (t.pnlUnrealized >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlUnrealized)), color: t.pnlUnrealized >= 0 ? "#12D48A" : "#F6465D" },
|
||||
{ label: "Win Rate", value: t.winRate.toFixed(1) + "%", color: "#EDEFF5" },
|
||||
{ label: "Total Volume", value: this.fmtMoney(t.volume), color: "#EDEFF5" },
|
||||
{ label: "Avg Position", value: this.fmtMoney(t.avgPositionSize), color: "#EDEFF5" },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
navItems,
|
||||
headerVolume,
|
||||
breadcrumbItems,
|
||||
isOverview: view === "overview",
|
||||
isMarket: view === "market",
|
||||
isTrader: view === "trader",
|
||||
isTraderSearch: view === "traderSearch",
|
||||
searchResultsCount: String(searchResults.length),
|
||||
searchResults,
|
||||
traitFilterChips,
|
||||
searchText: this.state.searchText,
|
||||
onSearchTextChange: this.setSearchText,
|
||||
winRateSlider: this.buildDualSlider("winRateMin", "winRateMax", 0, 100, (v) => v.toFixed(0) + "%"),
|
||||
volumeSlider: this.buildDualSlider("volumeMin", "volumeMax", 0, 25000000, (v) => this.fmtMoney(v)),
|
||||
pnlSlider: this.buildDualSlider("pnlMin", "pnlMax", -50000, 500000, (v) => (v >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(v))),
|
||||
onResetFilters: this.resetFilters,
|
||||
globalStats,
|
||||
marketRows,
|
||||
leaderboard,
|
||||
marketDetail,
|
||||
marketStats,
|
||||
traderDetail,
|
||||
traderStats,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user