Refactoring single source of truth for dapp state

[Jeday]

Description

• use wagmi->new sdk->old-sdk heirarchy
• derive old sdk connection from wagmi and use it's transports (removed old web3 provider async hack)
• 99% of all RPC requests are now routed trough wallet RPC first
• supported chains context per page + better/simple l2 unsupported state for a page
• all hooks only use correct chain on any page/any chain connected
• web3 module to unify and structure all new/wagmi/refactored code
• move most chainId related status to useDappStatus
• updated wording for chains on mainnet and testnets on multichain/unsupported banners

Also #524

• remake the ChainSwitcher to own code
• show the 'stats' by chain type in wrap/unwrap pages
• show the allowance any way in wrap/unwrap/wq pages

problem is SUPPORTED_CHAINS inlcude L2 chains but other pages only support ethereum chains and not l2 chains

Demo

Code review notes

Web3 Module

Now we have modules/web3. This is the first module in ESW so I will explain how and what.
It will contain all hooks/utils/providers needed to enable web3 in our app. Slowly migrating code from old-sdk/ethers in shared/ to new-sdk/wagmi/viem in modules/web3.

Main thing is that module(and sub-modules inside) only export and expose to other code bare minimum e.g. Web3Provider handles everything inside itself (new sdk, legacy sdk, reef-knot) and only exposes itself and useLidoSDK to outside code.

If you find yourself using deep import liked modules/web3/something/else, either this is an util that should be exposed OR the thing that using it should itself migrate into modules/web3.

Old sdk used to be setup in async/hacky way and it actually covered out problem with LL connector and wagmi. Now derives it state from wagmi and new sdk. And when sees L2 chain, acts like wallet is not connected and we are on default chain. This prevents accidental L1 tx interaction.

useDappStatus

This hooks will be slowly consuming all state/flag related stuff that we have. It exposes all things needed to know out dapp state: current chainId, is user wallet chain supported on this page, is wallet connected and etc.

This is better than having to rely directly on wagmi hooks, which are confusing and could experience changes with version update.

Example: useChainId returns chainId that in wagmi supported chains(but could an l2 chain and is not supported on stake) and useAccount returns chainId that in user wallet, which could be any chain at all and if passed to our code will break invaraints.

Chain Type

So with introduction of optimism to widget two main problems arose:

• we now have multiple mainnet chains with each set of testnet that should act independently
• supported chain envs in no longer actual per page, as wrap supports l2 and stake,rewards abn others only l1

This made our lives very hard and code very complex.

So chainType is used to distinguish between those chains, expecting Ethereum (mainnet + testnets) and Optimism(mainnet+testnet) to act independently.

I used a cool trick with default context value, that allows us to supply dummy only L1 value by default on all pages. And only on wrap we will have L2 support via SupportsL2Chains provider. This brings no changes to current behavior and only uses it nicely in code.

Testing notes

Unfortunately such big refactors bring a lot of regress. Visible changes are:

• 99% of all RPC requests are now routed trough wallet RPC first
• updated wording for chains on mainnet and testnets on multichain/unsupported banners

But actually tx flow stuff is not touched, so it would be enough just to see that 1 tx of each type goes trough.

More attention is needed on chain/wallet connection edgecases: unsupported chain, multichain chain, not connected, connected but on L2, connected but chose different chain in chain picker(wrap). Change pages. Disconnected, auto connected.

I also added extra warning in console when request fails. This will allow us to see if and how rpc request fails even when using wallet RPC.

Please check WC, because it will use primarily our RPC and monitor network to requests to other chainIds.

Checklist:

• Checked the changes locally.
• Created / updated analytics events.
• Created / updated the technical documentation (README.md / docs / etc.).
• Affects / requires changes in other services (Matomo / Sentry / CloudFlare / etc.).

[preview-stands]

Preview stand status

Stand was demolished