Update V2 Components (#108)

packages/backend/src/api/controllers/discovery/DiscoveryController.ts

@@ -11,8 +11,8 @@ import {
   DefaultExecutors,
   DefaultUlnConfigs,
   DiscoveryApi,
+  EndpointID,
   EthereumAddress,
-  getChainIdFromEndpointId,
   RemoteChain,
 } from '@lz/libs'
 
@@ -318,14 +318,14 @@ function getRemoteChains(ulnV2: ContractParameters): RemoteChain[] {
     'ulnLookup',
   )
 
-  for (const [lzChainId] of Object.entries(defaultAdapterParams)) {
-    const lzChainIdNumber = Number(lzChainId)
-    const chainId = getChainIdFromEndpointId(lzChainIdNumber)
+  for (const [endpointId] of Object.entries(defaultAdapterParams)) {
+    const numericEndpointId = Number(endpointId)
+    const chainId = EndpointID.decodeV1(numericEndpointId)
     if (!chainId) continue
-    let adapterParams = defaultAdapterParams[lzChainIdNumber]
+    let adapterParams = defaultAdapterParams[numericEndpointId]
     assert(
       adapterParams !== undefined,
-      'Adapter params not found for chain ' + lzChainId,
+      'Adapter params not found for chain ' + endpointId,
     )
 
     // Some chains have multiple proof types
@@ -335,31 +335,31 @@ function getRemoteChains(ulnV2: ContractParameters): RemoteChain[] {
       adapterParams = [adapterParams]
     }
 
-    const appConfig = defaultAppConfig[lzChainIdNumber]
-    assert(appConfig, 'App config not found for chain ' + lzChainId)
+    const appConfig = defaultAppConfig[numericEndpointId]
+    assert(appConfig, 'App config not found for chain ' + endpointId)
     assert(
       appConfig.inboundProofLib !== undefined,
-      'Inbound proof lib not found for chain ' + lzChainId,
+      'Inbound proof lib not found for chain ' + endpointId,
     )
     assert(
       appConfig.inboundBlockConfirm !== undefined,
-      'Inbound proof confirm not found for chain ' + lzChainId,
+      'Inbound proof confirm not found for chain ' + endpointId,
     )
     assert(
       appConfig.outboundProofType !== undefined,
-      'Outbound proof type not found for chain ' + lzChainId,
+      'Outbound proof type not found for chain ' + endpointId,
     )
     assert(
       appConfig.outboundBlockConfirm !== undefined,
-      'Outbound block confirm not found for chain ' + lzChainId,
+      'Outbound block confirm not found for chain ' + endpointId,
     )
-    assert(appConfig.oracle, 'Oracle not found for chain ' + lzChainId)
-    assert(appConfig.relayer, 'Relayer not found for chain ' + lzChainId)
+    assert(appConfig.oracle, 'Oracle not found for chain ' + endpointId)
+    assert(appConfig.relayer, 'Relayer not found for chain ' + endpointId)
 
-    const inboundProofLibraryValue = inboundProofLibraries[lzChainIdNumber]
+    const inboundProofLibraryValue = inboundProofLibraries[numericEndpointId]
     assert(
       inboundProofLibraryValue !== undefined,
-      'Inbound proof library not found for chain ' + lzChainId,
+      'Inbound proof library not found for chain ' + endpointId,
     )
     const inboundProofLibraryMap = Array.isArray(inboundProofLibraryValue)
       ? inboundProofLibraryValue.map(EthereumAddress)
@@ -368,22 +368,22 @@ function getRemoteChains(ulnV2: ContractParameters): RemoteChain[] {
       inboundProofLibraryMap[+appConfig.inboundProofLib - 1]
     assert(
       inboundProofLibraryAddress !== undefined,
-      'Inbound proof library not found for chain ' + lzChainId,
+      'Inbound proof library not found for chain ' + endpointId,
     )
 
-    const supportedOutboundProof = supportedOutboundProofs[lzChainIdNumber]
+    const supportedOutboundProof = supportedOutboundProofs[numericEndpointId]
     assert(
       supportedOutboundProof !== undefined,
-      'Outbound proof library not found for chain ' + lzChainId,
+      'Outbound proof library not found for chain ' + endpointId,
     )
 
-    const uln = ulnLookup[lzChainId]
-    assert(uln, 'ULN not found for chain ' + lzChainId)
+    const uln = ulnLookup[endpointId]
+    assert(uln, 'ULN not found for chain ' + endpointId)
 
     remoteChainsMap.push({
       name: ChainId.getName(chainId),
       chainId,
-      lzChainId: lzChainIdNumber,
+      lzChainId: numericEndpointId,
       uln: bytes32ToAddress(Bytes.fromHex(uln)),
       defaultAppConfig: {
         inboundProofLib: {

packages/frontend/src/config/config.staging.ts

@@ -3,7 +3,7 @@ import { Config } from './Config'
 export function getStagingConfig(): Config {
   return {
     features: {
-      v2visible: false,
+      v2visible: true,
     },
     apiUrl: 'https://lz-monitoring-7eda96cf0a1b.herokuapp.com/',
   }

packages/frontend/src/constants/protocol-version.tsx

@@ -5,3 +5,7 @@ export const PROTOCOL_VERSION = {
 
 export type ProtocolVersion =
   (typeof PROTOCOL_VERSION)[keyof typeof PROTOCOL_VERSION]
+
+export function isProtocolVersion(version: string): version is ProtocolVersion {
+  return Object.values(PROTOCOL_VERSION).includes(version as ProtocolVersion)
+}

packages/frontend/src/hooks/useChainQueryParam.ts

@@ -1,7 +1,6 @@
 import { ChainId } from '@lz/libs'
-import { useEffect, useState } from 'react'
 
-import { useQueryParam } from './useQueryParam'
+import { useSerializableQueryParam } from './useSerializableQueryParam'
 
 function serialize(chainId: ChainId): string | null {
   try {
@@ -19,46 +18,20 @@ function deserialize(value: string): ChainId | null {
   }
 }
 
-interface UseChainQueryParamOptions {
-  /**
-   * Chain ID to use if the query param is not set
-   * If not set, value will be nullable
-   */
-  fallback?: ChainId
-
-  /**
-   * Key used to store the query param
-   */
-  paramName: string
+export function useSafeChainQueryParam(paramName: string, fallback: ChainId) {
+  return useSerializableQueryParam({
+    paramName,
+    fallback,
+    serialize,
+    deserialize,
+  })
 }
 
-// We can do that in the generic way such as `useSerializableQueryParam<T>` but it's not needed for now
-export function useChainQueryParam<Params extends UseChainQueryParamOptions>({
-  fallback,
-  paramName,
-}: Params) {
-  const [currentParam, setCurrentParam] = useQueryParam(paramName)
-
-  const actualFallback = fallback ?? null
-
-  // Deserialize string into ChainId if present
-  // Otherwise persist null/fallback
-  const param = currentParam
-    ? deserialize(currentParam) ?? actualFallback
-    : actualFallback
-
-  const [deserializedParam, setDeserializedParam] = useState<ChainId | null>(
-    param,
-  )
-
-  useEffect(() => {
-    setCurrentParam(deserializedParam ? serialize(deserializedParam) : null)
-  }, [deserializedParam, setCurrentParam])
-
-  return [
-    deserializedParam,
-    setDeserializedParam,
-  ] as Params['fallback'] extends ChainId
-    ? [ChainId, React.Dispatch<React.SetStateAction<ChainId>>]
-    : [ChainId | null, React.Dispatch<React.SetStateAction<ChainId | null>>]
+export function useChainQueryParam(paramName: string) {
+  return useSerializableQueryParam({
+    paramName,
+    serialize,
+    deserialize,
+    fallback: undefined,
+  })
 }

packages/frontend/src/hooks/useSerializableQueryParam.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+
+import { useQueryParam } from './useQueryParam'
+
+interface BaseOptions<T> {
+  paramName: string
+  serialize: (value: T) => string | null
+  deserialize: (value: string) => T | null
+}
+type WithFallback<T> = BaseOptions<T> & {
+  fallback: T
+}
+
+type WithoutFallback<T> = BaseOptions<T> & {
+  fallback: undefined
+}
+
+export function useSerializableQueryParam<T>(
+  options: WithFallback<T>,
+): [NonNullable<T>, (newValue: NonNullable<T>) => void]
+export function useSerializableQueryParam<T>(
+  options: WithoutFallback<T>,
+): [T | null, (newValue: T | null) => void]
+export function useSerializableQueryParam<T>({
+  paramName,
+  fallback,
+  serialize,
+  deserialize,
+}: WithFallback<T> | WithFallback<T>) {
+  const [currentParam, setCurrentParam] = useQueryParam(paramName)
+
+  const actualFallback = fallback ?? null
+
+  const param = currentParam
+    ? deserialize(currentParam) ?? actualFallback
+    : actualFallback
+
+  const [deserializedParam, setDeserializedParam] = useState(param)
+
+  useEffect(() => {
+    setCurrentParam(deserializedParam ? serialize(deserializedParam) : null)
+  }, [deserializedParam, setCurrentParam, serialize])
+
+  return [deserializedParam, setDeserializedParam] as const
+}

packages/frontend/src/hooks/useVersionQueryParam.ts

@@ -0,0 +1,33 @@
+import {
+  isProtocolVersion,
+  ProtocolVersion,
+} from '../constants/protocol-version'
+import { useSerializableQueryParam } from './useSerializableQueryParam'
+
+function serialize(version: ProtocolVersion): string | null {
+  if (isProtocolVersion(version)) {
+    return version
+  }
+
+  return null
+}
+
+function deserialize(version: string): ProtocolVersion | null {
+  if (isProtocolVersion(version)) {
+    return version
+  }
+
+  return null
+}
+
+export function useVersionQueryParam(
+  paramName: string,
+  fallback: ProtocolVersion,
+) {
+  return useSerializableQueryParam({
+    paramName,
+    fallback,
+    serialize,
+    deserialize,
+  })
+}

packages/frontend/src/view/components/ChainDropdown.tsx

@@ -0,0 +1,43 @@
+import { ChainId } from '@lz/libs'
+
+import { Dropdown, DropdownOption } from './Dropdown'
+import { toDropdownOption } from './protocol/utils'
+
+export function ChainDropdown(props: {
+  chains: ChainId[]
+  selectedChainId?: ChainId
+  setSelectedChainId: (chain: ChainId) => void
+}) {
+  function onDropdownSelect(option: DropdownOption): void {
+    const chain = props.chains.find(
+      (chain) => ChainId.getName(chain) === option.value,
+    )
+
+    if (!chain) {
+      return
+    }
+
+    props.setSelectedChainId(chain)
+  }
+
+  const dropdownOptions = props.chains.map(toDropdownOption)
+
+  const hasAnyChains = props.chains.length > 0
+
+  const nullableDefault =
+    props.selectedChainId && hasAnyChains
+      ? { defaultValue: toDropdownOption(props.selectedChainId) }
+      : {}
+
+  if (!hasAnyChains) {
+    return null
+  }
+
+  return (
+    <Dropdown
+      options={dropdownOptions}
+      onChange={onDropdownSelect}
+      {...nullableDefault}
+    />
+  )
+}