Status-react: Add basic copy to public chat empty screen state

[hesterbruikman]

Problem

As a user I want to see what's going on in the Status app and what I can use it for. As soon as I join a public chat that hasn't been active in the last 24h, all I see is an empty screen. I want to understand wy this is and where I can find more active channels.

We can offer a quick solution while we wait for the epics 'Onboarding' and 'Empty state screens' to progress.

Implementation

Add basic copy to empty public chat views
This ideally includes an update of the screen design, according to below mockup.

Acceptance Criteria

Open new topic or public chat that does not retrieve any messages from the last 24h, text message is shown on screen.

Notes

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 40.0 DAI (40.0 USD @ $1.0/DAI) attached to it as part of the Status-im fund.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $56,866.62 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[krisc]

@hesterbruikman @yenda will this entail adding a new icon to the resources folder? I don't see the circle with an 'S' anywhere.

[krisc]

oh, nvm, this is done with styles and aren't icons, correct?

[hesterbruikman]

@krisc , you got it, this is a style. A circle with a centered letter. The letter is intended to be the first letter if the public channel name.

Same as the top and in list view but larger. I'll add the styling specs for you here.
UPDATE: send you an invite the view the frame in Figma. If you hover you can see the exact spacing and dimensions.

[gitcoinbot]

@krisc Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[krisc]

@hesterbruikman @gitcoinbot I'll continue with this soon!

[yenda]

@krisc here is how the small icons are generated https://github.com/status-im/status-react/blob/6f865bf337db5339e69598423d82d9da129ee95e/src/status_im/ui/components/chat_icon/screen.cljs (but the code should be refactored it is very wierd)

GitHub

status-im/status-react

a free (libre) open source, mobile OS for Ethereum - status-im/status-react

[gitcoinbot]

@krisc Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[krisc]

@gitcoinbot @cammellos was giving me some help here https://github.com/krisc/status-react/commit/644b127f3973562e7bea5a2c2ecd58a0fbd0da91

I tried rebasing from latest dev branch and ran into some issues building. I probably won't get back into this until next week tbh.

[gitcoinbot]

@krisc Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@krisc Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[krisc]

@gitcoinbot yes about to get back into it right now

[krisc]

Okay, so it makes a little more sense after updating to the latest develop branch. But I'm stuck adding the icon let alone with custom specs. Is it right that I should use chat-icon.screen/default-chat-icon name? I'm pretty lost trying to understand styles tbh. Well, anyway here is what I have so far. I'd appreciate some help @hesterbruikman @cammellos

(defn empty-chat-container
  [name]
  [react/view style/empty-chat-container
   [chat-icon.screen/default-chat-icon name {:default-chat-icon-text style/group-chat-icon}]
   [react/text {:style style/empty-chat-text}
    (i18n/label :t/empty-chat-description)]])

[bitsikka]

looks like in the right direction @krisc

If you're busy and not working on it anytime soon, I can give it a go

I believe I can figure this out from @yenda's pointer

[krisc]

@bitsikka sure the newest build was making it difficult for me to debug. You might want to apply on Gitcoin so @StatusSceptre can approve of your working on this.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 10 months from now.
Please review their action plans below:

1) bitsikka has been approved to start work.

I have already made the PR with the solution

only cosmetic changes may be needed

Learn more on the Gitcoin Issue Details page.

[bitsikka]

thanks @krisc 👍

@StatusSceptre can you please approve?

@hesterbruikman can I please have access to the styling specs?

[StatusSceptre]

done @bitsikka!

[bitsikka]

great! thanks @StatusSceptre

I have already submitted the PR. Just need design input and reviews.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 40.0 DAI (40.0 USD @ $1.0/DAI) has been submitted by__:

1. @bitsikka

@StatusSceptre please take a look at the submitted work:

• PR by @bitsikka

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $42,066.71 more funded OSS Work available on the Gitcoin Issue Explorer

[StatusSceptre]

@mandrigin is this work finished and ready for payout?

[Serhy]

@mandrigin is this work finished and ready for payout?

@StatusSceptre yes, the work was done, we can see it in nightly builds as well. Ready for payout.

[hesterbruikman]

@mandrigin given last week's update to the nr of days fetching of public chat messages, this needs a copy update. Shall I created a xs bounty for that or do you know a core contributor that has time for this change?

[mandrigin]

@hesterbruikman I think it should be done in https://github.com/status-im/status-react/pull/7961

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 40.0 DAI (40.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @bitsikka.__

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $87,008.73 more funded OSS Work available on the Gitcoin Issue Explorer