fix: check for modal message in Header (#1054)

iotaledger · Feb 2, 2024 · 93bf920 · 93bf920
1 parent 4926863
commit 93bf920
Showing 1 changed file with 3 additions and 4 deletions.
diff --git 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 && (