File size: 18,040 Bytes
"""
WalletSafe Frontend — Entity explorer, wallet search, risk page.
===============================================================
Served at /walletsafe/ as a single-page app.
Hits /api/v1/wallet/* endpoints directly via fetch().
"""

from fastapi import APIRouter
from fastapi.responses import HTMLResponse

router = APIRouter(tags=["walletsafe"])

WALLETSAFE_HTML = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WalletSafe — Wallet Intelligence Explorer</title>
<style>
  :root {
    --bg: #0a0a0f;
    --card: #12121a;
    --border: #1e1e2e;
    --text: #e0e0e8;
    --muted: #8888a0;
    --accent: #6c5ce7;
    --danger: #ff4757;
    --warning: #ffa502;
    --safe: #2ed573;
    --info: #1e90ff;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; min-height:100vh; }

  nav { background:var(--card); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; gap:24px; }
  nav .logo { font-size:20px; font-weight:700; color:var(--accent); letter-spacing:-0.5px; }
  nav .tab { color:var(--muted); cursor:pointer; padding:6px 14px; border-radius:6px; font-size:14px; transition:all .2s; }
  nav .tab:hover { color:var(--text); background:var(--border); }
  nav .tab.active { color:var(--accent); background:rgba(108,92,231,0.15); }

  .container { max-width:1200px; margin:0 auto; padding:24px; }

  /* Search bar */
  .search-bar { display:flex; gap:12px; margin-bottom:24px; }
  .search-bar input { flex:1; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px; outline:none; }
  .search-bar input:focus { border-color:var(--accent); }
  .search-bar select { padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; }
  .search-bar button { padding:10px 24px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer; font-weight:600; }
  .search-bar button:hover { opacity:0.9; }

  /* Cards */
  .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:16px; }
  .card h3 { font-size:16px; color:var(--muted); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px; }

  /* Risk gauge */
  .risk-gauge { display:flex; align-items:center; gap:16px; margin:16px 0; }
  .risk-score { font-size:48px; font-weight:800; line-height:1; }
  .risk-label { font-size:18px; font-weight:600; padding:4px 12px; border-radius:6px; }
  .risk-minimal { color:var(--safe); background:rgba(46,213,115,0.1); }
  .risk-low { color:#7bed9f; background:rgba(123,237,159,0.1); }
  .risk-medium { color:var(--warning); background:rgba(255,165,2,0.1); }
  .risk-high { color:#ff6348; background:rgba(255,99,72,0.1); }
  .risk-critical { color:var(--danger); background:rgba(255,71,87,0.15); }
  .risk-unknown { color:var(--muted); background:rgba(136,136,160,0.1); }

  /* Risk bar */
  .risk-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:8px; }
  .risk-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }

  /* Profile grid */
  .profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:768px) { .profile-grid { grid-template-columns:1fr; } }
  .profile-field { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); }
  .profile-field:last-child { border:none; }
  .profile-field .label { color:var(--muted); font-size:13px; }
  .profile-field .value { font-weight:500; font-size:14px; word-break:break-all; }

  /* Tags */
  .tag { display:inline-block; padding:3px 8px; border-radius:4px; font-size:12px; margin:2px; }
  .tag-exchange { background:rgba(30,144,255,0.15); color:var(--info); }
  .tag-scam { background:rgba(255,71,87,0.15); color:var(--danger); }
  .tag-sanctioned { background:rgba(255,71,87,0.25); color:var(--danger); }
  .tag-defi { background:rgba(108,92,231,0.15); color:var(--accent); }
  .tag-bridge { background:rgba(255,165,2,0.15); color:var(--warning); }
  .tag-mev { background:rgba(255,165,2,0.15); color:var(--warning); }
  .tag-deployer { background:rgba(46,213,115,0.15); color:var(--safe); }
  .tag-wallet { background:rgba(136,136,160,0.15); color:var(--muted); }
  .tag-unknown { background:rgba(136,136,160,0.1); color:var(--muted); }

  /* Wallet list */
  .wallet-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
  .wallet-item:last-child { border:none; }
  .wallet-addr { font-family:monospace; font-size:13px; color:var(--info); cursor:pointer; }
  .wallet-addr:hover { text-decoration:underline; }
  .wallet-chain { font-size:11px; padding:2px 6px; border-radius:3px; background:rgba(108,92,231,0.15); color:var(--accent); }

  /* Deployer history */
  .deploy-item { padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .deploy-item:last-child { border:none; }
  .deploy-token { font-family:monospace; color:var(--info); }

  /* Loading state */
  .loading { display:flex; align-items:center; justify-content:center; padding:60px; color:var(--muted); }
  .spinner { width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin-right:12px; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* Empty state */
  .empty { text-align:center; padding:60px; color:var(--muted); }
  .empty h2 { font-size:20px; margin-bottom:8px; color:var(--text); }

  /* Error */
  .error { background:rgba(255,71,87,0.1); border:1px solid rgba(255,71,87,0.3); border-radius:8px; padding:16px; color:var(--danger); margin-bottom:16px; }

  /* Stats bar */
  .stats-bar { display:flex; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
  .stat-item { display:flex; flex-direction:column; }
  .stat-value { font-size:28px; font-weight:700; }
  .stat-label { font-size:12px; color:var(--muted); text-transform:uppercase; }

  /* Entity graph placeholder */
  .entity-graph { min-height:200px; display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
  .entity-node { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:12px; cursor:pointer; transition:all .2s; }
  .entity-node:hover { border-color:var(--accent); }
  .entity-node.center { border-color:var(--accent); background:rgba(108,92,231,0.1); }
  .entity-node .addr { font-family:monospace; color:var(--info); }
  .entity-node .method { color:var(--muted); font-size:10px; margin-top:2px; }
</style>
</head>
<body>

<nav>
  <div class="logo">WalletSafe</div>
  <div class="tab active" data-tab="search" onclick="switchTab('search')">Search</div>
  <div class="tab" data-tab="dashboard" onclick="switchTab('dashboard')">Dashboard</div>
</nav>

<!-- Search Tab -->
<div id="tab-search" class="container">
  <div class="search-bar">
    <input id="search-input" type="text" placeholder="Enter wallet address (0x..., Solana...)" onkeydown="if(event.key==='Enter')searchWallet()">
    <select id="chain-select">
      <option value="solana">Solana</option>
      <option value="ethereum">Ethereum</option>
      <option value="bsc">BSC</option>
      <option value="polygon">Polygon</option>
      <option value="arbitrum">Arbitrum</option>
      <option value="base">Base</option>
    </select>
    <button onclick="searchWallet()">Analyze</button>
  </div>

  <div id="search-results"></div>
  <div id="empty-state" class="empty">
    <h2>Wallet Intelligence Explorer</h2>
    <p>Enter a wallet address to see risk scores, entity clusters, labels, and deployer history</p>
  </div>
</div>

<!-- Dashboard Tab -->
<div id="tab-dashboard" class="container" style="display:none">
  <div class="stats-bar" id="dashboard-stats"></div>
  <div class="profile-grid" id="dashboard-content"></div>
</div>

<script>
const API = '/api/v1/wallet';
let currentTab = 'search';

function switchTab(tab) {
  currentTab = tab;
  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
  document.getElementById('tab-search').style.display = tab === 'search' ? 'block' : 'none';
  document.getElementById('tab-dashboard').style.display = tab === 'dashboard' ? 'block' : 'none';
  if (tab === 'dashboard') loadDashboard();
}

async function api(endpoint, opts = {}) {
  try {
    const r = await fetch(API + endpoint, opts);
    return await r.json();
  } catch(e) {
    console.error('API error:', e);
    return null;
  }
}

async function searchWallet() {
  const addr = document.getElementById('search-input').value.trim();
  const chain = document.getElementById('chain-select').value;
  if (!addr) return;

  const results = document.getElementById('search-results');
  const empty = document.getElementById('empty-state');
  empty.style.display = 'none';
  results.innerHTML = '<div class="loading"><div class="spinner"></div>Analyzing wallet...</div>';

  const profile = await api(`/${addr}/profile?chain=${chain}`);
  if (!profile) {
    results.innerHTML = '<div class="error">Failed to fetch wallet profile. Check the address and try again.</div>';
    return;
  }

  results.innerHTML = renderProfile(profile, chain);
}

function renderProfile(p, chain) {
  const score = p.risk_score || 0;
  const level = p.risk_level || 'unknown';
  const scoreColor = riskColor(score);
  const barColor = riskBarColor(level);

  let html = '';

  // Risk Card
  html += `<div class="card">
    <h3>Risk Assessment</h3>
    <div class="risk-gauge">
      <div class="risk-score" style="color:${scoreColor}">${Math.round(score)}</div>
      <div>
        <span class="risk-label risk-${level}">${level.toUpperCase()}</span>
        <div class="risk-bar" style="width:200px;margin-top:8px">
          <div class="risk-bar-fill" style="width:${score}%;background:${barColor}"></div>
        </div>
      </div>
    </div>
    ${p.scam_associations?.length ? `<div style="margin-top:12px"><strong>Scam Associations:</strong> ${p.scam_associations.map(s => `<span class="tag tag-scam">${s.type} (${s.source})</span>`).join(' ')}</div>` : ''}
  </div>`;

  // Profile Info
  html += `<div class="profile-grid">
    <div class="card">
      <h3>Wallet Identity</h3>
      <div class="profile-field"><span class="label">Address</span><span class="value" style="font-family:monospace;font-size:12px">${p.address}</span></div>
      <div class="profile-field"><span class="label">Chain</span><span class="value">${p.chain}</span></div>
      <div class="profile-field"><span class="label">Entity</span><span class="value">${p.entity_label || p.entity_id?.slice(0,16) + '...' || 'Unknown'}</span></div>
      <div class="profile-field"><span class="label">Category</span><span class="value"><span class="tag tag-${p.entity_category || 'unknown'}">${p.entity_category || 'unknown'}</span></span></div>
      <div class="profile-field"><span class="label">Confidence</span><span class="value">${(p.confidence * 100).toFixed(0)}%</span></div>
      ${p.total_transactions ? `<div class="profile-field"><span class="label">Transactions</span><span class="value">${p.total_transactions.toLocaleString()}</span></div>` : ''}
      ${p.total_volume ? `<div class="profile-field"><span class="label">Volume</span><span class="value">$${p.total_volume.toLocaleString()}</span></div>` : ''}
    </div>

    <div class="card">
      <h3>Labels (${p.labels?.length || 0})</h3>
      ${p.labels?.length ? p.labels.map(l => `<div class="profile-field"><span class="label">${l.source}</span><span class="value"><span class="tag tag-${l.category || 'unknown'}">${l.label || l.category}</span></span></div>`).join('') : '<div style="color:var(--muted);padding:20px;text-align:center">No labels found</div>'}
    </div>
  </div>`;

  // Linked Wallets / Entity
  if (p.linked_wallets?.length) {
    html += `<div class="card">
      <h3>Linked Wallets (${p.linked_wallets.length})</h3>
      <div class="entity-graph">
        <div class="entity-node center">
          <div class="addr">${p.address.slice(0,10)}...${p.address.slice(-6)}</div>
          <div class="method">primary</div>
        </div>
        ${p.linked_wallets.map(w => `<div class="entity-node" onclick="drillDown('${w.address}','${w.chain}')">
          <div class="addr">${w.address.slice(0,10)}...${w.address.slice(-6)}</div>
          <div class="method">${w.heuristic || w.method || 'linked'} · ${w.chain} · ${(w.confidence * 100).toFixed(0)}%</div>
        </div>`).join('')}
      </div>
    </div>`;
  }

  // Cross-chain
  if (p.cross_chain_presence?.length) {
    html += `<div class="card"><h3>Cross-Chain Presence</h3>
      ${p.cross_chain_presence.map(b => `<div class="wallet-item">
        <span class="wallet-addr" onclick="drillDown('${b.dest_address}','${b.dest_chain}')">${b.dest_address.slice(0,12)}...${b.dest_address.slice(-6)}</span>
        <span class="wallet-chain">${b.dest_chain}</span>
        <span style="color:var(--muted);font-size:12px">via ${b.bridge_name}</span>
      </div>`).join('')}
    </div>`;
  }

  // Deployer History
  if (p.deployer_history?.length) {
    html += `<div class="card"><h3>Deployer History (${p.deployer_history.length})</h3>
      ${p.deployer_history.map(d => `<div class="deploy-item">
        <span class="deploy-token">${d.token_symbol || d.token_address?.slice(0,12)}</span>
        <span style="margin-left:8px">${d.token_name || ''}</span>
        ${d.is_scam_related ? '<span class="tag tag-scam" style="margin-left:8px">SCAM</span>' : ''}
        <span style="float:right;color:var(--muted)">${d.deployed_at ? new Date(d.deployed_at).toLocaleDateString() : ''} · ${d.outcome || 'unknown'}</span>
      </div>`).join('')}
    </div>`;
  }

  return html;
}

function drillDown(addr, chain) {
  document.getElementById('search-input').value = addr;
  document.getElementById('chain-select').value = chain;
  searchWallet();
}

function riskColor(score) {
  if (score >= 80) return 'var(--danger)';
  if (score >= 60) return '#ff6348';
  if (score >= 40) return 'var(--warning)';
  if (score >= 20) return '#7bed9f';
  return 'var(--safe)';
}

function riskBarColor(level) {
  const m = {critical:'var(--danger)',high:'#ff6348',medium:'var(--warning)',low:'#7bed9f',minimal:'var(--safe)',unknown:'var(--muted)'};
  return m[level] || 'var(--muted)';
}

async function loadDashboard() {
  const stats = document.getElementById('dashboard-stats');
  const content = document.getElementById('dashboard-content');
  stats.innerHTML = '<div class="loading"><div class="spinner"></div>Loading...</div>';

  const [health, labelStats] = await Promise.all([
    api('/health'),
    api('/labels/stats'),
  ]);

  let statsHtml = '';
  if (health) {
    statsHtml += `
      <div class="stat-item"><span class="stat-value" style="color:${health.storage?.redis ? 'var(--safe)' : 'var(--danger)'}">${health.storage?.redis ? 'Online' : 'Offline'}</span><span class="stat-label">Redis</span></div>
      <div class="stat-item"><span class="stat-value" style="color:${health.storage?.clickhouse ? 'var(--safe)' : 'var(--warning)'}">${health.storage?.clickhouse ? 'Online' : 'Offline'}</span><span class="stat-label">ClickHouse</span></div>
      <div class="stat-item"><span class="stat-value">${health.clustering?.wallets || 0}</span><span class="stat-label">Cluster Nodes</span></div>
    `;
  }
  if (labelStats) {
    const c = labelStats.last_counts || {};
    statsHtml += `
      <div class="stat-item"><span class="stat-value">${c.total || 0}</span><span class="stat-label">Total Labels</span></div>
      <div class="stat-item"><span class="stat-value">${c.ofac || 0}</span><span class="stat-label">OFAC Sanctions</span></div>
      <div class="stat-item"><span class="stat-value">${c.etherscan_combined || 0}</span><span class="stat-label">Etherscan Labels</span></div>
      <div class="stat-item"><span class="stat-value">${c.solana_cex || 0}</span><span class="stat-label">Solana CEX</span></div>
    `;
  }
  stats.innerHTML = statsHtml;

  // Show recent high-risk wallets from Redis scan
  content.innerHTML = `
    <div class="card" style="grid-column:1/-1">
      <h3>System Health</h3>
      <div class="profile-field"><span class="label">Status</span><span class="value">${health?.status === 'ok' ? '<span style="color:var(--safe)">Operational</span>' : '<span style="color:var(--warning)">Degraded</span>'}</span></div>
      <div class="profile-field"><span class="label">Redis</span><span class="value">${health?.storage?.redis ? '<span style="color:var(--safe)">Connected</span>' : '<span style="color:var(--danger)">Disconnected</span>'}</span></div>
      <div class="profile-field"><span class="label">ClickHouse</span><span class="value">${health?.storage?.clickhouse ? '<span style="color:var(--safe)">Connected</span>' : '<span style="color:var(--warning)">Unavailable (Redis-only)</span>'}</span></div>
      <div class="profile-field"><span class="label">Clustering Heuristics</span><span class="value">${health?.clustering?.heuristics || 6}</span></div>
      <div class="profile-field"><span class="label">Label Sources</span><span class="value">9 (6 static + 3 live)</span></div>
      <div class="profile-field"><span class="label">Label Import</span><span class="value">${labelStats?.loading ? '<span style="color:var(--warning)">Loading...</span>' : '<span style="color:var(--safe)">Complete</span>'}</span></div>
    </div>
  `;
}
</script>
</body>
</html>"""


@router.get("/walletsafe/")
async def walletsafe_root():
    """Serve the WalletSafe frontend."""
    return HTMLResponse(content=WALLETSAFE_HTML)


@router.get("/walletsafe")
async def walletsafe_no_slash():
    """Redirect to /walletsafe/."""
    return HTMLResponse(content=WALLETSAFE_HTML)