How To Transfer STEEM/SBD Using Steem.js JavaScript Library (Steem.js #2)

fbslo (70)in #utopian-io • 6 years ago (edited)

How To Transfer STEEM/SBD Using Steem.js JavaScript Library

Repository

What Will I Learn?

In this tutorial, you will learn how to transfer STEEM or SBD using Steem.js JavaScript Library. This can be useful if you don't have access to front-end website with wallet. You are also safe from phishing websites.

You will learn how to transfer STEEM/SBD using Steem.js
You will learn some basic HTML (input fields).

Requirements

You need:

Text editor (I use Atom)
Downloaded Steem.js
Some time
Web browser

Difficulty

Basic

Transfer funds using Steem.js

In this tutorial, we will create simple website wallet. It will allow you to transfer funds.

First you need to prepare skeleton of website (You learned this is Tutorial #1). This code will only load Steem.js.

<head><title>Transfer STEEM/SBD using Steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>
</body>
</html>

When we have skeleton ready, we need to add javascript script.
steem.broadcast.transfer(wif, from, to, amount, memo, function(err, result) { console.log(err, result); });
Now our website look like this:

<head><title>Transfer STEEM/SBD using Steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>
<script>
steem.broadcast.transfer(wif, from, to, amount, memo, function(err, result) {
  console.log(err, result);
});
</script>
</body>
</html>

We need to add input fields for WIF (active key), from account, to account, amount, memo.

<head><title>Transfer STEEM/SBD using Steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>

<input id='wif' type='text' placeholder="WIF"></input>
<input id='from' type='text' placeholder="From"></input>
<input id='to' type='text' placeholder="To"></input>
<input id='amount' type='text' placeholder="amount"></input>
<input id='memo' type='text' placeholder="Memo"></input>

<script>
const wif= document.getElementById('wif').value;
const from= (document.getElementById('from').value;
const to= document.getElementById('to').value;
conts amount = document.getElementById('amount').value;
conts memo= document.getElementById('memo').value;

steem.broadcast.transfer(wif, from, to, amount, memo, function(err, result) {
  alert(err, result);
});
</script>
</body>
</html>

Now we have input fields, but we need button that will run our script

<head><title>Transfer STEEM/SBD using Steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>

<input id='wif' type='text' placeholder="WIF"></input>
<input id='from' type='text' placeholder="From"></input>
<input id='to' type='text' placeholder="To"></input>
<input id='amount' type='text' placeholder="amount"></input>
<input id='memo' type='text' placeholder="Memo"></input>
<input type="button" value="Transfer" id='button' onclick='transfer()'  />


<script>
function transfer(){
const wif= document.getElementById('wif').value;
const from= (document.getElementById('from').value;
const to= document.getElementById('to').value;
conts amount = document.getElementById('amount').value;
conts memo= document.getElementById('memo').value;

steem.broadcast.transfer(wif, from, to, amount, memo, function(err, result) {
  alert(err, result);
});
}
</script>
</body>
</html>

I added function transfer() and button that will run this function.

This is working webpage now, but it is only pure HTML. Let's add CSS to make it nice. I will use same CSS as at fbslo.net/tools. You need to add CSS to head.

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
 <style type="text/css">
 .form-style-8{
     font-family: 'Open Sans Condensed', arial, sans;
     width: 500px;
     padding: 30px;
     background: #FFFFFF;
     margin: 50px auto;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

 }
 .form-style-8 h2{
     background: #4D4D4D;
     text-transform: uppercase;
     font-family: 'Open Sans Condensed', sans-serif;
     color: #797979;
     font-size: 18px;
     font-weight: 100;
     padding: 20px;
     margin: -30px -30px 30px -30px;
 }
 .form-style-8 input[type="text"],
 .form-style-8 textarea,
 .form-style-8 select
 {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     outline: none;
     display: block;
     width: 100%;
     padding: 7px;
     border: none;
     border-bottom: 1px solid #ddd;
     background: transparent;
     margin-bottom: 10px;
     font: 16px Arial, Helvetica, sans-serif;
     height: 45px;
 }
 .form-style-8 textarea{
     resize:none;
     overflow: hidden;
 }
 .form-style-8 input[type="button"],
 .form-style-8 input[type="submit"]{
     -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     box-shadow: inset 0px 1px 0px 0px #45D6D6;
     background-color: #2CBBBB;
     border: 1px solid #27A0A0;
     display: inline-block;
     cursor: pointer;
     color: #FFFFFF;
     font-family: 'Open Sans Condensed', sans-serif;
     font-size: 14px;
     padding: 8px 18px;
     text-decoration: none;
     text-transform: uppercase;
 }
 .form-style-8 input[type="button"]:hover,
 .form-style-8 input[type="submit"]:hover {
     background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
     background-color:#34CACA;
 }
 </style>

So now we have nice website.

Here is full code:

<html>
<head><title>Transfer STEEM/SBD using Steem.js</title>
<script src="./steem.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
 <style type="text/css">
 .form-style-8{
     font-family: 'Open Sans Condensed', arial, sans;
     width: 500px;
     padding: 30px;
     background: #FFFFFF;
     margin: 50px auto;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
     -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

 }
 .form-style-8 h2{
     background: #4D4D4D;
     text-transform: uppercase;
     font-family: 'Open Sans Condensed', sans-serif;
     color: #797979;
     font-size: 18px;
     font-weight: 100;
     padding: 20px;
     margin: -30px -30px 30px -30px;
 }
 .form-style-8 input[type="text"],
 .form-style-8 textarea,
 .form-style-8 select
 {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     outline: none;
     display: block;
     width: 100%;
     padding: 7px;
     border: none;
     border-bottom: 1px solid #ddd;
     background: transparent;
     margin-bottom: 10px;
     font: 16px Arial, Helvetica, sans-serif;
     height: 45px;
 }
 .form-style-8 textarea{
     resize:none;
     overflow: hidden;
 }
 .form-style-8 input[type="button"],
 .form-style-8 input[type="submit"]{
     -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
     box-shadow: inset 0px 1px 0px 0px #45D6D6;
     background-color: #2CBBBB;
     border: 1px solid #27A0A0;
     display: inline-block;
     cursor: pointer;
     color: #FFFFFF;
     font-family: 'Open Sans Condensed', sans-serif;
     font-size: 14px;
     padding: 8px 18px;
     text-decoration: none;
     text-transform: uppercase;
 }
 .form-style-8 input[type="button"]:hover,
 .form-style-8 input[type="submit"]:hover {
     background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
     background-color:#34CACA;
 }
 </style>
</head>
<body>
<div class="form-style-8">
  <h2><center>Voter</center></h2>
  <form>
<input id='wif' type='text' placeholder="WIF"></input>
<input id='from' type='text' placeholder="From"></input>
<input id='to' type='text' placeholder="To"></input>
<input id='amount' type='text' placeholder="amount"></input>
<input id='memo' type='text' placeholder="Memo"></input>

<input type="button" value="Transfer" id='button' onclick='transfer()'  />
</form>
</div>
<script>
function transfer(){
const wif= document.getElementById('wif').value;
const from= (document.getElementById('from').value;
const to= document.getElementById('to').value;
conts amount = document.getElementById('amount').value;
conts memo= document.getElementById('memo').value;

steem.broadcast.transfer(wif, from, to, amount, memo, function(err, result) {
 console.log(err, result);
});
}
</script>
</body>
</html>

Let's test it:
This is our website:

And result...

If you have any problems, check if:

You have valid symbol: SBD and STEEM
You have ONLY one space between amount and symbol.
You need 3 decimal places (0.001 / 1.000 / 0.100)

If you have any questions, ask in comments.
You can found full code on my GitHub.

My other Steem.js posts

How To Vote From Steem.js JavaScript Library

Proof of Work Done

https://github.com/fbslo/Steem.js

#tutorials #javascript #steemjs #teamslovenia

6 years ago in #utopian-io by fbslo (70)

$187.39

Sort:

Trending

[-]

utopian-io (71) 6 years ago

Hey @fbslo
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

$0.44

[-]

fbslo (70) 6 years ago

Thank you @utopian-io :)

$0.03

[-]

transparencybot (-9)(1) 6 years ago

This post has received votes totaling more than $50.00 from the following pay for vote services:

appreciator upvote in the amount of $51.58 STU, $65.16 USD.

For a total calculated value of $52 STU, $65 USD before curation, with a calculated curation of $13 USD.

This information is being presented in the interest of transparency on our platform and is by no means a judgement as to the quality of this post.

$0.00

[-]

boostme (48) 6 years ago

You got a 100.00% upvote from @boostme courtesy of @fbslo!
^{If you like this service, please vote @fbslo for Steem Witness!}

$0.00

[-]

chireerocks (72) 6 years ago

I am not an developer or tech guy but after watching the title as transfer of Steem/SBD and try to watch it and in my opinion good to know that it's an testing one, and also great to know that developers are trying hard to create the secure stuff and that's inturn showcase the strength because on Steem every category people like Invetors, developers, bloggers and curators can interact and can know the development updates. Thanks for sharing this post with us and wishing you an great day. Stay blessed. 🙂

$0.00

[-]

mrjl (56) 6 years ago

That's awesome. But it is too dificoult for me to use with my programing skills - level 0.

$0.00

[-]

portugalcoin (72) 6 years ago

Thank you for your contribution.
While I liked the content of your contribution, I would still like to extend few advices for your upcoming contributions:

There are parts of the code that have little explanation, try to explain as much as possible.
Enter the professional print screens.
Improve the structure of the tutorial.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]