(Want to use the logo yourself? no problem, checkout the post I made about My Art Design - Hive Logo)

Repository:

https://www.npmjs.com/package/steem-js-patched

Requirements

SteemJS CDN [https://cdn.steemjs.com/lib/latest/steem.min.js]

Helpful tutorials:

[HIVE Patched] SteemJS Full Tutorial - All The Functions - All The Abilities
[Hive Patched Tutorial] SteemJS - Vote, Comment and Follow functions - All In One

All of this tutorial is patched for Hive, so it works for Hive and steem!

All of the examples and results is from the old tutorial but still same for hive!

Hello guys, welcome back to my steemjs(HIVE) tutorials, hope you're having a wonderful day.
At this tutorial, you will need nothing, just the CDN of steem and nothing apart from that.
you can find the CDN up at the Requirements section above

First, create an HTML 5 file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Delegation</title>
</head>
<body>
    
</body>
</html>

this is a basic skeleton of HTML 5 file.

now import the CDN of steemjs and JQuery so it will be easier to interact with inputs.
go to the bottom of the body and enter the CDNs

<script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
        crossorigin="anonymous"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>

And create a new script tag with jquery working and add the Hive API to use Hive and not STEEM

<script>
$(document).ready(function(){
steem.api.setOptions({ url: 'https://api.hive.blog' });

});
</script>

Great, now we need to create 4 inputs and 1 Button
so, first will be the delegator name
the second will be the delegatee (the account gets the delegation) name
the Active WIF Key
the SP Amount

<h3>STEEM Delegation Tool</h3>
<span class="message"></span><br>
<input type="text" placeholder="Account Name..." id="accname" /><br>
<input type="text" placeholder="Delegate To..." id="delegatee" /><br>
<input type="password" placeholder="Active WIF Key..." id="wifkey" /><br>
<input type="number" min="0.1" max="1000000" value="1000.00" id="hp" /><br>
<button id="sendDelegation" id="sendDelegation">Send Delegation</button>

Great we all set with the HTML, you don't need anything else.
the span is to update the message and say that the delegation sent so we don't use the console to check it!

now go back to JQuery and create 4 vars for the inputs

var account = $("#accname").val();
var delegatee = $("#delegatee").val();
var wif = $("#wifkey").val();
var hp = $("#hp").val();

.val()- this function gets the value of the input.
so we have now the information, we can check if the user clicked on the button and send the delegation.

$("#sendDelegation").click(function(){
    $(".message").html("");
});

so if we click firstly we will clear the message span so if the user already sent a delegation and wanted to send again it will not be stuck.

now we need to get the global properties to calculate how much SP = Vests because we can only delegate Vests and not directly SP.
SP is a number we can read and know how much is worth and Vests is the "hidden number" that we don't know how much is worth.

steem.api.getDynamicGlobalProperties(function(err, result){
    const totalHive = Number(result.total_vesting_fund_steem.split(' ')[0]);
    const totalVests = Number(result.total_vesting_shares.split(' ')[0]);
    const delegated_HP = hp;
    var delegated_vest = delegated_SP * totalVests / totalHive;
    delegated_vest=delegated_vest.toFixed(6);
    delegated_vest=delegated_vest.toString()+' VESTS';
});

great now we transfer the value of SP to vests!
the calculation is kinda hard so I don't really can explain to you what we're doing because the calculation is made with properties of the steem blockchain.

now all we need to do is to run the delegate function

steem.broadcast.delegateVestingShares(wif, account, delegatee, delegated_vest, function(err, result) {
    console.log(err, result);
    $(".message").html("Delegation made succesfully!");
});

so pretty easy, we're using the delegateVestingShares function to delegate the SP,
wif is the Active Key,
the account is the delegator,
delegatee is the account gets the delegation,
delegated_vest is the VESTS converted from HP (the amount)
and then we're sending console comment with the error/result
and update the message span.

And here we did, you have a working delegation tool!
just notice you're using correct numbers and names so you don't get errors!

That's it, believe it? really easy one!

Don't forget to leave an upvote and Follow, It's really helpful to continue producing great content with high effort on it!

Notice: this is re-created tutorial that made to STEEM at the source of it, but it works perfectly on hive as well, it's the same code just different API.

You need to use your Private WIF key, not Posting key or Master key, those two will not work!
If you learned something new, I'm happy 😃

[Hive Patched] SteemJS - Simple Delegation Tool (Basic - HTML5 + Javascript)