[Steemia Pay] - Login Wall, lazy loading, tokenized state, and more changes

Repository

https://github.com/hsynterkr/Steemia-Pay

Pull Requests

https://github.com/hsynterkr/Steemia-Pay/pull/1

What is Steemia Pay?

"Steemia Pay is a simple but convenient mobile application that allows users to receive and send money (in Steem and Steem Dollars) with instant values in their local currency."

Source: https://steemit.com/utopian-io/@hsynterkr/introducing-steemia-pay-steem-payment-app

Changes Made

Lazy Loading

Lazy load modules were added for most of the pages but however, they were not used at all. They were just declared. What I did have I removed the import of the page and added the IonPage decorator for the pages needed it. Also, I had to replace the imports with strings with the name of the page.

So, instead of:

import { TabsPage } from '...'

I only need to use TabsPage as a string without the need of importing it.

Unsubscribe Subscriptions

Each time the app request data from the SteemConnect provider, it creates a subscription to the observable. These subscriptions need to be handle in order to avoid memory leak which can slowdown the application drastically. So, I unsubscribe them after they are used.

Tokenized State

Before, at the main component of the app, the auth state was determined by subscribing to SteemConnect reponse. However, if the internet conection is not fast, the app will take so long showing a white screen until the response is there. To solve this, I determined the active page by querying localstorage to see if the auth token is present. If the token is present, the main page should be shown. Otherwise, show the login page.

Hide Content Until Data Is Loaded

Before, content were partially shown even data is not there. To solve this, I added an if condition to hide the content until the data is loaded. Later on, I may implement skeleton loading to improve user experience.

Edge case for transactions loading

In some cases, depending on the account, transactions loader only shows 1. I added an if condition to determine if the query only loaded 1. If so, re-do the query in order to get more data.

Login Wall

Since this app requires an user to be logged in, it did not make sense to allow the user to see the app without logging in. So, I added the login wall page as the main page if the user is not logged in.

Logout Method

Since I added a login wall, a logout method is necessary in order to terminate the session. When the button is clicked, the user data is cleared and the login page is shown back.

Memo added for each transactions

When you click one of the transactions, the memo is show as an accordion toggle.

Fix package.json app name causing conflicts with the last version of NPM

As the last version of NPM, the app name was causing issues because it did not match the regex check. So, I just modified the name to follow their guidelines.

Visual Changes Made

Center load more button

Add more familiar colors

Smooth transition between tabs

When you change a tab, it used to change without any transition. So, I added one by using CSS so it can show a smooth change between them.

Contributors

If you would like to contribute to Steemia Pay project, feel free to fork Steemia Pay repo and send a pull request.