From 2038749688f9552fb9dc5fc174f35db3529a88de Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Sun, 10 Nov 2024 09:37:37 +0100
Subject: [PATCH] Update HomePage graph labels for localnet

---
 src/app/pages/HomePage/Graph/Graph/index.tsx | 46 +++++++++-----------
 src/locales/en/translation.json              |  4 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/HomePage/Graph/Graph/index.tsx b/src/app/pages/HomePage/Graph/Graph/index.tsx
index d7e9ece69..421c31f88 100644
--- a/src/app/pages/HomePage/Graph/Graph/index.tsx
+++ b/src/app/pages/HomePage/Graph/Graph/index.tsx
@@ -11,7 +11,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { RouteUtils } from '../../../../utils/route-utils'
+import { RouteUtils, isLocalnet } from '../../../../utils/route-utils'
 import { useScreenSize } from '../../../../hooks/useScreensize'
 import { Layer } from '../../../../../oasis-nexus/api'
 import { Network } from '../../../../../types/network'
@@ -42,6 +42,22 @@ interface GraphStyledProps extends GraphBaseProps {
   hoveredLayer: Layer | null
 }
 
+const LayerNotEnabledLabel = ({ network }: { network: Network }) => {
+  const { t } = useTranslation()
+  const isLocal = isLocalnet(network)
+
+  return (
+    <>
+      <tspan dx="-4" dy="-5">
+        {isLocal ? t('home.not') : t('home.coming')}
+      </tspan>
+      <tspan dx="-35" dy="12">
+        {isLocal ? t('home.enabled') : t('home.soon')}
+      </tspan>
+    </>
+  )
+}
+
 const GraphStyled = styled('svg', {
   shouldForwardProp: prop =>
     !(['disabled', 'transparent', 'selectedArea', 'hoveredLayer'] as (keyof GraphStyledProps)[]).includes(
@@ -604,12 +620,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
           )}
           {!isMobile && hoveredLayer === Layer.emerald && disabledMap[Layer.emerald] && (
             <text x="177.4" y="97" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
-              <tspan dx="-4" dy="-5">
-                {t('home.coming')}
-              </tspan>
-              <tspan dx="-35" dy="12">
-                {t('home.soon')}
-              </tspan>
+              <LayerNotEnabledLabel network={network} />
             </text>
           )}
         </g>
@@ -660,12 +671,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
           )}
           {!isMobile && hoveredLayer === Layer.sapphire && disabledMap[Layer.sapphire] && (
             <text x="106" y="305" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
-              <tspan dx="-4" dy="-5">
-                {t('home.coming')}
-              </tspan>
-              <tspan dx="-35" dy="12">
-                {t('home.soon')}
-              </tspan>
+              <LayerNotEnabledLabel network={network} />
             </text>
           )}
         </g>
@@ -737,12 +743,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
           )}
           {!isMobile && hoveredLayer === Layer.consensus && disabledMap[Layer.consensus] && (
             <text x="170" y="212" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
-              <tspan dx="-4" dy="-5">
-                {t('home.coming')}
-              </tspan>
-              <tspan dx="-35" dy="12">
-                {t('home.soon')}
-              </tspan>
+              <LayerNotEnabledLabel network={network} />
             </text>
           )}
         </g>
@@ -786,12 +787,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
           )}
           {!isMobile && hoveredLayer === Layer.cipher && disabledMap[Layer.cipher] && (
             <text x="290" y="205" fill={graphTheme.hoverText} fontSize="12px" fontWeight="700">
-              <tspan dx="-4" dy="-5">
-                {t('home.coming')}
-              </tspan>
-              <tspan dx="-35" dy="12">
-                {t('home.soon')}
-              </tspan>
+              <LayerNotEnabledLabel network={network} />
             </text>
           )}
         </g>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 2b8f2f866..0c25d934e 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -582,7 +582,9 @@
     },
     "selectedNetwork": "Selected network",
     "coming": "Coming",
-    "soon": "soon"
+    "soon": "soon",
+    "not": "Not",
+    "enabled": "enabled"
   },
   "paratimes": {
     "activeNodes": "{{nodes}} active",