web3-tools-mcp 1.3.3 → 1.4.0

package/public/wallet.html

@@ -1,723 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web3 Tools MCP - Wallet Connection</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👾</text></svg>">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-            transition: background 0.3s, color 0.3s;
-        }
-
-        body.dark-mode {
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            color: #e4e4e4;
-        }
-
-        .container {
-            background: white;
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            max-width: 800px;
-            margin: 0 auto;
-            transition: background 0.3s, color 0.3s;
-        }
-
-        body.dark-mode .container {
-            background: #1e1e2e;
-            color: #e4e4e4;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
-        }
-
-        /* Header with Chain Badge */
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 30px;
-        }
-
-        .chain-badge {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 600;
-            background: #f8f9fa;
-            border: 2px solid #dee2e6;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        body.dark-mode .chain-badge {
-            background: #2a2a3a;
-            border-color: #4a4a5a;
-            color: #e4e4e4;
-        }
-
-        .chain-badge:hover {
-            border-color: #adb5bd;
-        }
-
-        body.dark-mode .chain-badge:hover {
-            border-color: #667eea;
-        }
-
-        .chain-badge.connected {
-            background: #d4edda;
-            border-color: #28a745;
-            color: #155724;
-        }
-
-        body.dark-mode .chain-badge.connected {
-            background: #1a3a1a;
-            border-color: #28a745;
-            color: #7fff7f;
-        }
-
-        .chain-badge.connected:hover {
-            border-color: #1e7e34;
-        }
-
-        .chain-dropdown {
-            position: absolute;
-            top: 100%;
-            right: 0;
-            margin-top: 8px;
-            background: white;
-            border: 2px solid #dee2e6;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            min-width: 200px;
-            max-height: 400px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-            transition: background 0.3s, border-color 0.3s;
-        }
-
-        body.dark-mode .chain-dropdown {
-            background: #2a2a3a;
-            border-color: #4a4a5a;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        }
-
-        .chain-dropdown.show {
-            display: block;
-        }
-
-        .chain-option {
-            padding: 12px 16px;
-            cursor: pointer;
-            transition: background 0.2s, color 0.2s;
-            border-bottom: 1px solid #f1f3f5;
-        }
-
-        body.dark-mode .chain-option {
-            border-bottom-color: #3a3a4a;
-            color: #e4e4e4;
-        }
-
-        .chain-option:last-child {
-            border-bottom: none;
-        }
-
-        .chain-option:hover {
-            background: #f8f9fa;
-        }
-
-        body.dark-mode .chain-option:hover {
-            background: #3a3a4a;
-        }
-
-        .chain-option.active {
-            background: #e7f5ff;
-            font-weight: 600;
-            color: #0c8599;
-        }
-
-        body.dark-mode .chain-option.active {
-            background: #1a3a4a;
-            color: #5dade2;
-        }
-
-        .chain-arrow {
-            font-size: 10px;
-            transition: transform 0.2s;
-        }
-
-        .chain-badge.open .chain-arrow {
-            transform: rotate(180deg);
-        }
-
-        .chain-indicator {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background: #ccc;
-        }
-
-        .chain-indicator.active {
-            background: #28a745;
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        h1 {
-            color: #333;
-            font-size: 28px;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode h1 {
-            color: #e4e4e4;
-        }
-
-        .subtitle {
-            color: #666;
-            font-size: 14px;
-            margin-top: 5px;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .subtitle {
-            color: #a0a0a0;
-        }
-
-        /* Status Messages */
-        .status {
-            padding: 15px;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .status.error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-
-        .status.success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-
-        .status.warning {
-            background: #fff3cd;
-            color: #856404;
-            border: 1px solid #ffeaa7;
-        }
-
-        .status.info {
-            background: #d1ecf1;
-            color: #0c5460;
-            border: 1px solid #bee5eb;
-        }
-
-        /* Buttons */
-        button {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            padding: 15px 30px;
-            border-radius: 10px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            width: 100%;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-
-        button:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .btn-approve {
-            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-        }
-
-        .btn-reject {
-            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
-        }
-
-        /* Wallet Info */
-        .wallet-info {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 10px;
-            margin: 20px 0;
-            transition: background 0.3s;
-        }
-
-        body.dark-mode .wallet-info {
-            background: #2a2a3a;
-        }
-
-        .info-row {
-            display: flex;
-            justify-content: space-between;
-            margin: 10px 0;
-            font-size: 14px;
-        }
-
-        .info-label {
-            color: #666;
-            font-weight: 600;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .info-label {
-            color: #a0a0a0;
-        }
-
-        .info-value {
-            color: #333;
-            font-family: 'Courier New', monospace;
-            word-break: break-all;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .info-value {
-            color: #e4e4e4;
-        }
-
-        /* Transaction Preview */
-        .tx-preview {
-            background: #fff;
-            border: 2px solid #667eea;
-            padding: 20px;
-            border-radius: 10px;
-            margin: 20px 0;
-            transition: background 0.3s, border-color 0.3s;
-        }
-
-        body.dark-mode .tx-preview {
-            background: #2a2a3a;
-            border-color: #667eea;
-        }
-
-        .tx-preview h3 {
-            color: #667eea;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .tx-details {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 10px 0;
-            transition: background 0.3s;
-        }
-
-        body.dark-mode .tx-details {
-            background: #1e1e2e;
-        }
-
-        .tx-param {
-            margin: 8px 0;
-            padding: 8px;
-            background: white;
-            border-radius: 4px;
-            font-size: 13px;
-            transition: background 0.3s;
-        }
-
-        body.dark-mode .tx-param {
-            background: #2a2a3a;
-        }
-
-        .tx-param-name {
-            color: #667eea;
-            font-weight: 600;
-            margin-right: 8px;
-        }
-
-        .tx-param-value {
-            color: #333;
-            font-family: 'Courier New', monospace;
-            word-break: break-all;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .tx-param-value {
-            color: #e4e4e4;
-        }
-
-        .tx-actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .tx-actions button {
-            flex: 1;
-        }
-
-        /* Transaction History */
-        .tx-history {
-            margin-top: 30px;
-        }
-
-        .tx-history h3 {
-            color: #333;
-            margin-bottom: 15px;
-            font-size: 18px;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .tx-history h3 {
-            color: #e4e4e4;
-        }
-
-        .tx-history-item {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 10px 0;
-            border-left: 4px solid #dee2e6;
-            transition: transform 0.2s, background 0.3s;
-        }
-
-        body.dark-mode .tx-history-item {
-            background: #2a2a3a;
-            border-left-color: #4a4a5a;
-        }
-
-        .tx-history-item:hover {
-            transform: translateX(5px);
-        }
-
-        .tx-history-item.success {
-            border-left-color: #28a745;
-        }
-
-        .tx-history-item.failed {
-            border-left-color: #dc3545;
-        }
-
-        .tx-history-item.pending {
-            border-left-color: #ffc107;
-        }
-
-        .tx-history-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-
-        .tx-history-function {
-            font-weight: 600;
-            color: #333;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .tx-history-function {
-            color: #e4e4e4;
-        }
-
-        .tx-history-status {
-            font-size: 12px;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-weight: 600;
-        }
-
-        .tx-history-status.success {
-            background: #d4edda;
-            color: #155724;
-        }
-
-        body.dark-mode .tx-history-status.success {
-            background: #1a3a1a;
-            color: #7fff7f;
-        }
-
-        .tx-history-status.failed {
-            background: #f8d7da;
-            color: #721c24;
-        }
-
-        body.dark-mode .tx-history-status.failed {
-            background: #3a1a1a;
-            color: #ff7f7f;
-        }
-
-        .tx-history-status.pending {
-            background: #fff3cd;
-            color: #856404;
-        }
-
-        body.dark-mode .tx-history-status.pending {
-            background: #3a3a1a;
-            color: #ffdf7f;
-        }
-
-        .tx-history-details {
-            font-size: 12px;
-            color: #666;
-            margin-top: 8px;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .tx-history-details {
-            color: #a0a0a0;
-        }
-
-        .tx-history-link {
-            color: #667eea;
-            text-decoration: none;
-            font-size: 12px;
-            margin-top: 8px;
-            display: inline-block;
-        }
-
-        .tx-history-link:hover {
-            text-decoration: underline;
-        }
-
-        /* Log */
-        .log {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            padding: 15px;
-            max-height: 200px;
-            overflow-y: auto;
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            margin-top: 20px;
-            transition: background 0.3s, border-color 0.3s;
-        }
-
-        body.dark-mode .log {
-            background: #2a2a3a;
-            border-color: #4a4a5a;
-        }
-
-        .log-entry {
-            padding: 4px 0;
-            color: #495057;
-            transition: color 0.3s;
-        }
-
-        body.dark-mode .log-entry {
-            color: #a0a0a0;
-        }
-
-        .log-entry.error {
-            color: #dc3545;
-        }
-
-        body.dark-mode .log-entry.error {
-            color: #ff7f7f;
-        }
-
-        .log-entry.success {
-            color: #28a745;
-        }
-
-        body.dark-mode .log-entry.success {
-            color: #7fff7f;
-        }
-
-        .log-entry.info {
-            color: #0c5460;
-        }
-
-        body.dark-mode .log-entry.info {
-            color: #5dade2;
-        }
-
-        /* Dark Mode Toggle */
-        .dark-mode-toggle {
-            width: 40px;
-            height: 40px;
-            min-width: 40px;
-            min-height: 40px;
-            flex-shrink: 0;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: none;
-            color: white;
-            font-size: 20px;
-            cursor: pointer;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-            transition: transform 0.2s, box-shadow 0.2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-        }
-
-        .dark-mode-toggle:hover {
-            transform: scale(1.1);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        /* GitHub Link */
-        .github-link {
-            width: 40px;
-            height: 40px;
-            min-width: 40px;
-            min-height: 40px;
-            flex-shrink: 0;
-            border-radius: 50%;
-            background: #24292e;
-            border: none;
-            color: white;
-            font-size: 20px;
-            cursor: pointer;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-            transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-            text-decoration: none;
-        }
-
-        body.dark-mode .github-link {
-            background: #ffffff;
-            color: #24292e;
-        }
-
-        .github-link:hover {
-            transform: scale(1.1);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-            color: #999;
-        }
-
-        .empty-state-icon {
-            font-size: 48px;
-            margin-bottom: 16px;
-        }
-
-        /* Utilities */
-        .hidden {
-            display: none !important;
-        }
-
-        .flex {
-            display: flex;
-            gap: 10px;
-        }
-
-        .flex-center {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div>
-                <h1>🔐 Web3 Tools MCP</h1>
-                <p class="subtitle">Secure transaction signing with browser wallet</p>
-            </div>
-            <div style="display: flex; gap: 10px; align-items: center;">
-                <div id="chainBadge" class="chain-badge" onclick="toggleChainDropdown(event)">
-                    <span class="chain-indicator"></span>
-                    <span id="chainName">Not Connected</span>
-                    <span class="chain-arrow">▼</span>
-                    <div id="chainDropdown" class="chain-dropdown" onclick="event.stopPropagation()">
-                        <!-- Network options will be populated here -->
-                    </div>
-                </div>
-                <a href="https://github.com/hajnalben/web3-tools-mcp" target="_blank" class="github-link" title="View on GitHub">
-                    <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-                    </svg>
-                </a>
-                <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle Dark Mode">
-                    🌙
-                </button>
-            </div>
-        </div>
-
-        <div id="statusMessage" class="hidden"></div>
-
-        <button id="connectBtn" onclick="connectWallet()">
-            Connect Wallet
-        </button>
-
-        <div id="walletInfo" class="wallet-info hidden">
-            <div class="info-row">
-                <span class="info-label">Address:</span>
-                <span id="address" class="info-value"></span>
-            </div>
-            <div class="info-row">
-                <span class="info-label">Network:</span>
-                <span id="networkName" class="info-value"></span>
-            </div>
-            <div class="info-row">
-                <span class="info-label">Balance:</span>
-                <span id="balance" class="info-value"></span>
-            </div>
-        </div>
-
-        <div id="txPreview" class="tx-preview hidden">
-            <h3>
-                <span>⏳</span>
-                <span>Transaction Request</span>
-            </h3>
-            <div id="txDetails" class="tx-details"></div>
-            <div class="tx-actions">
-                <button class="btn-approve" onclick="approveTx()">✓ Approve & Sign</button>
-                <button class="btn-reject" onclick="rejectTx()">✗ Reject</button>
-            </div>
-        </div>
-
-        <div id="txHistory" class="tx-history hidden">
-            <h3>📜 Recent Transactions</h3>
-            <div id="txHistoryList"></div>
-        </div>
-
-        <div id="log" class="log"></div>
-    </div>
-
-    <script src="wallet-app.js"></script>
-</body>
-</html>