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.