From e43b8a65bbd0ce0b6186cd9240b7e79ac1ddaad7 Mon Sep 17 00:00:00 2001
From: JonnieSparkles <jonniesparkles@users.noreply.github.com>
Date: Mon, 27 Apr 2026 08:43:59 -0400
Subject: [PATCH] feat: add AnnouncementBanner component for migration
 notification

- Introduced a new AnnouncementBanner component to display migration information for ar.io users.
- Integrated the banner into the main layout with customizable props for mobile text, badge, and call-to-action link.
- The banner supports dismissal and persists the user's choice in local storage.
---
 src/app/layout.tsx                     |  12 +++
 src/components/announcement-banner.tsx | 132 +++++++++++++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 src/components/announcement-banner.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 02c132494..83ffaf252 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import Script from "next/script";
 import SearchDialog from "@/components/search";
 import { AskArieProvider } from "@/components/ask-arie/AskArieContext";
 import { AskArieWidget } from "@/components/ask-arie/AskArieWidget";
+import { AnnouncementBanner } from "@/components/announcement-banner";
 import { Plus_Jakarta_Sans } from "next/font/google";
 
 const plusJakartaSans = Plus_Jakarta_Sans({
@@ -50,6 +51,17 @@ export default function Layout({ children }: LayoutProps<"/">) {
           }}
         >
           <AskArieProvider>
+            <AnnouncementBanner
+              storageKey="solana-migration"
+              mobileText="Ar.io is migrating to Solana."
+              badgeText="MAY 2026"
+              ctaHref="https://ar.io/solana-migration"
+              ctaLabel="Learn more"
+              dismissAriaLabel="Dismiss migration banner"
+            >
+              The ar.io smart contract and token are migrating to Solana.
+              Register now to migrate your assets before the deadline.
+            </AnnouncementBanner>
             {children}
             <AskArieWidget />
           </AskArieProvider>
diff --git a/src/components/announcement-banner.tsx b/src/components/announcement-banner.tsx
new file mode 100644
index 000000000..d8b2ba88e
--- /dev/null
+++ b/src/components/announcement-banner.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { X } from "lucide-react";
+import Link from "next/link";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+
+type AnnouncementBannerProps = {
+  storageKey: string;
+  children: ReactNode;
+  mobileText?: string;
+  badgeText?: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+  dismissAriaLabel?: string;
+};
+
+export function AnnouncementBanner({
+  storageKey,
+  children,
+  mobileText,
+  badgeText,
+  ctaHref,
+  ctaLabel,
+  dismissAriaLabel = "Dismiss announcement",
+}: AnnouncementBannerProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const bannerRef = useRef<HTMLDivElement | null>(null);
+  const dismissKey = useMemo(
+    () => `announcement-banner-dismissed:${storageKey}`,
+    [storageKey],
+  );
+
+  useEffect(() => {
+    const isDismissed = localStorage.getItem(dismissKey) === "true";
+    setIsVisible(!isDismissed);
+  }, [dismissKey]);
+
+  const dismissBanner = () => {
+    localStorage.setItem(dismissKey, "true");
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    if (!isVisible) {
+      document.documentElement.style.setProperty("--fd-banner-height", "0px");
+      return;
+    }
+
+    const bannerElement = bannerRef.current;
+    if (!bannerElement) {
+      return;
+    }
+
+    const updateBannerHeight = () => {
+      document.documentElement.style.setProperty(
+        "--fd-banner-height",
+        `${bannerElement.offsetHeight}px`,
+      );
+    };
+
+    updateBannerHeight();
+
+    const resizeObserver = new ResizeObserver(updateBannerHeight);
+    resizeObserver.observe(bannerElement);
+
+    return () => {
+      resizeObserver.disconnect();
+      document.documentElement.style.setProperty("--fd-banner-height", "0px");
+    };
+  }, [isVisible]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={bannerRef}
+      className="relative z-[60] w-full border-b border-white/20 bg-[#5B2AD1] text-white"
+    >
+      <div className="mx-auto flex max-w-[90rem] flex-col items-center gap-2 px-4 py-3 text-sm sm:flex-row sm:justify-center sm:gap-3 sm:px-4 sm:py-2 sm:pr-12">
+        {badgeText ? (
+          <span className="hidden rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-semibold tracking-[0.08em] text-white/95 sm:inline-flex">
+            {badgeText}
+          </span>
+        ) : null}
+        <p className="text-center leading-5 text-white/95 sm:text-left">
+          {mobileText ? <span className="sm:hidden">{mobileText}</span> : null}
+          <span className={mobileText ? "hidden sm:inline" : ""}>{children}</span>
+        </p>
+        {ctaHref && ctaLabel ? (
+          <Link
+            href={ctaHref}
+            target="_blank"
+            rel="noreferrer"
+            className="hidden items-center rounded-full bg-white/20 px-3 py-1 font-semibold text-white transition hover:bg-white/30 sm:inline-flex"
+          >
+            {ctaLabel} &#8594;
+          </Link>
+        ) : null}
+        <div className="flex items-center gap-3 sm:hidden">
+          {ctaHref && ctaLabel ? (
+            <Link
+              href={ctaHref}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center rounded-full bg-white/20 px-4 py-1.5 font-semibold text-white transition hover:bg-white/30"
+            >
+              {ctaLabel} &#8594;
+            </Link>
+          ) : null}
+          <button
+            type="button"
+            aria-label={dismissAriaLabel}
+            onClick={dismissBanner}
+            className="rounded p-1 text-white/80 transition hover:bg-white/20 hover:text-white"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <button
+          type="button"
+          aria-label={dismissAriaLabel}
+          onClick={dismissBanner}
+          className="hidden rounded p-1 text-white/80 transition hover:bg-white/20 hover:text-white sm:absolute sm:right-3 sm:top-1/2 sm:block sm:-translate-y-1/2"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}