Byteball JS Tutorials #2 : Create a web page that sends bytes to any byteball account

genievot

Published: 03 Sept 2018 › Updated: 03 Sept 2018 Byteball JS Tutorials #2 : Create a web page that sends bytes to any byteball account

Byteball JS Tutorials #2 : Create a web page that sends bytes to any byteball account

Repository: https://github.com/bonuschain/byteball.js

https://steemitimages.com/0x0/https://ipfs.busy.org/ipfs/QmT9msxL9VDxgs3xrnP1pNBZRTBj51mKHwwKUhg66Bdmwo

image taken from :- src

What Will I Learn?

In brief, write details of what the user is going to learn in a bullet list.

How to use testnet client of byteball for the purpose of this.
How to use byteball paper wallet for our purpose.
How to send byteball payments to any address.
Creating front end to send bytes.

Requirements

State the requirements the user needs in order to follow this tutorial.

Basic understanding of HTML is required
Basic understanding of Javascript and Materialize css.
Any text editor (Atom, VS code, etc.)
Javascript supported any Web browser with an updated version (e.g. Chrome, Mozilla Firefox, edge etc.)

Difficulty

Choose one of the following options:

Basic

Tutorial Contents

I will be teaching in this post that how to send bytes or any other asset to any byteball address with the help of byteball js, which is a powerful library to create web applications for byteball. The tutorial will be divided in 5 parts as for introducing you each concept clearly. Download and setup project files link

Tutorial Begins From Here:

1):--

Go here and download the testnet client based on your operating system.

2018-09-03 (6).png

After installing the bot, Click on the link given below the downloading option to start chatting with testnet bot and to get your first 75000 of free testnet bytes, The link is also given on the website. Follow below steps if confused.

2018-09-03 (18).png
2018-09-03 (11).png
2018-09-03 (12).png
2018-09-03 (14).png
2018-09-03 (15).png

You can request only once per 24 hours, I already got mine :D

Go to receive tab to see your byteball account address, this light wallet is very easy to follow and understand.

2018-09-03 (16).png
grey divider.png

2):--

Now go here. Create your paper wallet private key or wif, public key and seed for byteball.

2018-09-03 (19).png

These wallets won't work in byteball client but they are connected with the byteball main chain, So you can see all of the transaction units and get details about your account but only after you do some transaction over it like sending bytes, you can found all you account details here :- Byteball testnet Explorer Link. Just search for address or unit id.

2018-09-03 (21).png
grey divider.png

3):--

There is a function in byteball js to mane our stuff easy. In docs you can watch more info about code.

const params = {
  outputs: [
    { address: 'NX2BTV43XN6BOTCYZUUFU6TK7DVOC4LU', amount: 1000 }
  ]
};

client.post.payment(params, wif, function(err, result) {
  console.log(result);
});

Code Explained:-

In the output field, we are adding `address` of the receiver and the amount to send. Then using `client.post.payment()` we are broadcasting the send request by giving `wif` of the account.

Note: Accounts created with byteball client don't have wif , they only have seed. So to get a wif, you have to work with paper wallet accounts and transect from these accounts, By that means first you should send some bytes to the paper wallet account and then you can search your account address in testnet explorer and then you can work with Byteball JS methods easily.

It will print out a unique unit id that can be searched in testnet explorer. The docs are very clear with every bit of info for byteball js, so make sure to take a look that them:- https://byteballjs.com/post/payment

grey divider.png

4):--

From Here the tutorial is further divided in 2 parts, make sure you have downloaded the repository of part 1 (linked above).

Remove all previous code in Index.html and put this code instead.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <title></title>
</head>

<body>
  <div class="container">
    <div class="row">
      <form class="col s12">
        <div class="row">
          <input placeholder="Enter byteball address" id="address" type="text" class="validate">
        </div>
        <div class="row">
          <input placeholder="Enter amount" id="amount" type="text" class="validate">
        </div>
      </form>
    </div>
    <div class="row center">
      <span id="un_id"></span>
    </div>
    <div class="row center">
      <a class="waves-effect waves-light btn grey darken-4">Send</a>
    </div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/byteball@0.1.0/dist/byteball.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>

</html>

It's simple, Added 2 input fields and a button of materialized design. Another thing added is `<span>` tag where i can show the result (unit id) that can be searched on testnet block explorer talked above.

Remove all previous code in Index.js and put this code instead.

// Javascript code.
//Initialized client first...
 const client = new byteball.Client('wss://byteball.org/bb-test', true); // for test net client
//Sender wif's can be generated with paper wallet.
 const wif = "92jcZ8iVfmAoipDCmNA4ummBYfuCv8YqBjjjhWo1G77foAtyPU8"; // Wif of sender account
 $('.btn').click(() => {
   if ($('#address').val() != "" && $('#amount').val() != "") {
     console.log($('#address').val() + " - " + $('#amount').val())
     const params = {
       outputs: [{
         address: $('#address').val(),
         amount: parseInt($('#amount').val())
       }]
     };
     client.post.payment(params, wif, function(err, result) {
              console.log("HEllo")
       if (!err) {

         $('#un_id').html(result);
         M.toast({
           html: 'Successfully transferred!'
         });
       }
       console.log(err, result);
     });
   } else {
     M.toast({
       html: 'Please enter address and amount correctly!'
     })
   }
 });

Code working:

First initialized byteball client with test net

const client = new byteball.Client('wss://byteball.org/bb-test', true);

Then initialized a wif of sender (Wif can be created as explained above)

const wif = "92jcZ8iVfmAoipDCmNA4ummBYfuCv8YqBjjjhWo1G77foAtyPU8";

Then inside button click even, I am checking that make sure to fill all required fields address & amount, You can add more validating requirements for address or amount.
I am passing values pf address and amount to required properties but amount should be in int so i am converting it.

         address: $('#address').val(),
         amount: parseInt($('#amount').val())

Printing certain toasts to map user with current progress, like this.

   M.toast({
           html: 'Successfully transferred!'
         });

Printing unit id in span to give it to user/

$('#un_id').html(result);

Also giving a console.log output for error and other information but you can sure use a toast to indicate that as well .

Open index.html with browser to see your output.

grey divider.png

Output:

2018-09-03 (24).png
2018-09-03 (25).png

Curriculum

Part #1- Basics

Proof of Work Done

https://github.com/genievot/byteballjs

Leave Byteball JS Tutorials #2 : Create a web page that sends bytes to any byteball account to:

Written by genievot

Contributing for open source.

Best Posts From genievot

We have not curated any of genievot's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

Byteball JS Tutorials #2 : Create a web page that sends bytes to any byteball account