feat: add useNetworks and useNetworksRelationship hooks

packages/arb-token-bridge-ui/jest.config.js

@@ -19,7 +19,10 @@ const transformNodeModules = [
   // The following are dependencies for query-string (https://github.com/sindresorhus/query-string/blob/main/package.json)
   'decode-uri-component',
   'split-on-first',
-  'filter-obj'
+  'filter-obj',
+  // wagmi
+  '@wagmi',
+  'wagmi'
 ]
 
 module.exports = async function () {

packages/arb-token-bridge-ui/src/hooks/__tests__/useNetworks.test.ts

@@ -0,0 +1,26 @@
+/**
+ * @jest-environment jsdom
+ */
+import { sanitizeQueryParams } from '../useNetworks'
+
+describe('sanitizeQueryParams', () => {
+  it('sets the default values for `from` and `to` when both `from` and `to` are `undefined`', () => {
+    const result = sanitizeQueryParams({ from: undefined, to: undefined })
+    expect(result).toEqual({ from: 'ethereum', to: 'arbitrumOne' })
+  })
+
+  it('sets the value for `to` to the partner chain of `from` when `to` is `undefined`', () => {
+    const result = sanitizeQueryParams({ from: 'ethereum', to: undefined })
+    expect(result).toEqual({ from: 'ethereum', to: 'arbitrumOne' })
+  })
+
+  it('sets the value for `from` to the partner chain of `to` when `from` is `undefined`', () => {
+    const result = sanitizeQueryParams({ from: undefined, to: 'arbitrumNova' })
+    expect(result).toEqual({ from: 'ethereum', to: 'arbitrumNova' })
+  })
+
+  it('sets the value for `to` to the partner chain of `from` when `to` is an invalid value', () => {
+    const result = sanitizeQueryParams({ from: 'goerli', to: 'arbitrumOne' })
+    expect(result).toEqual({ from: 'goerli', to: 'arbitrumGoerli' })
+  })
+})

packages/arb-token-bridge-ui/src/hooks/useArbQueryParams.tsx

@@ -25,6 +25,11 @@ import {
   withDefault
 } from 'use-query-params'
 
+import {
+  ChainQueryParam,
+  isValidChainQueryParam
+} from '../types/ChainQueryParam'
+
 export enum AmountQueryParamEnum {
   MAX = 'max'
 }
@@ -37,6 +42,8 @@ export const useArbQueryParams = () => {
     ]
   */
   return useQueryParams({
+    from: ChainParam,
+    to: ChainParam,
     amount: withDefault(AmountQueryParam, ''), // amount which is filled in Transfer panel
     l2ChainId: NumberParam, // L2 chain-id with which we can initiaze (override) our networks/signer
     token: StringParam, // import a new token using a Dialog Box
@@ -97,6 +104,23 @@ export const AmountQueryParam = {
   }
 }
 
+export const ChainParam = {
+  encode: (value: string | (string | null)[] | null | undefined) => value,
+  decode: (
+    value: string | (string | null)[] | null | undefined
+  ): ChainQueryParam | undefined => {
+    if (typeof value !== 'string') {
+      return undefined
+    }
+
+    if (!isValidChainQueryParam(value)) {
+      return undefined
+    }
+
+    return value
+  }
+}
+
 export function ArbQueryParamProvider({
   children
 }: {

packages/arb-token-bridge-ui/src/hooks/useNetworks.ts

@@ -0,0 +1,142 @@
+import { Chain } from 'wagmi'
+import { StaticJsonRpcProvider } from '@ethersproject/providers'
+import { useCallback, useMemo } from 'react'
+
+import { useArbQueryParams } from './useArbQueryParams'
+import {
+  ChainQueryParam,
+  getChainForChainQueryParam,
+  getChainQueryParamForChain
+} from '../types/ChainQueryParam'
+import { ChainId, rpcURLs } from '../util/networks'
+import { getPartnerChainsForChain } from '../util/wagmi/getPartnerChainsForChain'
+
+function getPartnerChainsQueryParams(
+  chainQueryParam: ChainQueryParam
+): ChainQueryParam[] {
+  const chain = getChainForChainQueryParam(chainQueryParam)
+  const partnerChains = getPartnerChainsForChain(chain)
+
+  return partnerChains.map(chain => getChainQueryParamForChain(chain.id))
+}
+
+const getProviderForChainCache: {
+  [rpcUrl: string]: StaticJsonRpcProvider
+} = {
+  // start with empty cache
+}
+
+function createProviderWithCache(rpcUrl: string, chainId: ChainId) {
+  const provider = new StaticJsonRpcProvider(rpcUrl, chainId)
+  getProviderForChainCache[rpcUrl] = provider
+  return provider
+}
+
+function getProviderForChain(chain: Chain): StaticJsonRpcProvider {
+  const rpcUrl = rpcURLs[chain.id]
+
+  if (typeof rpcUrl === 'undefined') {
+    throw new Error(`[getProviderForChain] Unexpected chain id: ${chain.id}`)
+  }
+
+  const cachedProvider = getProviderForChainCache[rpcUrl]
+
+  if (typeof cachedProvider !== 'undefined') {
+    return cachedProvider
+  }
+
+  return createProviderWithCache(rpcUrl, chain.id)
+}
+
+export function sanitizeQueryParams({
+  from,
+  to
+}: {
+  from: ChainQueryParam | undefined
+  to: ChainQueryParam | undefined
+}): {
+  from: ChainQueryParam
+  to: ChainQueryParam
+} {
+  // when both `from` and `to` are undefined, default to Ethereum and Arbitrum One
+  if (typeof from === 'undefined' && typeof to === 'undefined') {
+    return { from: 'ethereum', to: 'arbitrumOne' }
+  }
+
+  // only `from` is undefined
+  if (typeof from === 'undefined' && typeof to !== 'undefined') {
+    // get the counter
+    const [defaultFrom] = getPartnerChainsQueryParams(to)
+    return { from: defaultFrom!, to }
+  }
+
+  // only `to` is undefined
+  if (typeof from !== 'undefined' && typeof to === 'undefined') {
+    const [defaultTo] = getPartnerChainsQueryParams(from)
+    return { from, to: defaultTo as ChainQueryParam }
+  }
+
+  // both values are defined, but `to` is an invalid partner chain
+  if (!getPartnerChainsQueryParams(from!).includes(to!)) {
+    const [defaultTo] = getPartnerChainsQueryParams(from!)
+    return { from: from!, to: defaultTo! }
+  }
+
+  return { from: from!, to: to! }
+}
+
+export type UseNetworksState = {
+  from: Chain
+  fromProvider: StaticJsonRpcProvider
+  to: Chain
+  toProvider: StaticJsonRpcProvider
+}
+
+export type UseNetworksSetStateParams = { fromId: ChainId; toId?: ChainId }
+export type UseNetworksSetState = (params: UseNetworksSetStateParams) => void
+
+export function useNetworks(): [UseNetworksState, UseNetworksSetState] {
+  const [{ from, to }, setQueryParams] = useArbQueryParams()
+  const { from: validFrom, to: validTo } = sanitizeQueryParams({ from, to })
+
+  const setState = useCallback(
+    (params: UseNetworksSetStateParams) => {
+      const fromQueryParam = getChainQueryParamForChain(params.fromId)
+      if (!params.toId) {
+        const [toQueryParam] = getPartnerChainsQueryParams(fromQueryParam)
+        setQueryParams(
+          sanitizeQueryParams({ from: fromQueryParam, to: toQueryParam })
+        )
+        return
+      }
+
+      const toQueryParam = getChainQueryParamForChain(params.toId)
+
+      setQueryParams(
+        sanitizeQueryParams({ from: fromQueryParam, to: toQueryParam })
+      )
+    },
+    [setQueryParams]
+  )
+
+  if (from !== validFrom || to !== validTo) {
+    // On the first render, update query params with the sanitized values
+    setQueryParams({ from: validFrom, to: validTo })
+  }
+
+  // The return values of the hook will always be the sanitized values
+  return useMemo(() => {
+    const fromChain = getChainForChainQueryParam(validFrom)
+    const toChain = getChainForChainQueryParam(validTo)
+
+    return [
+      {
+        from: fromChain,
+        fromProvider: getProviderForChain(fromChain),
+        to: toChain,
+        toProvider: getProviderForChain(toChain)
+      },
+      setState
+    ]
+  }, [validFrom, validTo, setState])
+}

packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts

@@ -0,0 +1,46 @@
+import { StaticJsonRpcProvider } from '@ethersproject/providers'
+import { useMemo } from 'react'
+import { Chain } from 'wagmi'
+import { isNetwork } from '../util/networks'
+import { UseNetworksState } from './useNetworks'
+
+type UseNetworksRelationshipState = {
+  childProvider: StaticJsonRpcProvider
+  childChain: Chain
+  parentChain: Chain
+  parentProvider: StaticJsonRpcProvider
+}
+export function useNetworksRelationship({
+  fromProvider,
+  from,
+  toProvider,
+  to
+}: UseNetworksState): UseNetworksRelationshipState {
+  const fromNetwork = fromProvider.network
+  const toNetwork = toProvider.network
+  const {
+    isEthereumMainnet: isFromNetworkEthereum,
+    isArbitrum: isFromNetworkArbitrum
+  } = isNetwork(fromNetwork.chainId)
+  const { isOrbitChain: isToNetworkOrbitChain } = isNetwork(toNetwork.chainId)
+  const isFromNetworkParent =
+    isFromNetworkEthereum || (isFromNetworkArbitrum && isToNetworkOrbitChain)
+
+  return useMemo(() => {
+    if (isFromNetworkParent) {
+      return {
+        parentChain: from,
+        parentProvider: fromProvider,
+        childProvider: toProvider,
+        childChain: to
+      }
+    }
+
+    return {
+      parentChain: to,
+      parentProvider: toProvider,
+      childProvider: fromProvider,
+      childChain: from
+    }
+  }, [fromProvider, from, toProvider, to, isFromNetworkParent])
+}

packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts

@@ -0,0 +1,92 @@
+import { Chain } from 'wagmi'
+import * as chains from 'wagmi/chains'
+
+import { ChainId } from '../util/networks'
+import * as customChains from '../util/wagmi/wagmiAdditionalNetworks'
+
+const chainQueryParams = [
+  'ethereum',
+  'goerli',
+  'sepolia',
+  'arbitrumOne',
+  'arbitrumNova',
+  'arbitrumGoerli',
+  'arbitrumSepolia',
+  'stylus-testnet',
+  'xai-testnet'
+] as const
+
+export type ChainQueryParam = (typeof chainQueryParams)[number]
+
+export function isValidChainQueryParam(
+  value: string
+): value is ChainQueryParam {
+  return (chainQueryParams as readonly string[]).includes(value)
+}
+
+export function getChainQueryParamForChain(chainId: ChainId): ChainQueryParam {
+  switch (chainId) {
+    case ChainId.Ethereum:
+      return 'ethereum'
+
+    case ChainId.Goerli:
+      return 'goerli'
+
+    case ChainId.ArbitrumOne:
+      return 'arbitrumOne'
+
+    case ChainId.ArbitrumNova:
+      return 'arbitrumNova'
+
+    case ChainId.ArbitrumGoerli:
+      return 'arbitrumGoerli'
+
+    case ChainId.StylusTestnet:
+      return 'stylus-testnet'
+
+    case ChainId.XaiTestnet:
+      return 'xai-testnet'
+
+    case ChainId.Sepolia:
+      return 'sepolia'
+
+    case ChainId.ArbitrumSepolia:
+      return 'arbitrumSepolia'
+
+    default:
+      throw new Error(
+        `[getChainQueryParamForChain] Unexpected chain id: ${chainId}`
+      )
+  }
+}
+
+export function getChainForChainQueryParam(value: ChainQueryParam): Chain {
+  switch (value) {
+    case 'ethereum':
+      return chains.mainnet
+
+    case 'goerli':
+      return chains.goerli
+
+    case 'sepolia':
+      return chains.sepolia
+
+    case 'arbitrumOne':
+      return chains.arbitrum
+
+    case 'arbitrumNova':
+      return customChains.arbitrumNova
+
+    case 'arbitrumGoerli':
+      return chains.arbitrumGoerli
+
+    case 'arbitrumSepolia':
+      return customChains.arbitrumSepolia
+
+    case 'stylus-testnet':
+      return customChains.stylusTestnet
+
+    case 'xai-testnet':
+      return customChains.xaiTestnet
+  }
+}