feat(web): status-badge

Author: tractorss

web/.env.devnet.public

@@ -2,3 +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

web/.env.testnet.public

@@ -2,3 +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

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

@@ -12,6 +12,7 @@ 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;
@@ -122,6 +123,7 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
             <small>{item.text}</small>
           </ListItem>
         ))}
+        <StatusBadge />
         <Debug />
       </Container>
       {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}

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

@@ -0,0 +1,44 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
+
+const Container = styled.div`
+  padding: 0px 3px;
+  max-width: 220px;
+`;
+
+const StyledIframe = styled.iframe`
+  border: none;
+  width: 100%;
+  height: 30px;
+  background-color: ${({ theme }) => theme.mediumPurple};
+  border-radius: 300px;
+`;
+
+export const StatusBadge: React.FC = () => {
+  const [theme] = useToggleTheme();
+
+  const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet";
+
+  let statusUrl: string;
+
+  switch (deployment) {
+    case "devnet":
+      statusUrl = process.env.REACT_APP_DEVNET_STATUS_URL!;
+      break;
+    case "testnet":
+      statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!;
+      break;
+    default:
+      statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!;
+  }
+
+  //update url on theme toggle
+  statusUrl = useMemo(() => (theme == "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"), [theme]);
+
+  return (
+    <Container>
+      <StyledIframe src={statusUrl} />
+    </Container>
+  );
+};