create account

[ Swapsteem Development ] - Added Help Page and other UI Tweaks by bunnybugs

View this thread on: hive.blogpeakd.comecency.com
· @bunnybugs · (edited)
$0.82
[ Swapsteem Development ] - Added Help Page and other UI Tweaks
#### Repository
https://github.com/nirvanaitsolutions/swapsteem

### Bug Fixes
- What was the issue(s)?
Previously, there wasno loader being shown while logging a user in especially with slower connections.
I added a loader when an API call is made for authentication and it looks good now. The UI prevents users from doing any further action while in an async call which was intended.


### New Features
- Added Help Page
SwapSteem is a new product and there was a need for a guide on how to use the platform and stuff. This was raised in [Issue#66](https://github.com/nirvanaitsolutions/swapsteem/issues/66). The content for help page was already available in markdown format in our github repo. I had to convert the markdown to html and present it on the UI in a beautiful way.
There are 4 sections in the help page namely, 
1. How to Buy
2. How to Sell
3. How to Post a Trade
4. FAQ

I used the sections feature to enable users to expand/collapse the section they want to read. You can see the Help page in action in below screenshot and video.

![Screenshot_2019-02-09-10-39-13.png](https://ipfs.busy.org/ipfs/QmQ3pwBeNrzxnyK4vS6uFL9BSagVuYo5YqbyWJuMcfyZzX)


https://youtu.be/13urmy4gg2w

### Related PRs and Commits
- [ Help Component Added ](https://github.com/nirvanaitsolutions/swapsteem/pull/77)
- [ Issue 66 Help Page Added ](https://github.com/nirvanaitsolutions/swapsteem/pull/75)
-  [ FAQ Added In Help Page](https://github.com/nirvanaitsolutions/swapsteem/commit/f139bd0eab919b98e117bae085b70802fac32a49)
-  [Help Page Added IN Header](https://github.com/nirvanaitsolutions/swapsteem/commit/3a5163af2d6d05429fd4e9ebdad4cebbbbc922ce)

#### GitHub Account
https://github.com/bunyy
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorbunnybugs
permlinkswapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449
categoryutopian-io
json_metadata{"app":"busy/2.5.6","format":"markdown","image":["https://ipfs.busy.org/ipfs/QmQ3pwBeNrzxnyK4vS6uFL9BSagVuYo5YqbyWJuMcfyZzX"],"tags":["utopian-io","development","swapsteem","steemdev"],"users":[],"links":["https://github.com/nirvanaitsolutions/swapsteem","https://github.com/nirvanaitsolutions/swapsteem/issues/66","https://github.com/nirvanaitsolutions/swapsteem/pull/77","https://github.com/nirvanaitsolutions/swapsteem/pull/75","https://github.com/nirvanaitsolutions/swapsteem/commit/f139bd0eab919b98e117bae085b70802fac32a49","https://github.com/nirvanaitsolutions/swapsteem/commit/3a5163af2d6d05429fd4e9ebdad4cebbbbc922ce","https://github.com/bunyy"],"community":"busy"}
created2019-02-08 18:46:30
last_update2019-02-09 05:15:36
depth0
children8
last_payout2019-02-15 18:46:30
cashout_time1969-12-31 23:59:59
total_payout_value0.643 HBD
curator_payout_value0.178 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,694
author_reputation1,318,843,127,511
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries
0.
accountutopian.pay
weight500
max_accepted_payout100,000.000 HBD
percent_hbd10,000
post_id79,584,331
net_rshares1,915,994,141,437
author_curate_reward""
vote details (39)
@amosbastian ·
$14.50
It's cool you guys have added a help page, since I think using Swapsteem could be a little bit daunting if you don't understand things at first. I will be honest and say that I don't think the page looks that great, and could definitely be improved by doing the following:

* Make it less wide - imo the text shouldn't really span the entire width of the page. It makes it more difficult to read, and isn't very aesthetically pleasing. (localbitcoins.com was mentioned as an example in the issue, and as you can see they made it less wide).
* The images are very big and all different sizes. You could try and make all the images a similar size (or at least width) at first, and make it so they can be shown in full by clicking on them for example. Currently it looks a bit inconsistent imo.

Of course there are plenty of other things you can do to improve the page, but I'm bad at design so these are just simple suggestions. As for the commits / post, I'd like to point out a couple of things as well:

* It seems like most of the work is just adding the HTML structure, since the actual content was already written. In that case it's even more important to get the design right, since creating the HTML is the most simple part.
* You linked a pull request, but also a commit in the pull request, which is pretty confusing.


I hope I wasn't too harsh, but I really think first impressions are important, so I'd definitely recommend you try and improve the page. I would like to suggest you try to find someone who is great at designing pages, and get them to create it using Adobe XD for example (and then you can simply copy the design). Good luck!

---

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/2-3-3-2-3-2-4-).

---- 
Need help? Chat with us on [Discord](https://discord.gg/uTyJkNm).

[[utopian-moderator]](https://join.utopian.io/)
πŸ‘  , , , , , , , , , , , , , ,
properties (23)
authoramosbastian
permlinkre-bunnybugs-swapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449-20190209t164336354z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/3/2-3-3-2-3-2-4-","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2019-02-09 16:43:36
last_update2019-02-09 16:43:36
depth1
children2
last_payout2019-02-16 16:43:36
cashout_time1969-12-31 23:59:59
total_payout_value10.957 HBD
curator_payout_value3.538 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,108
author_reputation174,473,586,900,705
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,627,275
net_rshares31,017,159,649,467
author_curate_reward""
vote details (15)
@swapsteem ·
Thanks @amoshastian for the review.

Posted using [Partiko Android](https://steemit.com/@partiko-android)
properties (22)
authorswapsteem
permlinkswapsteem-re-amosbastian-re-bunnybugs-swapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449-20190210t012550682z
categoryutopian-io
json_metadata"{\"app\":\"partiko\",\"client\":\"android\"}"
created2019-02-10 01:25:51
last_update2019-02-10 01:25:51
depth2
children0
last_payout2019-02-17 01:25:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length105
author_reputation34,414,689,038,028
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,643,132
net_rshares0
@utopian-io ·
Thank you for your review, @amosbastian! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-bunnybugs-swapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449-20190209t164336354z-20190212t104032z
categoryutopian-io
json_metadata"{"app": "beem/0.20.17"}"
created2019-02-12 10:40:33
last_update2019-02-12 10:40:33
depth2
children0
last_payout2019-02-19 10:40:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length63
author_reputation152,955,367,999,756
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,762,057
net_rshares0
@introduce.bot ·
$0.05
βœ… Enjoy the vote! For more amazing content, please follow @themadcurator for a chance to receive more free votes!
πŸ‘  , , ,
properties (23)
authorintroduce.bot
permlinkintroduce-bot-re-bunnybugsswapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449
categoryutopian-io
json_metadata""
created2019-02-08 19:01:45
last_update2019-02-08 19:01:45
depth1
children0
last_payout2019-02-15 19:01:45
cashout_time1969-12-31 23:59:59
total_payout_value0.039 HBD
curator_payout_value0.012 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length113
author_reputation20,568,707,332,317
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,584,837
net_rshares111,863,887,981
author_curate_reward""
vote details (4)
@partiko ·
Hello @bunnybugs! This is a friendly reminder that you have 3000 Partiko Points unclaimed in your Partiko account!

Partiko is a fast and beautiful mobile app for Steem, and it’s the most popular Steem mobile app out there! Download Partiko using the link below and login using SteemConnect to claim your 3000 Partiko points! You can easily convert them into Steem token!

https://partiko.app/referral/partiko

![](https://d1vof77qrk4l5q.cloudfront.net/statics/partiko-poster-best-steem-app-for-your-phone.jpg)
properties (22)
authorpartiko
permlinkpartiko-re-bunnybugs-swapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449-20190226t141939200z
categoryutopian-io
json_metadata{"app":"partiko"}
created2019-02-26 14:19:39
last_update2019-02-26 14:19:39
depth1
children0
last_payout2019-03-05 14:19:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length510
author_reputation39,207,160,334,751
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,441,628
net_rshares0
@steem-ua ·
#### Hi @bunnybugs!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (22)
authorsteem-ua
permlinkre-swapsteem-development-added-help-page-and-other-ui-tweaks-1549651590449-20190210t001953z
categoryutopian-io
json_metadata"{"app": "beem/0.20.18"}"
created2019-02-10 00:19:54
last_update2019-02-10 00:19:54
depth1
children0
last_payout2019-02-17 00:19:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length288
author_reputation23,214,230,978,060
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,641,320
net_rshares0
@steemitboard ·
Congratulations @bunnybugs! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@bunnybugs/voted.png?201902110806</td><td>You received more than 100 upvotes. Your next target is to reach 250 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board](https://steemitboard.com/@bunnybugs)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-bunnybugs-20190211t173605000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-02-11 17:36:03
last_update2019-02-11 17:36:03
depth1
children0
last_payout2019-02-18 17:36:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length752
author_reputation38,975,615,169,260
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id79,723,795
net_rshares0
@steemitboard ·
Congratulations @bunnybugs! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@bunnybugs/birthday1.png</td><td>Happy Birthday! - You are on the Steem blockchain for 1 year!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@bunnybugs) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=bunnybugs)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-bunnybugs-20200120t072333000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2020-01-20 07:23:33
last_update2020-01-20 07:23:33
depth1
children0
last_payout2020-01-27 07:23:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length623
author_reputation38,975,615,169,260
root_title"[ Swapsteem Development ] - Added Help Page and other UI Tweaks"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id94,569,386
net_rshares0