Improve test network loading state indicator

cjeria commented 6 years ago

Bounty: when the extension is trying to connect to a Custom RPC network, we should

(1) update the UI to include the network name next to the small spinner on the top bar of the extension. Current behavior only shows a static spinner graphic, and most users don't know they can click it to escape.

(2) time out the connection attempt if it lasts longer than 15 seconds without connecting successfully. the extension should stop trying to connect and display the screen shown below. The "try again" button should resume attempting to connect to the same network, the "Switch networks" button should pop open the network menu (top-right).

current production:

design spec: (1) top-right network pill is updated, and UI shows the name of network

(2) after 15s, modal over whatever previous screen the user was on. network should revert back to whatever the user was previously on if possible.

When a user clicks localhost 8545 without anything running on that port, they land on a spinner and think they're frozen. They can actually escape by clicking the small static spinner icon next to the top-right account menu, but few people realize this.

User feedback video showing the problem https://www.youtube.com/watch?v=Veeel3nUtbc

bdresser commented 5 years ago

@danjm @alextsg spinner q's come up a lot, i think this small UI tweak to persist the network name while loading would make things a bit easier on folks. marking as P2, feel free to edit.

relates to #4479

gitcoinbot commented 5 years ago

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

This issue now has a funding of 0.1 ETH (35.56 USD @ $355.62/ETH) 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
- $23,660.13 more funded OSS Work available on the Gitcoin Issue Explorer

cjeria commented 5 years ago

This issue has been reported many times and a simple yet effective solution would be to timeout the spinner after a ~20 seconds and throw a message like “Something went wrong, please try switching networks or try again” with a "try again" button.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Cancelled

The funding of 0.1 ETH (35.56 USD @ $355.62/ETH) attached to this issue has been cancelled by the bounty submitter

Questions? Checkout Gitcoin Help or the Gitcoin Slack
$23,624.57 more funded OSS Work available on the Gitcoin Issue Explorer

cjeria commented 5 years ago

Here's a mockup of the suggest timeout screen with updates per @bdresser suggestion to add a "switch network" button that pops open the network drop down.

ebaizel commented 5 years ago

i like the proposed design.

i'd like to propose one alternative...what about keeping the drop down displayed and active, and moving the spinner either to the left of it, or removing it completely as there's already a spinner on the main window. then it's very intuitive how to change the network. there may be a reason why the dropdown needs to be disabled, in which case you can ignore this suggestion :)

bdresser commented 5 years ago

@ebaizel that's a solid idea, but sometimes users try to join a network from the Settings page, rather than the drop-down menu. Using the overlay lets us give the same experience regardless of where the user is coming from.

I'll re-post a bounty on this today with the timeout functionality included.

gitcoinbot commented 5 years ago

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

This issue now has a funding of 0.3 ETH (109.11 USD @ $363.7/ETH) 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
- $24,844.78 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 5 years ago

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

Work has been started.

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

iamonuwa has started work.

Ready to work on this. Will be completed by end of tomorrow

Learn more on the Gitcoin Issue Details page.

iamonuwa commented 5 years ago

@cjeria @ebaizel @bdresser @johnweldon I've set up the deps but I get this error anytime I run npm start

estebanmino commented 5 years ago

Hi @iamonuwa, please try this

Make sure that you have node.js version 8.11.3 and npm version 6.1.0
nvm use (If you don't have nvm please install here)
npm install
npm start

Feel free to ping me when you've done that.

iamonuwa commented 5 years ago

@estebanmino, I have my npm, nvm to match with the one you listed.

estebanmino commented 5 years ago

perfect, seems to be a node interference, maybe with a local package? In which OS are you working on?

iamonuwa commented 5 years ago

Ubuntu 16.04 LTS

iamonuwa commented 5 years ago

@estebanmino are you there?

estebanmino commented 5 years ago

Hi @iamonuwa did you try to removing /node_modules and try everything again? Or trying to find any solution with you node configuration? To me it seems like an error of that type. I'm reading that people with these error solved their issues doing that or finding some conflicting package or versions.

iamonuwa commented 5 years ago

Alright, @estebanmino thank you. I'll do that

iamonuwa commented 5 years ago

@bdresser am stopping work here because I can't seem to set up the task on my local environment. With the configurations provided.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Cancelled

Work has been started.

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

1) oogetyboogety has started work.

I believe this would involve updating the metamask-controller and network-controller to have a loading state that does not time out the loading overlay/screen.

I'll look into this and propose a solution by the next few days.

Learn more on the Gitcoin Issue Details page.

oogetyboogety commented 5 years ago

Sorry I meant that does time out

oogetyboogety commented 5 years ago

Actually this may be easier to do in the ui/app.js. If anyone has any recommendations, I'll use them, otherwise I'll change the network state from loading and just remove the loading overlay after a timeout.

