Hiveddit Dev Log #2 - Implementing Hivesigner Auth, Voting, and Other Features

avatar

Post Header (42).png

Hiveddit (https://hiveddit.com) is a personal project where I try to create a Reddit-inspired frontend for Hive.

A few days back, I started developing Hiveddit as a side project and I had a lot of fun! You can read my first post on Hiveddit here. Trying to develop a functional front-end for Hive made me appreciate the people who made Peakd more because I realized that there's a lot of work put in. On my first day of development, I barely got a functional frontend working, so this time I added a bunch of new features!

image 66.png

image.png

Logging in with Hivesigner

I initially wanted Hiveddit to work with the Hive Keychain extension that everyone (including myself) uses, but I realized that it simply wasn't possible without maintaining a server due to how the authentication behind Hive Keychain works. The only other alternative out there was to use Hivesigner, which turned out to be pretty easy to use.

Sending the user to log in was as simple as redirecting them to a Hivesigner page, and I'll get back a token that could be used to broadcast transactions to the Hive chain. However, I did have to make a new Hive account to get things working, so I created @hiveddit.app. It's pretty much an empty account but I may decide to do something with it in the future.

With authentication handled, I could now implement things like getting the user's feed, upvoting, downvoting, and all that jazz.

image.png

Upvoting and Downvoting

image.png

I created these little boxes for upvoting and downvoting, nothing too fancy for now. A problem that I faced when creating these seemingly innocent boxes was the issue of calculating vote value. There was seemingly no easy way to do it and I found myself looking at a 4-year old article to find the solution: https://peakd.com/utopian-io/@mys/sockobot-implementation-of-steem-vote-s-value-calculator

Essentially, the formula seemed to come down to this:

Estimated Vote Value of a User in USD
= (Estimated 1% Vote Value of User) * (VotePercent) * HivePriceUSD
= (VotingPower / 50 * VestingShares) * (VotePercent) * HivePriceUSD

Where did the factor of 50 come from? Beats me, but it seems like this formula does give reasonably accurate vote value estimates. It may be off by a few percentage points, but votes on Hive are pretty volatile anyway due to the changing reward pool and Hive prices.

Mousing over the votes shows you all votes cast on this particular post, with your vote being on top.

image.png

Neat!

I found testing downvoting to be a little more involved since I don't really downvote anyone, so I created my own comment on an old post of mine to downvote. I think it would have been better if I was testing on Hive's test chain, but I wasn't too sure how to go about doing it with a lack of good documentation. Maybe I'll try again next time for more dangerous operations.

image.png

Collapsible Comments

image.png

It's really not that big of a deal, but I've always wanted a comment collapse function on Peakd. Now I get to implement my own.

HiveBuzz Awards

image.png

Reddit has snazzy awards that each post has; what does Hive have? For starters, we have HiveBuzz badges that appear on many posts. I decided to do a little fun feature where all badges awarded on the post would appear at the top of the post, just like Reddit awards.

image.png

Other Fixes and Features

One of the major issues that I faced early on in development was how different Hive-flavored Markdown was. It didn't conform to CommonMark, the official standard for Markdown, nor did it conform to Github-Flavored Markdown. You had people inserting Markdown code within HTML tags like such:

<center>**Bold** Text</center>

and other very peculiar Markdown that you'd only see on Hive. I started off trying to create a parse-and-compile pipeline with Remark but it didn't work well. I ended up copying a large chunk of code from the original HiveBlog frontend (which is thankfully open-source) that showed me just how much custom logic there was in rendering each and every post.

Other than that, I did a bunch of small improvements here and there, but they aren't anything too amazing. You can check them out on Hiveddit yourself!

image.png

What's Next?

Next on my list of features to include on Hiveddit would be:

  • Implementing community/tag pages
  • Profile view
  • Wallet view
  • Ability to make comments

If you'd like to follow Hiveddit's progress, do consider following me. I'd like to hear your thoughts on what you think about Hiveddit too if you've given it a little try. Until next time!


Previous Hiveddit Posts

  1. Introducing Hiveddit


0
0
0.000
4 comments
avatar

Cool project and branding name, wish you to get it to fruition!

0
0
0.000
avatar

I know this is an old post, but I just ran across Hiveddit because I had a similar thought about how it would be a good idea. Great minds think alike! Are you still working on it? I think you should! It looks great so far.

0
0
0.000