382 reads

AlgoNaut - an Algorand wallet with Tatum

by Néstor CamposMay 3rd, 2022

Too Long; Didn't Read

Tatum is a service and framework that offers access to different blockchain networks through APIs, SDK, plugins (for WordPress), and even through a console interface. Algorand is a blockchain network that is defined as "Pure Proof of Stake" (PPoS), designed in high-speed transaction processing and high-level smart contracts for decentralized finance (DeFi) AlgorAnd is capable of handling about 2 thousand transactions per second without problems in its current network state. In AlgoNaut you can create a new address (with your public and private key) and authenticate with your private key.

featured image - AlgoNaut - an Algorand wallet with Tatum

When you start to understand more about different Blockchain technologies and want to start developing your own applications, if you don't have experience with some technologies (such as Node, Rust, etc.) it will be a little more difficult than you thought to enter the Web3 world.

Fortunately, now you can use any programming language and connect to different Blockchains through APIs, thanks to Tatum. And in this article, we will do just that, by creating a wallet with the Algorand network.

What is Tatum?

Tatum is a service and framework that offers access to different blockchain networks through APIs, SDK, plugins (for WordPress), and even through a console interface.

Its advantage is that it abstracts the complexities involved in working with a particular blockchain (with its own SDK), you can even work on a multi-chain project with very few changes. And all this, free at first (with quotas of requests per second).

What is Algorand?

Algorand is a blockchain network that is defined as "Pure Proof of Stake" (PPoS), designed in high-speed transaction processing and high-level smart contracts for decentralized finance (DeFi). Algorand's token is ALGO.

The use of PPoS is framed in achieving block production speed measured in a few seconds, which would allow a high scalability of the network, thus serving thousands of users concurrently, with very short waiting times and, above all, with Very low commission costs.

Algorand is capable of handling about 2 thousand transactions per second without problems in its current network state.

One of the main features of Algorand is that any user who is online and holds ALGO tokens can participate in the PPoS system. In other words, PPoS eliminates the barrier that PoS (Proof of Stake) imposes on hard staking, where it is necessary to retain a certain number of tokens to participate in the process of selecting, generating and validating transactions and blocks.

Creating a wallet

A wallet allows you to have control over your assets and tokens for one or several blockchain networks, and it is precisely what I wanted. I didn't trust much in the ones I found, and since I wanted to learn just like you, I created it only with Tatum, HTML, Javascript with Jquery and CSS, which I called AlgoNaut.

You can test it here. It works in Algorand testnet.

What can you do? In AlgoNaut you can:

Create a new address (with your public and private key).
Authenticate with your private key.
View your ALGO balance.
Transfer SOMETHING to another account.
Check if an address is valid (a Tatum-specific functionality).

How to use it?

First, create your Tatum account and get an API key (you can select whether it will be a mainnet or testnet one). Next, you must build the entire frontend of your app (a page to create your account, another to authenticate and finally one with your account details (balance and transfer form).

You can fork AlgoNaut from this repository.

Next, you need to jquery the Tatum API with the respective endpoint (when you create your key you will know the endpoint) and create the methods to get the balance, create an account, verify an address and make a transfer.

In the repository, you can check out the main.js file inside the JS folder.

const api = "API_TATUM";


function saveAddressInStorage(address, secret) {
  var addresses = JSON.parse(localStorage.getItem("addresses"));
  if(addresses != null) {
    addresses.push({address:address, key: secret});
    
  }
  else {
    addresses = []
    addresses.push({address:address, key: secret});
  }
  localStorage.setItem("addresses", JSON.stringify(addresses));
}



function getFirstAddress() {
  var addresses = JSON.parse(localStorage.getItem("addresses"));
  return addresses[0];
}

function sendTransaction() {
  var address = getFirstAddress();
  var recipient = $('#trx_address').val();
  if(recipient == '') {
    $('#errorTrx').css("display","block");
    $('#errorTrx').text("Recipient is invalid");
    return;
  }
  var memo = $('#trx_memo').val();
  var amount = $('#trx_amount').val();
  if(amount == '') {
    $('#errorTrx').css("display","block");
    $('#errorTrx').text("Amount is invalid");
    return;
  }
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://api-us-west1.tatum.io/v3/algorand/transaction",
    "method": "POST",
    "headers": {
      "content-type": "application/json",
      "x-api-key": api
    },
    "processData": false,
    "data": "{\"from\":\""+address.address+"\",\"to\":\""+recipient+"\",\"fee\":\"0.001\",\"amount\":\""+amount+"\",\"note\":\""+memo+"\",\"fromPrivateKey\":\""+address.key+"\"}"
  };
  
  $.ajax(settings).done(function (response) {
    $('#errorTrx').css("display","none");
    $('#errorTrx2').css("display","block");
    $('#errorTrx2').text('The transaction is valid and successfully execute with id '+response);
    checkBalance();
    console.log(response);
  }).fail(function (response) {
    $('#errorTrx').css("display","block");
    $('#errorTrx2').css("display","none");
    $('#errorTrx').text('There was an error with your transaction. Check the form.');
    response.responseJSON.data[0].
    console.log(response);
  });
}


