Domain Steem with JavaScript: Lesson #5 - Steem Keychain

I have made some modifications to the course pensum to be able to include more beneficial ideas for all contestants. This time we will see the Steem Keychain extension a Chromium based extension maintained by the @upvu team and how to integrate it into our applications, with this we would finish the theory of this course and we would develop a final project for Steem. We will see more details of this project in the next lesson, and depending on the quality of this project I will select a winner to finish developing it and put it into production together.

It is an extension for our browser that will serve as a key manager for the Steem Blockchain, making it easier for us to perform operations without the need to copy the keys over and over again. With this extension you can keep your keys saved and use them when you need it, and the one you need without major difficulty.

In this post I will help you install, start and use this extension. You will see that it is a super simple process so we will start installing the extension. To do this, use this link which will redirect you to the Chrome Web Store.

Just click on add to chrome and a light download will begin which will add the extension to your browser.

Once downloaded, click on the puzzle icon to see your current extensions and anchor the SteemKeychain one and always make it visible.

Click on the skewer and your extension will be anchored to the browser, so you can see it along with your other extensions and make use of it. That's how easy the installation is, the next step will be to perform the initial configuration and add our account to the extension.

The first thing we must do is locate the extension icon and click on it to open it.

The first thing we will be asked will be to create a password which will serve to unlock the extension and access your Steem account, I recommend using one different from any of your Steem keys.

In the next step we can add an account, for this tutorial we will use the option USE KEYS/PWD.

Here we must add a username and the active key of said user to import the keys, once placed we import and that's it. To have full functionality we click on the button in the upper right corner.

Here we click on Manage account to see details of the keys added with our current account.

Here we can also add the publication key to be able to perform any type of operation and that's it.

^{* Only public keys were exposed in this post, don't worry.}

The setup of Steem Keychain uses an old post from me, read it here

Let's assume that we have a website with a tool to give votes to other people's publications, in this case to have good practices and avoid compromising the private keys of our users we need a way to transmit the information safely, although we could use the password on the client's side, there is a much more accepted option in the community since you do not have to manually enter any key, you simply have to save them in Keychain, and you through the code can request authorization to perform certain operations with those keys already stored securely in This extension.

We are going to create a simple interface in HTML where we will ask for the link of a post and vote for that publication using Steem Keychain.

The first thing I did was create the HTML structure in the index.html file, I added a simple form with three fields, the link, the weight of the vote, and the user who is going to vote, this user must be added in the extension because the operation will come out of it.

Then in the JavaScript script I created a function to extract the author and the permlink from the URL, I simply separated the URL using the character '/', I turned it over and everything that is in the first part is the permlink, and in the second part the author, from the latter I removed the arroba since it is not necessary.

In the blue part I got the data using JQuery, and I made the necessary conversions, in the case of the weight of the vote it cannot be greater than 100 or less than 0, and once the limits are established this value is multiplied by 100 since it is expressed at the level of the blockchain. I used the function I created previously and obtained the two necessary values from the post we are going to vote on.

In the green part create an arrangement of all the operations that we are going to transmit, the good thing about the extension is that it allows you to make multiple transactions in a single query, in this arrangement you can add all the operations you want as long as they use the same type of key, for example vote and comment.

And finally in the last part we evaluate that the extension is installed, if this is the case we make a request and indicate the type of password we need, if the user is added in the extension everything should be fine.

With the code ready, we open the file preferably on a local server such as Apache so that it can detect the extension correctly, by clicking on the vote button, a popup like the following will open:

First the first Screen will be displayed, there we will confirm that the transaction data is correct and that there is nothing strange, once we have reviewed everything we can proceed to confirm the transaction, in a few seconds we will receive a confirmation message letting us know that it was executed correctly.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form action="" style="display: block;width: 50%;">
        <input type="text" name="link" id="link" placeholder="Paste the post link" style="display: block;width: 100%;"><br><br>
        <input type="number" name="weight" id="weight" min="0" max="100" placeholder="How much % do you want to vote?" style="display: block;width: 100%;"><br><br>
        <input type="text" name="voter" id="voter" placeholder="Enter the account that will vote" style="display: block;width: 100%;"><br><br>
        <sup>* You will vote using Steem Keychain</sup><br>
        <button id="vote" style="display: block;width: 100%;">Vote!</button>
    </form>
    <script src="keychain.js"></script>
</body>
</html>

JS

$("#vote").click(function (e) { 
    e.preventDefault();
    let link = $("#link").val();
    let weight = parseInt($("#weight").val());
    let voter = $("#voter").val();
    if (weight > 100) weight = 100;
    if (weight < 0)   weight = 0; 
    weight = weight * 100;

    let { author, permlink} = extract_author_and_permlink(link);

    let ops = [];
    let vote = [
        "vote", {
            voter:voter,
            author:author,
            permlink:permlink,
            weight:weight
        }
    ];
    ops.push(vote);
    
    if (window.steem_keychain) {
        console.log('Using SteemKeychain');
        steem_keychain.requestBroadcast(voter, ops, 'posting', function (response) {
            console.log(response); 
            if (response.success) {
                alert(`${response.message}`);
            } else {
                alert(`Ops! ${response.message}`);
            }
        }); 
    }else {
        alert('You need install SteemKeychain for this action!');
    } 
});


function extract_author_and_permlink(url) {
    let parts = url.split('/');
    parts.reverse();
    let permlink = parts[0];
    let author = parts[1];
    author = author.replace('@', ''); 
    return { author, permlink };
}

• Create a simple app to make transfers using Steem Keychain [5 PTS] ^{If you are having troubles while setting Steem Keychain, use WhaleVault instead https://chromewebstore.google.com/detail/whalevault/hcoigoaekhfajcoingnngmfjdidhmdon}
• In the lesson 3 you gave ideas about using the method to hear the blockchain. Select one of these ideas to develop a final project. In this task you will only mention which idea you will use, the objective of the project, how it will benefit the community, and the steps that in your mind would serve to develop it successfully. [5 PTS]

Rules

• The content must be #steemexclusive.
• The article must contain the tag #steemjs-s22w5.
• Plagiarism is not allowed.
• The link of your task must be added in the comments of this publication.
• The course will be open for 7 days from 00:00 UTC on January 13. After the deadline, users will be able to continue participating without applying for prizes with the aim of allowing more people in time to take advantage of this content.