Clonar https://intel.arkm.com/ porem com UX whiteoff clean barra superior grande de busca -print visualizer (objetivo central do projeto) -Print tracer Abaixo referencia para APIS abertas { "project": "EloOnChain", "description": "A web-based tool. Inspired by ArKham. That allows users to explore blockchain transaction relationships between wallet addresses by visualizing connections as an interactive graph. The tool uses public blockchain APIs to fetch transaction data without requiring authentication or private tokens.", "features": { "address_search": { "enabled": true, "description": "Search bar with autocomplete to input a wallet address (e.g., 0x...). Validates format for Ethereum, Bitcoin, and other supported chains.", "auto_complete": true, "supported_chains": ["Ethereum", "BSC", "Polygon", "Arbitrum", "Bitcoin"] }, "add_additional_addresses": { "enabled": true, "description": "Allow users to manually add more wallet addresses to include in the graph, even if not directly connected on-chain yet.", "method": "Button to 'Add Address' with input field" }, "transaction_history_analysis": { "enabled": true, "description": "Fetch all incoming and outgoing transactions for each address using public, free-tier APIs. No private infrastructure or authentication required.", "api_endpoints": [ { "chain": "Ethereum, BSC, Polygon, Arbitrum, and other EVM chains", "api": "Covalent Free API", "endpoint": "https://api.covalenthq.com/v1/ {chain_id}/address/{address}/transactions_v2/", "example": "https://api.covalenthq.com/v1/1/address/0x1F98431c8aD98523631AE4a59f267346ea31F984/transactions_v2/ ", "api_key_required": false, "note": "Use without key for basic access. Optional key for higher rate limits. Chain IDs: 1 (ETH), 56 (BSC), 137 (Polygon), 42161 (Arbitrum)." }, { "chain": "Ethereum", "api": "Etherscan Public API", "endpoint": "https://api.etherscan.io/api?module=account&action=txlist&address={address}&sort=desc", "example": " https://api.etherscan.io/api?module=account&action=txlist&address=0x1F98431c8aD98523631AE4a59f267346ea31F984&sort=desc", "api_key_required": false, "note": "Works without API key. Free signup increases rate limits. Supports ERC-20 and internal txs via different modules." }, { "chain": "Bitcoin", "api": "Blockchair API", "endpoint": " https://api.blockchair.com/bitcoin/dashboards/address/ {address}", "example": "https://api.blockchair.com/bitcoin/dashboards/address/1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa ", "api_key_required": false, "note": "Returns full transaction history, UTXOs, and balance. No key needed." }, { "chain": "Bitcoin", "api": "Blockchain.com API", "endpoint": "https://blockchain.info/rawaddr/ {address}", "example": "https://blockchain.info/rawaddr/1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa ", "api_key_required": false, "note": "Simple, fast, no authentication. Returns paginated transaction list in JSON." } ] }, "relationship_graph": { "enabled": true, "description": "Visualize addresses as nodes and transactions as directed edges. Show value and frequency of transfers.", "visualization_library": ["Vis.js", "D3.js", "Kumu"], "interactive_features": [ "Zoom and pan", "Click on edge to see transaction details (hash, value, date)", "Color-coded nodes by entity type (if tagged)" ], "data_format": { "nodes": [ { "id": "0xabc...", "label": "Wallet A", "type": "user" }, { "id": "0xdef...", "label": "Uniswap", "type": "contract" } ], "edges": [ { "from": "0xabc...", "to": "0xdef...", "label": "5.2 ETH", "tx_hash": "0x123..." } ] } }, "filters_and_options": { "chain_filter": { "type": "dropdown", "multi_select": true, "options": ["Ethereum", "BSC", "Bitcoin", "Polygon", "Arbitrum"] }, "time_range": { "options": ["Last 24h", "Last 7 days", "Last 30 days", "All time"] }, "min_value_filter": { "unit": "ETH or native token", "description": "Hide transactions below a certain value threshold" } } }, "technical_notes": { "no_private_infrastructure": "This tool does NOT require running blockchain nodes or private APIs. It relies 100% on public, free-tier blockchain APIs.", "rate_limiting": "Respect API rate limits: Covalent (~1 req/sec), Etherscan (~5 req/sec), Blockchair (~10 req/sec). Use caching or delays to stay compliant.", "data_privacy": "No user data is stored. All queries are client-side or ephemeral.", "scalability_limitation": "Optimized for small graphs (1–20 addresses). Not intended for full chain analysis.", "cors_compatibility": "All listed endpoints support CORS and can be called directly from browser-based apps." }, "example_use_case": "User searches for '0x1F98431c8aD98523631AE4a59f267346ea31F984' (Uniswap), adds '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' (USDC) manually, and sees transaction flows between them and other connected wallets." } - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Eloonchain
-emoji: 🔥
-colorFrom: purple
-colorTo: red
+title: eloonchain
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,592 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EloOnChain - Blockchain Relationship Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/vis-network.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .graph-container {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            background-color: white;
+        }
+        
+        .node-contract {
+            background-color: #3b82f6 !important;
+            color: white !important;
+        }
+        
+        .node-wallet {
+            background-color: #10b981 !important;
+            color: white !important;
+        }
+        
+        .node-exchange {
+            background-color: #f59e0b !important;
+            color: white !important;
+        }
+        
+        .search-dropdown {
+            display: none;
+            position: absolute;
+            width: 100%;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+            background: white;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            border-radius: 0.375rem;
+        }
+        
+        .search-dropdown.show {
+            display: block;
+        }
+        
+        .search-dropdown-item {
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        
+        .search-dropdown-item:hover {
+            background-color: #f3f4f6;
+        }
+        
+        .api-endpoint {
+            font-family: monospace;
+            background-color: #f3f4f6;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            word-break: break-all;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-link text-blue-500 text-2xl"></i>
+                    <h1 class="text-xl font-bold text-gray-800">EloOnChain</h1>
+                </div>
+                <nav class="hidden md:flex space-x-6">
+                    <a href="#" class="text-gray-600 hover:text-blue-500">Visualizer</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-500">Tracer</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-500">API Docs</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-500">About</a>
+                </nav>
+                <div class="flex items-center space-x-4">
+                    <button class="hidden md:block px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-500">
+                        <i class="fas fa-user mr-1"></i> Sign In
+                    </button>
+                    <button class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-md hover:bg-blue-600">
+                        <i class="fas fa-rocket mr-1"></i> Get Started
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section with Search -->
+        <section class="mb-12">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Explore Blockchain Relationships</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                    Visualize connections between wallet addresses across multiple blockchains.
+                    No API keys required - powered by public blockchain data.
+                </p>
+            </div>
+            
+            <!-- Large Search Bar -->
+            <div class="max-w-3xl mx-auto relative">
+                <div class="relative">
+                    <input 
+                        type="text" 
+                        id="addressSearch" 
+                        placeholder="Enter a wallet address (e.g., 0x1F984... or 1A1zP1...)" 
+                        class="w-full px-6 py-4 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-lg"
+                        autocomplete="off"
+                    >
+                    <button id="searchButton" class="absolute right-2 top-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
+                        <i class="fas fa-search mr-1"></i> Search
+                    </button>
+                </div>
+                <div id="searchDropdown" class="search-dropdown mt-1">
+                    <!-- Dropdown items will be populated by JavaScript -->
+                </div>
+            </div>
+            
+            <div class="mt-4 text-center text-sm text-gray-500">
+                Supported chains: Ethereum, BSC, Polygon, Arbitrum, Bitcoin
+            </div>
+        </section>
+
+        <!-- Visualizer Section -->
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold text-gray-800">Transaction Visualizer</h3>
+                <div class="flex space-x-2">
+                    <button id="addAddressBtn" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
+                        <i class="fas fa-plus mr-1"></i> Add Address
+                    </button>
+                    <div class="relative">
+                        <select id="chainFilter" class="appearance-none px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 pr-8">
+                            <option>All Chains</option>
+                            <option>Ethereum</option>
+                            <option>BSC</option>
+                            <option>Polygon</option>
+                            <option>Arbitrum</option>
+                            <option>Bitcoin</option>
+                        </select>
+                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                            <i class="fas fa-chevron-down text-xs"></i>
+                        </div>
+                    </div>
+                    <div class="relative">
+                        <select id="timeFilter" class="appearance-none px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 pr-8">
+                            <option>All Time</option>
+                            <option>Last 24h</option>
+                            <option>Last 7 days</option>
+                            <option>Last 30 days</option>
+                        </select>
+                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                            <i class="fas fa-chevron-down text-xs"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="graph-container" id="network"></div>
+            
+            <div class="mt-4 flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center">
+                        <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
+                        <span class="text-xs text-gray-600">Wallet</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div>
+                        <span class="text-xs text-gray-600">Contract</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div>
+                        <span class="text-xs text-gray-600">Exchange</span>
+                    </div>
+                </div>
+                <button id="exportGraph" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
+                    <i class="fas fa-download mr-1"></i> Export
+                </button>
+            </div>
+        </section>
+
+        <!-- Tracer Section -->
+        <section class="mb-12">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">Transaction Tracer</h3>
+            <div class="bg-white rounded-lg shadow-sm p-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label for="fromAddress" class="block text-sm font-medium text-gray-700 mb-1">From Address</label>
+                        <input type="text" id="fromAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="toAddress" class="block text-sm font-medium text-gray-700 mb-1">To Address</label>
+                        <input type="text" id="toAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="txHash" class="block text-sm font-medium text-gray-700 mb-1">Transaction Hash</label>
+                        <input type="text" id="txHash" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="mt-4 flex justify-end">
+                    <button id="traceButton" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
+                        <i class="fas fa-search mr-1"></i> Trace Transaction
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- API Reference Section -->
+        <section>
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">Public API Endpoints</h3>
+            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
+                <div class="border-b border-gray-200">
+                    <nav class="-mb-px flex">
+                        <button class="api-tab active px-4 py-3 text-sm font-medium text-blue-600 border-b-2 border-blue-500">EVM Chains</button>
+                        <button class="api-tab px-4 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">Bitcoin</button>
+                    </nav>
+                </div>
+                
+                <div class="p-6">
+                    <div class="api-content active">
+                        <h4 class="font-medium text-gray-800 mb-2">Covalent API (Ethereum, BSC, Polygon, Arbitrum)</h4>
+                        <div class="api-endpoint mb-2">https://api.covalenthq.com/v1/{chain_id}/address/{address}/transactions_v2/</div>
+                        <p class="text-sm text-gray-600 mb-4">Example: <span class="api-endpoint">https://api.covalenthq.com/v1/1/address/0x1F98431c8aD98523631AE4a59f267346ea31F984/transactions_v2/</span></p>
+                        
+                        <h4 class="font-medium text-gray-800 mb-2">Etherscan API (Ethereum)</h4>
+                        <div class="api-endpoint mb-2">https://api.etherscan.io/api?module=account&action=txlist&address={address}&sort=desc</div>
+                        <p class="text-sm text-gray-600">Example: <span class="api-endpoint">https://api.etherscan.io/api?module=account&action=txlist&address=0x1F98431c8aD98523631AE4a59f267346ea31F984&sort=desc</span></p>
+                    </div>
+                    
+                    <div class="api-content hidden">
+                        <h4 class="font-medium text-gray-800 mb-2">Blockchair API (Bitcoin)</h4>
+                        <div class="api-endpoint mb-2">https://api.blockchair.com/bitcoin/dashboards/address/{address}</div>
+                        <p class="text-sm text-gray-600 mb-4">Example: <span class="api-endpoint">https://api.blockchair.com/bitcoin/dashboards/address/1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa</span></p>
+                        
+                        <h4 class="font-medium text-gray-800 mb-2">Blockchain.com API (Bitcoin)</h4>
+                        <div class="api-endpoint mb-2">https://blockchain.info/rawaddr/{address}</div>
+                        <p class="text-sm text-gray-600">Example: <span class="api-endpoint">https://blockchain.info/rawaddr/1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa</span></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-white border-t border-gray-200 mt-12">
+        <div class="container mx-auto px-4 py-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-800 mb-4">EloOnChain</h4>
+                    <p class="text-sm text-gray-600">
+                        Open-source blockchain relationship visualizer powered by public APIs.
+                    </p>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-800 mb-4">Product</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">Visualizer</a></li>
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">Tracer</a></li>
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">API Docs</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-800 mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">Documentation</a></li>
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">GitHub</a></li>
+                        <li><a href="#" class="text-sm text-gray-600 hover:text-blue-500">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-800 mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-github"></i></a>
+                        <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-discord"></i></a>
+                        <a href="#" class="text-gray-500 hover:text-blue-500"><i class="fab fa-telegram"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-200 mt-8 pt-8 text-sm text-gray-500">
+                <p>© 2023 EloOnChain. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Add Address Modal -->
+    <div id="addAddressModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-medium text-gray-800">Add Wallet Address</h3>
+                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="mb-4">
+                    <label for="newAddress" class="block text-sm font-medium text-gray-700 mb-1">Wallet Address</label>
+                    <input type="text" id="newAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                </div>
+                <div class="mb-4">
+                    <label for="addressLabel" class="block text-sm font-medium text-gray-700 mb-1">Label (Optional)</label>
+                    <input type="text" id="addressLabel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
+                    <div class="flex space-x-4">
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="addressType" value="wallet" class="h-4 w-4 text-blue-600" checked>
+                            <span class="ml-2 text-sm text-gray-700">Wallet</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="addressType" value="contract" class="h-4 w-4 text-blue-600">
+                            <span class="ml-2 text-sm text-gray-700">Contract</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="addressType" value="exchange" class="h-4 w-4 text-blue-600">
+                            <span class="ml-2 text-sm text-gray-700">Exchange</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="flex justify-end space-x-3">
+                    <button id="cancelAddAddress" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
+                        Cancel
+                    </button>
+                    <button id="confirmAddAddress" class="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600">
+                        Add Address
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize the network visualization
+        document.addEventListener('DOMContentLoaded', function() {
+            // Sample data for the visualization
+            const nodes = new vis.DataSet([
+                {id: 1, label: '0x1F984...', title: 'Uniswap V3', group: 'contract'},
+                {id: 2, label: '0xA0b869...', title: 'USDC Contract', group: 'contract'},
+                {id: 3, label: '0x123456...', title: 'User Wallet', group: 'wallet'},
+                {id: 4, label: '0x789abc...', title: 'Binance', group: 'exchange'},
+                {id: 5, label: '0xdef123...', title: 'User Wallet 2', group: 'wallet'}
+            ]);
+
+            const edges = new vis.DataSet([
+                {from: 3, to: 1, label: '2.5 ETH', title: 'Tx: 0x123...456'},
+                {from: 1, to: 3, label: '500 USDC', title: 'Tx: 0x789...abc'},
+                {from: 3, to: 4, label: '1.2 ETH', title: 'Tx: 0xdef...123'},
+                {from: 4, to: 5, label: '0.8 ETH', title: 'Tx: 0x456...789'},
+                {from: 5, to: 2, label: '1000 USDC', title: 'Tx: 0xabc...def'},
+                {from: 2, to: 1, label: '800 USDC', title: 'Tx: 0x321...654'}
+            ]);
+
+            const container = document.getElementById('network');
+            const data = {
+                nodes: nodes,
+                edges: edges
+            };
+            
+            const options = {
+                nodes: {
+                    shape: 'box',
+                    shadow: true,
+                    font: {
+                        size: 14,
+                        color: '#ffffff'
+                    },
+                    borderWidth: 0,
+                    widthConstraint: {
+                        minimum: 100,
+                        maximum: 150
+                    }
+                },
+                edges: {
+                    arrows: 'to',
+                    smooth: {
+                        type: 'cubicBezier',
+                        roundness: 0.2
+                    },
+                    font: {
+                        size: 12,
+                        align: 'middle'
+                    },
+                    color: {
+                        color: '#d1d5db',
+                        highlight: '#93c5fd'
+                    }
+                },
+                groups: {
+                    wallet: {
+                        color: {
+                            background: '#10b981',
+                            border: '#059669',
+                            highlight: {
+                                background: '#34d399',
+                                border: '#059669'
+                            }
+                        }
+                    },
+                    contract: {
+                        color: {
+                            background: '#3b82f6',
+                            border: '#2563eb',
+                            highlight: {
+                                background: '#60a5fa',
+                                border: '#2563eb'
+                            }
+                        }
+                    },
+                    exchange: {
+                        color: {
+                            background: '#f59e0b',
+                            border: '#d97706',
+                            highlight: {
+                                background: '#fbbf24',
+                                border: '#d97706'
+                            }
+                        }
+                    }
+                },
+                physics: {
+                    solver: 'forceAtlas2Based',
+                    forceAtlas2Based: {
+                        gravitationalConstant: -50,
+                        centralGravity: 0.01,
+                        springLength: 200,
+                        springConstant: 0.08,
+                        damping: 0.4
+                    },
+                    maxVelocity: 50,
+                    minVelocity: 0.1
+                },
+                interaction: {
+                    hover: true,
+                    tooltipDelay: 200
+                }
+            };
+
+            const network = new vis.Network(container, data, options);
+
+            // Search functionality
+            const addressSearch = document.getElementById('addressSearch');
+            const searchButton = document.getElementById('searchButton');
+            const searchDropdown = document.getElementById('searchDropdown');
+            
+            // Sample addresses for autocomplete
+            const sampleAddresses = [
+                {address: '0x1F98431c8aD98523631AE4a59f267346ea31F984', label: 'Uniswap V3', type: 'contract'},
+                {address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', label: 'USDC Contract', type: 'contract'},
+                {address: '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', label: 'Uniswap Router', type: 'contract'},
+                {address: '0x5a52e96bacdabb82fd05763e25335261b270efcb', label: 'Binance 8', type: 'exchange'},
+                {address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa', label: 'Satoshi Wallet', type: 'wallet'},
+                {address: '3FZbgi29cpjq2GjdwV8eyHuJJnkLtktZc5', label: 'Bitfinex', type: 'exchange'}
+            ];
+            
+            addressSearch.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                if (searchTerm.length > 2) {
+                    const matches = sampleAddresses.filter(addr => 
+                        addr.address.toLowerCase().includes(searchTerm) || 
+                        addr.label.toLowerCase().includes(searchTerm)
+                    );
+                    
+                    if (matches.length > 0) {
+                        searchDropdown.innerHTML = '';
+                        matches.forEach(match => {
+                            const item = document.createElement('div');
+                            item.className = 'search-dropdown-item';
+                            item.innerHTML = `
+                                <div class="font-medium">${match.label}</div>
+                                <div class="text-xs text-gray-500">${match.address}</div>
+                            `;
+                            item.addEventListener('click', function() {
+                                addressSearch.value = match.address;
+                                searchDropdown.classList.remove('show');
+                            });
+                            searchDropdown.appendChild(item);
+                        });
+                        searchDropdown.classList.add('show');
+                    } else {
+                        searchDropdown.classList.remove('show');
+                    }
+                } else {
+                    searchDropdown.classList.remove('show');
+                }
+            });
+            
+            document.addEventListener('click', function(e) {
+                if (!addressSearch.contains(e.target) && !searchDropdown.contains(e.target)) {
+                    searchDropdown.classList.remove('show');
+                }
+            });
+            
+            searchButton.addEventListener('click', function() {
+                const address = addressSearch.value.trim();
+                if (address) {
+                    // In a real app, this would fetch data from the API
+                    alert(`Searching for address: ${address}`);
+                }
+            });
+            
+            // Add address modal functionality
+            const addAddressBtn = document.getElementById('addAddressBtn');
+            const addAddressModal = document.getElementById('addAddressModal');
+            const closeModal = document.getElementById('closeModal');
+            const cancelAddAddress = document.getElementById('cancelAddAddress');
+            const confirmAddAddress = document.getElementById('confirmAddAddress');
+            
+            addAddressBtn.addEventListener('click', function() {
+                addAddressModal.classList.remove('hidden');
+            });
+            
+            closeModal.addEventListener('click', function() {
+                addAddressModal.classList.add('hidden');
+            });
+            
+            cancelAddAddress.addEventListener('click', function() {
+                addAddressModal.classList.add('hidden');
+            });
+            
+            confirmAddAddress.addEventListener('click', function() {
+                const newAddress = document.getElementById('newAddress').value.trim();
+                const addressLabel = document.getElementById('addressLabel').value.trim();
+                const addressType = document.querySelector('input[name="addressType"]:checked').value;
+                
+                if (newAddress) {
+                    // In a real app, this would validate the address and add it to the graph
+                    const label = addressLabel || newAddress.substring(0, 6) + '...' + newAddress.substring(newAddress.length - 4);
+                    
+                    nodes.add({
+                        id: nodes.length + 1,
+                        label: label,
+                        title: newAddress,
+                        group: addressType
+                    });
+                    
+                    // Reset form and close modal
+                    document.getElementById('newAddress').value = '';
+                    document.getElementById('addressLabel').value = '';
+                    addAddressModal.classList.add('hidden');
+                }
+            });
+            
+            // API tabs functionality
+            const apiTabs = document.querySelectorAll('.api-tab');
+            const apiContents = document.querySelectorAll('.api-content');
+            
+            apiTabs.forEach((tab, index) => {
+                tab.addEventListener('click', function() {
+                    // Remove active class from all tabs and contents
+                    apiTabs.forEach(t => t.classList.remove('active'));
+                    apiContents.forEach(c => c.classList.add('hidden'));
+                    
+                    // Add active class to clicked tab and corresponding content
+                    this.classList.add('active');
+                    apiContents[index].classList.remove('hidden');
+                });
+            });
+            
+            // Export graph functionality
+            const exportGraph = document.getElementById('exportGraph');
+            exportGraph.addEventListener('click', function() {
+                // In a real app, this would export the graph as an image or JSON
+                alert('Export functionality would be implemented here');
+            });
+            
+            // Trace transaction functionality
+            const traceButton = document.getElementById('traceButton');
+            traceButton.addEventListener('click', function() {
+                const fromAddress = document.getElementById('fromAddress').value.trim();
+                const toAddress = document.getElementById('toAddress').value.trim();
+                const txHash = document.getElementById('txHash').value.trim();
+                
+                if (fromAddress || toAddress || txHash) {
+                    // In a real app, this would trace the transaction
+                    alert(`Tracing transaction with:\nFrom: ${fromAddress}\nTo: ${toAddress}\nHash: ${txHash}`);
+                } else {
+                    alert('Please enter at least one field to trace');
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=akagelks/eloonchain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>