Domain Steem with JavaScript: Lesson #5 - Steem Keychain
Hello everyone! Today I am here to participate in the Domain Steem with JavaScript course by @alejos7ven. It is about learning the Steem Keychain/WhaleVault. If you want to join then:
Create a simple app to make transfers using Steem Keychain
It is really an interesting task to make an application which can interact with the Steem Keychain or WhaleVault to make the transfers. I have used Steem Keychain for long time for the transactions and it is very easy to use to manage and maintain the transactions. But currently Steem Keychain is no longer available to install it again and use it. So I will use WhaleVault to perform this task.
In order to download WhaleVault I followed the download link given by the professor. If you want to download WhaleVault then follow this link. It will directly send you towards the download and installation page. Simply click on the Add to chrome button and it will be downloaded and then it will be added to the extensions.
Now in order to use this extension in the application we need to setup this extension by giving the credentials in the extension such as our correct username and keys and we will manage it by a custom password which we can set according to our desire.
 |  |
|---|---|
| After the installation this is the first interface we get for the WhaleVault. In this we have to give our custom password which will be used to unlock this extension if it gets lock. It will work just like a screen password for our mobile or laptop. Enter your password and confirm the password and then you will be able to enter for the next functionality. | This is the next interface which we get right after entering our custom password. Here we can see different options such as add account, manage account, notifications settings and remove account etc. As it is a first time so we have to add our account first so that we can use it for our application just like Steem Keychain. |
 | In this interface we need to select the blockchain in our case we will select Steem (stm). Then we need to give our steemit username. Then enter your private active key because it will be used for the transfers transactions. And posting key which is used for the social activities. And at the end it is the memo key. Then click on import keys and it will import all the keys. In this way the account will be added. |
 | Here you can see my wallet is operational. I tested it on steemitwallet as well as in the steemit. I performed transactions and these are visible. It means now I can use it for my custom transfer application. |
Now let us move towards the creation of the transfer application which will be used to perform the operations by using WhaleVault.
This is the header setup for the application. In this I have imported Jquery and WhaleVault and I have linked a stylesheet which enhances the visibility of the application.
This is the HTML code which is building the structure of the application. At the top there is a heading and then I have used a form because I need to get some values from the input fields like a form. In this body and structure of the application I have used 4 labels for the user friendliness interface.
Then there are 3 input fields for the following work:
- Recipient name
- Amount of the tokens
- Memo
I have used a drop down list which holds STEEM and SBD. The user can select whether to send STEEM or SBD. Because in the steem blockchain we have two native tokens.
At the end there is a submit button which is used to perform the transfer functionality. When we click on this button then it send request to the extension which is manage in the javascript code.
Here is the javascript code of this application which makes it dynamic and working. It handles all the inputs from the user. I have defined my username in the application already and it gets the receiver name as an input from the user.
This code handles the amount of the tokens and the memo key. It receives all the data from the user input and then send it as a send request transaction towards the WhaleVault extension which receives this request and as a response it is opened and it requires confirmation from us.
I have managed the availability of the of the extension as well because if it is not installed or not detected correctly then this application will not work. So the application detects the extension and if it is not installed then it informs to install the extension as a pop up.
I have managed the application button that when I click the transfer button then it should generate the transaction information with given inputs and if I cancel the transaction from the extension then it displays a pop up notification that the user has cancel the transaction and the button becomes visible again.
Let us test the functionality of the application if it transfer the exact amount of tokens to the exact given receiver or not.
Before using it I want to share the balance of the account where I will perform the transaction. Here you can see the amount of steem tokens is 0.000.
Here you can see the SBD balance in this account. I will make transfer in the testing account @testingac.
In this video you can see I have used this application. I have given the correct username of the testing account and then I have written the amount of tokens after this I added the memo of the transaction and after that I selected STEEM from the options and as soon as I clicked the transfer button the extension received the send request and it showed the information about the transaction including the memo.
It showed that this transaction requires private active key. I clicked on the confirm button and the transaction was confirmed and the amount of STEEM tokens were transferred to the receiver. Similarly I performed the same transaction for the SBD transfer.
Moreover if I cancel the transaction then the application informs me like this that the user cancelled the transaction.
This is the transaction detail of the STEEM transfer.
This is the transaction detail of the SBD transfer.
Final Project Idea
I discussed around 10 different ideas to hear the blockchain. From all those ideas I am selecting an idea to develop a Real-Time Analytics Dashboard that tracks and displays dynamic blockchain activity such as active accounts, trending tags, high-value transactions and other real-time insights into the Steem blockchain. Here is the complete detail and the reason for selecting this idea as the final project.
Benefits to the Community:
- Provides valuable insights to community managers, data analysts, and blockchain enthusiasts.
- Allows users to comprehend the hot topics who the key players are and engagement patterns in real-time.
- Enhances decision-making for creating content, marketing and engaging the community.
- Promotes transparency and earns trust by exposing real-time blockchain metrics.
Steps to Develop the Project
Here are the steps to develop the project:
Requirement Gathering & Planning
- Identification of which metrics to show, such as most active accounts, top tags, or high-value transactions.
- Defining user personas community managers, analysts, and casual users. Plan of UI/UX for the dashboard to be intuitive and clear.
Set Up Your Development Environment
- Pick an appropriate tech stack, e.g., Node.js for backend React.js for frontend.
- Use of Steem blockchain API or stream operations for live data access.
Stream Operations Integration
- Use of the
streamOperationsto capture operation types relevant for the application like votes, comments and transfers. - Parsing and processing the data to filter and aggregate useful insights.
- Use of the
Database for Historical Data -
- Store key metrics in a database such as in MongoDB or PostgreSQL to compare historical trends.
- Implementation of efficient indexing for fast data retrieval and real-time updates.
Real-Time Data Processing
- Use of WebSocket or polling mechanisms for fetching and pushing live updates on the dashboard.
- Calculation of statistics dynamically for example trending tags or busiest accounts as part of the backend logic.
Front-End Development
- Build a responsive UI for real-time charts, graphs and data tables.
- Include libraries like Chart.js or D3.js to visualize blockchain activity.
User Interaction Features
- Include search and filter functionality to allow users to customize what they see.
- Include export functionality to allow users to download reports in CSV, JSON, etc.
Testing & Optimization
- Test the system using real blockchain data for correctness and performance.
- Optimize the backend to process large-scale operations and data.
Deployment & Community Feedback
- Host your application on the cloud using platforms such as AWS or Azure.
- People in the community should be able to see the dashboard, collect some feedback and iterate on what can be improved.
This Real-Time Analytics Dashboard is going to empower the Steem community to embrace transparency, good decision-making and higher interaction with blockchain data.