Hello everyone! I’ve been trying to think of things I can update in my father’s browser extension that would be useful and I’ve come up with several. A lot of what I’ve thought about will take some time to develop, so I will save them for another day, but today I want to knock out one specific thing:

• Displayed Payout Value for articles that have paid out (currently doesn’t include beneficiary rewards)

Currently, the total payout value displayed only includes curation rewards and author rewards in its calculation, and completely disregards beneficiary rewards. This means if a curator clicks onto an author’s account to see their previous rewards, they will see less rewards if the author designates beneficiaries in their articles. My goal today is to fix this. Let’s get started:

Considering Beneficiaries in the Payout

The first step was to clone my dad’s (@remlaps) repository so I can start making my own local changes.

I’m very rusty on this whole project. I made a couple changes last year, but remember very little about the project structure. So I made a new file called payoutDisplay.js and added it to the manifest.json file. Then tested to see if it runs on a page load. It does:

Getting the Values

To fix the underlying problems I will need several values:

• The curation value
• The total value
• The author value
• The beneficiary value

Getting Curation Value

The first thing I have to do, is be able to iterate through every post currently being displayed. Looking at the HTML, I found that there’s a div with the id posts_list. I’m going to have faith that this will generally be the id on containers for posts. There may be special circumstances that I don’t know about where this id isn’t used, but for now I will assume it’s universal. Using this code, I manage to get all of the posts displayed on the page load:

A further problem will present itself when the user scrolls, but for now I will imagine that the user’s scroll wheel is broken. I actually want a list of these unordered list items to iterate through, so I will use the querySelectorAll method of the document, and select all list items which have the posts_list id. Then iterate through, post by post.

Now, I want to make a function that will look at this data, and return the curator payout value, then apply this function as I go.

Within a post’s list Item, I notice that the payout information is contained in a container with the HTML class VerticalMenu . Within this menu, there are typically 4 list items, and the last list item contains the curator payout data in its innerText field.

I could iterate through list items and look for innerText that contains " - Curators " in it, but the problem with this is that if someone is viewing the website in a different language, the extension won’t work. So instead, I’m going to have faith that the last item in the list will always be the Curation payout value, and see if it breaks because of that faith. In the case of the post’s payout being declined, the list will be of length 1 (simply displaying payout declined. Otherwise, there are some cases where there is no list items at all (it’s length 0). We will return null in these cases. If we remain in the function, we can begin to work with the curation value by selecting the last element in the list:

The obvious way to extract the value is to just split the string using the dollar sign, but I realize that many users may not see a dollar sign, but rather see the sign associated with their currency. So instead, I will find the value by making a function that goes through the string characters in reverse order until it hits a currency symbol (a value that isn’t numeric or a decimal symbol):

Now all I need to do is pass the curation value string to this function, and return what it returns:

Getting Total Value

We now have the curation value as well as the local decimal and currency symbols for whenever we decide to display it back to the user. We can use this to calculate a pretty reliable estimate for the total value. Since curators receive 50 percent of the payout, the total payout is just the curation payout doubled.

The calculated payout is very close to what Steemit is currently displaying if there were no beneficiaries on a post. Let’s see what happens if there were beneficiaries on a post:

As you can see, the post is only displaying a payout of $11.61, but it actually paid out $13.80. Curators checking this author’s page will have a false perception of how much the author is making if the author designates beneficiaries on their posts. Eventually, we will change this number, but first, I’d like to get the author and beneficiary values.

Getting Author Value

Getting the author value will be very similar to getting the curator value. We will basically do exactly the same thing, just looking at the second to last item in the vertical menu list instead of the last item:

Just like that, we have all of the author values.

Getting Beneficiary Value

Naturally, the way to get the beneficiary value is to subtract the author value from the curation value, and the result is the beneficiary value, but the author value and curation value are not always exactly the same. They can be off within a couple cents of each other. The way we will account for this is by checking if the resultant value is greater than or equal to 1 percent of the post’s total value. Steemit doesn’t allow authors to give less than 1 percent of a post’s payout to beneficiaries so we know that any beneficiary values worth less than 1 percent of a post’s value are likely to be rounding errors. We will also ignore beneficiary values of less than 1 cent.

Changing Display

Update Total Value Display

First, we will update the value displayed as the post’s total payout value. We can do this using the Voting__pane class which has spans containing either the integer class or the decimal class indicating the section of the number. We will make a function to set these values equal to the integer section of our calculated total value and the decimal portion of our calculated total value:

Add a Beneficiaries section in dropdown

The last thing left to do is display the beneficiary value under the author value so we can see how much of the total value went to beneficiaries. We will need to create a new list item, then attach a span to that list item with the beneficiary value. Then we will insert the list item before the Curators list item:

We can see that this worked, and added the beneficiary value to our display. One drawback is if the user’s display is in a language other than English, the text will be in the wrong language. In the language section, we will fix this.

Make it work on infinite scroll

Adding Mutation Observer

In order to make our code work on posts that aren’t displayed on the initial load, we have to add the function to the mutation observer that already exists for other features in the browser extension:

Now anytime a mutation is observed, the payout value and beneficiary value will be updated.

Updating code

If we aren’t careful, the mutation observer will insert a duplicate beneficiary value for every post every time a mutation is observed. We only want it to do this once so we will use an id and check if it exists before inserting:

We will add a similar check for updating the payout value:

Language Problems

The French

In the process of trying to fix other language problems, I discovered that the French put their currency symbol at the end of the value rather than the beginning. As a result, I updated the code to detect the position of the currency symbol as well (and continue if it’s the first thing the loop views):

Changing Language of Beneficiaries

Lastly, I want to make it so the word beneficiaries is displayed in the language of the user. The first thing I have to do is detect the user’s language. Since this information could be useful for a whole variety of things, I will create a new file called language.js, and include a function for detecting the user’s language:

I will then use the mutation observer in the main file to detect the user’s language when mutations occur, and make the user language a global variable (again so any file can access this if needed):

Lastly, I will make a function in the language file that will return the text for beneficiary in each of the languages that can be viewed on the Steemit website currently. I will also add error handling for if Steemit updates the languages they display:

Conclusion

Thanks for reading this! If you speak one of the languages other than English that Steemit displays in, please let me know if the word I used for "Beneficiaries" is incorrect. The final code is available at this repository. Please comment any suggestions for things you would like to see in the Steem Curation Extension.