refactor: moved to Debug component, simpler env variables

Author: jaybuidl

web/.env.devnet.public

@@ -2,4 +2,4 @@
 export REACT_APP_DEPLOYMENT=devnet
 export REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-devnet
 export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-devnet
-export REACT_APP_DEVNET_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
+export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge

web/.env.testnet.public

@@ -2,4 +2,4 @@
 export REACT_APP_DEPLOYMENT=testnet
 export REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-testnet-2
 export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-testnet-2
-export REACT_APP_TESTNET_STATUS_URL=https://kleros-v2.betteruptime.com/badge
+export REACT_APP_STATUS_URL=https://kleros-v2.betteruptime.com/badge

web/src/layout/Header/navbar/Debug.tsx

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useSortitionModulePhase } from "hooks/contracts/generated";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
 import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index";
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
   label,
   a {
     font-family: "Roboto Mono", monospace;
@@ -13,6 +18,13 @@ const Container = styled.div`
   }
 `;
 
+const StyledIframe = styled.iframe`
+  border: none;
+  width: 100%;
+  height: 30px;
+  border-radius: 300px;
+`;
+
 const Version = () => (
   <label>
     v{RELEASE_VERSION}{" "}
@@ -25,6 +37,13 @@ const Version = () => (
   </label>
 );
 
+const ServicesStatus = () => {
+  const [theme] = useToggleTheme();
+  const statusUrlParameters = useMemo(() => (theme === "light" ? "?theme=light" : "?theme=dark"), [theme]);
+  const statusUrl = process.env.REACT_APP_STATUS_URL;
+  return <label>{statusUrl && <StyledIframe src={`${statusUrl + statusUrlParameters}`} />}</label>;
+};
+
 enum Phases {
   staking,
   generating,
@@ -35,21 +54,13 @@ const Phase = () => {
   const { data: phase } = useSortitionModulePhase({
     watch: true,
   });
-  return (
-    <>
-      {phase !== undefined && (
-        <label>
-          <br />
-          phase: {Phases[phase]}
-        </label>
-      )}
-    </>
-  );
+  return <>{phase !== undefined && <label>Phase: {Phases[phase]}</label>}</>;
 };
 
 const Debug: React.FC = () => {
   return (
     <Container>
+      <ServicesStatus />
       <Version />
       <Phase />
     </Container>

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -12,7 +12,6 @@ import Telegram from "svgs/socialmedia/telegram.svg";
 import { IHelp } from "..";
 import Debug from "../Debug";
 import Onboarding from "components/Popup/MiniGuides/Onboarding";
-import { StatusBadge } from "./StatusBadge";
 
 const Container = styled.div`
   display: flex;
@@ -123,7 +122,6 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
             <small>{item.text}</small>
           </ListItem>
         ))}
-        <StatusBadge />
         <Debug />
       </Container>
       {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}