[DESIGN] Stats URL improvements

[dutterbutter]

Overview

The current design / functionality of the specifying a URL for the backend has a bit of friction to it. That is, the user must know the working deployment URLS and input them themselves to have different network data displayed.

Component in question:

Proposed Solution

We should update the design to make it easier for users to select existing known deployments, as well as, input custom URLs. For inspiration we can review the polkadot.js app.

With the use of radio buttons, user can quickly update what data they would like to be displayed. For our ecosystem, this would be nice for Test network, Rococo, Prod selections (e.g. Tangle Alpha, Tangle). While also allowing users to put a custom URL for local development or other backends.

@monaiuu @seeddisperser thoughts here?

[seeddisperser]

@monaiuu you implemented this feature, I believe. Want to take on these updates?

[monaiuu]

A few questions:

• Do we also want to also update the design to enable users to quickly toggle between development, testnet, and live(when it comes) in this component, in your opinion?
• For development, I'm double-checking that we want to include Local Node & Custom (with radio buttons for known deployment options and custom endpoint) is that correct?

@dutterbutter

[dutterbutter]

(2) For development, I don't know if we need the distinct separation of local node and custom. I will leave the design to your imagination. However, supporting an easy radio button for local endpoint (e.g. 127.0.0.1) and input URL for arbitrary endpoints would be best.

(1) Perhaps, I would be curious what that would look like. I tend to lean towards the separation.

[monaiuu]

This is my preliminary thought on how it could be executed. Would like to double-check with you to get your feedback before finalizing. @dutterbutter

[dutterbutter]

@monaiuu thanks for getting back to this. A couple thoughts.

• In practice, there will only be 1-2 "Live", "Testnet", and "Dev" endpoints selectable. More precisely, there will be 1 endpoint available for Tangle (e.g. on Kusama) this would be considered "Live", 1-2 endpoints for Tangle Alpha, and maybe Rococo / standalone for "Testnet", and for "Dev" it likely will be a local endpoint used or custom endpoint. That being said, I think a better display of the endpoints could be the following:

On selecting the radio button "Live" we display a <Logo - Network name> as depicted above. And repeated for "Testnet" and "Dev" while maintaining the Custom Endpoint input option similar to your posted image. I think this is an improved display given these endpoints will not change and is more clear what network you are connected to and intending to connect to. Thoughts?

Endpoints would then be:

• Tangle Network (Live)
• Tangle Alpha (Testnet)
• Tangle Rococo (Testnet)
• Local (Dev)
• Custom Endpoint Input

Other points:

• What are you thoughts on adding a button to execute the change in endpoint. Similar to polkadot.js "Switch" in their component (see image posted below)? Or does the radio button act as the button in this instance? If so what about the custom endpoint input?
• I think we can remove the "RESET" utility link as I don't think its needed unless you have rationale there
• Consider adding a tooltip to custom endpoint input to inform users of what type of endpoint is expected

Thanks for putting this together. Let me know your thoughts!

[monaiuu]

On the aforementioned notes @dutterbutter :

• Yes the network could be switched by toggling between the radio buttons on the bottom -- that's the preliminary thought. The custom endpoint column would only be displayed when the user has selected Dev radio button. But we could also do the switch icon as well, similar to polkadot-JS, which I suppose that would be a binary switch between live network and Testnet/Dev networks. What do you think?

• Agreed on removing Reset utility link. I see polkadot-js has a save icon button, which becomes active when change is initiated. Thinking we should also do something similar? Unless a simple enter command on the keyboard is sufficient.

  

• Will add a tooltip to custom endpoint. Any suggestion on the copy of the tooltip?

[dutterbutter]

Closing in favour of https://github.com/webb-tools/webb-dapp/issues/1009