From bd64987082d64c3616c2769dd0ac47aa6cbd1bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 14:59:29 +0100
Subject: [PATCH 01/10] feat: refactor version selection

---
 .../discovery/DiscoveryController.ts          | 44 +++++-----
 .../src/constants/protocol-version.tsx        |  4 +
 .../frontend/src/hooks/useChainQueryParam.ts  | 57 ++++---------
 .../src/hooks/useSerializableQueryParam.ts    | 45 +++++++++++
 .../src/hooks/useVersionQueryParam.ts         | 33 ++++++++
 .../components/DefaultExecutorsTable.tsx.tsx  | 20 ++---
 .../src/view/components/NetworkData.tsx       |  8 +-
 .../src/view/components/NetworkSelector.tsx   |  4 +
 .../src/view/components/Selectors.tsx         |  0
 .../src/view/components/VersionSelector.tsx   | 81 +++++++++++++++++++
 .../src/view/components/VersionSwitch.tsx     | 28 -------
 .../components/changelog/ChangelogDetails.tsx |  4 +-
 .../protocol/ProtocolInformation.tsx          | 50 +++++-------
 .../view/components/protocol/RemoteChain.tsx  | 11 ++-
 packages/libs/src/chainId/endpointId.ts       | 33 +++++---
 15 files changed, 269 insertions(+), 153 deletions(-)
 create mode 100644 packages/frontend/src/hooks/useSerializableQueryParam.ts
 create mode 100644 packages/frontend/src/hooks/useVersionQueryParam.ts
 create mode 100644 packages/frontend/src/view/components/Selectors.tsx
 create mode 100644 packages/frontend/src/view/components/VersionSelector.tsx
 delete mode 100644 packages/frontend/src/view/components/VersionSwitch.tsx

diff --git a/packages/backend/src/api/controllers/discovery/DiscoveryController.ts b/packages/backend/src/api/controllers/discovery/DiscoveryController.ts
index 7b6a9581..69988669 100644
--- a/packages/backend/src/api/controllers/discovery/DiscoveryController.ts
+++ b/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: {
diff --git a/packages/frontend/src/constants/protocol-version.tsx b/packages/frontend/src/constants/protocol-version.tsx
index f7f570bd..44e2c0fd 100644
--- a/packages/frontend/src/constants/protocol-version.tsx
+++ b/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)
+}
diff --git a/packages/frontend/src/hooks/useChainQueryParam.ts b/packages/frontend/src/hooks/useChainQueryParam.ts
index 3332ef6d..f0b157df 100644
--- a/packages/frontend/src/hooks/useChainQueryParam.ts
+++ b/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,
+  })
 }
