Unsupported networks should be more obvious in publish screens

[kremalicious]

In this use case the small red square in header is just not enough to prevent people from trying to publish into it, as the form UI suggests that this is possible:

We could just block whole publish screen with error message in that case.

[mihaisc]

just throw an alert('NETWOR NOT SUPPORTED!') . 11/10 UI

[kremalicious]

and redirect to https://www.youtube.com/watch?v=dQw4w9WgXcQ for a 12/10 UI.

But to be a bit more user friendly in the error on screen we could dump a list of supported networks, read out from app.config.js

[EnzoVezzaro]

I like the idea of blocking the user. We could add an overlay over the publish form and show an alert on the network to let the user know. I made a quick mockup of what i mean.

We could also show a list of supported network (as cliccable maybe) inside the overlay, right in the middle of the publish form.

[mihaisc]

Looks cool. I would keep more complicated designs after the launch. It's a good idea nonetheless (the one with the list of supported networks) , having more interaction with the user

[jamiehewitt15]

This is a good idea, it would be quite frustrating for the user to get all the way through the publish form without realising they are on an unsupported network.

[kremalicious]

In the end looks like we want mainly 2 things:

1. prevent any tx from being initiated when user is on wrong network
2. inform and make user switch to a supported network

For 1., blocking whole form is most simple for us but can already think of some user flows where this might not work so smoothly. Like user is on supported network, fills out form until submission screen, then switches to unsupported network. What happens now? Throw user on first screen with blocked form? Keep the data?

More user friendly would be then rather dealing with that on the submission screen, and based on other issues like #1320, that final submit button should become a bit smarter as to guide user into getting it into final submission state.

For 2., that "Unsupported Network" badge looks really cool so we could start with that. If we want to also make users switch to supported network as easily as possible we would need to list them as actionable items, triggering wallet network switch. And for that we would need more space as the tooltip might get too cramped (or maybe not? could use a UI mockup), so just big alert under header description would be fine too. Then it's like really obvious

[jamiehewitt15]

Yeah, definitely a good idea to have a change network button next to the warning message. Could potentially look like the banner that 1inch use:

I also like the suggestion of making the final submit button smarter, this generally makes a nice user interface and helps the user get to the desired outcome.

Aave do something similar by showing "Wrong Network" in place of their trade button:

The button could potentially become a "Change network" button when the user is on an unsupported network.

[jamiehewitt15]

I'm thinking it doesn't make much sense saying "Publish to Kovan" if that's not a network we support, so I'm proposing removing the title & description on the publish page and replacing it with a warning if the user is on the wrong network

[kremalicious]

I would advise against switching large parts of the UI in such cases as you will get crazy layout jumps which are even more confusing when you replace key elements for users to understand where they are. That's why the unobtrusive but still obvious variant of red text + tooltip seemed like good approach.

In any case if we want to drop an alert then it would be better to throw it below the page description so that the top part of UI simply stays in place.

And finally one button is not enough, we need a list, or what's the intended interaction happening after user clicks "Change Network" in your mockup, which network it will change to?

[kremalicious]

Building up on Enzo's mockup, that "Unsupported network" in combination with red network name should already be obvious enough. And pushing the networks links into the tooltip kinda would work, the list then could use a grid layout so tooltip doesn't get crazy long with all our networks: