From 2507bfd65da092affaa4479a09bdcf98d207d30a Mon Sep 17 00:00:00 2001
From: murderteeth <murdertxxth@gmail.com>
Date: Tue, 7 Apr 2026 21:43:28 +0000
Subject: [PATCH] Add disclaimer banner for hosted site

The hosted site at safeutils.openzeppelin.com displays no indication
that the tool is unaudited and intended as a proof of concept, despite
the README explicitly stating this. Add a dismissible warning banner
to the UI that mirrors the README disclaimer, including links to the
Terms of Service and the GitHub repo for running locally.

The banner is hidden on localhost since the README recommends local
usage as the safer option. Set NEXT_PUBLIC_ALWAYS_SHOW_DISCLAIMER=true
to force it on for local testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/app/layout.tsx                   |  2 +
 app/components/disclaimer-banner.tsx | 60 ++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 app/components/disclaimer-banner.tsx

diff --git a/app/app/layout.tsx b/app/app/layout.tsx
index 648acfb..9d8dd28 100644
--- a/app/app/layout.tsx
+++ b/app/app/layout.tsx
@@ -6,6 +6,7 @@ import { Footer } from '@/components/footer'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import { GoogleAnalytics } from '@next/third-parties/google'
 import Navbar from '@/components/navbar'
+import { DisclaimerBanner } from '@/components/disclaimer-banner'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -50,6 +51,7 @@ export default function RootLayout({
             <div className="min-h-screen flex flex-col bg-gradient-main dark:bg-gradient-main-dark">
               <div className="flex flex-col flex-grow">
                 <Navbar />
+                <DisclaimerBanner />
                 <main className="flex-grow flex flex-col items-center justify-start pt-5 mt-5">
                   {children}
                 </main>
diff --git a/app/components/disclaimer-banner.tsx b/app/components/disclaimer-banner.tsx
new file mode 100644
index 0000000..20b350a
--- /dev/null
+++ b/app/components/disclaimer-banner.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { AlertTriangle, X } from "lucide-react";
+
+const ALWAYS_SHOW = process.env.NEXT_PUBLIC_ALWAYS_SHOW_DISCLAIMER === "true";
+
+export function DisclaimerBanner() {
+  const [dismissed, setDismissed] = useState(false);
+  const [isLocalhost, setIsLocalhost] = useState(!ALWAYS_SHOW);
+
+  useEffect(() => {
+    if (ALWAYS_SHOW) return;
+    const host = window.location.hostname;
+    setIsLocalhost(host === "localhost" || host === "127.0.0.1");
+  }, []);
+
+  if (dismissed || isLocalhost) {
+    return null;
+  }
+
+  return (
+    <div className="w-full mt-14 bg-yellow-50 dark:bg-yellow-950/40 border-b border-yellow-300 dark:border-yellow-700 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200">
+      <div className="max-w-screen-xl mx-auto flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4 flex-shrink-0" />
+          <p>
+            This tool has not been audited and is provided as a proof of concept.
+            Use at your own risk per our{" "}
+            <a
+              href="https://www.openzeppelin.com/tos"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline font-medium hover:text-yellow-900 dark:hover:text-yellow-100"
+            >
+              Terms of Service
+            </a>
+            . Where possible, you should{" "}
+            <a
+              href="https://github.com/openzeppelin/safe-utils"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline font-medium hover:text-yellow-900 dark:hover:text-yellow-100"
+            >
+              run this tool locally
+            </a>
+            .
+          </p>
+        </div>
+        <button
+          onClick={() => setDismissed(true)}
+          className="flex-shrink-0 p-0.5 rounded hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors"
+          aria-label="Dismiss disclaimer"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}