Actifit.io: Exchange AFIT Tokens For STEEM Upvotes

Repository

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

Introduction

The core theme of this update is relating to introducing a key functionality that kicks off the real life valuation of our AFIT tokens, via permitting users to exchange AFIT tokens for STEEM upvotes.
This update covers this functionality, but also few additional new improvements on the UX and UI on actifit.io

Technology Stack

The website is built using Vue.js.

Work Done:

Commits List:

Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit

Implementing AFIT To STEEM Upvotes Exchange

This new functionality enables the first approach to exchanging AFIT tokens for real value, whereby users will now be able to exchange them for STEEM upvotes.

This was introduced via improving the wallet functionality with a new button for this purpose.

New users aiming to use this functionality will go through a 3 steps process: Setting funds password. Verifying password. Performing the exchange.

Returning users will only need to perform the exchange via providing their funds password.

Set Funds Password

The set funds screen requires the user to either input their own password, or generate one using our Generate Password button. We relied on a the innate Javascript Math.random function to introduce a 22 letter password
for (let i=0;i<multip;i++){
passString += Math.random().toString(36).substr(2, 13);
}

We require the user to provide a confirmation password to ensure they stored their password properly. Once the user provides their password, we rely on our own API to store the password properly, which actually stores an encrypted version of the password.

Set Funds Password Screen

Verify Password

Once the above completed successfully, the user is taken to the next screen relating to verifying the password. We did this as an additional preventive measure to ensure the user is the one initiating the request, but also to store this on the blockchain.

The move to this screen is automated via Vue, whereby the v-if="!userHasFundsPass" returns false, and the alt case with v-else-if="!userFundsPassVerified" would come into play.

The strength of Vue is in the simplicity of those conditions set at the level of the tags.

Now, in order to verify the password, user will need to send out a min of 1 STEEM/SBD, using either the form here, or any other means to the @actifit.exchange account.

Clicking the Send & Verify button will actually open the steemconnect send funds screen relying on default or modified funds data, but also kick off the verification script which will await for the API confirmation of funds received, to confirm the status of the account/password.

Once that is complete, the user will now land automatically on step 3, allowing the AFIT to STEEM exchange.

Verify Password Screen

Exchange AFIT for STEEM Upvotes

This screen will provide the user with 4 different options to exchange AFIT tokens.
Depending on the choice, a relevant API call will be sent out, to schedule the exchange. We did implement a validation both client and server side to ensure user has a minimum of 100 AFIT tokens.
The user will also need to provide their funds password at this screen.

Exchange AFIT Tokens screen

We also call our API userHasPendingTokenSwap/USER to ensure the user has no in-progress token exchange transactions. The purpose of this limit is to prevent huge queues, and ensure users can only submit one in-progress exchange request.
A user having an exchange in place will see a relevant message, including the number of AFIT tokens being exchanged for an upvote.

Exchange In Progress Screen

Implement Editor Thumbnail Detection

This changes enables user of actifit.io, after uploading new images via the editor, to have those images properly refect in the post's JSON metadata, but also to be used as the proper thumbnail images for rendering on any Steem interface.
To implement this, we introduced a new regex function within the saving process, which would detect images in the text, and append them to the meta data

//matching our image markdown pattern
const regex = /!\[(.*?)\]\((.*?)\)/g;
let markdown_imgs = this.body.match(regex);
if (markdown_imgs != null){
for (let mimgct = markdown_imgs.length - 1;mimgct >= 0;mimgct--){
//grab url only
let img_src_url = markdown_imgs[mimgct].substring(markdown_imgs[mimgct].indexOf('(')+1,markdown_imgs[mimgct].indexOf(')'``));
//append at the start if not already part of meta
if (!meta.image.includes(img_src_url)){
meta.image.unshift(img_src_url);
}
}
}

We also needed to implement a cleanup of images tags in case any of them were removed from the text

//cleanup images to remove any ones which could have been removed
for (let i = 0;i < meta.image.length;i++){
if (!this.body.includes(meta.image[i])){
//remove this element
meta.image.splice(i, 1);
i--;
}
}

Various Additional Changes/Fixes

We implemented the following additional changes:

• Fixes issue with report modal, whereby voting modal caused scroll to occur in the background and hence report modal inaccessible.

• Additional general layout fixes.

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