Simplify RPC connection logic for individual dapp FEs by adding a node selector

[otoole-brendan]

What is the Problem Being Solved?

As part of efforts to improve overall RPC node experience for Inter apps, we intend to add some retry logic to dapp-inter-jumper (per Agoric/ui-kit#56). However, the logic is different because in the jumper, it's just making one vstorage query through a simple function. In dapp-inter, it makes a query to the network config for the rpcs, it makes regular cosmjs queries for smart wallet provisioning fee, it's making a chainStorageWatcher with @agoric/rpc to watch vaults and stuff, it's making a wallet connection with @agoric/web-components which does a combination of cosmjs queries for the bank balances, casting for offer status updates, and using the chainStorageWatcher that the dapp provides for non-vbank purse updates, etc.

It's difficult to know how to handle if, for example, one of those queries is taking longer or failing, do we just reset everything and switch RPCs? Do we switch RPCs just for that query? It adds a lot of complexity to the libraries themselves having to be aware of that, and reasoning about those edge cases may be tricky. It would be simpler to just have a top-level node selector that dictates everything, and if the user changes nodes just clear everything and start over.

Description of the Design

Add top-level node selector for dapp-psm, dapp-inter, dapp-econ-gov and wallet-app such that users can firstly see the RPC node they are connected to and then the change RPC node should they wish (P1)

If we can visually convey the status of the rpc connection alongside that RPC with a red, orange and green connection status indicator dot that would delight the user (P2)

Security Considerations

TBD

Scaling Considerations

TBD

Test Plan

Upgrade Considerations

Tasks

Preview Give feedback

1. Add RPC Node selector (dapp-inter) dapp-inter#211
   enhancement +1
   
2. Add RPC node selector (dapp-econ-gov) dapp-econ-gov#80
   enhancement +1
   
3. Add RPC node selector (dapp-psm) dapp-psm#112
   enhancement +1
   
4. Add RPC node selector (Wallet UI) wallet-app#130
   enhancement +1
   

[samsiegart]

Draft for new error dialog in dapp-inter:

This will ultimately lead the user to the node selector, but before we have a node selector it's still an improvement over the existing blank error screen pictured:

It helps us gain more visibility into which nodes are faulty, as well as makes the user aware that it's a node issue and not a UI bug when a node is not responding as @rowgraus noted.

@otoole-brendan has the ball to refine the messaging in this dialog to be more appropriate and user-friendly before shipping this change.

[samsiegart]

Work-in-progress for node selector design--allows users to type in their own node URL, as well as select from a dropdown of known nodes from the network-config:

An improvement to show a status icon next to the nodes in the list would be feasible.

[otoole-brendan]

@samsiegart what do you think of:

Chain Connection Error
There was an issue connecting to the chain. This could be a for a number of reasons.

Proceed to Connection Settings to check RPC status and select a different RPC node and API Endpoint. Otherwise hit 'Dismiss' to return and refresh.

[otoole-brendan]

@samsiegart as discussed for the simplified error message:

'Chain Connection Error'

There was an issue connecting to the chain. This could be for a number of reasons but most likely due to RPC node issues. If that is the case, we likely already know about it and are working to resolve it with our RPC providers. Please check back in a couple of hours.

Then just a 'Dismiss' / 'Okay' button

[otoole-brendan]

@rowgraus as discussed with Sam earlier - he'll be adding a gear icon to top right of dapp-inter so users can manually click and change node connection settings. The other flow is the error flow. When a user has a connection error - we inform them and give them option to navigate to the connection settings if they want to change node. Just commenting here as you might need to eyeball/review when Sam finishes that work