Status-react: Start chatting from the dapp browser

[chadyj]

User Story

As a dapp user, I want to chat about the dapp I'm using so that I can learn, get support, and be part of the dapp community.

Description

Type: Feature

Summary: Status has chat, and it has dapps, but right now they aren't integrated. Let's change that! We can bring chat to every dapp in status by adding a "chat" icon in the dapp browser and creating an instant community for every dapp. A user of a dapp like Airswap won't need to hunt around looking for the Airswap community because they can just tap the chat icon and be instantly teleported to the Airswap community.

From our metrics we see that about half of all new users open a dapp, but only half that join a chat. We can leverage the popularity of dapp's in status to drive awareness and engagement with chat.

Slack context.

Solution

From within the dapp browser, a user can tap the chat icon which opens a model and chat UI dedicated to the dapp.

For example, users of Airswap.io can tap the icon and a chat for #airswap.io will open. The user can go back and forth with the dapp and chat seamlessly.

The #airswap.io channel would also be added to the home tab for easy subsequent access.

Concept illustration:

[errorists]

Prototype of the proposed design https://framer.cloud/OFCIZ

Some things I'm uncertain on, Should Dapp chats share their 'avatar' image with the Dapp or rather follow the same rules as public chats with a coloured background and the initial. My thinking is the latter but both could work here.

Also, maybe instead of adding the channel automatically to the Home tab, give users the option to pin/remove manually? My thinking is, the Home tab is already a hot mess of chats and Dapps in the current design, and adding Dapp channels without any input might make it even worse.

Chat in Dapps

This project was made with Framer, a design tool for turning original concepts into working prototypes.

[Graeme-Code]

In practice would the owner of the Dapp be responsible for linking its status public group to its website?

If its responsibility of website I'm making the assumption they would have it in the same format as their other communities. Linked is a video of deep linking from FOAM website to its telegram community.
https://drive.google.com/open?id=1ZN-qDDNI3h9I2YghhaRyCh4ncfC9_aUy

Could we automatically create and add a public chat to Dapp based on the URL? If so I think the solution works with the one caveat that the Dapp owners community managers might not be aware of the chat.

Meet Google Drive – One place for all your files

Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.

[chadyj]

In practice would the owner of the Dapp be responsible for linking its status public group to its website?

No. Every dapp gets chat for free.

Could we automatically create and add a public chat to Dapp based on the URL?

Exactly!

[Graeme-Code]

That's really powerful :)

In a way its a method to create a verified "public chat". For a Dapp there will only ever be one URL and therefore one "public chat" linked to that URL.

I don't have any major comments on the UI, I think putting it in the browser nav bar makes most amount of sense given users are likly to find it.

[errorists]

Updated the designs so that the icon is moved to the toolbar.
Framer 👉 https://framer.cloud/OFCIZ
Zeplin 👉 zpl.io/agN9qP1

Chat in Dapps

This project was made with Framer, a design tool for turning original concepts into working prototypes.

[rachelhamlin]

Could we automatically create and add a public chat to Dapp based on the URL?

Exactly!

So this isn't just for DApps from the curated list, @chadyj?

Should Dapp chats share their 'avatar' image with the Dapp or rather follow the same rules as public chats with a coloured background and the initial. My thinking is the latter but both could work here.

I say a big yes to the images @errorists, but we can only reliably get those avatars for DApps in the curated list. I'd say use those, and if all URLs browsed have a chat generated, use a random icon.

[chadyj]

So this isn't just for DApps from the curated list, @chadyj?

May as well start out on everything and evolve over time and see how this feature and usage evolves. Hopefully we will see some organic and unexpected uses and adoption.

[flexsurfer]

chat topic can only consist of a-z and - symbols, we can replace . to - and for example it will be airswap-io, but I'm not sure what to do with numbers, for example eth2.io any ideas @chadyj @rachelhamlin ?

[chadyj]

How about allowing numbers in chat topics? Any reason we do that?

[rachelhamlin]

+1 can we?

[Serhy]

@errorists , in the prototypes above (Framer 👉 https://framer.cloud/OFCIZ
Zeplin 👉 https://zpl.io/agN9qP1), for the public chat three-dot menu at the top-right there is an option Pin chat to Home tab/Remove from Home chat tab Am I correct in their behaviours:

a) If PublicChatDapp modal screen from icon-chat button is opened, we behave in the same way like if contact would join same chat from (+)-> Join Public Chat screen but do not pin PublicChat to Home screen (so only open respective ModalPublicChat screen and pull it’s history for the last 24h).
b) If PublicChatDapp modal screen from icon-chat button is closed via top-left cross icon, we behave in the same way as if contact would use a ‘Delete Chat’ option on public chat but without “unpinning” public chat action from Home screen (because we hadn’t pin it with “Pin chat to Home tab” before)

So far we haven’t implemented Pin chat to Home tab menu item but used Delete chat option (which hides ModalPublicChat screen upon tap and removes chat from Home. Same behaviour we have in usual public chats). Imo, it makes sense to keep ‘Delete chat’ or don’t have any of “Delete chat” or “Pin/Unpin chat to Home” options.
So that ModalPublicChat screen would behave like a normal public chat with the exception that it opens in the modal window.
What do you think?

2a) Should we have unread message counters near the public modal icon (bottom webview actions bar) and do we need them to be dynamically incremented when new message appear in respective public chat? (Imo, - we should have this icon as a static element with no unread message counters, or user will see unread messages counter right away when (s)he opened Dapp)

2a) When Modal Public chat screen is opened there is a cross icon at top-left. Usually, next to this icon we display unread message counter if any chat (1-1/public) received some. In a case of PublicModalScreen, - do we need to keep the same behaviour? (Imo, Modal Public screen dedicated to only respective public chat so we focus all activities on this public chat i.e. no unread message counters at all while contact has opened public chat screen)

Chat in Dapps

This project was made with Framer, a design tool for turning original concepts into working prototypes.

Zeplin

Zeplin - Login

Collaboration app for UI designers and frontend developers

[errorists]

thanks @Serhy for asking
re:
1a) right
1b) again, correct

In general, I wouldn't like the dapp chat to appear in your Home tab automatically without manually requesting it to do so, hence the 'Pin' action. The 'home' tab is already a mess, and having to distinguish between dapps and chats of the same name will only make it worse. I'd strongly prefer adding the dapp chat to home tab to be opt-in instead of opt-out.
Also, the use of word 'delete' confuses me there, this is a dapp specific channel, it's like I was asked to 'delete' an album on Spotify even if it was published by the artist.
@hesterbruikman @jpbowen I'd welcome your thoughts on this

2a) Yes I think we should have the unread counters on the icon. I think they actually add value there and can lead to increased engagement with the Dapp chat which is good for everyone. If we find them annoying or otherwise unnecessary we can always remove them.
2b) You're absolutely right, we shouldn't display a counter there