refactor network name output

[kremalicious]

Fixes #412.

Changes proposed in this PR:

• move network detection and warning out of generic Web3 feedback component, so it's not displayed in popover anymore
• output beside account button, based on app config or user network
• output nothing when connected to Mainnet
• fetch chain metadata from ethereum-lists/chains on build time, for mapping networkId to display name among other things
• detect supported networks based on ocean.js ConfigHelper configs, and error icon output based on it
• cleanup utils/wallet.ts, remove unused or redundant methods

Resulting in:

Supported & test network:

Unsupported & test network:

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/oceanprotocol/market/8mBysJtbBRfFhSR4QNA7J7Z99Q5f
✅ Preview: https://market-git-feature-network-name-output-oceanprotocol.vercel.app

[mihaisc]

Not really solves the issue, or maybe i am misunderstanding something.
The main idea is that in the future we will have multiple "mainnet" for each chain that we implement. My suggestion was something across these lines:

• eth mainnet
  
• eth test net (any of them) and continue to show network in popup like we used to do
  
• polygon mainnet ( or any other chains)
  

We can add the chain name in ConfigHelper with any other stuff that we need

[kremalicious]

right, each chain can have multiple networks so to speak, and PR only accounts for current status quo.

Warning icon:
Logic as in your mockups makes sense then, it's basically warning when stuff is not "real", as in tokens representing real money value being transacted. And that would be then true for other chain's main networks too.

Another possibility would be to redefine the warning condition. Was also thinking of not using warning icon at all for all supported networks. But use it to signal when user is connected to an unsupported network, for which we can still output the network name.

As for network name label:

• would still want to hide that for ETH mainnet, it's our default, and also reflects how other dapps handle that. User expectation in dapps is that it works against ETH mainnet.
• for ETH test networks think it's fine showing the respective network name. They are usually well known and attached to ETH in user's minds.
• for every other networks should be fine only showing the chain name, like Polygon as in the mock. That is unless they also have and encourage to use their own test networks. In that case we should also add e.g. Testnet after the network name

[kremalicious]

After some researching, tending towards outsourcing the network naming standardization and just fetch all metadata from https://github.com/ethereum-lists/chains

They capture chain & network which we could combine, so e.g. ETH Rinkeby or Matic Mainnet based on their data structure: https://chainid.network/chains.json. This should then cover all future chains/networks as long as they are in that list, which they probably are.

There's also nativeCurrency which might help with #418

[mihaisc]

I think i agree with everything you said. Summary :

• don't show chain for eth main, show only for other chains. for now we don't really want to add other test networks. The purpose of rinkeby and ropsten is to test the market not the chain itself. So we already have 2 testnets no need for more, unless some specific scenario
  

• change warning icon for testnets, something like (obviously make it look proper)
  

• integrate with https://chainid.network/

[kremalicious]

alrighty, with chainid.network we get those network naming combinations if we want to keep it flexible:

As per https://chainid.network/chains/#matic-mainnet--, for Matic it would be Matic Mainnet then, we could still remove all Mainnet strings though.

The goal I had in mind was to make this network name output completely network agnostic, meaning we simply output whatever user is connected to, regardless if we support it or not. So the source of truth for all network metadata becomes that community-maintained repo.

Like that idea of using test label but would keep it around network name, that account element is now exclusively for the account info. The condition based on https://chainid.network response data, if (network.network !== 'mainnet') return label, should be safe for that.

Which gives us this for all test networks:

With that, maybe it makes sense to use the warning icon then for networks we do not support. Although I guess everything crashes anyway right now when user is connected to unsupported network but ideally user should be able to connect to whatever network and our UI should give hints if it works or not for which warning icon seems a better use. Could be also solved as part of #401 instead of in here, but this could already work:

[mihaisc]

Not crashing can be patched easily. It's not a proper fix, but it will not crash.
Agree with everything.

[mihaisc]

So... just slapping a if (!initialNewConfig) return in NetworkMonitor will make the app not crash but then you don't detect the new network so it's kinda useless

[kremalicious]

one remaining thing: response from https://chainid.network can be slow, it's just Jekyll site on GitHub Pages. So seems better to fetch the list on build time into Gatsby data structure, and query that on client side so it's instant

[kremalicious]

works pretty well by now in my testing, getting name is now instant. Will not touch any other network init stuff in here and leave that to #401.