refactor: moved to Debug component, simpler env variables

Author: jaybuidl

web/.env.devnet.public

@@ -1,5 +1,4 @@
 # Do not enter sensitive information here.
 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_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-devnet

web/.env.testnet.public

@@ -1,5 +1,4 @@
 # Do not enter sensitive information here.
 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_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-testnet-2

web/src/consts/index.ts

@@ -17,3 +17,6 @@ export const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.
 export const TELEGRAM_REGEX = /^@\w{5,32}$/;
 export const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/;
 export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/;
+
+export const SERVICES_STATUS_DEVNET_URL = "https://kleros-v2-devnet.betteruptime.com/badge";
+export const SERVICES_STATUS_TESTNET_URL = "https://kleros-v2.betteruptime.com/badge";

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

@@ -1,9 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useSortitionModulePhase } from "hooks/contracts/generated";
-import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
+import {
+  GIT_BRANCH,
+  GIT_DIRTY,
+  GIT_HASH,
+  GIT_TAGS,
+  GIT_URL,
+  RELEASE_VERSION,
+  SERVICES_STATUS_DEVNET_URL,
+  SERVICES_STATUS_TESTNET_URL,
+} from "consts/index";
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
   label,
   a {
     font-family: "Roboto Mono", monospace;
@@ -13,6 +27,14 @@ const Container = styled.div`
   }
 `;
 
+const StyledIframe = styled.iframe`
+  border: none;
+  width: 100%;
+  height: 30px;
+  background-color: ${({ theme }) => theme.mediumPurple};
+  border-radius: 300px;
+`;
+
 const Version = () => (
   <label>
     v{RELEASE_VERSION}{" "}
@@ -25,6 +47,31 @@ const Version = () => (
   </label>
 );
 
+const ServicesStatus = () => {
+  const [theme] = useToggleTheme();
+  const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet";
+  let statusUrl: string;
+  switch (deployment) {
+    case "devnet":
+      statusUrl = SERVICES_STATUS_DEVNET_URL;
+      break;
+    case "testnet":
+      statusUrl = SERVICES_STATUS_TESTNET_URL;
+      break;
+    default:
+      throw new Error(`Unknown deployment: ${deployment}`);
+  }
+  statusUrl = useMemo(
+    () => (theme === "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"),
+    [statusUrl, theme]
+  );
+  return (
+    <label>
+      <StyledIframe src={`${statusUrl}`} />
+    </label>
+  );
+};
+
 enum Phases {
   staking,
   generating,
@@ -35,21 +82,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} />}