From 0bcef178fe238bfb6b8c5e7aa778ae236f764f50 Mon Sep 17 00:00:00 2001
From: theBeardA <35360097+theBeardA@users.noreply.github.com>
Date: Tue, 23 Dec 2025 02:21:52 +0500
Subject: [PATCH 1/2] shutdown banner

---
 .changeset/eight-dryers-stare.md              |  5 ++
 src/components/Form/createExtraValidation.tsx |  4 +-
 .../ShutdownBanner/ShutdownBanner.tsx         | 54 +++++++++++++++++++
 src/components/ShutdownBanner/index.ts        |  1 +
 .../Projects/Storage/SunsetMessage.tsx        | 11 ++--
 src/pages/_app.tsx                            |  2 +
 .../projects/[projectId]/storage/index.tsx    |  4 +-
 7 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/eight-dryers-stare.md
 create mode 100644 src/components/ShutdownBanner/ShutdownBanner.tsx
 create mode 100644 src/components/ShutdownBanner/index.ts

diff --git a/.changeset/eight-dryers-stare.md b/.changeset/eight-dryers-stare.md
new file mode 100644
index 00000000..e5bb0c32
--- /dev/null
+++ b/.changeset/eight-dryers-stare.md
@@ -0,0 +1,5 @@
+---
+"@fleek-platform/dashboard": patch
+---
+
+add service shutdown banner
diff --git a/src/components/Form/createExtraValidation.tsx b/src/components/Form/createExtraValidation.tsx
index 58dfb631..df02e12c 100644
--- a/src/components/Form/createExtraValidation.tsx
+++ b/src/components/Form/createExtraValidation.tsx
@@ -107,7 +107,9 @@ export const createExtraValidation = {
 
       const viemClient = createPublicClient({
         chain: mainnet,
-        transport: http('https://rpc.ankr.com/eth/629287b99a3f9953297946a763f2b38f2b8c23d657da96d844903ae91aa0cdb3'),
+        transport: http(
+          'https://rpc.ankr.com/eth/629287b99a3f9953297946a763f2b38f2b8c23d657da96d844903ae91aa0cdb3',
+        ),
       });
 
       const normalizedName = normalize(name).split('.');
diff --git a/src/components/ShutdownBanner/ShutdownBanner.tsx b/src/components/ShutdownBanner/ShutdownBanner.tsx
new file mode 100644
index 00000000..aa21baa4
--- /dev/null
+++ b/src/components/ShutdownBanner/ShutdownBanner.tsx
@@ -0,0 +1,54 @@
+import { ExternalLink } from '@/components';
+
+export const ShutdownBanner = () => {
+  return (
+    <div
+      className="w-full px-4 py-2 sm:px-6"
+      style={{
+        backgroundColor: '#7f1d1d',
+        borderBottom: '1px solid #dc2626',
+      }}
+    >
+      <div className="mx-auto flex max-w-[1300px] items-center justify-between gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+          <svg
+            className="shrink-0"
+            style={{ width: '14px', height: '14px', color: '#fbbf24' }}
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+          </svg>
+
+          <span
+            className="font-plex-sans text-[13px] font-bold uppercase tracking-wide sm:text-[14px] whitespace-nowrap"
+            style={{ color: '#fbbf24' }}
+          >
+            Service Shutdown Notice
+          </span>
+
+          <span
+            className="font-plex-sans text-[12px] font-medium leading-relaxed sm:text-[13px]"
+            style={{ color: '#ffffff' }}
+          >
+            Fleek Hosting and Eliza Agents service will be permanently shut down
+            on{' '}
+            <span className="font-bold" style={{ color: '#fcd34d' }}>
+              January 31, 2026
+            </span>
+            . All data and access will cease. If you need any help with
+            migration{' '}
+            <ExternalLink
+              href="https://resources.fleek.xyz/requests/new/"
+              className="font-bold underline hover:opacity-80 transition-opacity"
+              style={{ color: '#fcd34d' }}
+            >
+              contact support
+            </ExternalLink>
+            .
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ShutdownBanner/index.ts b/src/components/ShutdownBanner/index.ts
new file mode 100644
index 00000000..63312756
--- /dev/null
+++ b/src/components/ShutdownBanner/index.ts
@@ -0,0 +1 @@
+export { ShutdownBanner } from './ShutdownBanner';
diff --git a/src/fragments/Projects/Storage/SunsetMessage.tsx b/src/fragments/Projects/Storage/SunsetMessage.tsx
index 3184b0f7..65ab8d01 100644
--- a/src/fragments/Projects/Storage/SunsetMessage.tsx
+++ b/src/fragments/Projects/Storage/SunsetMessage.tsx
@@ -1,7 +1,10 @@
-import { AlertBox } from "@/components";
+import { AlertBox } from '@/components';
 
 export const SunsetMessage: React.FC = () => {
   return (
-    <AlertBox size="sm" className="font-medium">Fleek storage has been sunsetted and you cannot upload new files or folders anymore.</AlertBox>
-  );   
-};
\ No newline at end of file
+    <AlertBox size="sm" className="font-medium">
+      Fleek storage has been sunsetted and you cannot upload new files or
+      folders anymore.
+    </AlertBox>
+  );
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 433d5702..bc250fbb 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,6 +18,7 @@ import HomePage from '@/pages/LandingPage';
 import { LegacyPlanUpgradeModal } from '@/components/LegacyPlanUpgradeModal/LegacyPlanUpgradeModal';
 import { LoadingFullScreen } from '@/components/Loading';
 import { setDefined, getDefined, DEFINED_OVERRIDES_FILENAME } from '../defined';
+import { ShutdownBanner } from '@/components/ShutdownBanner';
 
 const loadConfig = async (): Promise<boolean> => {
   const dashboardBasePath = getDashboardUrl();
@@ -102,6 +103,7 @@ const App = ({ Component, pageProps, requestCookies }: AppProps) => {
   return (
     <>
       <meta name="robots" content="noindex, nofollow" />
+      <ShutdownBanner />
       <Providers requestCookies={requestCookies} forcedTheme={forcedTheme}>
         {getLayout(<Component {...pageProps} />)}
         <ToastsContainer />
diff --git a/src/pages/projects/[projectId]/storage/index.tsx b/src/pages/projects/[projectId]/storage/index.tsx
index f641801b..d1b77805 100644
--- a/src/pages/projects/[projectId]/storage/index.tsx
+++ b/src/pages/projects/[projectId]/storage/index.tsx
@@ -14,9 +14,7 @@ const Storage: Page = () => {
   );
 };
 
-Storage.getLayout = (page) => (
-  <Projects.Layout>{page}</Projects.Layout>
-);
+Storage.getLayout = (page) => <Projects.Layout>{page}</Projects.Layout>;
 
 export default withAccess({
   Component: Storage,

From 2bff4a64f70a0e774553b413a2123bdd7c0c7540 Mon Sep 17 00:00:00 2001
From: theBeardA <35360097+theBeardA@users.noreply.github.com>
Date: Tue, 23 Dec 2025 04:12:48 +0500
Subject: [PATCH 2/2] fix color for external link

---
 src/components/ShutdownBanner/ShutdownBanner.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ShutdownBanner/ShutdownBanner.tsx b/src/components/ShutdownBanner/ShutdownBanner.tsx
index aa21baa4..28872ee4 100644
--- a/src/components/ShutdownBanner/ShutdownBanner.tsx
+++ b/src/components/ShutdownBanner/ShutdownBanner.tsx
@@ -41,9 +41,8 @@ export const ShutdownBanner = () => {
             <ExternalLink
               href="https://resources.fleek.xyz/requests/new/"
               className="font-bold underline hover:opacity-80 transition-opacity"
-              style={{ color: '#fcd34d' }}
             >
-              contact support
+              <span style={{ color: '#ffd79d' }}>contact support</span>
             </ExternalLink>
             .
           </span>