feat(web): add-subgraph-status-banner

web/package.json

@@ -117,6 +117,7 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.5.1",
     "styled-components": "^5.3.3",
+    "subgraph-status": "^1.2.3",
     "viem": "^2.21.54",
     "wagmi": "^2.13.5"
   }

web/src/layout/Header/index.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
+
+import { StatusBanner } from "subgraph-status";
+
+import { getGraphqlUrl } from "utils/getGraphqlUrl";
 
 import DesktopHeader from "./DesktopHeader";
 import MobileHeader from "./MobileHeader";
@@ -8,7 +12,6 @@ const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
   position: sticky;
-  padding: 0 24px;
   z-index: 10;
   top: 0;
   width: 100%;
@@ -17,11 +20,45 @@ const Container = styled.div`
   -webkit-backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")}; // Safari support
 `;
 
+const HeaderContainer = styled.div`
+  width: 100%;
+  padding: 4px 24px 8px;
+`;
+
+const StyledBanner = styled(StatusBanner)`
+  position: sticky !important;
+  .status-text {
+    h2 {
+      margin: 0;
+      line-height: 24px;
+    }
+  }
+`;
+
 const Header: React.FC = () => {
+  const theme = useTheme();
+
   return (
     <Container>
-      <DesktopHeader />
-      <MobileHeader />
+      <StyledBanner
+        autoHide
+        watcherOptions={{ threshold: 5000, interval: 60_000 }} // 5000 blocks threshold, 60 sec interval check
+        theme={{
+          colors: {
+            main: theme.whiteBackground,
+            primary: theme.primaryText,
+            secondary: theme.secondaryText,
+          },
+        }}
+        subgraphs={[
+          { name: "Kleros Core", url: getGraphqlUrl(false) },
+          { name: "Dispute Template Registry", url: getGraphqlUrl(true) },
+        ]}
+      />
+      <HeaderContainer>
+        <DesktopHeader />
+        <MobileHeader />
+      </HeaderContainer>
     </Container>
   );
 };

yarn.lock

@@ -5679,6 +5679,7 @@ __metadata:
     react-toastify: "npm:^9.1.3"
     react-use: "npm:^17.5.1"
     styled-components: "npm:^5.3.3"
+    subgraph-status: "npm:^1.2.3"
     typescript: "npm:^5.6.3"
     viem: "npm:^2.21.54"
     vite: "npm:^5.4.11"
@@ -17420,6 +17421,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enquire.js@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "enquire.js@npm:2.1.6"
+  checksum: 10/246b4ec2cc7a4eb8e24e9ae836b3222b889d8d982ac1583f90f9641222610a688c8a3fab53e2dc6ee56457c2798ba487814f61f5553d30ae23cc74664e6f78f8
+  languageName: node
+  linkType: hard
+
 "enquirer@npm:2.3.6, enquirer@npm:^2.3.0, enquirer@npm:^2.3.6":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
@@ -24057,6 +24065,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json2mq@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "json2mq@npm:0.2.0"
+  dependencies:
+    string-convert: "npm:^0.2.0"
+  checksum: 10/0ad2f6a268308beeaf3077652b5ae2b0701ef357840e1542cc838198424a79af21dad759595e2cce8cd9b154e0b0f758c217adea4b3dfbaafff3ff9bf82394a1
+  languageName: node
+  linkType: hard
+
 "json5@npm:^1.0.1, json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
@@ -30436,6 +30453,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-slick@npm:^0.30.2":
+  version: 0.30.3
+  resolution: "react-slick@npm:0.30.3"
+  dependencies:
+    classnames: "npm:^2.2.5"
+    enquire.js: "npm:^2.1.6"
+    json2mq: "npm:^0.2.0"
+    lodash.debounce: "npm:^4.0.8"
+    resize-observer-polyfill: "npm:^1.5.0"
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/a2a854498d99357dc73be01b3360eaf42edffe48ce8d6262edbe747711933f63806b2c65aee153c0f6d5c32a647d336199012864dc0f187a58cd5e57716069b6
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^10.0.6":
   version: 10.0.6
   resolution: "react-toastify@npm:10.0.6"
@@ -31028,7 +31061,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.1":
+"resize-observer-polyfill@npm:^1.5.0, resize-observer-polyfill@npm:^1.5.1":
   version: 1.5.1
   resolution: "resize-observer-polyfill@npm:1.5.1"
   checksum: 10/e10ee50cd6cf558001de5c6fb03fee15debd011c2f694564b71f81742eef03fb30d6c2596d1d5bf946d9991cb692fcef529b7bd2e4057041377ecc9636c753ce
@@ -32255,6 +32288,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slick-carousel@npm:^1.8.1":
+  version: 1.8.1
+  resolution: "slick-carousel@npm:1.8.1"
+  peerDependencies:
+    jquery: ">=1.8.0"
+  checksum: 10/b383e6f96b3bec573522467cfeeac1fce22d1cd53a68f5699cd3d62f0167777116b925dc48fbe64979a7a830777e4440036b8a7d4575c9ff8d18c3dd141b1ea2
+  languageName: node
+  linkType: hard
+
 "smart-buffer@npm:^4.2.0":
   version: 4.2.0
   resolution: "smart-buffer@npm:4.2.0"
@@ -32953,6 +32995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-convert@npm:^0.2.0":
+  version: 0.2.1
+  resolution: "string-convert@npm:0.2.1"
+  checksum: 10/f3eb484a45d29aa2ba2d9fe0471c971d5a56353633b56a4c8bc3e67237a2cdb1b6437f006a67d489b3d41e0a1c1f02e18d334c161a27fd7219e4aee1a9f68aac
+  languageName: node
+  linkType: hard
+
 "string-env-interpolation@npm:^1.0.1":
   version: 1.0.1
   resolution: "string-env-interpolation@npm:1.0.1"
@@ -33397,6 +33446,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"subgraph-status@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "subgraph-status@npm:1.2.3"
+  dependencies:
+    react-slick: "npm:^0.30.2"
+    slick-carousel: "npm:^1.8.1"
+    styled-components: "npm:^6.1.11"
+  peerDependencies:
+    "@types/react": ^18.3.3
+    "@types/react-dom": ^18.3.0
+    react: ^18.3.1
+    react-dom: ^18.3.1
+  checksum: 10/a125ec618073493026a29e9120a1fc73f8a3ad36b24815fe2f4ecd65f8cefa8b19d5bc072ee3f9b72172436c783fc918f6f13b396dddb935c5e70a3bd748888d
+  languageName: node
+  linkType: hard
+
 "sucrase@npm:^3.32.0":
   version: 3.32.0
   resolution: "sucrase@npm:3.32.0"