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

in utopian-io •  3 months ago

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

Repository

https://github.com/steemit/steem-js

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

Proof of Work Done

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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!

·

Thank you @utopian-io :)

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. 🙂

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

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]

sneaky-ninja-sword-xs.jpg
Sneaky Ninja Attack! You have just been defended with a 35.45% upvote!
I was summoned by @fbslo. I have done their bidding and now I will vanish...

woosh
A portion of the proceeds from your bid was used in support of youarehope and tarc.

Abuse Policy
Rules
How to use Sneaky Ninja
How it works
Victim of grumpycat?