blockbook-fetcher
Version:
Blockbook API fetcher for Browser / Node.js
121 lines (108 loc) • 4.96 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockbook Address Viewer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.token-list li { margin-bottom: 0.3em; }
.spinner-grow { vertical-align: middle; }
</style>
</head>
<body class="bg-light">
<div class="container" style="max-width: 40em;">
<h1 class="mb-4 mt-3 text-center">Blockbook Address Viewer</h1>
<div class="card shadow-sm">
<div class="card-body">
<form id="lookupForm" autocomplete="off">
<div class="mb-3">
<label for="chain" class="form-label">Blockchain</label>
<select id="chain" class="form-select">
<option value="btc">Bitcoin Mainnet</option>
<option value="eth">Ethereum Mainnet</option>
<option value="cpu">CPUchain Mainnet</option>
</select>
</div>
<div class="mb-3">
<label for="address" class="form-label">Address</label>
<input id="address" class="form-control" placeholder="Enter address (CPU, BTC or ETH)" required/>
</div>
<button id="btn" type="submit" class="btn btn-primary w-100">Fetch Info</button>
</form>
<div id="loading" class="mt-3 text-center" style="display:none;">
<div class="spinner-grow text-primary" style="width:2rem;height:2rem;" role="status"></div><br>
<small>Loading...</small>
</div>
<div id="error" class="alert alert-danger mt-3" style="display:none;"></div>
<div id="result" class="mt-3"></div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS (optional, for props/modal support) and jQuery 3.x -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv2020.bundle.min.js"></script>
<script src="./lib/blockbook.umd.js"></script>
<script>
const { Blockbook } = blockbook;
const ENDPOINTS = {
btc: 'https://corsproxy.io/?url=https://btc1.trezor.io',
eth: 'https://corsproxy.io/?url=https://eth1.trezor.io',
cpu: 'https://blockbook.cpuchain.org',
};
function formatToken(token) {
return `
<li class="list-group-item">
<strong>${token.name || token.symbol}</strong>
${token.contract ? `<span class="badge bg-secondary">${token.contract}</span>` : ''}
<div>
<small>
Symbol: ${token.symbol || ''} <br>
Balance: ${token.balance || ''} <br>
${token.baseValue !== undefined ? `In Base: ${token.baseValue}` : ''}
</small>
</div>
</li>
`;
}
$('#lookupForm').on('submit', async function (e) {
e.preventDefault();
$('#result').html('').hide();
$('#error').hide();
$('#loading').show();
let chain = $('#chain').val();
let address = $('#address').val()?.toString().trim();
if (!address) {
$('#error').text('Enter an address!').show();
$('#loading').hide();
return;
}
try {
const blockbook = new Blockbook(ENDPOINTS[chain]);
const data = await blockbook.getAddress(address, { details: 'tokenBalances' });
let html = `
<ul class="list-group mb-3">
<li class="list-group-item"><strong>Address:</strong> ${data.address}</li>
<li class="list-group-item"><strong>Balance:</strong> ${data.balance}</li>
<li class="list-group-item"><strong>Unconfirmed:</strong> ${data.unconfirmedBalance}</li>
<li class="list-group-item"><strong>Confirmed TXs:</strong> ${data.txs}</li>
</ul>
`;
if (Array.isArray(data.tokens) && data.tokens.length > 0) {
html += `
<h5>Token Balances</h5>
<ul class="list-group token-list">
${data.tokens.map(formatToken).join('')}
</ul>
`;
}
$('#result').html(html).show();
} catch (err) {
$('#error').text(err instanceof Error ? err.message : String(err)).show();
} finally {
$('#loading').hide();
}
});
</script>
</body>
</html>