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:
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