Save network state in query parameters

[chrstph-dvx]

Objective

The idea is to use query parameters as a store for network information rather than relying on connected wallet.

Motivation

Using query parameters as the single source of truth for network information has multiple advantages:

• Allow change of network in the UI directly
• Allow server-side rendering as we don't rely on client side information anymore
• Enable users to interact with the bridge without having to connect their wallet
• Abstract notions of L1/L2/L3 into from and to

Architecture changes

User should be prompted to switch network only when they are about to move funds.
Query param should be the source of truth over the currently connected network in the wallet.

Adding

from,to query parameters - Query parameters for source and destination chain.

Both parameter are string rather than chainId to be more user friendly. They are also sanitized and defaulted to valid chains if at least one of the value is not valid.

useNetworks() - Long term replacement for useNetworksRelationship returning source and destination chains.

type UseNetworksState = {
  from: Chain
  fromProvider: StaticJsonRpcProvider
  to: Chain
  toProvider: StaticJsonRpcProvider
}
type UseNetworksSetState = (params: { fromId: ChainId; toId?: ChainId }) => void
function useNetworks(): [UseNetworksState, UseNetworksSetState] {}

useNetworksRelationship - Temporary hook until we replace it with useNetworks. API is closer to current useNetworksAndSigners, returning parent and child chains.

type UseNetworksRelationshipState = {
  childProvider: StaticJsonRpcProvider
  childChain: Chain
  parentChain: Chain
  parentProvider: StaticJsonRpcProvider
}
export function useNetworksRelationship({
  fromProvider,
  from,
  toProvider,
  to
}: UseNetworksState): UseNetworksRelationshipState {}

Deprecating

useNetworksAndSigners hook - replaced by useNetworks hook
l2ChainId query param - replaced by child chain

Timeline

Tasks

Preview Give feedback

1. Add useNetworks and useNetworksRelationship to our codebase #1296
   +0
   
2. Replace useNetworksAndSigners with useNetworks and useNetworksRelationship #1298
   +0
   
3. Use useNetworksRelationship inside useArbTokenBridge #1432
   +0
   
4. Refactor code as needed for connected users
5. Enable non-connected user to interact with the bridge

[fionnachan]

most are done, remaining task "Enable non-connected user to interact with the bridge" is tracked on Linear