From 237e67c5d4c55a5ed875e638f3ab7c40b9e38854 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 26 Jun 2024 15:17:36 +0530
Subject: [PATCH] feat(web): subgraph-status-banner

---
 web/.parcelrc                   | 13 +++++++--
 web/package.json                |  1 +
 web/src/layout/Header/index.tsx | 50 +++++++++++++++++++++++++++------
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/web/.parcelrc b/web/.parcelrc
index 8b6b0a4..36add04 100644
--- a/web/.parcelrc
+++ b/web/.parcelrc
@@ -1,8 +1,15 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.svg": ["...", "@parcel/transformer-svg-react"],
-    "tsx:*.svg": ["@parcel/transformer-svg-react"],
-    "tsx:*": ["..."]
+    "web/src/**/*.svg": [
+      "...",
+      "@parcel/transformer-svg-react"
+    ],
+    "tsx:*.svg": [
+      "@parcel/transformer-svg-react"
+    ],
+    "tsx:*": [
+      "..."
+    ]
   }
 }
diff --git a/web/package.json b/web/package.json
index 4a7edab..1009a86 100644
--- a/web/package.json
+++ b/web/package.json
@@ -109,6 +109,7 @@
     "react-use": "^17.4.3",
     "siwe": "^2.3.2",
     "styled-components": "^5.3.11",
+    "subgraph-status": "^1.2.3",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13"
   }
diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx
index b69c3d5..7e46a34 100644
--- a/web/src/layout/Header/index.tsx
+++ b/web/src/layout/Header/index.tsx
@@ -1,18 +1,25 @@
 import React from "react";
-import styled from "styled-components";
-import MobileHeader from "./MobileHeader";
+import styled, { useTheme } from "styled-components";
+
 import DesktopHeader from "./DesktopHeader";
+import MobileHeader from "./MobileHeader";
+import { StatusBanner } from "subgraph-status";
+import { getGraphqlUrl } from "utils/getGraphqlUrl";
 
 const Container = styled.div`
   position: sticky;
-  z-index: 1;
+  z-index: 30;
   top: 0;
   width: 100%;
-  height: 64px;
   background-color: ${({ theme }) => theme.primaryPurple};
 
-  padding: 0 24px;
   display: flex;
+  flex-wrap: wrap;
+`;
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  padding: 4px 24px 8px;
 `;
 
 export const PopupContainer = styled.div`
@@ -24,13 +31,40 @@ export const PopupContainer = styled.div`
   z-index: 30;
 `;
 
+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
+        theme={{
+          colors: {
+            main: theme.whiteBackground,
+            primary: theme.primaryText,
+            secondary: theme.secondaryText,
+          },
+        }}
+        subgraphs={[
+          { name: "Curate", url: getGraphqlUrl(false) },
+          { name: "Kleros Core", url: getGraphqlUrl(true) },
+        ]}
+      />
+      <HeaderContainer>
+        <DesktopHeader />
+        <MobileHeader />
+      </HeaderContainer>
     </Container>
   );
 };
 
-export default Header;
\ No newline at end of file
+export default Header;