Status-react: Add hint / placeholder for empty contacts list so it looks more user friendly

[asemiankevich]

Description

Type: Bug

Summary: we removed Jarrad as a pre-defined contact so contacts list empty now until I add someone. It would be nice to place some hint there saying 'let's add someone easily - just scan the contact code!" or anything that will prompt the user to add contacts

@andmironov @hesterbruikman @nikitalukianov pelase take a look!

Expected behavior

some hint shown when contacts list is empty. Places to improve:

1. Plus button -> new chat
2. Plus button ->start group chat
3. Wallet -> send transaction -> specify recipient -> recent recipients
4. Wallet - receive transaction -> send a transaction request -> choose recipient -> recent recipients

Design in Figma:

Actual behavior

Reproduction

1. Plus button -> new chat
2. Plus button ->start group chat
3. Wallet -> send transaction -> specify recipient -> recent recipients
4. Wallet - receive transaction -> send a transaction request -> choose recipient -> recent recipients

Additional Information

• Status version: develop
• Operating System: Android, iOS

[denis-sharypin]

I would suggest changing plus button for Invite friends button which triggers share popup. Otherwise, I don't know what plus button does

[asemiankevich]

well this design is a draft, we jsut need something for these blank screens when having no contacts

[lukaszfryc]

I think we need to fix this before beta. @denis-sharypin @asemiankevich what about adding a placeholder "Your contact list is empty." as the first iteration?

Btw, I find the "scan QR code" button very nonintuitive. It's one of the most important buttons in the app but still, in my mind, it's small and hard to understand. @denis-sharypin @chadyj @hesterbruikman don't you think users may not understand how to add a peer and start chatting?

[errorists]

The button is unnecessary, all we need is a well-worded placeholder. Hey @obi2020 , could you draft us a placeholder text for an empty list with no contacts available, also should we instruct on how to add people in 1:1 chats?

[hesterbruikman]

For context: the screen might hold contacts as well as DApps and websites the user has visited. It's more like a 'recent activity'/Homescreen at the moment. An ongoing conversation on the distinction between DApps, private-, public-, group- chats here: https://status-im.slack.com/archives/G90BT4EEQ/p1531408290000290

Slack

[obi2020]

Suggest text place holder, which might exist if user has < 3 or 4 contacts

Share your contact code to add a friend
- or -
Join a public chat to meet people and fill up your contact list

_Deep link to contact code sharing screen and public chat list, respectively_

@errorists wdyt?

[errorists]

@obi2020 Thanks! Not sure about the contact code part, I mean it's not the most convenient way to share your profile deets anymore with the introduction of universal links. Take a look at this below, how would you word it differently? Also, the design is there in Figma if you wish to take a stab at it

[status-github-bot[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[status-github-bot[bot]]

This issue has been automatically closed. Please re-open if this issue is important to you.

[lukaszfryc]

@obi2020 @errorists any update on it?

[lukaszfryc]

@errorists I see we already implemented following design for the group chat empty state. I think we can have the same for 1-1 chats. Do you agree?

I see we also have it in Figma.

[errorists]

@lukaszfryc Totally, it would be cool if we simply had a global contact list view defined that showed this empty state.

[lukaszfryc]

Ok. Then, this issue is ready to be implemented.

[status-github-bot[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mandrigin]

Moved to the Core Improvements backlog as https://www.pivotaltracker.com/epic/show/4182832, closing this GH issue.

Improve application empty states - Pivotal Tracker