bdresser commented 5 years ago

@oogetyboogety I believe there's already a translated error message for "Oops! Something went wrong" that you can use -- check unknownCameraErrorTitle in messages.json

gitcoinbot commented 5 years ago

@oogetyboogety 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] warning (3 days)
[ ] escalation to mods (6 days)

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

cjeria commented 5 years ago

Apparently the word "Oops" translates to several other languages:

German: hoppla, huch, ups
Dutch: oeps
Spanish: uy and ups
French: zut and oups
Japanese: おっとっと [ottotto]
Mandarin Chinese: 哎呀 [āiyā]
Russian: ой [oi] or опа [opa]
Georgian: ვაიმე [vaime] or ვახ [vax]
Armenian: Վայ քու [vay kou]
Greek: ώπα [opa]
Romanian: hopa
Turkish: ay
Arabic: يي [yii]
Persian: وای [wāi] or آخ [āx]
Hindi: धत्त तेरे की [dhatt tere ki]
Tamil: அச்சச்சோ [accaccō]
Hungarian: hoppá or vaj

Source: https://www.quora.com/Do-people-say-oops-in-languages-other-than-English-What-would-be-the-equivalent

That said, we can also fall back to the translation for "Error" and only use "Oops" for the English version.

gitcoinbot commented 5 years ago

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

@oogetyboogety due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] warning (3 days)
[x] escalation to mods (6 days)

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

oogetyboogety commented 5 years ago

Ah OK I see that but I don't know if it's in all of the other languages.

I'll post up the english version tonight once I get the RPC onclick handler call worked out. It's the only one that's messing up.

gitcoinbot commented 5 years ago

@oogetyboogety 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] warning (3 days)
[ ] escalation to mods (6 days)

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

oogetyboogety commented 5 years ago

@cjeria I've added the requirement that the newly specified overlay will only display while unlocked whereas the loading overlay does display regardless. Otherwise, the user may expect something to happen when they try to click on the Set Custom RPC option from the network dropdown on the Switch network button, however they will be redirected to the Settings page behind the overlay and only after they unlock the account. Let me know if the expected behavior should be different.

oogetyboogety commented 5 years ago

@cjeria @bdresser Please test the latest PR and let me know your feedback! state2 state3

Thanks!

bdresser commented 5 years ago

thanks @oogetyboogety! left feedback directly on the PR

gitcoinbot commented 5 years ago

@oogetyboogety 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

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

@oogetyboogety due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] warning (3 days)
[x] escalation to mods (6 days)

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

bdresser commented 5 years ago

@oogetyboogety did you see our feedback on the pull request?

oogetyboogety commented 5 years ago

@bdresser just got it, sorry about the delay. just assessed changing it into a modal, shouldn't be a problem at all, I should have those changes done by tomorrow or so

oogetyboogety commented 5 years ago

@bdresser @cjeria Please review the latest commit on the pull request

Thanks!

gitcoinbot commented 5 years ago

@oogetyboogety 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

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

@oogetyboogety due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] warning (3 days)
[x] escalation to mods (6 days)

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

bdresser commented 5 years ago

hey @oogetyboogety this is a production issue affecting users daily, so we need a little more velocity here. Sorry to say I'm going to remove you from the bounty. Feel free to reach out to support@metamask.io if you have questions or comments and we can chat there.

This is open again - please tag me if you have any questions about the feature.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Cancelled

The funding of 0.3 ETH (59.24 USD @ $197.48/ETH) attached to this issue has been cancelled by the bounty submitter

Questions? Checkout Gitcoin Help or the Gitcoin Slack
$40,639.62 more funded OSS Work available on the Gitcoin Issue Explorer

oogetyboogety commented 5 years ago

@bdresser I spent a few hours on this and I learned in the process. I think changing it to a modal caused all kind of weird behavior for me...sorry to waste time.

Maybe some of the PR can be salvaged by my replacemenT-this one fell down the list because I had some other bounties that were larger and I was more familiar with the codebase on those.

gitcoinbot commented 5 years ago

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

This issue now has a funding of 0.5 ETH (98.74 USD @ $197.48/ETH) attached to it as part of the MetaMask 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
- $40,788.36 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 5 years ago

@yjkimjunior 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

@yjkimjunior 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] warning (3 days)
[ ] escalation to mods (6 days)

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

bdresser commented 5 years ago

Thanks @anukul - let me know if you have any questions!

gitcoinbot commented 5 years ago

@anukul 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

@anukul 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

@anukul 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

@anukul 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] warning (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 5 years ago

@anukul 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] warning (3 days)
[ ] escalation to mods (6 days)

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

bdresser commented 5 years ago

@anukul are you working on this? if not, I'm going to release the bounty so someone else can pick it up! let me know.

MetaMask / metamask-extension

Improve test network loading state indicator #3776