Soroban TTL Manager

I'll help you create a web interface for managing TTL (Time To Live) data keys and contract footprints in the Soroban network using TypeScript. Here's the implementation: Soroban TTL Manager

Soroban TTL Manager

Contract ID

Data Key

TTL (in ledger numbers)

Contract ID

Data Key

Contract ID

body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .card { border-radius: 10px; overflow: hidden; } .card-header { border-radius: 10px 10px 0 0 !important; } .nav-tabs .nav-link { color: #495057; font-weight: 500; } .nav-tabs .nav-link.active { color: #0d6efd; font-weight: 600; } .btn-primary { background-color: #0d6efd; border-color: #0d6efd; } .form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } #extendResult, #restoreResult, #contractResult { padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6; } import { SorobanRpc, xdr } from '@stellar/stellar-sdk'; // Initialize Soroban RPC client const rpcUrl = 'https://soroban-testnet.stellar.org'; const server = new SorobanRpc.Server(rpcUrl); // DOM Elements const extendBtn = document.getElementById('extendBtn') as HTMLButtonElement; const restoreBtn = document.getElementById('restoreBtn') as HTMLButtonElement; const contractBtn = document.getElementById('contractBtn') as HTMLButtonElement; // Extend TTL functionality extendBtn.addEventListener('click', async () => { const contractId = (document.getElementById('extendContractId') as HTMLInputElement).value; const key = (document.getElementById('extendKey') as HTMLInputElement).value; const ttl = (document.getElementById('extendTtl') as HTMLInputElement).value; if (!contractId || !key || !ttl) { showResult('extendResult', 'Please fill all fields', 'error'); return; } try { showResult('extendResult', 'Processing extension...', 'info'); // Convert inputs to appropriate types const contractIdXdr = xdr.ScAddress.fromString(contractId); const keyXdr = xdr.ScVal.fromString(key); const ttlNumber = parseInt(ttl); // Here you would normally build and submit a transaction // This is a simplified example const result = await extendTtl(contractIdXdr, keyXdr, ttlNumber); showResult('extendResult', `TTL extended successfully! Ledger: ${result.ledger}`, 'success'); } catch (error) { showResult('extendResult', `Error: ${error instanceof Error ? error.message : String(error)}`, 'error'); } }); // Restore TTL functionality restoreBtn.addEventListener('click', async () => { const contractId = (document.getElementById('restoreContractId') as HTMLInputElement).value; const key = (document.getElementById('restoreKey') as HTMLInputElement).value; if (!contractId || !key) { showResult('restoreResult', 'Please fill all fields', 'error'); return; } try { showResult('restoreResult', 'Processing restoration...', 'info'); // Convert inputs to appropriate types const contractIdXdr = xdr.ScAddress.fromString(contractId); const keyXdr = xdr.ScVal.fromString(key); // Here you would normally build and submit a transaction // This is a simplified example const result = await restoreTtl(contractIdXdr, keyXdr); showResult('restoreResult', `TTL restored successfully! Ledger: ${result.ledger}`, 'success'); } catch (error) { showResult('restoreResult', `Error: ${error instanceof Error ? error.message : String(error)}`, 'error'); } }); // Contract Footprint functionality contractBtn.addEventListener('click', async () => { const contractId = (document.getElementById('contractId') as HTMLInputElement).value; if (!contractId) { showResult('contractResult', 'Please enter contract ID', 'error'); return; } try { showResult('contractResult', 'Fetching footprint...', 'info'); const contractIdXdr = xdr.ScAddress.fromString(contractId); const footprint = await getContractFootprint(contractIdXdr); showResult('contractResult', `Contract Footprint:

${JSON.stringify(footprint, null, 2)}

`, 'success'); } catch (error) { showResult('contractResult', `Error: ${error instanceof Error ? error.message : String(error)}`, 'error'); } }); // Helper functions (mock implementations - replace with actual Soroban calls) async function extendTtl(contractId: xdr.ScAddress, key: xdr.ScVal, ttl: number): Promise<{ledger: number}> { // In a real implementation, you would: // 1. Build a transaction // 2. Submit it to the network // 3. Wait for confirmation return { ledger: Math.floor(Math.random() * 1000000) }; } async function restoreTtl(contractId: xdr.ScAddress, key: xdr.ScVal): Promise<{ledger: number}> { // Similar to extendTtl but for restoring return { ledger: Math.floor(Math.random() * 1000000) }; } async function getContractFootprint(contractId: xdr.ScAddress): Promise { // Get the contract's footprint from the network return { contractId: contractId.toString(), footprint: { readOnly: [], readWrite: [] }, ttl: Math.floor(Math.random() * 1000000) }; } function showResult(elementId: string, message: string, type: 'info' | 'success' | 'error') { const element = document.getElementById(elementId); if (!element) return; element.innerHTML = message; element.className = `mt-3 alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info'}`; } { "compilerOptions": { "target": "ES6", "module": "ES6", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "outDir": "./dist", "rootDir": "." }, "include": ["**/*.ts"], "exclude": ["node_modules"] }