mirror of
https://github.com/LORDBABUINO/stealth.git
synced 2026-05-05 11:49:08 -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
84
frontend/src/components/UtxoCard.jsx
Normal file
84
frontend/src/components/UtxoCard.jsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
168
frontend/src/components/UtxoCard.module.css
Normal file
168
frontend/src/components/UtxoCard.module.css
Normal file
@@ -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;
|
||||
}
|
||||
17
frontend/src/components/VulnerabilityBadge.jsx
Normal file
17
frontend/src/components/VulnerabilityBadge.jsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
53
frontend/src/components/VulnerabilityBadge.module.css
Normal file
53
frontend/src/components/VulnerabilityBadge.module.css
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user