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, 
Screen Shots
Account Balance
Transfer History
