Actifit.io Website Development Updates

Repository

https://github.com/actifit/actifit-landingpage

Introduction

This development round includes some major improvements and new functionality to actifit.io, with the core theme being enabling STEEM wallet info and transactions via actifit.io, as well as few other modifications and fixes.

Technology Stack

The website is built using Vue.js.

Work Done:

Wallet Changes:

Commit Link
Commit Link
Commit Link
Commit Link
Commit Link
Commit Link

• We have modified the existing wallet page to accommodate the display of the STEEM balance info, in addition to the existing AFIT tokens balance. The new display goes generally as follows:
  
  This required relying on the user data as returned by Steemconnect, our standard approach to fetching data on actifit.io, to grab information such as user.account.balance, user.account.vesting_shares, user.account.sbd_balance.

• Add to that, we enabled an implementation of fund transfer directly from actifit.io, also relying on steemconnect implementation. For this purpose, we created our onpage form, enabling data entry with validation, upon the success of which will lead to a new steemconnect window with proper params (relying on the steemconnect.sign operation with transfer as first param) to enable signing the transaction and propagating to the blockchain.

• Similarly we also implemented a display of claimable rewards on the same wallet page, so as Actifit users are able to claim their STEEM/SP/SBD rewards on the spot, of which they might not be aware.
  We intended to perform the actual claim action using built in steemconnect function claimRewardBalance, but unfortunately this function kept returning an sc2-sdk error, which led us to resort to the sign method, similarly to how we implemented transfers above, with the first param being claim-reward-balance.
  Here is the actual signing transaction code
  var link = this.$steemconnect.sign('claim-reward-balance', { account: this.user.account.name, reward_steem: this.claimSTEEM, reward_sbd: this.claimSBD, reward_vests: this.claimVests, }, window.location.origin + '/wallet');

The singing function also features a redirect param, which we used to redirect the user back to the wallet page, if he so wishes on the new tab/window.

Various Additional Changes/Fixes

Commit Link
Commit Link
Commit Link
Commit Link
Commit Link
Commit Link
Commit Link
Commit Link
Commit Link

• This involved several visual layout fixes, text, images, charity info display, issues with user data loading and others. Sample below showing the new charity info display on activity screen
  

Roadmap

Further continuous improvements will be done on the actifit website, including a potential revamp of the main page content, adding some additional content pages, a complete fitness profile page, more user rank screens...

How to contribute?

You can chat to us on the official actifit discord, or to me in discord private @mcfarhat#6013.
Contributions are accepted as pull requests to the official github repo.
We are having continuous tasks assigned to different contributors to our project. More official tasks are continuously announced :)

GitHub Account

https://github.com/mcfarhat