Closing Banner

packages/files-ui/src/App.tsx

@@ -12,7 +12,7 @@ import { ThresholdKeyProvider } from "./Contexts/ThresholdKeyContext"
 import { lightTheme } from "./Themes/LightTheme"
 import { darkTheme } from "./Themes/DarkTheme"
 import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
-import { FilesApiProvider }  from "./Contexts/FilesApiContext"
+import { FilesApiProvider } from "./Contexts/FilesApiContext"
 import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
@@ -21,6 +21,7 @@ import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
 import { HelmetProvider } from "react-helmet-async"
 
 import ErrorModal from "./Components/Modules/ErrorModal"
+import Banner from "./Components/Elements/Banner"
 
 // making material and jss use one className generator
 const generateClassName = createGenerateClassName({
@@ -123,6 +124,8 @@ const App = () => {
                               <BillingProvider>
                                 <PosthogProvider>
                                   <AppWrapper>
+                                    {/* Banner on top of the app*/}
+                                    <Banner />
                                     <FilesRoutes />
                                   </AppWrapper>
                                 </PosthogProvider>

packages/files-ui/src/Components/Elements/Banner.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Box, Typography } from "@material-ui/core"
+
+const Banner = () => {
+  return (
+    <Box
+      width="100%"
+      padding={2}
+      bgcolor="#ffc4c4"
+      border={1}
+      borderColor="grey.300"
+      boxShadow={1}
+      textAlign="center"
+      margin={0}
+    >
+      <Typography variant="body1" >
+        {/* eslint-disable-next-line max-len */}
+        To our valued customers, ChainSafe Files will be sunset on March 10th, 2025. Please retrieve all of your files on the platform before this date to avoid losing access. Feel free to send an email to [email protected] if you have any questions or concerns.
+      </Typography>
+    </Box>
+  )
+}
+
+export default Banner

packages/storage-ui/src/App.tsx

@@ -10,7 +10,7 @@ import { LanguageProvider } from "./Contexts/LanguageContext"
 import { lightTheme } from "./Themes/LightTheme"
 import { darkTheme } from "./Themes/DarkTheme"
 import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
-import { StorageApiProvider }  from "./Contexts/StorageApiContext"
+import { StorageApiProvider } from "./Contexts/StorageApiContext"
 import { StorageProvider } from "./Contexts/StorageContext"
 import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
@@ -19,6 +19,7 @@ import { PosthogProvider } from "./Contexts/PosthogContext"
 import { HelmetProvider } from "react-helmet-async"
 import ErrorModal from "./Components/Modules/ErrorModal"
 import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
+import Banner from "./Components/Elements/Banner"
 
 // making material and jss use one className generator
 const generateClassName = createGenerateClassName({
@@ -104,6 +105,8 @@ const App = () => {
                             <BillingProvider>
                               <PosthogProvider>
                                 <AppWrapper>
+                                  {/* Banner on top of the app*/}
+                                  <Banner />
                                   <StorageRoutes />
                                 </AppWrapper>
                               </PosthogProvider>

packages/storage-ui/src/Components/Elements/Banner.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Box, Typography } from "@material-ui/core"
+
+const Banner = () => {
+  return (
+    <Box
+      width="100%"
+      padding={2}
+      bgcolor="#ffc4c4"
+      border={1}
+      borderColor="grey.300"
+      boxShadow={1}
+      textAlign="center"
+      margin={0}
+    >
+      <Typography variant="body1" >
+        {/* eslint-disable-next-line max-len */}
+        To our valued customers, ChainSafe Storage will be sunset on March 10th, 2025. Please retrieve all of your files on the platform before this date to avoid losing access. Feel free to send an email to [email protected] if you have any questions or concerns.
+      </Typography>
+    </Box>
+  )
+}
+
+export default Banner