Repository

https://github.com/mktcode/the-magic-frog

This update is about the new, most simple and basic wallet integration on the website and some other minor changes. All changes happened within the last 24 hours.

Wallet Integration

I published a Utopian Task Request some time ago and found someone who got things going but unfortunately got stuck with some details and while trying to help I accidentally got the job done. (Don't worry, you'll still get a bounty!)

Since this whole project is targeted at an audience outside of the Steem sphere, I didn't want to bother anyone with STEEM POWER and savings and other transactions than transfers in the history. The simplicity of the integration fits the project and made my life easier for now. Don't expect to much. It's just what the project needs and nothing more.

Everything is already online right now and translated into German and French, the two localized versions we have so far.

Account Balance

The wallet page shows your current STEEM and SBD balance and the estimated value in USD, based on prices from coinmarketcap.com.

STEEM: https://api.coinmarketcap.com/v2/ticker/1230/
SBD: https://api.coinmarketcap.com/v2/ticker/1312/

Code:
https://github.com/mktcode/the-magic-frog/blob/master/components/AccountBalance.vue#L30

Transfer Dialogue

To enable users to send STEEM/SBD there's a transfer dialogue that simply redirects to SteemConnect. First I wanted to implement all this myself but... well.. why reinvent the wheel?
(Good idea @aneilpatel!)

Code:
https://github.com/mktcode/the-magic-frog/blob/master/components/modals/TransferModal.vue

Transfer History

I'm not entirely happy with this. If you use steem.js to read the account history from a user you get all the transactions, including votes, comments, delegations, everything, just as you'd expect. Unfortunately there's no way to get an already filtered result. Of course you can simply filter out the unwanted operations but this makes pagination complicated. So I decided to fetch the first 10k transactions, filter them and then simply put a "Load more" button in the end, which will fetch the next 10k transactions and filter them again. This of course means that the actual transfers result set is always of different size but I decided... I don't care!

Code:
https://github.com/mktcode/the-magic-frog/blob/master/components/TransferHistory.vue

Redirect After Logout On Wallet Page

Here I could need a little help. The wallet page should ideally only be accessible when the user is logged in. If he's not, than the wallet link does not appear in the menu but the page is accessible via its URL and if you are logged in and go to the wallet page and then log out, you're still there of course but you won't see anything anymore. I implemented a redirect after the logout to force the user to leave the wallet page but... it's definitely not an optimal solution. If you know how to handle this properly, lead me into the right direction please. Otherwise I will search the docs myself at some point, but not now.

Code:
https://github.com/mktcode/the-magic-frog/commit/0e62f4cc96d76a0311acc6beba8efcf817380489

Reduced Code Duplication

This bugged me since day one. SteemConnect was integrated in a very lazy way, which had a lot to do with me being unexperienced with Vue.js... I still am but at least I found a proper way to avoid copy-pasting the same code on each page.

This is what it looked like before:
https://github.com/mktcode/the-magic-frog/blob/9bc0f00404aa34834ef516f9453674fcb918e35c/pages/index.vue#L219
(On every page!)

First I tried to write a Vue.js plugin for SteemConnect but to be honest... I couldn't make it work, not even after several approaches, not in a reasonable amount of time. I still don't fully understand how plugins in Vue.js work internally and how to use them to their full potential. I know that at some point it will finally click but for now I found a simpler solution that does the job. Mixins!

Code:
https://github.com/mktcode/the-magic-frog/commit/bafc7c332fe69392a8f70b0aaecb5439b60c4d5f

Use API In Update Method

After submitting a suggestion or voting on other's submissions, the data get's updated.
This method now also makes use of the API.

Code:
https://github.com/mktcode/the-magic-frog/commit/ea3e759cc4edc9181d6f00cf6ef3cc7c5a4311f0

Updated Translations

@helo is very active and helps me a lot with everything, especially localisation. He recently added some missing translation strings and I translated them to German. Not really development but well...

Code:
https://github.com/mktcode/the-magic-frog/commit/9c9633a88caa6989607b331f1d64545fef8fe723
https://github.com/mktcode/the-magic-frog/commit/63457e9084ff73e8d0784c8af918b6965621651a

Reorganized Modals

Before I had all the modals on the page in one file. Now there's a file for each modal, making everything a bit more clean and structured.

Code:
https://github.com/mktcode/the-magic-frog/commit/599cb3aa4cc198333fe20af6a06986c8934f992e

Updated Footer

Last but not least, the footer now reflects a little bit better how much I love the project and it shows aaaall the maintainers of the project... @helo and me currently. If you want to reserve a place in that list, get in touch with me. You need to be the maintainer of a local version of The Magic Frog!

Code:
https://github.com/mktcode/the-magic-frog/commit/932bdca200565167f75c9fefa7fb31066ac41061

Roadmap

*sighs* Well... there's so much on the list. At least I can now remove the wallet integration from it. Yeah!

The next big steps will be the following.

Guest Users

Account creation is an issue on the Steem blockchain. You need money to allow your project to onboard new users. I don't have money. Looking at the market prices I must say... honestly... I REALLY DON'T HAVE MONEY. I live from Steem entirely and this situation makes me a bit nervous but ok... different story.

Ultimately I hope that the project will pay for itself and for new accounts to be created. There certainly are ideas for that but for now I think I will just enable users to participate via a guest account that is automatically used when not logged in. Something like that.

The goal is to be finally able to promote the project outside of Steem!

Delegator Rewards

This project desperately needs delegations from people. The more SP the different frog accounts can use, the bigger the rewards, the more activity, the more attractive for people from outside the Steem Blockchain.

We already show delegators as sponsors in the Hall of Fame but this is of course not enough. I didn't expect anyone to think "Oh wow, NOW I will delegate all I have to this cute little frog!" but it was a first step. The next step is to actually involve delegators in the rewards that are being distributed. To make it even a little bit exciting for them, I am considering to simple reserve a share of the story pots for them. So like everybody else, they get their money whenever a story ends.

Get in touch

If you want to get in touch with me and other community members, the preferred way is now our discord. There's not much going on there yet but I'm sure this will change over time. We need creative minds! If you are one, join!

Stay tuned! Happy storytelling!

_Visit:
the-magic-frog.com
de.the-magic-frog.com
fr.the-magic-frog.com