Tutorials

Building a Stellar Client – Part 2

In the previous tutorial, we looked at how to create an account on Stellar.
Today we will extend our Stellar client with the following feature:

  • Viewing account details

So let’s get started.

Retrieving an account

In the index.html file we will add the following:


 <input type="text" name="viewAccountId" id="viewAccountId" placeholder="Enter account ID" />
 
 <button type="submit" class="btn btn-success" id="viewAccount">Submit</button>
 
 <div id="viewResponse"></div>

Pretty straightforward, we have added an input field for the account ID and a submit button.

Next we open the stellar-client.js file and add the following:

  
$('#viewAccount').on('click', function() {
    var resp = $('#viewResponse');
    var accountId = $('#viewAccountId').val();

    if (!StellarSdk.Keypair.isValidPublicKey(accountId)) {
       resp.html('

Invalid Account ID

'); return false; }else{ resp.html('

Finding account on Stellar...

'); // load account server.loadAccount(accountId) .catch(function(error) { resp.html('

Account not active

'); return false; }) .then(function(account) { console.log("account", account); // Get account details resp.html(getAccountDetails(account)); }); } }); function getAccountDetails(account) { var output = ""; output += "Account ID: "+account.account_id+"\n************\n" output += "Sequence No: "+account.sequence+"\n************\n"; account.balances.forEach(function(balance) { var asset = ""; if (balance.asset_type === 'native') { asset = 'Asset Code: XLM'; }else{ asset = 'Asset Code: '+balance.asset_code+"\nAsset Issuer: "+balance.asset_issuer; } output +="Amount: "+balance.balance+"\n"+asset+"\n************\n"; }); return output; }

This is what is happening. When the user enters the account Id and clicks submit, we check if the account ID is a valid public key, if not we output an error message.
If the account ID is valid, we call server.loadAccount(accountId) which attempts to get the account. If the account is not found we return a message. If it is found we do some processing and return the account details

You will notice that we pass the returned account value to a function; getAccountDetails(). This retrieves juts the details we want to display from the account object. The account object is logged in the console so you can review it to see all its contents.

That’s all; easy right? You can grab the source code for this tutorial here. Also you can play around with the stellar client we have built so far here. Next time we will be working on the final part of our stellar client; sending payments.

Leave a Comment