Domain Steem with JavaScript: Lesson #5 - Steem Keychain

Salutations, my digitally connected comrades!

An exciting week for the SteemJS challenge, we get to pick and work on a personal project from start to finish, if you would also like to participate or at least take a peek at what's going on you can head over to @alejos7ven - Domain Steem with JavaScript: Lesson #5 - Steem Keychain and check for yourself!

Below you will see my entry for this week! Let's start!

_{Image taken from Pixabay}

• Create a simple app to make transfers using Steem Keychain

---

Where do I even start this, it was a long way until my app finally worked. I started by creating the outline of the code, and by that I mean the following:

• Created the input fields (from/to/amount/memo)
• Created a Toggle button to switch between currencies (SBD/STEEM)
• Created a Transfer button that will run the transfer

Sprinkled some CSS to change it from the ugly Windows 95 theme it had and the app looks like this:

And here is a look with the current HTML and CSS.

------> WARNING!!! Long picture below! <------

Now I started my search for the transfer method for the Steem Keychain extension and got to this place:
https://github.com/MattyIce/steem-keychain/tree/master

The Github repository of Steem Keychain, it's well structured it has guides and examples, you can easily start working with what you get here, I started looking for the transfer method there and found this:

Now let's get to the coding part, first I had to take the value from input fields, from, to, amount and memo, I need these in the transfer method (at this point I completely forgot about the currency, I was set on a STEEM transfer only, I added currency later on) but before that I made a check for the first 3 fields as these are mandatory for a transfer, memo is optional we can leave it empty.

Now in the checking condition it was either one or multiple fields left empty and we throw a console error or we proceed with the transfer, in this case we use the method we found on their github like this:

We verify if the user has the Steem Keychain extension, the extension injects a steem_keychain in all the windows of the browser, so if the user has it, this will pass to the true side of the if statement where we use the method steem_keychain.requestTransfer.

The method takes 5 parameters from, to, amount, memo and currency. With everything mentioned above done I wanted to test it and see where do I have errors (it rarely works from the first run in my case), but for some reason opening the html file and running it didn't work in my case.

I remember seeing in @alejos7ven's post that we need a server, he mentioned Apache so I went straight to their page to download it.
Got it from here: https://httpd.apache.org/docs/current/platform/windows.html#down
Installed it, ran the service, moved my html file inside the server and ran it from there, again it was not working, kept getting an error in the console that said steem_keychain not being recognized. After checking their wiki more I found that the extension works only on the 1337 port.

I had to look for the right file of the Apache config and change the port which was 80 by default to 1337 and this time when I've tried to run it the app worked, the extension was being recognized but the transfer was not really working, this is where I found out that I was missing the currency.

I hardcoded it just to test a transfer, and the transfer went through. To create a changeable toggle button for the currency, so I made this:

Let's see some live examples, in the GIF below you can see both transfers, one with SBD and one with STEEM.

And if we check SteemWorld, we can see the transfers that went through:

• https://steemworld.org/block/92186078/92186078-1
• https://steemworld.org/block/92186082/92186082-1

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

---

So in the lesson 3 I consider my ideas were pretty "stupid", so I want to come with another idea. I was thinking of creating a random winner pick generator that could be used for giveaways/contests where the owner of the post could call the bot with different commands to pick one or multiple random winners. There could be multiple commands from simple to composed ones like this:

• !pick_winner - the bot checks if the person that called the command is the owner of the post, if it's true it gathers all the comment authors except the author and randomly picks a winner that is announced in the comment (doesn't matter how many comments a user made, only 1 entry is being used)

• !pick_winner_multi - same as the above, but each unique comment of a user is used as a change to win (3 comments, the name is added 3 times in t he entries pool)

• !pick_winner_valid "custom word" - where custom word is a custom word that the author replied with to multiple comments and in this case only the comments that received the reply with the custom word will be counted as valid

In this last case the bot could maybe confirm valid entries based on a command, but this might create an issue later on and for this I wanted to ask you @alejos7ven is there a way to tell how many RCs a comment uses? I don't want the bot to stop commenting if a user uses the command because there are no RCs left.

Also if you want to call a winner that you manually picked you could maybe call this bot with something like

• !announce_winner where the bot could come and congratulate the winner and from an array of funny/specific GIFs it comments to the winning entry.

I picked these options because I consider there would be many things to learn from it if I am creating this, (maybe I will go for something bigger once I understand and learn more about this subject) not sure if this is not maybe too much for a weekly challenge as I haven't really worked that much with SteemJS and won't meet the deadline.

Also forgot to ask, do I need some super host to run through all the comments/posts to look for commands? Can you suggest one that you used/still using?

That was it for this challenge, in the end I'd like to invite @r0ssi, @kouba01 and @mojociocio to take part, I've seen some of their work in the previous weeks and I'd like to see their approach here.

Until next time, wishing you a great day!