diff --git a/packages/frontend/src/hooks/useSerializableQueryParam.ts b/packages/frontend/src/hooks/useSerializableQueryParam.ts
new file mode 100644
index 00000000..f19295d9
--- /dev/null
+++ b/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
+}
diff --git a/packages/frontend/src/hooks/useVersionQueryParam.ts b/packages/frontend/src/hooks/useVersionQueryParam.ts
new file mode 100644
index 00000000..1ae54c22
--- /dev/null
+++ b/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,
+  })
+}
diff --git a/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx b/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
index 4427cbf9..b79d9b76 100644
--- a/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
+++ b/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
@@ -6,18 +6,20 @@ import { ValueTable } from './ValueTable'
 export function DefaultExecutorsTable(props: {
   defaultExecutors: DefaultExecutors
 }) {
-  const rows = Object.entries(props.defaultExecutors).map(([eid, executor]) => (
-    <>
-      <span>{eid}</span>
-      <span>
-        <BlockchainAddress address={EthereumAddress(executor)} />
-      </span>
-    </>
-  ))
+  const rows = Object.entries(props.defaultExecutors).map(([eid, executor]) => {
+    return (
+      <>
+        <span>{eid}</span>
+        <span>
+          <BlockchainAddress address={EthereumAddress(executor)} />
+        </span>
+      </>
+    )
+  })
 
   return (
     <ValueTable
-      title="Default Executors "
+      title="Default Executors"
       headers={['EID', 'Executor']}
       colsClass="grid-cols-default-executors"
       rows={rows}
diff --git a/packages/frontend/src/view/components/NetworkData.tsx b/packages/frontend/src/view/components/NetworkData.tsx
index 48f689b9..3d58ae17 100644
--- a/packages/frontend/src/view/components/NetworkData.tsx
+++ b/packages/frontend/src/view/components/NetworkData.tsx
@@ -1,4 +1,4 @@
-import { getEndpointIdFromChainId } from '@lz/libs'
+import { EndpointID } from '@lz/libs'
 
 import { useChainId } from '../../hooks/chainIdContext'
 import { MaxWidthLayout } from './Layout'
@@ -11,16 +11,14 @@ interface Props {
 
 export function NetworkData({ latestBlock, isLoading }: Props): JSX.Element {
   const chainId = useChainId()
+  const endpointId = EndpointID.encodeV1(chainId)
   return (
     <section className="mb-4 bg-gray-900 p-4 md:mb-10 md:p-8">
       <MaxWidthLayout>
         <section className="relative flex items-stretch gap-2.5 md:gap-5">
           {isLoading && <LoadingCover />}
           <DataBlock label="Chain ID" value={chainId.toString()} />
-          <DataBlock
-            label="Endpoint ID"
-            value={getEndpointIdFromChainId(chainId)}
-          />
+          <DataBlock label="Endpoint ID" value={endpointId} />
           <DataBlock label="Latest block" value={latestBlock} />
         </section>
       </MaxWidthLayout>
diff --git a/packages/frontend/src/view/components/NetworkSelector.tsx b/packages/frontend/src/view/components/NetworkSelector.tsx
index 61328bee..c6e1886b 100644
--- a/packages/frontend/src/view/components/NetworkSelector.tsx
+++ b/packages/frontend/src/view/components/NetworkSelector.tsx
@@ -27,6 +27,10 @@ export function NetworkSelector(props: Props) {
     return () => window.removeEventListener('scroll', onScroll)
   }, [])
 
+  useEffect(() => {
+    setOptimisticSelect(props.chainId)
+  }, [props.chainId])
+
   function onScroll() {
     setSmall(window.scrollY > 0)
   }
diff --git a/packages/frontend/src/view/components/Selectors.tsx b/packages/frontend/src/view/components/Selectors.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend/src/view/components/VersionSelector.tsx b/packages/frontend/src/view/components/VersionSelector.tsx
new file mode 100644
index 00000000..35584755
--- /dev/null
+++ b/packages/frontend/src/view/components/VersionSelector.tsx
@@ -0,0 +1,81 @@
+import cx from 'classnames'
+import { useEffect, useRef } from 'react'
+
+import {
+  PROTOCOL_VERSION,
+  ProtocolVersion,
+} from '../../constants/protocol-version'
+
+interface Props {
+  version: ProtocolVersion
+  setVersion: (version: ProtocolVersion) => void
+}
+
+export function VersionSelector(props: Props) {
+  const versions = Object.values(PROTOCOL_VERSION)
+
+  return (
+    <section
+      className={cx(
+        'z-network-selector bg-gray-900 px-3.5 md:px-6',
+        'py-2 md:pb-3 md:pt-2',
+      )}
+    >
+      <div className="md max-w-fit md:mx-auto">
+        <span className={cx('text-xs text-gray-100 transition-all')}>
+          Select version
+        </span>
+        <div className="flex gap-3 py-1">
+          {versions.map((version) => {
+            return (
+              <PillSelector
+                key={version}
+                label={version}
+                isActive={version === props.version}
+                onClick={() => props.setVersion(version)}
+              />
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function PillSelector({
+  label,
+  isActive,
+  onClick,
+}: {
+  label: string
+  isActive: boolean
+  onClick: () => void
+}) {
+  const focusRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (focusRef.current && isActive) {
+      focusRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+      })
+    }
+  }, [focusRef, isActive])
+
+  return (
+    <div
+      ref={focusRef}
+      className={cx(
+        'flex cursor-pointer items-center justify-center gap-2 rounded px-4 text-center transition-all',
+        isActive
+          ? 'bg-yellow-100 text-black'
+          : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
+        'py-1 md:py-2',
+      )}
+      onClick={onClick}
+    >
+      <span className="text-sm">{label}</span>
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/VersionSwitch.tsx b/packages/frontend/src/view/components/VersionSwitch.tsx
deleted file mode 100644
index 850bc635..00000000
--- a/packages/frontend/src/view/components/VersionSwitch.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import cx from 'classnames'
-
-export function VersionSwitch(props: { children: React.ReactNode }) {
-  return (
-    <div className="-mt-10 mb-10 flex items-center justify-center bg-gray-800 p-4">
-      <div className="flex gap-5">{props.children}</div>
-    </div>
-  )
-}
-
-export function VersionButton(props: {
-  children: React.ReactNode
-  isActive: boolean
-  onClick: () => void
-}) {
-  const bg = props.isActive ? 'bg-yellow-100' : 'bg-yellow-300'
-  return (
-    <button
-      onClick={props.onClick}
-      className={cx(
-        'rounded-lg p-3 font-medium text-black filter transition duration-200 ease-in-out hover:brightness-110',
-        bg,
-      )}
-    >
-      {props.children}
-    </button>
-  )
-}
diff --git a/packages/frontend/src/view/components/changelog/ChangelogDetails.tsx b/packages/frontend/src/view/components/changelog/ChangelogDetails.tsx
index c27176fc..5911545e 100644
--- a/packages/frontend/src/view/components/changelog/ChangelogDetails.tsx
+++ b/packages/frontend/src/view/components/changelog/ChangelogDetails.tsx
@@ -1,7 +1,7 @@
 import {
   Change,
   ChangelogApiEntry,
-  getChainIdFromEndpointId,
+  EndpointID,
   getPrettyChainName,
   Hash256,
   ModificationType,
@@ -159,7 +159,7 @@ function GroupText(props: { group: string; changes: Change[] }) {
   }
 
   const endpointId = props.group
-  const chainId = getChainIdFromEndpointId(+endpointId)
+  const chainId = EndpointID.decodeV1(endpointId)
 
   const text = props.changes.every(
     (change) => change.category === 'REMOTE_ADDED',
diff --git a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
index b1207573..0768e783 100644
--- a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
+++ b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
@@ -1,20 +1,17 @@
 import { ChainId, endpoints, getPrettyChainName } from '@lz/libs'
-import { useState } from 'react'
 import { SkeletonTheme } from 'react-loading-skeleton'
 
 import { config } from '../../../config'
-import {
-  PROTOCOL_VERSION,
-  ProtocolVersion,
-} from '../../../constants/protocol-version'
+import { PROTOCOL_VERSION } from '../../../constants/protocol-version'
 import { AddressInfoContext } from '../../../hooks/addressInfoContext'
 import { ChainInfoContext } from '../../../hooks/chainIdContext'
-import { useChainQueryParam } from '../../../hooks/useChainQueryParam'
+import { useSafeChainQueryParam } from '../../../hooks/useChainQueryParam'
 import { useDiscoveryApi } from '../../../hooks/useDiscoveryApi'
+import { useVersionQueryParam } from '../../../hooks/useVersionQueryParam'
 import { Layout } from '../Layout'
 import { NetworkData } from '../NetworkData'
 import { NetworkSelector } from '../NetworkSelector'
-import { VersionButton, VersionSwitch } from '../VersionSwitch'
+import { VersionSelector } from '../VersionSelector'
 import { Warning } from '../Warning'
 import { EndpointContract } from './EndpointContract'
 import { EndpointV2Contract } from './EndpointV2Contract'
@@ -34,11 +31,12 @@ export function ProtocolInformation({
     ? PROTOCOL_VERSION.V2
     : PROTOCOL_VERSION.V1
 
-  const [version, setVersion] = useState<ProtocolVersion>(defaultVersion)
-  const [paramChain, setParamChain] = useChainQueryParam({
-    fallback: chainsToDisplay[0],
-    paramName: 'chain',
-  })
+  const [version, setVersion] = useVersionQueryParam('version', defaultVersion)
+
+  const [paramChain, setParamChain] = useSafeChainQueryParam(
+    'chain',
+    chainsToDisplay[0],
+  )
 
   const [discoveryResponse, isDiscoveryLoading, isError] = useDiscoveryApi({
     apiUrl: config.apiUrl,
@@ -62,6 +60,10 @@ export function ProtocolInformation({
   if (!discoveryResponse || isError) {
     return (
       <>
+        <VersionSelector
+          version={version}
+          setVersion={(version) => setVersion(version)}
+        />
         <NetworkSelector
           chainId={paramChain}
           chainsToDisplay={chainsToDisplay}
@@ -79,6 +81,9 @@ export function ProtocolInformation({
 
   return (
     <SkeletonTheme baseColor="#27272A" highlightColor="#525252">
+      {config.features.v2visible && (
+        <VersionSelector version={version} setVersion={setVersion} />
+      )}
       <NetworkSelector
         chainId={discoveryResponse.chainId}
         chainsToDisplay={chainsToDisplay}
@@ -90,26 +95,7 @@ export function ProtocolInformation({
             latestBlock={discoveryResponse.data.blockNumber}
             isLoading={isDiscoveryLoading}
           />
-          {config.features.v2visible && (
-            <VersionSwitch>
-              <VersionButton
-                isActive={version === PROTOCOL_VERSION.V1}
-                onClick={() => {
-                  setVersion(PROTOCOL_VERSION.V1)
-                }}
-              >
-                LayerZero V1
-              </VersionButton>
-              <VersionButton
-                isActive={version === PROTOCOL_VERSION.V2}
-                onClick={() => {
-                  setVersion(PROTOCOL_VERSION.V2)
-                }}
-              >
-                LayerZero V2
-              </VersionButton>
-            </VersionSwitch>
-          )}
+
           <Layout>
             {version === PROTOCOL_VERSION.V1 && (
               <>
diff --git a/packages/frontend/src/view/components/protocol/RemoteChain.tsx b/packages/frontend/src/view/components/protocol/RemoteChain.tsx
index 8c923599..e5c607ea 100644
--- a/packages/frontend/src/view/components/protocol/RemoteChain.tsx
+++ b/packages/frontend/src/view/components/protocol/RemoteChain.tsx
@@ -15,16 +15,19 @@ interface Props {
 }
 
 export function RemoteChainComponent(props: Props): JSX.Element | null {
-  const [selectedRemoteChain, setSelectedRemoteChain] = useChainQueryParam({
-    paramName: 'remote-chain',
-  })
+  const [selectedRemoteChain, setSelectedRemoteChain] =
+    useChainQueryParam('remote-chain')
 
   function onDropdownSelect(option: DropdownOption): void {
     const chain = props.remoteChains.find(
       (chain) => chain.name === option.value,
     )
 
-    setSelectedRemoteChain(chain ? ChainId.fromName(chain.name) : null)
+    if (!chain) {
+      return
+    }
+
+    setSelectedRemoteChain(ChainId.fromName(chain.name))
   }
 
   const dropdownOptions = props.remoteChains.map(toDropdownOption)
diff --git a/packages/libs/src/chainId/endpointId.ts b/packages/libs/src/chainId/endpointId.ts
index 79331e7d..40dec847 100644
--- a/packages/libs/src/chainId/endpointId.ts
+++ b/packages/libs/src/chainId/endpointId.ts
@@ -2,8 +2,9 @@
 
 import { ChainId } from './ChainId'
 
-const CHAIN_IDS = [
-  // Mainnet
+export { EndpointID }
+
+const V1_ENDPOINTS = [
   { endpointId: 101, chainId: ChainId.ETHEREUM },
   { endpointId: 102, chainId: ChainId.BSC },
   { endpointId: 106, chainId: ChainId.AVALANCHE },
@@ -16,12 +17,26 @@ const CHAIN_IDS = [
   { endpointId: 184, chainId: ChainId.BASE },
 ]
 
-export function getChainIdFromEndpointId(
-  endpointId: number,
-): ChainId | undefined {
-  return CHAIN_IDS.find((c) => c.endpointId === endpointId)?.chainId
-}
+const V2_ENDPOINTS = [
+  { endpointId: 30101, chainId: ChainId.ETHEREUM },
+  { endpointId: 30102, chainId: ChainId.BSC },
+  { endpointId: 30106, chainId: ChainId.AVALANCHE },
+  { endpointId: 30109, chainId: ChainId.POLYGON_POS },
+  { endpointId: 30110, chainId: ChainId.ARBITRUM },
+  { endpointId: 30111, chainId: ChainId.OPTIMISM },
+  { endpointId: 30125, chainId: ChainId.CELO },
+  { endpointId: 30158, chainId: ChainId.POLYGON_ZKEVM },
+  { endpointId: 30183, chainId: ChainId.LINEA },
+  { endpointId: 30184, chainId: ChainId.BASE },
+]
 
-export function getEndpointIdFromChainId(chainId: ChainId): number | undefined {
-  return CHAIN_IDS.find((c) => c.chainId === chainId)?.endpointId
+const EndpointID = {
+  decodeV1: (endpointId: string | number) =>
+    V1_ENDPOINTS.find((e) => e.endpointId === +endpointId)?.chainId,
+  encodeV1: (chainId: ChainId) =>
+    V1_ENDPOINTS.find((e) => e.chainId === chainId)?.endpointId,
+  decodeV2: (endpointId: string | number) =>
+    V2_ENDPOINTS.find((e) => e.endpointId === +endpointId)?.chainId,
+  encodeV2: (chainId: ChainId) =>
+    V2_ENDPOINTS.find((e) => e.chainId === chainId)?.endpointId,
 }

From faee32e4c1a42bc53b9e4f559666cce113de74d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 19:45:59 +0100
Subject: [PATCH 02/10] feat: refactor V2 components

---
 .../src/view/components/ChainDropdown.tsx     | 43 +++++++++
 .../DefaultExecutorConfigsTable.tsx           | 29 ------
 .../components/DefaultExecutorsTable.tsx.tsx  | 28 ------
 .../components/DefaultUlnConfigsTable.tsx     | 41 ---------
 .../frontend/src/view/components/Dropdown.tsx |  1 +
 .../src/view/components/NetworkData.tsx       | 16 +++-
 .../src/view/components/ValueTable.tsx        | 76 ---------------
 .../components/protocol/EndpointContract.tsx  |  2 +-
 .../protocol/EndpointV2Contract.tsx           | 92 +++++++++++++++++--
 .../protocol/ProtocolInformation.tsx          |  1 +
 .../components/protocol/ReceiveUln301.tsx     | 79 ++++++++++++++--
 .../components/protocol/ReceiveUln302.tsx     | 63 ++++++++++++-
 .../view/components/protocol/SendUln301.tsx   | 75 +++++++++++++--
 .../view/components/protocol/SendUln302.tsx   | 75 +++++++++++++--
 .../components/protocol/UltraLightNode.tsx    |  4 +-
 .../view/components/protocol/remote/Block.tsx | 14 +++
 .../protocol/remote/DefaultExecutorConfig.tsx | 25 +++++
 .../components/protocol/remote/DefaultUln.tsx | 51 ++++++++++
 .../protocol/{ => remote}/RemoteChain.tsx     | 45 +++------
 .../protocol/remote/RemoteSection.tsx         |  3 +
 .../src/view/components/protocol/utils.ts     |  4 +
 21 files changed, 525 insertions(+), 242 deletions(-)
 create mode 100644 packages/frontend/src/view/components/ChainDropdown.tsx
 delete mode 100644 packages/frontend/src/view/components/DefaultExecutorConfigsTable.tsx
 delete mode 100644 packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
 delete mode 100644 packages/frontend/src/view/components/DefaultUlnConfigsTable.tsx
 delete mode 100644 packages/frontend/src/view/components/ValueTable.tsx
 create mode 100644 packages/frontend/src/view/components/protocol/remote/Block.tsx
 create mode 100644 packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
 create mode 100644 packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
 rename packages/frontend/src/view/components/protocol/{ => remote}/RemoteChain.tsx (90%)
 create mode 100644 packages/frontend/src/view/components/protocol/remote/RemoteSection.tsx

diff --git a/packages/frontend/src/view/components/ChainDropdown.tsx b/packages/frontend/src/view/components/ChainDropdown.tsx
new file mode 100644
index 00000000..199713ae
--- /dev/null
+++ b/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}
+    />
+  )
+}
diff --git a/packages/frontend/src/view/components/DefaultExecutorConfigsTable.tsx b/packages/frontend/src/view/components/DefaultExecutorConfigsTable.tsx
deleted file mode 100644
index 97a3d387..00000000
--- a/packages/frontend/src/view/components/DefaultExecutorConfigsTable.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DefaultExecutorConfigs, EthereumAddress } from '@lz/libs'
-
-import { BlockchainAddress } from './BlockchainAddress'
-import { ValueTable } from './ValueTable'
-
-export function DefaultExecutorConfigsTable(props: {
-  defaultExecutorConfigs: DefaultExecutorConfigs
-}) {
-  const rows = Object.entries(props.defaultExecutorConfigs).map(
-    ([eid, config]) => (
-      <>
-        <span>{eid}</span>
-        <span>{config.maxMessageSize}</span>
-        <span>
-          <BlockchainAddress address={EthereumAddress(config.executor)} />
-        </span>
-      </>
-    ),
-  )
-
-  return (
-    <ValueTable
-      title="Default Executor Configurations"
-      headers={['Endpoint ID', 'Max Message Size', 'Executor']}
-      colsClass="grid-cols-default-executor-configs"
-      rows={rows}
-    />
-  )
-}
diff --git a/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx b/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
deleted file mode 100644
index b79d9b76..00000000
--- a/packages/frontend/src/view/components/DefaultExecutorsTable.tsx.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DefaultExecutors, EthereumAddress } from '@lz/libs'
-
-import { BlockchainAddress } from './BlockchainAddress'
-import { ValueTable } from './ValueTable'
-
-export function DefaultExecutorsTable(props: {
-  defaultExecutors: DefaultExecutors
-}) {
-  const rows = Object.entries(props.defaultExecutors).map(([eid, executor]) => {
-    return (
-      <>
-        <span>{eid}</span>
-        <span>
-          <BlockchainAddress address={EthereumAddress(executor)} />
-        </span>
-      </>
-    )
-  })
-
-  return (
-    <ValueTable
-      title="Default Executors"
-      headers={['EID', 'Executor']}
-      colsClass="grid-cols-default-executors"
-      rows={rows}
-    />
-  )
-}
diff --git a/packages/frontend/src/view/components/DefaultUlnConfigsTable.tsx b/packages/frontend/src/view/components/DefaultUlnConfigsTable.tsx
deleted file mode 100644
index 60db07f7..00000000
--- a/packages/frontend/src/view/components/DefaultUlnConfigsTable.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DefaultUlnConfigs, EthereumAddress } from '@lz/libs'
-
-import { BlockchainAddress } from './BlockchainAddress'
-import { ValueTable } from './ValueTable'
-
-export function DefaultUlnConfigsTable(props: {
-  defaultUlnConfigs: DefaultUlnConfigs
-}) {
-  const rows = Object.entries(props.defaultUlnConfigs).map(([eid, config]) => (
-    <div className="col-span-full grid grid-cols-default-uln-configs items-center justify-center border-b border-zinc-650 py-2 text-center text-xs last:border-none">
-      <span>{eid}</span>
-      <span>{config.confirmations}</span>
-      <span>{config.optionalDVNThreshold}</span>
-      <span>
-        {config.requiredDVNs.map((dvn) => (
-          <BlockchainAddress alwaysShort address={EthereumAddress(dvn)} />
-        ))}
-      </span>
-      <span>
-        {config.optionalDVNs.length > 0
-          ? config.optionalDVNs
-          : 'No optional DVNs'}
-      </span>
-    </div>
-  ))
-
-  return (
-    <ValueTable
-      title="Default ULN Configurations"
-      headers={[
-        'EID',
-        'Confirmations',
-        'Optional DVN Threshold',
-        'Required DVNs',
-        'Optional DVNs',
-      ]}
-      colsClass="grid-cols-default-uln-configs"
-      rows={rows}
-    />
-  )
-}
diff --git a/packages/frontend/src/view/components/Dropdown.tsx b/packages/frontend/src/view/components/Dropdown.tsx
index b70e54b9..d96954e2 100644
--- a/packages/frontend/src/view/components/Dropdown.tsx
+++ b/packages/frontend/src/view/components/Dropdown.tsx
@@ -14,6 +14,7 @@ export interface DropdownOption {
 interface Props {
   options: DropdownOption[]
   defaultValue?: DropdownOption
+
   onChange: (option: DropdownOption) => void
 }
 
diff --git a/packages/frontend/src/view/components/NetworkData.tsx b/packages/frontend/src/view/components/NetworkData.tsx
index 3d58ae17..1b9dd652 100644
--- a/packages/frontend/src/view/components/NetworkData.tsx
+++ b/packages/frontend/src/view/components/NetworkData.tsx
@@ -1,17 +1,29 @@
 import { EndpointID } from '@lz/libs'
 
+import {
+  PROTOCOL_VERSION,
+  ProtocolVersion,
+} from '../../constants/protocol-version'
 import { useChainId } from '../../hooks/chainIdContext'
 import { MaxWidthLayout } from './Layout'
 import { LoadingCover } from './status/LoadingCover'
 
 interface Props {
   latestBlock: number
+  version: ProtocolVersion
   isLoading?: boolean
 }
 
-export function NetworkData({ latestBlock, isLoading }: Props): JSX.Element {
+export function NetworkData({
+  latestBlock,
+  version,
+  isLoading,
+}: Props): JSX.Element {
+  const encode =
+    version === PROTOCOL_VERSION.V1 ? EndpointID.encodeV1 : EndpointID.encodeV2
   const chainId = useChainId()
-  const endpointId = EndpointID.encodeV1(chainId)
+  const endpointId = encode(chainId)
+
   return (
     <section className="mb-4 bg-gray-900 p-4 md:mb-10 md:p-8">
       <MaxWidthLayout>
diff --git a/packages/frontend/src/view/components/ValueTable.tsx b/packages/frontend/src/view/components/ValueTable.tsx
deleted file mode 100644
index 8a2825da..00000000
--- a/packages/frontend/src/view/components/ValueTable.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import cx from 'classnames'
-
-export function ValueTable(props: {
-  title: React.ReactNode
-  colsClass: string
-  headers: React.ReactNode[]
-  rows: React.ReactNode[]
-}) {
-  const gridClassName = `${props.colsClass} grid col-span-full`
-  function Header() {
-    return (
-      <div
-        className={cx(
-          'bg-zinc-650 py-3 text-center text-3xs font-semibold text-zinc-200 md:text-2xs',
-          gridClassName,
-        )}
-      >
-        {props.headers.map((header) => (
-          <span>{header}</span>
-        ))}
-      </div>
-    )
-  }
-
-  function Row(props: { row: React.ReactNode }) {
-    return (
-      <div
-        className={cx(
-          'items-center justify-center border-b border-zinc-650 py-2 text-center text-xs last:border-none',
-          gridClassName,
-        )}
-      >
-        {props.row}
-      </div>
-    )
-  }
-
-  return (
-    <Block title={props.title}>
-      <div
-        className={cx(
-          'mt-2 w-full overflow-x-auto rounded border border-zinc-650 md:min-w-[800px]',
-          gridClassName,
-        )}
-      >
-        <Header />
-
-        <div
-          className={cx(
-            'max-h-[450px] overflow-y-auto scrollbar scrollbar-track-gray-400 scrollbar-thumb-yellow-100',
-            gridClassName,
-          )}
-        >
-          {props.rows.map((row) => (
-            <Row row={row} />
-          ))}
-        </div>
-      </div>
-    </Block>
-  )
-}
-
-function Block({
-  title,
-  children,
-}: {
-  title: React.ReactNode
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col border-t border-zinc-400 px-3 py-4 md:px-6 md:py-3">
-      <span className="mb-1 text-sm font-medium md:mb-3">{title}</span>
-      <div className="flex flex-col md:gap-2">{children}</div>
-    </div>
-  )
-}
diff --git a/packages/frontend/src/view/components/protocol/EndpointContract.tsx b/packages/frontend/src/view/components/protocol/EndpointContract.tsx
index 100501ca..76aca5df 100644
--- a/packages/frontend/src/view/components/protocol/EndpointContract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointContract.tsx
@@ -41,7 +41,7 @@ export function EndpointContract(props: Props): JSX.Element {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
index a334a5ab..6fadd455 100644
--- a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
@@ -1,14 +1,17 @@
-import { DiscoveryApi } from '@lz/libs'
+import { ChainId, DiscoveryApi, EndpointID, EthereumAddress } from '@lz/libs'
+import { useState } from 'react'
 
 import { BlockchainAddress } from '../BlockchainAddress'
+import { ChainDropdown } from '../ChainDropdown'
 import { ChangelogSummary } from '../changelog/ChangelogSummary'
-import { Code } from '../Code'
 import { ExpandableContainer } from '../ExpandableContainer'
 import { InfoTooltip } from '../InfoTooltip'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
+import { RemoteSection } from './remote/RemoteSection'
+import { intersect } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -42,23 +45,20 @@ export function EndpointV2Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
           />
 
           <Row
+            hideBorder
             label="Blocked Library"
             value={<BlockchainAddress address={props.blockedLibrary} />}
           />
-          <Row
-            label="Default Receive Libraries"
-            value={<Code>{JSON.stringify(props.defaultReceiveLibraries)}</Code>}
-          />
-          <Row
-            label="Default Send Libraries"
-            value={<Code>{JSON.stringify(props.defaultSendLibraries)}</Code>}
+          <EndpointV2RemoteChains
+            defaultReceiveLibraries={props.defaultReceiveLibraries}
+            defaultSendLibraries={props.defaultSendLibraries}
           />
 
           <Row label="EID" value={props.eid} />
@@ -86,3 +86,75 @@ export function EndpointV2Contract(props: Props) {
     </ProtocolComponentCard>
   )
 }
+
+function EndpointV2RemoteChains(props: {
+  defaultReceiveLibraries: DiscoveryApi['contracts']['endpointV2']['defaultReceiveLibraries']
+  defaultSendLibraries: DiscoveryApi['contracts']['endpointV2']['defaultSendLibraries']
+}) {
+  const [selectedChain, setSelectedChain] = useState<ChainId>()
+
+  const chains = intersect(
+    props.defaultReceiveLibraries,
+    props.defaultSendLibraries,
+  )
+    .map(([endpointId]) => EndpointID.decodeV2(endpointId))
+    .filter((maybeChainId): maybeChainId is ChainId => Boolean(maybeChainId))
+
+  const selectedEid = selectedChain ? EndpointID.encodeV2(selectedChain) : null
+
+  const selectedLibraries = selectedEid
+    ? {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        send: props.defaultSendLibraries[selectedEid]!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        receive: props.defaultReceiveLibraries[selectedEid]!,
+      }
+    : null
+
+  return (
+    <div className="mx-2 rounded-lg bg-zinc-300">
+      <Row
+        hideBorder
+        className="!px-3 md:!px-6"
+        label={
+          <InfoTooltip text="List of send/receive chain pathways configured">
+            Remote chains
+          </InfoTooltip>
+        }
+        value={
+          chains.length > 0 ? (
+            <ChainDropdown
+              chains={chains}
+              selectedChainId={selectedChain}
+              setSelectedChainId={setSelectedChain}
+            />
+          ) : (
+            <div className="text-right text-gray-100">
+              There are no supported path-ways to display for this chain
+            </div>
+          )
+        }
+      />
+      {selectedChain && selectedLibraries && (
+        <RemoteSection>
+          <Row
+            label="Default send library"
+            value={
+              <BlockchainAddress
+                address={EthereumAddress(selectedLibraries.send)}
+              />
+            }
+          />
+          <Row
+            label="Default receive library"
+            value={
+              <BlockchainAddress
+                address={EthereumAddress(selectedLibraries.receive)}
+              />
+            }
+          />
+        </RemoteSection>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
index 0768e783..22f45435 100644
--- a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
+++ b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
@@ -92,6 +92,7 @@ export function ProtocolInformation({
       <ChainInfoContext.Provider value={discoveryResponse.chainId}>
         <AddressInfoContext.Provider value={discoveryResponse.data.addressInfo}>
           <NetworkData
+            version={version}
             latestBlock={discoveryResponse.data.blockNumber}
             isLoading={isDiscoveryLoading}
           />
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
index ccad9f8c..00db0aad 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
@@ -1,15 +1,19 @@
-import { DiscoveryApi } from '@lz/libs'
+import { ChainId, DiscoveryApi, EndpointID, EthereumAddress } from '@lz/libs'
+import { useState } from 'react'
 
 import { BlockchainAddress } from '../BlockchainAddress'
+import { ChainDropdown } from '../ChainDropdown'
 import { ChangelogSummary } from '../changelog/ChangelogSummary'
-import { DefaultExecutorsTable } from '../DefaultExecutorsTable.tsx'
-import { DefaultUlnConfigsTable } from '../DefaultUlnConfigsTable'
 import { ExpandableContainer } from '../ExpandableContainer'
 import { InfoTooltip } from '../InfoTooltip'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
+import { Block } from './remote/Block'
+import { DefaultUln } from './remote/DefaultUln'
+import { RemoteSection } from './remote/RemoteSection'
+import { intersect } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -43,16 +47,79 @@ export function ReceiveUln301Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
           />
-          <DefaultExecutorsTable defaultExecutors={props.defaultExecutors} />
-          <DefaultUlnConfigsTable defaultUlnConfigs={props.defaultUlnConfigs} />
+          <ReceiveUln301RemoteChains {...props} />
           <Row label="Version" value={props.version.join('.')} />
         </Subsection>
       </ExpandableContainer>
     </ProtocolComponentCard>
   )
 }
+
+function ReceiveUln301RemoteChains(props: {
+  defaultUlnConfigs: DiscoveryApi['contracts']['receiveUln301']['defaultUlnConfigs']
+  defaultExecutors: DiscoveryApi['contracts']['receiveUln301']['defaultExecutors']
+}) {
+  const [selectedChain, setSelectedChain] = useState<ChainId>()
+
+  const chains = intersect(props.defaultUlnConfigs, props.defaultExecutors)
+    .map(([endpointId]) => EndpointID.decodeV1(endpointId))
+    .filter((maybeChainId): maybeChainId is ChainId => Boolean(maybeChainId))
+
+  const selectedEid = selectedChain ? EndpointID.encodeV1(selectedChain) : null
+
+  const selectedConfiguration = selectedEid
+    ? {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        executor: props.defaultExecutors[selectedEid]!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        uln: props.defaultUlnConfigs[selectedEid]!,
+      }
+    : null
+
+  return (
+    <div className="mx-2 rounded-lg bg-zinc-300">
+      <Row
+        hideBorder
+        className="!px-3 md:!px-6"
+        label={
+          <InfoTooltip text="List of send/receive chain pathways configured">
+            Remote chains
+          </InfoTooltip>
+        }
+        value={
+          chains.length > 0 ? (
+            <ChainDropdown
+              chains={chains}
+              selectedChainId={selectedChain}
+              setSelectedChainId={setSelectedChain}
+            />
+          ) : (
+            <div className="text-right text-gray-100">
+              There are no supported path-ways to display for this chain
+            </div>
+          )
+        }
+      />
+      {selectedChain && selectedConfiguration && (
+        <RemoteSection>
+          <Block title="Default executor">
+            <Row
+              label="Executor"
+              value={
+                <BlockchainAddress
+                  address={EthereumAddress(selectedConfiguration.executor)}
+                />
+              }
+            />
+          </Block>
+          <DefaultUln config={selectedConfiguration.uln} />
+        </RemoteSection>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
index 5b2ac019..79afa5ae 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
@@ -1,14 +1,17 @@
-import { DiscoveryApi } from '@lz/libs'
+import { ChainId, DiscoveryApi, EndpointID } from '@lz/libs'
+import { useState } from 'react'
 
 import { BlockchainAddress } from '../BlockchainAddress'
+import { ChainDropdown } from '../ChainDropdown'
 import { ChangelogSummary } from '../changelog/ChangelogSummary'
-import { DefaultUlnConfigsTable } from '../DefaultUlnConfigsTable'
 import { ExpandableContainer } from '../ExpandableContainer'
 import { InfoTooltip } from '../InfoTooltip'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
+import { DefaultUln } from './remote/DefaultUln'
+import { RemoteSection } from './remote/RemoteSection'
 
 type Props = {
   isLoading?: boolean
@@ -35,6 +38,7 @@ export function ReceiveUln302Contract(props: Props) {
       >
         <Subsection>
           <Row
+            hideBorder
             label={
               <InfoTooltip text="Owner of the Endpoint Contract">
                 Owner
@@ -42,12 +46,14 @@ export function ReceiveUln302Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
           />
-          <DefaultUlnConfigsTable defaultUlnConfigs={props.defaultUlnConfigs} />
+          <ReceiveUln302RemoteChains
+            defaultUlnConfigs={props.defaultUlnConfigs}
+          />
           <Row label="Message Lib Type" value={props.messageLibType} />
           <Row label="Version" value={props.version.join('.')} />
         </Subsection>
@@ -55,3 +61,52 @@ export function ReceiveUln302Contract(props: Props) {
     </ProtocolComponentCard>
   )
 }
+
+function ReceiveUln302RemoteChains(props: {
+  defaultUlnConfigs: DiscoveryApi['contracts']['receiveUln302']['defaultUlnConfigs']
+}) {
+  const [selectedChain, setSelectedChain] = useState<ChainId>()
+
+  const chains = Object.keys(props.defaultUlnConfigs)
+    .map((endpointId) => EndpointID.decodeV2(endpointId))
+    .filter((maybeChainId): maybeChainId is ChainId => Boolean(maybeChainId))
+
+  const selectedEid = selectedChain ? EndpointID.encodeV2(selectedChain) : null
+
+  const selectedConfiguration = selectedEid
+    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      props.defaultUlnConfigs[selectedEid]!
+    : null
+
+  return (
+    <div className="mx-2 rounded-lg bg-zinc-300">
+      <Row
+        hideBorder
+        className="!px-3 md:!px-6"
+        label={
+          <InfoTooltip text="List of send/receive chain pathways configured">
+            Remote chains
+          </InfoTooltip>
+        }
+        value={
+          chains.length > 0 ? (
+            <ChainDropdown
+              chains={chains}
+              selectedChainId={selectedChain}
+              setSelectedChainId={setSelectedChain}
+            />
+          ) : (
+            <div className="text-right text-gray-100">
+              There are no supported path-ways to display for this chain
+            </div>
+          )
+        }
+      />
+      {selectedChain && selectedConfiguration && (
+        <RemoteSection>
+          <DefaultUln config={selectedConfiguration} />
+        </RemoteSection>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/SendUln301.tsx b/packages/frontend/src/view/components/protocol/SendUln301.tsx
index a3ef91c8..b00bc21f 100644
--- a/packages/frontend/src/view/components/protocol/SendUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln301.tsx
@@ -1,15 +1,19 @@
-import { DiscoveryApi } from '@lz/libs'
+import { ChainId, DiscoveryApi, EndpointID } from '@lz/libs'
+import { useState } from 'react'
 
 import { BlockchainAddress } from '../BlockchainAddress'
+import { ChainDropdown } from '../ChainDropdown'
 import { ChangelogSummary } from '../changelog/ChangelogSummary'
-import { DefaultExecutorConfigsTable } from '../DefaultExecutorConfigsTable'
-import { DefaultUlnConfigsTable } from '../DefaultUlnConfigsTable'
 import { ExpandableContainer } from '../ExpandableContainer'
 import { InfoTooltip } from '../InfoTooltip'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
+import { DefaultExecutorConfig } from './remote/DefaultExecutorConfig'
+import { DefaultUln } from './remote/DefaultUln'
+import { RemoteSection } from './remote/RemoteSection'
+import { intersect } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -36,6 +40,7 @@ export function SendUln301Contract(props: Props) {
       >
         <Subsection>
           <Row
+            hideBorder
             label={
               <InfoTooltip text="Owner of the Endpoint Contract">
                 Owner
@@ -43,15 +48,15 @@ export function SendUln301Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
           />
-          <DefaultExecutorConfigsTable
+          <SendUln301RemoteChains
+            defaultUlnConfigs={props.defaultUlnConfigs}
             defaultExecutorConfigs={props.defaultExecutorConfigs}
           />
-          <DefaultUlnConfigsTable defaultUlnConfigs={props.defaultUlnConfigs} />
           <Row
             label="Treasury"
             value={<BlockchainAddress address={props.treasury} />}
@@ -62,3 +67,61 @@ export function SendUln301Contract(props: Props) {
     </ProtocolComponentCard>
   )
 }
+
+function SendUln301RemoteChains(props: {
+  defaultUlnConfigs: DiscoveryApi['contracts']['sendUln301']['defaultUlnConfigs']
+  defaultExecutorConfigs: DiscoveryApi['contracts']['sendUln301']['defaultExecutorConfigs']
+}) {
+  const [selectedChain, setSelectedChain] = useState<ChainId>()
+
+  const chains = intersect(
+    props.defaultUlnConfigs,
+    props.defaultExecutorConfigs,
+  )
+    .map(([endpointId]) => EndpointID.decodeV1(endpointId))
+    .filter((maybeChainId): maybeChainId is ChainId => Boolean(maybeChainId))
+
+  const selectedEid = selectedChain ? EndpointID.encodeV1(selectedChain) : null
+
+  const selectedConfiguration = selectedEid
+    ? {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        executor: props.defaultExecutorConfigs[selectedEid]!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        uln: props.defaultUlnConfigs[selectedEid]!,
+      }
+    : null
+
+  return (
+    <div className="mx-2 rounded-lg bg-zinc-300">
+      <Row
+        hideBorder
+        className="!px-3 md:!px-6"
+        label={
+          <InfoTooltip text="List of send/receive chain pathways configured">
+            Remote chains
+          </InfoTooltip>
+        }
+        value={
+          chains.length > 0 ? (
+            <ChainDropdown
+              chains={chains}
+              selectedChainId={selectedChain}
+              setSelectedChainId={setSelectedChain}
+            />
+          ) : (
+            <div className="text-right text-gray-100">
+              There are no supported path-ways to display for this chain
+            </div>
+          )
+        }
+      />
+      {selectedChain && selectedConfiguration && (
+        <RemoteSection>
+          <DefaultExecutorConfig config={selectedConfiguration.executor} />
+          <DefaultUln config={selectedConfiguration.uln} />
+        </RemoteSection>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/SendUln302.tsx b/packages/frontend/src/view/components/protocol/SendUln302.tsx
index d0898c0b..ee556b53 100644
--- a/packages/frontend/src/view/components/protocol/SendUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln302.tsx
@@ -1,15 +1,19 @@
-import { DiscoveryApi } from '@lz/libs'
+import { ChainId, DiscoveryApi, EndpointID } from '@lz/libs'
+import { useState } from 'react'
 
 import { BlockchainAddress } from '../BlockchainAddress'
+import { ChainDropdown } from '../ChainDropdown'
 import { ChangelogSummary } from '../changelog/ChangelogSummary'
-import { DefaultExecutorConfigsTable } from '../DefaultExecutorConfigsTable'
-import { DefaultUlnConfigsTable } from '../DefaultUlnConfigsTable'
 import { ExpandableContainer } from '../ExpandableContainer'
 import { InfoTooltip } from '../InfoTooltip'
 import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
+import { DefaultExecutorConfig } from './remote/DefaultExecutorConfig'
+import { DefaultUln } from './remote/DefaultUln'
+import { RemoteSection } from './remote/RemoteSection'
+import { intersect } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -36,6 +40,7 @@ export function SendUln302Contract(props: Props) {
       >
         <Subsection>
           <Row
+            hideBorder
             label={
               <InfoTooltip text="Owner of the Endpoint Contract">
                 Owner
@@ -43,14 +48,14 @@ export function SendUln302Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
           />
-          <DefaultUlnConfigsTable defaultUlnConfigs={props.defaultUlnConfigs} />
-          <DefaultExecutorConfigsTable
+          <SendUln302RemoteChains
             defaultExecutorConfigs={props.defaultExecutorConfigs}
+            defaultUlnConfigs={props.defaultUlnConfigs}
           />
           <Row
             label="Treasury"
@@ -63,3 +68,61 @@ export function SendUln302Contract(props: Props) {
     </ProtocolComponentCard>
   )
 }
+
+function SendUln302RemoteChains(props: {
+  defaultUlnConfigs: DiscoveryApi['contracts']['sendUln302']['defaultUlnConfigs']
+  defaultExecutorConfigs: DiscoveryApi['contracts']['sendUln302']['defaultExecutorConfigs']
+}) {
+  const [selectedChain, setSelectedChain] = useState<ChainId>()
+
+  const chains = intersect(
+    props.defaultUlnConfigs,
+    props.defaultExecutorConfigs,
+  )
+    .map(([endpointId]) => EndpointID.decodeV2(endpointId))
+    .filter((maybeChainId): maybeChainId is ChainId => Boolean(maybeChainId))
+
+  const selectedEid = selectedChain ? EndpointID.encodeV2(selectedChain) : null
+
+  const selectedConfiguration = selectedEid
+    ? {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        executor: props.defaultExecutorConfigs[selectedEid]!,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        uln: props.defaultUlnConfigs[selectedEid]!,
+      }
+    : null
+
+  return (
+    <div className="mx-2 rounded-lg bg-zinc-300">
+      <Row
+        hideBorder
+        className="!px-3 md:!px-6"
+        label={
+          <InfoTooltip text="List of send/receive chain pathways configured">
+            Remote chains
+          </InfoTooltip>
+        }
+        value={
+          chains.length > 0 ? (
+            <ChainDropdown
+              chains={chains}
+              selectedChainId={selectedChain}
+              setSelectedChainId={setSelectedChain}
+            />
+          ) : (
+            <div className="text-right text-gray-100">
+              There are no supported path-ways to display for this chain
+            </div>
+          )
+        }
+      />
+      {selectedChain && selectedConfiguration && (
+        <RemoteSection>
+          <DefaultExecutorConfig config={selectedConfiguration.executor} />
+          <DefaultUln config={selectedConfiguration.uln} />
+        </RemoteSection>
+      )}
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/UltraLightNode.tsx b/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
index afb8871a..806dc4cd 100644
--- a/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
+++ b/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
@@ -8,7 +8,7 @@ import { ProtocolComponentCard } from '../ProtocolComponentCard'
 import { Row } from '../Row'
 import { Subsection } from '../Subsection'
 import { UpdatableBadge } from './Badges'
-import { RemoteChainComponent } from './RemoteChain'
+import { RemoteChainComponent } from './remote/RemoteChain'
 
 interface Props {
   address: EthereumAddress
@@ -42,7 +42,7 @@ export function UltraLightNodeContract(props: Props): JSX.Element {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol on this chain is owned by an EOA"
+                warnOnEoa="Protocol component on this chain is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/remote/Block.tsx b/packages/frontend/src/view/components/protocol/remote/Block.tsx
new file mode 100644
index 00000000..1a4f1121
--- /dev/null
+++ b/packages/frontend/src/view/components/protocol/remote/Block.tsx
@@ -0,0 +1,14 @@
+export function Block({
+  title,
+  children,
+}: {
+  title: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col border-t border-zinc-400 px-3 py-4 md:px-6 md:py-3">
+      <span className="mb-1 text-sm font-medium md:mb-3">{title}</span>
+      <div className="flex flex-col md:gap-2">{children}</div>
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
new file mode 100644
index 00000000..f014968e
--- /dev/null
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
@@ -0,0 +1,25 @@
+import { DefaultExecutorConfigs, EthereumAddress } from '@lz/libs'
+
+import { BlockchainAddress } from '../../BlockchainAddress'
+import { Code } from '../../Code'
+import { Row } from '../../Row'
+import { Block } from './Block'
+
+interface Props {
+  config: DefaultExecutorConfigs[keyof DefaultExecutorConfigs]
+}
+
+export function DefaultExecutorConfig({ config }: Props) {
+  return (
+    <Block title="Default executor configuration">
+      <Row
+        label="Max message size"
+        value={<Code>{config.maxMessageSize}</Code>}
+      />
+      <Row
+        label="Executor"
+        value={<BlockchainAddress address={EthereumAddress(config.executor)} />}
+      />
+    </Block>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
new file mode 100644
index 00000000..574cba9f
--- /dev/null
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
@@ -0,0 +1,51 @@
+import { DefaultUlnConfigs, EthereumAddress } from '@lz/libs'
+
+import { BlockchainAddress } from '../../BlockchainAddress'
+import { Row } from '../../Row'
+import { Block } from './Block'
+
+interface Props {
+  config: DefaultUlnConfigs[keyof DefaultUlnConfigs]
+}
+
+export function DefaultUln({ config }: Props) {
+  return (
+    <Block title="Default UltraLightNode configuration">
+      <Row label="Required confirmations" value={config.confirmations} />
+      <Row label="Required DVNs count" value={config.requiredDVNCount} />
+      <Row
+        label="Required DVNs"
+        value={
+          config.requiredDVNs.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {config.requiredDVNs.map((dvn) => (
+                <BlockchainAddress address={EthereumAddress(dvn)} />
+              ))}
+            </div>
+          ) : (
+            <span className=" text-gray-400">No required DVNs</span>
+          )
+        }
+      />
+      <Row label="Optional DVNs count" value={config.optionalDVNCount} />
+      <Row
+        label="Optional DVNs threshold"
+        value={config.optionalDVNThreshold}
+      />
+      <Row
+        label="Optional DVNs"
+        value={
+          config.optionalDVNs.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {config.optionalDVNs.map((rl) => (
+                <BlockchainAddress address={EthereumAddress(rl)} />
+              ))}
+            </div>
+          ) : (
+            <span className=" text-gray-100">No optional DVNs</span>
+          )
+        }
+      />
+    </Block>
+  )
+}
diff --git a/packages/frontend/src/view/components/protocol/RemoteChain.tsx b/packages/frontend/src/view/components/protocol/remote/RemoteChain.tsx
similarity index 90%
rename from packages/frontend/src/view/components/protocol/RemoteChain.tsx
rename to packages/frontend/src/view/components/protocol/remote/RemoteChain.tsx
index e5c607ea..2265ba82 100644
--- a/packages/frontend/src/view/components/protocol/RemoteChain.tsx
+++ b/packages/frontend/src/view/components/protocol/remote/RemoteChain.tsx
@@ -1,14 +1,16 @@
 import { ChainId, RemoteChain } from '@lz/libs'
 import { ethers } from 'ethers'
 
-import { ChainInfoContext } from '../../../hooks/chainIdContext'
-import { useChainQueryParam } from '../../../hooks/useChainQueryParam'
-import { BlockchainAddress } from '../BlockchainAddress'
-import { Code } from '../Code'
-import { Dropdown, DropdownOption } from '../Dropdown'
-import { InfoTooltip } from '../InfoTooltip'
-import { Row } from '../Row'
-import { toDropdownOption } from './utils'
+import { ChainInfoContext } from '../../../../hooks/chainIdContext'
+import { useChainQueryParam } from '../../../../hooks/useChainQueryParam'
+import { BlockchainAddress } from '../../BlockchainAddress'
+import { Code } from '../../Code'
+import { Dropdown, DropdownOption } from '../../Dropdown'
+import { InfoTooltip } from '../../InfoTooltip'
+import { Row } from '../../Row'
+import { toDropdownOption } from '../utils'
+import { Block } from './Block'
+import { RemoteSection } from './RemoteSection'
 
 interface Props {
   remoteChains: RemoteChain[]
@@ -196,7 +198,7 @@ export function RemoteChainComponent(props: Props): JSX.Element | null {
               })}
             </div>
           </Block>
-          <Section>
+          <RemoteSection>
             <Row
               dense
               hideBorder
@@ -214,9 +216,9 @@ export function RemoteChainComponent(props: Props): JSX.Element | null {
                 </div>
               }
             />
-          </Section>
+          </RemoteSection>
 
-          <Section>
+          <RemoteSection>
             <Row
               dense
               hideBorder
@@ -232,32 +234,13 @@ export function RemoteChainComponent(props: Props): JSX.Element | null {
                 </ChainInfoContext.Provider>
               }
             />
-          </Section>
+          </RemoteSection>
         </>
       )}
     </div>
   )
 }
 
-function Block({
-  title,
-  children,
-}: {
-  title: React.ReactNode
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col border-t border-zinc-400 px-3 py-4 md:px-6 md:py-3">
-      <span className="mb-1 text-sm font-medium md:mb-3">{title}</span>
-      <div className="flex flex-col md:gap-2">{children}</div>
-    </div>
-  )
-}
-
-function Section({ children }: { children: React.ReactNode }) {
-  return <div className="border-t border-zinc-400">{children}</div>
-}
-
 /**
  * @notice Unpacks only V1 adapter params due to the hardcoded padding and felts
  */
diff --git a/packages/frontend/src/view/components/protocol/remote/RemoteSection.tsx b/packages/frontend/src/view/components/protocol/remote/RemoteSection.tsx
new file mode 100644
index 00000000..1abd5692
--- /dev/null
+++ b/packages/frontend/src/view/components/protocol/remote/RemoteSection.tsx
@@ -0,0 +1,3 @@
+export function RemoteSection({ children }: { children: React.ReactNode }) {
+  return <div className="border-t border-zinc-400">{children}</div>
+}
diff --git a/packages/frontend/src/view/components/protocol/utils.ts b/packages/frontend/src/view/components/protocol/utils.ts
index 24e62f53..3eb281fd 100644
--- a/packages/frontend/src/view/components/protocol/utils.ts
+++ b/packages/frontend/src/view/components/protocol/utils.ts
@@ -16,3 +16,7 @@ export function toDropdownOption(chain: RemoteChain | ChainId): DropdownOption {
     value: chain.name,
   }
 }
+
+export function intersect<T, K>(a: Record<string, T>, b: Record<string, K>) {
+  return Object.entries(a).filter(([k, _]) => k in b)
+}

From 004e08bbccddef711e5a3c1afa37c91df65d8968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 19:49:42 +0100
Subject: [PATCH 03/10] feat: make v selectors larger

---
 packages/frontend/src/view/components/VersionSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/view/components/VersionSelector.tsx b/packages/frontend/src/view/components/VersionSelector.tsx
index 35584755..76f78f03 100644
--- a/packages/frontend/src/view/components/VersionSelector.tsx
+++ b/packages/frontend/src/view/components/VersionSelector.tsx
@@ -67,11 +67,11 @@ function PillSelector({
     <div
       ref={focusRef}
       className={cx(
-        'flex cursor-pointer items-center justify-center gap-2 rounded px-4 text-center transition-all',
+        'flex cursor-pointer items-center justify-center gap-2 rounded px-5 text-center transition-all',
         isActive
           ? 'bg-yellow-100 text-black'
           : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
-        'py-1 md:py-2',
+        'py-1 md:py-3',
       )}
       onClick={onClick}
     >

From b047c7a86d64b6eb22416ce16ed2459a2b220959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 21:01:56 +0100
Subject: [PATCH 04/10] feat: prevent vs from flickering on boot

---
 .../src/view/components/protocol/ProtocolInformation.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
index 22f45435..35575433 100644
--- a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
+++ b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
@@ -60,10 +60,9 @@ export function ProtocolInformation({
   if (!discoveryResponse || isError) {
     return (
       <>
-        <VersionSelector
-          version={version}
-          setVersion={(version) => setVersion(version)}
-        />
+        {config.features.v2visible && (
+          <VersionSelector version={version} setVersion={setVersion} />
+        )}
         <NetworkSelector
           chainId={paramChain}
           chainsToDisplay={chainsToDisplay}

From 1ca1a2e943d5ead4338474e8bd0548b254292f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 22:09:21 +0100
Subject: [PATCH 05/10] feat: refine mobile version feat: refine some
 descriptions

---
 .../src/view/components/NetworkSelector.tsx   |  2 +-
 .../src/view/components/VersionSelector.tsx   | 30 +++++++++++++++---
 .../protocol/EndpointV2Contract.tsx           |  8 ++---
 .../components/protocol/ReceiveUln301.tsx     | 11 +++----
 .../components/protocol/ReceiveUln302.tsx     | 10 +++---
 .../view/components/protocol/SendUln301.tsx   | 12 +++----
 .../view/components/protocol/SendUln302.tsx   | 12 +++----
 .../protocol/remote/DefaultExecutorConfig.tsx |  2 ++
 .../components/protocol/remote/DefaultUln.tsx | 31 +++++++++++++++----
 9 files changed, 76 insertions(+), 42 deletions(-)

diff --git a/packages/frontend/src/view/components/NetworkSelector.tsx b/packages/frontend/src/view/components/NetworkSelector.tsx
index c6e1886b..7c7cfca0 100644
--- a/packages/frontend/src/view/components/NetworkSelector.tsx
+++ b/packages/frontend/src/view/components/NetworkSelector.tsx
@@ -55,7 +55,7 @@ export function NetworkSelector(props: Props) {
       <div className="mx-auto max-w-fit">
         <span
           className={cx(
-            'block  overflow-hidden text-xs text-gray-100 transition-all',
+            'block overflow-hidden text-xs text-gray-100 transition-all',
             isSmall ? 'max-h-0' : 'max-h-3.5',
           )}
         >
diff --git a/packages/frontend/src/view/components/VersionSelector.tsx b/packages/frontend/src/view/components/VersionSelector.tsx
index 76f78f03..2f32fd71 100644
--- a/packages/frontend/src/view/components/VersionSelector.tsx
+++ b/packages/frontend/src/view/components/VersionSelector.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
   PROTOCOL_VERSION,
@@ -14,6 +14,18 @@ interface Props {
 export function VersionSelector(props: Props) {
   const versions = Object.values(PROTOCOL_VERSION)
 
+  const [isSmall, setSmall] = useState(false)
+
+  function onScroll() {
+    setSmall(window.scrollY > 0)
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll)
+
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
   return (
     <section
       className={cx(
@@ -21,16 +33,22 @@ export function VersionSelector(props: Props) {
         'py-2 md:pb-3 md:pt-2',
       )}
     >
-      <div className="md max-w-fit md:mx-auto">
-        <span className={cx('text-xs text-gray-100 transition-all')}>
+      <div className="max-w-fit md:mx-auto">
+        <span
+          className={cx(
+            'block overflow-hidden text-xs text-gray-100 transition-all',
+            isSmall ? 'max-h-0' : 'max-h-3.5',
+          )}
+        >
           Select version
         </span>
-        <div className="flex gap-3 py-1">
+        <div className="flex gap-3 py-2">
           {versions.map((version) => {
             return (
               <PillSelector
                 key={version}
                 label={version}
+                isSmall={isSmall}
                 isActive={version === props.version}
                 onClick={() => props.setVersion(version)}
               />
@@ -45,10 +63,12 @@ export function VersionSelector(props: Props) {
 function PillSelector({
   label,
   isActive,
+  isSmall,
   onClick,
 }: {
   label: string
   isActive: boolean
+  isSmall: boolean
   onClick: () => void
 }) {
   const focusRef = useRef<HTMLDivElement>(null)
@@ -71,7 +91,7 @@ function PillSelector({
         isActive
           ? 'bg-yellow-100 text-black'
           : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
-        'py-1 md:py-3',
+        isSmall ? 'md:py-3' : 'md:py-3',
       )}
       onClick={onClick}
     >
diff --git a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
index 6fadd455..2e6609b1 100644
--- a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
@@ -27,7 +27,7 @@ export function EndpointV2Contract(props: Props) {
           <V2Badge />
         </div>
       }
-      description="The Endpoint V2 description"
+      description="V2 variant of the Endpoint Contract backward compatible with V1. Contract handles the cross-chain messages transmission, verification, and receipt. It routes messages to the correct messaging library and keeps all message payloads across versions. Ownership of the contract can be renounced by the owner. Contract implements a standardized interface for Omnichain Applications (OApps) to manage security configurations and seamlessly send and receive messages."
       subtitle={<BlockchainAddress address={props.address} full />}
       isLoading={props.isLoading}
     >
@@ -74,7 +74,7 @@ export function EndpointV2Contract(props: Props) {
           />
 
           <Row
-            label="LzToken"
+            label="LayerZero token"
             value={<BlockchainAddress address={props.lzToken} />}
           />
           <Row
@@ -117,8 +117,8 @@ function EndpointV2RemoteChains(props: {
         hideBorder
         className="!px-3 md:!px-6"
         label={
-          <InfoTooltip text="List of send/receive chain pathways configured">
-            Remote chains
+          <InfoTooltip text="List of destination chains supported by this site.">
+            Remote Chain
           </InfoTooltip>
         }
         value={
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
index 00db0aad..0f64b437 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
@@ -23,13 +23,13 @@ export function ReceiveUln301Contract(props: Props) {
   return (
     <ProtocolComponentCard
       title="Receive ULN 301"
+      description="Contract responsible for inbound message verification for V1-based application. Stores default security stack configuration and list of default executors for each configured chain path-way."
       badge={
         <div className="flex gap-2">
           <UpdatableBadge />
           <V2Badge />
         </div>
       }
-      description="ULN 301 Receive for apps"
       subtitle={<BlockchainAddress address={props.address} full />}
       isLoading={props.isLoading}
     >
@@ -41,9 +41,7 @@ export function ReceiveUln301Contract(props: Props) {
         <Subsection>
           <Row
             label={
-              <InfoTooltip text="Owner of the Endpoint Contract">
-                Owner
-              </InfoTooltip>
+              <InfoTooltip text="Owner of this contract">Owner</InfoTooltip>
             }
             value={
               <BlockchainAddress
@@ -87,8 +85,8 @@ function ReceiveUln301RemoteChains(props: {
         hideBorder
         className="!px-3 md:!px-6"
         label={
-          <InfoTooltip text="List of send/receive chain pathways configured">
-            Remote chains
+          <InfoTooltip text="List of destination chains supported by this site.">
+            Remote Chain
           </InfoTooltip>
         }
         value={
@@ -110,6 +108,7 @@ function ReceiveUln301RemoteChains(props: {
           <Block title="Default executor">
             <Row
               label="Executor"
+              className="!p-0 md:!pl-7 md:!pr-4"
               value={
                 <BlockchainAddress
                   address={EthereumAddress(selectedConfiguration.executor)}
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
index 79afa5ae..0187a225 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
@@ -21,13 +21,13 @@ export function ReceiveUln302Contract(props: Props) {
   return (
     <ProtocolComponentCard
       title="Receive ULN 302"
+      description="Contract responsible for inbound message verification for V2-based OApps. Stores default security stack configuration for each configured chain path-way."
       badge={
         <div className="flex gap-2">
           <UpdatableBadge />
           <V2Badge />
         </div>
       }
-      description="ULN 302 Receive for fresh apps"
       subtitle={<BlockchainAddress address={props.address} full />}
       isLoading={props.isLoading}
     >
@@ -40,9 +40,7 @@ export function ReceiveUln302Contract(props: Props) {
           <Row
             hideBorder
             label={
-              <InfoTooltip text="Owner of the Endpoint Contract">
-                Owner
-              </InfoTooltip>
+              <InfoTooltip text="Owner of this contract">Owner</InfoTooltip>
             }
             value={
               <BlockchainAddress
@@ -84,8 +82,8 @@ function ReceiveUln302RemoteChains(props: {
         hideBorder
         className="!px-3 md:!px-6"
         label={
-          <InfoTooltip text="List of send/receive chain pathways configured">
-            Remote chains
+          <InfoTooltip text="List of destination chains supported by this site.">
+            Remote Chain
           </InfoTooltip>
         }
         value={
diff --git a/packages/frontend/src/view/components/protocol/SendUln301.tsx b/packages/frontend/src/view/components/protocol/SendUln301.tsx
index b00bc21f..184fce09 100644
--- a/packages/frontend/src/view/components/protocol/SendUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln301.tsx
@@ -23,13 +23,13 @@ export function SendUln301Contract(props: Props) {
   return (
     <ProtocolComponentCard
       title="Send ULN 301"
+      description="Contract responsible for outbound message verification for V1-based OApps. Stores default security stack configuration and default executor configuration for each configured chain path-way."
       badge={
         <div className="flex gap-2">
           <UpdatableBadge />
           <V2Badge />
         </div>
       }
-      description="ULN 301 for apps"
       subtitle={<BlockchainAddress address={props.address} full />}
       isLoading={props.isLoading}
     >
@@ -42,9 +42,7 @@ export function SendUln301Contract(props: Props) {
           <Row
             hideBorder
             label={
-              <InfoTooltip text="Owner of the Endpoint Contract">
-                Owner
-              </InfoTooltip>
+              <InfoTooltip text="Owner of this contract">Owner</InfoTooltip>
             }
             value={
               <BlockchainAddress
@@ -58,7 +56,7 @@ export function SendUln301Contract(props: Props) {
             defaultExecutorConfigs={props.defaultExecutorConfigs}
           />
           <Row
-            label="Treasury"
+            label="Treasury Contract"
             value={<BlockchainAddress address={props.treasury} />}
           />
           <Row label="Version" value={props.version.join('.')} />
@@ -98,8 +96,8 @@ function SendUln301RemoteChains(props: {
         hideBorder
         className="!px-3 md:!px-6"
         label={
-          <InfoTooltip text="List of send/receive chain pathways configured">
-            Remote chains
+          <InfoTooltip text="List of destination chains supported by this site.">
+            Remote Chain
           </InfoTooltip>
         }
         value={
diff --git a/packages/frontend/src/view/components/protocol/SendUln302.tsx b/packages/frontend/src/view/components/protocol/SendUln302.tsx
index ee556b53..15f5fd06 100644
--- a/packages/frontend/src/view/components/protocol/SendUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln302.tsx
@@ -29,7 +29,7 @@ export function SendUln302Contract(props: Props) {
           <V2Badge />
         </div>
       }
-      description="ULN 302 for fresh apps"
+      description="Contract responsible for outbound message verification for V2-based OApps. Stores default security stack configuration and default executor configuration for each configured chain path-way."
       subtitle={<BlockchainAddress address={props.address} full />}
       isLoading={props.isLoading}
     >
@@ -42,9 +42,7 @@ export function SendUln302Contract(props: Props) {
           <Row
             hideBorder
             label={
-              <InfoTooltip text="Owner of the Endpoint Contract">
-                Owner
-              </InfoTooltip>
+              <InfoTooltip text="Owner of this contract">Owner</InfoTooltip>
             }
             value={
               <BlockchainAddress
@@ -58,7 +56,7 @@ export function SendUln302Contract(props: Props) {
             defaultUlnConfigs={props.defaultUlnConfigs}
           />
           <Row
-            label="Treasury"
+            label="Treasury Contract"
             value={<BlockchainAddress address={props.treasury} />}
           />
           <Row label="Message Lib Type" value={props.messageLibType} />
@@ -99,8 +97,8 @@ function SendUln302RemoteChains(props: {
         hideBorder
         className="!px-3 md:!px-6"
         label={
-          <InfoTooltip text="List of send/receive chain pathways configured">
-            Remote chains
+          <InfoTooltip text="List of destination chains supported by this site.">
+            Remote Chain
           </InfoTooltip>
         }
         value={
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
index f014968e..37e88f3e 100644
--- a/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
@@ -13,11 +13,13 @@ export function DefaultExecutorConfig({ config }: Props) {
   return (
     <Block title="Default executor configuration">
       <Row
+        className="!p-0 md:!pl-7 md:!pr-4"
         label="Max message size"
         value={<Code>{config.maxMessageSize}</Code>}
       />
       <Row
         label="Executor"
+        className="!p-0 md:!pl-7 md:!pr-4"
         value={<BlockchainAddress address={EthereumAddress(config.executor)} />}
       />
     </Block>
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
index 574cba9f..30dbbdb0 100644
--- a/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
@@ -1,6 +1,7 @@
 import { DefaultUlnConfigs, EthereumAddress } from '@lz/libs'
 
 import { BlockchainAddress } from '../../BlockchainAddress'
+import { InfoTooltip } from '../../InfoTooltip'
 import { Row } from '../../Row'
 import { Block } from './Block'
 
@@ -10,11 +11,24 @@ interface Props {
 
 export function DefaultUln({ config }: Props) {
   return (
-    <Block title="Default UltraLightNode configuration">
-      <Row label="Required confirmations" value={config.confirmations} />
-      <Row label="Required DVNs count" value={config.requiredDVNCount} />
+    <Block title="Default Security Stack configuration">
       <Row
-        label="Required DVNs"
+        label={
+          <InfoTooltip text="Amount of confirmations required before dispatching a message">
+            Required confirmations
+          </InfoTooltip>
+        }
+        className="!p-0 md:!pl-7 md:!pr-4"
+        value={config.confirmations}
+      />
+
+      <Row
+        label={
+          <InfoTooltip text="List of DVN addresses required to sign-off before dispatching a message.">
+            Required DVNs
+          </InfoTooltip>
+        }
+        className="!p-0 md:!pl-7 md:!pr-4"
         value={
           config.requiredDVNs.length > 0 ? (
             <div className="flex flex-col gap-2">
@@ -27,13 +41,18 @@ export function DefaultUln({ config }: Props) {
           )
         }
       />
-      <Row label="Optional DVNs count" value={config.optionalDVNCount} />
       <Row
         label="Optional DVNs threshold"
+        className="!p-0 md:!pl-7 md:!pr-4"
         value={config.optionalDVNThreshold}
       />
       <Row
-        label="Optional DVNs"
+        label={
+          <InfoTooltip text="List of DVN addresses that can sign-off before dispatching a message.">
+            Optional DVNs
+          </InfoTooltip>
+        }
+        className="!p-0 md:!pl-7 md:!pr-4"
         value={
           config.optionalDVNs.length > 0 ? (
             <div className="flex flex-col gap-2">

From a9c9589f78c6e6851c02841f7b820ecff185163c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Thu, 15 Feb 2024 23:04:01 +0100
Subject: [PATCH 06/10] feat: refine network selector

---
 .../src/view/components/NetworkSelector.tsx   | 122 ------------------
 .../src/view/components/VersionSelector.tsx   | 101 ---------------
 .../components/protocol/LayerZeroMultisig.tsx |   2 +-
 .../protocol/ProtocolInformation.tsx          |  28 ++--
 .../components/selectors/NetworkSelector.tsx  |  64 +++++++++
 .../src/view/components/selectors/Pill.tsx    |  48 +++++++
 .../view/components/selectors/Selectors.tsx   |  46 +++++++
 .../components/selectors/VersionSelector.tsx  |  49 +++++++
 8 files changed, 224 insertions(+), 236 deletions(-)
 delete mode 100644 packages/frontend/src/view/components/NetworkSelector.tsx
 delete mode 100644 packages/frontend/src/view/components/VersionSelector.tsx
 create mode 100644 packages/frontend/src/view/components/selectors/NetworkSelector.tsx
 create mode 100644 packages/frontend/src/view/components/selectors/Pill.tsx
 create mode 100644 packages/frontend/src/view/components/selectors/Selectors.tsx
 create mode 100644 packages/frontend/src/view/components/selectors/VersionSelector.tsx

diff --git a/packages/frontend/src/view/components/NetworkSelector.tsx b/packages/frontend/src/view/components/NetworkSelector.tsx
deleted file mode 100644
index 7c7cfca0..00000000
--- a/packages/frontend/src/view/components/NetworkSelector.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { ChainId, getPrettyChainName } from '@lz/libs'
-import cx from 'classnames'
-import { useEffect, useRef, useState } from 'react'
-
-import { BlockchainIcon } from './BlockchainIcon'
-
-interface Props {
-  chainId: ChainId
-  setChain: (chainId: ChainId) => void
-  chainsToDisplay: [ChainId, ...ChainId[]]
-}
-
-export function NetworkSelector(props: Props) {
-  const [optimisticSelect, setOptimisticSelect] = useState<ChainId>(
-    props.chainId,
-  )
-  const [isSmall, setSmall] = useState(false)
-
-  function onClick(chainId: ChainId) {
-    setOptimisticSelect(chainId)
-    props.setChain(chainId)
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', onScroll)
-
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [])
-
-  useEffect(() => {
-    setOptimisticSelect(props.chainId)
-  }, [props.chainId])
-
-  function onScroll() {
-    setSmall(window.scrollY > 0)
-  }
-
-  const sortedChains = props.chainsToDisplay
-    .map((chainToDisplay, i) => ({
-      key: i,
-      icon: <BlockchainIcon chainId={chainToDisplay} />,
-      label: getPrettyChainName(chainToDisplay),
-      isActive: chainToDisplay === optimisticSelect,
-      onClick: () => onClick(chainToDisplay),
-    }))
-    .sort((a, b) => a.label.localeCompare(b.label))
-
-  return (
-    <section
-      className={cx(
-        'sticky top-0 z-network-selector bg-gray-800 px-3.5 md:justify-center md:px-6',
-        isSmall ? 'py-2 md:pb-3 md:pt-2' : 'py-3.5 md:pb-6 md:pt-4',
-      )}
-    >
-      <div className="mx-auto max-w-fit">
-        <span
-          className={cx(
-            'block overflow-hidden text-xs text-gray-100 transition-all',
-            isSmall ? 'max-h-0' : 'max-h-3.5',
-          )}
-        >
-          Select network
-        </span>
-        <div className="scrollbar-h-1.5 flex items-stretch gap-3 overflow-x-auto py-2 scrollbar scrollbar-track-gray-400 scrollbar-thumb-yellow-100">
-          {sortedChains.map((chain) => (
-            <PillSelector
-              key={chain.key}
-              icon={chain.icon}
-              label={chain.label}
-              isActive={chain.isActive}
-              isSmall={isSmall}
-              onClick={chain.onClick}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function PillSelector({
-  icon,
-  label,
-  isActive,
-  isSmall,
-  onClick,
-}: {
-  icon: React.ReactNode
-  label: string
-  isActive: boolean
-  isSmall: boolean
-  onClick: () => void
-}) {
-  const focusRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (focusRef.current && isActive) {
-      focusRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start',
-      })
-    }
-  }, [focusRef, isActive])
-
-  return (
-    <div
-      ref={focusRef}
-      className={cx(
-        'flex min-w-fit cursor-pointer items-center justify-center gap-1 rounded  py-1.5 pl-4 pr-6 text-center transition-all ',
-        isActive
-          ? 'bg-yellow-100 text-black'
-          : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
-        isSmall ? 'md:py-2' : 'md:py-3',
-      )}
-      onClick={onClick}
-    >
-      <div className="flex h-6 w-6 items-center justify-center">{icon}</div>
-      <span className="text-xs">{label}</span>
-    </div>
-  )
-}
diff --git a/packages/frontend/src/view/components/VersionSelector.tsx b/packages/frontend/src/view/components/VersionSelector.tsx
deleted file mode 100644
index 2f32fd71..00000000
--- a/packages/frontend/src/view/components/VersionSelector.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import cx from 'classnames'
-import { useEffect, useRef, useState } from 'react'
-
-import {
-  PROTOCOL_VERSION,
-  ProtocolVersion,
-} from '../../constants/protocol-version'
-
-interface Props {
-  version: ProtocolVersion
-  setVersion: (version: ProtocolVersion) => void
-}
-
-export function VersionSelector(props: Props) {
-  const versions = Object.values(PROTOCOL_VERSION)
-
-  const [isSmall, setSmall] = useState(false)
-
-  function onScroll() {
-    setSmall(window.scrollY > 0)
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', onScroll)
-
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [])
-
-  return (
-    <section
-      className={cx(
-        'z-network-selector bg-gray-900 px-3.5 md:px-6',
-        'py-2 md:pb-3 md:pt-2',
-      )}
-    >
-      <div className="max-w-fit md:mx-auto">
-        <span
-          className={cx(
-            'block overflow-hidden text-xs text-gray-100 transition-all',
-            isSmall ? 'max-h-0' : 'max-h-3.5',
-          )}
-        >
-          Select version
-        </span>
-        <div className="flex gap-3 py-2">
-          {versions.map((version) => {
-            return (
-              <PillSelector
-                key={version}
-                label={version}
-                isSmall={isSmall}
-                isActive={version === props.version}
-                onClick={() => props.setVersion(version)}
-              />
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function PillSelector({
-  label,
-  isActive,
-  isSmall,
-  onClick,
-}: {
-  label: string
-  isActive: boolean
-  isSmall: boolean
-  onClick: () => void
-}) {
-  const focusRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (focusRef.current && isActive) {
-      focusRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start',
-      })
-    }
-  }, [focusRef, isActive])
-
-  return (
-    <div
-      ref={focusRef}
-      className={cx(
-        'flex cursor-pointer items-center justify-center gap-2 rounded px-5 text-center transition-all',
-        isActive
-          ? 'bg-yellow-100 text-black'
-          : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
-        isSmall ? 'md:py-3' : 'md:py-3',
-      )}
-      onClick={onClick}
-    >
-      <span className="text-sm">{label}</span>
-    </div>
-  )
-}
diff --git a/packages/frontend/src/view/components/protocol/LayerZeroMultisig.tsx b/packages/frontend/src/view/components/protocol/LayerZeroMultisig.tsx
index 312ede62..46806c84 100644
--- a/packages/frontend/src/view/components/protocol/LayerZeroMultisig.tsx
+++ b/packages/frontend/src/view/components/protocol/LayerZeroMultisig.tsx
@@ -35,7 +35,7 @@ export function LayerZeroMultisig({
 
   const [page, setPage] = useState(1)
 
-  const TXS_PER_PAGE = 12
+  const TXS_PER_PAGE = 14
   const TOTAL_PAGES_AMOUNT = Math.ceil(
     (allTransactions?.length ?? 0) / TXS_PER_PAGE,
   )
diff --git a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
index 35575433..80346b5a 100644
--- a/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
+++ b/packages/frontend/src/view/components/protocol/ProtocolInformation.tsx
@@ -10,8 +10,7 @@ import { useDiscoveryApi } from '../../../hooks/useDiscoveryApi'
 import { useVersionQueryParam } from '../../../hooks/useVersionQueryParam'
 import { Layout } from '../Layout'
 import { NetworkData } from '../NetworkData'
-import { NetworkSelector } from '../NetworkSelector'
-import { VersionSelector } from '../VersionSelector'
+import { Selectors } from '../selectors/Selectors'
 import { Warning } from '../Warning'
 import { EndpointContract } from './EndpointContract'
 import { EndpointV2Contract } from './EndpointV2Contract'
@@ -60,14 +59,14 @@ export function ProtocolInformation({
   if (!discoveryResponse || isError) {
     return (
       <>
-        {config.features.v2visible && (
-          <VersionSelector version={version} setVersion={setVersion} />
-        )}
-        <NetworkSelector
+        <Selectors
           chainId={paramChain}
-          chainsToDisplay={chainsToDisplay}
           setChain={setChain}
+          chainsToDisplay={chainsToDisplay}
+          version={version}
+          setVersion={setVersion}
         />
+
         {isError && (
           <Warning
             title={`Failed to load data for ${getPrettyChainName(paramChain)}`}
@@ -80,13 +79,12 @@ export function ProtocolInformation({
 
   return (
     <SkeletonTheme baseColor="#27272A" highlightColor="#525252">
-      {config.features.v2visible && (
-        <VersionSelector version={version} setVersion={setVersion} />
-      )}
-      <NetworkSelector
+      <Selectors
         chainId={discoveryResponse.chainId}
-        chainsToDisplay={chainsToDisplay}
         setChain={setChain}
+        chainsToDisplay={chainsToDisplay}
+        version={version}
+        setVersion={setVersion}
       />
       <ChainInfoContext.Provider value={discoveryResponse.chainId}>
         <AddressInfoContext.Provider value={discoveryResponse.data.addressInfo}>
@@ -139,6 +137,12 @@ export function ProtocolInformation({
                   {...discoveryResponse.data.contracts.receiveUln301}
                   isLoading={isDiscoveryLoading}
                 />
+                {shouldDisplayMultisigTransactions && (
+                  <LayerZeroMultisig
+                    {...discoveryResponse.data.contracts.lzMultisig}
+                    multisigAddress={multisigAddress}
+                  />
+                )}
               </>
             )}
           </Layout>
diff --git a/packages/frontend/src/view/components/selectors/NetworkSelector.tsx b/packages/frontend/src/view/components/selectors/NetworkSelector.tsx
new file mode 100644
index 00000000..b897357a
--- /dev/null
+++ b/packages/frontend/src/view/components/selectors/NetworkSelector.tsx
@@ -0,0 +1,64 @@
+import { ChainId, getPrettyChainName } from '@lz/libs'
+import cx from 'classnames'
+import { useEffect, useState } from 'react'
+
+import { BlockchainIcon } from '../BlockchainIcon'
+import { PillSelector } from './Pill'
+
+interface Props {
+  chainId: ChainId
+  setChain: (chainId: ChainId) => void
+  chainsToDisplay: [ChainId, ...ChainId[]]
+
+  isSmall: boolean
+}
+
+export function NetworkSelector(props: Props) {
+  const [optimisticSelect, setOptimisticSelect] = useState<ChainId>(
+    props.chainId,
+  )
+
+  function onClick(chainId: ChainId) {
+    setOptimisticSelect(chainId)
+    props.setChain(chainId)
+  }
+
+  useEffect(() => {
+    setOptimisticSelect(props.chainId)
+  }, [props.chainId])
+
+  const sortedChains = props.chainsToDisplay
+    .map((chainToDisplay, i) => ({
+      key: i,
+      icon: <BlockchainIcon chainId={chainToDisplay} />,
+      label: getPrettyChainName(chainToDisplay),
+      isActive: chainToDisplay === optimisticSelect,
+      onClick: () => onClick(chainToDisplay),
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+
+  return (
+    <>
+      <span
+        className={cx(
+          'block overflow-hidden text-xs text-gray-100 transition-all',
+          props.isSmall ? 'max-h-0' : 'max-h-3.5',
+        )}
+      >
+        Select network
+      </span>
+      <div className="scrollbar-h-1.5 mt-0.5 flex items-stretch gap-3 overflow-x-auto py-1 scrollbar scrollbar-track-gray-400 scrollbar-thumb-yellow-100">
+        {sortedChains.map((chain) => (
+          <PillSelector
+            key={chain.key}
+            icon={chain.icon}
+            label={chain.label}
+            isActive={chain.isActive}
+            isSmall={props.isSmall}
+            onClick={chain.onClick}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
diff --git a/packages/frontend/src/view/components/selectors/Pill.tsx b/packages/frontend/src/view/components/selectors/Pill.tsx
new file mode 100644
index 00000000..217e72a2
--- /dev/null
+++ b/packages/frontend/src/view/components/selectors/Pill.tsx
@@ -0,0 +1,48 @@
+import cx from 'classnames'
+import { useEffect, useRef } from 'react'
+
+export function PillSelector({
+  icon,
+  label,
+  isActive,
+  isSmall,
+  onClick,
+}: {
+  icon?: React.ReactNode
+  label: string
+  isActive: boolean
+  isSmall: boolean
+  onClick: () => void
+}) {
+  const focusRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (focusRef.current && isActive) {
+      focusRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+      })
+    }
+  }, [focusRef, isActive])
+
+  return (
+    <div
+      ref={focusRef}
+      className={cx(
+        'flex min-w-fit cursor-pointer items-center justify-center gap-1 rounded py-1.5 text-center transition-all',
+        isActive
+          ? 'bg-yellow-100 text-black'
+          : 'bg-gray-600 text-white brightness-100 filter transition-all duration-300 hover:brightness-[120%]',
+        isSmall ? 'md:py-2' : 'md:py-3',
+        icon ? 'pl-4 pr-6' : 'p-4',
+      )}
+      onClick={onClick}
+    >
+      {icon && (
+        <div className="flex h-6 w-6 items-center justify-center">{icon}</div>
+      )}
+      <span className="text-xs">{label}</span>
+    </div>
+  )
+}
diff --git a/packages/frontend/src/view/components/selectors/Selectors.tsx b/packages/frontend/src/view/components/selectors/Selectors.tsx
new file mode 100644
index 00000000..7152c666
--- /dev/null
+++ b/packages/frontend/src/view/components/selectors/Selectors.tsx
@@ -0,0 +1,46 @@
+import { ChainId } from '@lz/libs'
+import cx from 'classnames'
+import { useEffect, useState } from 'react'
+
+import { config } from '../../../config'
+import { ProtocolVersion } from '../../../constants/protocol-version'
+import { NetworkSelector } from './NetworkSelector'
+import { VersionSelector } from './VersionSelector'
+
+interface Props {
+  chainId: ChainId
+  setChain: (chainId: ChainId) => void
+  chainsToDisplay: [ChainId, ...ChainId[]]
+  version: ProtocolVersion
+  setVersion: (version: ProtocolVersion) => void
+}
+
+export function Selectors(props: Props) {
+  const [isSmall, setSmall] = useState(false)
+
+  function onScroll() {
+    setSmall(window.scrollY > 0)
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll)
+
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <section
+      className={cx(
+        'sticky top-0 z-network-selector bg-gray-800 px-3.5 md:justify-center',
+        isSmall ? 'py-2 md:pb-1 md:pt-1' : 'py-3.5 md:pb-6 md:pt-4',
+      )}
+    >
+      <div className="mx-auto max-w-fit">
+        {config.features.v2visible && (
+          <VersionSelector {...props} isSmall={isSmall} />
+        )}
+        <NetworkSelector {...props} isSmall={isSmall} />
+      </div>
+    </section>
+  )
+}
diff --git a/packages/frontend/src/view/components/selectors/VersionSelector.tsx b/packages/frontend/src/view/components/selectors/VersionSelector.tsx
new file mode 100644
index 00000000..1f7fc3f9
--- /dev/null
+++ b/packages/frontend/src/view/components/selectors/VersionSelector.tsx
@@ -0,0 +1,49 @@
+import cx from 'classnames'
+
+import {
+  PROTOCOL_VERSION,
+  ProtocolVersion,
+} from '../../../constants/protocol-version'
+import { PillSelector } from './Pill'
+
+interface Props {
+  version: ProtocolVersion
+  setVersion: (version: ProtocolVersion) => void
+
+  isSmall: boolean
+}
+
+export function VersionSelector(props: Props) {
+  const versions = Object.values(PROTOCOL_VERSION)
+
+  return (
+    <>
+      <span
+        className={cx(
+          'block overflow-hidden text-xs text-gray-100 transition-all',
+          props.isSmall ? 'max-h-0' : 'max-h-3.5',
+        )}
+      >
+        Select version
+      </span>
+      <div
+        className={cx(
+          'flex gap-3 py-1',
+          props.isSmall ? 'm-0' : 'mb-1.5 mt-0.5',
+        )}
+      >
+        {versions.map((version) => {
+          return (
+            <PillSelector
+              key={version}
+              label={version}
+              isSmall={props.isSmall}
+              isActive={version === props.version}
+              onClick={() => props.setVersion(version)}
+            />
+          )
+        })}
+      </div>
+    </>
+  )
+}

From a3e3ee7e9a7e9dff534737bdc986859f1b07b54e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Fri, 16 Feb 2024 10:06:53 +0100
Subject: [PATCH 07/10] chore: temp enable staging preview

---
 packages/frontend/src/config/config.staging.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/config/config.staging.ts b/packages/frontend/src/config/config.staging.ts
index 544141e7..10ce3dd2 100644
--- a/packages/frontend/src/config/config.staging.ts
+++ b/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/',
   }

From 774b88eeedaee123f2044b6a9eca5c35ec3059da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Tue, 20 Feb 2024 17:52:17 +0100
Subject: [PATCH 08/10] feat: refine descriptions

---
 .../protocol/EndpointV2Contract.tsx           | 30 +++++++++++++++----
 .../components/protocol/ReceiveUln301.tsx     |  9 ++++--
 .../components/protocol/ReceiveUln302.tsx     | 12 ++++++--
 .../view/components/protocol/SendUln301.tsx   |  6 +++-
 .../view/components/protocol/SendUln302.tsx   | 17 +++++++++--
 .../protocol/remote/DefaultExecutorConfig.tsx | 13 ++++++--
 .../components/protocol/remote/DefaultUln.tsx |  8 +++--
 .../src/view/components/protocol/utils.ts     | 18 +++++++++++
 8 files changed, 96 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
index 2e6609b1..6e35e167 100644
--- a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
@@ -53,7 +53,11 @@ export function EndpointV2Contract(props: Props) {
 
           <Row
             hideBorder
-            label="Blocked Library"
+            label={
+              <InfoTooltip text="Library that reverts both on send and quote. Can be assigned as a default one actively stopping the message flow. It is configured upon contract construction and cannot be changed afterwards.">
+                Blocked library
+              </InfoTooltip>
+            }
             value={<BlockchainAddress address={props.blockedLibrary} />}
           />
           <EndpointV2RemoteChains
@@ -63,7 +67,11 @@ export function EndpointV2Contract(props: Props) {
 
           <Row label="EID" value={props.eid} />
           <Row
-            label="Registered Libraries"
+            label={
+              <InfoTooltip text="List of all registered message libraries. Message library must be appended to this registry before it can be used.">
+                Registered libraries
+              </InfoTooltip>
+            }
             value={
               <div className="flex flex-col gap-2">
                 {props.registeredLibraries.map((rl) => (
@@ -78,7 +86,7 @@ export function EndpointV2Contract(props: Props) {
             value={<BlockchainAddress address={props.lzToken} />}
           />
           <Row
-            label="Native Token"
+            label="Native token"
             value={<BlockchainAddress address={props.nativeToken} />}
           />
         </Subsection>
@@ -138,7 +146,15 @@ function EndpointV2RemoteChains(props: {
       {selectedChain && selectedLibraries && (
         <RemoteSection>
           <Row
-            label="Default send library"
+            label={
+              <InfoTooltip
+                text={
+                  'The default messaging library. The contract handles the message payload packing on the source chain. The owner of the Endpoint contract can change this value.'
+                }
+              >
+                Default send library
+              </InfoTooltip>
+            }
             value={
               <BlockchainAddress
                 address={EthereumAddress(selectedLibraries.send)}
@@ -146,7 +162,11 @@ function EndpointV2RemoteChains(props: {
             }
           />
           <Row
-            label="Default receive library"
+            label={
+              <InfoTooltip text="The default messaging library. The contract handles the message payload verification on the destination chain. The owner of the Endpoint contract can change this value.">
+                Default receive library
+              </InfoTooltip>
+            }
             value={
               <BlockchainAddress
                 address={EthereumAddress(selectedLibraries.receive)}
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
index 0f64b437..931e5067 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
@@ -40,6 +40,7 @@ export function ReceiveUln301Contract(props: Props) {
       >
         <Subsection>
           <Row
+            hideBorder
             label={
               <InfoTooltip text="Owner of this contract">Owner</InfoTooltip>
             }
@@ -86,7 +87,7 @@ function ReceiveUln301RemoteChains(props: {
         className="!px-3 md:!px-6"
         label={
           <InfoTooltip text="List of destination chains supported by this site.">
-            Remote Chain
+            Remote chain
           </InfoTooltip>
         }
         value={
@@ -107,7 +108,11 @@ function ReceiveUln301RemoteChains(props: {
         <RemoteSection>
           <Block title="Default executor">
             <Row
-              label="Executor"
+              label={
+                <InfoTooltip text="Party responsible for dispatching the message to the target chain after it has been signed-off by the security stack.">
+                  Executor
+                </InfoTooltip>
+              }
               className="!p-0 md:!pl-7 md:!pr-4"
               value={
                 <BlockchainAddress
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
index 0187a225..90fb36ca 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
@@ -12,6 +12,7 @@ import { Subsection } from '../Subsection'
 import { UpdatableBadge, V2Badge } from './Badges'
 import { DefaultUln } from './remote/DefaultUln'
 import { RemoteSection } from './remote/RemoteSection'
+import { toV2LibType } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -52,7 +53,14 @@ export function ReceiveUln302Contract(props: Props) {
           <ReceiveUln302RemoteChains
             defaultUlnConfigs={props.defaultUlnConfigs}
           />
-          <Row label="Message Lib Type" value={props.messageLibType} />
+          <Row
+            label={
+              <InfoTooltip text="Indicates for which direction library is used for. Can be send, receive or both">
+                Message lib type
+              </InfoTooltip>
+            }
+            value={toV2LibType(props.messageLibType)}
+          />
           <Row label="Version" value={props.version.join('.')} />
         </Subsection>
       </ExpandableContainer>
@@ -83,7 +91,7 @@ function ReceiveUln302RemoteChains(props: {
         className="!px-3 md:!px-6"
         label={
           <InfoTooltip text="List of destination chains supported by this site.">
-            Remote Chain
+            Remote chain
           </InfoTooltip>
         }
         value={
diff --git a/packages/frontend/src/view/components/protocol/SendUln301.tsx b/packages/frontend/src/view/components/protocol/SendUln301.tsx
index 184fce09..fdcf924f 100644
--- a/packages/frontend/src/view/components/protocol/SendUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln301.tsx
@@ -56,7 +56,11 @@ export function SendUln301Contract(props: Props) {
             defaultExecutorConfigs={props.defaultExecutorConfigs}
           />
           <Row
-            label="Treasury Contract"
+            label={
+              <InfoTooltip text="The contract where all the fees are received. The owner can set a new treasury address.">
+                Treasury Contract
+              </InfoTooltip>
+            }
             value={<BlockchainAddress address={props.treasury} />}
           />
           <Row label="Version" value={props.version.join('.')} />
diff --git a/packages/frontend/src/view/components/protocol/SendUln302.tsx b/packages/frontend/src/view/components/protocol/SendUln302.tsx
index 15f5fd06..68506d8e 100644
--- a/packages/frontend/src/view/components/protocol/SendUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln302.tsx
@@ -13,7 +13,7 @@ import { UpdatableBadge, V2Badge } from './Badges'
 import { DefaultExecutorConfig } from './remote/DefaultExecutorConfig'
 import { DefaultUln } from './remote/DefaultUln'
 import { RemoteSection } from './remote/RemoteSection'
-import { intersect } from './utils'
+import { intersect, toV2LibType } from './utils'
 
 type Props = {
   isLoading?: boolean
@@ -56,10 +56,21 @@ export function SendUln302Contract(props: Props) {
             defaultUlnConfigs={props.defaultUlnConfigs}
           />
           <Row
-            label="Treasury Contract"
+            label={
+              <InfoTooltip text="The contract where all the fees are received. The owner can set a new treasury address.">
+                Treasury Contract
+              </InfoTooltip>
+            }
             value={<BlockchainAddress address={props.treasury} />}
           />
-          <Row label="Message Lib Type" value={props.messageLibType} />
+          <Row
+            label={
+              <InfoTooltip text="Indicates for which direction library is used for. Can be send, receive or both">
+                Message lib type
+              </InfoTooltip>
+            }
+            value={toV2LibType(props.messageLibType)}
+          />
           <Row label="Version" value={props.version.join('.')} />
         </Subsection>
       </ExpandableContainer>
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
index 37e88f3e..369b0d4b 100644
--- a/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultExecutorConfig.tsx
@@ -2,6 +2,7 @@ import { DefaultExecutorConfigs, EthereumAddress } from '@lz/libs'
 
 import { BlockchainAddress } from '../../BlockchainAddress'
 import { Code } from '../../Code'
+import { InfoTooltip } from '../../InfoTooltip'
 import { Row } from '../../Row'
 import { Block } from './Block'
 
@@ -14,11 +15,19 @@ export function DefaultExecutorConfig({ config }: Props) {
     <Block title="Default executor configuration">
       <Row
         className="!p-0 md:!pl-7 md:!pr-4"
-        label="Max message size"
+        label={
+          <InfoTooltip text="Maximum size of message that can be passed.">
+            Max message size
+          </InfoTooltip>
+        }
         value={<Code>{config.maxMessageSize}</Code>}
       />
       <Row
-        label="Executor"
+        label={
+          <InfoTooltip text="Party responsible for dispatching the message to the target chain after it has been signed-off by the security stack.">
+            Executor
+          </InfoTooltip>
+        }
         className="!p-0 md:!pl-7 md:!pr-4"
         value={<BlockchainAddress address={EthereumAddress(config.executor)} />}
       />
diff --git a/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
index 30dbbdb0..e7adede3 100644
--- a/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
+++ b/packages/frontend/src/view/components/protocol/remote/DefaultUln.tsx
@@ -14,7 +14,7 @@ export function DefaultUln({ config }: Props) {
     <Block title="Default Security Stack configuration">
       <Row
         label={
-          <InfoTooltip text="Amount of confirmations required before dispatching a message">
+          <InfoTooltip text="Amount of confirmations required before dispatching a message.">
             Required confirmations
           </InfoTooltip>
         }
@@ -42,7 +42,11 @@ export function DefaultUln({ config }: Props) {
         }
       />
       <Row
-        label="Optional DVNs threshold"
+        label={
+          <InfoTooltip text="Amount of optional DVN confirmations required before dispatching a message.">
+            Optional DVNs threshold
+          </InfoTooltip>
+        }
         className="!p-0 md:!pl-7 md:!pr-4"
         value={config.optionalDVNThreshold}
       />
diff --git a/packages/frontend/src/view/components/protocol/utils.ts b/packages/frontend/src/view/components/protocol/utils.ts
index 3eb281fd..1acfdad2 100644
--- a/packages/frontend/src/view/components/protocol/utils.ts
+++ b/packages/frontend/src/view/components/protocol/utils.ts
@@ -20,3 +20,21 @@ export function toDropdownOption(chain: RemoteChain | ChainId): DropdownOption {
 export function intersect<T, K>(a: Record<string, T>, b: Record<string, K>) {
   return Object.entries(a).filter(([k, _]) => k in b)
 }
+
+export function toV2LibType(messageLibType: string | number): string {
+  const numLibType = Number(messageLibType)
+
+  if (numLibType === 0) {
+    return 'Send'
+  }
+
+  if (numLibType === 1) {
+    return 'Receive'
+  }
+
+  if (numLibType === 2) {
+    return 'Send & Receive'
+  }
+
+  return 'Unknown message library type'
+}

From 802126fedbcb12b0038df8fa7100b351c7551fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Wed, 21 Feb 2024 15:32:23 +0100
Subject: [PATCH 09/10] chore: fix description framing

---
 .../src/view/components/protocol/EndpointContract.tsx         | 2 +-
 .../src/view/components/protocol/EndpointV2Contract.tsx       | 2 +-
 .../frontend/src/view/components/protocol/ReceiveUln301.tsx   | 2 +-
 .../frontend/src/view/components/protocol/ReceiveUln302.tsx   | 4 ++--
 packages/frontend/src/view/components/protocol/SendUln301.tsx | 2 +-
 packages/frontend/src/view/components/protocol/SendUln302.tsx | 4 ++--
 .../frontend/src/view/components/protocol/UltraLightNode.tsx  | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/view/components/protocol/EndpointContract.tsx b/packages/frontend/src/view/components/protocol/EndpointContract.tsx
index 76aca5df..ec755624 100644
--- a/packages/frontend/src/view/components/protocol/EndpointContract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointContract.tsx
@@ -41,7 +41,7 @@ export function EndpointContract(props: Props): JSX.Element {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
index 6e35e167..e687fe10 100644
--- a/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
+++ b/packages/frontend/src/view/components/protocol/EndpointV2Contract.tsx
@@ -45,7 +45,7 @@ export function EndpointV2Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
index 931e5067..7415ef06 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln301.tsx
@@ -46,7 +46,7 @@ export function ReceiveUln301Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
index 90fb36ca..e0f8ede8 100644
--- a/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/ReceiveUln302.tsx
@@ -45,7 +45,7 @@ export function ReceiveUln302Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
@@ -55,7 +55,7 @@ export function ReceiveUln302Contract(props: Props) {
           />
           <Row
             label={
-              <InfoTooltip text="Indicates for which direction library is used for. Can be send, receive or both">
+              <InfoTooltip text="Indicates for which direction library is used. Can be send, receive or both">
                 Message lib type
               </InfoTooltip>
             }
diff --git a/packages/frontend/src/view/components/protocol/SendUln301.tsx b/packages/frontend/src/view/components/protocol/SendUln301.tsx
index fdcf924f..b8259595 100644
--- a/packages/frontend/src/view/components/protocol/SendUln301.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln301.tsx
@@ -46,7 +46,7 @@ export function SendUln301Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
diff --git a/packages/frontend/src/view/components/protocol/SendUln302.tsx b/packages/frontend/src/view/components/protocol/SendUln302.tsx
index 68506d8e..450225a2 100644
--- a/packages/frontend/src/view/components/protocol/SendUln302.tsx
+++ b/packages/frontend/src/view/components/protocol/SendUln302.tsx
@@ -46,7 +46,7 @@ export function SendUln302Contract(props: Props) {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }
@@ -65,7 +65,7 @@ export function SendUln302Contract(props: Props) {
           />
           <Row
             label={
-              <InfoTooltip text="Indicates for which direction library is used for. Can be send, receive or both">
+              <InfoTooltip text="Indicates for which direction library is used. Can be send, receive or both">
                 Message lib type
               </InfoTooltip>
             }
diff --git a/packages/frontend/src/view/components/protocol/UltraLightNode.tsx b/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
index 806dc4cd..d8356920 100644
--- a/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
+++ b/packages/frontend/src/view/components/protocol/UltraLightNode.tsx
@@ -42,7 +42,7 @@ export function UltraLightNodeContract(props: Props): JSX.Element {
             }
             value={
               <BlockchainAddress
-                warnOnEoa="Protocol component on this chain is owned by an EOA"
+                warnOnEoa="This contract is owned by an EOA"
                 address={props.owner}
               />
             }

From 35f9b47baafd5b3995a88c961334a63ea31124a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Podsiad=C5=82y?= <michal.podsiadly@l2beat.com>
Date: Wed, 21 Feb 2024 15:32:38 +0100
Subject: [PATCH 10/10] chore: remove empty Selectors.tsx file

---
 packages/frontend/src/view/components/Selectors.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/frontend/src/view/components/Selectors.tsx

diff --git a/packages/frontend/src/view/components/Selectors.tsx b/packages/frontend/src/view/components/Selectors.tsx
deleted file mode 100644
index e69de29b..00000000