Improve Consensus on the metaverse graph

- Make it so that that clicking on the consensus circle
  selects the layer, instead if opening it immediately,
  like we have for the other layers
- Add online/out-of-date status displays everywhere

.changelog/1401.feature.md

@@ -0,0 +1 @@
+Handle the consensus layer in the metaverse graph the same way as other layers

src/app/pages/HomePage/Graph/Graph/index.tsx

@@ -303,7 +303,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
   const enabledLayers: Layer[] = useMemo(() => RouteUtils.getAllLayersForNetwork(network).enabled, [network])
 
   const onSelectLayer = (layer: Layer) => {
-    if (isMobile && isZoomedIn) {
+    if (isMobile && (isZoomedIn || layer === Layer.consensus)) {
       setSelectedLayer(layer)
       setActiveMobileGraphTooltip({ current: layer })
 
@@ -699,9 +699,16 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
           {...handleHover(Layer.consensus, setHoveredLayer)}
         >
           {(isMobile || hoveredLayer !== Layer.consensus) && (
-            <text x="161" y="212" fill={graphTheme.text} fontSize="12px">
+            <GraphLayerStatus
+              iconX={201}
+              iconY={216}
+              textX={159}
+              textY={210}
+              fillText={graphTheme.text}
+              outOfDate={outOfDateMap.consensus}
+            >
               {t('common.consensus')}
-            </text>
+            </GraphLayerStatus>
           )}
           {!isMobile && hoveredLayer === Layer.consensus && !disabledMap[Layer.consensus] && (
             <text x="173" y="214" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">

src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 import { Layer } from '../../../../../oasis-nexus/api'
 import { Network } from '../../../../../types/network'
-import { useRuntimeFreshness } from '../../../../components/OfflineBanner/hook'
+import { useConsensusFreshness, useRuntimeFreshness } from '../../../../components/OfflineBanner/hook'
 import { getNetworkIcons } from '../../../../utils/content'
 import { useNavigate } from 'react-router-dom'
 import { RouteUtils } from '../../../../utils/route-utils'
@@ -148,6 +148,7 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo
 
   const isEmeraldOutOfDate = useRuntimeFreshness({ network, layer: Layer.emerald }).outOfDate
   const isSapphireOutOfDate = useRuntimeFreshness({ network, layer: Layer.sapphire }).outOfDate
+  const isConsensusOutOfDate = useConsensusFreshness(network).outOfDate
   return {
     [Layer.sapphire]: {
       disabled: !isSapphireEnabled,
@@ -189,9 +190,15 @@ const useLayerTooltipMap = (network: Network): Partial<Record<Layer, TooltipInfo
       disabled: !isConsensusEnabled,
       body: {
         title: (t: TFunction) => t('common.consensus'),
-        caption: (t: TFunction) => layerTooltipBodyCaption(t, Layer.consensus, isConsensusEnabled),
+        caption: (t: TFunction) =>
+          layerTooltipBodyCaption(t, Layer.consensus, isConsensusEnabled, isConsensusOutOfDate),
         body: (t: TFunction) => t('home.tooltip.consensusDesc'),
       },
+      ...(isConsensusEnabled
+        ? {
+            failing: isConsensusOutOfDate,
+          }
+        : {}),
     },
   }
 }