Allow users to see/switch the currently connected chain

gomesalexandre commented 2 years ago

Overview

As a user, I want to be able to see which IBC/EVM chain I'm currently connected to, and switch to another one.

References and additional details

hdwallet's ethSwitchChain() can be used to switch chains:

https://github.com/shapeshift/hdwallet/search?q=ethswitchchain

Acceptance Criteria

I can see the icon and name of the chain I'm currently connected to
If the current connected chain is an EVM chain and the wallet supports it (MetaMask / XDEFI), a dropdown icon is shown and I'm able to switch to another of our supported chains (Mainnet/Avalanche)
If the current connected chain is an IBC chain (CosmosHub/ Osmosis), the chain switching component isn't displayed. The reason for that is that Cosmos has multi-chain as a first class citizen, and as a user, I don't need to be connected to a specific chain to be able to broadcast Txs for it (tested with a CosmosHub Tx while being "connected" to Osmosis as a selected IBC chain)
If the wallet does not support chain switching/the current connected chain isn't an EVM chain, the chain switching component isn't displayed

Need By Date

No response

Screenshots/Mockups

1inch has a similar UX:

This will work in a similar fashion, with our own design (waiting for @shapeshift/product design input)

Estimated effort

3 hours

gomesalexandre commented 2 years ago

Assigned myself to this one for the time being, as there might be a few technical ramifications that need to be solved

gomesalexandre commented 2 years ago

Not technically blocked by https://github.com/shapeshift/hdwallet/pull/547/files, but would be great to get this in before. The "adding chain if missing" is a standard UX that's part of the chain-switching flow.

This PR also contains AVALANCHE_MAINNET_ADD_CHAIN_PARAMS which is a naive implementation that will work perfectly for us until we improve the API, build and properly pass said params from web.

shapeshift / web