rwallet-online/wallet-visualization.html

549 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallet Flow Visualization - 0x2956...7D1</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #e0e0e0;
min-height: 100vh;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 10px;
color: #00d4ff;
font-size: 1.8rem;
}
.subtitle {
text-align: center;
color: #888;
margin-bottom: 30px;
font-family: monospace;
font-size: 0.9rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.stat-card {
background: rgba(255,255,255,0.05);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.1);
}
.stat-card h3 {
color: #888;
font-size: 0.8rem;
text-transform: uppercase;
margin-bottom: 8px;
}
.stat-card .value {
font-size: 1.5rem;
font-weight: bold;
}
.stat-card.inflow .value { color: #4ade80; }
.stat-card.outflow .value { color: #f87171; }
.stat-card.neutral .value { color: #00d4ff; }
#sankey-chart {
background: rgba(255,255,255,0.02);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
}
.node rect {
stroke: #333;
stroke-width: 1px;
}
.node text {
font-size: 11px;
fill: #e0e0e0;
}
.link {
fill: none;
stroke-opacity: 0.4;
}
.link:hover {
stroke-opacity: 0.7;
}
.tables-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 1000px) {
.tables-grid { grid-template-columns: 1fr; }
}
.table-section {
background: rgba(255,255,255,0.03);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.1);
}
.table-section h2 {
margin-bottom: 15px;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 10px;
}
.table-section h2.inflow { color: #4ade80; }
.table-section h2.outflow { color: #f87171; }
table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid rgba(255,255,255,0.1);
color: #888;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
}
td {
padding: 10px 8px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
tr:hover td {
background: rgba(255,255,255,0.03);
}
.address {
font-family: monospace;
font-size: 0.8rem;
color: #00d4ff;
}
.address a {
color: #00d4ff;
text-decoration: none;
}
.address a:hover {
text-decoration: underline;
}
.amount {
font-weight: 600;
text-align: right;
}
.amount.positive { color: #4ade80; }
.amount.negative { color: #f87171; }
.token {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.token.wxdai { background: #fbbf24; color: #000; }
.token.tec { background: #8b5cf6; color: #fff; }
.token.zrc { background: #06b6d4; color: #000; }
.token.spam { background: #666; color: #999; }
.legend {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 3px;
}
.tooltip {
position: absolute;
background: rgba(0,0,0,0.9);
color: #fff;
padding: 10px 15px;
border-radius: 8px;
font-size: 0.85rem;
pointer-events: none;
z-index: 1000;
max-width: 300px;
}
.spam-warning {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
font-size: 0.85rem;
}
.spam-warning strong { color: #f87171; }
</style>
</head>
<body>
<div class="container">
<h1>Wallet Transaction Flow</h1>
<p class="subtitle">gno:0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1</p>
<div class="stats-grid">
<div class="stat-card inflow">
<h3>Total Inflow (WXDAI)</h3>
<div class="value">+20,197 DAI</div>
</div>
<div class="stat-card outflow">
<h3>Total Outflow (WXDAI)</h3>
<div class="value">-17,697 DAI</div>
</div>
<div class="stat-card inflow">
<h3>Total Inflow (TEC)</h3>
<div class="value">+14,336 TEC</div>
</div>
<div class="stat-card outflow">
<h3>Total Outflow (TEC)</h3>
<div class="value">-13,336 TEC</div>
</div>
<div class="stat-card neutral">
<h3>Unique Counterparties</h3>
<div class="value">8 addresses</div>
</div>
<div class="stat-card neutral">
<h3>Active Period</h3>
<div class="value">Mar 2023 - Dec 2023</div>
</div>
</div>
<div class="spam-warning">
<strong>⚠️ Note:</strong> This wallet received several spam/scam NFTs from null address (0x000...000) including fake "USDT reward", "ETH Airdrop", and phishing tokens. These are excluded from the legitimate flow analysis below.
</div>
<div class="legend">
<div class="legend-item"><div class="legend-color" style="background: #fbbf24"></div> WXDAI</div>
<div class="legend-item"><div class="legend-color" style="background: #8b5cf6"></div> TEC</div>
<div class="legend-item"><div class="legend-color" style="background: #4ade80"></div> Inflow</div>
<div class="legend-item"><div class="legend-color" style="background: #f87171"></div> Outflow</div>
</div>
<div id="sankey-chart"></div>
<div class="tables-grid">
<div class="table-section">
<h2 class="inflow">↓ Incoming Transfers</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>From</th>
<th>Token</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-03-28</td>
<td class="address"><a href="https://gnosisscan.io/address/0x01d9c9Ca040e90fEB47c7513d9A3574f6e1317bD" target="_blank">0x01d9...17bD</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount positive">+17,000.00</td>
</tr>
<tr>
<td>2023-03-22</td>
<td class="address"><a href="https://gnosisscan.io/address/0x763d7D362B59aeA3858a92a302e18cd41b1252d4" target="_blank">0x763d...87d4</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount positive">+1.00</td>
</tr>
<tr>
<td>2023-07-05</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount positive">+3,624.84</td>
</tr>
<tr>
<td>2023-10-04</td>
<td class="address"><a href="https://gnosisscan.io/address/0x763d7D362B59aeA3858a92a302e18cd41b1252d4" target="_blank">0x763d...87d4</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount positive">+631.09</td>
</tr>
<tr>
<td>2023-10-14</td>
<td class="address"><a href="https://gnosisscan.io/address/0x5138E41b6E66288e273f16380278ffF784ceAd00" target="_blank">0x5138...Ad00</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount positive">+9,710.03</td>
</tr>
<tr>
<td>2023-10-18</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount positive">+2,566.40</td>
</tr>
<tr>
<td>2024-05-08</td>
<td class="address"><a href="https://gnosisscan.io/address/0xf6A78083ca3e2a662D6dd1703c939c8aCE2e268d" target="_blank">0xf6A7...268d</a></td>
<td><span class="token zrc">ZRC</span></td>
<td class="amount positive">+500.00</td>
</tr>
<tr>
<td>2024-05-14</td>
<td class="address"><a href="https://gnosisscan.io/address/0xf6A78083ca3e2a662D6dd1703c939c8aCE2e268d" target="_blank">0xf6A7...268d</a></td>
<td><span class="token zrc">ZRC</span></td>
<td class="amount positive">+500.00</td>
</tr>
</tbody>
</table>
</div>
<div class="table-section">
<h2 class="outflow">↑ Outgoing Transfers</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>To</th>
<th>Token</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-04-26</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-2,306.00</td>
</tr>
<tr>
<td>2023-04-26</td>
<td class="address"><a href="https://gnosisscan.io/address/0x763d7D362B59aeA3858a92a302e18cd41b1252d4" target="_blank">0x763d...87d4</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-1,050.00</td>
</tr>
<tr>
<td>2023-04-26</td>
<td class="address"><a href="https://gnosisscan.io/address/0x1409a9ef3450D5d50aAd004f417436e772FbF8fC" target="_blank">0x1409...8fC</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-910.00</td>
</tr>
<tr>
<td>2023-05-11</td>
<td class="address"><a href="https://gnosisscan.io/address/0xb2821C0DF0c414ff51D3e8033CBA26DF6AaC587b" target="_blank">0xb282...587b</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-500.00</td>
</tr>
<tr>
<td>2023-06-07</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-3,235.00</td>
</tr>
<tr>
<td>2023-06-07</td>
<td class="address"><a href="https://gnosisscan.io/address/0x763d7D362B59aeA3858a92a302e18cd41b1252d4" target="_blank">0x763d...87d4</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-2,280.00</td>
</tr>
<tr>
<td>2023-06-07</td>
<td class="address"><a href="https://gnosisscan.io/address/0x778549Eb292AC98A96a05E122967f22eFA003707" target="_blank">0x7785...3707</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-1,765.00</td>
</tr>
<tr>
<td>2023-06-07</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9239E42792aa0C6881ecFaf73F1ecF0F01C60A14" target="_blank">0x9239...0A14</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-1,200.00</td>
</tr>
<tr>
<td>2023-06-07</td>
<td class="address"><a href="https://gnosisscan.io/address/0xb2821C0DF0c414ff51D3e8033CBA26DF6AaC587b" target="_blank">0xb282...587b</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-445.00</td>
</tr>
<tr>
<td>2023-09-10</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-3,309.00</td>
</tr>
<tr>
<td>2023-10-04</td>
<td class="address"><a href="https://gnosisscan.io/address/0x763d7D362B59aeA3858a92a302e18cd41b1252d4" target="_blank">0x763d...87d4</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount negative">-1,531.29</td>
</tr>
<tr>
<td>2023-10-18</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount negative">-5,900.00</td>
</tr>
<tr>
<td>2023-10-26</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9b55D80Af9dd8D23C372915Ad55c010799010b4d" target="_blank">0x9b55...0b4d</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-2,500.00</td>
</tr>
<tr>
<td>2023-11-01</td>
<td class="address"><a href="https://gnosisscan.io/address/0xb2821C0DF0c414ff51D3e8033CBA26DF6AaC587b" target="_blank">0xb282...587b</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount negative">-236.00</td>
</tr>
<tr>
<td>2023-11-01</td>
<td class="address"><a href="https://gnosisscan.io/address/0x9239E42792aa0C6881ecFaf73F1ecF0F01C60A14" target="_blank">0x9239...0A14</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-500.00</td>
</tr>
<tr>
<td>2023-12-15</td>
<td class="address"><a href="https://gnosisscan.io/address/0x778549Eb292AC98A96a05E122967f22eFA003707" target="_blank">0x7785...3707</a></td>
<td><span class="token tec">TEC</span></td>
<td class="amount negative">-5,668.58</td>
</tr>
<tr>
<td>2023-12-15</td>
<td class="address"><a href="https://gnosisscan.io/address/0x778549Eb292AC98A96a05E122967f22eFA003707" target="_blank">0x7785...3707</a></td>
<td><span class="token wxdai">WXDAI</span></td>
<td class="amount negative">-197.49</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// Sankey diagram data
const sankeyData = {
nodes: [
// Inflow sources (left side)
{ name: "0x01d9...17bD", type: "source" }, // 0 - large WXDAI source
{ name: "0x5138...Ad00", type: "source" }, // 1 - TEC source
{ name: "0x9b55...0b4d", type: "source" }, // 2 - bidirectional
{ name: "0x763d...87d4", type: "source" }, // 3 - bidirectional
{ name: "0xf6A7...268d", type: "source" }, // 4 - ZRC source
// Central wallet
{ name: "Safe Wallet", type: "wallet" }, // 5
// Outflow targets (right side)
{ name: "0x9b55...0b4d (out)", type: "target" }, // 6
{ name: "0x763d...87d4 (out)", type: "target" }, // 7
{ name: "0x7785...3707", type: "target" }, // 8
{ name: "0x9239...0A14", type: "target" }, // 9
{ name: "0xb282...587b", type: "target" }, // 10
{ name: "0x1409...8fC", type: "target" }, // 11
],
links: [
// Inflows (WXDAI)
{ source: 0, target: 5, value: 17000, token: "WXDAI" },
{ source: 2, target: 5, value: 2566, token: "WXDAI" },
{ source: 3, target: 5, value: 631, token: "WXDAI" },
// Inflows (TEC)
{ source: 1, target: 5, value: 9710, token: "TEC" },
{ source: 2, target: 5, value: 3625, token: "TEC" },
{ source: 3, target: 5, value: 1, token: "TEC" },
// Inflows (ZRC)
{ source: 4, target: 5, value: 1000, token: "ZRC" },
// Outflows (WXDAI)
{ source: 5, target: 6, value: 11350, token: "WXDAI" },
{ source: 5, target: 7, value: 3330, token: "WXDAI" },
{ source: 5, target: 8, value: 1962, token: "WXDAI" },
{ source: 5, target: 9, value: 1700, token: "WXDAI" },
{ source: 5, target: 10, value: 945, token: "WXDAI" },
{ source: 5, target: 11, value: 910, token: "WXDAI" },
// Outflows (TEC)
{ source: 5, target: 6, value: 5900, token: "TEC" },
{ source: 5, target: 8, value: 5669, token: "TEC" },
{ source: 5, target: 7, value: 1531, token: "TEC" },
{ source: 5, target: 10, value: 236, token: "TEC" },
]
};
const tokenColors = {
"WXDAI": "#fbbf24",
"TEC": "#8b5cf6",
"ZRC": "#06b6d4"
};
// Create Sankey chart
const width = 1200;
const height = 600;
const margin = { top: 20, right: 200, bottom: 20, left: 200 };
const svg = d3.select("#sankey-chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `0 0 ${width} ${height}`);
const sankey = d3.sankey()
.nodeWidth(20)
.nodePadding(15)
.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]);
const { nodes, links } = sankey({
nodes: sankeyData.nodes.map(d => Object.assign({}, d)),
links: sankeyData.links.map(d => Object.assign({}, d))
});
// Add links
svg.append("g")
.selectAll("path")
.data(links)
.join("path")
.attr("class", "link")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", d => tokenColors[d.token] || "#888")
.attr("stroke-width", d => Math.max(1, d.width))
.append("title")
.text(d => `${d.source.name}${d.target.name}\n${d.value.toLocaleString()} ${d.token}`);
// Add nodes
const node = svg.append("g")
.selectAll("g")
.data(nodes)
.join("g");
node.append("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("fill", d => d.type === "wallet" ? "#00d4ff" : d.type === "source" ? "#4ade80" : "#f87171")
.attr("rx", 3);
node.append("text")
.attr("x", d => d.x0 < width / 2 ? d.x0 - 6 : d.x1 + 6)
.attr("y", d => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("text-anchor", d => d.x0 < width / 2 ? "end" : "start")
.text(d => d.name)
.style("font-family", "monospace")
.style("font-size", d => d.type === "wallet" ? "14px" : "11px")
.style("font-weight", d => d.type === "wallet" ? "bold" : "normal");
</script>
</body>
</html>