Adding Post Payout Breakdowns in Steemit

Link to pull request.

This is in some sense a continuation of my previous post about a small contribution to Steemit, which was rejected as a development contribution, but in my view is a combination of bug hunting and suggestion. But no matter, in this post I am at it again, this time covering the implementation of my suggestion, which I had done over the last weekend.

Payout Breakdown

Knowing how the payout works from the Steem blockchain, I wanted to provide a little more information in the UI to display the breakdown in terms of estimated SBD and STEEM POWER to be received on payout. What I have is not perfect, but a slight improvement over what exists now.

1. For pending payouts and past payouts, it now shows (X SBD, Y SP) below the $Z amount of payout.
2. It takes into account whether or not 50/50 option or 100% SP option was selected.
3. It uses current price feed, so past payouts will not necessarily show the correct amount of SP, but SBD will be correct.
4. Curation and Beneficiaries are not accounted for in pending payouts. That requires a lot more changes to handle properly.

Here are two screenshots that show this in action.

This one shows the pending payout change.

This one shows how it looks after payout.

Change Details

A diff can be viewed here.
There are two parts to this change.

The first is to make the feed price available to the voting component which shows information when you click the payout number. That's in line 525, and actually is ripped out of the UserWallet.jsx. I will pull this into a common utility soon to promote its reuse next chance I get.

The second part is the computation itself. I've walked through this before here, as well as here, so it was a matter of cranking out the formula, which you'll see on line 279.

Another point of note is the percent_steem_dollars parameter, which is 10000 for the 50/50 option and 0 for the 100 SP option. (Percentage multiplied by 100). This can be found out here and here.

Finally, adding the hint to the card itself is done in line 320 for the pending payout and line 359 for post payout. The way it is done here makes it so it does not need anything placed in all the individual localization files, and is done in a manner consistent with how the display works in the user wallet.

Testing

These changes were tested locally, on my posts as well as a post that was set to 100% power up, and on one that was past payout.

Appealing the One Commit Rule for Utopian Development Contributions

To the utopian moderator: this may be considered as both a suggestion as well as implementation. Keeping in mind rewards that have been given to utopian posts suggesting improvements to the UI about the payouts, as a developer I've also implemented such a thing. Please take that into consideration. Thanks!

Further Thoughts

I'm excited to be able to make this change that I've been thinking about for awhile, and hope it will be available in the next future. It turned out to be much easier than I was thinking it would be. Yes, plenty of other tools show your post breakdowns, but it will be nice to see it quickly by clicking your post amount.

I'll see about further improvements that can be made to this as well. I'm also soon to work on a small tutorial to get your own UI deployed to a cloud service like vultr.com, as suggested by @twodollars. Until next time, cheers!

Updates

I did not realize just how fast it got rolled out, and I see posts about it in various places now, and that feels great! Happy to do what I can.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---