diff --git a/_code-samples/xrpl-transaction-tester/README.md b/_code-samples/xrpl-transaction-tester/README.md
new file mode 100644
index 00000000000..b6fdeca7c47
--- /dev/null
+++ b/_code-samples/xrpl-transaction-tester/README.md
@@ -0,0 +1,33 @@
+# XRP Ledger Transaction Tester
+
+Una aplicación web interactiva para probar transacciones en XRP Ledger usando redes de prueba (Testnet/Devnet). Permite crear wallets, solicitar XRP del faucet, enviar transacciones Payment y consultar balances en tiempo real.
+
+## Características
+
+- 🔌 Conexión a Testnet y Devnet vía WebSocket
+- 👛 Generación automática de wallets de prueba
+- 💰 Solicitud de XRP gratuito desde faucets
+- 📤 Envío de transacciones Payment
+- 🔍 Consulta de balances y transacciones por hash
+- 📊 Historial de transacciones de la sesión
+- 🌙 Modo oscuro/claro
+
+## Cómo usar
+
+1. Abre `index.html` en tu navegador
+2. Selecciona la red (Testnet o Devnet)
+3. Haz clic en "Conectar" para establecer conexión WebSocket
+4. Genera un wallet de prueba o usa uno existente
+5. Solicita XRP del faucet para financiar tu wallet
+6. Envía transacciones de prueba y monitorea los resultados
+
+## Tecnologías
+
+- HTML5, CSS3, JavaScript vanilla
+- xrpl.js library (vía CDN)
+- WebSocket API para conexión en tiempo real
+- Responsive design
+
+## Propósito Educativo
+
+Esta herramienta está diseñada para desarrolladores que quieren aprender y experimentar con el XRP Ledger sin riesgo, usando redes de prueba con fondos no reales.
diff --git a/_code-samples/xrpl-transaction-tester/js/index.html b/_code-samples/xrpl-transaction-tester/js/index.html
new file mode 100644
index 00000000000..9911bd359dd
--- /dev/null
+++ b/_code-samples/xrpl-transaction-tester/js/index.html
@@ -0,0 +1,801 @@
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XRP Transaction Tester</title>
+    <style>
+        :root {
+            --color-cream-50: rgba(252, 252, 249, 1);
+            --color-cream-100: rgba(255, 255, 253, 1);
+            --color-gray-200: rgba(245, 245, 245, 1);
+            --color-gray-300: rgba(167, 169, 169, 1);
+            --color-slate-500: rgba(98, 108, 113, 1);
+            --color-charcoal-700: rgba(31, 33, 33, 1);
+            --color-charcoal-800: rgba(38, 40, 40, 1);
+            --color-teal-300: rgba(50, 184, 198, 1);
+            --color-teal-500: rgba(33, 128, 141, 1);
+            --color-teal-600: rgba(29, 116, 128, 1);
+            --color-red-400: rgba(255, 84, 89, 1);
+            --color-red-500: rgba(192, 21, 47, 1);
+            --color-orange-500: rgba(168, 75, 47, 1);
+            
+            --color-background: var(--color-cream-50);
+            --color-surface: var(--color-cream-100);
+            --color-text: var(--color-charcoal-700);
+            --color-text-secondary: var(--color-slate-500);
+            --color-primary: var(--color-teal-500);
+            --color-primary-hover: var(--color-teal-600);
+            --color-border: rgba(94, 82, 64, 0.2);
+            --color-success: var(--color-teal-500);
+            --color-error: var(--color-red-500);
+            --color-warning: var(--color-orange-500);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --color-background: var(--color-charcoal-700);
+                --color-surface: var(--color-charcoal-800);
+                --color-text: var(--color-gray-200);
+                --color-text-secondary: rgba(167, 169, 169, 0.7);
+                --color-primary: var(--color-teal-300);
+                --color-border: rgba(119, 124, 124, 0.3);
+                --color-success: var(--color-teal-300);
+                --color-error: var(--color-red-400);
+            }
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: var(--color-background);
+            color: var(--color-text);
+            padding: 20px;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        h1 {
+            font-size: 32px;
+            margin-bottom: 10px;
+            color: var(--color-text);
+        }
+
+        .subtitle {
+            color: var(--color-text-secondary);
+            font-size: 14px;
+        }
+
+        .network-selector {
+            background: var(--color-surface);
+            padding: 20px;
+            border-radius: 12px;
+            border: 1px solid var(--color-border);
+            margin-bottom: 30px;
+        }
+
+        .network-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .network-btn {
+            padding: 10px 20px;
+            border: 1px solid var(--color-border);
+            background: transparent;
+            color: var(--color-text);
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.2s;
+        }
+
+        .network-btn:hover {
+            background: var(--color-primary);
+            color: white;
+            border-color: var(--color-primary);
+        }
+
+        .network-btn.active {
+            background: var(--color-primary);
+            color: white;
+            border-color: var(--color-primary);
+        }
+
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .card {
+            background: var(--color-surface);
+            border-radius: 12px;
+            padding: 24px;
+            border: 1px solid var(--color-border);
+        }
+
+        .card h2 {
+            font-size: 20px;
+            margin-bottom: 20px;
+            color: var(--color-text);
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            font-size: 14px;
+            color: var(--color-text);
+        }
+
+        input, select, textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
+            background: var(--color-background);
+            color: var(--color-text);
+            font-size: 14px;
+            font-family: inherit;
+        }
+
+        input:focus, select:focus, textarea:focus {
+            outline: 2px solid var(--color-primary);
+            border-color: var(--color-primary);
+        }
+
+        textarea {
+            resize: vertical;
+            min-height: 100px;
+            font-family: 'Courier New', monospace;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            width: 100%;
+        }
+
+        .btn-primary {
+            background: var(--color-primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--color-primary-hover);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid var(--color-border);
+            color: var(--color-text);
+            margin-top: 10px;
+        }
+
+        .btn-secondary:hover {
+            background: var(--color-border);
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+            margin-bottom: 10px;
+        }
+
+        .status-connected {
+            background: rgba(33, 128, 141, 0.15);
+            color: var(--color-success);
+            border: 1px solid rgba(33, 128, 141, 0.25);
+        }
+
+        .status-disconnected {
+            background: rgba(192, 21, 47, 0.15);
+            color: var(--color-error);
+            border: 1px solid rgba(192, 21, 47, 0.25);
+        }
+
+        .status-pending {
+            background: rgba(168, 75, 47, 0.15);
+            color: var(--color-warning);
+            border: 1px solid rgba(168, 75, 47, 0.25);
+        }
+
+        .result-box {
+            background: var(--color-background);
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
+            padding: 16px;
+            margin-top: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .result-box pre {
+            margin: 0;
+            font-size: 12px;
+            color: var(--color-text);
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        .info-box {
+            background: rgba(33, 128, 141, 0.1);
+            border: 1px solid rgba(33, 128, 141, 0.3);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 20px;
+            font-size: 13px;
+            color: var(--color-text);
+        }
+
+        .transaction-types {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .tx-type-btn {
+            padding: 10px;
+            border: 1px solid var(--color-border);
+            background: var(--color-background);
+            border-radius: 8px;
+            cursor: pointer;
+            text-align: center;
+            font-size: 13px;
+            transition: all 0.2s;
+        }
+
+        .tx-type-btn:hover {
+            border-color: var(--color-primary);
+            background: rgba(33, 128, 141, 0.1);
+        }
+
+        .tx-type-btn.active {
+            background: var(--color-primary);
+            color: white;
+            border-color: var(--color-primary);
+        }
+
+        .loading {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .quick-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .quick-action-btn {
+            flex: 1;
+            padding: 8px;
+            border: 1px solid var(--color-border);
+            background: var(--color-background);
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.2s;
+        }
+
+        .quick-action-btn:hover {
+            background: var(--color-border);
+        }
+
+        .transaction-history {
+            margin-top: 20px;
+        }
+
+        .history-item {
+            background: var(--color-background);
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+            font-size: 13px;
+        }
+
+        .history-item strong {
+            color: var(--color-primary);
+        }
+
+        .copy-btn {
+            background: transparent;
+            border: 1px solid var(--color-border);
+            color: var(--color-text);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 11px;
+            cursor: pointer;
+            margin-left: 8px;
+        }
+
+        .copy-btn:hover {
+            background: var(--color-border);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🧪 XRP Transaction Tester</h1>
+            <p class="subtitle">Herramienta de pruebas para transacciones en XRP Ledger (Testnet/Devnet)</p>
+        </header>
+
+        <div class="network-selector">
+            <h3 style="margin-bottom: 15px; font-size: 16px;">Red de Prueba</h3>
+            <div class="network-buttons">
+                <button class="network-btn active" data-network="testnet">Testnet</button>
+                <button class="network-btn" data-network="devnet">Devnet</button>
+                <button class="network-btn" data-network="custom">Custom Server</button>
+            </div>
+            <div id="customServerInput" style="margin-top: 15px; display: none;">
+                <input type="text" id="customServer" placeholder="wss://your-custom-server.com">
+            </div>
+            <div style="margin-top: 15px;">
+                <span class="status-badge status-disconnected" id="connectionStatus">Desconectado</span>
+                <span style="font-size: 13px; color: var(--color-text-secondary);" id="serverUrl"></span>
+            </div>
+        </div>
+
+        <div class="main-grid">
+            <div class="card">
+                <h2>📝 Crear Transacción de Prueba</h2>
+                
+                <div class="info-box">
+                    💡 Esta herramienta te permite crear y enviar transacciones de prueba en redes de testing. Nunca uses credenciales reales de Mainnet.
+                </div>
+
+                <div class="form-group">
+                    <label>Tipo de Transacción</label>
+                    <div class="transaction-types">
+                        <div class="tx-type-btn active" data-type="Payment">Payment</div>
+                        <div class="tx-type-btn" data-type="TrustSet">TrustSet</div>
+                        <div class="tx-type-btn" data-type="OfferCreate">OfferCreate</div>
+                        <div class="tx-type-btn" data-type="AccountSet">AccountSet</div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Dirección Origen (Account)</label>
+                    <input type="text" id="sourceAccount" placeholder="rN7n7otQDd6FczFgLdlqtyMVrn3aeqxQiP">
+                    <div class="quick-actions">
+                        <button class="quick-action-btn" onclick="generateTestWallet()">Generar Wallet Test</button>
+                        <button class="quick-action-btn" onclick="requestFaucet()">Pedir XRP del Faucet</button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Secret/Seed de la Cuenta</label>
+                    <input type="password" id="sourceSecret" placeholder="sXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
+                </div>
+
+                <div id="paymentFields">
+                    <div class="form-group">
+                        <label>Dirección Destino</label>
+                        <input type="text" id="destinationAccount" placeholder="rPEPPER7kfTD9w2To4CQk6UCfuHM9c6GDY">
+                    </div>
+
+                    <div class="form-group">
+                        <label>Cantidad (XRP)</label>
+                        <input type="number" id="amount" placeholder="10" value="10" step="0.000001">
+                    </div>
+
+                    <div class="form-group">
+                        <label>Memo (Opcional)</label>
+                        <input type="text" id="memo" placeholder="Test transaction">
+                    </div>
+                </div>
+
+                <button class="btn btn-primary" id="sendTxBtn" onclick="sendTransaction()">
+                    <span id="sendBtnText">Enviar Transacción</span>
+                </button>
+
+                <button class="btn btn-secondary" onclick="clearForm()">Limpiar Formulario</button>
+            </div>
+
+            <div class="card">
+                <h2>📊 Estado y Resultados</h2>
+                
+                <div class="form-group">
+                    <label>Consultar Transacción por Hash</label>
+                    <div style="display: flex; gap: 8px;">
+                        <input type="text" id="txHash" placeholder="Pega aquí el hash de una transacción">
+                        <button class="btn btn-primary" style="width: auto; padding: 10px 20px;" onclick="checkTransaction()">Consultar</button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Balance de Cuenta</label>
+                    <div style="display: flex; gap: 8px;">
+                        <input type="text" id="accountToCheck" placeholder="Dirección de cuenta">
+                        <button class="btn btn-primary" style="width: auto; padding: 10px 20px;" onclick="checkBalance()">Ver Balance</button>
+                    </div>
+                </div>
+
+                <div class="result-box" id="resultBox">
+                    <pre id="resultContent">Los resultados aparecerán aquí...</pre>
+                </div>
+
+                <div class="transaction-history" id="historySection" style="display: none;">
+                    <h3 style="font-size: 16px; margin-bottom: 12px;">Historial de esta sesión</h3>
+                    <div id="historyList"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Configuración de redes
+        const NETWORKS = {
+            testnet: 'wss://s.altnet.rippletest.net:51233',
+            devnet: 'wss://s.devnet.rippletest.net:51233',
+            custom: ''
+        };
+
+        let currentNetwork = 'testnet';
+        let ws = null;
+        let requestId = 1;
+        let transactionHistory = [];
+        let generatedWallet = null;
+
+        // Conectar a la red seleccionada
+        function connectToNetwork() {
+            if (ws) {
+                ws.close();
+            }
+
+            const serverUrl = currentNetwork === 'custom' ? 
+                document.getElementById('customServer').value : 
+                NETWORKS[currentNetwork];
+
+            if (!serverUrl) {
+                updateStatus('Desconectado', false);
+                return;
+            }
+
+            document.getElementById('serverUrl').textContent = serverUrl;
+            updateStatus('Conectando...', 'pending');
+
+            ws = new WebSocket(serverUrl);
+
+            ws.onopen = () => {
+                updateStatus('Conectado', true);
+                console.log('Conectado a:', serverUrl);
+            };
+
+            ws.onerror = (error) => {
+                updateStatus('Error de conexión', false);
+                console.error('WebSocket error:', error);
+            };
+
+            ws.onclose = () => {
+                updateStatus('Desconectado', false);
+            };
+
+            ws.onmessage = (event) => {
+                const response = JSON.parse(event.data);
+                handleWebSocketResponse(response);
+            };
+        }
+
+        function updateStatus(text, status) {
+            const badge = document.getElementById('connectionStatus');
+            badge.textContent = text;
+            badge.className = 'status-badge ';
+            
+            if (status === true) {
+                badge.className += 'status-connected';
+            } else if (status === 'pending') {
+                badge.className += 'status-pending';
+            } else {
+                badge.className += 'status-disconnected';
+            }
+        }
+
+        function handleWebSocketResponse(response) {
+            console.log('Respuesta del servidor:', response);
+            displayResult(JSON.stringify(response, null, 2));
+
+            if (response.result && response.result.hash) {
+                addToHistory('Transaction', response.result.hash, response.result.status);
+            }
+        }
+
+        // Generar wallet de prueba
+        async function generateTestWallet() {
+            try {
+                const response = await fetch('https://faucet.altnet.rippletest.net/accounts', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+
+                const data = await response.json();
+                
+                if (data.account) {
+                    generatedWallet = data.account;
+                    document.getElementById('sourceAccount').value = data.account.address;
+                    document.getElementById('sourceSecret').value = data.account.secret;
+                    
+                    displayResult(JSON.stringify({
+                        message: '✅ Wallet generada exitosamente',
+                        address: data.account.address,
+                        balance: data.account.balance,
+                        note: 'Esta wallet ya tiene XRP del faucet de testnet'
+                    }, null, 2));
+
+                    addToHistory('Wallet Generated', data.account.address, 'success');
+                } else {
+                    displayResult('❌ Error generando wallet: ' + JSON.stringify(data));
+                }
+            } catch (error) {
+                displayResult('❌ Error: ' + error.message);
+            }
+        }
+
+        // Solicitar XRP del faucet
+        async function requestFaucet() {
+            const address = document.getElementById('sourceAccount').value;
+            
+            if (!address) {
+                alert('Por favor ingresa una dirección primero');
+                return;
+            }
+
+            try {
+                const response = await fetch('https://faucet.altnet.rippletest.net/accounts', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ destination: address })
+                });
+
+                const data = await response.json();
+                displayResult(JSON.stringify({
+                    message: '✅ XRP solicitado del faucet',
+                    data: data
+                }, null, 2));
+
+                setTimeout(() => checkBalance(), 3000);
+            } catch (error) {
+                displayResult('❌ Error solicitando del faucet: ' + error.message);
+            }
+        }
+
+        // Enviar transacción
+        async function sendTransaction() {
+            const sourceAccount = document.getElementById('sourceAccount').value;
+            const sourceSecret = document.getElementById('sourceSecret').value;
+            const destination = document.getElementById('destinationAccount').value;
+            const amount = document.getElementById('amount').value;
+
+            if (!sourceAccount || !sourceSecret || !destination || !amount) {
+                alert('Por favor completa todos los campos obligatorios');
+                return;
+            }
+
+            const btn = document.getElementById('sendTxBtn');
+            btn.disabled = true;
+            document.getElementById('sendBtnText').innerHTML = '<span class="loading"></span>Enviando...';
+
+            try {
+                // Convertir XRP a drops (1 XRP = 1,000,000 drops)
+                const drops = (parseFloat(amount) * 1000000).toString();
+
+                const transaction = {
+                    TransactionType: 'Payment',
+                    Account: sourceAccount,
+                    Destination: destination,
+                    Amount: drops
+                };
+
+                const memo = document.getElementById('memo').value;
+                if (memo) {
+                    transaction.Memos = [{
+                        Memo: {
+                            MemoData: stringToHex(memo)
+                        }
+                    }];
+                }
+
+                displayResult('Preparando transacción...\n' + JSON.stringify(transaction, null, 2));
+
+                // Aquí normalmente firmarías con xrpl.js
+                // Por ahora mostramos la estructura de la transacción
+                displayResult(JSON.stringify({
+                    message: '⚠️ Transacción preparada (requiere firma)',
+                    note: 'Para enviar transacciones reales, necesitas integrar la librería xrpl.js',
+                    transaction: transaction,
+                    next_steps: [
+                        '1. Obtener AccountInfo para el Sequence',
+                        '2. Obtener Fee actual del servidor',
+                        '3. Firmar la transacción con el secret',
+                        '4. Enviar con submit comando'
+                    ]
+                }, null, 2));
+
+            } catch (error) {
+                displayResult('❌ Error: ' + error.message);
+            } finally {
+                btn.disabled = false;
+                document.getElementById('sendBtnText').textContent = 'Enviar Transacción';
+            }
+        }
+
+        // Consultar transacción
+        function checkTransaction() {
+            const hash = document.getElementById('txHash').value;
+            
+            if (!hash) {
+                alert('Por favor ingresa un hash de transacción');
+                return;
+            }
+
+            if (!ws || ws.readyState !== WebSocket.OPEN) {
+                alert('No estás conectado a la red. Selecciona una red primero.');
+                return;
+            }
+
+            const request = {
+                id: requestId++,
+                command: 'tx',
+                transaction: hash
+            };
+
+            ws.send(JSON.stringify(request));
+            displayResult('Consultando transacción...');
+        }
+
+        // Consultar balance
+        function checkBalance() {
+            const account = document.getElementById('accountToCheck').value || 
+                           document.getElementById('sourceAccount').value;
+            
+            if (!account) {
+                alert('Por favor ingresa una dirección');
+                return;
+            }
+
+            if (!ws || ws.readyState !== WebSocket.OPEN) {
+                alert('No estás conectado a la red. Selecciona una red primero.');
+                return;
+            }
+
+            const request = {
+                id: requestId++,
+                command: 'account_info',
+                account: account,
+                ledger_index: 'validated'
+            };
+
+            ws.send(JSON.stringify(request));
+            displayResult('Consultando balance...');
+        }
+
+        function displayResult(text) {
+            document.getElementById('resultContent').textContent = text;
+        }
+
+        function addToHistory(type, value, status) {
+            transactionHistory.push({ type, value, status, time: new Date() });
+            
+            const historySection = document.getElementById('historySection');
+            const historyList = document.getElementById('historyList');
+            
+            historySection.style.display = 'block';
+            
+            const item = document.createElement('div');
+            item.className = 'history-item';
+            item.innerHTML = `
+                <strong>${type}</strong>: ${value.substring(0, 20)}...
+                <button class="copy-btn" onclick="copyToClipboard('${value}')">Copiar</button>
+                <br>
+                <span style="font-size: 11px; color: var(--color-text-secondary);">
+                    ${new Date().toLocaleTimeString()}
+                </span>
+            `;
+            
+            historyList.insertBefore(item, historyList.firstChild);
+        }
+
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text);
+            alert('Copiado al portapapeles');
+        }
+
+        function stringToHex(str) {
+            return Array.from(str)
+                .map(c => c.charCodeAt(0).toString(16).padStart(2, '0'))
+                .join('').toUpperCase();
+        }
+
+        function clearForm() {
+            document.getElementById('sourceAccount').value = '';
+            document.getElementById('sourceSecret').value = '';
+            document.getElementById('destinationAccount').value = '';
+            document.getElementById('amount').value = '10';
+            document.getElementById('memo').value = '';
+        }
+
+        // Event listeners
+        document.querySelectorAll('.network-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.network-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                
+                currentNetwork = this.dataset.network;
+                
+                const customInput = document.getElementById('customServerInput');
+                customInput.style.display = currentNetwork === 'custom' ? 'block' : 'none';
+                
+                connectToNetwork();
+            });
+        });
+
+        document.querySelectorAll('.tx-type-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.tx-type-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                // Aquí puedes agregar lógica para mostrar/ocultar campos según el tipo
+            });
+        });
+
+        // Conectar al cargar
+        window.addEventListener('load', () => {
+            connectToNetwork();
+        });
+    </script>
+</body>
+</html>
