mirror of
https://github.com/LORDBABUINO/stealth.git
synced 2026-06-11 14:53:30 -07:00
Feat: scaffold React frontend with Vite and Stealth theme
Three-screen state machine (input → loading → report) for analyzing Bitcoin wallet descriptor privacy. Includes mock UTXO data with ADDRESS_REUSE, DUST_SPEND, CONSOLIDATION, and CIOH vulnerability types.
This commit is contained in:
LORDBABUINO
@@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
.env.local
|
||||
*.local
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
nodeLinker: node-modules
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Stealth — Bitcoin Wallet Privacy Analyzer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "stealth-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* CSS Custom Properties — Stealth Theme */
|
||||
:root {
|
||||
--bg: #080c14;
|
||||
--surface: #0f1623;
|
||||
--surface-2: #162030;
|
||||
--border: #1e2d45;
|
||||
--border-hover: #2a3f5e;
|
||||
--accent: #00d4aa;
|
||||
--accent-dim: rgba(0, 212, 170, 0.15);
|
||||
--accent-glow: rgba(0, 212, 170, 0.4);
|
||||
--danger: #ff4d6d;
|
||||
--danger-dim: rgba(255, 77, 109, 0.15);
|
||||
--warning: #f4a261;
|
||||
--warning-dim: rgba(244, 162, 97, 0.15);
|
||||
--safe: #2ec4b6;
|
||||
--safe-dim: rgba(46, 196, 182, 0.15);
|
||||
--text: #e8edf5;
|
||||
--text-muted: #6b7a99;
|
||||
--text-dim: #3d4f6e;
|
||||
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-data: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--transition: 0.2s ease;
|
||||
}
|
||||
|
||||
/* Reset & Base */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
/* Focus visible */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useState } from 'react'
|
||||
import InputScreen from './screens/InputScreen'
|
||||
import LoadingScreen from './screens/LoadingScreen'
|
||||
import ReportScreen from './screens/ReportScreen'
|
||||
import { analyzeWallet } from './services/walletService'
|
||||
|
||||
export default function App() {
|
||||
const [screen, setScreen] = useState('input')
|
||||
const [descriptor, setDescriptor] = useState('')
|
||||
const [report, setReport] = useState(null)
|
||||
|
||||
async function handleAnalyze(desc) {
|
||||
setDescriptor(desc)
|
||||
setScreen('loading')
|
||||
try {
|
||||
const result = await analyzeWallet(desc)
|
||||
setReport(result)
|
||||
setScreen('report')
|
||||
} catch (err) {
|
||||
console.error('Analysis failed:', err)
|
||||
setScreen('input')
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
setScreen('input')
|
||||
setDescriptor('')
|
||||
setReport(null)
|
||||
}
|
||||
|
||||
if (screen === 'loading') return <LoadingScreen descriptor={descriptor} />
|
||||
if (screen === 'report') return <ReportScreen report={report} descriptor={descriptor} onReset={handleReset} />
|
||||
return <InputScreen onAnalyze={handleAnalyze} />
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useState } from 'react'
|
||||
import VulnerabilityBadge from './VulnerabilityBadge'
|
||||
import styles from './UtxoCard.module.css'
|
||||
|
||||
function truncateAddress(addr) {
|
||||
if (!addr || addr.length <= 20) return addr
|
||||
return `${addr.slice(0, 12)}…${addr.slice(-8)}`
|
||||
}
|
||||
|
||||
function truncateTxid(txid) {
|
||||
if (!txid || txid.length <= 24) return txid
|
||||
return `${txid.slice(0, 16)}…${txid.slice(-8)}`
|
||||
}
|
||||
|
||||
export default function UtxoCard({ utxo }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const isClean = utxo.vulnerabilities.length === 0
|
||||
|
||||
const highestSeverity = utxo.vulnerabilities.reduce((acc, v) => {
|
||||
const order = { high: 3, medium: 2, low: 1 }
|
||||
return (order[v.severity] ?? 0) > (order[acc] ?? 0) ? v.severity : acc
|
||||
}, null)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.card} ${isClean ? styles.clean : styles.hasVulnerabilities}`}
|
||||
>
|
||||
<div
|
||||
className={styles.header}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
role="button"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<div className={styles.headerLeft}>
|
||||
<div className={styles.addressRow}>
|
||||
<span className={styles.address} title={utxo.address}>
|
||||
{truncateAddress(utxo.address)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.badges}>
|
||||
{isClean ? (
|
||||
<span className={styles.cleanLabel}>✓ Clean</span>
|
||||
) : (
|
||||
utxo.vulnerabilities.map((v, i) => (
|
||||
<VulnerabilityBadge key={i} type={v.type} severity={v.severity} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.headerRight}>
|
||||
<span className={styles.amount}>
|
||||
{utxo.amountBtc.toFixed(8)} BTC
|
||||
</span>
|
||||
<span className={styles.confirmations}>
|
||||
{utxo.confirmations.toLocaleString()} confs
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className={`${styles.chevron} ${open ? styles.open : ''}`}>▼</span>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.detail} ${open ? styles.open : ''}`}>
|
||||
<span className={styles.txidLabel}>txid</span>
|
||||
<div className={styles.txid}>
|
||||
{utxo.txid}:{utxo.vout}
|
||||
</div>
|
||||
|
||||
{!isClean && (
|
||||
<div className={styles.vulnerabilityList}>
|
||||
{utxo.vulnerabilities.map((v, i) => (
|
||||
<div key={i} className={`${styles.vulnItem} ${styles[v.severity]}`}>
|
||||
<div className={styles.vulnHeader}>
|
||||
<VulnerabilityBadge type={v.type} severity={v.severity} />
|
||||
</div>
|
||||
<p className={styles.vulnDesc}>{v.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.card.hasVulnerabilities {
|
||||
border-left: 3px solid var(--danger);
|
||||
}
|
||||
|
||||
.card.clean {
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
gap: 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.headerLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.addressRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-family: var(--font-data);
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cleanLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-family: var(--font-data);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.confirmations {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
transition: transform var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chevron.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Detail panel */
|
||||
.detail {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
|
||||
.detail.open {
|
||||
max-height: 600px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.txid {
|
||||
font-family: var(--font-data);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.txidLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vulnerabilityList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vulnItem {
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.vulnItem.high {
|
||||
background: var(--danger-dim);
|
||||
border: 1px solid rgba(255, 77, 109, 0.2);
|
||||
}
|
||||
|
||||
.vulnItem.medium {
|
||||
background: var(--warning-dim);
|
||||
border: 1px solid rgba(244, 162, 97, 0.2);
|
||||
}
|
||||
|
||||
.vulnItem.low {
|
||||
background: var(--safe-dim);
|
||||
border: 1px solid rgba(46, 196, 182, 0.2);
|
||||
}
|
||||
|
||||
.vulnHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.vulnDesc {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import styles from './VulnerabilityBadge.module.css'
|
||||
|
||||
const LABELS = {
|
||||
ADDRESS_REUSE: 'Address Reuse',
|
||||
DUST_SPEND: 'Dust',
|
||||
CONSOLIDATION: 'Consolidation',
|
||||
CIOH: 'CIOH',
|
||||
}
|
||||
|
||||
export default function VulnerabilityBadge({ type, severity }) {
|
||||
return (
|
||||
<span className={`${styles.badge} ${styles[severity]}`}>
|
||||
<span className={styles.dot} />
|
||||
{LABELS[type] ?? type}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.high {
|
||||
background: var(--danger-dim);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(255, 77, 109, 0.3);
|
||||
}
|
||||
|
||||
.high .dot {
|
||||
background: var(--danger);
|
||||
box-shadow: 0 0 4px var(--danger);
|
||||
}
|
||||
|
||||
.medium {
|
||||
background: var(--warning-dim);
|
||||
color: var(--warning);
|
||||
border: 1px solid rgba(244, 162, 97, 0.3);
|
||||
}
|
||||
|
||||
.medium .dot {
|
||||
background: var(--warning);
|
||||
box-shadow: 0 0 4px var(--warning);
|
||||
}
|
||||
|
||||
.low {
|
||||
background: var(--safe-dim);
|
||||
color: var(--safe);
|
||||
border: 1px solid rgba(46, 196, 182, 0.3);
|
||||
}
|
||||
|
||||
.low .dot {
|
||||
background: var(--safe);
|
||||
box-shadow: 0 0 4px var(--safe);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './App.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,90 @@
|
||||
export const mockReport = {
|
||||
descriptor: 'wpkh([a1b2c3d4/84h/0h/0h]xpub6CatWdiZynkCminahu8Gmr7FAVnQXBTSMaBxn6qmBNkdm9tDkFzWmjmDrLBCQSTa7BHgpEjCXzMTCyDsQLSmcGYJHBB7cTwpqLNRKGP47uw/0/*)#qwer1234',
|
||||
summary: {
|
||||
total: 5,
|
||||
clean: 1,
|
||||
vulnerable: 4,
|
||||
},
|
||||
utxos: [
|
||||
{
|
||||
txid: '3a7f2b8c1d4e9f0a6b5c2d7e8f3a1b4c9d2e5f0a7b8c1d4e9f2a5b6c3d7e8f1',
|
||||
vout: 0,
|
||||
address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
|
||||
amountBtc: 0.05234891,
|
||||
confirmations: 1842,
|
||||
vulnerabilities: [],
|
||||
},
|
||||
{
|
||||
txid: 'b4c8e2f6a1d5b9c3e7f1a5d9b3c7e1f5a9d3b7c1e5f9a3d7b1c5e9f3a7d1b5',
|
||||
vout: 1,
|
||||
address: 'bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq',
|
||||
amountBtc: 0.00023000,
|
||||
confirmations: 312,
|
||||
vulnerabilities: [
|
||||
{
|
||||
type: 'DUST_SPEND',
|
||||
severity: 'medium',
|
||||
description:
|
||||
'This UTXO is near the dust threshold. Spending it may cost more in fees than its value, and dust outputs are often used as tracking vectors by chain surveillance companies.',
|
||||
},
|
||||
{
|
||||
type: 'ADDRESS_REUSE',
|
||||
severity: 'high',
|
||||
description:
|
||||
'This address has received funds in 3 separate transactions. Address reuse breaks the one-time-address privacy model and allows observers to link all deposits to the same wallet.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
txid: 'f9e3d7c1b5a9f3d7c1b5a9f3d7c1b5a9f3d7c1b5a9f3d7c1b5a9f3d7c1b5a9',
|
||||
vout: 0,
|
||||
address: 'bc1q9h7garjcdkl4h5khfz2yxkhsmhep5j7g4cjtch',
|
||||
amountBtc: 0.12000000,
|
||||
confirmations: 4521,
|
||||
vulnerabilities: [
|
||||
{
|
||||
type: 'CONSOLIDATION',
|
||||
severity: 'medium',
|
||||
description:
|
||||
'This UTXO was created by consolidating 7 inputs in a single transaction. Consolidation reveals that all input addresses belong to the same wallet, reducing privacy significantly.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
txid: '2c6e0a4f8b2d6e0a4f8b2d6e0a4f8b2d6e0a4f8b2d6e0a4f8b2d6e0a4f8b2d',
|
||||
vout: 2,
|
||||
address: 'bc1qm34mqf4vn8f5vhf0q3djg2zuzfm9aap6e3n4j',
|
||||
amountBtc: 0.87654321,
|
||||
confirmations: 98,
|
||||
vulnerabilities: [
|
||||
{
|
||||
type: 'CIOH',
|
||||
severity: 'high',
|
||||
description:
|
||||
'Common Input Ownership Heuristic (CIOH): this UTXO was spent alongside UTXOs from different derivation paths in the same transaction, strongly suggesting to analysts that all inputs share a common owner.',
|
||||
},
|
||||
{
|
||||
type: 'ADDRESS_REUSE',
|
||||
severity: 'high',
|
||||
description:
|
||||
'This address appears in 5 transactions as both sender and receiver, a pattern that severely compromises wallet privacy and makes cluster analysis trivial.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
txid: '7d1b5e9f3a7d1b5e9f3a7d1b5e9f3a7d1b5e9f3a7d1b5e9f3a7d1b5e9f3a7d',
|
||||
vout: 0,
|
||||
address: 'bc1qcr8te4kr609gcawutmrza0j4xv80jy8zeqchgx',
|
||||
amountBtc: 0.00500000,
|
||||
confirmations: 2103,
|
||||
vulnerabilities: [
|
||||
{
|
||||
type: 'DUST_SPEND',
|
||||
severity: 'low',
|
||||
description:
|
||||
'A small dust amount was received at this address in a prior transaction. While the dust has not been spent, its presence could be used to track this UTXO if included in a future transaction.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useState } from 'react'
|
||||
import styles from './InputScreen.module.css'
|
||||
|
||||
const PLACEHOLDER = `wpkh([a1b2c3d4/84h/0h/0h]xpub6CatWdiZynkCminahu8Gmr7FAVnQXBTSMaBxn6qmBNkdm9tDkFzWmjmDrLBCQSTa7BHgpEjCXzMTCyDsQLSmcGYJHBB7cTwpqLNRKGP47uw/0/*)#qwer1234`
|
||||
|
||||
export default function InputScreen({ onAnalyze }) {
|
||||
const [descriptor, setDescriptor] = useState('')
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
const trimmed = descriptor.trim()
|
||||
if (!trimmed) return
|
||||
onAnalyze(trimmed)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.wordmark}>
|
||||
<div className={styles.logo}>
|
||||
STEAL<span>TH</span>
|
||||
</div>
|
||||
<div className={styles.tagline}>Bitcoin Wallet Privacy Analyzer</div>
|
||||
</div>
|
||||
|
||||
<form className={styles.card} onSubmit={handleSubmit}>
|
||||
<label className={styles.label} htmlFor="descriptor">
|
||||
Wallet Descriptor
|
||||
</label>
|
||||
<textarea
|
||||
id="descriptor"
|
||||
className={styles.textarea}
|
||||
value={descriptor}
|
||||
onChange={(e) => setDescriptor(e.target.value)}
|
||||
placeholder={PLACEHOLDER}
|
||||
spellCheck={false}
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.button}
|
||||
disabled={!descriptor.trim()}
|
||||
>
|
||||
Analyze Wallet
|
||||
</button>
|
||||
<p className={styles.hint}>
|
||||
Supports <code>wpkh()</code>, <code>pkh()</code>, <code>sh(wpkh())</code> descriptors
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
.root {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
/* Wordmark */
|
||||
.wordmark {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Form card */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: var(--font-data);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding: 14px 16px;
|
||||
resize: vertical;
|
||||
transition: border-color var(--transition);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.textarea::placeholder {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--accent);
|
||||
color: #080c14;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
.button:hover:not(:disabled) {
|
||||
background: #00f0c2;
|
||||
box-shadow: 0 0 24px var(--accent-glow);
|
||||
}
|
||||
|
||||
.button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint code {
|
||||
font-family: var(--font-data);
|
||||
font-size: 12px;
|
||||
background: var(--bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import styles from './LoadingScreen.module.css'
|
||||
|
||||
const MESSAGES = [
|
||||
'Parsing descriptor',
|
||||
'Fetching transactions',
|
||||
'Scanning UTXO set',
|
||||
'Running heuristics',
|
||||
]
|
||||
|
||||
export default function LoadingScreen({ descriptor }) {
|
||||
const [msgIndex, setMsgIndex] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setMsgIndex((i) => (i + 1) % MESSAGES.length)
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const shortDescriptor = descriptor.length > 48
|
||||
? `${descriptor.slice(0, 48)}…`
|
||||
: descriptor
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={styles.scanner}>
|
||||
<div className={styles.ring} />
|
||||
<div className={styles.ring2} />
|
||||
<div className={styles.ring3} />
|
||||
<div className={styles.logoMark}>
|
||||
ST<span>LT</span>H
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.status}>
|
||||
<div key={msgIndex} className={styles.statusText}>
|
||||
{MESSAGES[msgIndex]}<span className={styles.dots}>...</span>
|
||||
</div>
|
||||
<div className={styles.descriptor}>{shortDescriptor}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.progressBar}>
|
||||
<div className={styles.progressFill} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
.root {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 48px 24px;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
/* Scanner ring */
|
||||
.scanner {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: var(--accent);
|
||||
border-right-color: rgba(0, 212, 170, 0.3);
|
||||
animation: spin 1.2s linear infinite;
|
||||
}
|
||||
|
||||
.ring2 {
|
||||
position: absolute;
|
||||
inset: 12px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
border-bottom-color: rgba(0, 212, 170, 0.4);
|
||||
border-left-color: rgba(0, 212, 170, 0.15);
|
||||
animation: spin 2s linear infinite reverse;
|
||||
}
|
||||
|
||||
.ring3 {
|
||||
position: absolute;
|
||||
inset: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 212, 170, 0.1);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logoMark {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logoMark span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Status messages */
|
||||
.status {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statusText {
|
||||
font-size: 18px;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
animation: fadeInUp 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: inline-block;
|
||||
animation: blink 1.2s step-end infinite;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.descriptor {
|
||||
margin-top: 12px;
|
||||
font-family: var(--font-data);
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progressBar {
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
height: 2px;
|
||||
background: var(--surface);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progressFill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
animation: progress 4s linear forwards;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
from { width: 0%; }
|
||||
to { width: 95%; }
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import UtxoCard from '../components/UtxoCard'
|
||||
import styles from './ReportScreen.module.css'
|
||||
|
||||
function truncateDescriptor(desc) {
|
||||
if (!desc || desc.length <= 80) return desc
|
||||
return `${desc.slice(0, 80)}…`
|
||||
}
|
||||
|
||||
export default function ReportScreen({ report, descriptor, onReset }) {
|
||||
const { summary, utxos } = report
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={styles.container}>
|
||||
{/* Nav */}
|
||||
<div className={styles.header}>
|
||||
<div className={styles.nav}>
|
||||
<div className={styles.wordmark}>
|
||||
STEAL<span>TH</span>
|
||||
</div>
|
||||
<button className={styles.backButton} onClick={onReset}>
|
||||
← Analyze Another Wallet
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.descriptorBox}>
|
||||
<span className={styles.descriptorLabel}>Analyzed descriptor</span>
|
||||
<div className={styles.descriptorValue}>
|
||||
{truncateDescriptor(descriptor)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary bar */}
|
||||
<div className={styles.summaryBar}>
|
||||
<div className={`${styles.summaryCard} ${styles.total}`}>
|
||||
<div className={styles.summaryNumber}>{summary.total}</div>
|
||||
<div className={styles.summaryLabel}>Total UTXOs</div>
|
||||
</div>
|
||||
<div className={`${styles.summaryCard} ${styles.vulnerable}`}>
|
||||
<div className={styles.summaryNumber}>{summary.vulnerable}</div>
|
||||
<div className={styles.summaryLabel}>Vulnerable</div>
|
||||
</div>
|
||||
<div className={`${styles.summaryCard} ${styles.clean}`}>
|
||||
<div className={styles.summaryNumber}>{summary.clean}</div>
|
||||
<div className={styles.summaryLabel}>Clean</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* UTXO list */}
|
||||
<div className={styles.listHeader}>
|
||||
<span className={styles.listTitle}>UTXO Analysis</span>
|
||||
</div>
|
||||
<div className={styles.utxoList}>
|
||||
{utxos.map((utxo) => (
|
||||
<UtxoCard key={`${utxo.txid}:${utxo.vout}`} utxo={utxo} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
.root {
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
padding: 40px 24px 80px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.wordmark span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.backButton:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.descriptorBox {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.descriptorLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.descriptorValue {
|
||||
font-family: var(--font-data);
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Summary bar */
|
||||
.summaryBar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.summaryCard {
|
||||
flex: 1;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summaryNumber {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-data);
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.summaryLabel {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.total .summaryNumber {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.vulnerable .summaryNumber {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.vulnerable {
|
||||
border-color: rgba(255, 77, 109, 0.25);
|
||||
}
|
||||
|
||||
.clean .summaryNumber {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.clean {
|
||||
border-color: rgba(0, 212, 170, 0.25);
|
||||
}
|
||||
|
||||
/* UTXO list */
|
||||
.listHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.listTitle {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.utxoList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { mockReport } from '../mocks/mockData'
|
||||
|
||||
export const analyzeWallet = async (descriptor) => {
|
||||
await new Promise((r) => setTimeout(r, 4000))
|
||||
return mockReport
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
+1689
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user