function generateWallet()
{
    const mnemotic = $('#mnemoticWallet').val();
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": mnemotic !== "" ? "https://api-us-west1.tatum.io/v3/algorand/wallet?mnemonic="+mnemotic : "https://api-us-west1.tatum.io/v3/algorand/wallet",
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $.ajax(settings).done(function (response) {
        console.log(response);
        $('#new_address_generated').show();
        $('#new_wallet_address').text(response.address);
        $('#new_wallet_secret').text(response.secret);
        saveAddressInStorage(response.address, response.secret);
      });
}

function confirmKeySaved() {
  localStorage.authenticated = "true";
  location.href = 'index.html';
}

function generateWalletFromPrivateKey()
{
    const privateKey = $('#pvKeyValue').val();
    if(privateKey != '') {
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://api-us-west1.tatum.io/v3/algorand/address/"+privateKey,
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $.ajax(settings).done(function (response) {
        saveAddressInStorage(response, privateKey);
        confirmKeySaved();

      }).fail(function (response) {
        $('#errorLogin').css("display","block");
        $('#errorLogin').text('The private key is not valid.');
        
      });
    }
    else {
      $('#errorLogin').css("display","block");
        $('#errorLogin').text('The private key is not valid.');
        
    }
}

function checkBalance()
{
    const publicAddress = getFirstAddress().address;
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://api-us-west1.tatum.io/v3/algorand/account/balance/"+publicAddress,
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $.ajax(settings).done(function (response) {
        $('.view_balance_address').text(response);
      });
}

function checkCurrentBlock() {
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://api-us-west1.tatum.io/v3/algorand/block/current",
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $.ajax(settings).done(function (response) {
        $('.view_block_number').text(response);
        console.log(response);
      });
}

function getBlockData(blockNumber)
{
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://api-us-west1.tatum.io/v3/algorand/block/"+blockNumber,
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $.ajax(settings).done(function (response) {
        console.log(response);
      });
}

function checkAddress()
{
  const address = $('#verify_address').val();
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://api-us-west1.tatum.io/v3/security/address/"+address,
        "method": "GET",
        "headers": {
          "x-api-key": api
        }
      };
      
      $('#is_valid_address').css('display',"block");
      $.ajax(settings).done(function (response) {
        if(response.status == 'valid') {
          $('#is_valid_address').text('The address '+address+" is valid");
        }
        else {
          $('#is_valid_address').text('The address '+address+" is not valid");
        }
        console.log(response);
      }).fail(function (response) {
          $('#is_valid_address').text('The address '+address+" is not valid");
        console.log(response);
      });
}

function logout() {
  localStorage.clear();
  location.href = 'login.html';
}
    

setInterval(
    checkCurrentBlock(),30000
);

$(function()
{
  if(localStorage.authenticated != null) {
    checkBalance();
    var address = getFirstAddress().address;
    $('.current_account').qrcode(address);
    $('.current_account_text').text(address);

  }
  
    $('#generateWalletButton').click(
        function() {
        generateWallet()});

    $('#generateWalletPrivKeyButton').click(
        function() {
            generateWalletFromPrivateKey()});

    $('#confirmKeySavedButton').click(
      function() {
        confirmKeySaved()});

    $('#verifyAddressButton').click(
      function() {
        checkAddress()});
    $('#btnLogout').click(
      function() {
        logout()});

    $('#sendTrxButton').click(
      function() {
        sendTransaction()});
    
}
    
);

As you can see, you will need your API key on line 1 of the file to be able to make the calls. Also, the private key and other data are stored in the localstorage of the machine (it is not shared with anyone else).

When you already have your API in the file, just open the index.html file and your wallet will be available on your machine (as in my case, you can publish it directly on GitHub).

As you can see, without the need to be an expert in Javascript or blockchain, you can have your own application in just a few steps thanks to Tatum.

You can set the wallet to constantly load the current Algorand block, it only shows up on page load and doesn't update until you refresh the page. You can also set it to be multi-chain.

It's your turn

Now is your time to participate in Web3 with your own applications, whether or not you are an expert in programming, you can participate without problems thanks to technologies such as Tatum.

You have even seen a wallet, but the possibilities for development and projects are endless.