From 9ce667d22dd5eca3c4b2a07dc8bd4901efeaf890 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Fri, 2 Feb 2024 16:34:32 +0100
Subject: [PATCH] fix: check for modal message in Header

---
 client/src/app/components/header/Header.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/app/components/header/Header.tsx b/client/src/app/components/header/Header.tsx
index 583c27af0..6d8d2187a 100644
--- a/client/src/app/components/header/Header.tsx
+++ b/client/src/app/components/header/Header.tsx
@@ -22,7 +22,7 @@ import "./Header.scss";
 
 const NETWORK_DROPDOWN_LABEL = "Network Switcher";
 
-const MODAL_MESSAGE: Record<ProtocolVersion, { title: string; description: string }> = {
+const MODAL_MESSAGE: { [key in ProtocolVersion]?: { title: string; description: string } } = {
     [LEGACY]: mainLegacyMessage,
     [CHRYSALIS]: mainChrysalisMessage,
     [STARDUST]: mainStardustMessage,
@@ -49,6 +49,7 @@ export default function Header({ rootPath, currentNetwork, networks, history, ac
     const isNetworkSwitcherExpanded = expandedDropdownLabel === NETWORK_DROPDOWN_LABEL;
     const isShimmerUi = isShimmerUiTheme(currentNetwork?.uiTheme);
     const isMarketed = isMarketedNetwork(currentNetwork?.network);
+    const modalMessage = currentNetwork?.protocolVersion ? MODAL_MESSAGE[currentNetwork.protocolVersion] : undefined;
 
     useEffect(() => {
         saveThemeAndDispatchEvent(darkMode);
@@ -148,9 +149,7 @@ export default function Header({ rootPath, currentNetwork, networks, history, ac
                             protocolVersion={protocolVersion}
                         />
 
-                        {currentNetwork?.protocolVersion && (
-                            <Modal icon="info" data={MODAL_MESSAGE[currentNetwork.protocolVersion]} showModal={setShow} />
-                        )}
+                        {modalMessage && <Modal icon="info" data={modalMessage} showModal={setShow} />}
 
                         {/* ----- Only visible in desktop ----- */}
                         {isMarketed && (