Status-react: [#8026] Update not enough ETH warning

[hesterbruikman]

Description

Type: Feature

Summary: Continuation of the work done in this PR for #8026.

New overview screen warning: "Not enough ETH for gas". This warning provides insufficient information to new users as the what the problem is and how to fix it and refers to gas which is inconsistent with language in the Overview screen (Network fee). Update includes a warning that provides more context.

Current behavior

Expected behavior

Expected behavior was updated as of this comment

[gitcoinbot]

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

---

__This issue now has a funding of 70.0 DAI (70.0 USD @ $1.0/DAI) attached to it.__

• 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
  
  
  • $139,587.91 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[rachelhamlin]

Happy to see you back @MajorTomSec! 🙌 I approved you for this bounty. Let us know if you need anything here.

[flexsurfer]

@andmironov could you take a look if the design is up to date in the description? maybe we could implement it similar to https://github.com/status-im/status-react/issues/8691

[andmironov]

yep, I suggest doing this

[flexsurfer]

@andmironov but the point of this issue description, no?

[andmironov]

when there are several errors, let it be like this:

Tap on the icon shows the tooltip and hides the other tooltip if it's shown already

[andmironov]

If the goal is to explicitly tell that the user must have ETH to pay the network fee, we can mix these approaches and for consistency's sake do something like the screens below.

But I believe the red (!) icon and a tooltip migh do the job!

[rachelhamlin]

Okay, so to clarify this issue - let's use these screens, NOT the Expected behavior above?

I also think this new red error state is clear enough.

Can you add the Figma link to these versions @andmironov?

@MajorTomSec does this makes sense? I'll update the issue description. We could also roll #8691 into this one—it's an additional error state using the same styles. If you're willing, I'll double the bounty size for it (will pay out the extra amount in a tip once completed).

[andmironov]

Can you add the Figma link to these versions @andmironov?

https://www.figma.com/file/XUehMnhyD1FGcWzvGz6SXqvh/Mobile-wallet?node-id=3864%3A33253

[MajorTomSec]

@MajorTomSec does this makes sense? I'll update the issue description. We could also roll #8691 into this one—it's an additional error state using the same styles. If you're willing, I'll double the bounty size for it (will pay out the extra amount in a tip once completed).

Sure, this seems fine to me, let's get this done !

[gitcoinbot]

@majortomsec 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

[MajorTomSec]

Yes I'm still working on the issue, expect a PR in one or two days. Was just busy the last few days ! Sorry for the delay !

[rachelhamlin]

Glad you're still around @MajorTomSec! Thanks for checking in.

[gitcoinbot]

@majortomsec 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]

@majortomsec 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

[MajorTomSec]

Hello there,
I'm sorry I'll have to stop working on this issue.
I thought I'd have more free time than this, but life has kept me busy recently, so I'd better leave this issue to someone else.
I'll work on it when I get more free time eventually, if no one takes it !
Sorry for holding the issue !

[rachelhamlin]

Oh shame, but thanks for letting us know @MajorTomSec! Hope to see you back.

On Sun, Sep 15, 2019 at 11:57 PM Major_Tom [e-mail] wrote:

Hello there,
I'm sorry I'll have to stop working on this issue.
I thought I'd have more free time than this, but life has kept me busy
recently, so I'd better leave this issue to someone else.
I'll work on it when I get more free time eventually, if no one takes it !
Sorry for holding the issue !

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/status-im/status-react/issues/8485?email_source=notifications&email_token=ADWA6Y5HDST5HPT2X2NDECLQJ24WHA5CNFSM4H3FJGY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6X2Y5I#issuecomment-531606645,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADWA6Y7LYPSJIBHHNKC42KDQJ24WHANCNFSM4H3FJGYQ
.

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

__Work has been started__.

These users each claimed they can complete the work by 8 months, 1 week ago.
Please review their action plans below:

1) igormuba has been approved to start work.

I have cloned the repository. Will explore it a bit and see if I can find where to apply the changes.

Learn more on the Gitcoin Issue Details page.

[rachelhamlin]

@igormuba approved you for the bounty - welcome!

[igormuba]

I have changed the error tooltip to a red text below the field where the error occurs.
I didn't create a clickable tooltip because the whole square of the transaction fee is clickable (to edit the fee), and it is not a good idea to put a clickable button inside a clickable view.
How do you like this new error message?

[gitcoinbot]

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

---

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

1. @igormuba

@StatusSceptre please take a look at the submitted work:

• PR by @igormuba

---

• 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
• $160,935.40 more funded OSS Work available on the Gitcoin Issue Explorer

[andmironov]

Hey, @igormuba great job on improving the screen!

the whole square of the transaction fee is clickable (to edit the fee), and it is not a good idea to put a clickable button inside a clickable view.

Great catch, I agree with your point that if the whole row is clickable it's a bit weird to add a clickable error inside of it. But if you look at this problem from a different angle it might make more sense. This error message design is supposed to also help indicate several errors at once. For instance when there are both not enough tokens to send and not enough eth to pay for the network fee.

This is a more universal and compact way to visually indicate the error.

A solution to this problem might be increasing the clickable area of the (i) icon to prevent users from tapping the row instead.

Also, you helped me realize that if the user still wants to open the network fee settings popup on purpose there's no error indication there. I suggest disabling all the fields and links and showing the error like this:

But as far as I know, the network fee screens have not been implemented yet anyway. I wonder how it all will work together cc @rachelhamlin @flexsurfer

[flexsurfer]

it's implemented in a simple form

[rachelhamlin]

Thanks @flexsurfer! We can run with that for now. I will create a separate issue to handle the slider, but it can be done after v1 - agreed @andmironov?

Can you put the network fee error state on this design for the interim?

Let's continue within #9037. It replaces this issue.

[igormuba]

What about the bounty? It expires soon

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

__The funding of 70.0 SAI (70.0 USD @ $1.0/SAI) attached to this issue has been cancelled by the bounty submitter__

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $134,644.95 more funded OSS Work available on the Gitcoin Issue Explorer