Hive JavaScript Tutorial : Comprehensive wallet checker tool

Hello, Hive community. I came across @deathwing post on AI Agent Developer Tooling Pilot Program and I have been curious on how to utilize this opportunity to build things on Hive blockchain. My main goal is to build a lottery system for HIVE and I have all the Production Requirements Document even with the UI ready. I reckon that I take on small projects before I delve into something huge to get the hang of the blockchain

I have been exploring the hive-js library to learn how to build tools on top of our blockchain. I wanted to create a simple Wallet Checker that pulls not only HIVE/HBD balances but also custom Hive-Engine tokens.

I am sharing the code and explaining exactly how it works so you can build your own or tweak

Level of Difficulty : Intermediate
Languages : JavaScript, HTML, CSS
HIVE JavaScript API docs : https://gitlab.syncad.com/hive/hive-js/tree/master/doc

The single-page web app allows a user to type in a Hive username and instantly see:

Liquid & Savings HIVE

Liquid & Savings HBD

A clean list of all their Hive-Engine tokens (Liquid + Staked combined)

Step 1: Connecting to the Blockchain

First, we need to import the hive-js library into our HTML and tell it which public node to talk to.

<script src="https://cdn.jsdelivr.net/npm/@hiveio/hive-js/dist/hive.min.js"></script>
<script>
    // Pointing to the official Hive API node
    hive.api.setOptions({ url: 'https://api.hive.blog' });
</script>

By setting the URL to api.hive.blog, we ensure our app is querying the official Hive RPC server.

Step 2: Fetching Native Hive Balances

When the user clicks "Search", we fire off the JavaScript function fetchBalances(). Fetching native balances is incredibly straightforward thanks to the getAccounts method. The function takes care of any whitespaces from both ends of the input and also converts any value inputted in the username to lowercase.

function fetchBalances() {
    var user = document.getElementById('username').value.trim().toLowerCase(); 


    
    hive.api.getAccounts([user], function(err, result) {
        if (err || result.length === 0) {
            alert("Error: Could not find user.");
            return;
        }


        var account = result[0];
        
        
        document.getElementById('liquidHive').innerText = account.balance.split(' ')[0];
        document.getElementById('liquidHbd').innerText = account.hbd_balance.split(' ')[0];
        document.getElementById('savingsHive').innerText = account.savings_balance.split(' ')[0];
        document.getElementById('savingsHbd').innerText = account.savings_hbd_balance.split(' ')[0];


        // Next step: fetch engine tokens!
        fetchEngineTokens(user);
    });
}

The blockchain returns a massive JSON object with all the user account's data. We extract account.balance, account.hbd_balance by using .split(' ')[0] to strip out the words "HIVE" and "HBD" from the result so it fits nicely into the UI interface.

Step 3: Fetching Hive-Engine Tokens

This is the tricky aspect. Hive-Engine is a layer-2 chain on Hive. The standard hive-js library doesn't know Engine tokens exist so we have to bypass the library and make a direct HTTP request to a Hive-Engine RPC node.

async function fetchEngineTokens(user) {   
    const engineUrl = "https://api.primersion.com/contracts";
   
   
    const payload = {
        jsonrpc: "2.0",
        method: "find",
        params: {
            contract: "tokens",
            table: "balances",
            query: { account: user },
            limit: 1000
        },
        id: 1
    };


    try {
        const response = await fetch(engineUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        
        const data = await response.json();
        const tokens = data.result;


        
        const activeTokens = tokens.filter(t => parseFloat(t.balance) > 0 || parseFloat(t.stake) > 0);
        activeTokens.sort((a, b) => a.symbol.localeCompare(b.symbol));

Instead of a simple library call, we use JavaScript's native fetch API by asking the HiveEngine node to look inside the tokens contract, specifically the balances table, and find everything matching our user.

Because Hive-Engine "dusts" users with lots of zero-balance tokens, we use the .filter() method to only keep tokens where the liquid balance or staked stake is greater than zero else we will just be filled with tokens that have long be sold with 0 balance. You can confirm this by using this line
const activeTokens = tokens.filter(t => parseFloat(t.balance) >= 0 || parseFloat(t.stake) >= 0);

The Final Result

By wrapping this logic in a simple UI using CSS Grid and soft shadows, we get a simple wallet checker that doesn't require any login or keychain prompts.

You can view or copy the entire source code on my

GitHub here: https://github.com/ecohiver/walletchecker/ and
also access it here live https://ecohiver.github.io/walletchecker/.

Functional APIs you can also use
https://api.deathwing.me

What should I build next?

Let me know in the comments what you think I should build next