TUTORIAL - Create a Steem Browser Extension - JavaScript - Basic - Part 10

What Will I Learn?

This Tutorial Series is all about how to create a browser extension showing steem account data. We want to focus in this part how to get all latest posts of an account and calculate their pending payout value.

Requirements

• Read my previous part

Difficulty

• Basic

Tutorial Contents

I will split this tutorial in three components:

1. Get the last 100 posts of an user
2. Filter and receive only pending payout posts
3. Calculate pending payout value and output it

Get the last 100 posts

To get the last posts of a user we will use the API function called steem.api.getDiscussionsByBlog({tag: username, limit: 100}, function(err, posts) {...}. It responds with the latest posts (amount = limit) for the given user (username).
Lets create a new function using this API call

function calculatePendingPayout() {
    steem.api.getDiscussionsByBlog({tag: username, limit: 100}, function(err, posts) {
        console.log(posts);
    });
}

And call the function before we call the votingpower / steempower functions.

        calculatePendingPayout();
        setSteemPower(userData);
        setVotingPower(userData);

Run the extension and check the output

All posts are ordered descending. We take as a limit 100 posts since it would be unusual an account posts more than 11 posts per day.

Filter and receive only pending payout posts

If you look inside the output and look inside the data of a post a property should take your interest - cashout_time. This values indicates wether a post already cashed out or will cashout in future. If a post is already cashed out the value / date will be the reseted to the default date value 1969-12-31T23:59:59. It's a big win for us, since we now a cashout will never happen in the year 1969 !

We use this information to create filter which returns all posts where the year is not 1969 !

steem.api.getDiscussionsByBlog({tag: username, limit: 100}, function(err, posts) {
        var pendingPosts = posts.filter(post => new Date(post.cashout_time).getFullYear() !== 1969);

        console.log(pendingPosts);
});

Try it out and you will only receive the posts which are currently pending!

Calculate pending payout value and output it

Now that we got all the posts we need, we want to calculate their total pending value and display it inside our extension. For that create a new output div inside our index.html

<div id="pending_payout_wrapper">
                <div style='display: inline-block;'>Pending Payout: </div>
                <div style='display: inline-block; float: right' id="pending_payout"></div>
</div>

To calculate the value we simply loop through the pendingPayouts array and take the sum of all pending_payout_value values.

function calculatePendingPayout() {
    steem.api.getDiscussionsByBlog({tag: username, limit: 100}, function(err, posts) {
        var pendingPosts = posts.filter(post => new Date(post.cashout_time).getFullYear() !== 1969);

        var totalPayout = 0;
        pendingPosts.forEach((post) => {
            totalPayout += Number(post.pending_payout_value.replace(' SBD', ''));
        });

        document.getElementById('pending_payout').innerHTML = totalPayout.toFixed(3) + " SBD";
    });
}

Please keep in mind that pending_payout_value is a String and we need to convert it to a valid Number!

Source Code

Curriculum

• Part 1 - Setup
• Part 2 - Reading Data & Designing
• Part 3 - Loading Indicator
• Part 4 - Error Handling
• Part 5 - Button Events and RegEx
• Part 6 - Reputation Calculation
• Part 7 - Steem Power
• Part 8 - Voting Power
• Part 9 - Vote Worth

---

Posted on Utopian.io - Rewarding Open Source Contributors

---