[Development - The Magic Frog] - Added Wallet and Fund Transfer feature

Repository

https://github.com/mktcode/the-magic-frog

The Magic Frog is a unique platform which facilitates collaborative storytelling and rewards authors for their contribution to the story line using community consensus. It uses the Steem blockchain under the hood to generate rewards.

New Features

As part of the task request, We needed to show User's Account Balance and Recent transactions On a separate Page. For this I had to move the then Present User Modal Into a full route Page, and Stream transaction data from the Steem blockchain.

• User Wallet Balance
  To Add the user wallet route, I added the route link to Authenticated Navbar Component, like this

<li class="nav-item"><nuxt-link to="/wallet" class="nav-link">{{ $t('nav.wallet') }}</nuxt-link></li>

And then created the Wallet Page in the Pages directory, which will be rendered when user navigates to the wallet route, as found in this commit .
Now I had to retrieve the User Wallet Balance and Show in the AccountBalance component. For this I used sc2.me() method which returns the required data as Follows :

    login() {
      this.sc2.me((err, user) => {
        if (err) {
          console.log(err);
        } else {
          this.user = user;
        }
      });

• Displaying Transfer History
  To display the transfer history, I retrieved the users transactions using SteemJs and filtered them to get only transfers. and store them in a local array. Then I displayed them In a dynamic table using v-for attribute from Vue.JS. Here is I filtered transactions as from this commit:

  const getTransfers = function (account) {
         return new Promise((resolve, reject) => {
           steem.api.getAccountHistory(account,-1,1000, (err, res) => {
             if (!err) {
               res = res.filter( tx => tx[1].op[0] ==="transfer" )
               res= res.reverse();
               resolve(res);
            } else {
               reject(err);
             }
           });
         });
       };

• Fund Transfer Feature
  To add the Fund transfer feature, I created a transfer Modal, which will take transfer details from the user and generate a hot signing link for transfer with Steemconnect. The url looks like

 transferUrl: function(){  
 return "https://v2.steemconnect.com/sign/transfer?to="+this.reciever+"&amount="+this.amount+"%20"+this.currency+"&memo="+this.memo;
}

After this basic set up, @mkt did a great job completing the wallet and transfer features and making the front end look like what it looks like today. You can see the screenshots below or visit The-Magic-Frog. You can also check out @mkt's post about development update.

Screen Shots

• Account Balance
  

• Transfer History
  

Merged PR

• https://github.com/mktcode/the-magic-frog/pull/5
• https://github.com/mktcode/the-magic-frog/pull/13

GitHub Account

https://github.com/aneilpatel05