Advanced JavaScript · 5 min read
Mini App: NEAR Account Explorer
Build a small app that reads live NEAR testnet data over JSON-RPC: state, validation, loading and error UI, caching, and race-condition handling.
Time to combine everything: modules-style organisation, async fetch with timeouts, closures for caching, delegated events and safe rendering. The app looks up any testnet account and shows its balance, storage, and whether it holds a Retr0 Academy diploma, all over raw JSON-RPC, which is what near-api-js does under the hood.
The plan
- Validate the account id before hitting the network.
view_account: balance (in yoctoNEAR) and storage usage.call_function→verify_diploma: arguments are base64 JSON, the result is an array of bytes holding JSON.- Cache results in a closure-backed
Map. - Ignore stale responses if the user searches again before the first finishes.
<form id="f">
<input id="acct" value="hackathon-judge.retr0school.testnet" aria-label="Testnet account" spellcheck="false">
<button>Look up</button>
</form>
<div class="chips">
<button data-acct="demo-learner.retr0school.testnet">demo-learner</button>
<button data-acct="diploma.retr0school.testnet">diploma contract</button>
<button data-acct="nobody-here-xyz.testnet">missing account</button>
</div>
<section id="out" aria-live="polite"></section>Edit this example in the Playground.
What each technique does here
| Technique | Where |
|---|---|
| Validation before network | ACCOUNT_RE.test(account) |
| Parallel requests | Promise.all([view_account, verify_diploma]) |
| Timeout | AbortSignal.timeout(8000) |
| BigInt for money | yoctoToNear: 1 NEAR = 10^24 yocto, beyond Number precision |
| Closure cache that forgets failures | cached |
| Race-condition guard | the latest ticket |
| Event delegation | one listener on .chips |
| XSS-safe rendering | textContent in row() |
Summary
You built a real client for a public blockchain API with nothing but the platform. Every NEAR front end, from wallets to explorers, is these same pieces with more polish.
Saved in this browser.